diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..52d5ff04
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 5203d1e0..82e5390c 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,7 +1,7 @@
 import {readFileSync} from 'node:fs'
-import {defineConfig, HeadConfig} from 'vitepress'
+import {defineConfig, type DefaultTheme, HeadConfig} from 'vitepress'
 import llmstxt from 'vitepress-plugin-llms'
-import imageSizePlugin from "./markdownit-imagesize-plugin";
+import imageSizePlugin from "./markdownit-imagesize-plugin.ts";
 
 const isProd = process.env.NODE_ENV === 'production';
 const llmsTxtTemplate = readFileSync(new URL('./llms-txt-template.md', import.meta.url), 'utf-8').trimEnd();
@@ -17,6 +17,13 @@ function getPlausibleScript() : HeadConfig[] {
 }
 
 
+/* llms.txt lists documentation pages only; an external sidebar link (GitHub releases) has no markdown source */
+function withoutExternalLinks(items: DefaultTheme.SidebarItem[]): DefaultTheme.SidebarItem[] {
+    return items
+        .filter(item => !item.link || !/^https?:\/\//.test(item.link))
+        .map(item => item.items ? { ...item, items: withoutExternalLinks(item.items) } : item);
+}
+
 export default defineConfig({
     lang: 'en-US',
     title: 'QuestPDF',
@@ -26,6 +33,7 @@ export default defineConfig({
 
     vite: {
       plugins: [llmstxt({
+          sidebar: sidebar => Array.isArray(sidebar) ? withoutExternalLinks(sidebar) : sidebar,
           domain: 'https://www.questpdf.com',
           customLLMsTxtTemplate: llmsTxtTemplate,
           ignoreFiles: [
@@ -48,8 +56,7 @@ export default defineConfig({
     },
 
     head: [
-        ['link', { rel: 'icon', href: '/logo.png', type: 'image/png' }],
-        ['script', { src: 'https://kit.fontawesome.com/294da38298.js', crossorigin: 'anonymous', async: "" }],
+        ['link', { rel: 'icon', href: '/favicon.png', type: 'image/png', sizes: '64x64' }],
         ...getPlausibleScript(),
         ['meta', { name: "title", content: "C# PDF Generation Library | QuestPDF for .NET" }],
         ['meta', { name: "description", content: "Generate and edit PDF documents in your C# applications using the QuestPDF library and its C# Fluent API. Build invoices, reports and data exports with ease." }],
@@ -57,7 +64,12 @@ export default defineConfig({
     ],
 
     themeConfig: {
-        logo: '/logo.webp',
+        logo: {
+            light: '/questpdf-logo-nav-light.webp',
+            dark: '/questpdf-logo-nav-dark.webp',
+            alt: 'QuestPDF'
+        },
+        siteTitle: false,
         search: {
             provider: 'algolia',
             options: {
@@ -68,7 +80,7 @@ export default defineConfig({
             }
         },
         nav: [
-            { text: 'Documentation', link: '/quick-start' },
+            { 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: 'Pricing', link: '/pricing' },
             { text: 'GitHub', link: 'https://github.com/QuestPDF/QuestPDF', noIcon: true },
diff --git a/docs/.vitepress/markdownit-imagesize-plugin.ts b/docs/.vitepress/markdownit-imagesize-plugin.ts
index cfbb0c09..2ae9e668 100644
--- a/docs/.vitepress/markdownit-imagesize-plugin.ts
+++ b/docs/.vitepress/markdownit-imagesize-plugin.ts
@@ -61,6 +61,9 @@ const imageSizePlugin: PluginWithOptions = (md) => {
                 applyImageDimensions(token, imagePath)
         }
 
+        if (!token.attrGet('loading'))
+            token.attrSet('loading', 'lazy')
+
         return defaultRenderer(tokens, idx, options, env, self)
     }
 }
diff --git a/docs/.vitepress/theme/Contact.vue b/docs/.vitepress/theme/Contact.vue
index f74904e2..84236ddd 100644
--- a/docs/.vitepress/theme/Contact.vue
+++ b/docs/.vitepress/theme/Contact.vue
@@ -1,19 +1,23 @@
 <script setup lang="ts">
+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";
 interface Link {
   href: string;
   label: string;
 }
 
 interface ContactInformation {
-    icon: string;
-    title: string;
-    description: string;
-    links: Link[];
+  icon: IconDefinition;
+  title: string;
+  description: string;
+  links: Link[];
 }
 
 const contacts: ContactInformation[] = [
   {
-    icon: "fa-duotone fa-user-group",
+    icon: faUserGroup,
     title: "Community Support",
     description: "Encountering an issue or have a feature idea? Join our community on GitHub. It is the best place to report bugs, discuss improvements, and share your insights with other developers.",
     links: [
@@ -24,7 +28,7 @@ const contacts: ContactInformation[] = [
     ]
   },
   {
-    icon: "fa-duotone fa-id-card",
+    icon: faIdCard,
     title: "Customer Portal",
     description: "Access your subscription details, download invoices, update payment methods, or manage your license. Our customer portal provides a convenient way to handle all your account needs in one place.",
     links: [
@@ -35,7 +39,7 @@ const contacts: ContactInformation[] = [
     ]
   },
   {
-    icon: "fa-duotone fa-credit-card",
+    icon: faCreditCard,
     title: "Payment Support",
     description: "We partner with Paddle to guarantee secure payments and global tax compliance. Please reach out to their team directly for assistance with invoices, billing inquiries, or returns.",
     links: [
@@ -50,7 +54,7 @@ const contacts: ContactInformation[] = [
     ]
   },
   {
-    icon: "fa-duotone fa-envelope",
+    icon: faEnvelope,
     title: "Get in Touch",
     description: "Have a question about licensing, or just want to share feedback? Send us an email. We value your input and are always happy to help with non-technical inquiries or dedicated support.",
     links: [
@@ -64,69 +68,158 @@ const contacts: ContactInformation[] = [
 </script>
 
 <template>
-  <div class="custom-page">
-    <div class="container reverse-background">
-      <div class="content">
-
-        <section class="contacts">
-          <template v-for="contact of contacts" :key="contact">
-            <article class="card">
-              <i class="fa-2xl" :class="[contact.icon]"></i>
-              <h3>{{ contact.title }}</h3>
-              <p>{{ contact.description }}</p>
-
-              <div class="links">
-                <a v-for="link in contact.links" class="action" :href="link.href" target="_blank">{{ link.label }}</a>
-              </div>
-            </article>
-          </template>
-
-          <article class="card business-details">
-            <i class="love-icon fa-duotone fa-heart fa-swap-opacity fa-2xl"></i>
-            <h3>QuestPDF is owned and proudly developed by:</h3>
-            <p>Marcin Ziąbek CodeFlint</p>
-            <p>Chrzanowska 29<br>32-551 Mętków<br>Poland</p>
-            <p>contact@questpdf.com<br>VAT: PL6282275649</p>
-          </article>
-        </section>
-
-      </div>
+  <div class="custom-page contact-page texture-dots">
+    <div class="content">
+      <header class="section-header contact-header">
+        <h1>Contact us</h1>
+      </header>
+
+      <section class="contacts">
+        <article v-for="contact of contacts" :key="contact.title" class="panel contact-card">
+          <div class="icon-tile">
+            <Icon :icon="contact.icon" />
+          </div>
+
+          <h3 class="card-title">{{ contact.title }}</h3>
+          <p class="card-description">{{ contact.description }}</p>
+
+          <div class="links">
+            <a v-for="link in contact.links" :key="link.href" class="action" :href="link.href" :target="link.href.startsWith('http') ? '_blank' : undefined">{{ link.label }}</a>
+          </div>
+        </article>
+
+        <div class="dotted-divider"></div>
+
+        <article class="panel business-details">
+          <div class="business-owner">
+            <div class="icon-tile">
+              <Icon class="love-icon" :icon="faHeart" />
+            </div>
+
+            <div>
+              <p class="business-intro">QuestPDF is owned and proudly developed by</p>
+              <h3 class="business-name">Marcin Ziąbek CodeFlint</h3>
+            </div>
+          </div>
+
+          <dl class="business-facts">
+            <div>
+              <dt>Address</dt>
+              <dd>Chrzanowska 29<br>32-551 Mętków<br>Poland</dd>
+            </div>
+
+            <div>
+              <dt>Email</dt>
+              <dd>contact@questpdf.com</dd>
+            </div>
+
+            <div>
+              <dt>VAT</dt>
+              <dd>PL6282275649</dd>
+            </div>
+          </dl>
+        </article>
+      </section>
     </div>
   </div>
 </template>
 
 <style scoped>
 
+.contact-header {
+  margin-bottom: 48px;
+}
+
 .contacts {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 32px;
 }
 
 @media screen and (max-width: 750px) {
   .contacts {
-    grid-template-columns: 1fr;
-    gap: 32px;
+    grid-template-columns: minmax(0, 1fr);
   }
 }
 
+.contact-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.contact-card .icon-tile {
+  margin-bottom: 16px;
+}
+
 .links {
   display: flex;
-  flex-direction: row;
   flex-wrap: wrap;
-  justify-content: end;
-  place-self: end;
-  gap: 16px;
-  margin-top: 24px;
+  gap: 12px;
+  margin-top: auto;
+  padding-top: 24px;
+}
+
+.business-details {
+  grid-column: 1 / -1;
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+  gap: 32px 48px;
+  align-items: center;
+}
+
+.business-owner {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.business-intro {
+  font-size: 0.9375rem;
+}
+
+.business-name {
+  margin: 4px 0 0;
+  line-height: 1.75rem;
 }
 
-.love-icon {
-  background-color: #F4433622 !important;
-  color: #F44336BB !important;
+.business-facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
+  gap: 24px;
+}
+
+.business-facts dt {
+  margin-bottom: 6px;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--vp-c-text-3);
+}
+
+.business-facts dd {
+  font-size: 0.9375rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-1);
+}
+
+@media screen and (max-width: 1180px) {
+  .business-details {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .business-facts {
+    gap: 16px;
+  }
 }
 
-.business-details p {
-  padding-top: 8px;
+.icon-tile .love-icon {
+  color: #F44336;
 }
 
 </style>
diff --git a/docs/.vitepress/theme/CustomPages.css b/docs/.vitepress/theme/CustomPages.css
index f1d830fd..cb691b91 100644
--- a/docs/.vitepress/theme/CustomPages.css
+++ b/docs/.vitepress/theme/CustomPages.css
@@ -1,96 +1,73 @@
-.custom-page > .container {
-  background-color: var(--vp-c-bg);
-}
-
-.container.no-border {
-  border-top: none;
-}
-
-.custom-page .content {
-  padding: 64px 32px;
-  margin: 0 auto;
-  max-width: 1216px;
-}
+/* --custom-page-gutter is the navbar's own side padding, so the logo, the content and the footer start at the same x.
+   light-dark() is lowered by the build for older browsers. */
 
-.custom-page .content-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+:root {
+  --custom-page-width: 1216px;
+  --custom-page-gutter: 32px;
+  --custom-page-bg: light-dark(#F6F8FC, #0E1014);
 }
 
-@media screen and (max-width: 768px) {
-  .custom-page .content {
-    padding: 48px 24px;
+@media screen and (max-width: 767px) {
+  :root {
+    --custom-page-gutter: 24px;
   }
 }
 
-.custom-page .reverse-background {
-  background-color: var(--vp-c-bg-alt);
+/* on the layout root, so the navbar and the footer widen with the page */
+.Layout:has(.custom-page) {
+  --custom-page-width: 90rem;
 }
 
-.custom-page .card {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  border: 1px solid #8882;
-  background-color: var(--vp-c-bg);
-  border-radius: 16px;
-  padding: 32px;
+.VPNavBar:not(.has-sidebar) .container {
+  max-width: calc(var(--custom-page-width) - 2 * var(--custom-page-gutter));
 }
 
-.custom-page .card img.icon {
-  height: 48px;
+/* VitePress gives the title the sidebar's width on every page but home, to line it up with a sidebar */
+.VPNavBar:not(.has-sidebar):not(.home) .container > .title {
+  min-width: 0;
 }
 
-.custom-page h3 {
-  margin-bottom: 8px;
-}
 
-.custom-page a:hover .card {
-  box-shadow: var(--elevation-hover);
-}
+/* The bases are wrapped in :where(), so a component rule naming the element's own class wins whatever order the
+   stylesheets load in. */
 
-.custom-page .card hr {
-  margin: 32px 0;
-  border: none;
-  border-top: 1px solid var(--vp-c-gutter);
-  width: 100%
+.custom-page :where(.content) {
+  padding: 64px var(--custom-page-gutter);
+  margin: 0 auto;
+  max-width: var(--custom-page-width);
 }
 
-@media screen and (max-width: 700px) {
-  .custom-page .card {
-    padding: 24px;
-  }
-
-  .custom-page .card hr {
-    border: 1px solid var(--vp-c-gutter);
+@media screen and (max-width: 767px) {
+  .custom-page :where(.content) {
+    padding-block: 48px;
   }
 }
 
 .custom-page h1 {
-  font-family: var(--vp-font-family-base);
-  font-size: 2.75rem;
+  font-size: clamp(2.25rem, 25.8px + 2.6vw, 2.75rem);
   font-weight: 700;
-  line-height: 3.25rem;
+  line-height: clamp(2.5rem, 24.7px + 3.9vw, 3.25rem);
+  letter-spacing: -0.02em;
   margin-bottom: 2rem;
 }
 
 .custom-page h2 {
-  font-family: var(--vp-font-family-base);
-  font-size: 2rem;
+  font-size: clamp(1.75rem, 22.9px + 1.3vw, 2rem);
   font-weight: 700;
-  line-height: 2.5rem;
+  line-height: clamp(2.25rem, 30.9px + 1.3vw, 2.5rem);
+  letter-spacing: -0.015em;
   margin-bottom: 1rem;
 }
 
 .custom-page h3 {
-  font-family: var(--vp-font-family-base);
   color: var(--vp-c-text-1);
   font-size: 1.25rem;
   font-weight: 600;
   line-height: 1.5rem;
-  margin: 24px 0 8px 0;
+}
+
+.custom-page :is(h1, h2, h3, .row-title) {
+  text-wrap: balance;
 }
 
 .custom-page p, .custom-page ul {
@@ -101,157 +78,299 @@
 }
 
 .custom-page p.sub-header {
-  color: var(--vp-c-text-2);
   font-size: 1.25rem;
   line-height: 2rem;
   margin-bottom: 1.25rem;
 }
 
-.custom-page .section-header {
+@media screen and (max-width: 700px) {
+  .custom-page p.sub-header {
+    color: var(--vp-c-text-1);
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+.custom-page :where(.section-header) {
   max-width: 650px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
+  text-align: center;
+}
 
-  .fa-2xl {
-    margin-bottom: 16px;
-  }
+/* Text in a panel */
+
+.custom-page .card-title {
+  margin: 0;
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: var(--vp-c-text-1);
 }
 
-.custom-page .section-header * {
-  text-align: center;
+.custom-page .card-description {
+  margin: 12px 0 0;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  color: var(--vp-c-text-2);
 }
 
-span.highlight-background {
-  background: -webkit-linear-gradient(120deg, #2979FF33, #00E5FF33);
+.custom-page .row-title {
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: 600;
   color: var(--vp-c-text-1);
-  font-weight: 500;
+}
 
-  border-radius: 8px;
-  padding: 4px 8px;
+.custom-page .row-description {
+  margin: 4px 0 0;
+  font-size: 1rem;
+  line-height: 1.625rem;
+  color: var(--vp-c-text-2);
 }
 
-.custom-page {
-  .fa-duotone, .fa-solid {
-    color: #2196F3;
+@media screen and (max-width: 768px) {
+  .custom-page .card-description {
+    font-size: 1rem;
+    line-height: 1.5rem;
   }
+}
 
-  .fa-2xl {
-    background-color: #2196F322;
-    border-radius: 12px;
-    padding: 12px 0;
-    font-size: 32px;
-    height: 56px;
-    min-width: 56px;
-    text-align: center;
-    line-height: 32px;
-  }
 
-  .fa-square-check {
-    font-size: 24px;
-    --fa-secondary-opacity: 0.2;
-  }
+/* Surfaces */
 
-  .fa-money-bill-transfer {
-    --fa-secondary-opacity: 0.6;
-  }
+.custom-page {
+  --panel-padding: clamp(32px, 22.4px + 1.38vw, 40px) clamp(24px, 4.7px + 2.76vw, 40px);
+  --surface: #FFFFFF;
+  --surface-inner: #F0F2F6;
+  /* VitePress's light divider is too faint on white */
+  --vp-c-divider: light-dark(#DBDDE1, #2E2E32);
+  --surface-edge:
+      inset 0 0 0 1px color-mix(in srgb, var(--vp-c-text-1) 7%, transparent),
+      0 1px 2px rgba(16, 24, 40, 0.04),
+      0 16px 40px -20px rgba(16, 24, 40, 0.16);
+  --surface-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0));
+  --surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 160px);
+}
 
-  .fa-star {
-    --fa-secondary-opacity: 0.9;
-  }
+html.dark .custom-page {
+  --surface: rgba(255, 255, 255, 0.045);
+  --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-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 160px);
+}
+
+/* the rim is a ::before whose gradient is masked to a one-pixel border, so the surface stays see-through */
+
+.custom-page :where(.panel) {
+  position: relative;
+  border-radius: 32px;
+  padding: var(--panel-padding);
+  background-color: var(--surface);
+  background-image: var(--surface-sheen);
+  box-shadow: var(--surface-edge);
+}
+
+.custom-page :where(.panel)::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  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;
+}
+
+.custom-page .icon-tile {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background-color: var(--surface-inner);
+}
+
+.custom-page .icon-tile .icon {
+  font-size: 1.25rem;
+  color: var(--vp-c-text-1);
+}
+
+/* Dot wings */
+
+.texture-dots {
+  position: relative;
+  isolation: isolate; /* keeps the wings (z-index: -1) above the canvas but below the content */
+}
+
+.texture-dots::before,
+.texture-dots::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 28%;
+  height: 420px;
+  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;
+}
 
-  .fa-calendar-circle-plus {
-    --fa-secondary-opacity: 0.6;
+.texture-dots::before {
+  left: 0;
+  mask-image: radial-gradient(ellipse 55% 55% at 40% 42%, #000, transparent 100%);
+}
+
+.texture-dots::after {
+  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);
+}
+
+@media screen and (max-width: 960px) {
+  .texture-dots::before,
+  .texture-dots::after {
+    display: none;
   }
 }
 
-.custom-page p a:not(.action) {
-  color: var(--vp-c-brand-1);
+
+/* Seam between sections */
+
+.custom-page .dotted-divider {
+  grid-column: 1 / -1;
+  height: 4px;
+  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-position: center;
+  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
 }
 
-.custom-page a:not(.action):hover {
-  color: var(--vp-c-brand-2);
+html.dark .custom-page .dotted-divider {
+  background-image: radial-gradient(circle, color-mix(in srgb, var(--vp-c-text-1) 16%, transparent) 1px, transparent 1.5px);
 }
 
-a.action {
-  display: inline-block;
-  text-align: center;
-  align-items: center;
-  font-weight: 500;
-  white-space: nowrap;
 
-  border-radius: 12px;
-  padding: 12px 24px;
-  line-height: 1;
+/* Page canvas: it lives here, not in the page components, because in dev a component's CSS loads only on the pages
+   that import it. */
 
-  background-color: #8883;
+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-grain: none;
 
-  color: var(--vp-c-text-1);
-  font-size: 1rem;
+  background-color: var(--custom-page-bg);
+  background-image:
+      var(--canvas-grain),
+      radial-gradient(ellipse 1400px 700px at 92% 0%, var(--canvas-glow), transparent 70%),
+      radial-gradient(ellipse 1000px 500px at 30% 0%, var(--canvas-glow-soft), transparent 70%),
+      radial-gradient(var(--canvas-glow-side-shape), var(--canvas-glow-side), transparent 70%);
+  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
+}
 
-  transition: all 0.2s ease-in-out;
+/* the homepage in light mode takes the side glow down the left edge; the more specific dark rule below keeps the
+   corner */
+body:has(.home-page) {
+  --canvas-glow-side-shape: ellipse 760px 500px at 0% 780px;
+  --canvas-glow-side: color-mix(in srgb, #2196F3 11%, transparent);
 }
 
-.card a.action {
-  padding: 12px 20px;
+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");
 }
 
-a.action:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--elevation);
+.custom-page p a {
+  color: var(--vp-c-brand-1);
+}
 
-  background-color: #8885;
-  cursor: pointer;
+.custom-page p a:hover {
+  color: var(--vp-c-brand-2);
 }
 
-a.action.primary {
-  color: #FFF;
-  background-color: #2196F3;
-  font-weight: bold;
+/* Buttons: a <button> takes the class too, for a control that only runs script (the VitePress router intercepts
+   clicks on links). A filled button sets --fill, and --filled-edge tints its lift with it. */
+:is(a, button).action {
+  --filled-edge:
+      inset 0 1px 0 rgba(255, 255, 255, 0.18),
+      0 1px 2px rgba(16, 24, 40, 0.12),
+      0 6px 16px -8px color-mix(in srgb, var(--fill, #000) 70%, transparent);
+
+  display: inline-block;
+  max-width: 100%;
+  text-align: center;
+
+  border-radius: 10px;
+  padding: 10px 22px;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+
+  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);
+
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
 }
 
-a.action.primary:hover {
-  background-color: #1E88E5;
+:is(a, button).action:hover {
+  transform: translateY(-1px);
+  background-color: color-mix(in srgb, var(--surface-inner), var(--vp-c-text-1) 4%);
+  box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--vp-c-text-1) 20%, transparent),
+      0 4px 12px -4px rgba(16, 24, 40, 0.14);
 }
 
-.custom-page {
-  .unordered-list {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-
-    p {
-      font-size: 1.0625rem;
-    }
-
-    .unordered-list-item {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      grid-gap: 12px;
-    }
-  }
+html.dark :is(a, button).action {
+  --filled-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 16px -8px rgba(0, 0, 0, 0.6);
+
+  background-color: rgba(255, 255, 255, 0.07);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
+html.dark :is(a, button).action:hover {
+  background-color: rgba(255, 255, 255, 0.11);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
+}
 
-@media screen and (max-width: 700px) {
-  .custom-page h1 {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
+/* the dark rules name the primary button too, so the secondary's dark fill (a more specific rule) does not win */
+:is(a, button).action.primary,
+html.dark :is(a, button).action.primary {
+  --fill: #1976D2;
 
-  .custom-page h2 {
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-  }
+  color: #FFF;
+  background-color: var(--fill);
+  box-shadow: var(--filled-edge);
+}
 
-  .custom-page p.sub-header {
-    color: var(--vp-c-text-1);
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
+:is(a, button).action.primary:hover,
+html.dark :is(a, button).action.primary:hover {
+  background-color: light-dark(#1565C0, #1E88E5);
+}
 
-  .custom-page .unordered-list p {
-    font-size: 1rem !important;
+@media (pointer: coarse) {
+  :is(a, button).action {
+    padding-block: 12px;
   }
 }
diff --git a/docs/.vitepress/theme/FeaturesOverview.vue b/docs/.vitepress/theme/FeaturesOverview.vue
index 305d76b5..cbc9b938 100644
--- a/docs/.vitepress/theme/FeaturesOverview.vue
+++ b/docs/.vitepress/theme/FeaturesOverview.vue
@@ -1,777 +1,165 @@
-<template>
-  <div class="custom-page">
-    <div class="container reverse-background">
-      <div class="content">
-
-        <header class="section-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 v-for="category in categories" :key="category.name" class="card" >
-          <h3>{{ category.name }}</h3>
-
-          <template v-for="item in category.items" :key="item.name">
-            <component :is="item.link ? 'a' : 'div'" :href="item.link">
-              <div class="card-item">
-                <i class="icon" :class="item.icon" />
-                <div>
-                  <p><b>{{ item.name }}</b> - {{ item.description }}</p>
+<script setup lang="ts">
+import Icon from "./Icon.vue";
+import { featureChapters } from "./features";
+</script>
 
-                  <div v-if="item.tags" class="tags">
-                    <a v-for="tag in item.tags" :key="tag.label" :href="tag.url" class="tag">
-                      {{ tag.label }}
-                    </a>
-                  </div>
-                </div>
+<template>
+  <div 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>
+
+          <section class="chapter">
+            <h2 class="chapter-title">{{ chapter.name }}</h2>
+
+            <section v-for="category in chapter.categories" :key="category.name" class="panel category">
+              <h3 class="category-title">{{ category.name }}</h3>
+
+              <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">
+                    <strong class="row-title">{{ feature.name }}</strong>
+                    <span class="row-description">{{ feature.description }}</span>
+                  </span>
+                </a>
               </div>
-            </component>
-          </template>
-        </div>
-
+            </section>
+          </section>
+        </template>
       </div>
     </div>
   </div>
 </template>
 
-<script setup>
-const categories = [
-  {
-    name: "Companion App",
-    items: [
-      {
-        icon: "fa-regular fa-rocket",
-        name: "Installation and Getting Started",
-        description: "Download, install, and integrate the Companion App with your project. Enjoy real-time hot-reload preview.",
-        link: "/companion/usage.html"
-      },
-      {
-        icon: "fa-regular fa-ruler-combined",
-        name: "Precision Tools",
-        description: "Pixel-level inspection, coordinate picking, and distance measurement. Verify spacing, alignment, and positioning with precision.",
-        link: "/companion/features.html#magnifier",
-        tags: [
-          {
-            label: "Magnifier",
-            url: "/companion/features.html#magnifier",
-          },
-          {
-            label: "Coordinate Picker",
-            url: "/companion/features.html#coordinate-picker",
-          },
-          {
-            label: "Size measurement",
-            url: "/companion/features.html#size-measurement",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-compass",
-        name: "Navigation Tools",
-        description: "Explore document structure, search content by phrase, and jump directly to source code in your IDE.",
-        link: "/companion/features.html#element-selection",
-        tags: [
-          {
-            label: "Element Inspection",
-            url: "/companion/features.html#element-selection",
-          },
-          {
-            label: "Content Searching",
-            url: "/companion/features.html#content-searching",
-          },
-          {
-            label: "Go to Implementation",
-            url: "/companion/features.html#go-to-implementation",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-circle-exclamation",
-        name: "Runtime Exception Analysis",
-        description: "View detailed exception messages, stack traces, and source code context when errors occur during document generation.",
-        link: "/companion/features.html#runtime-exceptions"
-      },
-      {
-        icon: "fa-regular fa-bug",
-        name: "Layout Issue Debugging",
-        description: "Diagnose layout problems with color-coded status indicators. Identify root causes with intelligent heuristics.",
-        link: "/companion/features.html#layout-issue-debugging"
-      }
-    ]
-  },
-  {
-    name: "Document Operations",
-    items: [
-      {
-        icon: "fa-regular fa-copy",
-        name: "Merging Documents",
-        description: "Combine multiple PDF files into a single document. Merge entire documents or select specific pages from each source with full control.",
-        link: "/concepts/document-operations.html#merging-documents"
-      },
-      {
-        icon: "fa-regular fa-scissors",
-        name: "Page Selection / Extraction",
-        description: "Select specific pages using flexible range syntax. Extract, reorder, reverse, or filter pages with powerful selection patterns.",
-        link: "/concepts/document-operations.html#page-selection"
-      },
-      {
-        icon: "fa-regular fa-clone",
-        name: "Overlays / Underlays",
-        description: "Apply watermarks, headers, footers, or letterhead by layering PDF content. Configure which pages receive overlays with precise control.",
-        link: "/concepts/document-operations.html#overlays-and-underlays"
-      },
-      {
-        icon: "fa-regular fa-lock",
-        name: "Document 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.",
-        link: "/concepts/document-operations.html#document-encryption"
-      },
-      {
-        icon: "fa-regular fa-unlock",
-        name: "Document Decryption",
-        description: "Remove encryption and security restrictions from password-protected PDFs. Access content for further processing or distribution.",
-        link: "/concepts/document-operations.html#document-decryption"
-      },
-      {
-        icon: "fa-regular fa-globe",
-        name: "Document Linealization",
-        description: "Optimize PDFs for web delivery. Linearized files allow viewers to display content before the entire file downloads, improving user experience.",
-        link: "/concepts/document-operations.html#document-linearization"
-      },
-      {
-        icon: "fa-regular fa-paperclip",
-        name: "Files Attachments",
-        description: "Embed files directly within PDFs with full PDF/A compliance. Support for all embedded file relationships.",
-        link: "/concepts/document-operations.html#file-attachments"
-      },
-      {
-        icon: "fa-regular fa-tags",
-        name: "Extending XMP Metadata",
-        description: "Add custom XMP metadata to PDF/A documents. Essential for industry standards like ZUGFeRD invoices and other compliance requirements.",
-        link: "/concepts/document-operations.html#xmp-metadata-extension"
-      }
-    ]
-  },
-  {
-    name: "Important Concepts",
-    items: [
-      {
-        icon: "fa-regular fa-file-export",
-        name: "Output Types",
-        description: "Generate PDF, SVG, or raster images (PNG, JPEG, WEBP). Save to file, stream, or byte array for flexible integration.",
-        link: "/concepts/generating-output.html"
-      },
-      {
-        icon: "fa-regular fa-id-card",
-        name: "Document Metadata",
-        description: "Set PDF properties like title, author, subject, keywords, and timestamps. Improve document organization and searchability.",
-        link: "/concepts/document-metadata.html"
-      },
-      {
-        icon: "fa-regular fa-sliders",
-        name: "Document Settings",
-        description: "Configure PDF/A archival and PDF/UA accessibility compliance. Control compression, image quality, DPI, and content direction.",
-        link: "/concepts/document-settings.html"
-      },
-      {
-        icon: "fa-regular fa-lightbulb",
-        name: "Patterns and Practices",
-        description: "Best practices for clean, maintainable document code. Learn execution order, modular structure, local helpers, content styling, and extension methods.",
-        link: null,
-        tags: [
-          {
-            label: "Execution Order",
-            url: "/concepts/code-patterns/execution-order.html",
-          },
-          {
-            label: "Document Structure",
-            url: "/concepts/code-patterns/document-structure.html",
-          },
-          {
-            label: "Local Helpers",
-            url: "/concepts/code-patterns/local-helpers.html",
-          },
-          {
-            label: "Content Styling",
-            url: "/concepts/code-patterns/content-styling.html",
-          },
-          {
-            label: "Extension Methods",
-            url: "/concepts/code-patterns/extension-methods.html",
-          },
-        ]
-      },
-      {
-        icon: "fa-regular fa-universal-access",
-        name: "Accessibility",
-        description: "Generate inclusive PDFs with PDF/UA compliance and tagged content. Enable screen reader support with proper semantic structure for all users.",
-        link: "/concepts/accessibility.html"
-      },
-      {
-        icon: "fa-regular fa-puzzle-piece",
-        name: "Components",
-        description: "Build modular, reusable document blocks for cleaner architecture. Encapsulate layout patterns and maintain consistency across your entire codebase.",
-        link: "/concepts/code-patterns/components.html",
-        tags: [
-          {
-            label: "Components",
-            url: "/concepts/code-patterns/components.html",
-          },
-          {
-            label: "Dynamic Components",
-            url: "/concepts/code-patterns/dynamic-components.html",
-          },
-          {
-            label: "Capture Content Position",
-            url: "/concepts/code-patterns/capture-content-position.html",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-ruler",
-        name: "Length Units",
-        description: "Use points (default), inches, centimeters, millimeters, meters, or feet. Specify units directly in API methods for intuitive sizing.",
-        link: "/concepts/length-unit-types.html"
-      },
-      {
-        icon: "fa-regular fa-palette",
-        name: "Predefined Colors",
-        description: "Full Google Material Design color palette included. HEX, alpha channel, and shorthand formats supported with convenient color helpers.",
-        link: "/concepts/colors.html"
-      },
-      {
-        icon: "fa-regular fa-wand-magic-sparkles",
-        name: "Placeholders",
-        description: "Generate random text, colors, and images for rapid prototyping. Includes lorem ipsum, names, emails, dates, numbers, and gradient images.",
-        link: "/concepts/prototyping.html",
-        tags: [
-          {
-            label: "Text",
-            url: "/concepts/prototyping.html#text",
-          },
-          {
-            label: "Colors",
-            url: "/concepts/prototyping.html#colors",
-          },
-          {
-            label: "Images",
-            url: "/concepts/prototyping.html#image",
-          }
-        ]
-      },
-    ]
-  },
-  {
-    name: "Visual Content",
-    description: "Elements for rendering text, images, graphics, and visual styling.",
-    items: [
-      {
-        icon: "fa-regular fa-palette",
-        name: "Styled Containers",
-        description: "Enhance visual appearance of your content with decorative styling options.",
-        tags: [
-          {
-            label: "Background",
-            url: "/api-reference/background.html",
-          },
-          {
-            label: "Border",
-            url: "/api-reference/border.html",
-          },
-          {
-            label: "Rounded Corners",
-            url: "/api-reference/rounded-corners.html",
-          },
-          {
-            label: "Shadows",
-            url: "/api-reference/shadow.html",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-text",
-        name: "Text",
-        description: "Rich text rendering with multiple formatting options. Automatic wrapping and seamless pagination across pages.",
-        link: "/api-reference/text/basics.html",
-        tags: [
-          {
-            label: "Text Style",
-            url: "/api-reference/text/text-style.html",
-          },
-          {
-            label: "Paragraph Style",
-            url: "/api-reference/text/paragraph-style.html",
-          },
-          {
-            label: "Page Numbers",
-            url: "/api-reference/text/page-numbers.html",
-          },
-          {
-            label: "Injecting Content",
-            url: "/api-reference/text/injecting-custom-content.html",
-          },
-          {
-            label: "Style Inheritance",
-            url: "/api-reference/text/style-inheritance.html",
-          },
-          {
-            label: "Font Management",
-            url: "/api-reference/text/font-management.html",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-image",
-        name: "Image",
-        description: "Raster images (PNG, JPEG, WebP) and SVG vectors. Automatic aspect ratio, compression, resolution optimization, and shared image caching.",
-        link: "/api-reference/image/basics.html",
-        tags: [
-          {
-            label: "Size Optimization",
-            url: "/api-reference/image/optimization.html",
-          },
-          {
-            label: "Shared Images",
-            url: "/api-reference/image/shared.html",
-          },
-          {
-            label: "SVG",
-            url: "/api-reference/image/svg.html",
-          },
-          {
-            label: "Images Of Dynamic Size",
-            url: "/api-reference/image/dynamic.html",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-horizontal-rule",
-        name: "Line",
-        description: "Horizontal or vertical lines with configurable thickness and color. Useful as visual separators and dividers.",
-        link: "/api-reference/line.html"
-      },
-      {
-        icon: "fa-regular fa-grid-2",
-        name: "Placeholder",
-        description: "Gray rectangle with diagonal lines and optional label. Visualizes reserved space during layout prototyping.",
-        link: "/api-reference/placeholder.html"
-      },
-      {
-        icon: "fa-regular fa-chart-mixed",
-        name: "Charts",
-        description: "Integration with charting libraries (ScottPlot, LiveCharts, Microcharts). Bar, line, pie, area charts as vector graphics.",
-        link: "/api-reference/charts.html"
-      },
-      {
-        icon: "fa-regular fa-qrcode",
-        name: "Barcodes / QR Codes",
-        description: "Generate 1D barcodes and 2D QR codes. Integration guide with popular third-party libraries.",
-        link: "/api-reference/barcodes.html"
-      },
-      {
-        icon: "fa-regular fa-map-location-dot",
-        name: "Maps",
-        description: "Embed static maps in your documents. Integration tutorial using Mapbox services.",
-        link: "/api-reference/maps.html"
-      },
-      {
-        icon: "fa-regular fa-bezier-curve",
-        name: "Complex Graphics",
-        description: "Canvas-style drawing API for paths, shapes, bezier curves, and custom vector graphics. Fill and stroke operations.",
-        link: "/api-reference/complex-graphics.html"
-      },
-      {
-        icon: "fa-regular fa-paintbrush",
-        name: "SkiaSharp Integration",
-        description: "Direct SkiaSharp canvas access for shaders, gradients, image filters, blend modes, and advanced 2D graphics.",
-        link: "/api-reference/skiasharp-integration.html"
-      }
-    ]
-  },
-  {
-    name: "Layout Elements",
-    description: "Container elements for organizing and structuring document content.",
-    items: [
-      {
-        icon: "fa-regular fa-file",
-        name: "Page",
-        description: "Document foundation with size, margins, orientation, headers, footers, and watermarks. Continuous or paged content modes.",
-        link: "/api-reference/page/basics.html",
-        tags: [
-          {
-            label: "Slots",
-            url: "/api-reference/page/slots.html",
-          },
-          {
-            label: "Properties",
-            url: "/api-reference/page/settings.html",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-table",
-        name: "Table",
-        description: "Grid layout with rows and columns. Cell spanning, repeating headers/footers, auto-pagination, and precise cell styling.",
-        link: "/api-reference/table/basics.html",
-        tags: [
-          {
-            label: "Cell Style Patterns",
-            url: "/api-reference/table/cell-style-pattern.html",
-          },
-          {
-            label: "Header and Footer",
-            url: "/api-reference/table/header-and-footer.html",
-          },
-          {
-            label: "Overlapping Cells",
-            url: "/api-reference/table/overlapping-cells.html",
-          }
-        ]
-      },
-      {
-        icon: "fa-regular fa-table-rows",
-        name: "Column",
-        description: "Vertical stacking of children with configurable spacing. Automatic pagination ensures content flows seamlessly across pages.",
-        link: "/api-reference/column.html"
-      },
-      {
-        icon: "fa-regular fa-table-columns",
-        name: "Row",
-        description: "Horizontal arrangement with flexible sizing options. Combine proportional, fixed, and auto-width items with configurable spacing.",
-        link: "/api-reference/row.html"
-      },
-      {
-        icon: "fa-regular fa-window-maximize",
-        name: "Decoration",
-        description: "Persistent header and footer areas that repeat on every page. Main content flows between them with pagination.",
-        link: "/api-reference/decoration.html"
-      },
-      {
-        icon: "fa-regular fa-list",
-        name: "List",
-        description: "Ordered (numbered) and unordered (bulleted) lists. Custom markers, nested levels, and automatic numbering.",
-        link: "/api-reference/lists.html"
-      },
-      {
-        icon: "fa-regular fa-layer-group",
-        name: "Layers",
-        description: "Stacked content planes for backgrounds, main content, and foreground overlays. Watermarks and letterhead effects.",
-        link: "/api-reference/layers.html"
-      },
-      {
-        icon: "fa-regular fa-bars-staggered",
-        name: "Inlined",
-        description: "Inline flow layout with automatic line wrapping. Elements arranged like words in a paragraph.",
-        link: "/api-reference/inlined.html"
-      },
-      {
-        icon: "fa-regular fa-newspaper",
-        name: "Multi Column",
-        description: "Newspaper-style columns where content flows from one column to the next, continuing across pages.",
-        link: "/api-reference/multi-column.html"
-      }
-    ]
-  },
-  {
-    name: "Positional Elements",
-    description: "Sizing constraints, alignment, spacing, and geometric transformations.",
-    items: [
-      {
-        icon: "fa-regular fa-left-right",
-        name: "Width",
-        description: "Horizontal size constraints: exact, minimum, and maximum values. Relative (percentage) or absolute units.",
-        link: "/api-reference/width.html"
-      },
-      {
-        icon: "fa-regular fa-up-down",
-        name: "Height",
-        description: "Vertical size constraints: exact, minimum, and maximum values. Relative (percentage) or absolute units.",
-        link: "/api-reference/height.html"
-      },
-      {
-        icon: "fa-regular fa-objects-align-center-horizontal",
-        name: "Alignment",
-        description: "Positions child within available space: center, top, bottom, left, right, and corner combinations.",
-        link: "/api-reference/alignment.html"
-      },
-      {
-        icon: "fa-regular fa-border-inner",
-        name: "Padding",
-        description: "Add breathing room around content with uniform or per-side spacing. Supports all length units for precise layout control.",
-        link: "/api-reference/padding.html"
-      },
-      {
-        icon: "fa-regular fa-crop",
-        name: "Aspect Ratio",
-        description: "Maintains width-to-height proportion. Child content scales or clips to fit the constrained area.",
-        link: "/api-reference/aspect-ratio.html"
-      },
-      {
-        icon: "fa-regular fa-rotate",
-        name: "Rotate",
-        description: "Rotation by 90° increments or arbitrary angles. Content spins around its center point.",
-        link: "/api-reference/rotate.html"
-      },
-      {
-        icon: "fa-regular fa-expand",
-        name: "Scale",
-        description: "Proportional resizing (larger or smaller). Uniform or independent horizontal/vertical factors.",
-        link: "/api-reference/scale.html"
-      },
-      {
-        icon: "fa-regular fa-compress",
-        name: "Scale to Fit",
-        description: "Automatic scaling to fit available space. Preserves aspect ratio while maximizing size.",
-        link: "/api-reference/scale-to-fit.html"
-      },
-      {
-        icon: "fa-regular fa-arrows-up-down-left-right",
-        name: "Offset",
-        description: "Shifts content position without affecting layout flow. Creates overlapping or offset effects.",
-        link: "/api-reference/offset.html"
-      },
-      {
-        icon: "fa-regular fa-reflect-horizontal",
-        name: "Flip",
-        description: "Mirrors content horizontally, vertically, or both axes. Creates reflection effects.",
-        link: "/api-reference/flip.html"
-      },
-      {
-        icon: "fa-regular fa-infinity",
-        name: "Unconstrained",
-        description: "Removes parent size limits, giving children infinite available space. Reveals natural content size.",
-        link: "/api-reference/unconstrained.html"
-      },
-      {
-        icon: "fa-regular fa-up-right-and-down-left-from-center",
-        name: "Extend",
-        description: "Expands child to fill all available space horizontally, vertically, or both directions.",
-        link: "/api-reference/extend.html"
-      },
-      {
-        icon: "fa-regular fa-down-left-and-up-right-to-center",
-        name: "Shrink",
-        description: "Reduces child to minimum required size. Prevents stretching when parent offers excess space.",
-        link: "/api-reference/shrink.html"
-      },
-      {
-        icon: "fa-regular fa-layer-plus",
-        name: "Z-Index",
-        description: "Stacking order for overlapping elements in Layers. Higher values render in front of lower values.",
-        link: "/api-reference/zindex.html"
-      }
-    ]
-  },
-  {
-    name: "Content Flow",
-    description: "Pagination control, conditional visibility, and multi-page content behavior.",
-    items: [
-      {
-        icon: "fa-regular fa-page-break",
-        name: "Page Break",
-        description: "Forces subsequent content to begin on a new page. Immediate page transition.",
-        link: "/api-reference/page-break.html"
-      },
-      {
-        icon: "fa-regular fa-frame",
-        name: "Prevent Page Break",
-        description: "Keeps child content together on a single page. Moves entire block to next page if needed.",
-        link: "/api-reference/prevent-page-break.html"
-      },
-      {
-        icon: "fa-regular fa-ruler-vertical",
-        name: "Ensure Space",
-        description: "Requires minimum vertical space before rendering. Jumps to next page if threshold not met.",
-        link: "/api-reference/ensure-space.html"
-      },
-      {
-        icon: "fa-regular fa-object-group",
-        name: "Show Entire",
-        description: "Displays element fully on one page or skips to next page. No partial rendering or breaking.",
-        link: "/api-reference/show-entire.html"
-      },
-      {
-        icon: "fa-regular fa-repeat",
-        name: "Repeat",
-        description: "Duplicates content on every page of a multi-page section. Repeating decorations and patterns.",
-        link: "/api-reference/repeat.html"
-      },
-      {
-        icon: "fa-regular fa-code-branch",
-        name: "Show If",
-        description: "Conditional rendering based on boolean logic. Content appears or disappears based on runtime conditions.",
-        link: "/api-reference/show-if.html"
-      },
-      {
-        icon: "fa-regular fa-circle-1",
-        name: "Show Once",
-        description: "Renders content only on its first page occurrence. Hidden on subsequent pages of the same element.",
-        link: "/api-reference/show-once.html"
-      },
-      {
-        icon: "fa-regular fa-forward-step",
-        name: "Skip Once",
-        description: "Hides content on first page, visible on all subsequent pages. Inverse of Show Once.",
-        link: "/api-reference/skip-once.html"
-      },
-      {
-        icon: "fa-regular fa-stop",
-        name: "Stop Paging",
-        description: "Prevents content from continuing to additional pages. Overflow content is truncated.",
-        link: "/api-reference/stop-paging.html"
-      }
-    ]
-  },
-  {
-    name: "Other Elements",
-    description: "Navigation, interactivity, performance optimization, and debugging tools.",
-    items: [
-      {
-        icon: "fa-regular fa-bookmark",
-        name: "Section",
-        description: "Define named regions for navigation and location-aware page numbering. Build table of contents and cross-references with ease.",
-        link: "/api-reference/section.html"
-      },
-      {
-        icon: "fa-regular fa-link",
-        name: "Hyperlink",
-        description: "Create interactive clickable areas linking to URLs, email addresses, or phone numbers. Seamless integration with PDF reader capabilities.",
-        link: "/api-reference/hyperlink.html"
-      },
-      {
-        icon: "fa-regular fa-bolt",
-        name: "Lazy",
-        description: "Optimize memory for large documents with deferred content generation. Ideal for data-intensive reports and enterprise-scale document processing.",
-        link: "/api-reference/lazy.html"
-      },
-      {
-        icon: "fa-regular fa-text-size",
-        name: "Default Text Style",
-        description: "Inherited text formatting (font, size, color) applied to all descendant text elements.",
-        link: "/api-reference/default-text-style.html"
-      },
-      {
-        icon: "fa-regular fa-arrow-right-arrow-left",
-        name: "Content Direction",
-        description: "Left-to-right (LTR) or right-to-left (RTL) layout direction. Full RTL language and bidirectional text support.",
-        link: "/api-reference/content-direction.html"
-      },
-      {
-        icon: "fa-regular fa-square-dashed",
-        name: "Debug Area",
-        description: "Colored border and label overlay showing element boundaries. Visual debugging during development.",
-        link: "/api-reference/debug-area.html"
-      },
-      {
-        icon: "fa-regular fa-location-dot",
-        name: "Debug Pointer",
-        description: "Named marker appearing in layout exception messages. Identifies problematic elements in error diagnostics.",
-        link: "/api-reference/debug-pointer.html"
-      }
-    ]
-  }
-];
-</script>
-
 <style scoped>
 
-/* Page styles */
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: 48px;
-  max-width: 750px;
+/* the first chapter's divider follows at the same distance as the ones between chapters */
+.features-header {
+  margin-bottom: 32px;
 }
 
-.sub-header {
+.features-header .sub-header {
   max-width: 750px;
-  margin-bottom: 0 !important;
+  margin-bottom: 0;
 }
 
 
-/* Card design */
+.chapters {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.chapter,
+.chapters .dotted-divider {
+  width: 100%;
+  max-width: 1040px;
+  margin-inline: auto;
+}
 
-.card {
+.chapter {
   display: flex;
   flex-direction: column;
   gap: 32px;
-  background-color: var(--vp-c-bg) !important;
 }
 
-.card h3 {
-  margin-top: 0;
+.chapter-title {
+  margin: 0 0 8px;
+  text-align: center;
+}
+
+.category-title {
+  margin: 0 0 48px;
   font-weight: 700;
-  color: #2196F3;
 }
 
+.features {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 32px 48px;
+}
+
+@media screen and (max-width: 760px) {
+  .features {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
 
-/* Card item */
 
-.card-item {
-  display: flex; flex-direction: row; gap: 24px;
-  text-decoration: none;
+/* the whole row is the link; it pads outwards into the grid gap, so the hover surface wraps the row without moving it */
+
+.feature {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin: -12px;
+  padding: 12px;
   color: inherit;
+  border-radius: 16px;
+  transition: background-color 0.2s, box-shadow 0.2s;
 }
 
-.card-item .icon {
-  font-size: 1.5rem;
-  padding: 12px 0;
-  min-width: 48px;
-  height: 48px;
-  text-align: center;
-  border-radius: 8px;
-
-  color: #666;
-  background-color: #8882;
+.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);
 }
 
-html.dark .card-item .icon {
-  color: #AAA;
+.feature:focus-visible {
+  outline: none;
 }
 
-.card-item b {
-  color: var(--vp-c-text-1);
+.feature .icon-tile {
+  transition: background-color 0.2s;
 }
 
-.card-item:hover {
-  margin: -16px;
-  padding: 16px;
-  background-color: #2196F311;
-  border-radius: 12px;
+.feature .icon-tile .icon {
+  transition: color 0.2s;
+}
 
-  .icon {
-    color: #2196F3 !important;
-    background-color: #2196F322;
-  }
+.feature:is(:hover, :focus-visible) .icon-tile {
+  background-color: color-mix(in srgb, #2196F3 16%, transparent);
 }
 
+.feature:is(:hover, :focus-visible) .icon-tile .icon {
+  color: light-dark(#1976D2, #64B5F6);
+}
 
-/* Card item - tags */
+.feature:is(:hover, :focus-visible) .row-title {
+  color: var(--vp-c-brand-1);
+}
 
-.card-item .tags {
-  margin-top: 12px;
+.feature-text {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 12px;
+  flex-direction: column;
+  min-width: 0;
+  padding-top: 2px;
 }
 
-.card-item .tag {
-  padding: 8px 12px;
-  border: 1px solid #8884;
-  border-radius: 8px;
-  font-size: 0.8125rem;
-  line-height: 1;
-  color: var(--vp-c-text-2);
+.feature .row-title {
+  display: block;
+  font-size: 1.0625rem;
+  line-height: 1.5rem;
+  transition: color 0.2s;
 }
 
-.card-item .tag:hover {
-  background-color: var(--vp-c-bg);
-  border-color: var(--vp-c-text-1);
-  color: var(--vp-c-text-1);
+.feature .row-description {
+  display: block;
+  margin-top: 4px;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-2);
 }
 
 </style>
diff --git a/docs/.vitepress/theme/Icon.vue b/docs/.vitepress/theme/Icon.vue
new file mode 100644
index 00000000..0059e78e
--- /dev/null
+++ b/docs/.vitepress/theme/Icon.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
+
+/* A Font Awesome icon as inline SVG from its typed definition, so nothing is fetched at runtime. Duotone definitions
+   carry two paths, the secondary layer first; the --fa-* variables keep Font Awesome's names so existing styles apply. */
+const { icon } = defineProps<{ icon: IconDefinition }>();
+</script>
+
+<template>
+  <svg class="icon" :viewBox="`0 0 ${icon.icon[0]} ${icon.icon[1]}`" aria-hidden="true" focusable="false">
+    <template v-if="Array.isArray(icon.icon[4])">
+      <path class="secondary" :d="icon.icon[4][0]" />
+      <path class="primary" :d="icon.icon[4][1]" />
+    </template>
+    <path v-else :d="icon.icon[4]" />
+  </svg>
+</template>
+
+<style scoped>
+/* zero-specificity base, so any parent rule on .icon wins regardless of style order */
+:where(.icon) {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+  fill: currentColor;
+}
+
+.primary {
+  fill: var(--fa-primary-color, currentColor);
+  opacity: var(--fa-primary-opacity, 1);
+}
+
+.secondary {
+  fill: var(--fa-secondary-color, currentColor);
+  opacity: var(--fa-secondary-opacity, 0.4);
+}
+</style>
diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index d3b9c038..adcbd712 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -1,20 +1,20 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import DefaultTheme from "vitepress/theme";
+import LayoutFooter from "./LayoutFooter.vue";
+import { loadPaddle } from "./paddle";
+
+const { Layout } = DefaultTheme;
+
+/* Paddle.js is initialised on every page, not only on pricing: a Paddle payment link (?_ptxn=…) can open its
+   checkout only on a page where Paddle.js is loaded */
+onMounted(loadPaddle);
+</script>
+
 <template>
   <Layout>
     <template #layout-bottom>
-      <layout-footer />
-
-      <ClientOnly>
-        <paddle-integration />
-      </ClientOnly>
+      <LayoutFooter />
     </template>
   </Layout>
 </template>
-
-<script setup>
-import DefaultTheme from 'vitepress/theme';
-const { Layout } = DefaultTheme
-
-import PaddleIntegration from "./PaddleIntegration.vue";
-import LayoutFooter from "./LayoutFooter.vue";
-
-</script>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/LayoutFooter.vue b/docs/.vitepress/theme/LayoutFooter.vue
index 2721fc8e..60479b8a 100644
--- a/docs/.vitepress/theme/LayoutFooter.vue
+++ b/docs/.vitepress/theme/LayoutFooter.vue
@@ -60,7 +60,7 @@ const columns: FooterColumn[] = [
   }
 ];
 
-const year = 2026;
+const year = new Date().getFullYear();
 </script>
 
 <template>
@@ -72,11 +72,7 @@ const year = 2026;
 
           <ul>
             <li v-for="link in column.links" :key="link.label">
-              <a :href="link.href"
-                 :target="link.external ? '_blank' : undefined"
-                 :rel="link.external ? 'noopener' : undefined">
-                {{ link.label }}
-              </a>
+              <a :href="link.href" :target="link.external ? '_blank' : undefined">{{ link.label }}</a>
             </li>
           </ul>
         </div>
@@ -84,15 +80,16 @@ const year = 2026;
     </div>
 
     <div class="content">
-      <p class="copyright">© {{ year }} QuestPDF by Marcin Ziąbek CodeFlint</p>
+      <p class="copyright">© {{ year }} QuestPDF by Marcin Ziabek CodeFlint</p>
     </div>
   </footer>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
 
 footer {
-  background-color: var(--vp-c-bg-alt);
+  /* opaque, so the page canvas stops at the footer's top border */
+  background-color: var(--vp-c-bg);
 }
 
 footer * {
@@ -101,51 +98,40 @@ footer * {
 }
 
 
-/* LINKS */
-
 .content {
   border-top: 1px solid var(--vp-c-divider);
-
-  & > * {
-    margin: 0 auto;
-    max-width: 1216px;
-    padding: 48px 32px 48px;
-  }
 }
 
-.link-categories {
+.content > * {
   margin: 0 auto;
-  max-width: 1216px;
-  padding: 48px 32px 48px;
+  max-width: var(--custom-page-width);
+  padding: 48px var(--custom-page-gutter);
+}
 
+.link-categories {
   display: grid;
   grid-template-columns: repeat(4, auto);
   gap: 48px 32px;
 }
 
-.link-category {
-  h2 {
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--vp-c-text-1);
-    margin-bottom: 12px;
-  }
+.link-category h2 {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--vp-c-text-1);
+  margin-bottom: 12px;
+}
 
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
+.link-category ul {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
 
-  a:hover {
-    color: var(--vp-c-text-1);
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
+.link-category a:hover {
+  color: var(--vp-c-text-1);
+  text-decoration: underline;
+  text-underline-offset: 4px;
 }
 
 @media screen and (max-width: 960px) {
@@ -160,12 +146,25 @@ footer * {
   }
 }
 
+@media (pointer: coarse) {
+  .link-category h2 {
+    margin-bottom: 2px;
+  }
+
+  .link-category ul {
+    gap: 0;
+  }
+
+  .link-category a {
+    display: block;
+    padding-block: 10px;
+  }
+}
 
-/* COPYRIGHT */
 
 .copyright {
   text-align: center;
-  padding: 24px 32px;
+  padding: 24px var(--custom-page-gutter);
 }
 
 </style>
diff --git a/docs/.vitepress/theme/PaddleIntegration.vue b/docs/.vitepress/theme/PaddleIntegration.vue
deleted file mode 100644
index e0b9663d..00000000
--- a/docs/.vitepress/theme/PaddleIntegration.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import {usePaddle} from "./paddle";
-import {onMounted} from "vue";
-
-onMounted(() => {
-  if (typeof window === 'undefined')
-    return;
-
-  usePaddle();
-})
-</script>
diff --git a/docs/.vitepress/theme/VitepressAdjustments.css b/docs/.vitepress/theme/VitepressAdjustments.css
index b63979f1..713e4984 100644
--- a/docs/.vitepress/theme/VitepressAdjustments.css
+++ b/docs/.vitepress/theme/VitepressAdjustments.css
@@ -3,51 +3,50 @@
     --vp-c-brand-2: #039BE5;
     --vp-c-brand-3: #29B6F6;
     --vp-c-brand-soft: #0091EA24;
+
+    --vp-c-bg: #ffffff;
+    --vp-c-bg-alt: #f6f6f8;
 }
 
 
-:root:is(.dark) {
+:root.dark {
     --vp-c-brand-1: #4FC3F7;
     --vp-c-brand-2: #03A9F4;
     --vp-c-brand-3: #0288D1;
     --vp-c-brand-soft: #0091EA24;
+
+    --vp-c-bg: #101010;
+    --vp-c-bg-alt: #161618;
 }
 
 :root {
-    --vp-home-hero-name-color: transparent;
-
-    --vp-home-hero-image-background-image: conic-gradient(from 100deg, #2979FF55 70deg, #88888855 70deg);
-    --vp-home-hero-image-filter: blur(48px);
+    font-size: 16px;
 
     --vp-c-gutter: var(--vp-c-divider);
+    --vp-nav-logo-height: 32px;
 
     --elevation: 0 13px 27px -5px rgb(0 0 0 / 5%), 0 8px 16px -8px rgb(0 0 0 / 8%), 0 -6px 16px -6px rgb(0 0 0 / 3%);
     --elevation-hover: 0 13px 27px -5px rgb(0 0 0 / 15%), 0 8px 16px -8px rgb(0 0 0 / 24%), 0 -6px 16px -6px rgb(0 0 0 / 9%);
 }
 
-html {
-    scroll-behavior: smooth;
-}
-
-:root {
-    font-size: 16px;
-}
-
 body {
     line-height: 24px;
 }
 
-.VPNavBar .title {
-    font-size: 24px !important;
+.VPNavBar .VPNavBarTitle .logo {
+    margin-right: 0;
 }
 
-.logo {
-    height: 32px !important;
-    margin-right: 16px !important;
+@media (min-width: 48rem) {
+    .VPNavBar:not(.has-sidebar) .VPNavBarSearch {
+        padding-inline-start: 2.5rem;
+    }
 }
 
-.VPHero img.VPImage {
-    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.25);
+@media (min-width: 60rem) {
+    .VPNavBar:not(.has-sidebar) .VPNavBarSearch {
+        padding-inline-start: 3.5rem;
+    }
 }
 
 .VPLink.link.active,
@@ -61,63 +60,6 @@ body {
     margin-bottom: 0 !important;
 }
 
-.VPHero {
-    padding: 198px 0 96px 0 !important;
-    margin: 0 32px;
-}
-
-@media (min-width: 425px) {
-    .VPHero h1 span.name {
-        font-size: 4rem !important;
-        line-height: 4rem !important;
-        margin-bottom: 2rem !important;
-    }
-
-    .VPHero h1 span.text {
-        font-size: 1.5rem !important;
-        line-height: 2rem !important;
-        margin-bottom: 1rem !important;
-    }
-}
-
-@media (min-width: 960px) {
-    .VPHero h1 span.name {
-        font-size: 6rem !important;
-        line-height: 6rem !important;
-        margin-bottom: 1rem !important;
-    }
-
-    .VPHero h1 span.text {
-        font-size: 2.5rem !important;
-        line-height: 3rem !important;
-        margin-bottom: 1rem !important;
-    }
-}
-
-@media (max-width: 960px) {
-    .VPHero {
-        padding: 128px 32px 64px 32px !important;
-    }
-}
-
-@media (max-width: 425px) {
-    .VPHero {
-        padding: 96px 24px 48px !important;
-    }
-
-    .VPHero h1 span.name {
-        font-size: 3rem !important;
-        line-height: 3rem !important;
-        margin-bottom: 2rem !important;
-    }
-
-    .VPHero h1 span.text {
-        font-size: 1.25rem !important;
-        line-height: 2rem !important;
-        margin-bottom: 1rem !important;
-    }
-}
-
 html:not(.dark) .VPDoc img[alt=example] {
     border: 1px solid #888;
 }
@@ -137,24 +79,27 @@ html.dark .VPDoc img[alt=example] {
     color: var(--vp-c-tip-1);
 }
 
-.VPHero .VPButton {
-    font-size: 1rem !important;
-}
-
 .custom-block-title {
     font-size: 1rem;
     letter-spacing: 1px;
     font-weight: bold;
 }
 
+/* an embedded PDF scrolls on its own, so it stays shorter than the window and the page can scroll past it */
 .pdf-viewer {
     width: 100%;
     height: 625px;
+    max-height: min(75svh, 140vw);
 
     box-shadow: 0 13px 27px -5px rgb(50 50 93 / 15%), 0 8px 16px -8px rgb(0 0 0 / 10%), 0 -6px 16px -6px rgb(0 0 0 / 5%);
     border-radius: 8px;
 }
 
+.pdf-viewer > p {
+    margin: 0;
+    padding: 16px 20px;
+}
+
 html.dark .light-only {
     display: none !important;
 }
@@ -175,6 +120,108 @@ html:not(.dark) .dark-only {
     border-radius: 8px;
 }
 
-.VPNavBar.top.home .VPNavBarSearchButton {
-    display: none !important;
+/* Dark navbar: the bg-alt token, so the bar reads as its own surface. VitePress paints the bar through this token
+   (VPNavBar::before), so the local nav and the home bar pick it up as well. */
+html.dark {
+    --vp-nav-bg-color: var(--vp-c-bg-alt);
+}
+
+/* VitePress makes the home navbar transparent at the top of the page (and always below 60rem): restore the regular
+   surface and divider. */
+.VPNavBar.home::before {
+    background-color: var(--vp-nav-bg-color) !important;
+    backdrop-filter: var(--vp-nav-backdrop-filter) !important;
+}
+
+.VPNavBar.home .divider-line {
+    background-color: var(--vp-nav-divider-color);
+}
+
+html:not(.dark) .Layout:has(.custom-page) .VPNavBar.top .divider-line {
+    background-color: color-mix(in srgb, #2196F3 28%, #E2E2E3);
+}
+
+html.dark .Layout:has(.custom-page) .VPNavBar.top .divider-line {
+    background-color: color-mix(in srgb, #2196F3 20%, #2E2E32);
+}
+
+.VPNavBar .VPNavMenuLink.VPNavBarMenuLink {
+    font-size: 1rem;
+}
+
+/* Navbar links */
+.VPNavBar .VPNavBarMenu .VPNavMenuLink.VPNavBarMenuLink {
+    min-height: 36px;
+    padding: 0 0.875rem;
+    margin: 0;
+    border-radius: 10px;
+    transition: color 0.2s, background-color 0.2s;
+}
+
+.VPNavBar .VPNavBarMenu .VPNavMenuLink.VPNavBarMenuLink:hover {
+    color: var(--vp-c-text-1);
+    background-color: var(--vp-c-default-soft);
+}
+
+.VPNavBar .VPNavBarMenu .VPNavMenuLink.VPNavBarMenuLink.active {
+    color: #ffffff;
+    background-color: #1976D2;
+}
+
+html.dark .VPNavBar .VPNavBarMenu .VPNavMenuLink.VPNavBarMenuLink.active {
+    color: #111111;
+    background-color: #F5F5F7;
+}
+
+/* the pill is painted behind the ⋯ button, which keeps the full bar height so its dropdown opens right below it */
+.VPNavBar .VPNavBarExtra > .button {
+    position: relative;
+    isolation: isolate;
+}
+
+.VPNavBar .VPNavBarExtra > .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;
+}
+
+.VPNavBar .VPNavBarExtra > .button:hover::before {
+    background-color: var(--vp-c-default-soft);
+}
+
+/* Search */
+@media (min-width: 48rem) {
+    .VPNavBar .VPNavBarSearchButton {
+        height: 40px;
+        padding: 0 8px 0 12px;
+        border: 1px solid var(--vp-c-divider);
+        border-radius: 10px;
+        transition: border-color 0.2s;
+    }
+
+    .VPNavBar .VPNavBarSearchButton:hover {
+        border-color: var(--vp-c-brand-1);
+    }
+
+    .VPNavBar .VPNavBarSearchButton .keys {
+        border-radius: 6px;
+        background-color: var(--vp-c-bg);
+    }
+}
+
+@media (min-width: 80rem) {
+    .VPNavBar .VPNavBarSearchButton {
+        min-width: 220px;
+    }
+
+    .VPNavBar .VPNavBarSearchButton .text {
+        font-size: 0.875rem;
+    }
+
+    .VPNavBar .VPNavBarSearchButton .keys {
+        margin-left: auto;
+    }
 }
diff --git a/docs/.vitepress/theme/customIcons.ts b/docs/.vitepress/theme/customIcons.ts
new file mode 100644
index 00000000..2ea97c8e
--- /dev/null
+++ b/docs/.vitepress/theme/customIcons.ts
@@ -0,0 +1,27 @@
+/* Glyphs Font Awesome has no good match for, drawn on its 512 grid with its regular-style 48-unit stroke so they sit
+   next to the Pro icons unnoticed. Same definition shape as the imported ones, so Icon.vue renders them as is. */
+
+import type { IconDefinition, IconName } from "@fortawesome/fontawesome-common-types";
+
+/* a square with one large rounded corner against three sharp ones */
+export const faRoundedCorners: IconDefinition = {
+  prefix: "fak",
+  iconName: "rounded-corners" as IconName,
+  icon: [
+    448, 512, [], "",
+    "M224 32L424 32A24 24 0 0 1 448 56L448 456A24 24 0 0 1 424 480L24 480A24 24 0 0 1 0 456L0 256A224 224 0 0 1 224 32zM224 80A176 176 0 0 0 48 256L48 432L400 432L400 80L224 80z"
+  ]
+};
+
+/* duotone: the secondary layer is the shadow cast below and right of the box, rendered at Icon.vue's 40% opacity */
+export const faDropShadow: IconDefinition = {
+  prefix: "fakd",
+  iconName: "drop-shadow" as IconName,
+  icon: [
+    512, 512, [], "",
+    [
+      "M352 128L384 128A64 64 0 0 1 448 192L448 416A64 64 0 0 1 384 480L160 480A64 64 0 0 1 96 416L96 384L288 384A64 64 0 0 0 352 320z",
+      "M64 32L288 32A64 64 0 0 1 352 96L352 320A64 64 0 0 1 288 384L64 384A64 64 0 0 1 0 320L0 96A64 64 0 0 1 64 32zM64 80A16 16 0 0 0 48 96L48 320A16 16 0 0 0 64 336L288 336A16 16 0 0 0 304 320L304 96A16 16 0 0 0 288 80L64 80z"
+    ]
+  ]
+};
diff --git a/docs/.vitepress/theme/features.ts b/docs/.vitepress/theme/features.ts
new file mode 100644
index 00000000..377a2ad1
--- /dev/null
+++ b/docs/.vitepress/theme/features.ts
@@ -0,0 +1,898 @@
+/* The Features Overview page (FeaturesOverview.vue). Chapter and category names use the documentation's own terms;
+   feature names say what a reader gets, not what the API calls it. */
+
+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,
+  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
+} from "@fortawesome/pro-regular-svg-icons";
+import { faDropShadow, faRoundedCorners } from "./customIcons";
+
+export interface Feature {
+  name: string;
+  description: string;
+  icon: IconDefinition;
+  link: string;
+}
+
+export interface FeatureCategory {
+  name: string;
+  features: Feature[];
+}
+
+export interface FeatureChapter {
+  name: string;
+  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"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: "Layout",
+    categories: [
+      {
+        name: "Page setup",
+        features: [
+          {
+            name: "Pages",
+            description: "Document foundation with size, margins, orientation, headers, footers, and watermarks. Continuous or paged content modes.",
+            icon: faFile,
+            link: "/api-reference/page/basics.html"
+          },
+          {
+            name: "Headers and footers",
+            description: "Header, content and footer slots, plus full-page background and foreground layers for watermarks and letterhead.",
+            icon: faDistributeSpacingVertical,
+            link: "/api-reference/page/slots.html"
+          },
+          {
+            name: "Page size and margins",
+            description: "Exact, continuous or flexible page sizes, standard presets with orientation, page color and per-side margins.",
+            icon: faRuler,
+            link: "/api-reference/page/settings.html"
+          }
+        ]
+      },
+      {
+        name: "Tables",
+        features: [
+          {
+            name: "Tables",
+            description: "Grid layout with rows and columns. Cell spanning, repeating headers/footers, auto-pagination, and precise cell styling.",
+            icon: faTable,
+            link: "/api-reference/table/basics.html"
+          },
+          {
+            name: "Table cell styles",
+            description: "A structured pattern for styling cells consistently. Backgrounds, padding and text styles defined once and reused.",
+            icon: faBorderAll,
+            link: "/api-reference/table/cell-style-pattern.html"
+          },
+          {
+            name: "Table headers and footers",
+            description: "Dedicated header and footer rows repeated on every page the table spans. Readers keep the context on long tables.",
+            icon: faTableCellsHeader,
+            link: "/api-reference/table/header-and-footer.html"
+          },
+          {
+            name: "Overlapping table cells",
+            description: "Place cells over one another and span them across rows and columns. Build complex structures with dynamic styling.",
+            icon: faTableCellsMerge,
+            link: "/api-reference/table/overlapping-cells.html"
+          }
+        ]
+      },
+      {
+        name: "Layout containers",
+        features: [
+          {
+            name: "Columns",
+            description: "Vertical stacking of children with configurable spacing. Automatic pagination ensures content flows seamlessly across pages.",
+            icon: faTableRows,
+            link: "/api-reference/column.html"
+          },
+          {
+            name: "Rows",
+            description: "Horizontal arrangement with flexible sizing options. Combine proportional, fixed, and auto-width items with configurable spacing.",
+            icon: faTableColumns,
+            link: "/api-reference/row.html"
+          },
+          {
+            name: "Lists",
+            description: "Ordered (numbered) and unordered (bulleted) lists. Custom markers, nested levels, and automatic numbering.",
+            icon: faList,
+            link: "/api-reference/lists.html"
+          },
+          {
+            name: "Layers",
+            description: "Stacked content planes for backgrounds, main content, and foreground overlays. Watermarks and letterhead effects.",
+            icon: faLayerGroup,
+            link: "/api-reference/layers.html"
+          },
+          {
+            name: "Stacking order",
+            description: "Stacking order for overlapping elements in Layers. Higher values render in front of lower values.",
+            icon: faBringFront,
+            link: "/api-reference/zindex.html"
+          },
+          {
+            name: "Inline wrapping",
+            description: "Inline flow layout with automatic line wrapping. Elements arranged like words in a paragraph.",
+            icon: faBarsStaggered,
+            link: "/api-reference/inlined.html"
+          },
+          {
+            name: "Multi-column text",
+            description: "Newspaper-style columns where content flows from one column to the next, continuing across pages.",
+            icon: faNewspaper,
+            link: "/api-reference/multi-column.html"
+          }
+        ]
+      },
+      {
+        name: "Size and spacing",
+        features: [
+          {
+            name: "Width",
+            description: "Horizontal size constraints: exact, minimum, and maximum values. Relative (percentage) or absolute units.",
+            icon: faLeftRight,
+            link: "/api-reference/width.html"
+          },
+          {
+            name: "Height",
+            description: "Vertical size constraints: exact, minimum, and maximum values. Relative (percentage) or absolute units.",
+            icon: faUpDown,
+            link: "/api-reference/height.html"
+          },
+          {
+            name: "Padding",
+            description: "Add breathing room around content with uniform or per-side spacing. Supports all length units for precise layout control.",
+            icon: faSquareRing,
+            link: "/api-reference/padding.html"
+          },
+          {
+            name: "Alignment",
+            description: "Positions child within available space: center, top, bottom, left, right, and corner combinations.",
+            icon: faObjectsAlignCenterHorizontal,
+            link: "/api-reference/alignment.html"
+          },
+          {
+            name: "Aspect ratio",
+            description: "Maintains width-to-height proportion. Child content scales or clips to fit the constrained area.",
+            icon: faCrop,
+            link: "/api-reference/aspect-ratio.html"
+          },
+          {
+            name: "Fill available space",
+            description: "Expands child to fill all available space horizontally, vertically, or both directions.",
+            icon: faUpRightAndDownLeftFromCenter,
+            link: "/api-reference/extend.html"
+          },
+          {
+            name: "Shrink to content",
+            description: "Reduces child to minimum required size. Prevents stretching when parent offers excess space.",
+            icon: faDownLeftAndUpRightToCenter,
+            link: "/api-reference/shrink.html"
+          },
+          {
+            name: "Unconstrained size",
+            description: "Removes parent size limits, giving children infinite available space. Reveals natural content size.",
+            icon: faInfinity,
+            link: "/api-reference/unconstrained.html"
+          },
+          {
+            name: "Length units",
+            description: "Use points (default), inches, centimeters, millimeters, meters, or feet. Specify units directly in API methods for intuitive sizing.",
+            icon: faRulerVertical,
+            link: "/concepts/length-unit-types.html"
+          }
+        ]
+      },
+      {
+        name: "Transformations",
+        features: [
+          {
+            name: "Rotation",
+            description: "Rotation by 90° increments or arbitrary angles. Content spins around its center point.",
+            icon: faRotate,
+            link: "/api-reference/rotate.html"
+          },
+          {
+            name: "Scaling",
+            description: "Proportional resizing (larger or smaller). Uniform or independent horizontal/vertical factors.",
+            icon: faExpand,
+            link: "/api-reference/scale.html"
+          },
+          {
+            name: "Scale to fit",
+            description: "Automatic scaling to fit available space. Preserves aspect ratio while maximizing size.",
+            icon: faCompress,
+            link: "/api-reference/scale-to-fit.html"
+          },
+          {
+            name: "Flip and mirror",
+            description: "Mirrors content horizontally, vertically, or both axes. Creates reflection effects.",
+            icon: faReflectHorizontal,
+            link: "/api-reference/flip.html"
+          },
+          {
+            name: "Offset",
+            description: "Shifts content position without affecting layout flow. Creates overlapping or offset effects.",
+            icon: faArrowsUpDownLeftRight,
+            link: "/api-reference/offset.html"
+          }
+        ]
+      },
+      {
+        name: "Content flow",
+        features: [
+          {
+            name: "Page breaks",
+            description: "Forces subsequent content to begin on a new page. Immediate page transition.",
+            icon: faPageBreak,
+            link: "/api-reference/page-break.html"
+          },
+          {
+            name: "Avoid page breaks",
+            description: "Keeps child content together on a single page. Moves entire block to next page if needed.",
+            icon: faLinkSimple,
+            link: "/api-reference/prevent-page-break.html"
+          },
+          {
+            name: "Reserve space",
+            description: "Requires minimum vertical space before rendering. Jumps to next page if threshold not met.",
+            icon: faArrowsFromLine,
+            link: "/api-reference/ensure-space.html"
+          },
+          {
+            name: "Keep together",
+            description: "Displays element fully on one page or skips to next page. No partial rendering or breaking.",
+            icon: faObjectGroup,
+            link: "/api-reference/show-entire.html"
+          },
+          {
+            name: "Repeating headers",
+            description: "Persistent header and footer areas that repeat on every page. Main content flows between them with pagination.",
+            icon: faRectangleHistory,
+            link: "/api-reference/decoration.html"
+          },
+          {
+            name: "Repeat on every page",
+            description: "Duplicates content on every page of a multi-page section. Repeating decorations and patterns.",
+            icon: faRepeat,
+            link: "/api-reference/repeat.html"
+          },
+          {
+            name: "Conditional content",
+            description: "Conditional rendering based on boolean logic. Content appears or disappears based on runtime conditions.",
+            icon: faToggleOn,
+            link: "/api-reference/show-if.html"
+          },
+          {
+            name: "Show on first page only",
+            description: "Renders content only on its first page occurrence. Hidden on subsequent pages of the same element.",
+            icon: faCircle1,
+            link: "/api-reference/show-once.html"
+          },
+          {
+            name: "Skip the first page",
+            description: "Hides content on first page, visible on all subsequent pages. Inverse of Show Once.",
+            icon: faForwardStep,
+            link: "/api-reference/skip-once.html"
+          },
+          {
+            name: "Truncate overflow",
+            description: "Prevents content from continuing to additional pages. Overflow content is truncated.",
+            icon: faStop,
+            link: "/api-reference/stop-paging.html"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: "Text",
+    categories: [
+      {
+        name: "Text basics",
+        features: [
+          {
+            name: "Rich text",
+            description: "Rich text rendering with multiple formatting options. Automatic wrapping and seamless pagination across pages.",
+            icon: faText,
+            link: "/api-reference/text/basics.html"
+          },
+          {
+            name: "Page numbers",
+            description: "Current page, total page count, and page numbers relative to a named section. Custom formats such as Roman numerals.",
+            icon: faHashtag,
+            link: "/api-reference/text/page-numbers.html"
+          },
+          {
+            name: "Elements inside text",
+            description: "Inject images, SVG icons or other elements into a line of text. Positioned relative to the baseline or font edges.",
+            icon: faSquareDashedCirclePlus,
+            link: "/api-reference/text/injecting-custom-content.html"
+          },
+          {
+            name: "Default text style",
+            description: "Inherited text formatting (font, size, color) applied to all descendant text elements.",
+            icon: faTextSize,
+            link: "/api-reference/default-text-style.html"
+          },
+          {
+            name: "Style inheritance",
+            description: "Styles cascade from the document down to every text element unless overridden. Consistent typography with less repeated code.",
+            icon: faDiagramSubtask,
+            link: "/api-reference/text/style-inheritance.html"
+          }
+        ]
+      },
+      {
+        name: "Text style",
+        features: [
+          {
+            name: "Font size",
+            description: "Sets how large the characters appear. Any size in points or other length units.",
+            icon: faTextHeight,
+            link: "/api-reference/text/text-style.html#font-size"
+          },
+          {
+            name: "Font family",
+            description: "Choose the typeface for any run of text. Use the bundled Lato font, your own files, or system fonts.",
+            icon: faFont,
+            link: "/api-reference/text/text-style.html#font-family"
+          },
+          {
+            name: "Font colour",
+            description: "Color of the characters and, by default, of their decorations. HEX values, alpha channel and the Material palette.",
+            icon: faDroplet,
+            link: "/api-reference/text/text-style.html#font-color"
+          },
+          {
+            name: "Highlight",
+            description: "Solid background color behind a run of text. Adds contrast and emphasis to key phrases.",
+            icon: faHighlighter,
+            link: "/api-reference/text/text-style.html#background-color"
+          },
+          {
+            name: "Font weight",
+            description: "Thickness of the characters from thin to black. Build visual hierarchy within a single font family.",
+            icon: faBold,
+            link: "/api-reference/text/text-style.html#font-weight"
+          },
+          {
+            name: "Italic",
+            description: "Slanted letterforms for emphasis or to distinguish specific words and phrases.",
+            icon: faItalic,
+            link: "/api-reference/text/text-style.html#italic"
+          },
+          {
+            name: "Underline and strikethrough",
+            description: "Decorative lines under, through or over text. Configurable color, thickness and style, such as wavy or dotted.",
+            icon: faUnderline,
+            link: "/api-reference/text/text-style.html#decorations"
+          },
+          {
+            name: "Subscript",
+            description: "Text slightly below the baseline in a smaller size. Chemical formulas and mathematical notation.",
+            icon: faSubscript,
+            link: "/api-reference/text/text-style.html#subscript"
+          },
+          {
+            name: "Superscript",
+            description: "Text slightly above the baseline in a smaller size. Exponents, footnote marks and ordinal indicators.",
+            icon: faSuperscript,
+            link: "/api-reference/text/text-style.html#superscript"
+          },
+          {
+            name: "Line height",
+            description: "Vertical spacing between lines, proportional to the text size. Tune readability and text density.",
+            icon: faLineHeight,
+            link: "/api-reference/text/text-style.html#line-height"
+          },
+          {
+            name: "Letter spacing",
+            description: "Horizontal spacing between characters, proportional to the text size. Tracking for headings and labels.",
+            icon: faKerning,
+            link: "/api-reference/text/text-style.html#letter-spacing"
+          },
+          {
+            name: "Word spacing",
+            description: "Horizontal spacing between words, proportional to the text size. Loosen or tighten a paragraph's rhythm.",
+            icon: faTextWidth,
+            link: "/api-reference/text/text-style.html#word-spacing"
+          },
+          {
+            name: "Hyphenation",
+            description: "Words break at soft hyphen characters and render a hyphen at the break. Works with any hyphenation library that inserts them.",
+            icon: faHyphen,
+            link: "/api-reference/text/text-style.html#hyphenation"
+          },
+          {
+            name: "OpenType features",
+            description: "Enable typographic features such as ligatures, kerning, small caps or old-style numerals, where the font supports them.",
+            icon: faFontCase,
+            link: "/api-reference/text/text-style.html#font-features"
+          },
+          {
+            name: "Break long words",
+            description: "Allow a line to break between any two characters. Fits long URLs, identifiers and hashes into narrow columns.",
+            icon: faSplit,
+            link: "/api-reference/text/text-style.html#break-anywhere"
+          }
+        ]
+      },
+      {
+        name: "Paragraph style",
+        features: [
+          {
+            name: "Alignment and justification",
+            description: "Left, center, right, start, end and justified text. Position each paragraph within its container.",
+            icon: faAlignJustify,
+            link: "/api-reference/text/paragraph-style.html#text-alignment"
+          },
+          {
+            name: "Paragraph spacing",
+            description: "Vertical gap between successive paragraphs. Separate blocks of text without empty lines.",
+            icon: faParagraph,
+            link: "/api-reference/text/paragraph-style.html#paragraph-spacing"
+          },
+          {
+            name: "First-line indent",
+            description: "Horizontal offset of the first line in each paragraph. The classic way to mark paragraph starts.",
+            icon: faIndent,
+            link: "/api-reference/text/paragraph-style.html#first-line-indentation"
+          },
+          {
+            name: "Line clamping",
+            description: "Limit the number of visible lines and end the text with a customizable ellipsis. Keeps cards and table cells tidy.",
+            icon: faEllipsis,
+            link: "/api-reference/text/paragraph-style.html#clamp-line-with-ellipsis"
+          }
+        ]
+      },
+      {
+        name: "Fonts and languages",
+        features: [
+          {
+            name: "Custom fonts",
+            description: "Font files deployed with your application are registered automatically. Load more from files, streams or embedded resources.",
+            icon: faBookFont,
+            link: "/api-reference/text/font-management.html"
+          },
+          {
+            name: "Font fallback",
+            description: "A list of alternative fonts used when the primary font lacks a glyph. Mixed scripts and emoji render correctly.",
+            icon: faSwap,
+            link: "/api-reference/text/text-style.html#font-fallback"
+          },
+          {
+            name: "Additional languages",
+            description: "Chinese, Japanese, Korean, Arabic, Hebrew, Thai and more by deploying the free Google Noto fonts with your application.",
+            icon: faLanguage,
+            link: "/api-reference/text/font-management.html#covering-additional-languages"
+          },
+          {
+            name: "Right-to-left text",
+            description: "Left-to-right (LTR) or right-to-left (RTL) layout direction. Full RTL language and bidirectional text support.",
+            icon: faArrowRightArrowLeft,
+            link: "/api-reference/content-direction.html"
+          },
+          {
+            name: "Missing glyph detection",
+            description: "A clear exception names the missing font families or glyphs and the fonts involved. Catch incomplete deployments before documents ship.",
+            icon: faSquareQuestion,
+            link: "/api-reference/text/font-management.html#missing-text-glyphs"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: "Visual content",
+    categories: [
+      {
+        name: "Styling",
+        features: [
+          {
+            name: "Backgrounds",
+            description: "Solid color or linear gradient behind any element. Section bands, highlighted cells and card surfaces.",
+            icon: faFillDrip,
+            link: "/api-reference/background.html"
+          },
+          {
+            name: "Borders",
+            description: "Borders on all sides or selected ones. Configurable thickness, solid or gradient color, and alignment to the edge.",
+            icon: faBorderOuter,
+            link: "/api-reference/border.html"
+          },
+          {
+            name: "Rounded corners",
+            description: "Round all corners or each one individually. Softer edges on containers, images and table cells.",
+            icon: faRoundedCorners,
+            link: "/api-reference/rounded-corners.html"
+          },
+          {
+            name: "Shadows",
+            description: "Drop shadows with configurable offset, blur, spread and color. Lift cards and callouts off the page.",
+            icon: faDropShadow,
+            link: "/api-reference/shadow.html"
+          },
+          {
+            name: "Colour palette",
+            description: "Full Google Material Design color palette included. HEX, alpha channel, and shorthand formats supported with convenient color helpers.",
+            icon: faPalette,
+            link: "/concepts/colors.html"
+          }
+        ]
+      },
+      {
+        name: "Images",
+        features: [
+          {
+            name: "Images",
+            description: "Raster images (PNG, JPEG, WebP) from files, streams or byte arrays. Automatic aspect ratio with several scaling modes.",
+            icon: faImage,
+            link: "/api-reference/image/basics.html"
+          },
+          {
+            name: "SVG",
+            description: "Scalable vector graphics placed like any image. Text inside uses the document's fonts, and preloading avoids repeated parsing.",
+            icon: faFileSvg,
+            link: "/api-reference/image/svg.html"
+          },
+          {
+            name: "Image compression",
+            description: "Control JPEG quality and target DPI per image or for the whole document. Balance file size against visual fidelity.",
+            icon: faFileZipper,
+            link: "/api-reference/image/optimization.html"
+          },
+          {
+            name: "Shared images",
+            description: "Load an image once and reuse it everywhere. Faster generation and smaller files when the same image repeats.",
+            icon: faImages,
+            link: "/api-reference/image/shared.html"
+          },
+          {
+            name: "Images sized by layout",
+            description: "Generate the image only once the available space is known. Sharp maps and charts at exactly the right resolution.",
+            icon: faArrowsMaximize,
+            link: "/api-reference/image/dynamic.html"
+          }
+        ]
+      },
+      {
+        name: "Graphics",
+        features: [
+          {
+            name: "Charts",
+            description: "Integration with charting libraries (ScottPlot, LiveCharts, Microcharts). Bar, line, pie, area charts as vector graphics.",
+            icon: faChartMixed,
+            link: "/api-reference/charts.html"
+          },
+          {
+            name: "Barcodes and QR codes",
+            description: "Generate 1D barcodes and 2D QR codes. Integration guide with popular third-party libraries.",
+            icon: faQrcode,
+            link: "/api-reference/barcodes.html"
+          },
+          {
+            name: "Maps",
+            description: "Embed static maps in your documents. Integration tutorial using Mapbox services.",
+            icon: faMapLocationDot,
+            link: "/api-reference/maps.html"
+          },
+          {
+            name: "Vector graphics",
+            description: "Canvas-style drawing API for paths, shapes, bezier curves, and custom vector graphics. Fill and stroke operations.",
+            icon: faBezierCurve,
+            link: "/api-reference/complex-graphics.html"
+          },
+          {
+            name: "SkiaSharp canvas",
+            description: "Direct SkiaSharp canvas access for shaders, gradients, image filters, blend modes, and advanced 2D graphics.",
+            icon: faPaintbrush,
+            link: "/api-reference/skiasharp-integration.html"
+          },
+          {
+            name: "Separator lines",
+            description: "Horizontal or vertical lines with configurable thickness and color. Useful as visual separators and dividers.",
+            icon: faHorizontalRule,
+            link: "/api-reference/line.html"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    name: "Document output",
+    categories: [
+      {
+        name: "Document generation",
+        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: "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: "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: "Document operations",
+        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"
+          }
+        ]
+      }
+    ]
+  }
+];
diff --git a/docs/.vitepress/theme/homepage/HomePage.vue b/docs/.vitepress/theme/homepage/HomePage.vue
index d36ef16c..d4df6d5b 100644
--- a/docs/.vitepress/theme/homepage/HomePage.vue
+++ b/docs/.vitepress/theme/homepage/HomePage.vue
@@ -1,117 +1,123 @@
 <template>
   <div class="custom-page home-page">
-    <div class="container hero-container">
-      <HomePageHero />
-    </div>
-
-    <div class="container">
-      <HomePageAdoption />
-    </div>
+    <HomePageHero />
+
+    <div class="content sections">
+      <div class="cta-row">
+        <!-- the planned cards, once the video tutorial and the sample gallery exist (see roadmap.md) -->
+        <template v-if="plannedCardsReady">
+          <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" />
+            </template>
+          </HomePageCtaCard>
+
+          <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">
+            <template #visual="{ active, visible }">
+              <HomePageCtaDeckVisual :active="active" :visible="visible" />
+            </template>
+          </HomePageCtaCard>
+        </template>
+
+        <!-- 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"
+              href="/invoice-tutorial.html">
+            <template #visual="{ active, visible }">
+              <HomePageCtaTutorialVisual :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"
+              href="/features-overview.html"
+              accent="#5C6BC0"
+              accent-secondary="#3F51B5">
+            <template #visual="{ active, visible }">
+              <HomePageCtaFeaturesVisual :active="active" :visible="visible" />
+            </template>
+          </HomePageCtaCard>
+        </template>
+      </div>
+
+      <div class="dotted-divider"></div>
+
+      <HomePageQuickStart />
+
+      <div class="dotted-divider"></div>
 
-    <div class="container reverse-background">
-      <HomePageCodeAnimation />
-
-    </div>
-
-    <div class="container">
-      <HomePageFeatures />
-    </div>
-
-    <div class="container reverse-background">
-      <HomePageCodeFocusedApproach />
-    </div>
-
-    <div class="container">
       <HomePageCompanion />
-    </div>
 
-    <div class="container reverse-background">
-      <HomePageOverview />
-    </div>
+      <div class="dotted-divider"></div>
 
-    <div class="container">
-      <HomePageMultiplatform />
-    </div>
+      <HomePageTrust />
 
-    <div class="container reverse-background">
-      <HomePageStandardCompliance />
-    </div>
+      <div class="dotted-divider"></div>
 
-    <div class="container footer-container">
       <HomePageLicense />
     </div>
-
-    <div class="container footer-container">
-      <HomePageGettingStarted />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 
-import HomePageOverview from "./HomePageOverview.vue";
-import HomePageGettingStarted from "./HomePageGettingStarted.vue";
-import HomePageLicense from "./HomePageLicense.vue";
-import HomePageMultiplatform from "./HomePageMultiplatform.vue";
-import HomePageCodeFocusedApproach from "./HomePageCodeFocusedApproach.vue";
-import HomePageCompanion from "./HomePageCompanion.vue";
 import HomePageHero from "./HomePageHero.vue";
-import HomePageStandardCompliance from "./HomePageStandardCompliance.vue";
-import HomePageAdoption from "./HomePageAdoption.vue";
-import HomePageCodeAnimation from "./HomePageCodeAnimation.vue";
-import HomePageFeatures from "./HomePageFeatures.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 HomePageQuickStart from "./HomePageQuickStart.vue";
+import HomePageCompanion from "./HomePageCompanion.vue";
+import HomePageTrust from "./HomePageTrust.vue";
+import HomePageLicense from "./HomePageLicense.vue";
 
-</script>
+/* flip once the video tutorial and the sample gallery are live; the footer's "Sample gallery" link goes with it */
+const plannedCardsReady = false;
 
-<style>
+</script>
 
+<style scoped>
 
-.VPNavBar:not(.has-sidebar) .container {
-  max-width: 1152px;
+.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);
 }
 
-.VPNavBar:not(.has-sidebar):not(.home) .container > .title {
-  min-width: 0;
+.sections {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding-top: 0;
+  padding-bottom: 48px;
 }
 
-.VPNavBar.top .VPNavBarAppearance {
-  --vp-c-divider: var(--vp-c-text-3);
-  --vp-input-border-color: var(--vp-c-text-3);
+.cta-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 32px;
 }
 
-html:not(.dark):has(.home-page) .VPNavBar.home.top {
-  .VPNavBarMenuLink *,
-  .VPNavBarMenuGroup span.text {
-    color: black !important;
+@media screen and (max-width: 1180px) {
+  .cta-row {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 24px;
   }
 }
 
-
-/* Background */
-
-.hero-container {
-  position: relative;
-}
-
-.footer-container {
-  position: relative;
-}
-
-
-/* Common styles */
-
-.section-tag {
-  background-color: color-mix(in srgb, var(--vp-c-brand-2), transparent 85%);
-  border-radius: 12px;
-  padding: 6px 18px;
-  word-spacing: 2px;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  margin-bottom: 24px;
-  color: var(--vp-c-brand-1);
-  width: fit-content;
-  text-transform: uppercase;
-}
-
-
 </style>
diff --git a/docs/.vitepress/theme/homepage/HomePageAdoption.vue b/docs/.vitepress/theme/homepage/HomePageAdoption.vue
deleted file mode 100644
index 0a8cb1a9..00000000
--- a/docs/.vitepress/theme/homepage/HomePageAdoption.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <section class="content">
-    <div class="statistics">
-      <template v-for="statistic in statistics" :key="statistic.label">
-        <a :href="statistic.link" target="_blank">
-          <article class="statistic">
-            <i class="fa-2xl fa-duotone" :class="[statistic.icon]"></i>
-
-            <div class="title">
-              <span class="value">{{ statistic.value }}</span>
-              <span class="label">{{ statistic.label }}</span>
-            </div>
-          </article>
-        </a>
-      </template>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-
-import { data as statistics } from "../statistics.data";
-
-</script>
-
-<style scoped>
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 32px;
-
-  padding: 48px 0;
-}
-
-.statistics {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-items: center;
-  gap: 64px 128px;
-  justify-content: center;
-}
-
-.statistic {
-  display: flex;
-  flex-direction: row;
-  justify-items: center;
-  gap: 24px;
-}
-
-.statistic .title {
-  display: flex;
-  flex-direction: column;
-  justify-self: center;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: -4px;
-}
-
-.statistic span.value {
-  margin: 0;
-
-  color: var(--vp-c-text-1);
-  font-size: 1.75rem;
-  font-weight: 600;
-}
-
-.statistic span.label {
-  justify-self: start;
-  align-self: start;
-
-  color: var(--vp-c-text-2);
-  font-size: 1.2rem;
-}
-
-@media screen and (max-width: 700px) {
-  .statistic span.value {
-    font-size: 1.5rem;
-  }
-
-  .statistic span.label {
-    font-size: 1rem;
-  }
-}
-
-</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCodeAnimation.vue b/docs/.vitepress/theme/homepage/HomePageCodeAnimation.vue
deleted file mode 100644
index c1030c38..00000000
--- a/docs/.vitepress/theme/homepage/HomePageCodeAnimation.vue
+++ /dev/null
@@ -1,350 +0,0 @@
-<script setup lang="ts">
-import {computed, nextTick, onMounted, onUnmounted, ref, watch} from "vue";
-import HomePageCodeContainer from "./HomePageCodeContainer.vue";
-import HomePageWindowContainer from "./HomePageWindowContainer.vue";
-import {ShikiTransformer} from "@shikijs/types";
-import {trackPlausibleEvent} from "../plausibleEvents";
-
-const code = ref('');
-const highlightedLines = ref<{start: number; end: number} | null>(null);
-
-const tutorialStepNumber = ref(1);
-const imageIndex = ref(1);
-const title = ref("");
-
-
-/* Code highlighting */
-
-const codeTransformer = computed<ShikiTransformer>(() => {
-  return {
-    line(node, line) {
-      node.properties['data-line'] = line
-
-      if (highlightedLines.value && line >= highlightedLines.value.start && line <= highlightedLines.value.end)
-        this.addClassToHast(node, 'line-highlighted')
-    }
-  };
-})
-
-
-/* Animation engine */
-
-const isAnimationRunning = ref(false);
-
-const animationSpeed = 75;
-const waitCodeSpeed = 1000;
-const waitStepSpeed = 2500;
-
-async function waitForResume() {
-  while (!isAnimationRunning.value) {
-    await new Promise(r => setTimeout(r, 1000));
-  }
-}
-
-async function appendText(position: number, text: string) {
-  for (let letter of text) {
-    code.value = code.value.slice(0, position) + letter + code.value.slice(position);
-    position++;
-
-    if (letter == '\n' && highlightedLines.value)
-      highlightedLines.value = { start: highlightedLines.value.start, end: highlightedLines.value.end + 1 };
-
-    await waitForResume();
-    await new Promise(r => setTimeout(r, animationSpeed));
-  }
-}
-
-async function appendTextAfter(after: string, text: string) {
-  let position = code.value.indexOf(after) + after.length;
-  await appendText(position, text);
-}
-
-async function appendTextInLine(lineNumber: number, text: string) {
-  let position = code.value.split('\n').slice(0, lineNumber).join('\n').length;
-  await appendText(position, text);
-}
-
-async function deleteText(deleteText: string) {
-  await deleteTextAfter("", deleteText);
-}
-
-async function deleteTextAfter(afterText: string, deleteText: string) {
-  const position = code.value.indexOf(afterText);
-  const target = code.value.indexOf(deleteText, position);
-
-  const before = code.value.slice(0, target);
-  const after = code.value.slice(target + deleteText.length);
-
-  for (let i = deleteText.length; i >= 0; i--) {
-    code.value = before + deleteText.slice(0, i) + after;
-    await waitForResume();
-    await new Promise(r => setTimeout(r, animationSpeed));
-  }
-}
-
-function highlightLine(lineNumber: number) {
-  highlightedLines.value = { start: lineNumber, end: lineNumber };
-}
-
-function clearHighlight() {
-  highlightedLines.value = null;
-}
-
-async function wait() {
-  await waitForResume();
-  await new Promise(r => setTimeout(r, waitStepSpeed));
-}
-
-function setTitle(stepName: string) {
-  const lines = code.value.split('\n');
-  lines[0] = `// step ${imageIndex.value} / 14: ${stepName}`;
-  code.value = lines.join('\n');
-}
-
-async function waitAndProceedToNextStep(stepName: string) {
-  imageIndex.value++;
-  await wait();
-
-  clearHighlight();
-  title.value = stepName;
-  tutorialStepNumber.value++;
-  trackPlausibleEvent(`Live Demo Playback: ${tutorialStepNumber.value.toString().padStart(2, '0')}`);
-
-  setTitle(stepName);
-  await new Promise(r => setTimeout(r, waitCodeSpeed));
-}
-
-
-/* Animation configuration */
-
-const primaryAction = ref<HTMLAnchorElement | null>(null);
-
-function resetAnimation() {
-  const startCode = '// hello pdf\n\n' +
-    'Document\n' +
-    '\t.Create(document =>\n' +
-    '\t{\n' +
-    '\t\tdocument.Page(page =>\n' +
-    '\t\t{\n' +
-    '\t\t\tpage.Size(PageSizes.Postcard);\n' +
-    '\t\t});\n' +
-    '\t})\n' +
-    '\t.GeneratePdfAndShow();'
-
-  code.value = startCode;
-  title.value = "Start with a blank document";
-  clearHighlight();
-}
-
-function scrollToPrimaryActionButton() {
-  if (primaryAction.value) {
-    primaryAction.value.scrollIntoView({
-      behavior: "smooth",
-      block: "end",
-    });
-
-    primaryAction.value.classList.add("highlight");
-  }
-}
-
-async function animate() {
-  await waitForResume();
-
-  tutorialStepNumber.value++;
-
-  trackPlausibleEvent("Live Demo Playback: Started");
-  setTitle("Start with a blank document");
-
-  await waitAndProceedToNextStep("Insert an element with a solid background");
-  await appendTextInLine(8, "\n\n");
-  highlightLine(10);
-  await appendTextInLine(10, "\t\t\tpage.Content()\n\t\t\t\t.Background(Colors.LightBlue.Lighten3);");
-
-  await waitAndProceedToNextStep("Set the page margins");
-  await appendTextInLine(8, "\n");
-  highlightLine(9);
-  await appendTextInLine(9, "\t\t\tpage.Margin(0.3f, Unit.Inch);");
-
-  await waitAndProceedToNextStep("Add a header with text");
-  await appendTextInLine(9, "\n\n");
-  highlightLine(11);
-  await appendTextInLine(11, "\t\t\tpage.Header()\n\t\t\t\t.Text(\"Hello PDF!\");");
-
-  await waitAndProceedToNextStep("Style the header text");
-  highlightLine(13);
-  await deleteTextAfter(".Text(\"Hello PDF!\");", ";");
-  await appendTextAfter(".Text(\"Hello PDF!\")", "\n");
-  highlightLine(13);
-  await appendTextInLine(13, "\t\t\t\t.FontSize(28)\n\t\t\t\t.Bold()\n\t\t\t\t.FontColor(Colors.Blue.Darken2);");
-
-  await waitAndProceedToNextStep("Insert a footer");
-  await appendTextInLine(18, "\n\n");
-  highlightLine(20);
-  await appendTextInLine(20, "\t\t\tpage.Footer()\n\t\t\t\t.Text(\"Footer\");");
-
-  await waitAndProceedToNextStep("Center-align the footer");
-  await appendTextAfter("page.Footer()", "\n");
-  highlightLine(21);
-  await appendTextInLine(21, "\t\t\t\t.AlignCenter()");
-
-  await waitAndProceedToNextStep("Include a page number in the footer");
-  highlightLine(22);
-  await deleteText(".Text(\"Footer\");")
-  await appendTextAfter(".AlignCenter()\n", "\t\t\t\t.Text(text => \n\t\t\t\t{\n \n \n\t\t\t\t});");
-  await appendTextInLine(24, "\t\t\t\t\ttext.Span(\"Page \");");
-  await appendTextInLine(25, "\t\t\t\t\ttext.CurrentPageNumber();");
-
-  await waitAndProceedToNextStep("Adjust the spacing between content sections");
-  await appendTextAfter(".Content()", "\n");
-  highlightLine(18);
-  await appendTextInLine(18, "\t\t\t\t.PaddingVertical(8)");
-
-  await waitAndProceedToNextStep("Add placeholder text");
-  highlightLine(19);
-  await deleteText(".Background(Colors.LightBlue.Lighten3);");
-  await appendTextInLine(19, ".Column(column => \n\t\t\t\t{\n \n\t\t\t\t});");
-  await appendTextInLine(21, "\t\t\t\t\tcolumn.Item()\n\t\t\t\t\t\t.Text(Placeholders.LoremIpsum());");
-
-  await waitAndProceedToNextStep("Justify the placeholder text");
-  await deleteTextAfter(".Text(Placeholders.LoremIpsum())", ";");
-  await appendTextInLine(22, "\n");
-  highlightLine(23);
-  await appendTextInLine(23, "\t\t\t\t\t\t.Justify();");
-
-  await waitAndProceedToNextStep("Insert a placeholder image");
-  await appendTextInLine(23, "\n\n");
-  highlightLine(25);
-  await appendTextInLine(25, "\t\t\t\t\tcolumn.Item()\n\t\t\t\t\t\t.AspectRatio(16 / 9f)\n\t\t\t\t\t\t.Image(Placeholders.Image);");
-
-  await waitAndProceedToNextStep("Adjust spacing between the text and image");
-  await appendTextInLine(20, "\n \n");
-  highlightLine(21);
-  await appendTextInLine(21, "\t\t\t\t\tcolumn.Spacing(8);");
-  clearHighlight();
-
-  await waitAndProceedToNextStep("Celebrate your completed document!");
-
-  await new Promise(r => setTimeout(r, waitStepSpeed));
-
-  scrollToPrimaryActionButton();
-
-  trackPlausibleEvent("Live Demo Playback: Completed");
-}
-
-
-/* Animation control observer */
-const showAnimation = ref(false);
-const codeAnimationContainer = ref<Element>();
-const observer = ref<IntersectionObserver | null>(null);
-
-
-onUnmounted(() => isAnimationRunning.value = false);
-
-async function playAnimation() {
-  showAnimation.value = true;
-  isAnimationRunning.value = true;
-
-  resetAnimation();
-  animate();
-
-  await nextTick();
-
-  observer.value = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      isAnimationRunning.value = entry.isIntersecting;
-    });
-  }, { threshold: 0.5 });
-
-  observer.value.observe(codeAnimationContainer.value);
-
-  const itemVerticalPosition = codeAnimationContainer.value.getBoundingClientRect();
-  window.scrollBy(0, itemVerticalPosition.y - 64 - 32);
-}
-
-</script>
-
-<template>
-  <section class="content">
-    <div class="section-header" style="margin-bottom: 16px;">
-      <i class="fa-duotone fa-film fa-2xl" />
-      <div class="section-header">
-        <h2>Experience the Simplicity</h2>
-        <p class="sub-header">See how QuestPDF's Fluent API lets you build professional documents with just a few lines of readable, intuitive C# code.</p>
-      </div>
-    </div>
-
-    <div v-if="showAnimation" ref="codeAnimationContainer" class="animation-container">
-      <home-page-code-container file-name="HelloWorld.cs" :code="code" :code-transformer="codeTransformer" />
-
-      <home-page-window-container file-name="Preview.pdf">
-        <img :src="'/homepage/quick-start-animation/step' + imageIndex + '.webp'" />
-      </home-page-window-container>
-    </div>
-
-    <a v-else class="action primary animation" @click="playAnimation">
-      <i class="fa-solid fa-play" style="color: white;" />
-      Watch Live Demo
-      <div class="divider"></div>
-      <span style="font-weight: 400;">~90 sec</span>
-    </a>
-  </section>
-</template>
-
-<style scoped>
-
-/* Page layout */
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.animation-container {
-  display: grid;
-  grid-gap: 48px;
-  grid-template-columns: 1fr 400px;
-  justify-self: center;
-  width: 100%;
-}
-
-@media screen and (max-width: 1000px) {
-  .animation-container {
-    grid-template-columns: 1fr 300px;
-    grid-gap: 24px;
-  }
-}
-
-@media screen and (max-width: 700px) {
-  .animation-container {
-    grid-template-columns: 1fr;
-    grid-gap: 32px;
-  }
-}
-
-html.dark img {
-  opacity: 0.8;
-}
-
-
-/* Play demo button */
-
-.action.animation {
-  padding: 4px 24px;
-}
-
-.action.animation {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  width: fit-content;
-}
-
-.action.animation .divider {
-  border-left: 1px solid #FFF8;
-  margin: 8px 0;
-  height: 20px;
-}
-
-
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/HomePageCodeContainer.vue b/docs/.vitepress/theme/homepage/HomePageCodeContainer.vue
deleted file mode 100644
index 21a576cf..00000000
--- a/docs/.vitepress/theme/homepage/HomePageCodeContainer.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup lang="ts">
-
-import {ShikiTransformer} from "@shikijs/types";
-
-import HomePageWindowContainer from "./HomePageWindowContainer.vue";
-import HomePageHighlightedCode from "./HomePageHighlightedCode.vue";
-
-const props = defineProps<{
-  fileName: string,
-  code: string,
-  codeTransformer?: ShikiTransformer
-}>();
-
-</script>
-
-<template>
-  <home-page-window-container :file-name="fileName">
-    <suspense>
-      <home-page-highlighted-code :code="code" :code-transformer="codeTransformer" />
-    </suspense>
-  </home-page-window-container>
-</template>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/HomePageCodeFocusedApproach.vue b/docs/.vitepress/theme/homepage/HomePageCodeFocusedApproach.vue
deleted file mode 100644
index f8956a06..00000000
--- a/docs/.vitepress/theme/homepage/HomePageCodeFocusedApproach.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-
-import codeFirstApproach from './codeExamples/codeFirstApproach.cs?raw';
-import HomePageCodeContainer from "./HomePageCodeContainer.vue";
-
-const features = [
-  {
-    icon: "fa-duotone fa-code",
-    title: "Dynamic Content Is Just Code",
-    description: "Use your existing programming language and patterns to ship faster with less training. Loops, conditionals, functions are natively supported. Leverage IntelliSense, inspections, navigation, and safe refactoring."
-  },
-  {
-    icon: "fa-duotone fa-code-pull-request",
-    title: "Version Control Friendly",
-    description: "Review document changes like any other code. Get clean diffs, PR approvals, and traceable history."
-  },
-  {
-    icon: "fa-duotone fa-sparkles",
-    title: "Ready for AI",
-    description: "A semantic Fluent API helps AI assistants generate layouts, refactor components, and troubleshoot issues effectively."
-  }
-];
-</script>
-
-<template>
-  <section class="content">
-    <div class="section-header">
-      <h2>Familiar Programming Patterns</h2>
-      <p class="sub-header">Treat documents as application code: strongly-typed models, reusable components, and IDE-assisted refactoring. Catch issues early with compile-time feedback.</p>
-    </div>
-
-    <div class="layout">
-      <article class="card" v-for="feature of features">
-        <i class="icon fa-2xl" :class="[feature.icon]"></i>
-        <h3 class="title">{{ feature.title }}</h3>
-        <p class="description">{{ feature.description }}</p>
-      </article>
-
-      <home-page-code-container
-          file-name="InvoiceDocument.cs"
-          :code="codeFirstApproach"
-          :code-transformer="{
-              line(node, line) {
-                if (line === 17) this.addClassToHast(node, 'line-removed');
-                if (line === 18) this.addClassToHast(node, 'line-added');
-              }
-            }" />
-
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-width: 800px;
-  width: 100%;
-}
-
-.layout {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 32px;
-  margin-top: 32px;
-  width: 100%;
-}
-
-.layout article:first-child {
-  grid-column: 1 / span 2;
-}
-
-.layout .file-container {
-  grid-column: 1 / span 2;
-}
-
-@media screen and (max-width: 700px) {
-  .layout {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCompanion.vue b/docs/.vitepress/theme/homepage/HomePageCompanion.vue
index 9c8589df..697aabe6 100644
--- a/docs/.vitepress/theme/homepage/HomePageCompanion.vue
+++ b/docs/.vitepress/theme/homepage/HomePageCompanion.vue
@@ -1,106 +1,303 @@
 <template>
-  <section class="content">
-    <div class="section-header">
-      <div class="section-tag">Development Tool</div>
-      <h2>Companion App</h2>
-      <p class="sub-header">Accelerate development with live document preview and hot-reload capability. See your changes instantly without recompiling.</p>
-    </div>
+  <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>
 
-    <div class="image-container">
-      <img :src="`/companion/application-light.webp`" alt="Companion App" class="companion-image light" />
-      <img :src="`/companion/application-dark.webp`" alt="Companion App" class="companion-image dark" />
-    </div>
+      <ul class="points" aria-label="What the Companion App does">
+        <li v-for="point of points" :key="point.text">
+          <Icon :icon="point.icon" />
+          <span>{{ point.text }}</span>
+        </li>
+      </ul>
+
+      <div class="actions">
+        <a class="action primary" href="/companion/usage.html">Get started</a>
 
+        <!-- a <button>, not a link: the VitePress router would navigate on a link click -->
+        <div ref="downloadRef" class="download">
+          <button
+            type="button"
+            class="action download-toggle"
+            :aria-expanded="isDownloadOpen"
+            @click="toggleDownload">
+            Download
+            <Icon class="download-chevron" :icon="faChevronDown" />
+          </button>
 
-    <div class="unordered-list">
-      <article v-for="summary of summaryContent" class="unordered-list-item">
-        <i class="fa-duotone fa-square-check"></i>
-        <p>{{ summary }}</p>
-      </article>
+          <div v-if="isDownloadOpen" ref="downloadMenuRef" class="download-menu" :class="{ below: isDownloadBelow }">
+            <a
+              v-for="download of downloads"
+              :key="download.url"
+              class="download-item"
+              :href="download.url"
+              @click="isDownloadOpen = false">
+              <Icon class="download-icon" :icon="download.icon" />
+              <span class="download-name">{{ download.name }}</span>
+              <span class="download-format">{{ download.format }}</span>
+            </a>
+          </div>
+        </div>
+      </div>
     </div>
 
-    <a class="action primary" href="/companion/features.html">Read more</a>
-  </section>
+    <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>
+  </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { 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 { 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" }
+];
+
+/* the latest release; keep in sync with docs/companion/download.md and public/companion/latest-version */
+const companionVersion = "2026.2.2";
+const releaseUrl = `https://github.com/QuestPDF/QuestPDF.Companion/releases/download/${companionVersion}`;
+
+const downloads = [
+  { icon: faWindows, name: "Windows", format: ".msix", url: `${releaseUrl}/questpdf_companion-${companionVersion}-windows.msix` },
+  { icon: faApple, name: "macOS", format: ".dmg", url: `${releaseUrl}/QuestPDF.Companion.${companionVersion}.dmg` },
+  { icon: faLinux, name: "Linux", format: ".deb", url: `${releaseUrl}/questpdf_companion-${companionVersion}-linux.deb` },
+  { icon: faLinux, name: "Linux", format: ".rpm", url: `${releaseUrl}/questpdf_companion-${companionVersion}-linux.rpm` }
+];
+
+const isDownloadOpen = ref(false);
+const isDownloadBelow = ref(false);
+const downloadRef = ref<HTMLElement | null>(null);
+const downloadMenuRef = ref<HTMLElement | null>(null);
+
+/* opens upwards unless the navbar would cover it and there is more room below; measured before the browser paints it */
+async function toggleDownload() {
+  isDownloadOpen.value = !isDownloadOpen.value;
+
+  if (!isDownloadOpen.value)
+    return;
+
+  await nextTick();
+
+  const menu = downloadMenuRef.value;
+  const anchor = menu?.offsetParent;
+
+  if (!menu || !anchor)
+    return;
+
+  const height = menu.offsetHeight + 8;
+  const { top, bottom } = anchor.getBoundingClientRect();
+  const navbarBottom = Math.max(0, document.querySelector(".VPNav")?.getBoundingClientRect().bottom ?? 0);
+
+  const roomAbove = top - navbarBottom;
+  const roomBelow = window.innerHeight - bottom;
+  isDownloadBelow.value = roomAbove < height && roomBelow > roomAbove;
+}
+
+function closeOnOutsideClick(event: MouseEvent) {
+  if (downloadRef.value && !downloadRef.value.contains(event.target as Node))
+    isDownloadOpen.value = false;
+}
+
+function closeOnEscape(event: KeyboardEvent) {
+  if (event.key === "Escape")
+    isDownloadOpen.value = false;
+}
 
-const summaryContent = [
-    "Explore PDF document hierarchy and navigate its structure",
-    "Quickly magnify and measure content",
-    "Debug runtime exceptions with stack traces and code snippets",
-    "Identify, understand and solve layout errors",
-]
+onMounted(() => {
+  document.addEventListener("click", closeOnOutsideClick);
+  document.addEventListener("keydown", closeOnEscape);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", closeOnOutsideClick);
+  document.removeEventListener("keydown", closeOnEscape);
+});
 
 </script>
 
 <style scoped>
 
-.content {
-  max-width: 800px;
+.companion {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 480px;
+  grid-template-areas: "media text";
+  gap: 48px;
+  align-items: center;
+}
+
+.companion-text {
+  grid-area: text;
+  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-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;
+}
+
+
+.points {
   display: flex;
   flex-direction: column;
-  align-items: start;
+  gap: 4px;
+  margin: 24px 0 0;
 }
 
-@media screen and (max-width: 800px) {
-  .content {
-    grid-template-columns: 1fr;
-    grid-gap: 32px;
-  }
+.points li {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 6px 0;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
 }
 
-.section-header {
-  align-items: start;
-  margin: 0;
+.points .icon {
+  flex-shrink: 0;
+  width: 18px;
+  margin-top: 0.25rem;
+  font-size: 1rem;
+  color: light-dark(#1976D2, var(--vp-c-brand-1));
+}
 
-  .sub-header {
-    margin-bottom: 0;
-  }
 
-  & > * {
-    text-align: left;
-  }
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
 }
 
-.image-container {
-  margin: 32px 0;
+.download {
+  position: relative;
 }
 
-@media screen and (min-width: 1000px) {
-  .image-container {
-    position: relative;
-    margin: 96px 0;
-  }
+.download-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.download-chevron {
+  font-size: 1rem;
+  transition: transform 0.2s ease;
+}
 
-  .image-container::before {
-    content: "";
-    position: absolute;
-    inset: -48px;
+.download-toggle[aria-expanded="true"] .download-chevron {
+  transform: rotate(180deg);
+}
 
-    background: var(--vp-c-bg-alt);
-    border-radius: 48px;
-  }
+.download-menu {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 0;
+  z-index: 10;
+  min-width: 240px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vp-c-bg-elv);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  box-shadow: var(--elevation);
 }
 
-.companion-image {
-  position: relative;
-  display: block;
+.download-menu.below {
+  top: calc(100% + 8px);
+  bottom: auto;
+}
+
+.download-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
   border-radius: 8px;
-  border: 1px solid #8884;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
 }
 
-html:not(.dark) .companion-image.dark {
-  display: none;
+.download-item:hover {
+  background-color: var(--vp-c-default-soft);
 }
 
-html.dark .companion-image.light {
-  display: none;
+.download-icon {
+  flex-shrink: 0;
+  width: 18px;
+  text-align: center;
+  font-size: 1.0625rem;
+  color: var(--vp-c-text-2);
+}
+
+.download-name {
+  flex: 1;
+  font-weight: 500;
+}
+
+.download-format {
+  color: var(--vp-c-text-3);
+}
+
+
+@media screen and (max-width: 1320px) {
+  .companion {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas: "text" "media";
+    gap: 28px;
+  }
+
+  .companion-text,
+  .companion-media {
+    width: 100%;
+    max-width: 920px;
+    margin: 0 auto;
+  }
 }
 
-.action {
-  margin-top: 32px;
+/* measured on the text column, so a classic scrollbar or a zoom level cannot fool it */
+@container (max-width: 440px) {
+  .actions {
+    position: relative;
+  }
+
+  .download {
+    position: static;
+  }
+
+  .download-menu {
+    right: 0;
+    min-width: 0;
+  }
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue
new file mode 100644
index 00000000..c98b8b15
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageCtaBuildVisual.vue
@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { faPlay } from "@fortawesome/pro-solid-svg-icons";
+import Icon from "../Icon.vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { reducedMotion, Timeline } from "./ctaTimeline";
+
+/* The intro-video card's visual: an invoice page in 3D whose sections land on it on hover, or when the card comes
+   into view on a device without hover. A pass always finishes, even if the pointer leaves. Reduced motion: the
+   finished page, nothing moves. */
+
+const props = defineProps<{ active: boolean; visible: boolean }>();
+const playing = computed(() => props.active || props.visible);
+
+/* play: the play button is shown; it hides when a pass starts and returns with the totals */
+const play = ref(true);
+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";
+}
+
+interface Section extends Box {
+  delay: number;
+  bars: Bar[];
+}
+
+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 */
+  {
+    x: 10, y: 12, w: 128, h: 30, delay: 0,
+    bars: [
+      { x: 2, y: 4, w: 14, h: 14, tone: "strong" },
+      { 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" }
+    ]
+  }
+];
+
+function box(item: Box) {
+  return { left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` };
+}
+
+/* a pass: the content fades out (0.2s), then the sections land one after another (0.7s each, the last starting
+   0.95s in) and the play button returns 1s into the landings; see ctaTimeline.ts for the waits */
+const FADE = 200;
+const LAND = 700;
+const PLAY_AT = 1000;
+const LAND_EASING = "cubic-bezier(0.3, 0.6, 0.15, 1)";
+
+const timeline = new Timeline();
+let busy = false;
+
+async function pass() {
+  busy = true;
+  play.value = false;
+
+  const targets = [...root.value!.querySelectorAll(".section")];
+
+  const fades = targets.map(section => timeline.animate(section, [{ opacity: 1 }, { opacity: 0 }], { duration: FADE, easing: "ease-out", fill: "both" }));
+
+  if (!await Timeline.settled(fades))
+    return;
+
+  const landings = targets.map((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" }));
+
+  fades.forEach(fade => fade.cancel()); /* each landing holds its section invisible until its turn */
+
+  Timeline.settled([timeline.wait(root.value!, PLAY_AT)]).then(reached => reached && (play.value = true));
+
+  if (!await Timeline.settled(landings))
+    return;
+
+  landings.forEach(landing => landing.cancel()); /* their end state is the page's own */
+  busy = false;
+}
+
+watch(playing, isPlaying => {
+  if (isPlaying && !busy && !reducedMotion())
+    pass();
+});
+
+onBeforeUnmount(() => timeline.cancel());
+</script>
+
+<template>
+  <div ref="root" class="scene build" :class="{ play, active: playing }">
+    <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>
+      </div>
+    </div>
+
+    <span class="play-button"><Icon :icon="faPlay" /></span>
+  </div>
+</template>
+
+<style scoped src="./ctaVisual.css"></style>
+
+<style scoped>
+
+/* the pose; the rest is shared, see ctaVisual.css */
+.build {
+  --tilt-y: 26deg;
+  --tilt-z: -2deg;
+  --lift: 56px; /* how far in front of the page a section starts */
+}
+
+
+.section {
+  position: absolute;
+  color: var(--ink);
+}
+
+/* hidden from the start of a pass until the script sets .play */
+.play-button {
+  position: absolute;
+  z-index: 10;
+  left: calc(50% - 22px);
+  top: calc(50% - 22px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  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 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;
+}
+
+.play-button .icon {
+  font-size: 1rem;
+  margin-left: 3px; /* optical centring of the triangle */
+}
+
+.build:not(.play) > .play-button {
+  transform: scale(0.45);
+  opacity: 0;
+  transition-duration: 0.18s;
+  transition-timing-function: ease-in;
+}
+
+.play-button::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-secondary) 45%, transparent);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Hover */
+@media (prefers-reduced-motion: no-preference) {
+  .build.active {
+    --tilt-x: 4deg;
+    --tilt-y: 14deg;
+    --tilt-z: -1deg;
+    --rise: -4px;
+  }
+
+  .build.active.play > .play-button {
+    transform: scale(1.08);
+    animation: play-breathe 1.8s ease-in-out 0.4s infinite;
+  }
+
+  .build.active.play > .play-button::before {
+    animation: play-ring 1.8s ease-out 0.4s infinite;
+  }
+}
+
+@keyframes play-breathe {
+  0%, 100% {
+    transform: scale(1.08);
+  }
+
+  35% {
+    transform: scale(1.14);
+  }
+}
+
+@keyframes play-ring {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-secondary) 45%, transparent);
+    opacity: 1;
+  }
+
+  70%, 100% {
+    box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent-secondary) 45%, transparent);
+    opacity: 0;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaCard.vue b/docs/.vitepress/theme/homepage/HomePageCtaCard.vue
new file mode 100644
index 00000000..769e6fc4
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageCtaCard.vue
@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import Icon from "../Icon.vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+
+/* `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. */
+
+withDefaults(defineProps<{
+  title: string;
+  description: string;
+
+  label: string;
+  href: string;
+
+  /* the glow behind the visual (dark theme) and the colour of the link row */
+  accent?: string;
+  accentSecondary?: string;
+}>(), {
+  accent: "#0094F9",
+  accentSecondary: "#2979FF"
+});
+
+const card = ref<HTMLElement>();
+const hovered = ref(false);
+const focused = ref(false);
+const visible = ref(false);
+const active = computed(() => hovered.value || focused.value);
+
+function onFocus(event: FocusEvent) {
+  focused.value = (event.target as Element).matches(":focus-visible");
+}
+
+let observer: IntersectionObserver | undefined;
+
+onMounted(() => {
+  if (window.matchMedia("(hover: hover)").matches)
+    return;
+
+  observer = new IntersectionObserver(([entry]) => visible.value = entry.isIntersecting, { threshold: 0.6 });
+  observer.observe(card.value!);
+});
+
+onBeforeUnmount(() => observer?.disconnect());
+</script>
+
+<template>
+  <a
+      ref="card"
+      class="panel cta-card"
+      :class="{ active }"
+      :style="{ '--accent': accent, '--accent-secondary': accentSecondary }"
+      :href="href"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+      @focus="onFocus"
+      @blur="focused = false">
+    <div class="background-gradient" />
+
+    <!-- the visual is decoration: the link is named by its text -->
+    <div class="visual" aria-hidden="true">
+      <slot name="visual" :active="active" :visible="visible" />
+    </div>
+
+    <div class="cta-text">
+      <h2 class="card-title">{{ title }}</h2>
+      <p class="card-description">{{ description }}</p>
+
+      <span class="cta-link">
+        {{ label }}
+        <Icon class="arrow-icon" :icon="faArrowRight" />
+      </span>
+    </div>
+  </a>
+</template>
+
+<style scoped>
+
+.cta-card {
+  isolation: isolate; /* keeps the gradient (z-index: -1) above the panel background but below the content */
+  overflow: hidden;
+
+  display: grid;
+  grid-template-columns: 184px minmax(0, 1fr);
+  column-gap: 24px;
+  align-items: center;
+  min-height: 256px;
+  padding: 32px 48px 32px 32px;
+
+  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+}
+
+.cta-card.active {
+  transform: translateY(-3px);
+  box-shadow: var(--accent-halo);
+  background-color: color-mix(in srgb, var(--surface), #FFF 20%);
+}
+
+html.dark .cta-card.active {
+  box-shadow: var(--elevation-hover), var(--accent-halo);
+  background-color: rgba(255, 255, 255, 0.07);
+}
+
+.cta-card:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 4px;
+}
+
+
+/* Hover ring: a conic gradient masked to the outer 2px; without @property it stands still */
+
+@property --cta-ring-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.cta-card {
+  --accent-halo:
+      0 1px 2px rgba(16, 24, 40, 0.04),
+      0 13px 27px -5px color-mix(in srgb, var(--accent) 18%, transparent),
+      0 8px 16px -8px color-mix(in srgb, var(--accent) 24%, transparent);
+
+  /* the accent is a glow colour: as text it is darkened on the light theme and lightened on the dark one */
+  --accent-text: color-mix(in srgb, var(--accent-secondary) 85%, #000);
+}
+
+html.dark .cta-card {
+  --accent-halo: 0 0 48px -16px color-mix(in srgb, var(--accent) 50%, transparent);
+  --accent-text: color-mix(in srgb, var(--accent) 75%, #FFF);
+  --glow-outer: color-mix(in srgb, var(--accent) 13%, transparent);
+  --glow-inner: color-mix(in srgb, var(--accent-secondary) 6%, transparent);
+}
+
+.cta-card::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  border-radius: inherit;
+  padding: 2px;
+  pointer-events: none;
+
+  --ring-base: color-mix(in srgb, var(--accent) 22%, transparent);
+  --ring-peak: light-dark(var(--accent), color-mix(in srgb, var(--accent) 80%, #FFF));
+  background: conic-gradient(
+      from var(--cta-ring-angle),
+      var(--ring-base) 0deg,
+      var(--accent-secondary) 24deg,
+      var(--ring-peak) 40deg,
+      var(--ring-base) 72deg,
+      var(--ring-base) 120deg,
+      var(--accent-secondary) 144deg,
+      var(--ring-peak) 160deg,
+      var(--ring-base) 192deg,
+      var(--ring-base) 240deg,
+      var(--accent-secondary) 264deg,
+      var(--ring-peak) 280deg,
+      var(--ring-base) 312deg,
+      var(--ring-base) 360deg);
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.cta-card.active::after {
+  opacity: 0.75;
+  animation: cta-ring-spin 12s linear infinite;
+}
+
+@keyframes cta-ring-spin {
+  to {
+    --cta-ring-angle: 360deg;
+  }
+}
+
+
+.cta-text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.cta-text .card-description {
+  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;
+  transition: transform 0.25s ease;
+}
+
+.cta-card.active .arrow-icon {
+  transform: translateX(4px);
+}
+
+
+.visual {
+  position: relative;
+  min-width: 0;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+.background-gradient {
+  display: none;
+  position: absolute;
+  pointer-events: none;
+  inset: 0;
+  z-index: -1;
+  background-image:
+      radial-gradient(ellipse 70% 90% at 18% 0%, var(--glow-outer), transparent),
+      radial-gradient(ellipse 40% 50% at 18% 0%, var(--glow-inner), transparent);
+  opacity: 0.8;
+  transition: opacity 0.3s ease;
+}
+
+html.dark .background-gradient {
+  display: block;
+}
+
+.cta-card.active .background-gradient {
+  opacity: 1;
+}
+
+
+@media screen and (max-width: 1280px) and (min-width: 1181px) {
+  .cta-card {
+    grid-template-columns: 168px minmax(0, 1fr);
+    padding: 28px;
+  }
+}
+
+
+/* Compact: below 700px the visual sits above the text */
+
+@media screen and (max-width: 700px) {
+  .cta-card {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: 20px;
+    min-height: 0;
+    padding: 24px;
+  }
+
+  .visual {
+    align-self: auto;
+  }
+
+  .cta-text .card-title {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+
+  .background-gradient {
+    background-image: radial-gradient(ellipse 80% 70% at 50% 0%, var(--glow-outer), transparent);
+  }
+}
+
+
+/* Reduced motion */
+
+@media (prefers-reduced-motion: reduce) {
+  .cta-card,
+  .cta-card.active {
+    transform: none;
+    transition: box-shadow 0.3s ease, background-color 0.3s ease;
+  }
+
+  .cta-card.active::after {
+    animation: none;
+  }
+
+  .cta-card.active .arrow-icon {
+    transform: none;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue
new file mode 100644
index 00000000..2dff7890
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageCtaDeckVisual.vue
@@ -0,0 +1,479 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { reducedMotion, Timeline } from "./ctaTimeline";
+
+/* The sample-gallery card's visual: a pile of six sample pages in 3D that browses on hover, and for one cycle when
+   the card comes into view on a device without hover. When a run ends, the running step finishes in the hover pose
+   first, hence the component's own hover class. Reduced motion: the pile stays still. */
+
+const props = defineProps<{ active: boolean; visible: boolean }>();
+
+/* hover: the hover pose, which outlasts the pointer until a running step ends. front: the page in front.
+   leaving: the page on its way from the front to the back while a step runs (-1: none). */
+const hover = ref(false);
+const front = ref(0);
+const leaving = ref(-1);
+const stepping = computed(() => leaving.value >= 0);
+const root = ref<HTMLElement>();
+
+/* a shape on a page, in page coordinates (148 x 200): a placeholder bar, or a photo (block), an outline
+   (frame), a circle (ring, disc) or a stripe behind a table row (band); one per page takes the accent */
+interface Shape {
+  kind?: "block" | "frame" | "ring" | "disc" | "band";
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  tone?: "strong" | "soft" | "accent";
+  r?: number; /* rotation in degrees: a signature */
+  b?: number; /* border width: rings and frames */
+}
+
+interface Page {
+  name: string;
+  shapes: Shape[];
+}
+
+function cells(y: number, columns: [number, number][], tones: (Shape["tone"] | undefined)[] = [undefined, "soft", "soft", undefined]): Shape[] {
+  return columns.map(([x, w], index) => ({ x, y, w, h: 4, tone: tones[index] }));
+}
+
+const chartHeights = [30, 46, 24, 58, 40, 68];
+
+const pages: Page[] = [
+  {
+    name: "report",
+    shapes: [
+      { x: 10, y: 12, w: 64, h: 8, tone: "strong" },
+      { x: 10, y: 24, w: 40, h: 4, tone: "soft" },
+      { x: 108, y: 13, w: 30, h: 4, tone: "soft" },
+
+      ...chartHeights.map((h, index): Shape => ({ x: 14 + index * 20, y: 96 - h, w: 14, h, tone: index === chartHeights.length - 1 ? "accent" : undefined })),
+      { x: 10, y: 96, w: 128, h: 1.5, tone: "soft" },
+      ...chartHeights.map((_, index): Shape => ({ x: 16 + index * 20, y: 100, w: 10, h: 3, tone: "soft" })),
+
+      { x: 10, y: 112, w: 128, h: 4 },
+      { x: 10, y: 119, w: 120, h: 4, tone: "soft" },
+      { x: 10, y: 126, w: 128, h: 4 },
+      { x: 10, y: 133, w: 84, h: 4, tone: "soft" },
+
+      { x: 10, y: 148, w: 128, h: 8, tone: "strong" },
+      ...[160, 168, 176, 184].flatMap(y => cells(y, [[12, 40], [66, 22], [96, 16], [118, 18]]))
+    ]
+  },
+  {
+    name: "certificate",
+    shapes: [
+      { kind: "frame", x: 8, y: 8, w: 132, h: 184, tone: "soft", b: 2 },
+      { kind: "frame", x: 13, y: 13, w: 122, h: 174, tone: "soft", b: 1 },
+      { kind: "ring", x: 66, y: 24, w: 16, h: 16, tone: "strong", b: 3 },
+
+      { x: 34, y: 50, w: 80, h: 9, tone: "strong" },
+      { x: 49, y: 64, w: 50, h: 4, tone: "soft" },
+      { x: 54, y: 82, w: 40, h: 3.5, tone: "soft" },
+      { x: 29, y: 90, w: 90, h: 8, tone: "strong" },
+      { x: 24, y: 106, w: 100, h: 4, tone: "soft" },
+      { x: 34, y: 113, w: 80, h: 4, tone: "soft" },
+      { x: 44, y: 120, w: 60, h: 4, tone: "soft" },
+
+      { kind: "ring", x: 100, y: 138, w: 28, h: 28, tone: "accent", b: 4 },
+      { kind: "disc", x: 107, y: 145, w: 14, h: 14, tone: "accent" },
+
+      { x: 22, y: 152, w: 34, h: 5, tone: "strong", r: -8 },
+      { x: 18, y: 162, w: 50, h: 1.5, tone: "soft" },
+      { x: 18, y: 167, w: 30, h: 3.5, tone: "soft" }
+    ]
+  },
+  {
+    name: "catalogue",
+    shapes: [
+      { x: 10, y: 12, w: 56, h: 8, tone: "strong" },
+      { x: 108, y: 14, w: 30, h: 4, tone: "soft" },
+
+      ...[28, 84, 140].flatMap((y, row) => [10, 79].flatMap((x, column): Shape[] => [
+        { kind: "block", x, y, w: 59, h: 40, tone: row === 1 && column === 1 ? "accent" : undefined },
+        { x, y: y + 44, w: 34, h: 4 },
+        { x: x + 45, y: y + 44, w: 14, h: 4, tone: "strong" },
+        { x, y: y + 50, w: 48, h: 3, tone: "soft" }
+      ]))
+    ]
+  },
+  {
+    name: "dashboard",
+    shapes: [
+      { x: 10, y: 12, w: 50, h: 8, tone: "strong" },
+      { x: 112, y: 14, w: 26, h: 4, tone: "soft" },
+
+      ...[10, 54, 98].flatMap((x): Shape[] => [
+        { kind: "frame", x, y: 28, w: 40, h: 28, tone: "soft", b: 1 },
+        { x: x + 4, y: 32, w: 18, h: 3, tone: "soft" },
+        { x: x + 4, y: 40, w: 26, h: 9, tone: "strong" }
+      ]),
+
+      { kind: "ring", x: 12, y: 66, w: 50, h: 50, tone: "accent", b: 9 },
+      { x: 28, y: 87, w: 18, h: 6, tone: "strong" },
+      ...[72, 82, 92, 102].flatMap((y, index): Shape[] => [
+        { x: 72, y, w: 6, h: 4, tone: index === 0 ? "accent" : "strong" },
+        { x: 84, y, w: [46, 36, 42, 28][index], h: 4, tone: index % 2 ? "soft" : undefined }
+      ]),
+
+      { x: 10, y: 128, w: 128, h: 8, tone: "strong" },
+      ...[140, 149, 158, 167, 176, 185].flatMap(y => cells(y, [[12, 34], [60, 18], [90, 16], [116, 20]]))
+    ]
+  },
+  {
+    name: "letter",
+    shapes: [
+      { x: 10, y: 12, w: 14, h: 14, tone: "accent" },
+      { x: 30, y: 14, w: 44, h: 5, tone: "strong" },
+      { x: 30, y: 22, w: 32, h: 3.5, tone: "soft" },
+      { x: 104, y: 14, w: 34, h: 3.5, tone: "soft" },
+      { x: 110, y: 20, w: 28, h: 3.5, tone: "soft" },
+
+      { x: 10, y: 40, w: 28, h: 4, tone: "soft" },
+      { x: 10, y: 52, w: 52, h: 4 },
+      { x: 10, y: 59, w: 42, h: 4, tone: "soft" },
+      { x: 10, y: 66, w: 36, h: 4, tone: "soft" },
+      { x: 10, y: 80, w: 70, h: 5, tone: "strong" },
+
+      ...[128, 128, 116, 72].map((w, index): Shape => ({ x: 10, y: 92 + index * 7, w, h: 4, tone: index % 2 ? "soft" : undefined })),
+      ...[128, 124, 96].map((w, index): Shape => ({ x: 10, y: 125 + index * 7, w, h: 4, tone: index % 2 ? "soft" : undefined })),
+
+      { x: 10, y: 152, w: 28, h: 4 },
+      { x: 12, y: 162, w: 40, h: 6, tone: "strong", r: -7 },
+      { x: 10, y: 174, w: 36, h: 4 },
+      { x: 10, y: 181, w: 28, h: 3.5, tone: "soft" },
+      { x: 10, y: 192, w: 60, h: 2.5, tone: "soft" }
+    ]
+  },
+  {
+    name: "table",
+    shapes: [
+      { x: 10, y: 12, w: 76, h: 8, tone: "strong" },
+      { x: 10, y: 24, w: 48, h: 4, tone: "soft" },
+      { x: 10, y: 34, w: 128, h: 9, tone: "strong" },
+
+      ...Array.from({ length: 11 }, (_, index) => 47 + index * 12).flatMap((y, index): Shape[] => [
+        ...(index % 2 ? [{ kind: "band", x: 10, y: y - 4, w: 128, h: 12 } as Shape] : []),
+        ...cells(y, [[13, 34], [54, 18], [80, 14], [110, 24]], [undefined, "soft", index % 3 === 1 ? "accent" : "soft", undefined])
+      ]),
+
+      { x: 92, y: 182, w: 46, h: 5, tone: "strong" }
+    ]
+  }
+];
+
+const LAST = pages.length - 1;
+const TILTS = [0, 1.2, -1, 0.8, -1.4, 0.6];
+
+const slots = computed(() => pages.map((_, index) => (index - front.value + pages.length) % pages.length));
+
+function shapeStyle(shape: Shape) {
+  return {
+    left: `${shape.x}px`,
+    top: `${shape.y}px`,
+    width: `${shape.w}px`,
+    height: `${shape.h}px`,
+    transform: shape.r ? `rotate(${shape.r}deg)` : undefined,
+    borderWidth: shape.b ? `${shape.b}px` : undefined
+  };
+}
+
+/* the clock: a page rests in hand about 0.7s before it leaves (it is in hand 0.53s after hover, 0.6s into a step),
+   so the first step comes 1.2s after hover and the next ones 1.3s apart; see ctaTimeline.ts for the waits */
+const STEP = 1200;
+const FIRST_STEP_DELAY = 1200;
+const STEP_INTERVAL = 1300;
+
+/* a leaving page: lifted out of the hand while it fades (to 35%), moved to the back while invisible (at 36%, 4px in
+   front of its place: from behind it would cross the blank sheet's plane and its edge would pop), then settled while
+   it fades back in. The hand pose repeats .deck.hover .page-3d.front; the place is the page's own transform. */
+const HAND = "translate3d(-2px, 10px, 64px) rotateZ(-1deg) rotateY(16deg) rotateX(-6deg) scale(1)";
+const LIFTED = "translate3d(-2px, 6px, 76px) rotateZ(-1deg) rotateY(16deg) rotateX(-6deg) scale(1)";
+const place = (offset: string) => `translate3d(calc(var(--last) * var(--dx)), calc(var(--last) * var(--dy)), calc(var(--last) * -1 * var(--dz) + var(--lift)${offset})) rotateZ(var(--r)) scale(var(--shrink))`;
+
+const LEAVE_PLACE: Keyframe[] = [
+  { transform: HAND, easing: "ease-out" },
+  { transform: LIFTED, offset: 0.35, easing: "step-end" },
+  { transform: place(" + 4px"), offset: 0.36, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)" },
+  { transform: place("") }
+];
+
+const LEAVE_FADE: Keyframe[] = [
+  { opacity: 1, easing: "cubic-bezier(0.45, 0, 0.55, 1)" },
+  { opacity: 0, offset: 0.35, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)" },
+  { opacity: 0, offset: 0.39, easing: "cubic-bezier(0.2, 0.7, 0.2, 1)" },
+  { opacity: 1 }
+];
+
+/* the run: without end while hovered, one cycle through the pile when the card merely came into view */
+const run = computed(() => props.active ? Infinity : props.visible ? pages.length : 0);
+
+const timeline = new Timeline();
+let remaining = 0; /* steps left in the run */
+let pending: Animation | undefined; /* the wait before the next step; cancelled when the run changes */
+
+/* one browse step: the front page leaves and the pile advances; the hover pose is held until the page has settled */
+async function step() {
+  const page = root.value!.querySelectorAll(".page-3d:not(.blank)")[front.value];
+  leaving.value = front.value;
+  front.value = (front.value + 1) % pages.length;
+
+  const motions = [
+    timeline.animate(page, LEAVE_PLACE, { duration: STEP, fill: "both" }),
+    timeline.animate(page, LEAVE_FADE, { duration: STEP, fill: "both" })
+  ];
+
+  if (!await Timeline.settled(motions))
+    return;
+
+  motions.forEach(motion => motion.cancel()); /* the end state is the page's own place */
+  leaving.value = -1;
+  hover.value = remaining > 0;
+}
+
+async function browse() {
+  for (let delay = FIRST_STEP_DELAY; remaining > 0; delay = STEP_INTERVAL) {
+    pending = timeline.wait(root.value!, delay);
+
+    if (!await Timeline.settled([pending]))
+      return;
+
+    remaining--;
+    step();
+  }
+}
+
+watch(run, steps => {
+  pending?.cancel();
+  remaining = steps;
+
+  if (steps > 0 && !reducedMotion()) {
+    hover.value = true;
+    browse();
+  }
+  else if (!stepping.value) {
+    hover.value = false;
+  }
+});
+
+onBeforeUnmount(() => timeline.cancel());
+</script>
+
+<template>
+  <div ref="root" class="scene deck" :class="{ hover, stepping }" :style="{ '--last': LAST }">
+    <div class="stage">
+      <div class="model">
+        <div class="shadow" />
+
+        <div class="page-3d blank" :style="{ '--i': LAST, '--r': `${TILTS[LAST]}deg` }">
+          <div class="paper page" />
+        </div>
+
+        <div
+            v-for="(page, index) of pages"
+            :key="page.name"
+            class="page-3d"
+            :class="{ leaving: leaving === index, front: slots[index] === 0 }"
+            :style="{ '--i': slots[index], '--r': `${TILTS[slots[index]]}deg` }">
+          <div class="paper page">
+            <span
+                v-for="(shape, shapeIndex) of page.shapes"
+                :key="shapeIndex"
+                class="shape"
+                :class="[shape.kind, shape.tone]"
+                :style="shapeStyle(shape)" />
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./ctaVisual.css"></style>
+
+<style scoped>
+
+/* the pose, the mirror of the invoice beside it; each place back is offset by --dz, --dx and --dy */
+.deck {
+  --tilt-y: -26deg;
+  --tilt-z: 2deg;
+  --scale: 0.68;
+  --shift: -12px;
+  --dx: 4px;
+  --dy: -4px;
+  --dz: 14px;
+  --ink-strong: #5A6472;
+}
+
+.stage {
+  transition: perspective 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* a page in the pile: its place --i (0 in front) and lean --r. The rest is for the page in hand: --lift
+   (towards the reader), --par-x / --par-y (a shift), --spin / --turn-y / --flat (rotations about Z, Y and X,
+   the reverse of the pile's order, so a page can undo the pile's pose exactly) and --shrink for the pages
+   left behind. */
+.page-3d {
+  --lift: 0px;
+  --par-x: 0px;
+  --par-y: 0px;
+  --spin: 0deg;
+  --turn-y: 0deg;
+  --flat: 0deg;
+  --shrink: 1;
+
+  position: absolute;
+  inset: 0;
+  will-change: transform, opacity; /* the pages stay composited, so a step starting or ending does not re-raster them */
+  transform:
+      translate3d(
+          calc(var(--i) * var(--dx) + var(--par-x)),
+          calc(var(--i) * var(--dy) + var(--par-y)),
+          calc(var(--i) * -1 * var(--dz) + var(--lift)))
+      rotateZ(calc(var(--r) + var(--spin)))
+      rotateY(var(--turn-y))
+      rotateX(var(--flat))
+      scale(var(--shrink));
+  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
+}
+
+/* no shadow per page (six would darken the pile); each place back is shaded a touch darker instead */
+.page {
+  --page-shade: calc(0.025 + var(--i) * 0.012);
+  overflow: hidden;
+  color: var(--ink);
+  box-shadow:
+      0 0 0 1px light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.06)),
+      0 1px 2px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.3));
+  transition: box-shadow 0.45s ease, filter 0.45s ease;
+}
+
+.shadow {
+  transform: translate3d(calc(var(--last) * var(--dx) / 2), calc(var(--last) * var(--dy) / 2), calc(var(--last) * -1 * var(--dz) - 16px));
+  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* keeps the back place from looking empty while the pile advances */
+.page-3d.blank {
+  --lift: -2px;
+}
+
+.deck.hover .page-3d.blank {
+  --lift: -12px;
+}
+
+
+/* Shapes */
+.shape.accent {
+  color: var(--accent-secondary);
+  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%);
+}
+
+.shape.block.accent {
+  opacity: 0.4;
+}
+
+.shape.frame,
+.shape.ring {
+  background: none;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+.shape.frame {
+  border-radius: 3px;
+  opacity: 0.4;
+}
+
+.shape.ring,
+.shape.disc {
+  border-radius: 50%;
+}
+
+.shape.band {
+  opacity: 0.1;
+}
+
+
+/* Browse step: the leaving page's motion is in the script */
+.deck.stepping .page-3d:not(.leaving) {
+  transition-duration: 0.7s;
+  transition-delay: 0.1s;
+}
+
+.deck.hover.stepping .page-3d.front:not(.leaving) {
+  transition-duration: 0.6s;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  transition-delay: 0s;
+}
+
+.deck.hover.stepping .page-3d.front:not(.leaving) .page {
+  transition-duration: 0.6s;
+}
+
+
+/* Hover */
+.deck.hover {
+  --tilt-x: 6deg;
+  --tilt-y: -16deg;
+  --tilt-z: 1deg;
+  --rise: -4px;
+  --dx: 7px;
+  --dy: -6px;
+  --dz: 20px;
+}
+
+.deck.hover .stage {
+  perspective: 500px;
+}
+
+.deck.hover .page-3d.front:not(.leaving) {
+  --lift: 64px;
+  --par-x: -2px;
+  --par-y: 10px;
+  --spin: -1deg;
+  --turn-y: 16deg;
+  --flat: -6deg;
+  transition-delay: 0.08s;
+}
+
+.deck.hover .page-3d.front:not(.leaving) .page {
+  box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.10),
+      0 2px 4px rgba(16, 24, 40, 0.08),
+      0 20px 32px -12px rgba(16, 24, 40, 0.35);
+}
+
+.deck.hover .page-3d:not(.front) {
+  --shrink: 0.9;
+  --lift: -10px;
+}
+
+.deck.hover .page-3d:not(.front) .page {
+  filter: brightness(0.95);
+}
+
+.shape {
+  transition: color 0.5s ease, opacity 0.5s ease, background-color 0.5s ease;
+  transition-delay: calc((var(--last) - var(--i)) * 60ms);
+}
+
+.deck.hover .shape {
+  transition-delay: calc(0.1s + var(--i) * 110ms);
+}
+
+.deck.hover .shape.strong { color: var(--ink-strong); }
+.deck.hover .shape.accent { opacity: 1; }
+.deck.hover .shape.block { background-color: color-mix(in srgb, var(--accent) 45%, #C9D0DB); opacity: 0.55; }
+.deck.hover .shape.block.accent { background-color: var(--accent-secondary); opacity: 0.85; }
+.deck.hover .shape.band { background-color: var(--accent-secondary); opacity: 0.09; }
+.deck.hover .shape.ring.strong { color: var(--accent-secondary); }
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue
new file mode 100644
index 00000000..9303ff28
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageCtaFeaturesVisual.vue
@@ -0,0 +1,316 @@
+<script setup lang="ts">
+import { faChartMixed, faImage, faQrcode, faTable, faText } from "@fortawesome/pro-regular-svg-icons";
+import Icon from "../Icon.vue";
+import { computed } from "vue";
+
+/* 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. */
+
+const props = defineProps<{ active: boolean; visible: boolean }>();
+const lit = computed(() => props.active || props.visible);
+
+/* 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;
+}
+
+interface Shape extends Box {
+  kind?: "block" | "qr";
+  tone?: "strong" | "soft" | "accent";
+  region?: number;
+}
+
+function box(item: Box) {
+  return { left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` };
+}
+
+const chartHeights = [18, 30, 22, 40, 32];
+
+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 },
+
+  ...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 },
+
+  { 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 }))),
+
+  { 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 }
+];
+
+/* 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 }
+];
+
+/* 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` } };
+});
+</script>
+
+<template>
+  <div 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 }" />
+        </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./ctaVisual.css"></style>
+
+<style scoped>
+
+/* the pose, the mirror of the invoice beside it, a little flatter as the tiles hang out to the sides */
+.features {
+  --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));
+}
+
+.page {
+  overflow: hidden;
+  color: var(--ink);
+}
+
+
+/* Shapes */
+.shape {
+  transition: color 0.45s ease, opacity 0.45s ease, background-color 0.45s ease;
+}
+
+.shape.accent {
+  color: var(--lit);
+  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%);
+}
+
+/* two checkerboards of different periods make the modules look irregular; the inset ring is the finder pattern */
+.shape.qr {
+  opacity: 0.85;
+  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;
+}
+
+.shape.lit {
+  color: var(--lit);
+  transition-delay: calc(var(--n) * 140ms + 220ms);
+}
+
+.shape.lit.accent {
+  opacity: 1;
+}
+
+.shape.lit.block {
+  background-color: color-mix(in srgb, var(--accent) 45%, #C9D0DB);
+  opacity: 0.55;
+}
+
+.frame {
+  position: absolute;
+  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;
+}
+
+.frame.lit {
+  opacity: 1;
+  transition-delay: calc(var(--n) * 140ms + 220ms);
+}
+
+
+/* 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);
+}
+
+.features.active .tile {
+  --lift: 30px;
+  transition-delay: calc(var(--n) * 140ms);
+}
+
+.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;
+}
+
+.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);
+}
+
+/* 16px once the scene's scale is applied */
+.tile .icon {
+  font-size: 1.375rem;
+}
+
+/* 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);
+  transform: scaleX(0);
+  transition: transform 0.35s ease;
+}
+
+.tile.left .leader {
+  left: 34px;
+  transform-origin: left;
+}
+
+.tile.right .leader {
+  right: 34px;
+  transform-origin: right;
+}
+
+.leader::after {
+  content: "";
+  position: absolute;
+  top: -1.5px;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--lit);
+}
+
+.tile.left .leader::after {
+  right: -2px;
+}
+
+.tile.right .leader::after {
+  left: -2px;
+}
+
+.features.active .leader {
+  transform: scaleX(1);
+  transition-delay: calc(var(--n) * 140ms + 140ms);
+}
+
+
+/* Hover */
+@media (prefers-reduced-motion: no-preference) {
+  .features.active {
+    --tilt-x: 4deg;
+    --tilt-y: -12deg;
+    --tilt-z: 1deg;
+    --rise: -4px;
+  }
+
+  /* `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;
+  }
+}
+
+@keyframes tile-float {
+  0%, 100% {
+    translate: 0 0;
+  }
+
+  50% {
+    translate: 0 -2.5px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .features.active .tile {
+    --lift: 6px;
+  }
+
+  .tile,
+  .tile-face,
+  .leader,
+  .shape,
+  .frame {
+    transition: none;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue b/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue
new file mode 100644
index 00000000..4921dbd2
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageCtaTutorialVisual.vue
@@ -0,0 +1,210 @@
+<script setup lang="ts">
+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. */
+
+const props = defineProps<{ active: boolean; visible: boolean }>();
+const playing = 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[];
+}
+
+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" }
+    ]
+  }
+];
+
+function box(item: Box) {
+  return { left: `${item.x}px`, top: `${item.y}px`, width: `${item.w}px`, height: `${item.h}px` };
+}
+
+/* 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)";
+
+const timeline = new Timeline();
+let busy = false;
+
+async function pass() {
+  busy = true;
+
+  const targets = [...root.value!.querySelectorAll(".section")];
+
+  const fades = targets.map(section => timeline.animate(section, [{ opacity: 1 }, { opacity: 0 }], { duration: FADE, easing: "ease-out", fill: "both" }));
+
+  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;
+
+  landings.forEach(landing => landing.cancel()); /* their end state is the page's own */
+  busy = false;
+
+  if (props.active)
+    rest();
+}
+
+async function rest() {
+  const wait = timeline.wait(root.value!, REST);
+
+  if (await Timeline.settled([wait]) && props.active && !busy)
+    pass();
+}
+
+watch(playing, isPlaying => {
+  if (isPlaying && !busy && !reducedMotion())
+    pass();
+});
+
+onBeforeUnmount(() => timeline.cancel());
+</script>
+
+<template>
+  <div ref="root" class="scene tutorial" :class="{ active: playing }">
+    <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped src="./ctaVisual.css"></style>
+
+<style scoped>
+
+/* the pose; the rest is shared, see ctaVisual.css */
+.tutorial {
+  --tilt-y: 26deg;
+  --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;
+}
+
+/* Hover */
+@media (prefers-reduced-motion: no-preference) {
+  .tutorial.active {
+    --tilt-x: 4deg;
+    --tilt-y: 14deg;
+    --tilt-z: -1deg;
+    --rise: -4px;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageFeatures.vue b/docs/.vitepress/theme/homepage/HomePageFeatures.vue
deleted file mode 100644
index bdc5fe78..00000000
--- a/docs/.vitepress/theme/homepage/HomePageFeatures.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script setup>
-
-const features = [
-    "fa-palette",
-    "fa-text",
-    "fa-image",
-    "fa-bezier-curve",
-    "fa-table",
-    "fa-list",
-    "fa-layer-group",
-    "fa-newspaper",
-    "fa-objects-align-center-horizontal",
-    "fa-crop",
-    "fa-page-break",
-    "fa-object-group",
-    "fa-bookmark",
-    "fa-link",
-    "fa-scissors",
-    "fa-lock",
-    "fa-paperclip"
-]
-
-</script>
-
-<template>
-  <section class="content">
-    <div class="section-header">
-      <h2>Everything you need to generate PDFs</h2>
-      <p class="sub-header">From layout and styling to production features, QuestPDF gives you the flexibility to create documents of any complexity.</p>
-    </div>
-
-    <div class="features">
-      <i v-for="feature of features" :key="feature" class="feature icon fa-regular" :class="[feature]" />
-    </div>
-
-    <a class="action" href="/features-overview.html" target="_blank">
-      Explore all features
-    </a>
-  </section>
-</template>
-
-<style scoped>
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.features {
-  place-self: center;
-  max-width: 800px;
-  margin-top: 32px;
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 24px;
-}
-
-@media screen and (max-width: 450px) {
-  .features {
-    gap: 16px;
-  }
-}
-
-.feature {
-  width: 64px;
-  height: 64px;
-  place-content: center;
-  text-align: center;
-
-  font-size: 1.5rem;
-
-  color: #666;
-  background-color: #0000000A;
-  border-radius: 12px;
-}
-
-html.dark .feature {
-  color: #999;
-  background-color: #FFFFFF0A;
-}
-
-a.action {
-  margin-top: 64px;
-}
-
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/HomePageGettingStarted.vue b/docs/.vitepress/theme/homepage/HomePageGettingStarted.vue
deleted file mode 100644
index 7aa30eba..00000000
--- a/docs/.vitepress/theme/homepage/HomePageGettingStarted.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-  <div class="background-gradient" />
-
-  <section class="content">
-    <div class="description">
-      <div class="section-tag">Example project</div>
-
-      <h2>See a real-world example</h2>
-
-      <p class="sub-header">Follow our detailed tutorial and see how easy it is to generate a fully functional invoice with fewer than 250 lines of C# code.</p>
-
-      <div class="unordered-list">
-        <div v-for="feature in features" class="unordered-list-item">
-          <i class="fa-duotone fa-square-check"></i>
-          <p>{{ feature }}</p>
-        </div>
-      </div>
-
-      <a class="action primary" href="/invoice-tutorial.html">
-        Start Tutorial
-        <i class="fa-solid fa-arrow-right arrow-icon"></i>
-      </a>
-    </div>
-
-    <div class="invoice-stack">
-      <div class="invoice-card invoice-back">
-        <img src="/homepage/getting-started/invoice2.webp" alt="Sample invoice page 2" />
-      </div>
-      <div class="invoice-card invoice-front">
-        <img src="/homepage/getting-started/invoice1.webp" alt="Sample invoice page 1" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup>
-
-const features = [
-  "Step-by-step guidance",
-  "Production-ready code",
-  "Best practices included",
-];
-
-</script>
-
-<style scoped>
-  .content {
-    position: relative;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: 64px;
-    align-items: center;
-    overflow: visible;
-  }
-
-  @media screen and (max-width: 750px) {
-    .content {
-      grid-template-columns: 1fr;
-      grid-gap: 48px;
-    }
-  }
-
-  /* Features list */
-
-  .unordered-list {
-    margin: 0 0 32px 0;
-  }
-
-
-
-  /* Action button */
-
-  .action.primary {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .arrow-icon {
-    font-size: 16px;
-    transition: transform 0.2s ease;
-    color: white;
-  }
-
-  .action.primary:hover .arrow-icon {
-    transform: translateX(4px);
-  }
-
-
-  /* Invoice stack */
-
-  .invoice-stack {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 420px;
-    perspective: 1000px;
-  }
-
-  @media screen and (max-width: 900px) {
-    .invoice-stack {
-      min-height: 350px;
-    }
-  }
-
-  .invoice-card {
-    position: absolute;
-    background: white;
-    border-radius: 8px;
-
-    box-shadow:
-      0 4px 6px -1px rgba(0, 0, 0, 0.1),
-      0 10px 15px -3px rgba(0, 0, 0, 0.1),
-      0 20px 25px -5px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
-  }
-
-  html:not(.dark) .invoice-card {
-    border: 1px solid #0004;
-  }
-
-  .invoice-card img {
-    display: block;
-    width: 225px;
-    height: auto;
-  }
-
-  @media screen and (max-width: 1200px) {
-    .invoice-card img {
-      width: 200px;
-    }
-  }
-
-  @media screen and (max-width: 800px) {
-    .invoice-card img {
-      width: 175px;
-    }
-  }
-
-  @media screen and (max-width: 500px) {
-    .invoice-card img {
-      width: 150px;
-    }
-  }
-
-  .invoice-back {
-    transform: translateX(40px) translateY(-20px) rotate(6deg);
-    z-index: 1;
-  }
-
-  .invoice-front {
-    transform: translateX(-40px) translateY(20px) rotate(-3deg);
-    z-index: 2;
-  }
-
-
-  /* Hover effects */
-
-  .content:hover {
-    .invoice-card {
-      box-shadow:
-          0 8px 12px -2px rgba(0, 0, 0, 0.12),
-          0 16px 24px -4px rgba(0, 0, 0, 0.12),
-          0 24px 32px -8px rgba(0, 0, 0, 0.12);
-    }
-
-    .invoice-back {
-      transform: translateX(60px) translateY(-30px) rotate(8deg);
-    }
-
-    .invoice-front {
-      transform: translateX(-60px) translateY(30px) rotate(-5deg);
-    }
-  }
-
-
-  /* Dark mode */
-
-  html.dark {
-    .invoice-card {
-      background: #1e1e1e;
-      box-shadow:
-          0 4px 6px -1px rgba(0, 0, 0, 0.3),
-          0 10px 15px -3px rgba(0, 0, 0, 0.3),
-          0 20px 25px -5px rgba(0, 0, 0, 0.3);
-    }
-
-    .invoice-card img {
-      opacity: 0.9;
-    }
-
-    .invoice-stack:hover .invoice-card {
-      box-shadow:
-          0 8px 12px -2px rgba(0, 0, 0, 0.4),
-          0 16px 24px -4px rgba(0, 0, 0, 0.4),
-          0 24px 32px -8px rgba(0, 0, 0, 0.4);
-    }
-  }
-
-
-  /* Background */
-
-  .background-gradient {
-    border-top: 4px solid var(--vp-c-bg);
-
-    position: absolute;
-    pointer-events: none;
-    inset: 0;
-    background-image:
-        radial-gradient(ellipse 75% 500px at 75% 0%, color-mix(in srgb, #2196F3 15%, transparent), transparent),
-        radial-gradient(ellipse 600px 100px at 50% 0%, color-mix(in srgb, #00BCD4 5%, transparent), transparent);
-  }
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/HomePageHero.vue b/docs/.vitepress/theme/homepage/HomePageHero.vue
index dfe89b46..2cc16b4b 100644
--- a/docs/.vitepress/theme/homepage/HomePageHero.vue
+++ b/docs/.vitepress/theme/homepage/HomePageHero.vue
@@ -1,30 +1,47 @@
 <script setup lang="ts">
-import helloWorldExample from './codeExamples/helloWorld.cs?raw';
-import HomePageCodeContainer from "./HomePageCodeContainer.vue";
+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="background-gradient" />
-  <div class="background-gradient-noise" />
-
-  <section class="content">
-    <div style="z-index: 10; display: flex; flex-direction: column; gap: 16px;">
+  <div class="hero">
+    <section class="content">
       <h1>
-        <span class="highlight-foreground">Code-first</span> PDF generation for C#
+        <span class="highlight-foreground">Code-first</span> PDF library for C#
       </h1>
 
-      <div class="tagline">
-        QuestPDF is a production-ready library that lets you design documents the way you design software with clean, maintainable C# code.
-      </div>
-
-      <div class="cta-buttons">
-        <a class="action primary" href="/quick-start.html">Quick Start</a>
-        <a class="action" href="/features-overview.html">Features Overview</a>
+      <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>
-    </div>
-
-    <home-page-code-container file-name="HelloWorld.cs" :code="helloWorldExample" />
-  </section>
+    </section>
+  </div>
 </template>
 
 
@@ -33,175 +50,164 @@ import HomePageCodeContainer from "./HomePageCodeContainer.vue";
 /* Layout */
 
 .content {
-  position: relative;
-
-  display: grid;
-  grid-template-columns: 1fr 400px;
-  grid-template-rows: auto;
-  grid-gap: 64px;
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  padding-block: 64px;
+}
 
-  margin-top: -64px;
-  padding-top: 128px;
+.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: 1023px) {
-  .content {
-    grid-template-columns: 1fr auto;
+@media screen and (max-width: 820px) {
+  .content h1 {
+    font-size: 2.75rem;
   }
 }
 
-@media screen and (max-width: 600px) {
-  .content {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto auto;
-  }
+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;
+
+  background-image: linear-gradient(100deg, #00c6ff 0%, #0094f9 55%, #2979ff 100%);
+  background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
 }
 
-@media screen and (max-width: 400px) {
-  h1 br {
-    display: none;
-  }
+html.dark h1 .highlight-foreground {
+  background-image: linear-gradient(100deg, #4ED4FF 0%, #2FAEFA 50%, #5C8DFF 100%);
 }
 
 
-/* Content styles */
+/* Lists */
 
-h1 {
-  font-size: 3.5rem !important;
-  line-height: 4rem !important;
-  font-weight: 700 !important;
-  max-width: 500px;
-  word-spacing: 4px;
+.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;
 }
 
-h1 .highlight-foreground {
-  color: #298dff;
-  font-weight: 750;
+.benefits,
+.statistics {
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
 }
 
-html.dark .highlight-foreground {
-  color: #32c6ff;
+.benefits li {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.25rem;
+  color: var(--vp-c-text-1);
 }
 
-.tagline {
-  max-width: 600px;
-  font-size: 1.5rem !important;
-  line-height: 2.25rem !important;
-  font-weight: 400;
-  word-spacing: 2px;
-  color: #000B;
+/* 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;
 }
 
-html.dark .tagline {
-  color: #FFFB;
+.benefits li,
+.statistic {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  text-wrap: pretty;
 }
 
-@media screen and (max-width: 1024px) {
-  h1 {
-    font-size: 3rem !important;
-    line-height: 3.5rem !important;
-    max-width: 100%;
-  }
-
-  .tagline {
-    font-size: 1.25rem !important;
-    line-height: 1.5rem !important;
-  }
+.statistic {
+  display: block;
 }
 
-@media screen and (max-width: 821px) {
-  h1 {
-    font-size: 2.5rem !important;
-    line-height: 3rem !important;
-  }
-
-  .tagline {
-    font-size: 1.25rem !important;
-    line-height: 1.5rem !important;
-  }
+.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(#FFFFFF, color-mix(in srgb, var(--vp-c-brand-1) 12%, transparent));
+  box-shadow: inset 0 0 0 1.5px light-dark(rgba(0, 98, 196, 0.32), transparent);
 }
 
-
-/* Call To Action Button */
-
-.cta-buttons {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 24px;
-  margin-top: 32px;
-  z-index: 10000;
-  text-transform: uppercase;
-
-  .action {
-    word-spacing: 2px;
-    letter-spacing: 0.5px;
-  }
+.list-icon .icon {
+  font-size: 1.25rem;
+  color: light-dark(#0062C4, var(--vp-c-brand-1));
 }
 
-@media screen and (min-width: 1024px) {
-  .cta-buttons a.action {
-    padding: 16px 24px;
-  }
+/* 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));
 }
 
-html.dark .action:not(.primary) {
-  background-color: #FFF2;
-
-  &:hover {
-    background-color: #FFF3;
-  }
+.statistic .label {
+  font-weight: 400;
+  color: var(--vp-c-text-2);
 }
 
-html:not(.dark) .action:not(.primary) {
-  background-color: #00000014;
+html:not(.dark) .statistic .label {
+  font-weight: 450;
   color: var(--vp-c-text-1);
-  box-shadow: none;
+}
 
-  &:hover {
-    background-color: #00000022;
+@media screen and (max-width: 1023px) {
+  .lists {
+    grid-template-columns: 1fr;
+    gap: 48px;
   }
-}
 
-.action {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  .hero-pattern,
+  .statistics {
+    grid-area: 2 / 1;
+  }
 
-  &:hover {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  .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 */
 
-/* Background */
-
-.background-gradient {
-  position: absolute;
-  inset: 0;
+.hero-pattern {
+  z-index: -1;
+  align-self: stretch;
+  margin-block: -64px;
   pointer-events: none;
 
-  background-image:
-      radial-gradient(ellipse 100% 75% at 50% 0%, color-mix(in srgb, #2196F3 15%, transparent), transparent),
-      radial-gradient(ellipse 1500px 600px at 100% 0%, color-mix(in srgb, #81D4FA 50%, transparent), transparent),
-      radial-gradient(ellipse 1000px 200px at 20% 0%, color-mix(in srgb, #64B5F6 10%, transparent), transparent),
-      radial-gradient(ellipse 800px 100px at 60% 100%, color-mix(in srgb, #FF9800 10%, transparent), transparent);
-}
+  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;
 
-.background-gradient-noise {
-  position: absolute;
-  inset: 0;
-  background-image: url("/homepage/noise.svg");
-  opacity: 0.25;
-  pointer-events: none;
-  mix-blend-mode: overlay;
+  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 .background-gradient {
-  background-image:
-      radial-gradient(ellipse 75% 75% at 50% 100%, color-mix(in srgb, #2196F3 20%, transparent), transparent),
-      radial-gradient(ellipse 1500px 300px at 50% 100%, color-mix(in srgb, #00BCD4 5%, transparent), transparent),
-      radial-gradient(ellipse 1000px 200px at 40% 100%, color-mix(in srgb, #FFEB3B 10%, transparent), transparent),
-      radial-gradient(ellipse 500px 100px at 65% 100%, color-mix(in srgb, #FF9800 15%, transparent), transparent);
+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);
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageHighlightedCode.vue b/docs/.vitepress/theme/homepage/HomePageHighlightedCode.vue
deleted file mode 100644
index c270bb35..00000000
--- a/docs/.vitepress/theme/homepage/HomePageHighlightedCode.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-
-import {computed} from "vue";
-import {ShikiTransformer} from "@shikijs/types";
-import createCodeHighlighter from "./createCodeHighlighter";
-
-const props = defineProps<{
-  code: string,
-  codeTransformer?: ShikiTransformer
-}>();
-
-const codeHighlighter = await createCodeHighlighter();
-
-const highlightedCode = computed(() =>
-    codeHighlighter.codeToHtml(props.code, {
-      lang: 'csharp',
-      themes: { light: 'light-plus', dark: 'dark-plus' },
-      transformers: props.codeTransformer ? [ props.codeTransformer ] : undefined
-    })
-);
-</script>
-
-<template>
-  <div class="code-source" v-html="highlightedCode" />
-</template>
-
-<style>
-.code-source {
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 8px 0;
-  tab-size: 4;
-  overflow: hidden;
-  box-sizing: content-box;
-}
-
-.code-source pre {
-  overflow: hidden;
-  background-color: transparent !important;
-}
-
-@media screen and (max-width: 1000px) {
-  .code-source pre {
-    tab-size: 2;
-  }
-}
-
-@media screen and (max-width: 700px) {
-  .code-source {
-    font-size: 12px;
-    line-height: 1.25;
-  }
-}
-
-.code-source .line {
-  display: inline-block;
-  padding: 0 16px;
-  min-width: 100%
-}
-
-.code-source .line-highlighted {
-  background-color: #2196F322;
-  border-left: 3px solid #2196F3AA;
-  padding-left: calc(1rem - 3px);
-}
-
-.code-source .line-removed {
-  background-color: #F4433622;
-  border-left: 3px solid #F44336AA;
-  padding-left: calc(1rem - 3px);
-}
-
-.code-source .line-added {
-  background-color: #4CAF5022;
-  border-left: 3px solid #4CAF50AA;
-  padding-left: calc(1rem - 3px);
-}
-
-.shiki {
-  overflow-x: auto !important;
-}
-
-html.dark .code-source .shiki,
-html.dark .code-source .shiki span {
-  color: var(--shiki-dark) !important;
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageLicense.vue b/docs/.vitepress/theme/homepage/HomePageLicense.vue
index 47539590..ec34e2a1 100644
--- a/docs/.vitepress/theme/homepage/HomePageLicense.vue
+++ b/docs/.vitepress/theme/homepage/HomePageLicense.vue
@@ -1,129 +1,281 @@
-w<script setup>
-const SummaryContent = [
-  "Actively maintained with regular feature, quality, and security updates",
-  "Full source code available on GitHub",
-  "All features included in every tier without restrictions",
-  "Predictable pricing: no per-seat, per-server, or usage fees"
+<script setup lang="ts">
+import { faArrowRight, faBoxOpen, faInfinity, faLayerGroup, faLockOpen, faRotateLeft, faTag, faUsers } 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 tiers = [
+  {
+    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."
+  },
+  {
+    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."
+  }
+]
+
+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="background-gradient" />
+  <div class="panel license-panel">
+    <div class="includes">
+      <h2 class="card-title">Fair and Sustainable License</h2>
 
-  <section class="content">
+      <ul class="includes-list">
+        <li v-for="item of includes" :key="item.text">
+          <Icon :icon="item.icon" />
+          <span>{{ item.text }}</span>
+        </li>
+      </ul>
 
-    <i class="fa-duotone fa-file-certificate license-icon"></i>
-
-    <div class="section-header">
-      <h2>Fair and Sustainable License</h2>
-      <p class="sub-header">A model that benefits everyone. Commercial licensing provides businesses with legal safety and long-term stability, while funding a feature-complete, unrestricted library for the open-source community.</p>
-    </div>
-
-    <div class="unordered-list">
-      <article v-for="summary of SummaryContent" class="unordered-list-item">
-        <i class="fa-duotone fa-square-check license-check-icon"></i>
-        <p>{{ summary }}</p>
-      </article>
+      <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="license-description">
-      Free for individuals, non-profits, all FOSS projects, and organizations under $1M in annual revenue.
-    </div>
+    <div class="divider" aria-hidden="true"></div>
 
-    <div style="display: flex; flex-direction: row; gap: 16px; justify-content: center">
-      <a class="action pricing-button" href="/pricing.html">View Pricing</a>
-      <a class="action" href="/license.html">License terms</a>
+    <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>
-
-  </section>
+  </div>
 </template>
 
 <style scoped>
 
-  .content {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
+.license-panel {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 48px;
+}
 
-  .background-gradient {
-    position: absolute;
-    pointer-events: none;
-    inset: 0;
-    background-image:
-        radial-gradient(ellipse 75% 500px at 75% 100%, color-mix(in srgb, #4CAF50 15%, transparent), transparent),
-        radial-gradient(ellipse 600px 100px at 50% 100%, color-mix(in srgb, #00BCD4 5%, transparent), transparent);
-  }
+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);
+}
 
-  .license-icon {
-    font-size: 64px;
-    margin-bottom: 32px;
-    color: #67B84D;
+.divider {
+  align-self: stretch;
+  width: 1px;
+  background-color: var(--vp-c-divider);
+}
+
+@media screen and (max-width: 960px) {
+  .license-panel {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 40px;
   }
 
-  .license-check-icon {
-    font-size: 24px;
-    color: #4CAF50;
+  .divider {
+    width: auto;
+    height: 1px;
   }
+}
 
-  .license-description {
-    border-radius: 12px;
-    padding: 12px 16px;
-    color: #1B5E20;
-    background-color: #67B84D33;
-    margin-top: 32px;
 
-    max-width: 500px;
-    place-self: center;
-  }
+.includes {
+  display: flex;
+  flex-direction: column;
+}
 
-  html.dark .license-description {
-    color: #A5D6A7;
-  }
+.includes-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex-grow: 1;
+  margin: 32px 0 0;
+}
 
-  .action {
-    margin-top: 32px;
-  }
+.includes-list li {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 36px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
 
-  @media screen and (max-width: 400px) {
-    .license-icon {
-      font-size: 48px;
-    }
+.includes-list .icon {
+  flex-shrink: 0;
+  width: 18px;
+  font-size: 1rem;
+  color: light-dark(#38A83E, #6ECF73);
+}
+
+@media screen and (max-width: 700px) {
+  .includes-list li {
+    align-items: flex-start;
+    min-height: 0;
+    padding: 6px 0;
   }
 
-  @media screen and (max-width: 650px) {
-    .sub-header {
-      text-align: justify;
-    }
+  .includes-list .icon {
+    margin-top: 0.25rem;
   }
+}
 
-  /* Features list */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 32px;
+}
 
-  .unordered-list {
-    margin: 32px 0;
-  }
 
+/* Tiers */
 
-  /* License button */
+.tiers {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 40px;
+}
 
-  .action.pricing-button {
-    background-color: #66BB6A;
-    color: var(--vp-button-brand-text);
-    font-weight: bold;
-  }
+.tier {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-radius: 4px;
+}
+
+.tier:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: 6px;
+}
+
+.tier-head {
+  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;
+  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;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
+}
 
-  .action.pricing-button:hover {
-    background-color: #4CAF50;
+.tier-price-text {
+  text-decoration: underline transparent;
+  text-decoration-thickness: 1px;
+  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;
   }
 
-  html.dark .action.pricing-button {
-    background-color: #4CAF50;
+  .tier-arrow {
+    opacity: 1;
+    transform: none;
   }
+}
 
-  html.dark .action.pricing-button:hover {
-    background-color: #66BB6A;
+@media (prefers-reduced-motion: reduce) {
+  .tier:is(:hover, :focus-visible) .tier-arrow {
+    transform: none;
   }
+}
+
+
+/* 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>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageMultiplatform.vue b/docs/.vitepress/theme/homepage/HomePageMultiplatform.vue
deleted file mode 100644
index bf7159c6..00000000
--- a/docs/.vitepress/theme/homepage/HomePageMultiplatform.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup>
-
-const platforms = [
-  { src: 'windows.svg', name: 'Windows' },
-  { src: 'linux.svg', name: 'Linux' },
-  { src: 'apple.svg', name: 'macOS' },
-  { src: 'azure.svg', name: 'Azure' },
-  { src: 'aws.svg', name: 'AWS' },
-  { src: 'docker.svg', name: 'Docker' },
-  { src: 'rider.svg', name: 'Rider' },
-  { src: 'vscode.svg', name: 'VS Code' },
-  { src: 'visual-studio.svg', name: 'Visual Studio' }
-];
-
-</script>
-
-<template>
-  <section class="content">
-    <div class="section-header">
-      <h2>Works everywhere you do</h2>
-      <p class="sub-header">Deploy on any major operating system and integrate seamlessly with your favorite IDEs, cloud platforms, and development tools.</p>
-    </div>
-
-    <div class="platforms">
-      <div v-for="platform of platforms" class="platform-item">
-        <img :src="'/homepage/supported-platforms/' + platform.src" :alt="platform.name" :title="platform.name" />
-        <span class="platform-name">{{ platform.name }}</span>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.platforms {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 24px;
-  width: 100%;
-  max-width: 800px;
-  align-self: center;
-  justify-content: center;
-}
-
-@media screen and (max-width: 600px) {
-  .platforms {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-  }
-}
-
-.platform-item {
-  width: 120px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-
-  background-color: #0000000A;
-  border-radius: 12px;
-
-  padding: 24px 16px;
-}
-
-html.dark .platform-item {
-  background-color: #FFFFFF0A;
-}
-
-.platform-item img {
-  width: 40px;
-  height: 40px;
-}
-
-.platform-name {
-  font-size: 0.875rem;
-  line-height: 1rem;
-  text-align: center;
-}
-
-@media screen and (max-width: 600px) {
-  .platform-item {
-    width: 100px;
-  }
-
-  .platform-item img {
-    width: 36px;
-    height: 36px;
-  }
-}
-
-@media screen and (max-width: 380px) {
-  .platforms {
-    gap: 12px;
-  }
-
-  .platform-item {
-    width: 100px;
-    padding: 16px 8px;
-  }
-
-  .platform-item img {
-    width: 36px;
-    height: 36px;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/HomePageOverview.vue b/docs/.vitepress/theme/homepage/HomePageOverview.vue
deleted file mode 100644
index 1905022b..00000000
--- a/docs/.vitepress/theme/homepage/HomePageOverview.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <section class="content">
-    <div class="section-header">
-      <h2>Enterprise-grade foundations</h2>
-      <p class="sub-header">A robust layout engine engineered for high performance, complete data privacy, and seamless integration into your infrastructure.</p>
-    </div>
-
-    <div class="features">
-
-      <article class="card" v-for="feature of features" :key="feature.title">
-        <i class="icon fa-2xl" :class="[feature.icon]"></i>
-        <h3 class="title">{{ feature.title }}</h3>
-        <p class="description">{{ feature.description }}</p>
-      </article>
-
-    </div>
-  </section>
-</template>
-
-<script setup>
-
-const features = [
-    {
-        icon: "fa-duotone fa-code",
-        title: "Source-available",
-        description: "Entire QuestPDF source code is available for review and customization, ensuring transparency and compliance with your organization's requirements."
-    },
-    {
-        icon: "fa-duotone fa-shield-check",
-        title: "Complete Data Privacy",
-        description: "QuestPDF runs entirely within your infrastructure with no external API calls, internet requirement, or background data collection. As a company, we do not access, collect, store, or process your private data.",
-    },
-    {
-        icon: "fa-duotone fa-gear-complex",
-        title: "Comprehensive Layout Engine",
-        description: "A powerful layout engine built specifically for PDF generation. Gain full control over document structure, precise content positioning, and automatic pagination."
-    },
-    {
-        icon: "fa-duotone fa-language",
-        title: "Advanced Language Support",
-        description: "Create multilingual documents with full RTL language support, advanced text shaping, and bi-directional layout handling."
-    },
-    {
-        icon: "fa-duotone fa-gauge-high",
-        title: "High Performance",
-        description: "Generate thousands of pages per second while maintaining minimal CPU and memory usage. Perfect for high-throughput enterprise applications."
-    },
-    {
-        icon: "fa-duotone fa-file-zipper",
-        title: "Optimized File Size",
-        description: "Drastically reduce file sizes without compromising quality. Benefit from automatic font subsetting, optimal image compression, and efficient file compression."
-    }
-];
-
-</script>
-
-<style scoped>
-
-.features {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-gap: 32px;
-
-  margin-top: 32px;
-}
-
-@media screen and (max-width: 1100px) {
-  .features {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media screen and (max-width: 700px) {
-  .features {
-    grid-template-columns: 1fr;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/HomePageQuickStart.vue b/docs/.vitepress/theme/homepage/HomePageQuickStart.vue
new file mode 100644
index 00000000..5025ef63
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageQuickStart.vue
@@ -0,0 +1,905 @@
+<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 { faSparkles } from "@fortawesome/pro-solid-svg-icons";
+import Icon from "../Icon.vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
+import {type Line, useAgentSession} from "./agentSession";
+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);
+
+/* 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 */
+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 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 */
+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;
+
+const camera = computed(() => {
+  const { x, y, width, height } = view.value;
+  const rest = Math.min(width / overview.width, height / overview.height);
+
+  if (!zoom.value)
+    return { scale: rest, x: x + (width - page.width * rest) / 2, y };
+
+  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);
+
+  if (scale > maxScale && page.width * maxScale <= across)
+    scale = maxScale;
+
+  return {
+    scale,
+    x: page.width * scale > across ? clamp(across / 2 - (left + w / 2) * scale, across - page.width * scale, 0) : (across - page.width * scale) / 2,
+    y: clamp(-top * scale, down - page.height * scale, y)
+  };
+});
+
+/* The camera flies along the smooth zoom and pan path of van Wijk and Nuij (as d3's interpolateZoom); when the
+   column is resized, or the session starts over, it moves at once. */
+type Camera = { scale: number; x: number; y: number };
+
+const shot = ref<Camera>(camera.value);
+let shotZoom = zoom.value;
+let flight = 0;
+
+watch(camera, target => {
+  cancelAnimationFrame(flight);
+  const moved = zoom.value !== shotZoom;
+  shotZoom = zoom.value;
+
+  if (moved && !resetting.value && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)
+    fly(shot.value, target);
+  else
+    shot.value = target;
+});
+
+function fly(from: Camera, to: Camera) {
+  /* a camera as the part of the page at the column's centre and how wide a part of the page the column shows */
+  const across = view.value.width + 2 * view.value.x;
+  const down = view.value.height + 2 * view.value.y;
+  const toView = ({ scale, x, y }: Camera) => [(across / 2 - x) / scale, (down / 2 - y) / scale, across / scale];
+  const path = zoomPath(toView(from), toView(to));
+  const duration = clamp(900 + 400 * path.length, 1000, 1300);
+  const start = performance.now();
+
+  const frame = (now: number) => {
+    const t = Math.min((now - start) / duration, 1);
+    const [cx, cy, width] = path.at(t < 0.5 ? 4 * t ** 3 : 1 - (2 - 2 * t) ** 3 / 2);
+    const scale = across / width;
+    shot.value = t < 1 ? { scale, x: across / 2 - cx * scale, y: down / 2 - cy * scale } : to;
+
+    if (t < 1)
+      flight = requestAnimationFrame(frame);
+  };
+
+  flight = requestAnimationFrame(frame);
+}
+
+/* van Wijk and Nuij, "Smooth and efficient zooming and panning" (2003), with rho = √2; `length` in the paper's units */
+function zoomPath([x0, y0, w0]: number[], [x1, y1, w1]: number[]) {
+  const rho = Math.SQRT2;
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  const d = Math.hypot(dx, dy);
+
+  if (d < 1e-6) {
+    const length = Math.abs(Math.log(w1 / w0)) / rho;
+    return { length, at: (t: number) => [x0 + t * dx, y0 + t * dy, w0 * (w1 / w0) ** t] };
+  }
+
+  const b = (w: number, sign: number) => (w1 * w1 - w0 * w0 + sign * rho ** 4 * d * d) / (2 * w * rho * rho * d);
+  const r0 = Math.asinh(-b(w0, 1));
+  const r1 = Math.asinh(-b(w1, -1));
+  const length = (r1 - r0) / rho;
+
+  return {
+    length,
+    at: (t: number) => {
+      const r = rho * t * length + r0;
+      const u = w0 / (rho * rho * d) * (Math.cosh(r0) * Math.tanh(r) - Math.sinh(r0));
+      return [x0 + u * dx, y0 + u * dy, w0 * Math.cosh(r0) / Math.cosh(r)];
+    }
+  };
+}
+
+const pageStyle = computed(() => ({
+  width: `${page.width}px`,
+  height: `${page.height}px`,
+  transform: `translate(${shot.value.x}px, ${shot.value.y}px) scale(${shot.value.scale})`,
+  "--scale": shot.value.scale
+}));
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max);
+}
+
+let resizeObserver: ResizeObserver | undefined;
+
+onMounted(() => {
+  resizeObserver = new ResizeObserver(([{ contentRect: { x, y, width, height } }]) => view.value = { x, y, width, height });
+  resizeObserver.observe(result.value!);
+});
+
+onUnmounted(() => {
+  cancelAnimationFrame(flight);
+  resizeObserver?.disconnect();
+});
+
+/* the window's markup, as Shiki writes it, from the tokens highlighted at build time (quickStart.data.ts) */
+const codeHtml = computed(() => {
+  const numbers = lineNumbers();
+  return lines.value.map(({ line, folded }) => lineHtml(line, folded, numbers.get(line))).join("");
+});
+
+/* a line's number in the file as it will be once the diff is taken in, as an IDE numbers it with methods folded
+   (the numbers skip a folded body): a removed line has none */
+function lineNumbers() {
+  const numbers = new Map<Line, number>();
+  let number = 0;
+
+  for (const line of files.value.find(file => file.name === active.value)?.lines ?? [])
+    if (line.kind !== "removed")
+      numbers.set(line, ++number);
+
+  return numbers;
+}
+
+function lineHtml(line: Line, folded: boolean, number?: number) {
+  const { text, kind, state, typed = text.length } = line;
+  let left = typed;
+  let html = "";
+
+  for (const { content, style } of session.tokens[session.langs[active.value]][text]) {
+    if (left <= 0)
+      break;
+
+    html += `<span style="${style}">${content.slice(0, left).replace(/&/g, "&amp;").replace(/</g, "&lt;")}</span>`;
+    left -= content.length;
+  }
+
+  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>`;
+}
+</script>
+
+<template>
+  <div class="panel quick-start">
+    <div ref="windowElement" class="window" :class="{ paused }">
+      <div class="window-header">
+        <span class="dot red" />
+        <span class="dot yellow" />
+        <span class="dot green" />
+
+        <span class="window-title">{{ active }}</span>
+      </div>
+
+      <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>
+
+          <div class="composer" :class="{ asking, sent, working }">
+            <Icon class="composer-icon" :icon="faSparkles" />
+
+            <!-- every request, hidden, under the typed one: the box is as tall as the longest from the start, so a
+                 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>{{ promptText }}<span v-if="!sent" class="caret" :class="{ steady: typing }"></span></span>
+            </div>
+
+            <span class="composer-step" aria-hidden="true">{{ promptIndex + 1 }} / {{ session.rounds.length }}</span>
+
+            <!-- decoration only, as the session plays by itself -->
+            <span class="composer-send" aria-hidden="true">
+              <svg v-if="countdown" :key="countdown.key" class="countdown" viewBox="0 0 40 40" :style="{ '--countdown': `${countdown.ms}ms` }">
+                <circle cx="20" cy="20" r="18.5" pathLength="100" />
+              </svg>
+
+              <i v-if="working" class="spinner"></i>
+              <Icon v-else-if="finished" :icon="faCheck" />
+              <Icon v-else :icon="faArrowUp" />
+            </span>
+          </div>
+        </div>
+
+        <div class="viewer">
+          <div class="window-header">
+            <span class="buttons">
+              <span class="dot red" />
+              <span class="dot yellow" />
+              <span class="dot green" />
+            </span>
+
+            <span class="window-title">{{ session.title }}</span>
+          </div>
+
+          <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" />
+            </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>
+
+<style scoped>
+
+.quick-start {
+  --agent-accent: #7E57C2;
+
+  --composer-fill: linear-gradient(110deg, #8466B7 0%, #6D49AB 100%);
+  --composer-border: transparent;
+  --composer-text: #FFFFFF;
+  --composer-icon: rgba(255, 255, 255, 0.9);
+  --composer-step: rgba(255, 255, 255, 0.85);
+  --composer-ink: #FFFFFF;
+  --composer-button-ink: #6D49AB;
+  --composer-sheen: rgba(255, 255, 255, 0.14);
+  --composer-ring: color-mix(in srgb, var(--agent-accent) 12%, transparent);
+  --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 */
+}
+
+html.dark .quick-start {
+  --agent-accent: #9575CD;
+  --composer-fill: linear-gradient(110deg, #6B509B 0%, #583E84 100%);
+  --composer-button-ink: #583E84;
+  --composer-ring: color-mix(in srgb, var(--agent-accent) 20%, transparent);
+  --composer-ring-strong: color-mix(in srgb, var(--agent-accent) 45%, transparent);
+  --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 */
+.window {
+  grid-area: window;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 36rem;
+  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);
+}
+
+.window-header {
+  display: flex;
+  align-items: center;
+  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));
+}
+
+.window-body {
+  display: contents;
+}
+
+.code-source,
+.result {
+  transition: opacity 0.45s ease;
+}
+
+.window-body.resetting :is(.code-source, .composer, .result) {
+  opacity: 0;
+}
+
+.window.paused .composer,
+.window.paused .composer *,
+.window.paused .composer::before {
+  animation-play-state: paused;
+}
+
+/* the composer sticks within this column, so this padding keeps it clear of the title bar */
+.window-main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding-top: 12px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 6px;
+  background-color: #8883;
+  transition: background-color 100ms ease-in-out;
+}
+
+.dot.red {
+  --lit: #F44336CC;
+}
+
+.dot.yellow {
+  --lit: #FFC107CC;
+}
+
+.dot.green {
+  --lit: #4CAF50CC;
+}
+
+.window:has(> .window-header:hover, .window-main:hover) > .window-header .dot,
+.viewer:hover .dot {
+  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 */
+.code-source {
+  flex-grow: 1;
+  padding-bottom: 12px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.code-source pre {
+  height: calc(var(--code-lines) * 1lh);
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.code-source :deep(code) {
+  display: block;
+  translate: 0 calc(var(--scroll) * -1lh);
+  transition: translate 0.6s ease;
+}
+
+/* lines are blocks, so the room for new lines can open in one move before they type in */
+.code-source :deep(.line) {
+  display: block;
+  width: max-content;
+  min-width: 100%;
+  min-height: 1lh;
+  padding: 0 4px 0 24px;
+}
+
+/* a blank slot holds a space, so every line keeps one baseline */
+.code-source :deep(.gutter) {
+  display: inline-block;
+  width: calc(var(--gutter-digits) * 1ch);
+  margin-right: 12px;
+  text-align: right;
+  color: var(--vp-c-text-3);
+  opacity: 0.7;
+  user-select: none;
+}
+
+.code-source :deep(.line-opening) {
+  overflow: hidden;
+  animation: line-open 0.3s ease both;
+}
+
+.code-source :deep(.line-closing) {
+  overflow: hidden;
+  animation: line-close 0.3s ease both;
+}
+
+@keyframes line-open {
+  from { height: 0; min-height: 0; }
+  to { height: 1lh; min-height: 0; }
+}
+
+@keyframes line-close {
+  from { height: 1lh; min-height: 0; }
+  to { height: 0; min-height: 0; }
+}
+
+.code-source :deep(.line-removed) {
+  background-color: #F4433622;
+  box-shadow: inset 3px 0 0 #F44336AA;
+}
+
+.code-source :deep(.line-added) {
+  background-color: #4CAF5022;
+  box-shadow: inset 3px 0 0 #4CAF50AA;
+}
+
+.code-source :deep(.fold) {
+  margin-left: 6px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background-color: var(--surface-inner);
+  color: var(--vp-c-text-3);
+}
+
+
+/* Result */
+
+/* the desk is the viewer's, not the result's, so it stays while the session fades out and starts over */
+.viewer {
+  grid-area: viewer;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-left: 1px solid var(--vp-c-divider);
+  background-color: light-dark(#E3E7EE, var(--surface-inner));
+}
+
+.buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.window-title {
+  margin-left: 12px;
+  padding: 4px 10px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--vp-c-text-2);
+}
+
+.result {
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+  padding: 24px;
+}
+
+/* its edge is divided by its scale, so it keeps its width */
+.page {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 595px;
+  height: 842px;
+  overflow: hidden;
+  border-radius: calc(2px / var(--scale));
+  background-color: white;
+  box-shadow:
+      0 0 0 calc(1px / var(--scale)) light-dark(rgba(16, 24, 40, 0.1), rgba(255, 255, 255, 0.1)),
+      0 calc(6px / var(--scale)) calc(18px / var(--scale)) calc(-8px / var(--scale)) light-dark(rgba(16, 24, 40, 0.25), rgba(0, 0, 0, 0.6));
+  transform-origin: 0 0;
+}
+
+.page img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.45s ease;
+}
+
+.page img.shown {
+  opacity: 1;
+}
+
+
+/* Composer */
+
+/* the tint is laid on the page colour, as the composer is see-through in dark mode */
+.composer {
+  position: sticky;
+  bottom: 16px;
+  z-index: 1;
+  isolation: isolate; /* keeps the band (z-index: -1) above the composer's background but below its content */
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 12px 24px 24px;
+  padding: 10px 10px 10px 16px;
+  border: 1px solid var(--composer-border);
+  border-radius: 14px;
+  background-image: var(--composer-fill);
+  box-shadow: var(--composer-shadow);
+  overflow: hidden;
+  transition: box-shadow 0.4s ease, opacity 0.45s ease;
+}
+
+/* each click has its keyframes under its own name: an animation whose name stays on the element from one state to
+   the next carries on instead of playing again */
+.composer.sent {
+  animation: keystroke 0.35s ease, ripple 0.9s ease-out;
+}
+
+.composer.asking {
+  box-shadow: 0 0 0 4px var(--composer-ring), var(--composer-shadow);
+  animation: keystroke-in 0.35s ease, ripple-in 0.9s ease-out;
+}
+
+@keyframes keystroke {
+  35% { transform: translateY(2px) scale(0.99); }
+}
+
+@keyframes keystroke-in {
+  35% { transform: translateY(2px) scale(0.99); }
+}
+
+@keyframes ripple {
+  from { box-shadow: 0 0 0 0 var(--composer-ring-strong), var(--composer-shadow); }
+  40% { box-shadow: 0 0 0 8px var(--composer-ring), var(--composer-shadow); }
+}
+
+@keyframes ripple-in {
+  from { box-shadow: 0 0 0 0 var(--composer-ring-strong), var(--composer-shadow); }
+  40% { box-shadow: 0 0 0 8px var(--composer-ring), var(--composer-shadow); }
+}
+
+.composer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: linear-gradient(100deg,
+      transparent 20%,
+      var(--composer-sheen) 50%,
+      transparent 80%);
+  background-size: 250% 100%;
+  background-position: 120% 0;
+  opacity: 0;
+  transition: opacity 1.2s ease;
+  /* the sweep always runs, invisible at opacity 0, so only the opacity follows the state: stopping it would
+     snap the band back and cut the fade-out short */
+  animation: sweep 3.2s linear infinite;
+}
+
+.composer.working::before {
+  opacity: 1;
+}
+
+@keyframes sweep {
+  from { background-position: 120% 0; }
+  to { background-position: -120% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .composer::before {
+    animation: none;
+    background-position: 50% 0;
+  }
+}
+
+.composer-icon {
+  flex: 0 0 auto;
+  font-size: 1rem;
+  margin-top: 0.5rem;
+  color: var(--composer-icon);
+}
+
+.composer-text {
+  display: grid;
+  flex: 1 1 auto;
+  padding: 5px 0;
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.375rem;
+  color: var(--composer-text);
+}
+
+.composer-text > span {
+  grid-area: 1 / 1;
+}
+
+.composer-sizer {
+  visibility: hidden;
+}
+
+/* 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: "";
+  display: inline-block;
+  width: 3px;
+}
+
+.caret {
+  display: inline-block;
+  width: 2px;
+  height: 1.125rem;
+  margin-left: 1px;
+  vertical-align: -0.1875rem;
+  background-color: var(--composer-ink);
+  animation: blink 1s step-end infinite;
+}
+
+.caret.steady {
+  animation: none;
+}
+
+@keyframes blink {
+  50% { opacity: 0; }
+}
+
+.composer-step {
+  flex: 0 0 auto;
+  align-self: flex-end;
+  font-size: 0.875rem;
+  line-height: 2rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--composer-step);
+}
+
+.composer-send {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  align-self: flex-end;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: color-mix(in srgb, var(--composer-ink) 16%, transparent);
+  color: var(--composer-ink);
+  font-size: 1rem;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.composer.asking .composer-send,
+.composer.sent .composer-send {
+  background-color: var(--composer-ink);
+  color: var(--composer-button-ink);
+}
+
+.composer.sent .composer-send {
+  animation: press 0.35s ease;
+}
+
+@keyframes press {
+  35% { transform: scale(0.84); }
+}
+
+.countdown {
+  position: absolute;
+  inset: -4px;
+  width: 40px;
+  height: 40px;
+  transform: rotate(-90deg);
+  pointer-events: none;
+}
+
+.countdown circle {
+  fill: none;
+  stroke: var(--composer-ink);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: countdown var(--countdown) linear forwards;
+}
+
+@keyframes countdown {
+  to { stroke-dashoffset: 0; }
+}
+
+.spinner {
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid color-mix(in srgb, var(--composer-button-ink) 35%, transparent);
+  border-top-color: var(--composer-button-ink);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner,
+  .composer.asking,
+  .composer.sent,
+  .composer.sent .composer-send {
+    animation: none;
+  }
+
+  .spinner {
+    border-color: var(--composer-button-ink);
+  }
+}
+
+
+/* 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) {
+  .window {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .window-body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .window-main {
+    display: contents;
+  }
+
+  /* the composer sticks within the body here, so the code's top padding is its own */
+  .code-source {
+    padding-top: 12px;
+  }
+
+  .composer {
+    order: 1;
+    margin-top: 24px;
+  }
+
+  .viewer {
+    border-left: none;
+    border-top: 1px solid var(--vp-c-divider);
+    border-bottom: 1px solid var(--vp-c-divider);
+  }
+
+  .result {
+    aspect-ratio: 595 / 400;
+    max-height: 440px;
+  }
+}
+
+@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;
+  }
+
+  .result {
+    padding: 16px;
+  }
+
+  .code-source {
+    line-height: 1.25;
+  }
+
+  .composer {
+    margin: 16px;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageStandardCompliance.vue b/docs/.vitepress/theme/homepage/HomePageStandardCompliance.vue
deleted file mode 100644
index b31b8c5c..00000000
--- a/docs/.vitepress/theme/homepage/HomePageStandardCompliance.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<script setup lang="ts">
-
-interface Standard {
-  label: string;
-  name: string;
-  description: string;
-  badges: string[];
-}
-
-const standards : Standard[] = [
-  {
-    label: "Archival",
-    name: "PDF/A",
-    description: "ISO 19005 standard for long-term document preservation, ensuring your PDFs remain readable and visually identical for decades without external dependencies.",
-    badges: ["PDF/A-2b", "PDF/A-2u", "PDF/A-2a", "PDF/A-3b", "PDF/A-3u", "PDF/A-3a"]
-  },
-  {
-    label: "Accessibility",
-    name: "PDF/UA",
-    description: "ISO 14289 standard for universal accessibility with full support for screen readers and assistive technologies, ensuring your PDFs are usable by people with disabilities.",
-    badges: ["PDF/UA-1"]
-  },
-  {
-    label: "E-Invoicing",
-    name: "EN 16931",
-    description: "European standard for electronic invoicing. Embed structured invoice data (XML) within PDF documents for automated processing.",
-    badges: ["ZUGFeRD", "Factur-X"]
-  }
-];
-
-</script>
-
-<template>
-  <section class="content">
-    <div class="section-tag">Compliance</div>
-
-    <div>
-      <h2>Industry-standard PDF compliance</h2>
-
-      <p class="sub-header">
-        Generate PDF documents that meet the strictest archival and accessibility requirements.
-        Every build is automatically validated using the open-source <a href="https://verapdf.org/" target="_blank" rel="noopener">veraPDF</a> and <a href="https://www.mustangproject.org/" target="_blank" rel="noopener">Mustang</a> tools.
-      </p>
-    </div>
-
-    <div class="standard-cards">
-      <div v-for="standard in standards" class="wide-card card">
-        <div class="card-header">
-          <span class="card-label">{{ standard.label }}</span>
-          <span class="card-standard">{{ standard.name }}</span>
-        </div>
-
-        <p class="card-description">{{ standard.description }}</p>
-
-        <div class="standards-badges">
-          <span v-for="badge in standard.badges">{{ badge }}</span>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  max-width: 800px;
-}
-
-/* Standard Cards */
-
-.standard-cards {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 32px;
-  margin-top: 16px;
-}
-
-.standard-cards > :first-child {
-  grid-column: 1 / span 2;
-}
-
-@media screen and (max-width: 600px) {
-  .standard-cards {
-    grid-template-columns: 1fr;
-  }
-
-  .standard-cards > :first-child {
-    grid-column: 1;
-  }
-}
-
-
-.card-header {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  margin-bottom: 16px;
-}
-
-.card-label {
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: var(--vp-c-text-3);
-}
-
-.card-standard {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--vp-c-text-1);
-}
-
-.card-description {
-  font-size: 1rem;
-  line-height: 1.5;
-  color: var(--vp-c-text-2);
-}
-
-.standards-badges {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 16px;
-}
-
-.standards-badges > span {
-  display: inline-flex;
-  align-items: center;
-  padding: 8px 12px;
-  line-height: 1;
-  border-radius: 8px;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: border-color 0.2s ease, background-color 0.2s ease;
-  border: 1px solid #8884;
-}
-
-</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageTrust.vue b/docs/.vitepress/theme/homepage/HomePageTrust.vue
new file mode 100644
index 00000000..84a7f0a8
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/HomePageTrust.vue
@@ -0,0 +1,311 @@
+<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 Icon from "../Icon.vue";
+
+interface StandardsCategory {
+  title: string;
+  levels: 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"]
+  }
+];
+
+/* 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>
+      <p class="card-description">
+        Every build is automatically validated with the independent, trusted and open-source
+        <a href="https://verapdf.org/" target="_blank">veraPDF</a> and
+        <a href="https://www.mustangproject.org/" target="_blank">Mustang</a> 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>
+  </div>
+</template>
+
+<style scoped>
+
+.trust {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 32px;
+}
+
+@media screen and (max-width: 1180px) {
+  .trust {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+
+.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;
+}
+
+.standards-category:first-child {
+  flex-basis: 100%;
+}
+
+.standards-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.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 .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);
+}
+
+
+/* Cells */
+
+.cells {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-auto-rows: minmax(0, 1fr);
+}
+
+.cell {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 24px 32px;
+}
+
+.cell:nth-child(odd) {
+  padding-left: 0;
+}
+
+.cell:nth-child(even) {
+  padding-right: 0;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.cell:nth-child(-n + 2) {
+  padding-top: 0;
+}
+
+.cell:nth-child(n + 3) {
+  padding-bottom: 0;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+/* :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;
+  }
+
+  .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);
+  }
+}
+
+.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 {
+  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);
+}
+
+/* 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;
+  }
+}
+
+</style>
diff --git a/docs/.vitepress/theme/homepage/HomePageWindowContainer.vue b/docs/.vitepress/theme/homepage/HomePageWindowContainer.vue
deleted file mode 100644
index e0372b69..00000000
--- a/docs/.vitepress/theme/homepage/HomePageWindowContainer.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-
-const props = defineProps<{
-  fileName: String
-}>();
-
-</script>
-
-<template>
-  <div class="file-container">
-    <div class="file-container-header">
-      <div class="dot red" />
-      <div class="dot yellow" />
-      <div class="dot green" />
-      <span class="file-name">{{ fileName }}</span>
-    </div>
-
-    <div class="file-content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.file-container {
-  border: 1px solid var(--vp-c-divider);
-  border-radius: 16px;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
-  height: fit-content;
-  overflow: hidden;
-  max-width: 100%;
-}
-
-.file-container-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-
-  border-bottom: 1px solid var(--vp-c-divider);
-  background-color: var(--vp-c-bg-alt);
-}
-
-.file-container-header .file-name {
-  padding-left: 6px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-}
-
-.file-container-header .dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
-  background-color: #8883;
-  transition: all 100ms ease-in-out;
-}
-
-.file-container:hover {
-  .dot.red {
-    background-color: #F44336CC;
-  }
-
-  .dot.yellow {
-    background-color: #FFC107CC;
-  }
-
-  .dot.green {
-    background-color: #4CAF50CC;
-  }
-}
-
-.file-content {
-  background-color: var(--vp-c-bg);
-}
-
-</style>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/agentSession.ts b/docs/.vitepress/theme/homepage/agentSession.ts
new file mode 100644
index 00000000..0c4b50d7
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/agentSession.ts
@@ -0,0 +1,390 @@
+import {computed, onMounted, onUnmounted, ref, type Ref} from "vue";
+import type {Edit, QuickStartSession, Round} 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
+   stops while the window is not mostly on screen or the tab is hidden, and goes on from where it was; under
+   prefers-reduced-motion the finished session is shown still. */
+
+export interface Line {
+  text: string;
+  kind: "normal" | "removed" | "added";
+  /* how many characters of a line being typed are in (unset: all of them) */
+  typed?: number;
+  /* the line's height is opening or closing (only while nothing else re-renders the code) */
+  state?: "opening" | "closing";
+}
+
+export interface OpenFile {
+  name: string;
+  lines: Line[];
+}
+
+type Phase = "idle" | "working" | "editing" | "built" | "done";
+
+const tick = 16;
+
+/* the session's timing, in ms: slow enough to read each request, follow the diff and look at the page */
+const timing = {
+  /* from the window coming into view to the first request typing in */
+  start: 800,
+  /* the composer empties and is clicked into (HomePageQuickStart.vue) before the next request types in */
+  beforeTyping: 750,
+  /* the typed request stays in the composer this long before it sends itself */
+  beforeSend: 1400,
+  /* from the send to the page zooming in, or the agent's first edit when it stays */
+  working: 1000,
+  /* the page's flight (1-1.3s, HomePageQuickStart.vue) ends before the agent edits, so the change happens in close-up */
+  zoom: 1350,
+  /* a file the agent opens comes to the front before it is edited */
+  switchFile: 600,
+  /* the lines an edit replaces turn red before the new ones arrive */
+  markRemoved: 800,
+  /* the room for the new lines opens */
+  openLines: 320,
+  /* typing one line, at most, and one edit, at most */
+  perLine: 170,
+  perEdit: 2600,
+  /* the finished diff, a beat before the page changes */
+  diffHold: 500,
+  /* the diff stays, with the page it made, before it is taken in */
+  resultHold: 2500,
+  /* the replaced lines close as the diff is taken in */
+  closeLines: 320,
+  /* the code, taken in, stays before the next request types in (the page stays zoomed while it does) */
+  acceptedHold: 2500,
+  /* after the last request, the code and the page's overview stay before the session fades out and starts over */
+  endHold: 7000,
+  fade: 450
+};
+
+/* how long the next key takes: a person's uneven rhythm */
+function keyDelay(typed: string) {
+  const last = typed.at(-1);
+  const delay = 26 + Math.random() * 24;
+
+  if (last === " ")
+    return delay + 40 + Math.random() * 60;
+
+  if (last === "," || last === ".")
+    return delay + 140;
+
+  return Math.random() < 0.05 ? delay + 100 + Math.random() * 120 : delay;
+}
+
+/* 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) {
+  const { rounds } = session;
+
+  const files = ref<OpenFile[]>([]);
+  const active = ref("");
+  /* the round the code shows */
+  const phase = ref<Phase>("idle");
+  const roundIndex = ref(0);
+  /* the round whose prompt is in the composer: the next one types in while the previous diff is still shown */
+  const promptIndex = ref(0);
+  const promptTyped = ref(0);
+  /* 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) */
+  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 */
+  const scrolled = 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 */
+  const resetting = ref(false);
+
+  const round = computed(() => rounds[roundIndex.value]);
+  const prompt = computed(() => rounds[promptIndex.value].prompt);
+  const promptText = computed(() => prompt.value.slice(0, promptTyped.value));
+
+  const sent = computed(() => phase.value !== "idle" && promptIndex.value === roundIndex.value);
+  const typing = computed(() => !sent.value && promptTyped.value > 0 && promptTyped.value < prompt.value.length);
+  /* from the send until the page shows the result: the agent edits and QuestPDF renders */
+  const working = computed(() => phase.value === "working" || phase.value === "editing" || phase.value === "built");
+  const finished = computed(() => phase.value === "done" && sent.value);
+
+  /* the lines of the file in front, with every method but the one the request works on folded */
+  const lines = computed(() => foldLines(files.value.find(file => file.name === active.value)?.lines ?? [], unfold.value));
+
+
+  /* Edits on the files */
+
+  function resetSession() {
+    files.value = session.files.map(({ name, lines }) => ({ name, lines: lines.map(text => ({ text, kind: "normal" as const })) }));
+    active.value = session.files[0].name;
+    roundIndex.value = 0;
+    promptIndex.value = 0;
+    promptTyped.value = 0;
+    applied.value = 0;
+    zoom.value = undefined;
+    unfold.value = undefined;
+    scrolled.value = 0;
+    asking.value = false;
+    countdown.value = undefined;
+    phase.value = "idle";
+  }
+
+  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);
+  }
+
+  /* the file's reactive proxy, added if the edit creates it */
+  function open(name: string) {
+    if (!files.value.some(file => file.name === name))
+      files.value.push({ name, lines: [] });
+
+    return files.value.find(file => file.name === name)!;
+  }
+
+  /* marks the replaced lines and returns where the new lines go */
+  function prepare(file: OpenFile, { after, remove = 0 }: Edit) {
+    if (after === undefined)
+      return 0;
+
+    const at = file.lines.findIndex(line => line.text === after && line.kind === "normal");
+
+    for (let index = at; index < at + remove; index++)
+      file.lines[index].kind = "removed";
+
+    return at + Math.max(remove, 1);
+  }
+
+  function showFinishedSession() {
+    resetSession();
+
+    for (const r of rounds) {
+      for (const edit of r.edits) {
+        const file = open(edit.file);
+        const at = prepare(file, edit);
+        file.lines.splice(at, 0, ...edit.add.map(text => ({ text, kind: "added" as const })));
+        active.value = edit.file;
+      }
+
+      acceptDiff();
+      unfold.value = r.unfold ?? unfold.value;
+    }
+
+    roundIndex.value = rounds.length - 1;
+    promptIndex.value = roundIndex.value;
+    promptTyped.value = prompt.value.length;
+    applied.value = rounds.length;
+    phase.value = "done";
+  }
+
+
+  /* Animation engine: one async loop, paused while the window is not mostly on screen, stopped on unmount */
+
+  let running = false;
+  let inView = false;
+  let alive = true;
+  let observer: IntersectionObserver | undefined;
+  let countdowns = 0;
+
+  function sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  /* the session starts the first time the window is mostly on screen in a shown tab */
+  function updatePaused() {
+    paused.value = !inView || document.hidden;
+
+    if (!paused.value && !running)
+      void loop();
+  }
+
+  /* waits ms of time with the window in view: a pause cut by scrolling away goes on where it stopped */
+  async function pause(ms: number) {
+    let left = ms;
+
+    while (left > 0) {
+      if (paused.value) {
+        await sleep(100);
+      }
+      else {
+        const slice = Math.min(left, 100);
+        await sleep(slice);
+        left -= slice;
+      }
+
+      if (!alive)
+        throw unmounted;
+    }
+  }
+
+  /* a pause the composer shows filling up */
+  async function wait(ms: number) {
+    countdown.value = { key: ++countdowns, ms };
+    await pause(ms);
+    countdown.value = undefined;
+  }
+
+  async function askNext(index: number) {
+    promptIndex.value = index;
+    promptTyped.value = 0;
+    asking.value = true;
+    await pause(timing.beforeTyping);
+
+    while (promptTyped.value < prompt.value.length) {
+      promptTyped.value++;
+      await pause(keyDelay(promptText.value));
+    }
+
+    await wait(timing.beforeSend);
+    asking.value = false;
+  }
+
+  async function takeInDiff() {
+    const removed = files.value.flatMap(file => file.lines.filter(line => line.kind === "removed"));
+
+    if (removed.length) {
+      removed.forEach(line => line.state = "closing");
+      await pause(timing.closeLines);
+    }
+
+    acceptDiff();
+  }
+
+  async function playEdit(edit: Edit) {
+    const file = open(edit.file);
+
+    if (active.value !== edit.file) {
+      active.value = edit.file;
+      await pause(timing.switchFile);
+    }
+
+    const at = prepare(file, edit);
+
+    if (edit.remove)
+      await pause(timing.markRemoved);
+
+    const 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);
+
+    for (let index = at; index < at + edit.add.length; index++)
+      file.lines[index].state = undefined;
+
+    /* the new lines the window shows (one inside a folded method takes no time), as reactive proxies, so each step
+       re-renders the window */
+    const shown = new Set(lines.value.map(({ line }) => line));
+    const added = file.lines.slice(at, at + edit.add.length).filter(line => shown.has(line));
+    const lineTicks = Math.max(1, Math.round(Math.min(timing.perLine, timing.perEdit / added.length) / tick));
+
+    for (const line of added) {
+      scrollTo(lines.value.findIndex(shown => shown.line === line));
+
+      if (!line.text)
+        await pause(tick * lineTicks);
+
+      while (line.typed! < line.text.length) {
+        line.typed = Math.min(line.text.length, line.typed! + Math.ceil(line.text.length / lineTicks));
+        await pause(tick);
+      }
+    }
+  }
+
+  async function playRound(index: number) {
+    roundIndex.value = index;
+    phase.value = "working";
+    unfold.value = round.value.unfold ?? unfold.value;
+    scrollTo(lines.value.findIndex(({ line }) => line.text === unfold.value));
+    await pause(timing.working);
+
+    /* compared by value: two requests may change the same part of the page */
+    if (String(round.value.zoom) !== String(zoom.value)) {
+      zoom.value = round.value.zoom;
+      await pause(timing.zoom);
+    }
+
+    phase.value = "editing";
+    for (const edit of round.value.edits)
+      await playEdit(edit);
+
+    phase.value = "built";
+    await pause(timing.diffHold);
+    phase.value = "done";
+    applied.value = index + 1;
+  }
+
+  async function loop() {
+    running = true;
+
+    try {
+      await pause(timing.start);
+
+      while (alive) {
+        for (let index = 0; index < rounds.length; index++) {
+          await askNext(index);
+          await playRound(index);
+          await pause(timing.resultHold);
+          await takeInDiff();
+
+          if (index === rounds.length - 1) {
+            zoom.value = undefined;
+            await wait(timing.endHold);
+          }
+          else
+            await wait(timing.acceptedHold);
+        }
+
+        resetting.value = true;
+        await pause(timing.fade);
+        resetSession();
+        resetting.value = false;
+        await pause(timing.fade);
+      }
+    }
+    catch (error) {
+      if (error !== unmounted)
+        throw error;
+    }
+  }
+
+  resetSession();
+
+  onMounted(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      showFinishedSession();
+      return;
+    }
+
+    /* mostly on screen: 60% of the window, or of the screen when the window is taller than it */
+    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;
+    observer?.disconnect();
+    document.removeEventListener("visibilitychange", updatePaused);
+  });
+
+  return { files, active, lines, promptIndex, promptText, typing, sent, working, finished, applied, zoom, scrolled, asking, countdown, paused, resetting, unfold };
+}
diff --git a/docs/.vitepress/theme/homepage/codeExamples/codeFirstApproach.cs b/docs/.vitepress/theme/homepage/codeExamples/codeFirstApproach.cs
deleted file mode 100644
index a08d9caa..00000000
--- a/docs/.vitepress/theme/homepage/codeExamples/codeFirstApproach.cs
+++ /dev/null
@@ -1,24 +0,0 @@
-container.Column(column =>
-{
-    column.Item().Text("Order Items").Bold();
-
-    if (Model.ShowSummary)
-        column.Item().Element(ComposeOrderSummary);
-
-    foreach (var item in Model.Items)
-        column.Item().Element(c => ComposeItem(c, item));
-});
-
-void ComposeItem(IContainer container, OrderItem item)
-{
-    container
-        .Border(1, Colors.Grey.Darken2)
-        .Background(item.HighlightColor)
--       .Padding(12)
-+       .Padding(16)
-        .Row(row =>
-        {
-            row.RelativeItem().Text(item.Name);
-            row.AutoItem().Text($"{item.Price:F2} USD");
-        });
-}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/codeExamples/familiarProgrammingConcepts.cs b/docs/.vitepress/theme/homepage/codeExamples/familiarProgrammingConcepts.cs
deleted file mode 100644
index c7994ffb..00000000
--- a/docs/.vitepress/theme/homepage/codeExamples/familiarProgrammingConcepts.cs
+++ /dev/null
@@ -1,17 +0,0 @@
-container
-    .Column(column =>
-    {
-        column.Item().Text("Order Items").Bold();
-
-        // use conditionals to show content based on logic
-        if (Model.ShowSummary)
-            column.Item().Element(ComposeOrderSummary);
-
-        // use loops to iterate over collections naturally
-        foreach (var item in Model.Items)
-        {
-            // organize your code by splitting logic into functions
-            column.Item()
-                .Element(container => ComposeItem(container, item));
-        }
-    });
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/codeExamples/helloWorld.cs b/docs/.vitepress/theme/homepage/codeExamples/helloWorld.cs
deleted file mode 100644
index c900c752..00000000
--- a/docs/.vitepress/theme/homepage/codeExamples/helloWorld.cs
+++ /dev/null
@@ -1,14 +0,0 @@
-Document
-    .Create(document =>
-    {
-        document.Page(page =>
-        {
-            page.Size(PageSizes.A4);
-            page.Margin(32);
-
-            page.Content()
-                .Text("Hello PDF!")
-                .FontSize(24);
-        });
-    })
-    .GeneratePdfAndShow();
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/codeExamples/invoice.html b/docs/.vitepress/theme/homepage/codeExamples/invoice.html
new file mode 100644
index 00000000..f80ff282
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/codeExamples/invoice.html
@@ -0,0 +1,26 @@
+<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/codeFolding.ts b/docs/.vitepress/theme/homepage/codeFolding.ts
new file mode 100644
index 00000000..520dcb32
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/codeFolding.ts
@@ -0,0 +1,25 @@
+/* Folds every method but the one a request works on, as an IDE does. Shared by agentSession.ts and
+   sessionBuilder.ts. */
+
+export interface FoldableLine {
+  text: string;
+  kind: "normal" | "removed" | "added";
+}
+
+/* the lines the window shows: a folded method is its signature line alone, marked folded */
+export function foldLines<T extends FoldableLine>(lines: T[], unfold: string | undefined) {
+  const shown: { line: T; folded: boolean }[] = [];
+  let folding = false;
+
+  for (const line of lines) {
+    if (folding) {
+      folding = line.text !== "}";
+      continue;
+    }
+
+    folding = !!unfold && line.kind === "normal" && line.text.startsWith("void ") && line.text !== unfold;
+    shown.push({ line, folded: folding });
+  }
+
+  return shown;
+}
diff --git a/docs/.vitepress/theme/homepage/createCodeHighlighter.ts b/docs/.vitepress/theme/homepage/createCodeHighlighter.ts
deleted file mode 100644
index be45d100..00000000
--- a/docs/.vitepress/theme/homepage/createCodeHighlighter.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { createHighlighterCore } from 'shiki';
-import { createOnigurumaEngine } from 'shiki/engine/oniguruma'
-import {HighlighterCore} from "@shikijs/types";
-
-let codeHighlighterInstanceCache: Promise<HighlighterCore> | null = null;
-
-export default function createCodeHighlighter() {
-  if (codeHighlighterInstanceCache)
-    return codeHighlighterInstanceCache;
-
-  codeHighlighterInstanceCache = createHighlighterCore({
-    themes: [
-      import('shiki/themes/dark-plus.mjs'),
-      import('shiki/themes/light-plus.mjs')
-    ],
-    langs: [
-      import('shiki/langs/csharp.mjs'),
-    ],
-    engine: createOnigurumaEngine(import('shiki/wasm'))
-  });
-
-  return codeHighlighterInstanceCache;
-}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/homepage/ctaTimeline.ts b/docs/.vitepress/theme/homepage/ctaTimeline.ts
new file mode 100644
index 00000000..38240e24
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/ctaTimeline.ts
@@ -0,0 +1,33 @@
+/* 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. */
+
+export const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+export class Timeline {
+  private readonly running = new Set<Animation>();
+
+  animate(target: Element, keyframes: Keyframe[] | null, options: KeyframeAnimationOptions): Animation {
+    const animation = target.animate(keyframes, options);
+    this.running.add(animation);
+    animation.finished.then(() => this.running.delete(animation), () => this.running.delete(animation));
+    return animation;
+  }
+
+  /* an empty animation: finishes `ms` of timeline time later */
+  wait(target: Element, ms: number): Animation {
+    return this.animate(target, null, { duration: ms });
+  }
+
+  /* true once every animation has finished, false if any was cancelled */
+  static settled(animations: Animation[]): Promise<boolean> {
+    return Promise.all(animations.map(animation => animation.finished)).then(() => true, () => false);
+  }
+
+  /* for unmount */
+  cancel() {
+    for (const animation of this.running)
+      animation.cancel();
+
+    this.running.clear();
+  }
+}
diff --git a/docs/.vitepress/theme/homepage/ctaVisual.css b/docs/.vitepress/theme/homepage/ctaVisual.css
new file mode 100644
index 00000000..6b7b4123
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/ctaVisual.css
@@ -0,0 +1,86 @@
+/* Shared by HomePageCtaBuildVisual.vue and HomePageCtaDeckVisual.vue. The model has a 148 x 200 coordinate system
+   for its shapes; the pose variables place it. */
+
+.scene {
+  --tilt-x: 8deg;
+  --scale: 0.74;
+  --shift: 0px;
+  --rise: 0px;
+  --ink: #A7AEBB;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 196px;
+}
+
+.stage {
+  position: absolute;
+  inset: 0;
+  perspective: 640px;
+  perspective-origin: 50% 45%;
+}
+
+.model {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 148px;
+  height: 200px;
+  margin: -100px 0 0 -74px;
+  transform-style: preserve-3d;
+  transform: translate(var(--shift), var(--rise)) scale(var(--scale)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--tilt-z));
+  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.paper {
+  background-color: light-dark(#FFF, #F4F4F6);
+  box-shadow: 0 0 0 1px light-dark(rgba(0, 0, 0, 0.10), rgba(255, 255, 255, 0.06));
+}
+
+.page {
+  position: absolute;
+  inset: 0;
+  border-radius: 3px;
+  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, var(--page-shade, 0.025)));
+}
+
+html.dark .page {
+  background-image: none;
+}
+
+.shadow {
+  position: absolute;
+  inset: 8px -6px -10px 10px;
+  border-radius: 8px;
+  background: light-dark(rgba(20, 24, 40, 0.16), rgba(0, 0, 0, 0.45));
+  filter: blur(10px);
+  transform: translateZ(-1px);
+}
+
+/* Placeholders */
+.shape {
+  position: absolute;
+  display: block;
+  box-sizing: border-box;
+  border-radius: 2px;
+  background-color: currentColor;
+  opacity: 0.7;
+}
+
+.shape.strong {
+  opacity: 1;
+}
+
+.shape.soft {
+  opacity: 0.5;
+}
+
+
+/* Compact */
+
+@media screen and (max-width: 700px) {
+  .scene {
+    min-height: 180px;
+  }
+}
diff --git a/docs/.vitepress/theme/homepage/quickStart.data.ts b/docs/.vitepress/theme/homepage/quickStart.data.ts
new file mode 100644
index 00000000..ffc9e9d3
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/quickStart.data.ts
@@ -0,0 +1,203 @@
+import { defineLoader } from "vitepress";
+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. */
+
+declare const data: QuickStartSession;
+export { data };
+
+const rounds: Round[] = [
+  {
+    prompt: "Migrate our legacy HTML-to-PDF invoice to QuestPDF.",
+    unfold: "void ComposePage(PageDescriptor page)",
+    edits: [
+      {
+        file: "Invoice.cs",
+        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}\");",
+          "            });",
+          "    });",
+          "}"
+        ]
+      }
+    ]
+  },
+  {
+    prompt: "Add our logo and brand color.",
+    unfold: "void ComposeHeader(IContainer container)",
+    zoom: [36, 40, 300, 122],
+    edits: [
+      {
+        file: "Invoice.cs",
+        after: "        {",
+        add: [
+          "            column.Item()",
+          "                .PaddingBottom(16)",
+          "                .Height(32)",
+          "                .Svg(\"logo.svg\")",
+          "                .FitHeight();",
+          ""
+        ]
+      },
+      {
+        file: "Invoice.cs",
+        after: "                .Bold();",
+        remove: 1,
+        add: [
+          "                .Bold()",
+          "                .FontColor(Colors.Teal.Darken3);"
+        ]
+      }
+    ]
+  },
+  {
+    prompt: "Show item details under each name.",
+    unfold: "void ComposeItem(IContainer container, InvoiceItem item)",
+    zoom: [40, 165, 260, 230],
+    edits: [
+      {
+        file: "Invoice.cs",
+        after: "        row.RelativeItem().Text(item.Name);",
+        remove: 1,
+        add: [
+          "        row.RelativeItem().Column(column =>",
+          "        {",
+          "            column.Item().Text(item.Name).SemiBold();",
+          "",
+          "            column.Item()",
+          "                .Text(item.Details)",
+          "                .FontSize(8)",
+          "                .FontColor(Colors.Grey.Darken1);",
+          "        });"
+        ]
+      }
+    ]
+  },
+  {
+    prompt: "Break down VAT by rate.",
+    unfold: "void ComposeTotals(IContainer container)",
+    zoom: [300, 396, 260, 148],
+    edits: [
+      {
+        file: "Invoice.cs",
+        after: "        Line(\"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));"
+        ]
+      }
+    ]
+  },
+  {
+    prompt: "Add a Pay now button linking to checkout.",
+    unfold: "void ComposePage(PageDescriptor page)",
+    zoom: [300, 396, 260, 148],
+    edits: [
+      {
+        file: "Invoice.cs",
+        after: "        column.Item().PaddingTop(12).Element(ComposeTotals);",
+        add: [
+          "",
+          "        column.Item()",
+          "            .PaddingTop(16)",
+          "            .AlignRight()",
+          "            .Width(200)",
+          "            .Hyperlink(Model.PaymentLink)",
+          "            .Background(Colors.Teal.Darken3)",
+          "            .CornerRadius(4)",
+          "            .PaddingVertical(8)",
+          "            .AlignCenter()",
+          "            .Text(\"Pay now\")",
+          "            .FontColor(Colors.White)",
+          "            .Bold();"
+        ]
+      }
+    ]
+  }
+];
+
+export default defineLoader({
+  watch: ["./codeExamples/invoice.html"],
+
+  load: () => buildSession({
+    title: "Invoice.pdf",
+    renders: "/homepage/quick-start-",
+    page: { width: 595, height: 842 },
+    overview: { width: 595, height: 340 },
+    files: [
+      { name: "invoice.html", lines: fs.readFileSync(new URL("./codeExamples/invoice.html", import.meta.url), "utf-8").trimEnd().split("\n") }
+    ],
+    rounds
+  })
+});
diff --git a/docs/.vitepress/theme/homepage/sessionBuilder.ts b/docs/.vitepress/theme/homepage/sessionBuilder.ts
new file mode 100644
index 00000000..9c18e9cd
--- /dev/null
+++ b/docs/.vitepress/theme/homepage/sessionBuilder.ts
@@ -0,0 +1,156 @@
+import { codeToHtml, stringifyTokenStyle, type ThemedToken } from "shiki";
+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";
+
+export interface Edit {
+  file: string;
+  /* the line the edit starts at, matched by text; omitted for a new file */
+  after?: string;
+  /* how many lines from `after` on are replaced (marked red, kept above the new lines); 0 inserts below it */
+  remove?: number;
+  add: string[];
+}
+
+export interface Round {
+  prompt: string;
+  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];
+}
+
+export interface SessionDefinition {
+  /* the viewer window's title, the document's file name */
+  title: string;
+  /* the URL the renders are served at, less the round's number and ".webp" (round n: `${renders}${n}.webp`) */
+  renders: string;
+  /* the page's box in the viewer's units, which zoom is measured in: 595 wide, as tall as the page's proportions
+     make it */
+  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 files open as the session starts */
+  files: { name: string; lines: string[] }[];
+  rounds: Round[];
+}
+
+export interface Token {
+  content: string;
+  /* both themes' colours, as --shiki-light and --shiki-dark (VitePress's code styles pick one) */
+  style: string;
+}
+
+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 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 */
+  digits: number;
+}
+
+/* the most lines the window shows at once: 26 keep it, title bar included, within a laptop screen; a longer file
+   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) {
+    const added = add.map(text => ({ text, kind: "normal" as const }));
+    return { diff: [...added, ...lines.map(text => ({ text, kind: "normal" as const }))], accepted: [...add, ...lines] };
+  }
+
+  const at = lines.indexOf(after);
+
+  if (at < 0)
+    throw new Error(`[session] no 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" });
+
+  const diff = [
+    ...lines.slice(0, end).map(kept),
+    ...add.map(text => ({ text, kind: "added" as const })),
+    ...lines.slice(end).map((text, index) => kept(text, end + index))
+  ];
+
+  return { diff, accepted: [...lines.slice(0, remove ? at : end), ...add, ...lines.slice(end)] };
+}
+
+export async function buildSession(definition: SessionDefinition): Promise<QuickStartSession> {
+  const { files, rounds } = definition;
+
+  /* every state a file passes through: as the session starts, then per edit the diff and the accepted lines the
+     next edit starts from; and the most lines the window shows of any of them, with the method each request
+     works on unfolded */
+  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));
+
+  for (const round of rounds) {
+    unfold = round.unfold ?? unfold;
+
+    for (const file of Object.values(accepted))
+      lines = Math.max(lines, foldLines(asNormal(file), unfold).length);
+
+    for (const edit of round.edits) {
+      const { diff, accepted: next } = applyEdit(accepted[edit.file] ?? [], edit);
+      accepted[edit.file] = next;
+      states.push({ file: edit.file, lines: diff.map(line => line.text), diff: true }, { file: edit.file, lines: next, diff: false });
+      lines = Math.max(lines, foldLines(diff, unfold).length, foldLines(asNormal(next), unfold).length);
+    }
+  }
+
+  const tokens: QuickStartSession["tokens"] = { csharp: {}, text: {} };
+
+  /* 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()) {
+      const text = lines[index];
+      const lineTokens = line.map(token => ({ content: token.content, style: stringifyTokenStyle(token.htmlStyle ?? {}) }));
+
+      if (diff && text in tokens[lang])
+        continue;
+
+      if (text in tokens[lang] && JSON.stringify(tokens[lang][text]) !== JSON.stringify(lineTokens))
+        throw new Error(`[session] "${text.trim()}" is highlighted differently in two places`);
+
+      tokens[lang][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 };
+}
+
+/* the tokens exactly as codeToHtml renders them (whitespace merged into the token that follows it) */
+async function highlight(lines: string[], lang: Lang): Promise<ThemedToken[][]> {
+  let result: ThemedToken[][] = [];
+
+  await codeToHtml(lines.join("\n"), {
+    lang,
+    themes: { light: "light-plus", dark: "dark-plus" },
+    defaultColor: false,
+    transformers: [{ tokens: tokens => { result = tokens; } }]
+  });
+
+  return result;
+}
diff --git a/docs/.vitepress/theme/license/LicenseIndex.vue b/docs/.vitepress/theme/license/LicenseIndex.vue
index 3e85c84b..d436b11a 100644
--- a/docs/.vitepress/theme/license/LicenseIndex.vue
+++ b/docs/.vitepress/theme/license/LicenseIndex.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { faArrowRight } from "@fortawesome/pro-solid-svg-icons";
+import Icon from "../Icon.vue";
 
 const documents = [
   {
@@ -30,26 +32,24 @@ const documents = [
 </script>
 
 <template>
-  <div class="custom-page">
-    <div class="container reverse-background">
-      <article class="content content-center">
-        <header class="section-header" style="margin-bottom: 24px;">
-          <h1>QuestPDF Legal Terms</h1>
-          <p class="sub-header">Review or download the official legal documents and licensing terms for QuestPDF. If you have questions or need assistance, our team is here to help.</p>
-        </header>
-
-        <div class="card">
-          <a v-for="document in documents" :key="document.title" :href="document.link" class="document-link">
-            <span class="link-title">{{ document.title }}</span>
-            <i class="fa-solid fa-arrow-right arrow"></i>
-          </a>
-        </div>
-
-        <a class="action primary" href="/license/QuestPDF%20License%20Terms.pdf" download>
-          Download all documents (PDF)
+  <div class="custom-page legal-page texture-dots">
+    <article class="content">
+      <header class="section-header">
+        <h1>QuestPDF Legal Terms</h1>
+        <p class="sub-header">Review or download the official legal documents and licensing terms for QuestPDF. If you have questions or need assistance, our team is here to help.</p>
+      </header>
+
+      <nav class="panel documents" aria-label="Legal documents">
+        <a v-for="document in documents" :key="document.title" :href="document.link" class="document-link">
+          <span class="link-title">{{ document.title }}</span>
+          <Icon class="arrow" :icon="faArrowRight" />
         </a>
-      </article>
-    </div>
+      </nav>
+
+      <a class="action primary" href="/license/QuestPDF%20License%20Terms.pdf" download>
+        Download all documents (PDF)
+      </a>
+    </article>
   </div>
 </template>
 
@@ -61,43 +61,35 @@ const documents = [
 .content {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 32px;
   align-items: center;
-  justify-self: center;
-
-  width: 100%;
 }
 
-.card {
-  background-color: var(--vp-c-bg) !important;
-  padding: 0;
-
+.documents {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
-
+  width: 100%;
+  max-width: 640px;
+  padding: 0;
   overflow: hidden;
 }
 
 .document-link {
   display: flex;
-  flex-direction: row;
   align-items: center;
   gap: 32px;
 
-  padding: 16px 24px;
-  text-decoration: none;
-  color: inherit;
+  padding: 18px 24px 18px 32px;
   transition: background-color 0.2s ease;
+}
 
-  .link-title {
-    color: var(--vp-c-text-1);
-    font-weight: 500;
-  }
+.document-link .link-title {
+  color: var(--vp-c-text-1);
+  font-weight: 500;
+}
 
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--vp-c-divider);
-  }
+.document-link:not(:last-child) {
+  border-bottom: 1px solid var(--vp-c-divider);
 }
 
 .document-link .arrow {
@@ -109,11 +101,21 @@ const documents = [
 }
 
 .document-link:hover {
-  background-color: #2196F311;
+  background-color: color-mix(in srgb, #2196F3 5%, transparent);
+}
+
+.document-link:hover .link-title {
+  color: #2196F3;
+}
+
+.document-link:hover .arrow {
+  color: #2196F3;
+  transform: translateX(4px);
+}
 
-  .arrow {
-    color: #2196F3;
-    transform: translateX(4px);
+@media screen and (max-width: 700px) {
+  .document-link {
+    padding: 18px 20px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue b/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue
index a6bdf111..a6981a51 100644
--- a/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue
+++ b/docs/.vitepress/theme/license/LicensePurchaseSuccess.vue
@@ -1,6 +1,8 @@
-<script setup>
-import { computed } from 'vue';
-
+<script setup lang="ts">
+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";
 const shareEmailSubject = 'QuestPDF License Purchased – Setup Instructions';
 const shareEmailBody = `Hi Team,
 
@@ -10,112 +12,107 @@ Action Required:
 Please update the application configuration accordingly. Setup takes only a few minutes, requires a single line of code, and does not involve any license keys or activation servers.
 
 License Configuration Guide:
-https://www.questpdf.com/license/configuration
+https://configure.questpdf.com
 
 Best`;
 
-const shareMailtoLink = computed(() => {
-  const subject = encodeURIComponent(shareEmailSubject);
-  const body = encodeURIComponent(shareEmailBody);
-  return `mailto:?subject=${subject}&body=${body}`;
-});
+const shareMailtoLink = `mailto:?subject=${encodeURIComponent(shareEmailSubject)}&body=${encodeURIComponent(shareEmailBody)}`;
 
-const licenseDetails = [
-  {
-    icon: 'fa-award-simple',
-    title: "Perpetual license",
-    description: "Your perpetual license never expires. This purchase includes one year of feature, quality and security updates, along with one year of dedicated support."
-  },
-  {
-    icon: 'fa-bolt',
-    title: "Ready to use",
-    description: "Your organization is now licensed to use QuestPDF in production. No license keys, activation servers, or compliance tracking are required. Your team can start immediately - licensing never blocks builds or deployments."
-  },
-  {
-    icon: 'fa-code',
-    title: "License configuration",
-    description: "Please share <a href=\"https://www.questpdf.com/license/configuration.html\"><u>the license setup guide</u></a> with your software development team. Configuration takes only a few minutes and requires changing a single line of code.",
-  },
-];
+interface Card {
+  title: string;
+  items: { icon: IconDefinition; title: string; description: string }[];
+  action: { label: string; href: string; primary?: boolean; target?: string };
+}
 
-const orderDetails = [
+const cards: Card[] = [
   {
-    icon: 'fa-receipt',
-    title: "Purchase confirmation",
-    description: "All purchase details, invoices, and receipts will be delivered to your email by Paddle, our Merchant of Record."
+    title: "License information",
+    items: [
+      {
+        icon: faAwardSimple,
+        title: "Perpetual license",
+        description: "Your perpetual license never expires. This purchase includes one year of feature, quality and security updates, along with one year of dedicated support."
+      },
+      {
+        icon: faBolt,
+        title: "Ready to use",
+        description: "Your organization is now licensed to use QuestPDF in production. No license keys, activation servers, or compliance tracking are required. Your team can start immediately - licensing never blocks builds or deployments."
+      },
+      {
+        icon: faCode,
+        title: "License configuration",
+        description: "Please share <a href=\"https://www.questpdf.com/license/configuration.html\"><u>the license setup guide</u></a> with your software development team. Configuration takes only a few minutes and requires changing a single line of code."
+      }
+    ],
+    action: { label: "Forward to Development Team", href: shareMailtoLink, primary: true }
   },
   {
-    icon: 'fa-calendar-day',
-    title: "Updates & support auto-renewal",
-    description: "Renewal extends access to software updates and support for another year. If renewal is canceled, your team keeps the right to use the version already licensed. We will send a renewal reminder 30 days before the renewal date.",
-  },
-  {
-    icon: 'fa-credit-card',
-    title: "Invoice and billing",
-    description: "You can update your account details and payment information, manage or cancel the license auto-renewal process as well as access payment history on the Paddle Customer Portal.",
+    title: "Billing and renewal",
+    items: [
+      {
+        icon: faReceipt,
+        title: "Purchase confirmation",
+        description: "All purchase details, invoices, and receipts will be delivered to your email by Paddle, our Merchant of Record."
+      },
+      {
+        icon: faCalendarDay,
+        title: "Updates & support auto-renewal",
+        description: "Renewal extends access to software updates and support for another year. If renewal is canceled, your team keeps the right to use the version already licensed. We will send a renewal reminder 30 days before the renewal date."
+      },
+      {
+        icon: faCreditCard,
+        title: "Invoice and billing",
+        description: "You can update your account details and payment information, manage or cancel the license auto-renewal process as well as access payment history on the Paddle Customer Portal."
+      }
+    ],
+    action: { label: "Open Customer Portal", href: "https://customer-portal.paddle.com/cpl_01gmdq0qdr8madhdchknpb52we", target: "_blank" }
   }
 ];
 
 </script>
 
 <template>
-  <div class="custom-page">
-    <div class="container reverse-background">
-      <div class="content">
-        <header class="section-header">
-          <h1>
-            <i class="fa-duotone fa-square-check"></i>
-            Order completed
-          </h1>
-        </header>
-
-        <div class="email-notification">
-          <i class="fa fa-solid fa-envelope"></i>
-          <span>
-            <b>Please check your inbox.</b> We have sent a confirmation email with your license details, license confirmation PDF, and developer setup instructions.
-          </span>
+  <div class="custom-page purchase-page texture-dots">
+    <div class="content">
+      <header class="section-header purchase-header">
+        <div class="status-tag">
+          <Icon :icon="faCheck" />
+          Order completed
         </div>
 
-        <section class="success-card card">
-          <h3>License information</h3>
+        <h1 class="purchase-title">Thank you! Please check your email inbox for license confirmation and setup instructions.</h1>
+      </header>
 
-          <div class="description-items">
-            <div v-for="step in licenseDetails" :key="step.title" class="description-item">
-              <i class="fa-regular" :class="step.icon" />
-              <div class="description-item-content">
-                <strong>{{ step.title }}</strong>
-                <span v-html="step.description" />
-              </div>
-            </div>
-          </div>
-
-          <a class="action primary" :href="shareMailtoLink">Forward to Development Team</a>
-        </section>
-
-        <section class="success-card card">
-          <h3>Billing and renewal</h3>
+      <div class="purchase-cards">
+        <section v-for="card in cards" :key="card.title" class="panel success-card">
+          <h3 class="card-title">{{ card.title }}</h3>
 
           <div class="description-items">
-            <div v-for="step in orderDetails" :key="step.title" class="description-item">
-              <i class="fa-regular" :class="step.icon" />
+            <div v-for="item in card.items" :key="item.title" class="description-item">
+              <div class="icon-tile">
+                <Icon :icon="item.icon" />
+              </div>
               <div class="description-item-content">
-                <strong>{{ step.title }}</strong>
-                <span v-html="step.description" />
+                <strong class="row-title">{{ item.title }}</strong>
+                <p class="row-description" v-html="item.description" />
               </div>
             </div>
           </div>
 
-          <a class="action" href="https://customer-portal.paddle.com/cpl_01gmdq0qdr8madhdchknpb52we" target="_blank">Open Customer Portal</a>
+          <a class="action" :class="{ primary: card.action.primary }" :href="card.action.href" :target="card.action.target">{{ card.action.label }}</a>
         </section>
 
-        <section class="success-card card">
-          <h3>Do you need assistance?</h3>
+        <div class="dotted-divider"></div>
 
-          <p>
-            If you have any questions about your license, setup, or billing, please reach out. We typically respond within one business day.
-          </p>
+        <section class="panel assistance-card">
+          <div>
+            <h3 class="card-title">Do you need assistance?</h3>
+            <p class="card-description">
+              If you have any questions about your license, setup, or billing, please reach out. We typically respond within one business day.
+            </p>
+          </div>
 
-          <a class="action" href="mailto:contact@questpdf.com" target="_blank">Contact Support</a>
+          <a class="action" href="mailto:contact@questpdf.com">Contact Support</a>
         </section>
       </div>
     </div>
@@ -124,123 +121,146 @@ const orderDetails = [
 
 <style scoped>
 
-/* Page */
-
 .content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-width: 800px;
   gap: 32px;
 }
 
-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 
-header h1 {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 12px;
-
-  margin-bottom: 12px;
+.purchase-header {
+  padding-bottom: 32px;
 }
 
-header h1 i.fa-square-check {
-  font-size: 1.25em;
-  color: inherit;
+.purchase-title {
+  margin: 0 0 8px;
+  font-size: 1.5rem;
+  line-height: 2.125rem;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
 }
 
-
-/* Email notification */
-
-.email-notification .fa {
-  font-size: 40px;
-  color: #67B84D;
+@media screen and (max-width: 700px) {
+  .purchase-title {
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+  }
 }
 
-.email-notification {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 24px;
-
-  border-radius: 16px;
-  padding: 24px 32px;
-  color: #1B5E20;
-  background-color: #67B84D33;
-
-  place-self: center;
-  text-align: left;
+.status-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 24px;
+  padding: 9px 24px;
+  border-radius: 14px;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  word-spacing: 2px;
+  background-color: #2E7D32;
+  color: #FFFFFF;
 }
 
-html.dark .email-notification {
-  color: #A5D6A7;
+.status-tag .icon {
+  font-size: 18px;
 }
 
-
-/* Cards with details */
-
-.success-card .fa-regular {
+.purchase-cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 32px;
   width: 100%;
-  aspect-ratio: 1;
-
-  background-color: #8882;
-  color: #666;
-  font-size: 24px;
-  padding: 12px;
-  border-radius: 8px;
 }
 
-html.dark .success-card .fa-regular {
-  color: #AAA;
+@media screen and (max-width: 960px) {
+  .purchase-cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }
 
-.card h3 {
-  margin-top: 0;
+/* a size container: its items adapt to the card's width */
+.success-card {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 }
 
 .description-items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  width: 100%;
+  margin: 8px 0 24px;
 }
 
-.description-item  {
+.description-item {
   display: grid;
   grid-template-columns: 48px 1fr;
-  gap: 24px;
-  padding: 16px 0;
+  gap: 20px;
+  padding: 24px 0;
 }
 
 .description-item-content {
   display: flex;
   flex-direction: column;
-  gap: 4px;
 }
 
-.description-item-content strong {
-  color: var(--vp-c-text-2);
-  font-weight: 600;
-  font-size: 1rem;
-  line-height: 1.5;
+.success-card a.action {
+  margin-top: auto;
+  align-self: flex-end;
+}
+
+.assistance-card {
+  grid-column: 1 / -1;
+
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 32px 48px;
+  align-items: center;
 }
 
-.description-item-content span {
-  color: var(--vp-c-text-2);
-  line-height: 1.6;
-  font-size: 0.9375rem;
+.assistance-card p {
+  max-width: 70ch;
 }
 
-a.action {
-  margin-top: 24px;
-  place-self: end;
+@media screen and (max-width: 700px) {
+  .assistance-card {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .success-card a.action {
+    align-self: stretch;
+  }
+}
+
+@container (max-width: 360px) {
+  .description-item {
+    grid-template-areas:
+        "icon title"
+        "text text";
+    align-items: center;
+    column-gap: 16px;
+    row-gap: 12px;
+  }
+
+  .description-item .icon-tile {
+    grid-area: icon;
+  }
+
+  .description-item-content {
+    display: contents;
+  }
+
+  .description-item .row-title {
+    grid-area: title;
+  }
+
+  .description-item .row-description {
+    grid-area: text;
+    margin-top: 0;
+  }
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/license/documents/DocumentTemplate.vue b/docs/.vitepress/theme/license/documents/DocumentTemplate.vue
index 72563e21..ed0110a0 100644
--- a/docs/.vitepress/theme/license/documents/DocumentTemplate.vue
+++ b/docs/.vitepress/theme/license/documents/DocumentTemplate.vue
@@ -1,73 +1,165 @@
 <template>
-  <section class="custom-page document-page">
-    <div class="container reverse-background">
-      <div class="content">
-        <section style="max-width: 800px;">
-          <div class="section-header">
-            <h1>{{ doc.title }}</h1>
+  <section class="custom-page document-page legal-page texture-dots">
+    <div class="content">
+      <header class="section-header document-header">
+        <a class="document-back" href="/license">
+          <Icon :icon="faArrowLeft" />
+          View all licensing documents
+        </a>
+
+        <h1>{{ doc.title }}</h1>
+      </header>
+
+      <div class="panel document-card">
+        <dl v-if="doc.meta.length" class="document-meta">
+          <div v-for="item in doc.meta" :key="item.label">
+            <dt>{{ item.label }}:</dt>
+            <dd>{{ item.value }}</dd>
           </div>
-        </section>
+        </dl>
 
-        <div class="card">
-          <div class="document-body vp-doc" v-html="doc.html"></div>
-        </div>
+        <article class="document-body vp-doc" v-html="doc.html"></article>
 
-        <div class="links">
-          <a class="action " href="/license">
+        <footer class="links">
+          <a class="action" href="/license">
             View all licensing documents
           </a>
 
           <a class="action primary" href="/license/QuestPDF%20License%20Terms.pdf" download>
             Download (PDF)
           </a>
-        </div>
+        </footer>
       </div>
     </div>
   </section>
 </template>
 
-<script setup>
-import { data } from "./licenseDocuments.data.ts";
+<script setup lang="ts">
+import { faArrowLeft } from "@fortawesome/pro-solid-svg-icons";
+import Icon from "../../Icon.vue";
+import { data } from "./licenseDocuments.data";
 
-const props = defineProps({
-  id: { type: String, required: true }
-});
+const props = defineProps<{ id: string }>();
 
 const doc = data[props.id];
 </script>
 
-<style lang="scss">
+<style>
 
 .document-page .content {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 48px;
-  max-width: 800px;
+  gap: 40px;
+  max-width: calc(820px + 2 * var(--custom-page-gutter));
 }
 
-.document-body * {
+.document-page .document-header h1 {
+  margin-bottom: 0;
+}
+
+.document-page .document-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 24px;
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--vp-c-brand-1);
+  transition: color 0.2s ease;
+}
+
+.document-page .document-back .icon {
+  font-size: 1rem;
+}
+
+.document-page .document-back:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.document-page .document-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 40px;
+  padding-bottom: 40px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.document-page .document-meta div {
+  display: flex;
+  gap: 8px;
+}
+
+.document-page .document-meta dt {
   color: var(--vp-c-text-2);
 }
 
-.document-body h2 {
-  margin: 32px -32px 16px;
-  padding: 32px 32px 0;
-  width: calc(100% + 64px);
-  border-top: 1px solid #8882;
+.document-page .document-meta dd {
+  font-weight: 600;
   color: var(--vp-c-text-1);
-  font-size: 1.4rem;
 }
 
-.document-body strong {
+
+.document-page .document-card {
+  width: 100%;
+  padding: 48px 56px;
+}
+
+@media screen and (max-width: 700px) {
+  .document-page .document-card {
+    padding: 32px 24px;
+  }
+
+  .document-page .links .action {
+    flex-grow: 1;
+  }
+}
+
+/* prefixed with .document-page to outrank VitePress's `.vp-doc h2` and its offset for `.vp-doc [id]` */
+.document-page .document-body h2 {
+  margin: 40px 0 16px;
+  padding-top: 40px;
+  border-top: 1px solid var(--vp-c-divider);
   color: var(--vp-c-text-1);
+  font-size: 1.4rem;
+  line-height: 2rem;
+  letter-spacing: 0;
+  scroll-margin-top: calc(var(--vp-nav-height) + 16px);
 }
 
-.links {
+.document-page .document-body > h2:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+  scroll-margin-top: calc(var(--vp-nav-height) + 57px);
+}
+
+.document-page .links {
   display: flex;
-  flex-direction: row;
-  gap: 16px 16px;
   flex-wrap: wrap;
+  justify-content: center;
+  gap: 16px;
+  margin-top: 64px;
+}
+
+
+/* inside the text, which also takes VitePress's .vp-doc styles: unprefixed, so they do not outrank them */
+
+.document-body * {
+  color: var(--vp-c-text-2);
+}
+
+.document-body > :first-child {
+  margin-top: 0;
+}
+
+.document-body > :last-child {
+  margin-bottom: 0;
+}
+
+.document-body strong {
+  color: var(--vp-c-text-1);
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/license/documents/licenseDocuments.data.ts b/docs/.vitepress/theme/license/documents/licenseDocuments.data.ts
index 337680a9..36bbcc27 100644
--- a/docs/.vitepress/theme/license/documents/licenseDocuments.data.ts
+++ b/docs/.vitepress/theme/license/documents/licenseDocuments.data.ts
@@ -4,9 +4,14 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import MarkdownIt from 'markdown-it'
 
+export interface LegalDocumentMeta {
+    label: string;
+    value: string;
+}
+
 export interface LegalDocument {
-    id: string;
     title: string;
+    meta: LegalDocumentMeta[];
     html: string;
 }
 
@@ -23,6 +28,42 @@ const markdown = new MarkdownIt({
     breaks: true
 });
 
+// Every "## Section" gets an id, so a link can point to it.
+markdown.renderer.rules.heading_open = (tokens, index, options, env, self) => {
+    const token = tokens[index];
+
+    if (token.tag === 'h2') {
+        const title = tokens[index + 1].children
+            .filter(child => child.type === 'text' || child.type === 'code_inline')
+            .map(child => child.content)
+            .join('')
+            .trim();
+
+        // a repeated title gets -1, -2, … as VitePress does
+        const slug = slugify(title);
+        const repeats = env.slugCounts[slug] ?? 0;
+        const id = repeats === 0 ? slug : `${slug}-${repeats}`;
+        env.slugCounts[slug] = repeats + 1;
+
+        token.attrSet('id', id);
+    }
+
+    return self.renderToken(tokens, index, options);
+};
+
+// The same slugs VitePress gives the headings of the other pages
+function slugify(text: string): string {
+    return text
+        .normalize('NFKD')
+        .replace(/[\u0300-\u036F]/g, '')
+        .replace(/[\u0000-\u001f]/g, '')
+        .replace(/[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g, '-')
+        .replace(/-{2,}/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .replace(/^(\d)/, '_$1')
+        .toLowerCase();
+}
+
 export default defineLoader({
     watch: ['./sources/*.md'],
     load(): LegalDocuments {
@@ -35,13 +76,13 @@ export default defineLoader({
         for (const fileName of fileNames) {
             const id = fileName.replace(/\.md$/, '');
             const source = fs.readFileSync(path.join(sourcesDirectory, fileName), 'utf-8');
-            const { title, body } = extractTitle(source);
+            const { title, body: bodyWithMeta } = extractTitle(source);
+            const { meta, body } = extractMeta(bodyWithMeta);
+
+            const env = { slugCounts: {} as Record<string, number> };
+            const html = markdown.render(body, env);
 
-            documents[id] = {
-                id,
-                title,
-                html: markdown.render(body)
-            };
+            documents[id] = { title, meta, html };
         }
 
         return documents;
@@ -55,3 +96,22 @@ function extractTitle(source: string): { title: string; body: string } {
 
     return { title, body: rest.join('\n').trim() };
 }
+
+// Right under the title, every source lists a few facts as "**Label:** value" lines
+// (effective date, version). They are shown in the page header, not in the body.
+function extractMeta(body: string): { meta: LegalDocumentMeta[]; body: string } {
+    const lines = body.split(/\r?\n/);
+    const meta: LegalDocumentMeta[] = [];
+
+    while (lines.length > 0) {
+        const match = lines[0].match(/^\s*\*\*(.+?):\*\*\s*(.*?)\s*$/);
+
+        if (!match)
+            break;
+
+        meta.push({ label: match[1].trim(), value: match[2].trim() });
+        lines.shift();
+    }
+
+    return { meta, body: lines.join('\n').trim() };
+}
diff --git a/docs/.vitepress/theme/paddle.ts b/docs/.vitepress/theme/paddle.ts
index e5bde33c..99f1b0bf 100644
--- a/docs/.vitepress/theme/paddle.ts
+++ b/docs/.vitepress/theme/paddle.ts
@@ -1,21 +1,28 @@
-import type {Paddle} from '@paddle/paddle-js';
+import type {Environments, Paddle} from '@paddle/paddle-js';
 import {useData} from "vitepress";
 
 
 /* Configuration */
 
-const sandboxConfiguration = {
-  isProduction: false,
+interface Configuration {
+  environment: Environments;
+  token: string;
+  professionalLicensePriceId: string;
+  enterpriseLicensePriceId: string;
+}
+
+const sandboxConfiguration: Configuration = {
+  environment: 'sandbox',
   token: 'test_42032b2ff8076c730cbd2680e0d',
-  professionalLicenseId: 'pri_01jv41j5bk9jb3sqxstc8me53x',
-  enterpriseLicenseId: 'pri_01j1j2fx3cnbmf4r1816atx35g',
+  professionalLicensePriceId: 'pri_01jv41j5bk9jb3sqxstc8me53x',
+  enterpriseLicensePriceId: 'pri_01j1j2fx3cnbmf4r1816atx35g',
 };
 
-const productionConfiguration = {
-    isProduction: true,
-    token: 'live_aae6e100288a0ab158a101d61e6',
-    professionalLicenseId: 'pri_01kwq136d75spr88pmq7txaayw',
-    enterpriseLicenseId: 'pri_01kwq14xaqf9kz54jvya86cx6q',
+const productionConfiguration: Configuration = {
+  environment: 'production',
+  token: 'live_aae6e100288a0ab158a101d61e6',
+  professionalLicensePriceId: 'pri_01kwq136d75spr88pmq7txaayw',
+  enterpriseLicensePriceId: 'pri_01kwq14xaqf9kz54jvya86cx6q',
 };
 
 
@@ -28,21 +35,13 @@ const configuration = productionConfiguration;
 
 let paddlePromise: Promise<Paddle | undefined> | null = null;
 
-function loadPaddle(): Promise<Paddle | undefined> {
-  if (typeof window === 'undefined')
-    return Promise.resolve(undefined);
-
-  if (paddlePromise)
-    return paddlePromise;
-
-  paddlePromise = import('@paddle/paddle-js')
-      .then(({initializePaddle}) => {
-
-        return initializePaddle({
-          token: configuration.token,
-          environment: configuration.isProduction ? 'production' : 'sandbox',
-        });
-      })
+/* client only (Layout.vue calls it on mount); a failed load is retried on the next call */
+export function loadPaddle(): Promise<Paddle | undefined> {
+  paddlePromise ??= import('@paddle/paddle-js')
+      .then(({initializePaddle}) => initializePaddle({
+        token: configuration.token,
+        environment: configuration.environment,
+      }))
       .catch(() => {
         paddlePromise = null;
         return undefined;
@@ -51,10 +50,6 @@ function loadPaddle(): Promise<Paddle | undefined> {
   return paddlePromise;
 }
 
-if (typeof window !== 'undefined') {
-  void loadPaddle();
-}
-
 export const usePaddle = () => {
   const {isDark} = useData();
 
@@ -84,7 +79,7 @@ export const usePaddle = () => {
 
   return {
     startCheckout,
-    professionalLicensePriceId: configuration.professionalLicenseId,
-    enterpriseLicensePriceId: configuration.enterpriseLicenseId,
+    professionalLicensePriceId: configuration.professionalLicensePriceId,
+    enterpriseLicensePriceId: configuration.enterpriseLicensePriceId,
   };
 }
diff --git a/docs/.vitepress/theme/plausibleEvents.ts b/docs/.vitepress/theme/plausibleEvents.ts
deleted file mode 100644
index 3369efc7..00000000
--- a/docs/.vitepress/theme/plausibleEvents.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-type PlausibleFn = (event: string, options?: { callback?: () => void }) => void;
-
-declare global {
-  interface Window {
-    plausible?: PlausibleFn & { q?: unknown[] };
-  }
-}
-
-export function trackPlausibleEvent(name: string): void {
-  if (typeof window === 'undefined')
-    return;
-
-  window.plausible?.(name);
-}
\ No newline at end of file
diff --git a/docs/.vitepress/theme/pricing/PricingContact.vue b/docs/.vitepress/theme/pricing/PricingContact.vue
index 88e07f36..399bf9fe 100644
--- a/docs/.vitepress/theme/pricing/PricingContact.vue
+++ b/docs/.vitepress/theme/pricing/PricingContact.vue
@@ -1,28 +1,125 @@
-<script setup>
+<script setup lang="ts">
+
+const resellers = [
+  {
+    name: "SoftwareOne",
+    link: "https://www.softwareone.com/",
+    src: "software-one.svg",
+    size: 38,
+    marginTop: -3
+  },
+  {
+    name: "Insight",
+    link: "https://www.insight.com/",
+    src: "insight.svg",
+    size: 43,
+    marginTop: 3
+  },
+  {
+    name: "SHI",
+    link: "https://www.shi.com/",
+    src: "shi.svg",
+    size: 45,
+    marginTop: -13
+  },
+  {
+    name: "QBS Software",
+    link: "https://www.qbssoftware.com/",
+    src: "qbs-software.svg",
+    size: 56,
+    marginTop: 4
+  }
+];
 
 </script>
 
 <template>
-  <article class="content">
-    <div class="section-header">
-      <h2>Still have questions?</h2>
-      <p class="sub-header">Need further details on licensing, a custom quote, or to place a purchase order? Reach out to our team - we will respond within one business day.</p>
-    </div>
+  <article class="content closing">
+    <section class="panel">
+      <div class="section-header">
+        <h3 class="card-title">Purchase Through Your Preferred Reseller</h3>
+        <p class="card-description">Any software reseller can order QuestPDF for you, with no partner agreement or registration needed. Invoices, purchase orders, and multi-year terms are supported.</p>
+      </div>
+
+      <div class="resellers-list">
+        <a v-for="reseller of resellers" :key="reseller.name" :href="reseller.link" target="_blank">
+          <img :src="'/license/resellers/' + reseller.src"
+              :alt="reseller.name"
+              :style="{ height: reseller.size + 'px', marginTop: reseller.marginTop + 'px' }" />
+        </a>
+      </div>
+    </section>
+
+    <section class="panel">
+      <div class="section-header">
+        <h3 class="card-title">Still have questions?</h3>
+        <p class="card-description">Need further details on licensing, a custom quote, or to place a purchase order? Reach out to our team - we will respond within one business day.</p>
+      </div>
 
-    <a class="action primary" href="mailto:contact@questpdf.com" style="margin-top: 24px;">Contact us</a>
+      <a class="action primary" href="mailto:contact@questpdf.com">Contact us</a>
+    </section>
   </article>
 </template>
 
 <style scoped>
 
-.content {
+.closing {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.closing > .panel {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 860px;
+  margin: 0 auto;
+  text-align: center;
 }
 
 .section-header {
- max-width: 750px;
+  max-width: 750px;
+}
+
+.resellers-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 56px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+}
+
+.resellers-list img {
+  display: block;
+  opacity: 0.85;
+  transition: opacity 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.resellers-list a:hover img {
+  opacity: 1;
+  filter: brightness(0.7);
+  transform: scale(1.08);
+}
+
+html.dark .resellers-list a:hover img {
+  filter: brightness(1.4);
+}
+
+/* touch: grown evenly, so each logo keeps its tuned position */
+@media (pointer: coarse) {
+  .resellers-list a {
+    padding-block: 4px;
+  }
+}
+
+.action {
+  margin-top: 24px;
+  padding-inline: 20px;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/docs/.vitepress/theme/pricing/PricingFaq.vue b/docs/.vitepress/theme/pricing/PricingFaq.vue
index 525d6dbb..ae585604 100644
--- a/docs/.vitepress/theme/pricing/PricingFaq.vue
+++ b/docs/.vitepress/theme/pricing/PricingFaq.vue
@@ -1,167 +1,8 @@
 <script setup lang="ts">
+import { faChevronDown } from "@fortawesome/pro-solid-svg-icons";
+import Icon from "../Icon.vue";
 
-interface FaqItem {
-  question: string;
-  answer: string;
-}
-
-interface FaqCategory {
-  title: string;
-  items: FaqItem[];
-}
-
-const categories: FaqCategory[] = [
-  {
-    title: "Choosing Your License",
-    items: [
-      {
-        question: "Who qualifies for the free Community License?",
-        answer: "The Community License is free for individuals and organisations with annual gross revenue under USD 1,000,000 — with no registration, watermarks, license keys, or time limits. It is also free, regardless of revenue, for qualifying charitable organisations, public or non-profit academic institutions, and open-source projects distributed under an OSI-approved license.\n\nTwo categories are not eligible for the Community License and require a paid license: government and public-sector organisations, except qualifying public academic institutions, and publicly traded companies. The exact eligibility rules are described in the <a href='/license/guide.html'>License Selection Guide</a>."
-      },
-      {
-        question: "What happens if our revenue crosses USD 1,000,000?",
-        answer: "You receive a 90-day transition period, starting at the end of the fiscal year in which your revenue exceeded USD 1,000,000. During that period, you either purchase the appropriate paid license or stop using QuestPDF.\n\nNothing applies retroactively: there are no back-payments, penalties, or fees for the period when you qualified for the Community License."
-      },
-      {
-        question: "Are government and public-sector organisations eligible for the Community License?",
-        answer: "No. Government agencies and public-sector organisations require a paid license, regardless of revenue or non-profit status.\n\nThe main exception is education: public schools, universities, and similar academic institutions may qualify under the academic category when they use QuestPDF for teaching, research, or their own administration.\n\nPublic-sector purchasing is fully supported, including purchase orders, resellers, direct invoicing, and formal procurement workflows. Contact us at contact@questpdf.com and we will help make the process straightforward."
-      },
-      {
-        question: "Can we evaluate QuestPDF before buying?",
-        answer: "Yes. If you qualify for the Community License, you can use QuestPDF for free without an evaluation time limit.\n\nOrganisations that do not qualify may evaluate QuestPDF for up to 60 days for internal testing, technical review, and proof-of-concept work. Production deployment requires either Community eligibility or a paid license."
-      },
-      {
-        question: "We use another library that depends on QuestPDF. Do we need a license?",
-        answer: "Usually not. If your own code does not directly reference or call QuestPDF APIs, and QuestPDF is only used internally by another library or product, you are generally covered as a transitive user.\n\nThis assumes the other library provides substantial functionality of its own and is not merely a thin wrapper around QuestPDF. Government, public-sector, and publicly traded organisations are outside the Community License as categories, so they should contact us at contact@questpdf.com to confirm the correct license."
-      },
-      {
-        question: "Will the Community License stay free?",
-        answer: "Yes. The free Community License is a permanent part of the QuestPDF model. Paid licenses fund full-time development so the free tier can remain available.\n\nThere is also an important legal protection: the license version distributed with a specific QuestPDF release governs that release permanently. Terms for versions you already use cannot change retroactively; any future license change could only apply to future releases."
-      }
-    ]
-  },
-  {
-    title: "Professional vs Enterprise",
-    items: [
-      {
-        question: "How many developers does a paid license cover?",
-        answer: "Unlimited. Every paid QuestPDF license covers an unlimited number of developers, with no seat-counting and no per-developer fees.\n\nThe same license may be used across your development, testing, staging, CI/CD, and production environments. Your cost does not increase with team size, server count, deployment count, or document volume."
-      },
-      {
-        question: "Which tier do we need — Professional or Enterprise?",
-        answer: "Professional is the right choice for most companies. It covers one legal entity, unlimited developers, unlimited projects, unlimited applications, and unlimited deployments.\n\nProfessional includes the same QuestPDF features as Enterprise. You do not need Enterprise because of team size, number of applications, number of servers, or document volume."
-      },
-      {
-        question: "When should we choose Enterprise?",
-        answer: "Choose Enterprise when you need one license to cover multiple affiliated legal entities, or when your organisation requires enterprise purchasing and continuity terms.\n\nEnterprise covers affiliates connected by more than 50% ownership or control. It also adds a next-business-day first-response target for support, priority handling of business-critical issues, stronger continuity commitments, and procurement options such as Order Forms, purchase orders, direct invoicing, supplier onboarding, and multi-year terms."
-      },
-      {
-        question: "Does one Professional License cover subsidiaries or sister companies?",
-        answer: "No. A Professional License covers one legal entity only.\n\nIf several related companies need to use QuestPDF, each entity can buy its own Professional License, or one entity can buy an Enterprise License that covers the whole affiliated group. This is the main structural difference between Professional and Enterprise."
-      }
-    ]
-  },
-  {
-    title: "Pricing & Renewals",
-    items: [
-      {
-        question: "Is this a subscription or a perpetual license?",
-        answer: "It is a perpetual license with an annually renewable updates and support term.\n\nWhen you buy a paid license, you receive the permanent right to use every QuestPDF version released during your paid term. The first 12 months of updates and support are included. Renewing keeps new releases and support active, but the versions you already received remain yours to use permanently."
-      },
-      {
-        question: "What happens if we do not renew?",
-        answer: "You keep the software permanently. Your license to every QuestPDF version released during your paid term does not expire, continues to cover production use, and survives non-renewal.\n\nOnly access to new releases and ongoing support pauses. Nothing is disabled, no license key expires, and the library does not call back to our servers."
-      },
-      {
-        question: "What does renewal cost, and can the price increase?",
-        answer: "Your renewal price is your <a href='/license/professional-enterprise.html'>Locked Renewal Price</a>: the price paid for your current term. There is no separate renewal surcharge.\n\nIf you buy at the price shown on this page and keep renewing continuously, that price becomes your renewal price for future terms, and we will not increase it for as long as you keep renewing.\n\nA renewal completed within 30 days after the previous term ends still counts as continuous. If the license lapses for more than 30 days, the price lock ends, and a later purchase is made at then-current pricing. Reseller fees or markups are outside our control and are not covered by the price lock."
-      },
-      {
-        question: "Does the license renew automatically, and how do we cancel?",
-        answer: "Licenses purchased through the website renew automatically every 12 months unless cancelled. You can cancel through the Customer Portal, using the link in your purchase or renewal emails, or by contacting us at contact@questpdf.com.\n\nLicenses purchased under a signed Order Form or direct invoice do not renew automatically; each new term is handled as a separate order. Cancelling renewal never affects your perpetual right to use versions you already received."
-      },
-      {
-        question: "I bought before the pricing change. Does the new pricing affect my renewal?",
-        answer: "No. Existing customers keep their current renewal price for as long as they renew continuously.\n\nYou also benefit from the updated license model: any previous developer-count limit no longer applies, and your paid license now covers unlimited developers under the licensed legal entity or, for Enterprise, the licensed affiliated group."
-      },
-      {
-        question: "Is there a money-back guarantee?",
-        answer: "Yes. Paid licenses include a 30-day satisfaction guarantee. If QuestPDF is not a good fit, contact us within 30 days after purchase for a full refund.\n\nA refund closes the corresponding license, so it works like returning a product: money back, license rights ended. After the 30-day period, fees are non-refundable except where required by law."
-      }
-    ]
-  },
-  {
-    title: "Deployment & Security",
-    items: [
-      {
-        question: "Can we use QuestPDF in a SaaS, cloud, or web application?",
-        answer: "Yes. QuestPDF can be used in server-side, cloud, SaaS, on-premises, desktop, and internal business applications.\n\nThere are no per-server, per-instance, per-customer, or per-document fees. Production use requires either Community License eligibility or a paid license."
-      },
-      {
-        question: "Can we ship QuestPDF inside our own product?",
-        answer: "Yes. Every license tier allows you to redistribute QuestPDF as a compiled component of your own application, royalty-free.\n\nYour customers and end users do not need their own QuestPDF licenses just to run the software you built. The key restriction is that QuestPDF must be embedded inside your application, not offered as a standalone PDF-generation library or API for others to build against."
-      },
-      {
-        question: "Do we need extra licenses for CI/CD, build servers, staging, or testing?",
-        answer: "No. Paid licenses cover your development workflow, including CI/CD pipelines, build servers, automated tests, development machines, staging environments, and production deployments.\n\nQuestPDF is licensed by eligibility and legal-entity scope, not by machines, environments, users, servers, or build agents."
-      },
-      {
-        question: "Does QuestPDF collect telemetry or perform online license checks?",
-        answer: "No. The QuestPDF library runs entirely inside your application process. It makes no network calls to us, collects no telemetry, performs no online activation, and does not transmit your documents, customer data, or application data.\n\nThere are no license keys, activation servers, or remote checks that could disable your application."
-      },
-      {
-        question: "Will we be audited?",
-        answer: "No routine audits. QuestPDF licensing is based on good-faith self-certification.\n\nThe library contains no technical enforcement mechanism. If we ever have a concrete reason to believe a license is being used outside its scope, we may ask an authorised representative for written confirmation of compliance, with reasonable notice. We do not want developers to fear license enforcement while evaluating or using the product."
-      }
-    ]
-  },
-  {
-    title: "Client Work",
-    items: [
-      {
-        question: "We are building software for a client. Whose license covers the project?",
-        answer: "Usually the client's. The required license is determined by the entity that ultimately owns, controls, commercially uses, or receives the primary business benefit from the application.\n\nIf the client qualifies for the Community License, no paid license is needed. If the client does not qualify, the client needs a paid Professional or Enterprise License. Agency developers, contractors, and freelancers working on that client's QuestPDF integration are covered by the client's license."
-      },
-      {
-        question: "I am a freelancer. Is QuestPDF free for my client work?",
-        answer: "It depends on the client. Your own projects are free while your annual gross revenue remains under USD 1,000,000.\n\nClient projects follow the client's eligibility, because the client normally owns and benefits from the application. A client who qualifies for the Community License can use QuestPDF for free. A client who does not qualify needs their own paid license, even if you are the developer implementing the integration."
-      }
-    ]
-  },
-  {
-    title: "Purchasing & Legal Review",
-    items: [
-      {
-        question: "Can we pay by invoice or purchase order?",
-        answer: "Yes. Professional and Enterprise licenses can be purchased by card, invoice, purchase order, direct invoice, reseller, or signed Order Form, depending on your procurement needs.\n\nWebsite purchases are usually fastest. For formal procurement, supplier onboarding, custom Order Forms, or multi-year terms, contact us at contact@questpdf.com."
-      },
-      {
-        question: "Why does Paddle appear at checkout and on the invoice?",
-        answer: "Paddle is our Merchant of Record for website purchases. Paddle processes the payment, issues the invoice, calculates and remits applicable taxes, and handles payment-related administration.\n\nQuestPDF grants the license, provides the software, and delivers product support. Your license terms are still the QuestPDF license terms, even when Paddle appears as the seller or billing entity on the invoice."
-      },
-      {
-        question: "How do we purchase under a company name or add a VAT/Tax number?",
-        answer: "During checkout, please enter your email address, click the \"Add tax number\" button, and then fill in the fields for your company name, VAT or other tax identification number, and billing address.\n\nPaddle, our payment provider and Merchant of Record, then issues a tax-compliant corporate invoice. For eligible B2B transactions, such as EU cross-border purchases with a valid VAT number, a reverse charge may apply and VAT will not be added. Where reverse charge does not apply, Paddle adds the tax required for your jurisdiction.\n\nIf you already completed the purchase: You can still add your company details and generate a corporate invoice using the \"View Invoice\" link provided in your receipt email. If you need further assistance, contact us at contact@questpdf.com and we will help coordinate it.\n\nIf your organisation requires a purchase order, direct invoice, supplier onboarding, signed Order Form, or another formal procurement process, contact us at contact@questpdf.com and we will help arrange the purchase."
-      },
-      {
-        question: "We are a reseller buying for a client. Who becomes the licensee?",
-        answer: "The end customer. Unless a signed Order Form says otherwise, the license is granted to the client named in the order, quote, invoice, or license confirmation document, not to the reseller processing the purchase.\n\nPlease enter the client's legal entity accurately, because that record defines who holds the license. License rights depend on the transaction remaining valid; if the purchase is refunded, reversed, charged back, cancelled, or unpaid, the corresponding license rights end. If anything is unclear during procurement, contact us and we will help make the order correct."
-      },
-      {
-        question: "Is QuestPDF open source?",
-        answer: "QuestPDF is source-available commercial software. The complete source code is public on GitHub, so you can inspect, audit, debug, and understand the library.\n\nHowever, your right to use QuestPDF comes from one of our licenses, including the free Community License, not from an OSI-approved open-source license such as MIT. This model lets us keep the source visible while funding full-time development and long-term support."
-      },
-      {
-        question: "Is QuestPDF safe to depend on long-term?",
-        answer: "Yes. The license model is designed to reduce long-term operational risk.\n\nPaid licenses are perpetual for versions released during your paid term. The library has no license server, no telemetry, no activation, and no remote shutdown mechanism. The source code is publicly available for review and debugging. Enterprise customers also receive stronger continuity commitments, including advance notice before any general discontinuation of the paid product."
-      },
-      {
-        question: "Where can we find the exact legal terms?",
-        answer: "All current legal documents are public at <a href='/license/'>questpdf.com/license</a>.\n\nThe <a href='/license/professional-enterprise.html'>Professional / Enterprise License</a> contains the full paid license terms. The <a href='/license/community.html'>Community License</a> governs free use. The <a href='/license/guide.html'>License Selection Guide</a> explains eligibility. Website purchases are also subject to the <a href='/terms-of-service.html'>Terms of Service</a>.\n\nThis FAQ is a practical summary. If this FAQ and a license document ever differ, the license document controls."
-      }
-    ]
-  }
-];
+import { faqCategories as categories } from "./faq";
 
 </script>
 
@@ -169,18 +10,20 @@ const categories: FaqCategory[] = [
   <article class="content">
     <div class="section-header">
       <h2>Frequently Asked Questions</h2>
-      <p class="sub-header">Straight answers about licensing, renewals, and compliance.</p>
     </div>
 
     <div class="faq-categories">
       <section v-for="category of categories" :key="category.title" class="faq-category">
-        <h3 class="faq-category-title">{{ category.title }}</h3>
+        <div class="faq-category-header">
+          <h3 class="faq-category-title">{{ category.title }}</h3>
+          <p class="faq-category-description">{{ category.description }}</p>
+        </div>
 
-        <div class="faq-list">
+        <div class="panel faq-list">
           <details v-for="item of category.items" :key="item.question" class="faq-item">
             <summary class="faq-question">
               <span>{{ item.question }}</span>
-              <i class="fa-solid fa-chevron-down faq-chevron"></i>
+              <Icon class="faq-chevron" :icon="faChevronDown" />
             </summary>
             <p class="faq-answer" v-html="item.answer"></p>
           </details>
@@ -193,52 +36,63 @@ const categories: FaqCategory[] = [
 <style scoped>
 
 .faq-categories {
-  --faq-accent: #2196F3;
+  --faq-accent: light-dark(#1976D2, #2196F3);
 
   display: flex;
   flex-direction: column;
-  gap: 40px;
+  gap: 32px;
 
-  align-self: center;
   width: 100%;
-  max-width: 850px;
+  max-width: 1180px;
   margin: 40px auto 0;
 }
 
+.faq-category {
+  display: grid;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 56px;
+}
+
+.faq-category-header {
+  display: flex;
+  flex-direction: column;
+  padding-top: 22px;
+  text-align: right;
+}
+
 .faq-category-title {
-  margin: 0 0 14px;
-  padding-left: 32px;
+  line-height: 1.75rem;
+  font-weight: 700;
+}
+
+.faq-category-description {
+  margin: 6px 0 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--vp-c-text-2);
 }
 
 .faq-list {
+  align-self: start;
   display: flex;
   flex-direction: column;
   width: 100%;
-
-  border: 1px solid #8882;
-  border-radius: 16px;
-  background-color: var(--vp-c-bg);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 0;
   overflow: hidden;
 }
 
-.faq-item {
-  /* transparent shadow so the accent bar can fade in via transition */
-  box-shadow: inset 0 0 0 transparent;
-  transition: box-shadow 0.2s ease, background-color 0.2s ease;
-}
-
 .faq-item:not(:last-child) {
   border-bottom: 1px solid var(--vp-c-divider);
 }
 
-.faq-item:hover,
+/* a shadow, so opening an item does not push its text sideways; positioned to paint above the panel's rim */
 .faq-item[open] {
-  background-color: #2196F308;
+  position: relative;
+  box-shadow: inset 4.5px 0 0 var(--faq-accent);
 }
 
-.faq-item[open] {
-  box-shadow: inset 4px 0 0 var(--faq-accent);
+html.dark .faq-item[open] {
+  box-shadow: inset 3px 0 0 var(--faq-accent);
 }
 
 .faq-question {
@@ -247,14 +101,26 @@ const categories: FaqCategory[] = [
   justify-content: space-between;
   gap: 16px;
 
-  padding: 24px 24px 24px 32px;
+  padding: 24px 32px;
   cursor: pointer;
   list-style: none;
 
   font-size: 1rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: color 0.2s ease;
+  transition: background-color 0.2s ease;
+}
+
+/* a tap leaves :hover stuck on touch screens, which would keep the row tinted */
+@media (hover: hover) {
+  .faq-question:hover {
+    background-color: color-mix(in srgb, var(--faq-accent) 5%, transparent);
+  }
+}
+
+/* older Safari draws its disclosure triangle through this pseudo-element, whatever the display */
+.faq-question::-webkit-details-marker {
+  display: none;
 }
 
 .faq-item[open] .faq-question {
@@ -264,7 +130,7 @@ const categories: FaqCategory[] = [
 
 .faq-chevron {
   flex-shrink: 0;
-  font-size: 0.875rem;
+  font-size: 1rem;
   color: var(--vp-c-text-2);
   transition: transform 0.2s ease;
 }
@@ -274,28 +140,45 @@ const categories: FaqCategory[] = [
   transform: rotate(180deg);
 }
 
+/* the answers in faq.ts separate their paragraphs with a blank line, which is kept */
 .faq-answer {
   padding: 0 32px 24px 32px;
-  margin: 0;
   max-width: 85ch;
   color: var(--vp-c-text-1);
-}
-
-.faq-answer :deep(a) {
-  color: var(--vp-c-brand-1);
+  white-space: pre-line;
 }
 
 .faq-answer :deep(a:hover) {
   text-decoration: underline;
 }
 
+@media screen and (max-width: 1200px) {
+  .faq-category {
+    grid-template-columns: 220px minmax(0, 1fr);
+    gap: 40px;
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .faq-category {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .faq-category-header {
+    padding: 0 32px;
+    text-align: left;
+  }
+}
+
 @media screen and (max-width: 700px) {
-  .faq-category-title {
-    padding-left: 20px;
+  .faq-category-header {
+    padding: 0 20px;
   }
 
   .faq-question {
-    padding: 20px;
+    padding: 24px 20px;
   }
 
   .faq-answer {
diff --git a/docs/.vitepress/theme/pricing/PricingIndex.vue b/docs/.vitepress/theme/pricing/PricingIndex.vue
index d1472d41..4c61fc07 100644
--- a/docs/.vitepress/theme/pricing/PricingIndex.vue
+++ b/docs/.vitepress/theme/pricing/PricingIndex.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="custom-page">
-    <div class="container reverse-background">
+  <div class="custom-page pricing-page texture-dots">
+    <div class="container">
       <pricing-tiers />
     </div>
 
-    <div class="container">
-      <pricing-resellers />
-    </div>
+    <div class="dotted-divider"></div>
 
-    <div class="container reverse-background">
+    <div class="container">
       <pricing-faq />
     </div>
 
+    <div class="dotted-divider"></div>
+
     <div class="container">
       <pricing-contact />
     </div>
@@ -21,12 +21,30 @@
 <script setup lang="ts">
 
 import PricingTiers from "./PricingTiers.vue";
-import PricingContact from "./PricingContact.vue";
-import PricingResellers from "./PricingResellers.vue";
 import PricingFaq from "./PricingFaq.vue";
+import PricingContact from "./PricingContact.vue";
 
 </script>
 
-<style scoped>
+<style>
+
+.custom-page.pricing-page > .dotted-divider {
+  width: calc(100% - 2 * var(--custom-page-gutter));
+  max-width: calc(var(--custom-page-width) - 2 * var(--custom-page-gutter));
+  margin: 0 auto;
+}
+
+.pricing-page .content {
+  padding-top: 48px;
+  padding-bottom: 48px;
+}
+
+.pricing-page > .container:first-child .content {
+  padding-top: 64px;
+}
+
+.pricing-page > .container:last-child .content {
+  padding-bottom: 64px;
+}
 
 </style>
diff --git a/docs/.vitepress/theme/pricing/PricingResellers.vue b/docs/.vitepress/theme/pricing/PricingResellers.vue
deleted file mode 100644
index 73a7854b..00000000
--- a/docs/.vitepress/theme/pricing/PricingResellers.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup>
-
-const resellers = [
-  {
-    name: "SoftwareOne",
-    link: "https://www.softwareone.com/",
-    src: "software-one.svg",
-    size: 40,
-    marginTop: -2
-  },
-  {
-    name: "Insight",
-    link: "https://www.insight.com/",
-    src: "insight.svg",
-    size: 46,
-    marginTop: 2
-  },
-  {
-    name: "SHI",
-    link: "https://www.shi.com/",
-    src: "shi.svg",
-    size: 48,
-    marginTop: -14
-  },
-  {
-    name: "QBS Software",
-    link: "https://www.qbssoftware.com/",
-    src: "qbs-software.svg",
-    size: 60,
-    marginTop: 4
-  }
-];
-
-</script>
-
-<template>
-  <section class="content">
-    <div class="section-header">
-      <h2>Purchase Through Your Preferred Reseller</h2>
-      <p class="sub-header">QuestPDF works with software resellers worldwide, including SoftwareOne, Insight, SHI, and QBS — other distributors are welcome, no partner agreement or registration needed.</p>
-    </div>
-
-    <div class="resellers-list">
-      <template v-for="reseller of resellers" :key="reseller.name">
-        <a :href="reseller.link" target="_blank">
-          <img :src="'/license/resellers/' + reseller.src"
-              :alt="reseller.name"
-              :style="{ height: reseller.size + 'px', marginTop: reseller.marginTop + 'px' }" />
-        </a>
-      </template>
-    </div>
-
-    <div class="reseller-instructions">
-      <p>Payment by invoice and purchase order is supported, including multi-year terms.</p>
-      <p>Resellers and procurement teams: <a href="mailto:contact@questpdf.com">request a quote</a></p>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-
-.resellers-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 48px 64px;
-  justify-content: center;
-  align-items: center;
-  margin-top: 64px;
-}
-
-.section-header {
-  max-width: 860px;
-}
-
-.reseller-instructions {
-  margin-top: 64px;
-
-  p {
-    text-align: center;
-    color: var(--vp-c-text-3);
-  }
-
-  a {
-    color: inherit !important;
-    text-decoration: underline;
-  }
-
-  a:hover {
-    color: var(--vp-c-text-2) !important;
-  }
-}
-
-</style>
diff --git a/docs/.vitepress/theme/pricing/PricingTiers.vue b/docs/.vitepress/theme/pricing/PricingTiers.vue
index 86a0d88e..fe4f975b 100644
--- a/docs/.vitepress/theme/pricing/PricingTiers.vue
+++ b/docs/.vitepress/theme/pricing/PricingTiers.vue
@@ -5,8 +5,8 @@
     </header>
 
     <div class="license-tiers">
-      <section v-for="license of licenses" :key="license.name" class="license-tier card" :class="license.name">
-        <div class="tag"><i class="fa-solid fa-star"></i>Most Popular</div>
+      <section v-for="license of licenses" :key="license.name" class="license-tier panel" :class="license.name">
+        <div v-if="license.name === 'professional'" class="tag"><Icon :icon="faStar" />Most Popular</div>
 
         <header>
           <div class="tier-name">{{ license.name }}</div>
@@ -16,9 +16,7 @@
             <span class="price-tax">+ local tax</span>
           </div>
 
-          <div v-else>
-            <p class="price-value price-free">Free forever</p>
-          </div>
+          <p v-else class="price-value price-free">Free forever</p>
 
           <div class="tier-description" v-html="license.description" />
         </header>
@@ -27,14 +25,15 @@
 
         <div class="details">
           <div v-for="detail of license.details" :key="detail" class="details-item">
-            <i class="fa-duotone fa-square-check"></i>
+            <Icon class="check-icon" :icon="faSquareCheck" />
             <p>{{ detail }}</p>
           </div>
         </div>
 
-        <a v-if="license.price" class="action" @click="paddle.startCheckout(license.paddlePriceId)">
+        <!-- a button: it opens the checkout overlay, it does not go anywhere -->
+        <button v-if="license.price" type="button" class="action" @click="paddle.startCheckout(license.paddlePriceId)">
           Purchase License
-        </a>
+        </button>
         <a v-else class="action" href="/quick-start.html">Get Started</a>
 
         <p class="footnote" v-html="license.footnote" />
@@ -44,8 +43,12 @@
 </template>
 
 <script setup lang="ts">
+import { faStar } from "@fortawesome/pro-solid-svg-icons";
+import { faSquareCheck } from "@fortawesome/pro-duotone-svg-icons";
+import Icon from "../Icon.vue";
 
 import {usePaddle} from "../paddle";
+import {licensePrices} from "./prices";
 
 const paddle = usePaddle();
 
@@ -80,7 +83,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",
-  price: 1999,
+  price: licensePrices.professional,
   paddlePriceId: paddle.professionalLicensePriceId,
   details: [
     "Perpetual license for entire company",
@@ -98,7 +101,7 @@ const ProfessionalLicense: License = {
 const EnterpriseLicense: License = {
   name: "enterprise",
   description: "For corporate groups that need affiliate-wide coverage, priority support, reduced risk, and procurement-friendly terms",
-  price: 4999,
+  price: licensePrices.enterprise,
   paddlePriceId: paddle.enterpriseLicensePriceId,
   details: [
     "Everything in Professional",
@@ -119,13 +122,7 @@ const licenses = [
 
 </script>
 
-<style scoped lang="scss">
-
-/* Page layout */
-
-.content {
-  padding-top: 48px;
-}
+<style scoped>
 
 @media screen and (max-width: 450px) {
   h1 {
@@ -140,95 +137,111 @@ const licenses = [
 }
 
 
-/* Tier grid
-   Desktop: three equal columns; each card is a subgrid spanning six shared
-   row tracks, so every section starts at the same height across all cards.
-   Children are pinned to their rows explicitly because the tag is rendered
-   only on the professional card — auto-placement would shift the rows of
-   the other two. */
+/* Each card is a subgrid of six shared rows, so sections line up across the cards; the children are pinned to their
+   rows because only the professional card has the tag. */
 
 .license-tiers {
-  margin-top: 16px;
+  margin-top: 28px;
 
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  grid-template-rows: repeat(6, auto); // tag, header, divider, details, action, footnote
+  grid-template-rows: repeat(6, auto); /* tag, header, divider, details, action, footnote */
+  gap: 0 32px;
 }
 
-.license-tiers .license-tier {
-  position: relative;
+/* the inset is a token so the badge can reach the card's edges */
+.license-tier {
+  --tier-padding: clamp(24px, 7.5vw - 48px, 48px);
+
   display: grid;
   grid-template-rows: subgrid;
   grid-row: span 6;
   justify-items: start;
   align-items: start;
+  padding: var(--tier-padding);
 }
 
 .license-tier .tag { grid-row: 1; }
 .license-tier header { grid-row: 2; }
 .license-tier hr { grid-row: 3; }
 .license-tier .details { grid-row: 4; }
-.license-tier a.action { grid-row: 5; }
+.license-tier .action { grid-row: 5; }
 .license-tier .footnote { grid-row: 6; }
 
+.license-tier hr {
+  margin: 32px 0;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider);
+  width: 100%
+}
 
-/* Card frames
-   The three cards read as one joined unit: the outer cards drop their inner
-   corner radii and are inset vertically, while the professional card in the
-   middle stays full height and elevated. */
 
 .license-tier.professional {
-  border: 3px solid #2196F355;
-  border-radius: 24px;
-  box-shadow: 0 4px 16px rgba(33, 150, 243, 0.2) !important;
+  border: 2px solid light-dark(#2196F3, #3D8BD4);
+  box-shadow:
+      var(--surface-edge),
+      0 0 0 6px color-mix(in srgb, #2196F3 10%, transparent),
+      0 24px 48px -24px color-mix(in srgb, #2196F3 35%, transparent);
   z-index: 1;
 }
 
+html.dark .license-tier.professional {
+  background-color: color-mix(in srgb, #2196F3 3%, var(--surface));
+  box-shadow: 0 24px 48px -24px color-mix(in srgb, #3D8BD4 22%, transparent);
+}
+
+/* the glass rim sits inside the 2px border, so its corners are 2px tighter than the card's */
+.license-tier.professional::before {
+  border-radius: 30px;
+}
+
 .license-tier.community {
-  border-radius: 24px 0 0 24px;
-  margin: 32px 0;
+  border-radius: 32px 0 0 32px;
+  margin: 48px 0;
 }
 
 .license-tier.enterprise {
-  border-radius: 0 24px 24px 0;
-  margin: 32px 0;
+  border-radius: 0 32px 32px 0;
+  margin: 48px 0;
 }
 
 
-/* "Most Popular" tag */
-
-.license-tier:not(.professional) .tag {
-  display: none;
-}
+/* The badge fills the 46px by which the professional card rises above its neighbours; the tracked capitals need a
+   wider word space, or "MOST POPULAR" runs together. */
+.license-tier .tag {
+  justify-self: stretch;
+  margin: calc(-1 * var(--tier-padding)) calc(-1 * var(--tier-padding)) 0;
+  height: 46px;
+  border-radius: 30px 30px 0 0;
 
-.license-tier.professional .tag {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 12px;
-  height: 32px;
-  transform: translateY(-8px);
+  white-space: nowrap;
 
-  color: #2196F3;
-  font-size: 0.8125rem;
-  font-weight: 600;
+  color: light-dark(#2196F3, #7CC4FF);
+  background-color: light-dark(#FFFFFF, transparent);
+  box-shadow: inset 0 -2px 0 light-dark(rgba(33, 150, 243, 0.2), rgba(100, 181, 246, 0.14));
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1;
   text-transform: uppercase;
   letter-spacing: 1px;
-  word-spacing: 3px;
+  word-spacing: 4px;
 }
 
-.license-tier.professional .tag .fa-star {
-  color: #2196F3;
-  font-size: 0.875rem;
+.license-tier .tag .icon {
+  font-size: 1rem;
+  color: light-dark(#2196F3, #7CC4FF);
 }
 
-html.dark .license-tier.professional .tag,
-html.dark .license-tier.professional .tag .fa-star {
-  color: #64B5F6;
+html.dark .license-tier .tag {
+  gap: 10px;
+  font-weight: 600;
 }
 
 
-/* Card header: tier name, price, description */
-
 .license-tier header {
   display: flex;
   flex-direction: column;
@@ -237,7 +250,7 @@ html.dark .license-tier.professional .tag .fa-star {
 }
 
 .license-tier .tier-name {
-  border-radius: 128px;
+  border-radius: 12px;
   padding: 6px 24px;
   font-weight: 600;
   text-transform: uppercase;
@@ -246,48 +259,34 @@ html.dark .license-tier.professional .tag .fa-star {
 }
 
 .license-tier.community .tier-name {
-  background-color: #67B84D33;
-  color: #1B5E20;
+  background-color: light-dark(#67B84D33, #4CAF5022);
+  color: light-dark(#1B5E20, #A5D6A7);
 }
 
 .license-tier.professional .tier-name {
-  background-color: #2196F3;
+  background-color: light-dark(#2196F3, #1976D2);
   color: white;
 }
 
 .license-tier.enterprise .tier-name {
-  background-color: #212121;
-  color: white;
-}
-
-html.dark {
-  .license-tier.community .tier-name {
-    background-color: #4CAF5022;
-    color: #A5D6A7;
-  }
-
-  .license-tier.professional .tier-name {
-    background-color: #1976D2;
-    color: white;
-  }
-
-  .license-tier.enterprise .tier-name {
-    background-color: #EEEEEE;
-    color: #212121;
-  }
+  background-color: light-dark(#212121, #EEEEEE);
+  color: light-dark(white, #212121);
 }
 
 .license-tier .price-value {
   font-size: 2.25rem;
   line-height: 2.25rem;
   font-weight: 700;
-  color: var(--vp-c-text-1) !important;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  color: var(--vp-c-text-1);
 }
 
 .license-tier .price-tax {
   margin-left: 8px;
   font-weight: 400;
-  color: var(--vp-c-text-1) !important;
+  color: var(--vp-c-text-1);
+  white-space: nowrap;
 }
 
 .license-tier .price-free {
@@ -296,17 +295,14 @@ html.dark {
 
 .license-tier .tier-description {
   color: var(--vp-c-text-2);
-  font-size: 0.9375rem;
+  font-size: 1rem;
   line-height: 1.5rem;
 }
 
 
-/* Details list */
-
 .details {
   display: flex;
   flex-direction: column;
-  align-items: stretch;
   gap: 16px;
 }
 
@@ -316,100 +312,84 @@ html.dark {
   gap: 12px;
 }
 
-.details-item i.fa-square-check {
+.check-icon {
   width: 24px;
+  font-size: 24px;
+  --fa-secondary-opacity: 0.2;
 }
 
 .details-item p {
-  color: var(--vp-c-text-1) !important;
-  line-height: 1.5rem;
-  font-size: 1rem;
+  color: var(--vp-c-text-1);
 }
 
-.license-tier.community .fa-square-check {
-  --fa-primary-color: #67B84D;
-  --fa-secondary-color: #67B84D;
+.license-tier.community .check-icon {
+  --fa-primary-color: light-dark(#67B84D, #81C784);
+  --fa-secondary-color: light-dark(#67B84D, #81C784);
 }
 
-.license-tier.enterprise .fa-square-check {
-  --fa-primary-color: transparent;
-  --fa-secondary-color: #444;
+.license-tier.professional .check-icon {
+  --fa-primary-color: white;
+  --fa-secondary-color: light-dark(#2196F3, #1976D2);
   --fa-secondary-opacity: 1.0;
 }
 
-html.dark {
-  .license-tier.community .fa-square-check {
-    --fa-primary-color: #81C784;
-    --fa-secondary-color: #81C784;
-  }
-
-  .license-tier.enterprise .fa-square-check {
-    --fa-primary-color: #444;
-    --fa-secondary-color: white;
-  }
+.license-tier.enterprise .check-icon {
+  --fa-primary-color: light-dark(transparent, #444);
+  --fa-secondary-color: light-dark(#444, white);
+  --fa-secondary-opacity: 1.0;
 }
 
 
-/* Action button */
-
-.license-tier a.action {
+.license-tier .action {
   justify-self: stretch;
-  text-align: center;
   margin-top: 32px;
 }
 
+/* see CustomPages.css for --fill */
 .license-tier.professional .action {
-  background-color: #2196F3;
-  color: white;
+  --fill: #1976D2;
+
+  color: #FFF;
+  background-color: var(--fill);
+  box-shadow: var(--filled-edge);
 }
 
 .license-tier.professional .action:hover {
-  background-color: #42A5F5;
-  color: white;
+  background-color: light-dark(#1565C0, #1E88E5);
 }
 
 .license-tier.enterprise .action {
-  background-color: #212121;
-  color: white;
-}
-
-html.dark {
-  .license-tier.enterprise .action {
-    background-color: #EEEEEE;
-    color: #212121;
-  }
+  --fill: light-dark(#212121, #EEEEEE);
 
-  .license-tier.enterprise .action:hover {
-    background-color: white;
-  }
+  color: light-dark(white, #212121);
+  background-color: var(--fill);
+  box-shadow: var(--filled-edge);
 }
 
+.license-tier.enterprise .action:hover {
+  background-color: light-dark(#000000, #FFFFFF);
+}
 
-/* Footnote */
 
 .license-tier .footnote {
-  place-self: normal; // stretch across the column so the centered text aligns with the button above
+  place-self: normal;
   text-align: center;
   margin-top: 16px;
 
-  font-size: 0.8125em;
-  line-height: 1.5;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: var(--vp-c-text-2);
+}
 
-  :deep(a) {
-    color: var(--vp-c-text-2);
-    text-decoration: underline;
-  }
-
-  :deep(a):hover {
-    color: var(--vp-c-text-1);
-  }
+.license-tier .footnote :deep(a) {
+  color: var(--vp-c-text-2);
+  text-decoration: underline;
 }
 
+.license-tier .footnote :deep(a:hover) {
+  color: var(--vp-c-text-1);
+}
 
-/* Stacked layout: below the width where three cards fit comfortably,
-   cards form a single centered column and the joined-card styling
-   (flat inner corners, vertical inset margins) is reset. */
 
 @media screen and (max-width: 960px) {
   .license-tiers {
@@ -419,16 +399,24 @@ html.dark {
     gap: 32px;
   }
 
-  .license-tiers .license-tier {
-    grid-template-rows: auto; // subgrid has no parent grid here
+  .license-tier {
+    --tier-padding-block: clamp(32px, 22.4px + 1.38vw, 40px);
+    --tier-padding-inline: clamp(24px, 4.7px + 2.76vw, 40px);
+
+    grid-template-rows: auto; /* subgrid has no parent grid here */
     width: 100%;
     max-width: 560px;
+    padding: var(--tier-padding-block) var(--tier-padding-inline);
+  }
+
+  .license-tier .tag {
+    margin: calc(-1 * var(--tier-padding-block)) calc(-1 * var(--tier-padding-inline)) var(--tier-padding-block);
   }
 
   .license-tier.community,
   .license-tier.enterprise {
     margin: 0;
-    border-radius: 24px;
+    border-radius: 32px;
   }
 }
 
diff --git a/docs/.vitepress/theme/pricing/faq.ts b/docs/.vitepress/theme/pricing/faq.ts
new file mode 100644
index 00000000..6b132433
--- /dev/null
+++ b/docs/.vitepress/theme/pricing/faq.ts
@@ -0,0 +1,172 @@
+/* The pricing page FAQ: questions grouped by topic. Rendered by PricingFaq.vue. */
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+export interface FaqCategory {
+  title: string;
+  /* one line naming the topics the group's questions cover, shown under the title */
+  description: string;
+  items: FaqItem[];
+}
+
+export const faqCategories: FaqCategory[] = [
+  {
+    title: "Choosing Your License",
+    description: "Free use, growing past the limit, and evaluating before you buy.",
+    items: [
+      {
+        question: "Who qualifies for the free Community License?",
+        answer: "The Community License is free for individuals and organisations with annual gross revenue under USD 1,000,000 — with no registration, watermarks, license keys, or time limits. It is also free, regardless of revenue, for qualifying charitable organisations, public or non-profit academic institutions, and open-source projects distributed under an OSI-approved license.\n\nTwo categories are not eligible for the Community License and require a paid license: government and public-sector organisations, except qualifying public academic institutions, and publicly traded companies. The exact eligibility rules are described in the <a href='/license/guide.html'>License Selection Guide</a>."
+      },
+      {
+        question: "What happens if our revenue crosses USD 1,000,000?",
+        answer: "You receive a 90-day transition period, starting at the end of the fiscal year in which your revenue exceeded USD 1,000,000. During that period, you either purchase the appropriate paid license or stop using QuestPDF.\n\nNothing applies retroactively: there are no back-payments, penalties, or fees for the period when you qualified for the Community License."
+      },
+      {
+        question: "Are government and public-sector organisations eligible for the Community License?",
+        answer: "No. Government agencies and public-sector organisations require a paid license, regardless of revenue or non-profit status.\n\nThe main exception is education: public schools, universities, and similar academic institutions may qualify under the academic category when they use QuestPDF for teaching, research, or their own administration.\n\nPublic-sector purchasing is fully supported, including purchase orders, resellers, direct invoicing, and formal procurement workflows. Contact us at contact@questpdf.com and we will help make the process straightforward."
+      },
+      {
+        question: "Can we evaluate QuestPDF before buying?",
+        answer: "Yes. If you qualify for the Community License, you can use QuestPDF for free without an evaluation time limit.\n\nOrganisations that do not qualify may evaluate QuestPDF for up to 60 days for internal testing, technical review, and proof-of-concept work. Production deployment requires either Community eligibility or a paid license."
+      },
+      {
+        question: "We use another library that depends on QuestPDF. Do we need a license?",
+        answer: "Usually not. If your own code does not directly reference or call QuestPDF APIs, and QuestPDF is only used internally by another library or product, you are generally covered as a transitive user.\n\nThis assumes the other library provides substantial functionality of its own and is not merely a thin wrapper around QuestPDF. Government, public-sector, and publicly traded organisations are outside the Community License as categories, so they should contact us at contact@questpdf.com to confirm the correct license."
+      },
+      {
+        question: "Will the Community License stay free?",
+        answer: "Yes. The free Community License is a permanent part of the QuestPDF model. Paid licenses fund full-time development so the free tier can remain available.\n\nThere is also an important legal protection: the license version distributed with a specific QuestPDF release governs that release permanently. Terms for versions you already use cannot change retroactively; any future license change could only apply to future releases."
+      }
+    ]
+  },
+  {
+    title: "Professional vs Enterprise",
+    description: "Developers covered, which tier fits, and subsidiaries.",
+    items: [
+      {
+        question: "How many developers does a paid license cover?",
+        answer: "Unlimited. Every paid QuestPDF license covers an unlimited number of developers, with no seat-counting and no per-developer fees.\n\nThe same license may be used across your development, testing, staging, CI/CD, and production environments. Your cost does not increase with team size, server count, deployment count, or document volume."
+      },
+      {
+        question: "Which tier do we need — Professional or Enterprise?",
+        answer: "Professional is the right choice for most companies. It covers one legal entity, unlimited developers, unlimited projects, unlimited applications, and unlimited deployments.\n\nProfessional includes the same QuestPDF features as Enterprise. You do not need Enterprise because of team size, number of applications, number of servers, or document volume."
+      },
+      {
+        question: "When should we choose Enterprise?",
+        answer: "Choose Enterprise when you need one license to cover multiple affiliated legal entities, or when your organisation requires enterprise purchasing and continuity terms.\n\nEnterprise covers affiliates connected by more than 50% ownership or control. It also adds a next-business-day first-response target for support, priority handling of business-critical issues, stronger continuity commitments, and procurement options such as Order Forms, purchase orders, direct invoicing, supplier onboarding, and multi-year terms."
+      },
+      {
+        question: "Does one Professional License cover subsidiaries or sister companies?",
+        answer: "No. A Professional License covers one legal entity only.\n\nIf several related companies need to use QuestPDF, each entity can buy its own Professional License, or one entity can buy an Enterprise License that covers the whole affiliated group. This is the main structural difference between Professional and Enterprise."
+      }
+    ]
+  },
+  {
+    title: "Pricing & Renewals",
+    description: "What you keep, what renewal costs, cancelling, and refunds.",
+    items: [
+      {
+        question: "Is this a subscription or a perpetual license?",
+        answer: "It is a perpetual license with an annually renewable updates and support term.\n\nWhen you buy a paid license, you receive the permanent right to use every QuestPDF version released during your paid term. The first 12 months of updates and support are included. Renewing keeps new releases and support active, but the versions you already received remain yours to use permanently."
+      },
+      {
+        question: "What happens if we do not renew?",
+        answer: "You keep the software permanently. Your license to every QuestPDF version released during your paid term does not expire, continues to cover production use, and survives non-renewal.\n\nOnly access to new releases and ongoing support pauses. Nothing is disabled, no license key expires, and the library does not call back to our servers."
+      },
+      {
+        question: "What does renewal cost, and can the price increase?",
+        answer: "Your renewal price is your <a href='/license/professional-enterprise.html'>Locked Renewal Price</a>: the price paid for your current term. There is no separate renewal surcharge.\n\nIf you buy at the price shown on this page and keep renewing continuously, that price becomes your renewal price for future terms, and we will not increase it for as long as you keep renewing.\n\nA renewal completed within 30 days after the previous term ends still counts as continuous. If the license lapses for more than 30 days, the price lock ends, and a later purchase is made at then-current pricing. Reseller fees or markups are outside our control and are not covered by the price lock."
+      },
+      {
+        question: "Does the license renew automatically, and how do we cancel?",
+        answer: "Licenses purchased through the website renew automatically every 12 months unless cancelled. You can cancel through the Customer Portal, using the link in your purchase or renewal emails, or by contacting us at contact@questpdf.com.\n\nLicenses purchased under a signed Order Form or direct invoice do not renew automatically; each new term is handled as a separate order. Cancelling renewal never affects your perpetual right to use versions you already received."
+      },
+      {
+        question: "I bought before the pricing change. Does the new pricing affect my renewal?",
+        answer: "No. Existing customers keep their current renewal price for as long as they renew continuously.\n\nYou also benefit from the updated license model: any previous developer-count limit no longer applies, and your paid license now covers unlimited developers under the licensed legal entity or, for Enterprise, the licensed affiliated group."
+      },
+      {
+        question: "Is there a money-back guarantee?",
+        answer: "Yes. Paid licenses include a 30-day satisfaction guarantee. If QuestPDF is not a good fit, contact us within 30 days after purchase for a full refund.\n\nA refund closes the corresponding license, so it works like returning a product: money back, license rights ended. After the 30-day period, fees are non-refundable except where required by law."
+      }
+    ]
+  },
+  {
+    title: "Deployment & Security",
+    description: "Servers, shipped products, build pipelines, telemetry, and audits.",
+    items: [
+      {
+        question: "Can we use QuestPDF in a SaaS, cloud, or web application?",
+        answer: "Yes. QuestPDF can be used in server-side, cloud, SaaS, on-premises, desktop, and internal business applications.\n\nThere are no per-server, per-instance, per-customer, or per-document fees. Production use requires either Community License eligibility or a paid license."
+      },
+      {
+        question: "Can we ship QuestPDF inside our own product?",
+        answer: "Yes. Every license tier allows you to redistribute QuestPDF as a compiled component of your own application, royalty-free.\n\nYour customers and end users do not need their own QuestPDF licenses just to run the software you built. The key restriction is that QuestPDF must be embedded inside your application, not offered as a standalone PDF-generation library or API for others to build against."
+      },
+      {
+        question: "Do we need extra licenses for CI/CD, build servers, staging, or testing?",
+        answer: "No. Paid licenses cover your development workflow, including CI/CD pipelines, build servers, automated tests, development machines, staging environments, and production deployments.\n\nQuestPDF is licensed by eligibility and legal-entity scope, not by machines, environments, users, servers, or build agents."
+      },
+      {
+        question: "Does QuestPDF collect telemetry or perform online license checks?",
+        answer: "No. The QuestPDF library runs entirely inside your application process. It makes no network calls to us, collects no telemetry, performs no online activation, and does not transmit your documents, customer data, or application data.\n\nThere are no license keys, activation servers, or remote checks that could disable your application."
+      },
+      {
+        question: "Will we be audited?",
+        answer: "No routine audits. QuestPDF licensing is based on good-faith self-certification.\n\nThe library contains no technical enforcement mechanism. If we ever have a concrete reason to believe a license is being used outside its scope, we may ask an authorised representative for written confirmation of compliance, with reasonable notice. We do not want developers to fear license enforcement while evaluating or using the product."
+      }
+    ]
+  },
+  {
+    title: "Client Work",
+    description: "Agencies, contractors, and freelancers building for a client.",
+    items: [
+      {
+        question: "We are building software for a client. Whose license covers the project?",
+        answer: "Usually the client's. The required license is determined by the entity that ultimately owns, controls, commercially uses, or receives the primary business benefit from the application.\n\nIf the client qualifies for the Community License, no paid license is needed. If the client does not qualify, the client needs a paid Professional or Enterprise License. Agency developers, contractors, and freelancers working on that client's QuestPDF integration are covered by the client's license."
+      },
+      {
+        question: "I am a freelancer. Is QuestPDF free for my client work?",
+        answer: "It depends on the client. Your own projects are free while your annual gross revenue remains under USD 1,000,000.\n\nClient projects follow the client's eligibility, because the client normally owns and benefits from the application. A client who qualifies for the Community License can use QuestPDF for free. A client who does not qualify needs their own paid license, even if you are the developer implementing the integration."
+      }
+    ]
+  },
+  {
+    title: "Purchasing & Legal Review",
+    description: "Invoices, tax numbers, resellers, and the legal terms.",
+    items: [
+      {
+        question: "Can we pay by invoice or purchase order?",
+        answer: "Yes. Professional and Enterprise licenses can be purchased by card, invoice, purchase order, direct invoice, reseller, or signed Order Form, depending on your procurement needs.\n\nWebsite purchases are usually fastest. For formal procurement, supplier onboarding, custom Order Forms, or multi-year terms, contact us at contact@questpdf.com."
+      },
+      {
+        question: "Why does Paddle appear at checkout and on the invoice?",
+        answer: "Paddle is our Merchant of Record for website purchases. Paddle processes the payment, issues the invoice, calculates and remits applicable taxes, and handles payment-related administration.\n\nQuestPDF grants the license, provides the software, and delivers product support. Your license terms are still the QuestPDF license terms, even when Paddle appears as the seller or billing entity on the invoice."
+      },
+      {
+        question: "How do we purchase under a company name or add a VAT/Tax number?",
+        answer: "During checkout, please enter your email address, click the \"Add tax number\" button, and then fill in the fields for your company name, VAT or other tax identification number, and billing address.\n\nPaddle, our payment provider and Merchant of Record, then issues a tax-compliant corporate invoice. For eligible B2B transactions, such as EU cross-border purchases with a valid VAT number, a reverse charge may apply and VAT will not be added. Where reverse charge does not apply, Paddle adds the tax required for your jurisdiction.\n\nIf you already completed the purchase: You can still add your company details and generate a corporate invoice using the \"View Invoice\" link provided in your receipt email. If you need further assistance, contact us at contact@questpdf.com and we will help coordinate it.\n\nIf your organisation requires a purchase order, direct invoice, supplier onboarding, signed Order Form, or another formal procurement process, contact us at contact@questpdf.com and we will help arrange the purchase."
+      },
+      {
+        question: "We are a reseller buying for a client. Who becomes the licensee?",
+        answer: "The end customer. Unless a signed Order Form says otherwise, the license is granted to the client named in the order, quote, invoice, or license confirmation document, not to the reseller processing the purchase.\n\nPlease enter the client's legal entity accurately, because that record defines who holds the license. License rights depend on the transaction remaining valid; if the purchase is refunded, reversed, charged back, cancelled, or unpaid, the corresponding license rights end. If anything is unclear during procurement, contact us and we will help make the order correct."
+      },
+      {
+        question: "Is QuestPDF open source?",
+        answer: "QuestPDF is source-available commercial software. The complete source code is public on GitHub, so you can inspect, audit, debug, and understand the library.\n\nHowever, your right to use QuestPDF comes from one of our licenses, including the free Community License, not from an OSI-approved open-source license such as MIT. This model lets us keep the source visible while funding full-time development and long-term support."
+      },
+      {
+        question: "Is QuestPDF safe to depend on long-term?",
+        answer: "Yes. The license model is designed to reduce long-term operational risk.\n\nPaid licenses are perpetual for versions released during your paid term. The library has no license server, no telemetry, no activation, and no remote shutdown mechanism. The source code is publicly available for review and debugging. Enterprise customers also receive stronger continuity commitments, including advance notice before any general discontinuation of the paid product."
+      },
+      {
+        question: "Where can we find the exact legal terms?",
+        answer: "All current legal documents are public at <a href='/license/'>questpdf.com/license</a>.\n\nThe <a href='/license/professional-enterprise.html'>Professional / Enterprise License</a> contains the full paid license terms. The <a href='/license/community.html'>Community License</a> governs free use. The <a href='/license/guide.html'>License Selection Guide</a> explains eligibility. Website purchases are also subject to the <a href='/terms-of-service.html'>Terms of Service</a>.\n\nThis FAQ is a practical summary. If this FAQ and a license document ever differ, the license document controls."
+      }
+    ]
+  }
+];
diff --git a/docs/.vitepress/theme/pricing/prices.ts b/docs/.vitepress/theme/pricing/prices.ts
new file mode 100644
index 00000000..180cfa6a
--- /dev/null
+++ b/docs/.vitepress/theme/pricing/prices.ts
@@ -0,0 +1,7 @@
+/* The yearly price of each paid license in USD, as the pricing cards (PricingTiers.vue) and the homepage license
+   panel (HomePageLicense.vue) show it. The checkout charges what Paddle holds for the price IDs in paddle.ts. */
+
+export const licensePrices = {
+  professional: 1999,
+  enterprise: 4999
+};
diff --git a/docs/.vitepress/theme/statistics.data.ts b/docs/.vitepress/theme/statistics.data.ts
index 101240b6..1b7e801b 100644
--- a/docs/.vitepress/theme/statistics.data.ts
+++ b/docs/.vitepress/theme/statistics.data.ts
@@ -1,7 +1,6 @@
 import { defineLoader } from 'vitepress'
 
 export interface StatisticEntry {
-    icon: string;
     label: string;
     link: string;
     value: string;
@@ -10,23 +9,36 @@ export interface StatisticEntry {
 declare const data: StatisticEntry[]
 export { data }
 
+/* the publish date of QuestPDF 2020.11.0, the first stable version on NuGet */
+const firstRelease = new Date('2020-11-01');
+
 export default defineLoader({
     async load(): Promise<StatisticEntry[]> {
-        const nugetDownloads = await getNugetDownloads();
-        const githubStars = await getGithubStars();
+        const [nugetDownloads, githubStars] = await Promise.all([
+            getNugetDownloads(),
+            getGithubStars()
+        ]);
 
         return [
             {
-                icon: "fa-star",
                 label: "GitHub stars",
                 link: "https://github.com/QuestPDF/QuestPDF",
                 value: `${toThousands(githubStars)}K`
             },
             {
-                icon: "fa-download",
                 label: "NuGet downloads",
                 link: "https://www.nuget.org/packages/QuestPDF/",
                 value: `${toMillions(nugetDownloads)}M`
+            },
+            {
+                label: "paying customers",
+                link: "/pricing",
+                value: "800+"
+            },
+            {
+                label: "years in production",
+                link: "https://www.nuget.org/packages/QuestPDF/#versions-body-tab",
+                value: `${toYears(firstRelease)}`
             }
         ];
     }
@@ -61,7 +73,6 @@ async function getNugetDownloads(): Promise<number> {
     if (!searchResource)
         throw new Error('SearchQueryService not found in service index');
 
-    // query for the package
     const queryUrl = `${searchResource['@id']}?q=packageid:questpdf&prerelease=true`;
     const data = await fetchJson(queryUrl);
 
@@ -86,10 +97,15 @@ async function getGithubStars(): Promise<number> {
     return stars;
 }
 
-export function toMillions(n: number): number {
+function toMillions(n: number): number {
     return Math.round(n / 1_000_000)
 }
 
-export function toThousands(n: number): number {
+function toThousands(n: number): number {
     return Math.round(n / 100) / 10
 }
+
+function toYears(since: Date): number {
+    const millisecondsPerYear = 365.25 * 24 * 60 * 60 * 1000;
+    return Math.round((Date.now() - since.getTime()) / millisecondsPerYear);
+}
diff --git a/docs/companion/download.md b/docs/companion/download.md
index e4d0ba31..27abdd58 100644
--- a/docs/companion/download.md
+++ b/docs/companion/download.md
@@ -1,12 +1,12 @@
 # Companion App: Downloads
 
-The QuestPDF Companion application is available for download on Windows, MacOS, and Linux.
+The QuestPDF Companion application is available for download on Windows, macOS, and Linux. The .deb packages work on Debian, Ubuntu and their derivatives, and the .rpm packages on Fedora, RHEL and openSUSE.
 
 The application version is not tightly coupled with the library version. The application is backward compatible with older library versions, but it may not support all features of the latest library version.
 
 
 | Companion App version | Supported library versions | Download links                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
 |-----------------------|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| **2026.2.2** (latest) | 2024.10.0 and newer        | [Windows](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-windows.msix) <br/> [MacOS](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/QuestPDF.Companion.2026.2.2.dmg) <br/> [Linux Debian](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.deb) <br/> [Linux Fedora](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.rpm) |
-| 2026.2.1              | 2024.10.0 - 2026.2.3       | [Windows](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/questpdf_companion-2026.2.1-windows.msix) <br/> [MacOS](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/QuestPDF.Companion.2026.2.1.dmg) <br/> [Linux Debian](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/questpdf_companion-2026.2.1-linux.deb) <br/> [Linux Fedora](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/questpdf_companion-2026.2.1-linux.rpm) |
-| 2024.10.8             | 2024.10.0 - 2026.2.3       | [Windows](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2024.10.8/QuestPDF.Companion.2024.10.8.exe) <br/> [MacOS](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2024.10.8/QuestPDF.Companion.2024.10.8.app.zip) <br/> [Linux](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2024.10.8/QuestPDF.Companion.2024.10.8.deb)                                                                                                                                                   |
+| **2026.2.2** (latest) | 2024.10.0 and newer        | [Windows (.msix)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-windows.msix) <br/> [macOS (.dmg)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/QuestPDF.Companion.2026.2.2.dmg) <br/> [Linux (.deb)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.deb) <br/> [Linux (.rpm)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.rpm) |
+| 2026.2.1              | 2024.10.0 - 2026.2.3       | [Windows (.msix)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/questpdf_companion-2026.2.1-windows.msix) <br/> [macOS (.dmg)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/QuestPDF.Companion.2026.2.1.dmg) <br/> [Linux (.deb)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/questpdf_companion-2026.2.1-linux.deb) <br/> [Linux (.rpm)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.1/questpdf_companion-2026.2.1-linux.rpm) |
+| 2024.10.8             | 2024.10.0 - 2026.2.3       | [Windows (.exe)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2024.10.8/QuestPDF.Companion.2024.10.8.exe) <br/> [macOS (.app.zip)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2024.10.8/QuestPDF.Companion.2024.10.8.app.zip) <br/> [Linux (.deb)](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2024.10.8/QuestPDF.Companion.2024.10.8.deb)                                                                                                                                                   |
diff --git a/docs/companion/usage.md b/docs/companion/usage.md
index 388dd29b..646673aa 100644
--- a/docs/companion/usage.md
+++ b/docs/companion/usage.md
@@ -17,14 +17,14 @@ Read more about features availble in the Companion App in the [Features](/compan
 
 ## Installation
 
-The Companion App is available for download on Windows, MacOS, and Linux. 
-
-| Operating System                   | Download link                                                                                                                  |
-|------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|
-| Windows                            | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-windows.msix) |
-| MacOS (64-bit Intel and Apple ARM) | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/QuestPDF.Companion.2026.2.2.dmg)          |
-| Linux Debian                       | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.deb)    |
-| Linux Fedora                       | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.rpm)    |
+The Companion App is available for download on Windows, macOS, and Linux.
+
+| Operating System                           | Download link                                                                                                                  |
+|--------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------|
+| Windows (.msix)                            | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-windows.msix) |
+| macOS (.dmg, Intel and Apple Silicon)      | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/QuestPDF.Companion.2026.2.2.dmg)          |
+| Linux (.deb, Debian and Ubuntu)            | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.deb)    |
+| Linux (.rpm, Fedora, RHEL and openSUSE)    | [Download](https://github.com/QuestPDF/QuestPDF.Companion/releases/download/2026.2.2/questpdf_companion-2026.2.2-linux.rpm)    |
 
 :::info
 To access older versions of the Companion App, visit the [Download](/companion/download.md) section.
diff --git a/docs/invoice-tutorial.md b/docs/invoice-tutorial.md
index c1d70645..de1b8b1d 100644
--- a/docs/invoice-tutorial.md
+++ b/docs/invoice-tutorial.md
@@ -8,7 +8,7 @@ QuestPDF is a modern .NET library for PDF document generation that emphasizes cl
 
 By the end, you'll have a fully functional, paginated invoice generator that looks like this:
 
-![invoice](/getting-started/invoice.png)
+![invoice](/getting-started/invoice.webp)
 
 ::: tip INSTALLATION
 Before starting this tutorial, please familiarize yourself with [the Quick Start tutorial](/quick-start.md).
diff --git a/docs/public/api-reference/border-separate.png b/docs/public/api-reference/border-separate.png
deleted file mode 100644
index 91e90162..00000000
Binary files a/docs/public/api-reference/border-separate.png and /dev/null differ
diff --git a/docs/public/api-reference/border-simple.png b/docs/public/api-reference/border-simple.png
deleted file mode 100644
index 5a38bea0..00000000
Binary files a/docs/public/api-reference/border-simple.png and /dev/null differ
diff --git a/docs/public/api-reference/canvas-rounded-rectangle.png b/docs/public/api-reference/canvas-rounded-rectangle.png
deleted file mode 100644
index b6571a82..00000000
Binary files a/docs/public/api-reference/canvas-rounded-rectangle.png and /dev/null differ
diff --git a/docs/public/api-reference/canvas.png b/docs/public/api-reference/canvas.png
deleted file mode 100644
index 2be3e5bc..00000000
Binary files a/docs/public/api-reference/canvas.png and /dev/null differ
diff --git a/docs/public/api-reference/column-spacing.png b/docs/public/api-reference/column-spacing.png
deleted file mode 100644
index 816e02d6..00000000
Binary files a/docs/public/api-reference/column-spacing.png and /dev/null differ
diff --git a/docs/public/api-reference/column.png b/docs/public/api-reference/column.png
deleted file mode 100644
index fe816c2e..00000000
Binary files a/docs/public/api-reference/column.png and /dev/null differ
diff --git a/docs/public/api-reference/content-direction-inlined.png b/docs/public/api-reference/content-direction-inlined.png
deleted file mode 100644
index 2c8cd248..00000000
Binary files a/docs/public/api-reference/content-direction-inlined.png and /dev/null differ
diff --git a/docs/public/api-reference/content-direction-row.png b/docs/public/api-reference/content-direction-row.png
deleted file mode 100644
index a6a52a82..00000000
Binary files a/docs/public/api-reference/content-direction-row.png and /dev/null differ
diff --git a/docs/public/api-reference/content-direction-table.png b/docs/public/api-reference/content-direction-table.png
deleted file mode 100644
index 40c2e7d9..00000000
Binary files a/docs/public/api-reference/content-direction-table.png and /dev/null differ
diff --git a/docs/public/api-reference/debug.png b/docs/public/api-reference/debug.png
deleted file mode 100644
index ae7a6f96..00000000
Binary files a/docs/public/api-reference/debug.png and /dev/null differ
diff --git a/docs/public/api-reference/decoration.png b/docs/public/api-reference/decoration.png
deleted file mode 100644
index c5269998..00000000
Binary files a/docs/public/api-reference/decoration.png and /dev/null differ
diff --git a/docs/public/api-reference/default-text-style.png b/docs/public/api-reference/default-text-style.png
deleted file mode 100644
index 01ccf09b..00000000
Binary files a/docs/public/api-reference/default-text-style.png and /dev/null differ
diff --git a/docs/public/api-reference/ensure-space-first.png b/docs/public/api-reference/ensure-space-first.png
deleted file mode 100644
index 87b6d89a..00000000
Binary files a/docs/public/api-reference/ensure-space-first.png and /dev/null differ
diff --git a/docs/public/api-reference/ensure-space-off-first.png b/docs/public/api-reference/ensure-space-off-first.png
deleted file mode 100644
index 43d30d46..00000000
Binary files a/docs/public/api-reference/ensure-space-off-first.png and /dev/null differ
diff --git a/docs/public/api-reference/ensure-space-off-second.png b/docs/public/api-reference/ensure-space-off-second.png
deleted file mode 100644
index 6984c0d7..00000000
Binary files a/docs/public/api-reference/ensure-space-off-second.png and /dev/null differ
diff --git a/docs/public/api-reference/ensure-space-second.png b/docs/public/api-reference/ensure-space-second.png
deleted file mode 100644
index 5fe9fb5f..00000000
Binary files a/docs/public/api-reference/ensure-space-second.png and /dev/null differ
diff --git a/docs/public/api-reference/flip.png b/docs/public/api-reference/flip.png
deleted file mode 100644
index df2200ce..00000000
Binary files a/docs/public/api-reference/flip.png and /dev/null differ
diff --git a/docs/public/api-reference/font-fallback-with.png b/docs/public/api-reference/font-fallback-with.png
deleted file mode 100644
index 4a8e6333..00000000
Binary files a/docs/public/api-reference/font-fallback-with.png and /dev/null differ
diff --git a/docs/public/api-reference/font-fallback-without.png b/docs/public/api-reference/font-fallback-without.png
deleted file mode 100644
index 5a8fb0d0..00000000
Binary files a/docs/public/api-reference/font-fallback-without.png and /dev/null differ
diff --git a/docs/public/api-reference/grid.png b/docs/public/api-reference/grid.png
deleted file mode 100644
index 7db559b3..00000000
Binary files a/docs/public/api-reference/grid.png and /dev/null differ
diff --git a/docs/public/api-reference/image-compression.png b/docs/public/api-reference/image-compression.png
deleted file mode 100644
index 3391bf35..00000000
Binary files a/docs/public/api-reference/image-compression.png and /dev/null differ
diff --git a/docs/public/api-reference/image-dpi.png b/docs/public/api-reference/image-dpi.png
deleted file mode 100644
index 9a43e112..00000000
Binary files a/docs/public/api-reference/image-dpi.png and /dev/null differ
diff --git a/docs/public/api-reference/inlined-justify-middle.png b/docs/public/api-reference/inlined-justify-middle.png
deleted file mode 100644
index 52e44c60..00000000
Binary files a/docs/public/api-reference/inlined-justify-middle.png and /dev/null differ
diff --git a/docs/public/api-reference/inlined-left-bottom.png b/docs/public/api-reference/inlined-left-bottom.png
deleted file mode 100644
index 7e3f61ef..00000000
Binary files a/docs/public/api-reference/inlined-left-bottom.png and /dev/null differ
diff --git a/docs/public/api-reference/inlined-space-around-top.png b/docs/public/api-reference/inlined-space-around-top.png
deleted file mode 100644
index 23186787..00000000
Binary files a/docs/public/api-reference/inlined-space-around-top.png and /dev/null differ
diff --git a/docs/public/api-reference/layers-1.png b/docs/public/api-reference/layers-1.png
deleted file mode 100644
index 27cd2750..00000000
Binary files a/docs/public/api-reference/layers-1.png and /dev/null differ
diff --git a/docs/public/api-reference/layers-2.png b/docs/public/api-reference/layers-2.png
deleted file mode 100644
index cf5bc530..00000000
Binary files a/docs/public/api-reference/layers-2.png and /dev/null differ
diff --git a/docs/public/api-reference/line-horizontal.png b/docs/public/api-reference/line-horizontal.png
deleted file mode 100644
index e3d13dd3..00000000
Binary files a/docs/public/api-reference/line-horizontal.png and /dev/null differ
diff --git a/docs/public/api-reference/line-vertical.png b/docs/public/api-reference/line-vertical.png
deleted file mode 100644
index ffe314a1..00000000
Binary files a/docs/public/api-reference/line-vertical.png and /dev/null differ
diff --git a/docs/public/api-reference/minimal-box-with.png b/docs/public/api-reference/minimal-box-with.png
deleted file mode 100644
index be1f18e0..00000000
Binary files a/docs/public/api-reference/minimal-box-with.png and /dev/null differ
diff --git a/docs/public/api-reference/minimal-box-without.png b/docs/public/api-reference/minimal-box-without.png
deleted file mode 100644
index a8456684..00000000
Binary files a/docs/public/api-reference/minimal-box-without.png and /dev/null differ
diff --git a/docs/public/api-reference/multi-column-balance-height-disabled.png b/docs/public/api-reference/multi-column-balance-height-disabled.png
deleted file mode 100644
index 69bf29fc..00000000
Binary files a/docs/public/api-reference/multi-column-balance-height-disabled.png and /dev/null differ
diff --git a/docs/public/api-reference/multi-column-balance-height-enabled.png b/docs/public/api-reference/multi-column-balance-height-enabled.png
deleted file mode 100644
index 30b19aaf..00000000
Binary files a/docs/public/api-reference/multi-column-balance-height-enabled.png and /dev/null differ
diff --git a/docs/public/api-reference/multi-column-spacer.png b/docs/public/api-reference/multi-column-spacer.png
deleted file mode 100644
index 5b066630..00000000
Binary files a/docs/public/api-reference/multi-column-spacer.png and /dev/null differ
diff --git a/docs/public/api-reference/multi-column.png b/docs/public/api-reference/multi-column.png
deleted file mode 100644
index 368465b0..00000000
Binary files a/docs/public/api-reference/multi-column.png and /dev/null differ
diff --git a/docs/public/api-reference/page-background-foreground.png b/docs/public/api-reference/page-background-foreground.png
deleted file mode 100644
index 9735e26f..00000000
Binary files a/docs/public/api-reference/page-background-foreground.png and /dev/null differ
diff --git a/docs/public/api-reference/page-example.png b/docs/public/api-reference/page-example.png
deleted file mode 100644
index d0a995bc..00000000
Binary files a/docs/public/api-reference/page-example.png and /dev/null differ
diff --git a/docs/public/api-reference/page-slots-advanced.png b/docs/public/api-reference/page-slots-advanced.png
deleted file mode 100644
index 782d626b..00000000
Binary files a/docs/public/api-reference/page-slots-advanced.png and /dev/null differ
diff --git a/docs/public/api-reference/placeholder-example.png b/docs/public/api-reference/placeholder-example.png
deleted file mode 100644
index 71d51ce6..00000000
Binary files a/docs/public/api-reference/placeholder-example.png and /dev/null differ
diff --git a/docs/public/api-reference/rotate-constrained.png b/docs/public/api-reference/rotate-constrained.png
deleted file mode 100644
index 9f9521c1..00000000
Binary files a/docs/public/api-reference/rotate-constrained.png and /dev/null differ
diff --git a/docs/public/api-reference/rotate-free-origin.png b/docs/public/api-reference/rotate-free-origin.png
deleted file mode 100644
index 3ebd4421..00000000
Binary files a/docs/public/api-reference/rotate-free-origin.png and /dev/null differ
diff --git a/docs/public/api-reference/rotate-free.png b/docs/public/api-reference/rotate-free.png
deleted file mode 100644
index aa36ddc0..00000000
Binary files a/docs/public/api-reference/rotate-free.png and /dev/null differ
diff --git a/docs/public/api-reference/row-example.png b/docs/public/api-reference/row-example.png
deleted file mode 100644
index 601aefad..00000000
Binary files a/docs/public/api-reference/row-example.png and /dev/null differ
diff --git a/docs/public/api-reference/row-spacing.png b/docs/public/api-reference/row-spacing.png
deleted file mode 100644
index c75acb6c..00000000
Binary files a/docs/public/api-reference/row-spacing.png and /dev/null differ
diff --git a/docs/public/api-reference/scale-to-fit.png b/docs/public/api-reference/scale-to-fit.png
deleted file mode 100644
index c35aa845..00000000
Binary files a/docs/public/api-reference/scale-to-fit.png and /dev/null differ
diff --git a/docs/public/api-reference/scale.png b/docs/public/api-reference/scale.png
deleted file mode 100644
index ad1495fc..00000000
Binary files a/docs/public/api-reference/scale.png and /dev/null differ
diff --git a/docs/public/api-reference/show-once-first.png b/docs/public/api-reference/show-once-first.png
deleted file mode 100644
index 693804d6..00000000
Binary files a/docs/public/api-reference/show-once-first.png and /dev/null differ
diff --git a/docs/public/api-reference/show-once-off-first.png b/docs/public/api-reference/show-once-off-first.png
deleted file mode 100644
index 07384457..00000000
Binary files a/docs/public/api-reference/show-once-off-first.png and /dev/null differ
diff --git a/docs/public/api-reference/show-once-off-second.png b/docs/public/api-reference/show-once-off-second.png
deleted file mode 100644
index 0af67649..00000000
Binary files a/docs/public/api-reference/show-once-off-second.png and /dev/null differ
diff --git a/docs/public/api-reference/show-once-second.png b/docs/public/api-reference/show-once-second.png
deleted file mode 100644
index 634ebd03..00000000
Binary files a/docs/public/api-reference/show-once-second.png and /dev/null differ
diff --git a/docs/public/api-reference/skip-once-first.png b/docs/public/api-reference/skip-once-first.png
deleted file mode 100644
index a891c1b5..00000000
Binary files a/docs/public/api-reference/skip-once-first.png and /dev/null differ
diff --git a/docs/public/api-reference/skip-once-second.png b/docs/public/api-reference/skip-once-second.png
deleted file mode 100644
index 8f8dc814..00000000
Binary files a/docs/public/api-reference/skip-once-second.png and /dev/null differ
diff --git a/docs/public/api-reference/stop-paging-with-1.png b/docs/public/api-reference/stop-paging-with-1.png
deleted file mode 100644
index 75dd2f2a..00000000
Binary files a/docs/public/api-reference/stop-paging-with-1.png and /dev/null differ
diff --git a/docs/public/api-reference/stop-paging-with-2.png b/docs/public/api-reference/stop-paging-with-2.png
deleted file mode 100644
index 049d1db6..00000000
Binary files a/docs/public/api-reference/stop-paging-with-2.png and /dev/null differ
diff --git a/docs/public/api-reference/stop-paging-without-1.png b/docs/public/api-reference/stop-paging-without-1.png
deleted file mode 100644
index 75dd2f2a..00000000
Binary files a/docs/public/api-reference/stop-paging-without-1.png and /dev/null differ
diff --git a/docs/public/api-reference/stop-paging-without-2.png b/docs/public/api-reference/stop-paging-without-2.png
deleted file mode 100644
index a0045e7d..00000000
Binary files a/docs/public/api-reference/stop-paging-without-2.png and /dev/null differ
diff --git a/docs/public/api-reference/table-basic-usage.png b/docs/public/api-reference/table-basic-usage.png
deleted file mode 100644
index b8f9ddff..00000000
Binary files a/docs/public/api-reference/table-basic-usage.png and /dev/null differ
diff --git a/docs/public/api-reference/table-columns-definition.png b/docs/public/api-reference/table-columns-definition.png
deleted file mode 100644
index 26c5f3cb..00000000
Binary files a/docs/public/api-reference/table-columns-definition.png and /dev/null differ
diff --git a/docs/public/api-reference/table-extend-last-cells-to-table-bottom.png b/docs/public/api-reference/table-extend-last-cells-to-table-bottom.png
deleted file mode 100644
index e300148a..00000000
Binary files a/docs/public/api-reference/table-extend-last-cells-to-table-bottom.png and /dev/null differ
diff --git a/docs/public/api-reference/table-header-1.png b/docs/public/api-reference/table-header-1.png
deleted file mode 100644
index c351f87a..00000000
Binary files a/docs/public/api-reference/table-header-1.png and /dev/null differ
diff --git a/docs/public/api-reference/table-header-2.png b/docs/public/api-reference/table-header-2.png
deleted file mode 100644
index 283819f1..00000000
Binary files a/docs/public/api-reference/table-header-2.png and /dev/null differ
diff --git a/docs/public/api-reference/table-overlapping-cells.png b/docs/public/api-reference/table-overlapping-cells.png
deleted file mode 100644
index c2411969..00000000
Binary files a/docs/public/api-reference/table-overlapping-cells.png and /dev/null differ
diff --git a/docs/public/api-reference/table-partial-automated-cell-placement.png b/docs/public/api-reference/table-partial-automated-cell-placement.png
deleted file mode 100644
index 255e7a45..00000000
Binary files a/docs/public/api-reference/table-partial-automated-cell-placement.png and /dev/null differ
diff --git a/docs/public/api-reference/table-report-example.png b/docs/public/api-reference/table-report-example.png
deleted file mode 100644
index ca6fb6e6..00000000
Binary files a/docs/public/api-reference/table-report-example.png and /dev/null differ
diff --git a/docs/public/api-reference/table-spans.png b/docs/public/api-reference/table-spans.png
deleted file mode 100644
index 11920868..00000000
Binary files a/docs/public/api-reference/table-spans.png and /dev/null differ
diff --git a/docs/public/api-reference/template-example.png b/docs/public/api-reference/template-example.png
deleted file mode 100644
index 47c796e6..00000000
Binary files a/docs/public/api-reference/template-example.png and /dev/null differ
diff --git a/docs/public/api-reference/text-alignment.png b/docs/public/api-reference/text-alignment.png
deleted file mode 100644
index ad870887..00000000
Binary files a/docs/public/api-reference/text-alignment.png and /dev/null differ
diff --git a/docs/public/api-reference/text-arabic.png b/docs/public/api-reference/text-arabic.png
deleted file mode 100644
index b5fa89c8..00000000
Binary files a/docs/public/api-reference/text-arabic.png and /dev/null differ
diff --git a/docs/public/api-reference/text-custom-element-aligned.png b/docs/public/api-reference/text-custom-element-aligned.png
deleted file mode 100644
index 092f7766..00000000
Binary files a/docs/public/api-reference/text-custom-element-aligned.png and /dev/null differ
diff --git a/docs/public/api-reference/text-custom-element.png b/docs/public/api-reference/text-custom-element.png
deleted file mode 100644
index e891d808..00000000
Binary files a/docs/public/api-reference/text-custom-element.png and /dev/null differ
diff --git a/docs/public/api-reference/text-direction-forced.png b/docs/public/api-reference/text-direction-forced.png
deleted file mode 100644
index db423467..00000000
Binary files a/docs/public/api-reference/text-direction-forced.png and /dev/null differ
diff --git a/docs/public/api-reference/text-first-line-indentation.png b/docs/public/api-reference/text-first-line-indentation.png
deleted file mode 100644
index dd3d6167..00000000
Binary files a/docs/public/api-reference/text-first-line-indentation.png and /dev/null differ
diff --git a/docs/public/api-reference/text-font-features.png b/docs/public/api-reference/text-font-features.png
deleted file mode 100644
index b1b98345..00000000
Binary files a/docs/public/api-reference/text-font-features.png and /dev/null differ
diff --git a/docs/public/api-reference/text-letter-spacing.png b/docs/public/api-reference/text-letter-spacing.png
deleted file mode 100644
index 2c87ac1d..00000000
Binary files a/docs/public/api-reference/text-letter-spacing.png and /dev/null differ
diff --git a/docs/public/api-reference/text-line-clamp-custom-ellipsis.png b/docs/public/api-reference/text-line-clamp-custom-ellipsis.png
deleted file mode 100644
index 1497a790..00000000
Binary files a/docs/public/api-reference/text-line-clamp-custom-ellipsis.png and /dev/null differ
diff --git a/docs/public/api-reference/text-line-clamp.png b/docs/public/api-reference/text-line-clamp.png
deleted file mode 100644
index 0b3e80fb..00000000
Binary files a/docs/public/api-reference/text-line-clamp.png and /dev/null differ
diff --git a/docs/public/api-reference/text-line-height.png b/docs/public/api-reference/text-line-height.png
deleted file mode 100644
index 6bc5d9bb..00000000
Binary files a/docs/public/api-reference/text-line-height.png and /dev/null differ
diff --git a/docs/public/api-reference/text-paragraph-spacing.png b/docs/public/api-reference/text-paragraph-spacing.png
deleted file mode 100644
index e6e10f04..00000000
Binary files a/docs/public/api-reference/text-paragraph-spacing.png and /dev/null differ
diff --git a/docs/public/api-reference/text-simple-block.png b/docs/public/api-reference/text-simple-block.png
deleted file mode 100644
index e8c688e0..00000000
Binary files a/docs/public/api-reference/text-simple-block.png and /dev/null differ
diff --git a/docs/public/api-reference/text-subscript-superscript.png b/docs/public/api-reference/text-subscript-superscript.png
deleted file mode 100644
index 321054de..00000000
Binary files a/docs/public/api-reference/text-subscript-superscript.png and /dev/null differ
diff --git a/docs/public/api-reference/text-unicode.png b/docs/public/api-reference/text-unicode.png
deleted file mode 100644
index 0bc01268..00000000
Binary files a/docs/public/api-reference/text-unicode.png and /dev/null differ
diff --git a/docs/public/api-reference/text-weight.png b/docs/public/api-reference/text-weight.png
deleted file mode 100644
index feda4314..00000000
Binary files a/docs/public/api-reference/text-weight.png and /dev/null differ
diff --git a/docs/public/api-reference/text-word-spacing.png b/docs/public/api-reference/text-word-spacing.png
deleted file mode 100644
index 24800be5..00000000
Binary files a/docs/public/api-reference/text-word-spacing.png and /dev/null differ
diff --git a/docs/public/api-reference/translate.png b/docs/public/api-reference/translate.png
deleted file mode 100644
index b4ed4901..00000000
Binary files a/docs/public/api-reference/translate.png and /dev/null differ
diff --git a/docs/public/api-reference/unconstrained.png b/docs/public/api-reference/unconstrained.png
deleted file mode 100644
index 8ddb9c37..00000000
Binary files a/docs/public/api-reference/unconstrained.png and /dev/null differ
diff --git a/docs/public/favicon.png b/docs/public/favicon.png
new file mode 100644
index 00000000..5958755c
Binary files /dev/null and b/docs/public/favicon.png differ
diff --git a/docs/public/getting-started/complex.jpg b/docs/public/getting-started/complex.jpg
deleted file mode 100644
index 27b01ca1..00000000
Binary files a/docs/public/getting-started/complex.jpg and /dev/null differ
diff --git a/docs/public/getting-started/invoice.png b/docs/public/getting-started/invoice.png
deleted file mode 100644
index b620ba95..00000000
Binary files a/docs/public/getting-started/invoice.png and /dev/null differ
diff --git a/docs/public/getting-started/invoice.webp b/docs/public/getting-started/invoice.webp
new file mode 100644
index 00000000..2c5f4061
Binary files /dev/null and b/docs/public/getting-started/invoice.webp differ
diff --git a/docs/public/getting-started/result-page1.png b/docs/public/getting-started/result-page1.png
deleted file mode 100644
index c1eff249..00000000
Binary files a/docs/public/getting-started/result-page1.png and /dev/null differ
diff --git a/docs/public/homepage/getting-started/arrow-right.svg b/docs/public/homepage/getting-started/arrow-right.svg
deleted file mode 100644
index aa9f262c..00000000
--- a/docs/public/homepage/getting-started/arrow-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z" fill="#FFFFFF"/></svg>
\ No newline at end of file
diff --git a/docs/public/homepage/getting-started/invoice1.webp b/docs/public/homepage/getting-started/invoice1.webp
deleted file mode 100644
index 637eb37e..00000000
Binary files a/docs/public/homepage/getting-started/invoice1.webp and /dev/null differ
diff --git a/docs/public/homepage/getting-started/invoice2.webp b/docs/public/homepage/getting-started/invoice2.webp
deleted file mode 100644
index 80e95496..00000000
Binary files a/docs/public/homepage/getting-started/invoice2.webp and /dev/null differ
diff --git a/docs/public/homepage/grain-dark.png b/docs/public/homepage/grain-dark.png
new file mode 100644
index 00000000..d67fa2f4
Binary files /dev/null and b/docs/public/homepage/grain-dark.png differ
diff --git a/docs/public/homepage/noise.svg b/docs/public/homepage/noise.svg
deleted file mode 100644
index 5aba4043..00000000
--- a/docs/public/homepage/noise.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
-    <filter id="noise" x="0" y="0">
-      <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/>
-      <feBlend mode="screen"/>
-    </filter>
-    <rect width="500" height="500" filter="url(#noise)" opacity="0.5"/>
-</svg>
\ No newline at end of file
diff --git a/docs/public/homepage/quick-start-0.webp b/docs/public/homepage/quick-start-0.webp
new file mode 100644
index 00000000..ca5a6a37
Binary files /dev/null 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
new file mode 100644
index 00000000..a63151e1
Binary files /dev/null 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
new file mode 100644
index 00000000..c861078a
Binary files /dev/null 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
new file mode 100644
index 00000000..5a1b443f
Binary files /dev/null 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
new file mode 100644
index 00000000..7f503124
Binary files /dev/null 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
new file mode 100644
index 00000000..529d35b3
Binary files /dev/null and b/docs/public/homepage/quick-start-5.webp differ
diff --git a/docs/public/homepage/quick-start-animation/step1.webp b/docs/public/homepage/quick-start-animation/step1.webp
deleted file mode 100644
index c7818065..00000000
Binary files a/docs/public/homepage/quick-start-animation/step1.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step10.webp b/docs/public/homepage/quick-start-animation/step10.webp
deleted file mode 100644
index 5f441221..00000000
Binary files a/docs/public/homepage/quick-start-animation/step10.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step11.webp b/docs/public/homepage/quick-start-animation/step11.webp
deleted file mode 100644
index 40c9c9f3..00000000
Binary files a/docs/public/homepage/quick-start-animation/step11.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step12.webp b/docs/public/homepage/quick-start-animation/step12.webp
deleted file mode 100644
index 38d820fd..00000000
Binary files a/docs/public/homepage/quick-start-animation/step12.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step13.webp b/docs/public/homepage/quick-start-animation/step13.webp
deleted file mode 100644
index 972399e8..00000000
Binary files a/docs/public/homepage/quick-start-animation/step13.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step14.webp b/docs/public/homepage/quick-start-animation/step14.webp
deleted file mode 100644
index 3cc2b0d1..00000000
Binary files a/docs/public/homepage/quick-start-animation/step14.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step2.webp b/docs/public/homepage/quick-start-animation/step2.webp
deleted file mode 100644
index c7818065..00000000
Binary files a/docs/public/homepage/quick-start-animation/step2.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step3.webp b/docs/public/homepage/quick-start-animation/step3.webp
deleted file mode 100644
index bd304c8a..00000000
Binary files a/docs/public/homepage/quick-start-animation/step3.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step4.webp b/docs/public/homepage/quick-start-animation/step4.webp
deleted file mode 100644
index 693be949..00000000
Binary files a/docs/public/homepage/quick-start-animation/step4.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step5.webp b/docs/public/homepage/quick-start-animation/step5.webp
deleted file mode 100644
index b1e7f924..00000000
Binary files a/docs/public/homepage/quick-start-animation/step5.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step6.webp b/docs/public/homepage/quick-start-animation/step6.webp
deleted file mode 100644
index 7c6bd212..00000000
Binary files a/docs/public/homepage/quick-start-animation/step6.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step7.webp b/docs/public/homepage/quick-start-animation/step7.webp
deleted file mode 100644
index 16b36fc8..00000000
Binary files a/docs/public/homepage/quick-start-animation/step7.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step8.webp b/docs/public/homepage/quick-start-animation/step8.webp
deleted file mode 100644
index 61ef52b8..00000000
Binary files a/docs/public/homepage/quick-start-animation/step8.webp and /dev/null differ
diff --git a/docs/public/homepage/quick-start-animation/step9.webp b/docs/public/homepage/quick-start-animation/step9.webp
deleted file mode 100644
index 4ebb0926..00000000
Binary files a/docs/public/homepage/quick-start-animation/step9.webp and /dev/null differ
diff --git a/docs/public/homepage/supported-platforms/apple.svg b/docs/public/homepage/supported-platforms/apple.svg
deleted file mode 100644
index 0cb28a60..00000000
--- a/docs/public/homepage/supported-platforms/apple.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z" fill="#888"/></svg>
\ No newline at end of file
diff --git a/docs/public/homepage/supported-platforms/aws.svg b/docs/public/homepage/supported-platforms/aws.svg
deleted file mode 100644
index 755e1cb3..00000000
--- a/docs/public/homepage/supported-platforms/aws.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M180.4 203c-.7 22.7 10.6 32.7 10.9 39.1a8.2 8.2 0 0 1 -4.1 6.3l-12.8 9a10.7 10.7 0 0 1 -5.6 1.9c-.4 0-8.2 1.8-20.5-25.6a78.6 78.6 0 0 1 -62.6 29.5c-16.3 .9-60.4-9.2-58.1-56.2-1.6-38.3 34.1-62.1 70.9-60.1 7.1 0 21.6 .4 47 6.3v-15.6c2.7-26.5-14.7-47-44.8-43.9-2.4 0-19.4-.5-45.8 10.1-7.4 3.4-8.3 2.8-10.8 2.8-7.4 0-4.4-21.5-2.9-24.2 5.2-6.4 35.9-18.4 65.9-18.2a76.9 76.9 0 0 1 55.7 17.3 70.3 70.3 0 0 1 17.7 52.4l0 69.3zM94 235.4c32.4-.5 46.2-20 49.3-30.5 2.5-10.1 2.1-16.4 2.1-27.4-9.7-2.3-23.6-4.9-39.6-4.9-15.2-1.1-42.8 5.6-41.7 32.3-1.2 16.8 11.1 31.4 30 30.5zm170.9 23.1c-7.9 .7-11.5-4.9-12.7-10.4l-49.8-164.7c-1-2.8-1.6-5.7-1.9-8.6a4.6 4.6 0 0 1 3.9-5.3c.2 0-2.1 0 22.3 0 8.8-.9 11.6 6 12.6 10.4l35.7 140.8 33.2-140.8c.5-3.2 2.9-11.1 12.8-10.2h17.2c2.2-.2 11.1-.5 12.7 10.4l33.4 142.6L421 80.1c.5-2.2 2.7-11.4 12.7-10.4h19.7c.9-.1 6.2-.8 5.3 8.6-.4 1.9 3.4-10.7-52.8 169.9-1.2 5.5-4.8 11.1-12.7 10.4h-18.7c-10.9 1.2-12.5-9.7-12.7-10.8L328.7 110.7l-32.8 137c-.2 1.1-1.7 11.9-12.7 10.8h-18.3zm273.5 5.6c-5.9 0-33.9-.3-57.4-12.3a12.8 12.8 0 0 1 -7.8-11.9v-10.8c0-8.5 6.2-6.9 8.8-5.9 10 4.1 16.5 7.1 28.8 9.6 36.7 7.5 52.8-2.3 56.7-4.5 13.2-7.8 14.2-25.7 5.3-35-10.5-8.8-15.5-9.1-53.1-21-4.6-1.3-43.7-13.6-43.8-52.4-.6-28.2 25.1-56.2 69.5-56 12.7 0 46.4 4.1 55.6 15.6 1.4 2.1 2 4.6 1.9 7v10.1c0 4.4-1.6 6.7-4.9 6.7-7.7-.9-21.4-11.2-49.2-10.8-6.9-.4-39.9 .9-38.4 25-.4 19 26.6 26.1 29.7 26.9 36.5 11 48.7 12.8 63.1 29.6 17.1 22.3 7.9 48.3 4.4 55.4-19.1 37.5-68.4 34.4-69.3 34.4zm40.2 104.9c-70 51.7-171.7 79.3-258.5 79.3A469.1 469.1 0 0 1 2.8 327.5c-6.5-5.9-.8-14 7.2-9.5a637.4 637.4 0 0 0 316.9 84.1 630.2 630.2 0 0 0 241.6-49.6c11.8-5 21.8 7.8 10.1 16.4zm29.2-33.3c-9-11.5-59.3-5.4-81.8-2.7-6.8 .8-7.9-5.1-1.8-9.5 40.1-28.2 105.9-20.1 113.4-10.6 7.6 9.5-2.1 75.4-39.6 106.9-5.8 4.9-11.3 2.3-8.7-4.1 8.4-21.3 27.4-68.5 18.4-80z" fill="#888"/></svg>
\ No newline at end of file
diff --git a/docs/public/homepage/supported-platforms/azure.svg b/docs/public/homepage/supported-platforms/azure.svg
deleted file mode 100644
index c159ecda..00000000
--- a/docs/public/homepage/supported-platforms/azure.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <path d="M12.732,139.773C9.18,139.773 6.255,136.85 6.255,133.297C6.255,132.593 6.37,131.894 6.595,131.227L45.944,14.638C46.243,13.749 46.725,12.957 47.339,12.298C48.443,11.104 49.983,10.344 51.659,10.238C51.802,10.228 51.946,10.223 52.091,10.223L52.091,10.225L97.917,10.225C100.689,10.225 103.168,12.004 104.055,14.631L143.405,131.225C143.63,131.893 143.745,132.592 143.745,133.297C143.745,136.85 140.822,139.774 137.269,139.775L91.925,139.775C91.972,139.775 92.02,139.774 92.067,139.773L90.559,139.773L90.542,139.773C89.016,139.77 87.542,139.23 86.376,138.255C86.287,138.18 86.199,138.102 86.113,138.022L65.283,118.58L58.392,112.153L54.866,122.547L50.541,135.361C49.882,137.313 48.344,138.798 46.461,139.434C46.066,139.583 45.654,139.698 45.23,139.773L12.75,139.773L12.732,139.773ZM85.552,94.158L75.027,62.971L64.659,93.529L64.447,94.158L85.552,94.158Z" style="fill:rgb(136,136,136);"/>
-</svg>
diff --git a/docs/public/homepage/supported-platforms/docker.svg b/docs/public/homepage/supported-platforms/docker.svg
deleted file mode 100644
index acf84820..00000000
--- a/docs/public/homepage/supported-platforms/docker.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4 .4 67.6 .1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z" fill="#888"/></svg>
\ No newline at end of file
diff --git a/docs/public/homepage/supported-platforms/linux.svg b/docs/public/homepage/supported-platforms/linux.svg
deleted file mode 100644
index e970e309..00000000
--- a/docs/public/homepage/supported-platforms/linux.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M220.8 123.3c1 .5 1.8 1.7 3 1.7 1.1 0 2.8-.4 2.9-1.5 .2-1.4-1.9-2.3-3.2-2.9-1.7-.7-3.9-1-5.5-.1-.4 .2-.8 .7-.6 1.1 .3 1.3 2.3 1.1 3.4 1.7zm-21.9 1.7c1.2 0 2-1.2 3-1.7 1.1-.6 3.1-.4 3.5-1.6 .2-.4-.2-.9-.6-1.1-1.6-.9-3.8-.6-5.5 .1-1.3 .6-3.4 1.5-3.2 2.9 .1 1 1.8 1.5 2.8 1.4zM420 403.8c-3.6-4-5.3-11.6-7.2-19.7-1.8-8.1-3.9-16.8-10.5-22.4-1.3-1.1-2.6-2.1-4-2.9-1.3-.8-2.7-1.5-4.1-2 9.2-27.3 5.6-54.5-3.7-79.1-11.4-30.1-31.3-56.4-46.5-74.4-17.1-21.5-33.7-41.9-33.4-72C311.1 85.4 315.7 .1 234.8 0 132.4-.2 158 103.4 156.9 135.2c-1.7 23.4-6.4 41.8-22.5 64.7-18.9 22.5-45.5 58.8-58.1 96.7-6 17.9-8.8 36.1-6.2 53.3-6.5 5.8-11.4 14.7-16.6 20.2-4.2 4.3-10.3 5.9-17 8.3s-14 6-18.5 14.5c-2.1 3.9-2.8 8.1-2.8 12.4 0 3.9 .6 7.9 1.2 11.8 1.2 8.1 2.5 15.7 .8 20.8-5.2 14.4-5.9 24.4-2.2 31.7 3.8 7.3 11.4 10.5 20.1 12.3 17.3 3.6 40.8 2.7 59.3 12.5 19.8 10.4 39.9 14.1 55.9 10.4 11.6-2.6 21.1-9.6 25.9-20.2 12.5-.1 26.3-5.4 48.3-6.6 14.9-1.2 33.6 5.3 55.1 4.1 .6 2.3 1.4 4.6 2.5 6.7v.1c8.3 16.7 23.8 24.3 40.3 23 16.6-1.3 34.1-11 48.3-27.9 13.6-16.4 36-23.2 50.9-32.2 7.4-4.5 13.4-10.1 13.9-18.3 .4-8.2-4.4-17.3-15.5-29.7zM223.7 87.3c9.8-22.2 34.2-21.8 44-.4 6.5 14.2 3.6 30.9-4.3 40.4-1.6-.8-5.9-2.6-12.6-4.9 1.1-1.2 3.1-2.7 3.9-4.6 4.8-11.8-.2-27-9.1-27.3-7.3-.5-13.9 10.8-11.8 23-4.1-2-9.4-3.5-13-4.4-1-6.9-.3-14.6 2.9-21.8zM183 75.8c10.1 0 20.8 14.2 19.1 33.5-3.5 1-7.1 2.5-10.2 4.6 1.2-8.9-3.3-20.1-9.6-19.6-8.4 .7-9.8 21.2-1.8 28.1 1 .8 1.9-.2-5.9 5.5-15.6-14.6-10.5-52.1 8.4-52.1zm-13.6 60.7c6.2-4.6 13.6-10 14.1-10.5 4.7-4.4 13.5-14.2 27.9-14.2 7.1 0 15.6 2.3 25.9 8.9 6.3 4.1 11.3 4.4 22.6 9.3 8.4 3.5 13.7 9.7 10.5 18.2-2.6 7.1-11 14.4-22.7 18.1-11.1 3.6-19.8 16-38.2 14.9-3.9-.2-7-1-9.6-2.1-8-3.5-12.2-10.4-20-15-8.6-4.8-13.2-10.4-14.7-15.3-1.4-4.9 0-9 4.2-12.3zm3.3 334c-2.7 35.1-43.9 34.4-75.3 18-29.9-15.8-68.6-6.5-76.5-21.9-2.4-4.7-2.4-12.7 2.6-26.4v-.2c2.4-7.6 .6-16-.6-23.9-1.2-7.8-1.8-15 .9-20 3.5-6.7 8.5-9.1 14.8-11.3 10.3-3.7 11.8-3.4 19.6-9.9 5.5-5.7 9.5-12.9 14.3-18 5.1-5.5 10-8.1 17.7-6.9 8.1 1.2 15.1 6.8 21.9 16l19.6 35.6c9.5 19.9 43.1 48.4 41 68.9zm-1.4-25.9c-4.1-6.6-9.6-13.6-14.4-19.6 7.1 0 14.2-2.2 16.7-8.9 2.3-6.2 0-14.9-7.4-24.9-13.5-18.2-38.3-32.5-38.3-32.5-13.5-8.4-21.1-18.7-24.6-29.9s-3-23.3-.3-35.2c5.2-22.9 18.6-45.2 27.2-59.2 2.3-1.7 .8 3.2-8.7 20.8-8.5 16.1-24.4 53.3-2.6 82.4 .6-20.7 5.5-41.8 13.8-61.5 12-27.4 37.3-74.9 39.3-112.7 1.1 .8 4.6 3.2 6.2 4.1 4.6 2.7 8.1 6.7 12.6 10.3 12.4 10 28.5 9.2 42.4 1.2 6.2-3.5 11.2-7.5 15.9-9 9.9-3.1 17.8-8.6 22.3-15 7.7 30.4 25.7 74.3 37.2 95.7 6.1 11.4 18.3 35.5 23.6 64.6 3.3-.1 7 .4 10.9 1.4 13.8-35.7-11.7-74.2-23.3-84.9-4.7-4.6-4.9-6.6-2.6-6.5 12.6 11.2 29.2 33.7 35.2 59 2.8 11.6 3.3 23.7 .4 35.7 16.4 6.8 35.9 17.9 30.7 34.8-2.2-.1-3.2 0-4.2 0 3.2-10.1-3.9-17.6-22.8-26.1-19.6-8.6-36-8.6-38.3 12.5-12.1 4.2-18.3 14.7-21.4 27.3-2.8 11.2-3.6 24.7-4.4 39.9-.5 7.7-3.6 18-6.8 29-32.1 22.9-76.7 32.9-114.3 7.2zm257.4-11.5c-.9 16.8-41.2 19.9-63.2 46.5-13.2 15.7-29.4 24.4-43.6 25.5s-26.5-4.8-33.7-19.3c-4.7-11.1-2.4-23.1 1.1-36.3 3.7-14.2 9.2-28.8 9.9-40.6 .8-15.2 1.7-28.5 4.2-38.7 2.6-10.3 6.6-17.2 13.7-21.1 .3-.2 .7-.3 1-.5 .8 13.2 7.3 26.6 18.8 29.5 12.6 3.3 30.7-7.5 38.4-16.3 9-.3 15.7-.9 22.6 5.1 9.9 8.5 7.1 30.3 17.1 41.6 10.6 11.6 14 19.5 13.7 24.6zM173.3 148.7c2 1.9 4.7 4.5 8 7.1 6.6 5.2 15.8 10.6 27.3 10.6 11.6 0 22.5-5.9 31.8-10.8 4.9-2.6 10.9-7 14.8-10.4s5.9-6.3 3.1-6.6-2.6 2.6-6 5.1c-4.4 3.2-9.7 7.4-13.9 9.8-7.4 4.2-19.5 10.2-29.9 10.2s-18.7-4.8-24.9-9.7c-3.1-2.5-5.7-5-7.7-6.9-1.5-1.4-1.9-4.6-4.3-4.9-1.4-.1-1.8 3.7 1.7 6.5z" fill="#888"/></svg>
\ No newline at end of file
diff --git a/docs/public/homepage/supported-platforms/rider.svg b/docs/public/homepage/supported-platforms/rider.svg
deleted file mode 100644
index d66ed2a2..00000000
--- a/docs/public/homepage/supported-platforms/rider.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <path d="M44.114,56.097L41.784,61.532C41.143,63.029 39.67,64 38.041,64L4.073,64C1.823,64 0,62.177 0,59.927L0.002,25.476C0.002,24.115 0.681,22.844 1.814,22.088L5.817,19.416L5.817,9.889C5.817,7.64 7.641,5.816 9.89,5.816L21.766,5.816C22.738,5.816 23.678,6.164 24.416,6.797L24.552,6.913L33.882,0.685C34.552,0.239 35.338,0 36.143,0L54.65,0C56.677,0 58.395,1.49 58.682,3.497L63.96,40.44C63.987,40.631 64,40.824 64,41.016L64,42.599L64,54.109C64,56.358 62.177,58.182 59.928,58.182L49.481,58.182C49.436,58.182 49.391,58.181 49.347,58.18L48.052,58.18C47.079,58.18 46.139,57.832 45.4,57.199L44.114,56.097ZM52,12L12,12L12,52L52,52L52,12ZM43.449,20.643C44.084,21.781 44.402,23.067 44.402,24.5C44.402,25.933 44.084,27.218 43.449,28.37C42.813,29.508 41.93,30.392 40.802,31.035C39.68,31.678 38.409,31.999 36.988,31.999L31.278,31.999L31.278,17L36.988,17C38.409,17 39.68,17.321 40.802,17.964C41.93,18.607 42.813,19.505 43.449,20.643ZM40.856,27.152C41.22,26.402 41.402,25.518 41.402,24.499C41.402,23.481 41.22,22.598 40.856,21.848C40.491,21.098 39.974,20.522 39.302,20.133C38.631,19.732 37.848,19.531 36.956,19.531L34.203,19.531L34.203,29.468L36.956,29.468C37.848,29.468 38.631,29.268 39.302,28.866C39.974,28.477 40.491,27.902 40.856,27.152ZM20.02,26.335L20.019,32L17.094,32L17.094,17.001L23.533,17.001C24.583,17.001 25.509,17.188 26.309,17.577C27.109,17.965 27.723,18.514 28.152,19.21C28.587,19.907 28.805,20.696 28.805,21.634C28.805,22.572 28.584,23.389 28.141,24.099C27.706,24.808 27.081,25.358 26.266,25.759C26.114,25.83 25.946,25.878 25.778,25.926C25.703,25.947 25.629,25.968 25.556,25.992L29.127,32L25.773,32L22.544,26.335L20.02,26.335ZM20.02,19.438L20.02,23.898L23.341,23.898C23.834,23.898 24.263,23.817 24.627,23.63C24.998,23.443 25.284,23.188 25.484,22.853C25.684,22.505 25.784,22.116 25.784,21.661C25.784,21.206 25.684,20.817 25.484,20.483C25.284,20.148 24.998,19.893 24.627,19.706C24.263,19.532 23.834,19.438 23.341,19.438L20.02,19.438ZM16.994,44L32.994,44L32.994,47L16.994,47L16.994,44Z" style="fill:rgb(136,136,136);"/>
-</svg>
diff --git a/docs/public/homepage/supported-platforms/visual-studio.svg b/docs/public/homepage/supported-platforms/visual-studio.svg
deleted file mode 100644
index 73011d9c..00000000
--- a/docs/public/homepage/supported-platforms/visual-studio.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 96 96" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(1,0,0,1,0,-0.25)">
-        <path d="M0,69.33L0,26.67C0.009,25.067 0.98,23.617 2.46,23L9.73,20C11.111,19.406 12.715,19.638 13.87,20.6L15.5,22L34.11,37.259L66,2C67.795,0.214 70.536,-0.252 72.82,0.84L92.6,10.35C94.676,11.348 96.001,13.457 96,15.76L96,15.77L96,80.23L96,80.24C96.001,82.543 94.676,84.652 92.6,85.65L72.82,95.16C70.536,96.252 67.795,95.786 66,94L34.11,58.741L15.5,74L13.87,75.4C12.725,76.379 11.12,76.631 9.73,76.05L2.46,73C0.98,72.383 0.009,70.933 0,69.33ZM24.395,48L12,34.295L12,61.705L24.395,48ZM72,27.673L47.21,48L72,68.327L72,27.673Z" style="fill:rgb(136,136,136);"/>
-    </g>
-</svg>
diff --git a/docs/public/homepage/supported-platforms/vscode.svg b/docs/public/homepage/supported-platforms/vscode.svg
deleted file mode 100644
index 1bd36e5f..00000000
--- a/docs/public/homepage/supported-platforms/vscode.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <path d="M1.298,36.417C-0.516,34.763 -0.513,31.906 1.303,30.255L6.809,25.246C7.591,24.535 8.581,24.17 9.578,24.163C10.474,24.154 11.376,24.434 12.134,25.01L29.302,38.034L68.708,2.083C68.942,1.849 69.191,1.637 69.453,1.447C70.532,0.662 71.823,0.255 73.129,0.258C74.053,0.253 74.987,0.455 75.858,0.874L96.459,10.781C98.623,11.822 100,14.011 100,16.413L100,16.427L100,83.573L100,83.587C100,85.989 98.623,88.179 96.459,89.22L75.858,99.126C74.984,99.547 74.048,99.748 73.121,99.742C72.345,99.743 71.575,99.599 70.851,99.317C70.064,99.01 69.332,98.54 68.708,97.917L29.302,61.966L12.134,74.991C11.386,75.558 10.498,75.838 9.613,75.838C8.605,75.838 7.6,75.474 6.809,74.754L1.303,69.745C-0.513,68.094 -0.516,65.237 1.298,63.583L16.186,50L1.298,36.417ZM74.954,72.667L74.954,27.333L45.076,50L74.954,72.667Z" style="fill:rgb(136,136,136);"/>
-</svg>
diff --git a/docs/public/homepage/supported-platforms/windows.svg b/docs/public/homepage/supported-platforms/windows.svg
deleted file mode 100644
index 9dca32a8..00000000
--- a/docs/public/homepage/supported-platforms/windows.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 93.7l183.6-25.3v177.4H0V93.7zm0 324.6l183.6 25.3V268.4H0v149.9zm203.8 28L448 480V268.4H203.8v177.9zm0-380.6v180.1H448V32L203.8 65.7z" fill="#888"/></svg>
\ No newline at end of file
diff --git a/docs/public/logo-full.svg b/docs/public/logo-full.svg
deleted file mode 100644
index 5748d998..00000000
--- a/docs/public/logo-full.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2813 692" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g><g><g><path d="M1162.35,361.163c0,29.487 -4.683,54.887 -14.046,76.204c-9.362,21.312 -22.5,37.979 -39.412,49.995l54.508,42.767l-27.463,25.367l-64.362,-51.15c-10.063,2.512 -20.683,3.771 -31.862,3.771c-24.038,-0 -45.355,-5.905 -63.942,-17.713c-18.588,-11.808 -33.017,-28.65 -43.288,-50.525c-10.275,-21.871 -15.55,-47.2 -15.829,-75.992l0,-22.012c0,-29.35 5.1,-55.275 15.304,-77.775c10.205,-22.5 24.634,-39.725 43.292,-51.675c18.654,-11.95 40.004,-17.925 64.042,-17.925c24.6,-0 46.225,5.942 64.883,17.821c18.658,11.879 33.017,28.962 43.079,51.254c10.063,22.292 15.096,48.321 15.096,78.092l0,19.495Zm-40.25,-19.708c0,-35.916 -7.162,-63.625 -21.487,-83.121c-14.325,-19.495 -34.767,-29.241 -61.321,-29.241c-25.296,-0 -45.246,9.675 -59.85,29.033c-14.604,19.358 -22.117,46.225 -22.538,80.604l0,22.434c0,34.937 7.304,62.47 21.909,82.595c14.604,20.125 34.904,30.188 60.9,30.188c25.995,-0 46.12,-9.467 60.375,-28.404c14.254,-18.938 21.591,-46.088 22.012,-81.446l0,-22.642Z" style="fill:#595959;fill-rule:nonzero;"/><path d="M1358.36,481.496c-15.096,17.746 -37.246,26.621 -66.459,26.621c-24.175,-0 -42.591,-7.021 -55.237,-21.067c-12.65,-14.046 -19.042,-34.838 -19.184,-62.367l0,-147.587l38.784,-0l-0,146.537c-0,34.379 13.975,51.571 41.929,51.571c29.629,0 49.333,-11.042 59.116,-33.121l0,-164.987l38.784,-0l-0,226.829l-36.896,-0l-0.838,-22.429Z" style="fill:#595959;fill-rule:nonzero;"/><path d="M1549.13,508.117c-30.746,-0 -55.762,-10.096 -75.05,-30.292c-19.283,-20.196 -28.929,-47.204 -28.929,-81.025l0,-7.129c0,-22.5 4.3,-42.592 12.892,-60.271c8.595,-17.679 20.616,-31.513 36.058,-41.508c15.446,-9.992 32.179,-14.988 50.208,-14.988c29.492,0 52.409,9.713 68.763,29.142c16.35,19.425 24.525,47.237 24.525,83.433l-0,16.142l-153.663,-0c0.559,22.362 7.092,40.425 19.6,54.191c12.509,13.767 28.409,20.651 47.696,20.651c13.696,-0 25.296,-2.796 34.796,-8.388c9.504,-5.588 17.821,-12.996 24.95,-22.221l23.688,18.45c-19.009,29.209 -47.517,43.813 -85.534,43.813Zm-4.821,-203.346c-15.65,-0 -28.787,5.691 -39.412,17.083c-10.621,11.392 -17.188,27.358 -19.704,47.904l113.625,0l-0,-2.937c-1.121,-19.704 -6.43,-34.975 -15.934,-45.804c-9.504,-10.834 -22.362,-16.246 -38.575,-16.246Z" style="fill:#595959;fill-rule:nonzero;"/><path d="M1814.53,443.758c0,-10.479 -3.95,-18.62 -11.846,-24.421c-7.895,-5.799 -21.662,-10.795 -41.3,-14.991c-19.633,-4.192 -35.216,-9.221 -46.745,-15.092c-11.534,-5.871 -20.059,-12.858 -25.58,-20.966c-5.52,-8.105 -8.279,-17.746 -8.279,-28.93c0,-18.587 7.863,-34.308 23.584,-47.166c15.725,-12.859 35.812,-19.288 60.27,-19.288c25.717,0 46.575,6.638 62.58,19.917c16,13.275 24,30.258 24,50.942l-38.992,-0c-0,-10.621 -4.508,-19.775 -13.521,-27.463c-9.012,-7.687 -20.371,-11.529 -34.067,-11.529c-14.116,-0 -25.154,3.075 -33.12,9.221c-7.967,6.15 -11.95,14.187 -11.95,24.108c-0,9.367 3.704,16.425 11.108,21.175c7.408,4.75 20.792,9.296 40.146,13.625c19.358,4.333 35.046,9.504 47.066,15.517c12.017,6.008 20.93,13.241 26.73,21.695c5.8,8.455 8.7,18.763 8.7,30.921c-0,20.267 -8.109,36.513 -24.321,48.742c-16.213,12.229 -37.246,18.342 -63.1,18.342c-18.167,-0 -34.242,-3.213 -48.217,-9.642c-13.975,-6.429 -24.912,-15.408 -32.808,-26.938c-7.896,-11.533 -11.846,-24.004 -11.846,-37.42l38.783,-0c0.7,12.995 5.904,23.304 15.621,30.921c9.713,7.616 22.533,11.425 38.467,11.425c14.675,-0 26.45,-2.971 35.325,-8.909c8.875,-5.942 13.312,-13.871 13.312,-23.796Z" style="fill:#595959;fill-rule:nonzero;"/><path d="M1956.46,222.171l0,54.925l42.346,-0l0,29.979l-42.346,0l0,140.846c0,9.092 1.884,15.917 5.659,20.462c3.775,4.546 10.204,6.821 19.287,6.821c4.471,0 10.621,-0.837 18.446,-2.516l0,31.262c-10.2,2.779 -20.125,4.167 -29.767,4.167c-17.329,-0 -30.4,-5.242 -39.204,-15.721c-8.804,-10.483 -13.204,-25.367 -13.204,-44.654l0,-140.667l-41.3,0l0,-29.979l41.3,-0l0,-54.925l38.783,-0Z" style="fill:#595959;fill-rule:nonzero;"/><path d="M2090.43,384.433l0,119.492l-40.25,0l0,-305.233l112.575,-0c33.404,-0 59.571,8.525 78.508,25.575c18.938,17.054 28.409,39.625 28.409,67.716c-0,29.625 -9.263,52.442 -27.779,68.446c-18.517,16 -45.038,24.004 -79.559,24.004l-71.904,0Zm0,-32.916l72.325,-0c21.521,-0 38.013,-5.075 49.475,-15.225c11.459,-10.15 17.192,-24.813 17.192,-43.996c-0,-18.2 -5.733,-32.758 -17.192,-43.679c-11.462,-10.921 -27.183,-16.592 -47.171,-17.013l-74.629,0l0,119.913Z" style="fill:#0094f9;fill-rule:nonzero;"/><path d="M2321.03,503.925l0,-305.233l86.163,-0c26.554,-0 50.033,5.87 70.437,17.612c20.404,11.738 36.163,28.438 47.275,50.1c11.109,21.663 16.733,46.542 16.875,74.633l0,19.496c0,28.792 -5.554,54.017 -16.667,75.68c-11.112,21.662 -26.975,38.291 -47.587,49.891c-20.617,11.6 -44.617,17.542 -72.013,17.821l-84.483,0Zm40.25,-272.321l0,239.409l42.35,-0c31.025,-0 55.167,-9.655 72.429,-28.955c17.259,-19.304 25.888,-46.791 25.888,-82.462l-0,-17.834c-0,-34.691 -8.138,-61.649 -24.421,-80.887c-16.283,-19.233 -39.379,-28.987 -69.287,-29.271l-46.959,0Z" style="fill:#0094f9;fill-rule:nonzero;"/><path d="M2770.91,369.129l-128.088,0l0,134.796l-40.25,0l0,-305.233l189.092,-0l-0,32.912l-148.842,0l0,104.613l128.088,-0l-0,32.912Z" style="fill:#0094f9;fill-rule:nonzero;"/></g></g></g><g><path d="M383.533,521.092c-93.804,39.879 -206.529,21.591 -282.971,-54.85c-100.483,-100.484 -100.483,-263.638 0.001,-364.117l1.141,-1.133l122.029,122.033c-31.575,30.854 -51.175,73.825 -51.175,121.317c0,93.825 76.492,170 170.709,170c12.179,-0 24.058,-1.275 35.516,-3.692c1.538,3.508 3.121,6.992 4.75,10.442Zm265.65,-38.579c27.5,-88.242 6.334,-188.442 -63.508,-258.284c-99.817,-99.816 -261.646,-100.216 -361.946,-1.208l-122.837,-122.842c62.087,-61.9 147.704,-100.179 242.187,-100.179c189.35,0 343.079,153.729 343.079,343.079c0,51.784 -11.495,100.9 -32.075,144.942c-1.62,-1.858 -3.258,-3.696 -4.9,-5.508Zm-139.416,-100.517l0.079,-0.358l-0.058,0.27l-0.021,0.088Zm0.25,-1.125l-0.071,0.316l0.129,-0.575l-0.058,0.259Zm0.229,-1.038l-0.071,0.321l0.121,-0.575l-0.05,0.254Zm0.217,-1.041l-0.067,0.325l0.117,-0.571l-0.05,0.246Zm0.212,-1.046l-0.067,0.333l0.113,-0.567l-0.046,0.234Zm0.208,-1.046l-0.066,0.337l0.108,-0.562l-0.042,0.225Zm0.2,-1.05l-0.066,0.346l0.104,-0.563l-0.038,0.217Zm0.192,-1.05l-0.062,0.35l0.1,-0.558l-0.038,0.208Zm0.188,-1.054l-0.063,0.354l0.096,-0.554l-0.033,0.2Zm0.179,-1.054l-0.063,0.358l0.096,-0.55l-0.033,0.192Zm0.175,-1.059l-0.063,0.367l0.092,-0.55l-0.029,0.183Zm0.166,-1.058l-0.058,0.371l0.083,-0.546l-0.025,0.175Zm0.163,-1.063l-0.058,0.375l0.079,-0.541l-0.021,0.166Zm0.154,-1.066l-0.058,0.383l0.079,-0.542l-0.021,0.159Zm0.146,-1.063l-0.054,0.388l0.075,-0.542l-0.021,0.154Zm0.142,-1.071l-0.055,0.396l0.071,-0.541l-0.016,0.145Zm0.133,-1.07l-0.05,0.4l0.067,-0.538l-0.017,0.138Zm0.129,-1.071l-0.05,0.404l0.063,-0.533l-0.013,0.129Zm0.121,-1.075l-0.046,0.412l0.058,-0.533l-0.012,0.121Zm0.112,-1.075l-0.045,0.416l0.058,-0.533l-0.013,0.117Zm0.109,-1.079l-0.042,0.421l0.05,-0.53l-0.008,0.109Zm0.1,-1.079l-0.042,0.425l0.05,-0.53l-0.008,0.105Zm0.1,-1.18l-0.046,0.529l0.046,-0.529Zm0.079,-0.987l-0.033,0.437l0.041,-0.525l-0.008,0.088Zm0.079,-1.088l-0.029,0.442l0.037,-0.521l-0.008,0.079Zm0.075,-1.087l-0.029,0.446l0.033,-0.517l-0.004,0.071Zm0.067,-1.092l-0.029,0.454l0.033,-0.516l-0.004,0.062Zm0.058,-1.092l-0.025,0.459l0.029,-0.513l-0.004,0.054Zm0.054,-1.091l-0.021,0.458l0.021,-0.508l0,0.05Zm0.046,-1.096l-0.021,0.462l0.021,-0.504l0,0.042Zm0.038,-1.096l-0.017,0.458l0.017,-0.495l-0,0.037Zm0.033,-1.1l-0.013,0.458l0.013,-0.487l-0,0.029Zm0.025,-1.1l-0.013,0.446l0.013,-0.467l-0,0.021Zm0.017,-1.104l-0.009,0.425l0.009,-0.438l-0,0.013Zm-232.559,-160.679c-10.387,4.025 -20.279,9.037 -29.566,14.921c-9.284,5.879 -17.963,12.629 -25.917,20.133c15.908,-15.008 34.712,-27 55.483,-35.054Zm111.013,-4.363c1.625,0.488 3.246,0.996 4.85,1.534c1.608,0.533 3.2,1.087 4.787,1.666c-3.171,-1.158 -6.383,-2.225 -9.637,-3.2Zm-7.038,-1.941c0.529,0.133 1.054,0.27 1.584,0.408c0.525,0.137 1.054,0.279 1.583,0.425c-1.05,-0.288 -2.108,-0.567 -3.167,-0.833Zm-22.191,-4.075c3.608,0.416 7.179,0.95 10.712,1.587c3.533,0.638 7.029,1.388 10.488,2.238c-6.913,-1.705 -13.988,-2.988 -21.2,-3.825Zm-16.425,-1.113c-1.163,-0.025 -2.33,-0.033 -3.496,-0.033c1.166,-0 2.333,0.008 3.496,0.033l1.162,0.029l1.054,0.029l0.367,0.017l0.896,0.029c0.721,0.029 1.437,0.063 2.158,0.1l0.15,0.009l0.346,0.02l0.458,0.025l0.346,0.021l0.575,0.038l0.288,0.016l0.125,0.009l0.162,0.008l1.146,0.083l1.146,0.088l0.166,0.012l0.121,0.009l0.288,0.025l0.571,0.05l0.341,0.029l0.229,0.021l0.225,0.021l0.346,0.029l0.567,0.058l0.287,0.025l0.121,0.013c0.434,0.041 0.867,0.087 1.3,0.133l-1.3,-0.133l-0.408,-0.038l-0.913,-0.087l-0.454,-0.042l-0.912,-0.079l-0.409,-0.034l-1.312,-0.1l-1.308,-0.091l-0.413,-0.025l-0.921,-0.059l-0.458,-0.025l-0.496,-0.029l-3.054,-0.129l-1.421,-0.046l-1.162,-0.029Z" style="fill:#cbcbcb;"/><path d="M485.271,655.354c-43.325,19.779 -91.479,30.804 -142.192,30.804c-189.35,0 -343.079,-153.729 -343.079,-343.079c0,-94.237 38.079,-179.654 99.679,-241.687l0.808,0.808c-100.408,100.471 -100.387,263.579 0.075,364.042c76.45,76.45 189.18,94.462 282.971,54.587c24.342,51.55 59.175,97.488 101.738,134.525Zm24.496,-273.358c2.754,-12.113 4.208,-24.717 4.208,-37.654c0,-93.825 -76.492,-169.996 -170.708,-169.996c-47.146,-0 -89.854,19.071 -120.754,49.883c100.216,-100.217 262.945,-100.217 363.162,0c69.842,69.842 91.008,170.042 63.508,258.279c-38.583,-42.596 -86.025,-77.066 -139.416,-100.512Z" style="fill:#929292;"/><path d="M411.696,413.038c154.117,-0.246 273.883,122.591 274.458,272.687l0.004,1.775c-151.479,0 -274.462,-122.983 -274.462,-274.463Z" style="fill:#8ecbfe;"/><path d="M426.179,500.95c169.454,-77.662 259.988,90.258 259.988,184.938c-0,0.537 -0,1.075 -0.009,1.612c-115.104,-0.65 -222.762,-74.371 -259.979,-186.55Z" style="fill:#0094f9;"/></g></svg>
\ No newline at end of file
diff --git a/docs/public/minimal-api.png b/docs/public/minimal-api.png
deleted file mode 100644
index 5aeca31f..00000000
Binary files a/docs/public/minimal-api.png and /dev/null differ
diff --git a/docs/public/minimal-api.webp b/docs/public/minimal-api.webp
new file mode 100644
index 00000000..ec2b6cd3
Binary files /dev/null and b/docs/public/minimal-api.webp differ
diff --git a/docs/public/nuget.svg b/docs/public/nuget.svg
deleted file mode 100644
index e9723f94..00000000
--- a/docs/public/nuget.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 72 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M13.965,3.255l-5.01,0c-0.008,-0 -0.015,-0 -0.023,-0c-2.843,-0 -5.182,2.339 -5.182,5.182c-0,0.003 -0,0.005 0,0.008l0,5.01c0,2.843 2.339,5.183 5.182,5.183l5.011,-0c2.843,-0 5.182,-2.34 5.182,-5.183c0,-0.003 0,-0.005 0,-0.007l0,-5.003c0.004,-2.837 -2.323,-5.178 -5.16,-5.19Zm-5.063,5.603c-0.281,0.287 -0.668,0.449 -1.07,0.449c-0.823,-0 -1.5,-0.677 -1.5,-1.5c-0,-0.823 0.677,-1.5 1.5,-1.5c0.498,-0 0.964,0.248 1.243,0.661c0.398,0.588 0.325,1.382 -0.173,1.89Zm4.973,7.267c-1.44,0 -2.625,-1.185 -2.625,-2.625c-0,-1.44 1.185,-2.625 2.625,-2.625c1.44,0 2.625,1.185 2.625,2.625c-0,1.44 -1.185,2.625 -2.625,2.625Z" style="fill:#929292;fill-rule:nonzero;"/><g id="mark-2-path"></g><path id="Shape" d="M65.063,11.663c0.067,-1.272 -0.324,-2.526 -1.103,-3.533c-0.786,-0.9 -1.941,-1.394 -3.135,-1.343c-1.29,-0.021 -2.527,0.528 -3.375,1.5c-0.922,1.05 -1.408,2.414 -1.358,3.81c-0.08,1.384 0.359,2.748 1.23,3.825c0.873,0.957 2.127,1.477 3.421,1.418c1.228,0.055 2.442,-0.284 3.465,-0.967l0.232,-0.165l0,-2.813l-0.907,0.75c-0.689,0.569 -1.553,0.881 -2.445,0.885c-0.654,0.052 -1.298,-0.184 -1.763,-0.645c-0.34,-0.383 -0.552,-0.863 -0.608,-1.373l6.33,0l0.016,-1.35Zm-6.196,-1.027c0.119,-0.357 0.316,-0.683 0.578,-0.953c0.342,-0.367 0.825,-0.571 1.327,-0.562c0.462,-0.033 0.914,0.15 1.223,0.495c0.234,0.291 0.382,0.642 0.427,1.012l-3.555,0.008Z" style="fill:#929292;fill-rule:nonzero;"/><path id="Shape-2" d="M41.73,12.743c0.034,0.602 -0.159,1.196 -0.54,1.665c-0.324,0.385 -0.809,0.601 -1.313,0.585c-1.102,-0.001 -1.62,-0.668 -1.62,-2.251l0,-5.745l-2.557,0l0,5.94c0,2.843 1.297,4.396 3.75,4.396c0.808,0.023 1.6,-0.225 2.25,-0.705l0,0.494l2.565,0l0,-10.125l-2.535,0l0,5.745Z" style="fill:#929292;fill-rule:nonzero;"/><path id="Shape-3" d="M52.575,7.417l-0.052,0.113c-0.606,-0.461 -1.34,-0.723 -2.1,-0.75c-1.33,-0.052 -2.609,0.53 -3.443,1.568c-0.86,1.154 -1.293,2.574 -1.222,4.012c-0.065,1.299 0.343,2.578 1.147,3.6c0.769,0.921 1.921,1.439 3.12,1.402c0.943,-0.057 1.84,-0.426 2.55,-1.05c-0.075,1.875 -0.937,2.723 -2.737,2.723c-0.92,-0.022 -1.819,-0.281 -2.61,-0.75l-0.84,-0.473l-0,2.753l0.307,0.157c0.982,0.482 2.064,0.721 3.157,0.698c3.466,-0 5.251,-1.92 5.251,-5.543l-0,-8.917l-2.528,-0l0,0.457Zm0,5.1c0.033,0.671 -0.187,1.329 -0.615,1.845c-0.373,0.439 -0.924,0.687 -1.5,0.675c-0.583,0.033 -1.146,-0.225 -1.5,-0.69c-0.43,-0.598 -0.642,-1.326 -0.6,-2.062c-0.055,-0.843 0.169,-1.682 0.638,-2.385c0.386,-0.505 0.999,-0.787 1.635,-0.75c0.526,-0.015 1.034,0.202 1.387,0.592c0.387,0.401 0.593,0.944 0.57,1.5l-0.015,1.275Z" style="fill:#929292;fill-rule:nonzero;"/><path id="Shape-4" d="M30.697,6.787c-0.875,-0.02 -1.732,0.264 -2.422,0.803l0,-0.592l-2.565,-0l0,10.125l2.565,-0l0,-5.693c-0.026,-0.611 0.177,-1.211 0.57,-1.68c0.335,-0.406 0.839,-0.636 1.365,-0.623c1.043,0 1.5,0.675 1.5,2.303l0,5.693l2.603,-0l-0,-6.061c0.069,-1.111 -0.252,-2.212 -0.908,-3.112c-0.67,-0.79 -1.673,-1.221 -2.707,-1.163Z" style="fill:#929292;fill-rule:nonzero;"/><path id="Shape-5" d="M71.393,9.352l-0.001,-2.354l-2.249,-0l-0.001,-2.873l-2.579,0.825l-0,2.048l-1.553,-0l0,2.355l1.552,-0l0,4.762c0,2.055 1.028,3.203 2.925,3.203c0.562,0.021 1.119,-0.1 1.62,-0.353l0.293,-0.157l-0,-2.693l-0.9,0.652c-0.173,0.129 -0.385,0.195 -0.6,0.188c-0.315,0 -0.495,-0.067 -0.578,-0.172c-0.153,-0.29 -0.219,-0.619 -0.187,-0.946l-0,-4.5l2.257,0.015Z" style="fill:#929292;fill-rule:nonzero;"/><circle cx="2.063" cy="2.063" r="2.063" style="fill:#929292;"/></svg>
\ No newline at end of file
diff --git a/docs/public/patterns-and-practices/chart.png b/docs/public/patterns-and-practices/chart.png
deleted file mode 100644
index 7289f5f8..00000000
Binary files a/docs/public/patterns-and-practices/chart.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/complex-graphics.png b/docs/public/patterns-and-practices/complex-graphics.png
deleted file mode 100644
index a40d720b..00000000
Binary files a/docs/public/patterns-and-practices/complex-graphics.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/complex-layout.png b/docs/public/patterns-and-practices/complex-layout.png
deleted file mode 100644
index 066cada5..00000000
Binary files a/docs/public/patterns-and-practices/complex-layout.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/component-example.png b/docs/public/patterns-and-practices/component-example.png
deleted file mode 100644
index cd67a275..00000000
Binary files a/docs/public/patterns-and-practices/component-example.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/custom-font.png b/docs/public/patterns-and-practices/custom-font.png
deleted file mode 100644
index d081a1f3..00000000
Binary files a/docs/public/patterns-and-practices/custom-font.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/defined-fonts.png b/docs/public/patterns-and-practices/defined-fonts.png
deleted file mode 100644
index b1cfa768..00000000
Binary files a/docs/public/patterns-and-practices/defined-fonts.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/domain-specific-language.png b/docs/public/patterns-and-practices/domain-specific-language.png
deleted file mode 100644
index 3746ca39..00000000
Binary files a/docs/public/patterns-and-practices/domain-specific-language.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-alternating-footer-1.png b/docs/public/patterns-and-practices/dynamic-alternating-footer-1.png
deleted file mode 100644
index 4fa6de69..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-alternating-footer-1.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-alternating-footer-2.png b/docs/public/patterns-and-practices/dynamic-alternating-footer-2.png
deleted file mode 100644
index c3cd9929..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-alternating-footer-2.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-progress-1.png b/docs/public/patterns-and-practices/dynamic-progress-1.png
deleted file mode 100644
index 1f5ca886..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-progress-1.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-progress-2.png b/docs/public/patterns-and-practices/dynamic-progress-2.png
deleted file mode 100644
index 90560796..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-progress-2.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-state-1.png b/docs/public/patterns-and-practices/dynamic-state-1.png
deleted file mode 100644
index 9b1b3660..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-state-1.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-state-2.png b/docs/public/patterns-and-practices/dynamic-state-2.png
deleted file mode 100644
index 5e1d847e..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-state-2.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-subtotals-1.png b/docs/public/patterns-and-practices/dynamic-subtotals-1.png
deleted file mode 100644
index 19cfe56c..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-subtotals-1.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/dynamic-subtotals-2.png b/docs/public/patterns-and-practices/dynamic-subtotals-2.png
deleted file mode 100644
index c96ba223..00000000
Binary files a/docs/public/patterns-and-practices/dynamic-subtotals-2.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/execution-order-1.png b/docs/public/patterns-and-practices/execution-order-1.png
deleted file mode 100644
index cea28f9b..00000000
Binary files a/docs/public/patterns-and-practices/execution-order-1.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/execution-order-2.png b/docs/public/patterns-and-practices/execution-order-2.png
deleted file mode 100644
index 5fd1d1a6..00000000
Binary files a/docs/public/patterns-and-practices/execution-order-2.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/extension-method.png b/docs/public/patterns-and-practices/extension-method.png
deleted file mode 100644
index 5856cee7..00000000
Binary files a/docs/public/patterns-and-practices/extension-method.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/global-text-style.png b/docs/public/patterns-and-practices/global-text-style.png
deleted file mode 100644
index 462cfd35..00000000
Binary files a/docs/public/patterns-and-practices/global-text-style.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/image-placeholder.png b/docs/public/patterns-and-practices/image-placeholder.png
deleted file mode 100644
index 7497214b..00000000
Binary files a/docs/public/patterns-and-practices/image-placeholder.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/material-colors.png b/docs/public/patterns-and-practices/material-colors.png
deleted file mode 100644
index 4d05f18a..00000000
Binary files a/docs/public/patterns-and-practices/material-colors.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/ordered-list.png b/docs/public/patterns-and-practices/ordered-list.png
deleted file mode 100644
index 5f615452..00000000
Binary files a/docs/public/patterns-and-practices/ordered-list.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/random-colors.png b/docs/public/patterns-and-practices/random-colors.png
deleted file mode 100644
index a9a10877..00000000
Binary files a/docs/public/patterns-and-practices/random-colors.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/special-header-on-first-page-1.png b/docs/public/patterns-and-practices/special-header-on-first-page-1.png
deleted file mode 100644
index f49e3e4a..00000000
Binary files a/docs/public/patterns-and-practices/special-header-on-first-page-1.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/special-header-on-first-page-2.png b/docs/public/patterns-and-practices/special-header-on-first-page-2.png
deleted file mode 100644
index 93d2b6e1..00000000
Binary files a/docs/public/patterns-and-practices/special-header-on-first-page-2.png and /dev/null differ
diff --git a/docs/public/patterns-and-practices/special-header-on-first-page-3.png b/docs/public/patterns-and-practices/special-header-on-first-page-3.png
deleted file mode 100644
index ffff54c1..00000000
Binary files a/docs/public/patterns-and-practices/special-header-on-first-page-3.png and /dev/null differ
diff --git a/docs/public/questpdf-logo-dark.png b/docs/public/questpdf-logo-dark.png
new file mode 100644
index 00000000..f660c071
Binary files /dev/null and b/docs/public/questpdf-logo-dark.png differ
diff --git a/docs/public/questpdf-logo-light.png b/docs/public/questpdf-logo-light.png
new file mode 100644
index 00000000..4a615d87
Binary files /dev/null and b/docs/public/questpdf-logo-light.png differ
diff --git a/docs/public/questpdf-logo-nav-dark.webp b/docs/public/questpdf-logo-nav-dark.webp
new file mode 100644
index 00000000..6b883f2a
Binary files /dev/null and b/docs/public/questpdf-logo-nav-dark.webp differ
diff --git a/docs/public/questpdf-logo-nav-light.webp b/docs/public/questpdf-logo-nav-light.webp
new file mode 100644
index 00000000..773b7ba1
Binary files /dev/null and b/docs/public/questpdf-logo-nav-light.webp differ
diff --git a/docs/public/star.svg b/docs/public/star.svg
deleted file mode 100644
index b1c2efe2..00000000
--- a/docs/public/star.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(2.07254,0,0,2.07254,-12.8705,-11.8342)">
-        <path d="M15.58,17L12,14.84L8.42,17L9.37,12.93L6.21,10.2L10.38,9.84L12,6L13.62,9.83L17.79,10.19L14.63,12.92L15.58,17" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
-    </g>
-    <defs>
-        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(11.58,11.58,-11.58,11.58,6.21,5.71)"><stop offset="0" style="stop-color:rgb(237,204,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,144,27);stop-opacity:1"/></linearGradient>
-    </defs>
-</svg>
diff --git a/docs/quick-start.md b/docs/quick-start.md
index c2880a5a..333642a7 100644
--- a/docs/quick-start.md
+++ b/docs/quick-start.md
@@ -64,7 +64,7 @@ Document.Create(container =>
 
 This code generates a PDF document with the following layout:
 
-![example](/minimal-api.png)
+![example](/minimal-api.webp)
 
 ## License
 
@@ -85,4 +85,4 @@ For learning and evaluation, you can use the QuestPDF Evaluation license type.
 
 QuestPDF's Fluent API scales seamlessly with your document complexity. To explore its full potential, check out [the In-Depth Invoice Tutorial](/invoice-tutorial.md), where you'll learn to create a professional invoice in less than 200 lines of code.
 
-![invoice](/getting-started/invoice.png)
+![invoice](/getting-started/invoice.webp)
diff --git a/package-lock.json b/package-lock.json
index 1ebb720b..099cc406 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,15 @@
       "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
+        "@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-regular-svg-icons": "7.3.1",
+        "@fortawesome/pro-solid-svg-icons": "7.3.1",
         "@paddle/paddle-js": "1.6.5",
         "@types/node": "^22.19.21",
         "image-size": "^2.0.4",
-        "sass": "^1.105.2",
+        "shiki": "^4.6.0",
         "vitepress": "^2.0.0-alpha.21",
         "vitepress-plugin-llms": "^1.14.0",
         "vue": "3.5.44"
@@ -56,9 +61,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.11",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.11.tgz",
-      "integrity": "sha512-OZ6+oaK7GMyg3IfCpj8JOmn8n+w2rJbDT0LLfVDTLb1ZFeKDh3AiNELgCMUw175IJHSkLl74hG0M0VLsvx+gag==",
+      "version": "7.29.12",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.12.tgz",
+      "integrity": "sha512-WJ7JBp/Q4+z/ImydtI7jS6NVco5++632ExBemSX+Ysb+G1lCwQ5BVo3SY+jGGOcZXI4ZccbZSUSJLNBW6eEpJg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -106,379 +111,113 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@iconify-json/simple-icons": {
-      "version": "1.2.101",
-      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.2.101.tgz",
-      "integrity": "sha512-MXJkMZDancJ/9I+Bgdthi9kXvn3AwWStxoTHwEPwAFQ9kMLBASO1BSstg52fNtjXeizm1Wi91R+QnWxNGkWHPQ==",
-      "dev": true,
-      "license": "CC0-1.0",
-      "dependencies": {
-        "@iconify/types": "*"
-      }
-    },
-    "node_modules/@iconify/types": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
-      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
-      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@oxc-project/types": {
-      "version": "0.155.0",
-      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.155.0.tgz",
-      "integrity": "sha512-SeE8JPwW1xs1tHeNycjUtUBdhorRa8o4jlvjwk49R7/Z291i+4DQa7JJIgOm/TaYQZx+QrPQbVJ/9c8dMIZN8Q==",
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "7.3.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.3.1.tgz",
+      "integrity": "sha512-k0C0sdHmZtAo6dRDtd1Z/qcpyHbL0CKsjV8seMY/21xGhY5Wsv0XRmiI/xEEH4y2c9b1+jvgNs/3EqhV27yUEA==",
       "dev": true,
       "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/oxc-project"
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/@paddle/paddle-js": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/@paddle/paddle-js/-/paddle-js-1.6.5.tgz",
-      "integrity": "sha512-uFRvptUzYRqRlqTU5XmfcZWC9BGVYpZNdANd3giJjZbJlHesnE4gn8PyjtYpesU1ar2ZGPuJxHvrrSIV9jjdVw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
-      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "7.3.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-7.3.1.tgz",
+      "integrity": "sha512-8eiNzycuFhy3mZsi5EVO8JpO3H8l7/kSCl4Gk4iUew9hJuzYFqAAD6kqgeEup3+YZ9hL+5cjjorGzrRLkYuURg==",
       "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
+      "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "detect-libc": "^2.0.3",
-        "is-glob": "^4.0.3",
-        "node-addon-api": "^7.0.0",
-        "picomatch": "^4.0.3"
+        "@fortawesome/fontawesome-common-types": "7.3.1"
       },
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.6",
-        "@parcel/watcher-darwin-arm64": "2.5.6",
-        "@parcel/watcher-darwin-x64": "2.5.6",
-        "@parcel/watcher-freebsd-x64": "2.5.6",
-        "@parcel/watcher-linux-arm-glibc": "2.5.6",
-        "@parcel/watcher-linux-arm-musl": "2.5.6",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
-        "@parcel/watcher-linux-arm64-musl": "2.5.6",
-        "@parcel/watcher-linux-x64-glibc": "2.5.6",
-        "@parcel/watcher-linux-x64-musl": "2.5.6",
-        "@parcel/watcher-win32-arm64": "2.5.6",
-        "@parcel/watcher-win32-ia32": "2.5.6",
-        "@parcel/watcher-win32-x64": "2.5.6"
-      }
-    },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
-      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">=6"
       }
     },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
-      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@fortawesome/pro-duotone-svg-icons": {
+      "version": "7.3.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/pro-duotone-svg-icons/-/pro-duotone-svg-icons-7.3.1.tgz",
+      "integrity": "sha512-W7rZTV+VCfS+7jiCx9dyHQ/mG3DkXUDMZ6PTVx9JMGt8ZbB2CJyWCU6p+e2WnfpFAVVdGbEK1T/z+AsrbMRv8w==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
+      "license": "UNLICENSED",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.3.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
-      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">=6"
       }
     },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
-      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
-      "cpu": [
-        "x64"
-      ],
+    "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",
+      "integrity": "sha512-7iJTicd2X4cgUQ5/HlMIUCMtePYNmclMeunu+tvyErsqzu2cMmS3nwaLGNikwX1ISHRybWZqkMYb5l4/so3V5Q==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
+      "license": "UNLICENSED",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.3.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
-      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">=6"
       }
     },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
-      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
-      "cpu": [
-        "arm"
-      ],
+    "node_modules/@fortawesome/pro-solid-svg-icons": {
+      "version": "7.3.1",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/pro-solid-svg-icons-7.3.1.tgz",
+      "integrity": "sha512-GIpB5nFXFtHJwMSRfNPOP0HekDAUdMi0RgKmMIebXtB8bcPA+vpLmzEryYhdnEpnMRp099u44ewLZ8IIIy9Psw==",
       "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
+      "license": "UNLICENSED",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "7.3.1"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
-      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
-      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "node": ">=6"
       }
     },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
-      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@iconify-json/simple-icons": {
+      "version": "1.2.101",
+      "resolved": "https://registry.npmjs.org/@iconify-json/simple-icons/-/simple-icons-1.2.101.tgz",
+      "integrity": "sha512-MXJkMZDancJ/9I+Bgdthi9kXvn3AwWStxoTHwEPwAFQ9kMLBASO1BSstg52fNtjXeizm1Wi91R+QnWxNGkWHPQ==",
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+      "license": "CC0-1.0",
+      "dependencies": {
+        "@iconify/types": "*"
       }
     },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
-      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
       "dev": true,
-      "libc": [
-        "musl"
-      ],
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+      "license": "MIT"
     },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
-      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
-      "cpu": [
-        "arm64"
-      ],
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz",
+      "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+      "license": "MIT"
     },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
-      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
-      "cpu": [
-        "ia32"
-      ],
+    "node_modules/@oxc-project/types": {
+      "version": "0.156.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.156.0.tgz",
+      "integrity": "sha512-1Duyg48TdJNdyhEB8Xn1L36bT9Pv6GUtlKjHxOys8xkaF/rQq3XJE+bAurSK/AgIz5mGFsb77cn9Pb20+WCScw==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
+        "url": "https://github.com/sponsors/oxc-project"
       }
     },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
-      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
-      "cpu": [
-        "x64"
-      ],
+    "node_modules/@paddle/paddle-js": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@paddle/paddle-js/-/paddle-js-1.6.5.tgz",
+      "integrity": "sha512-uFRvptUzYRqRlqTU5XmfcZWC9BGVYpZNdANd3giJjZbJlHesnE4gn8PyjtYpesU1ar2ZGPuJxHvrrSIV9jjdVw==",
       "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+      "license": "Apache-2.0"
     },
     "node_modules/@rolldown/binding-android-arm-eabi": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.15.tgz",
-      "integrity": "sha512-aLcgK9gIJ3YRvrrtfSBbRa27F5WrpiTaPulnFpsHPxpUHgFlSgnU4854MHwoRGEBhfRJDWCS2WQ7lIjskE9Olw==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.16.tgz",
+      "integrity": "sha512-ia3DwAs0OsMGS7+IConptSiyk9pEXkOx/AbJ2n/lAGxH3QkWQus1t8d7gnAT38FCU2sQu8lUbeR6AiZFv4JxaA==",
       "cpu": [
         "arm"
       ],
@@ -493,9 +232,9 @@
       }
     },
     "node_modules/@rolldown/binding-android-arm64": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.15.tgz",
-      "integrity": "sha512-xD7DdZCrbThKuxNg7ooQmvp07ys4J/pnSEMTG3/OdOWl6daC67m/Q4fL78sRHMxTH/N4fGUbYhcPM0MF5WFHkg==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.16.tgz",
+      "integrity": "sha512-kx5wBiMB6E7TEvpl2B9gjLU004BkvEm2Dr941BFjx/SontPwSzNuQUIoVKxHHoSjpFIfHMmcguyLOtyn0hObRg==",
       "cpu": [
         "arm64"
       ],
@@ -510,9 +249,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-arm64": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.15.tgz",
-      "integrity": "sha512-m2WuQ6r0B4OTYxyPpNLtXaMRbRDUbG8YQV2Q3KTdSSK8Th6KHCnC8jVCJt8bvYeSB5WivkkNbc85mKadaSdOxA==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.16.tgz",
+      "integrity": "sha512-qslZrXnKJU4cUpjoAmtAo/KQM9e2IRMlmpig6Zpwj+8KWxW8v+nkAf9216Bsek9lOC1jvg2yCjygCFo2f83msQ==",
       "cpu": [
         "arm64"
       ],
@@ -527,9 +266,9 @@
       }
     },
     "node_modules/@rolldown/binding-darwin-x64": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.15.tgz",
-      "integrity": "sha512-5RtnsHM36nodM9WbMy+zip0LGS/G+y5wro5RHrpOlr4ac24+1zSi9kiV2MP1myZeZ/ifEHfulQcWjnAXzc2C2A==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.16.tgz",
+      "integrity": "sha512-FdF+y48ND13eAyM2mQn+85kvAqNlvRWROy2rhgA463X/0Gv4vGtazZtfaF1mRBLscYvtOlh4QnLjOWiFzX69OQ==",
       "cpu": [
         "x64"
       ],
@@ -544,9 +283,9 @@
       }
     },
     "node_modules/@rolldown/binding-freebsd-x64": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.15.tgz",
-      "integrity": "sha512-g3l09pyFqhu+135JKkbkwiKGQmwU5hUMUPJ4VdBADvuqR8d33L6H578rh8m7rtxbdp+VmX/+nzI7nvhSZlzpUQ==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.16.tgz",
+      "integrity": "sha512-ddjqFM5e95AgLbUPtKIS7V1KTVlA0RUgCVr5mn+/IEhsdy3pr+Vuj/HZ7nlMN2FyxIwUktOH1LEPIQXO1v9y1Q==",
       "cpu": [
         "x64"
       ],
@@ -561,9 +300,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.15.tgz",
-      "integrity": "sha512-nIe3VugI97nGQtspPxDqA4sXMUpeiocKIP/CqpY/u/vgbT+alX+cVxu1C/oVBPKg4feNTmYovE91v4DgXvXNwQ==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.16.tgz",
+      "integrity": "sha512-tHdKWbFkFBI687iim3LIyIvyL7j66VvQYkDPss5Stn/qyE2tWkR1YD0dXmXPFKKqT/o5ZEJVsaRsWS2meQwGOA==",
       "cpu": [
         "arm"
       ],
@@ -578,9 +317,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-gnu": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.15.tgz",
-      "integrity": "sha512-iTBjXx+B5QSvgI89lJfmqh4wTh8NabR1YZIIN3hNx4zSG0EVfVqkOvLulNpG4251pbd6/IAmZ/LefVk1Y4rPhw==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.16.tgz",
+      "integrity": "sha512-FJiLGAblPBMlBEdbOqw6kW6QcXDWAf/oJu7gYs9ZJZwmg+K+/zjFLxPTIY9izJUzxzc24FHvmseyA0IvJSl17w==",
       "cpu": [
         "arm64"
       ],
@@ -598,9 +337,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-arm64-musl": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.15.tgz",
-      "integrity": "sha512-uN26XOnVR7rqQupG3V9oAG2EGGatWjcJHOeDOHUFCh4TBWmP2tHTFoVN13aYbwfm0aHqJAEmcwhAu6sooIjfqQ==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.16.tgz",
+      "integrity": "sha512-hrJpblMsrQ58U9veWpbXzkhV5zStunds6HWLprqq1qauvgBr1E6P+24kLj6lSLI9vjRn/RYpjprhkHQPKGWpNg==",
       "cpu": [
         "arm64"
       ],
@@ -618,9 +357,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-ppc64-gnu": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.15.tgz",
-      "integrity": "sha512-9nWkcdd+H+XhaA3fQIwpHnKIrfx/PQ6rO0pivr78Og07tXlUlctBBJoEYLPfhTmCR/QxEVdn6uPjHV5SymPhdw==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.16.tgz",
+      "integrity": "sha512-qJd/dC6j6CwLG9/s/RP2nb1RZ0GIgj7Ioj7x/SYa3RzjVrlzrmH0fhIOpfvqQDeIsdP0loi+kHaMhJzY1PBIaA==",
       "cpu": [
         "ppc64"
       ],
@@ -638,9 +377,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-s390x-gnu": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.15.tgz",
-      "integrity": "sha512-Ggh0ciFjLwIusLSLz7LZYEaGdxOAUJXI+Qu5JCbhPJJHEt8vP+IjRATTJheiJsdzzTYgUiHUiw3X1Ea3ZpMBdA==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.16.tgz",
+      "integrity": "sha512-Vx7Xg5uUJuNcujJjI70OICaH0EYj80BtOLZTSN7uOYg8QOLlyKnaG0IW7Fn/J0IpJsaKzmDKMhOQv1JBM9m9vg==",
       "cpu": [
         "s390x"
       ],
@@ -658,9 +397,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-gnu": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.15.tgz",
-      "integrity": "sha512-FHg60rS6DBePAYZ9X9F67x+JObFdmgn6tupA1C/a3B+CufFmTD4mX+e8M75tCiAO3foR/6xwVBI0KQiI7sn/rw==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.16.tgz",
+      "integrity": "sha512-TNKhgE3uJTsTzatUSSYt0Kgo+Oa2uSlSjz4r1aEIea7HX6ULBym4fAlYUhG1i6pjNf2njfCUAfKwr6C3E9Xg1w==",
       "cpu": [
         "x64"
       ],
@@ -678,9 +417,9 @@
       }
     },
     "node_modules/@rolldown/binding-linux-x64-musl": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.15.tgz",
-      "integrity": "sha512-/cvV/7v5VGz/moiz0XKRj2dE8DzsKyhIu1KpOvJGPjRywg3yscON889UGvAe8zfiJLHup7VLjBduoGWi3HusWQ==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.16.tgz",
+      "integrity": "sha512-7chXdpjXZ8qG0+mIxECN3cT9kvhZ3/oZhMX6Pp876P7CDrIy8nJswva6Mq357JR7eYXfuskwZxMeV1SzoZdHrA==",
       "cpu": [
         "x64"
       ],
@@ -698,9 +437,9 @@
       }
     },
     "node_modules/@rolldown/binding-openharmony-arm64": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.15.tgz",
-      "integrity": "sha512-MyzC5Hrv/sm+Z7TSGKP/j8001RO2xQm1zOpCNVL4j0cY/VhBZviludA2YFQ7i4lH6ZAXxQm0lcMdBzM+99mE7w==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.16.tgz",
+      "integrity": "sha512-Kwjt+7uNTJK5/MDkGWGVO2KQPnj8yAV75dMpfwyHZrJSXWHrniOB0aUEWlVYf3H1hOqFLIStLdM5QXq6bnKmOQ==",
       "cpu": [
         "arm64"
       ],
@@ -715,9 +454,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-arm64-msvc": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.15.tgz",
-      "integrity": "sha512-+PgYiS+AH5omy6L45ZLxybasauJaj3M8buoT83D+nzPmCayXlxUV9hydhciCKVyIg0B/v0BtXPDE1uGqNwCPpg==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.16.tgz",
+      "integrity": "sha512-/LH6WfjDRXXJz/p5xl4TmU+jpcnwcxbKEQBW/GZE0JHfN0lGIyTtsUEGaQ/q/GikkGJ2yLKe6pwm7AnEWO8pdw==",
       "cpu": [
         "arm64"
       ],
@@ -732,9 +471,9 @@
       }
     },
     "node_modules/@rolldown/binding-win32-x64-msvc": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.15.tgz",
-      "integrity": "sha512-HFZd2QNQYn1JbIi+Hpd7H+r/lkWxcfIu28nirZ6eCn2LafuvmExMlb/P96Sfx5tf7pPArw39IdhmCF8vmV+NhQ==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.16.tgz",
+      "integrity": "sha512-1lv1KvX0Z871zfk7vw+dnXMMnHNyDwMzWG8Kv3HxDXMOhzCX4SHc7HK319fInP0i+0p9D8brkfzL7pJOaGl+tw==",
       "cpu": [
         "x64"
       ],
@@ -756,31 +495,31 @@
       "license": "MIT"
     },
     "node_modules/@shikijs/core": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.5.0.tgz",
-      "integrity": "sha512-6CIgwq+bt2JZ3OSjb/nBkkwEf/CfpHcbam+Mg5Pllco7HAGRQ2/EFhZrrJtbyNTgKwknfVS+llsXGygiDGwJWw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-4.6.0.tgz",
+      "integrity": "sha512-bfd4OKgvoyXYiYmMRuleA656P4V7M/Du9lcTl38Ngm6KszMj7bq4J1IGZwSYR4c95Tv5UQALtYNWUwaI9UT3xw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/primitive": "4.5.0",
-        "@shikijs/types": "4.5.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
+        "@shikijs/primitive": "4.6.0",
+        "@shikijs/types": "4.6.0",
+        "@shikijs/vscode-textmate": "^10.1.0",
         "@types/hast": "^3.0.5",
-        "hast-util-to-html": "^9.0.5"
+        "hast-util-to-html": "^9.0.6"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/engine-javascript": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.5.0.tgz",
-      "integrity": "sha512-Ed6UdEj84LyYkwnxM5CvSMWAD+id9ExTYri0/+x41U9zrgNifPSS9lZm0JqBP0VfYI8yr8tY5nbNq9+p9R0kFA==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-4.6.0.tgz",
+      "integrity": "sha512-K0oqxFoL+kEMdz89mHLFO15Tsbv3kFZ6WR1cXZKMvLSc+oqaM00A6pyga1qSeXB22dP0tTiSApRcGBaKWsEccg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.5.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
+        "@shikijs/types": "4.6.0",
+        "@shikijs/vscode-textmate": "^10.1.0",
         "oniguruma-to-es": "^4.3.6"
       },
       "engines": {
@@ -788,41 +527,41 @@
       }
     },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.5.0.tgz",
-      "integrity": "sha512-dKVmbJecVdB9recl8a/CU4jdpNXyjJQrIcesIkpS70s5HS02ohpnCSpMUbotPnEUzbAcLQ+S4hwZYbkBBiTcJw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-4.6.0.tgz",
+      "integrity": "sha512-aggd6Q7SuJOXNnsUbfG2XesxBJKBMAw/PDTUo9PyRjMaaJJ2dNrI+q0C+25ARXAK9yLHAlwxc9oRT2u68YKZ7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.5.0",
-        "@shikijs/vscode-textmate": "^10.0.2"
+        "@shikijs/types": "4.6.0",
+        "@shikijs/vscode-textmate": "^10.1.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/langs": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.5.0.tgz",
-      "integrity": "sha512-wwBTqwduXSz0X4v9Qa2EWeFaYJEw1clCncWjoRNQRbVDu3SPRTRWucnouYapKj3b8Q+sk/41Vbc4B5c8nuYzLA==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-4.6.0.tgz",
+      "integrity": "sha512-1yMEX3oCVV54LUq/ovfpRkDQoYDkcvjSWFFa/YLUDMiSoRzMi2uxLJYbv41ahT8Lu9lFMaa7hecd3Q39trqUyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.5.0"
+        "@shikijs/types": "4.6.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/primitive": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.5.0.tgz",
-      "integrity": "sha512-UM7ShlA8oz0OWxLLO8BmO9Ip6fVqdkt8yF0EH7nOCqHfrx1eEAzF0ZUVK7L+I8NEgeu1PEWSRlxaiPPeCb4iDg==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/primitive/-/primitive-4.6.0.tgz",
+      "integrity": "sha512-c54+TQEo9ToqgfL/AU8FpjnV09+GA9Oa7M5ROkkXteZfp5XzpAJGXjjvZQFQioJOwm/w/6Z3lIzQstAkl8coag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.5.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
+        "@shikijs/types": "4.6.0",
+        "@shikijs/vscode-textmate": "^10.1.0",
         "@types/hast": "^3.0.5"
       },
       "engines": {
@@ -830,40 +569,40 @@
       }
     },
     "node_modules/@shikijs/themes": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.5.0.tgz",
-      "integrity": "sha512-zGb87H3UBbpuI4yoh5UguB1XbU+2BDU3kflM7UfZ+Cy2hWo9lBtqjSVK20gmLY6ukYl040hAypGXMgud9vul8Q==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-4.6.0.tgz",
+      "integrity": "sha512-qHAVAs80RiGD+IRuH9G+JPDOEc9A/kHsng4EzCUCwB9bLzW6Z0y9WETh2YyCcADJBmfrIaJ1Jp7KBNP6FHkgtQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "4.5.0"
+        "@shikijs/types": "4.6.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/transformers": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-4.5.0.tgz",
-      "integrity": "sha512-LM7twi043qCC3gRyGQfjoC2/sowzbEltWuruyRtT3RlBlk1hKzWk9ETnU7RcDBoVWQBmC8Mebnr7p28W7kPoaA==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-4.6.0.tgz",
+      "integrity": "sha512-oZ28gYlPOYspv6AD74lCb14AAJugSY/+nJxRWjH42yDbdLAdftVU/PP36tOhb435Sfop2UGWcRGXY7HLLveKCg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "4.5.0",
-        "@shikijs/types": "4.5.0"
+        "@shikijs/core": "4.6.0",
+        "@shikijs/types": "4.6.0"
       },
       "engines": {
         "node": ">=20"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.5.0.tgz",
-      "integrity": "sha512-drtPrtD8N0DENyD2cyt6Ajy+IWsiCLgMxODwLTpvH1UsN6a9jf90tNTPjqwHvA+0Lzu9e0txk8DjfqH1p9UJRw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-4.6.0.tgz",
+      "integrity": "sha512-+ENG1adsKt/X7cRYw1Nl7BEpBmPOjmQ7bR/eGmHuMlT8gtOFf3KEi5l31DJYyAWhW6Y6bjP1plU7FmaxWGENFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/vscode-textmate": "^10.0.2",
+        "@shikijs/vscode-textmate": "^10.1.0",
         "@types/hast": "^3.0.5"
       },
       "engines": {
@@ -1378,22 +1117,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/chokidar": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
-      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "readdirp": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 20.19.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/cliui": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -1660,9 +1383,9 @@
       }
     },
     "node_modules/hast-util-to-html": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
-      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "version": "9.0.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.6.tgz",
+      "integrity": "sha512-1SZUxCN3TtJAE7e2BQN2MBHsoZ1gnmi9GoCP5Di59CSWptIezSAW09yDZyVbanb78V9eCwrKqdQsjtfVTxYHWA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1728,13 +1451,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/immutable": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
-      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/is-extendable": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
@@ -1745,17 +1461,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -1766,20 +1471,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -2851,14 +2542,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/oniguruma-parser": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.12.2.tgz",
@@ -2975,20 +2658,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/readdirp": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
-      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 20.19.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/regex/-/regex-6.1.0.tgz",
@@ -3094,13 +2763,13 @@
       }
     },
     "node_modules/rolldown": {
-      "version": "1.2.15",
-      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.15.tgz",
-      "integrity": "sha512-6odND+fel5zVw3I4Yc2e69gvguDnX0CAAGiNDZSq4ik5WUcaLrkD2GLuog0XcODbor31hZ5ayEMgVDno+KPV5g==",
+      "version": "1.2.16",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.16.tgz",
+      "integrity": "sha512-bWvlMpFKiTfDKfnK7FC2MPgPeWCf/Kpwsq49ApdW+FQaBZb6O6dZ4MAPbPUjp7hYQrw/RobqCzn64BRrQecGHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@oxc-project/types": "=0.155.0",
+        "@oxc-project/types": "=0.156.0",
         "@rolldown/pluginutils": "^1.0.0"
       },
       "bin": {
@@ -3110,42 +2779,21 @@
         "node": "^20.19.0 || >=22.12.0"
       },
       "optionalDependencies": {
-        "@rolldown/binding-android-arm-eabi": "1.2.15",
-        "@rolldown/binding-android-arm64": "1.2.15",
-        "@rolldown/binding-darwin-arm64": "1.2.15",
-        "@rolldown/binding-darwin-x64": "1.2.15",
-        "@rolldown/binding-freebsd-x64": "1.2.15",
-        "@rolldown/binding-linux-arm-gnueabihf": "1.2.15",
-        "@rolldown/binding-linux-arm64-gnu": "1.2.15",
-        "@rolldown/binding-linux-arm64-musl": "1.2.15",
-        "@rolldown/binding-linux-ppc64-gnu": "1.2.15",
-        "@rolldown/binding-linux-s390x-gnu": "1.2.15",
-        "@rolldown/binding-linux-x64-gnu": "1.2.15",
-        "@rolldown/binding-linux-x64-musl": "1.2.15",
-        "@rolldown/binding-openharmony-arm64": "1.2.15",
-        "@rolldown/binding-win32-arm64-msvc": "1.2.15",
-        "@rolldown/binding-win32-x64-msvc": "1.2.15"
-      }
-    },
-    "node_modules/sass": {
-      "version": "1.106.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.106.1.tgz",
-      "integrity": "sha512-kD+Gi66vycZcbJt+42NC4z4PXNMcCajVrJPhqoKKXy5cOBMmJQt052CxIBcRjwYXeImHYOpu/ydWWGZQIenl7A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "chokidar": "^5.0.0",
-        "immutable": "^5.1.5",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=20.19.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
+        "@rolldown/binding-android-arm-eabi": "1.2.16",
+        "@rolldown/binding-android-arm64": "1.2.16",
+        "@rolldown/binding-darwin-arm64": "1.2.16",
+        "@rolldown/binding-darwin-x64": "1.2.16",
+        "@rolldown/binding-freebsd-x64": "1.2.16",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.2.16",
+        "@rolldown/binding-linux-arm64-gnu": "1.2.16",
+        "@rolldown/binding-linux-arm64-musl": "1.2.16",
+        "@rolldown/binding-linux-ppc64-gnu": "1.2.16",
+        "@rolldown/binding-linux-s390x-gnu": "1.2.16",
+        "@rolldown/binding-linux-x64-gnu": "1.2.16",
+        "@rolldown/binding-linux-x64-musl": "1.2.16",
+        "@rolldown/binding-openharmony-arm64": "1.2.16",
+        "@rolldown/binding-win32-arm64-msvc": "1.2.16",
+        "@rolldown/binding-win32-x64-msvc": "1.2.16"
       }
     },
     "node_modules/section-matter": {
@@ -3163,19 +2811,19 @@
       }
     },
     "node_modules/shiki": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.5.0.tgz",
-      "integrity": "sha512-OcRW72ngQvc+MSVWBRIovC/BTW589iUE/Vxav7VeM4RcY9MUjqB+IR6ILG1k9nuW6LiG/nct9uma4/MBtnZbmQ==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-4.6.0.tgz",
+      "integrity": "sha512-imjLsVHgPuWhvpU3P+zOekvMYqnel7QmKsFC4Sn0fCuAvaaalBsxwKEsrU8Ko5BdFnZA6Go/8a0RzahS634UgA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@shikijs/core": "4.5.0",
-        "@shikijs/engine-javascript": "4.5.0",
-        "@shikijs/engine-oniguruma": "4.5.0",
-        "@shikijs/langs": "4.5.0",
-        "@shikijs/themes": "4.5.0",
-        "@shikijs/types": "4.5.0",
-        "@shikijs/vscode-textmate": "^10.0.2",
+        "@shikijs/core": "4.6.0",
+        "@shikijs/engine-javascript": "4.6.0",
+        "@shikijs/engine-oniguruma": "4.6.0",
+        "@shikijs/langs": "4.6.0",
+        "@shikijs/themes": "4.6.0",
+        "@shikijs/types": "4.6.0",
+        "@shikijs/vscode-textmate": "^10.1.0",
         "@types/hast": "^3.0.5"
       },
       "engines": {
diff --git a/package.json b/package.json
index f60bd2a4..f0dd1e05 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,15 @@
   "license": "MIT",
   "type": "module",
   "devDependencies": {
+    "@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-regular-svg-icons": "7.3.1",
+    "@fortawesome/pro-solid-svg-icons": "7.3.1",
     "@paddle/paddle-js": "1.6.5",
     "@types/node": "^22.19.21",
     "image-size": "^2.0.4",
-    "sass": "^1.105.2",
+    "shiki": "^4.6.0",
     "vitepress": "^2.0.0-alpha.21",
     "vitepress-plugin-llms": "^1.14.0",
     "vue": "3.5.44"
diff --git a/tsconfig.json b/tsconfig.json
index 75895ed2..f909a8b6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,8 @@
   "compilerOptions": {
     "target": "ES2022",
     "module": "ES2022",
-    "moduleResolution": "Bundler"
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "noEmit": true
   }
-}
\ No newline at end of file
+}