diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
index bcd1e1aae..2cd3f1f23 100644
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -36,7 +36,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
 
       - name: Validate HTML
-        run: npx --yes html-validate@9 website/index.html
+        run: npx --yes html-validate@9 website/index.html website/work-with-us.html
 
       - uses: actions/setup-go@b7ad1dad31e06c5925ef5d2fc7ad053ef454303e # v7.0.0
         with:
diff --git a/website/README.md b/website/README.md
index 9e47138bc..1ad041a9c 100644
--- a/website/README.md
+++ b/website/README.md
@@ -6,14 +6,14 @@ site links to it.
 
 ```
 website/
-├── index.html      the one page
+├── index.html      the main page
+├── work-with-us.html  business enquiries, linked from the menu and footer
 ├── styles.css      the Paper theme (light, EB Garamond headings) and the layout
-├── themes/         alternative palettes (navy, phosphor, ember, slate); add one <link> after styles.css to switch
 ├── site.js         mobile menu, footer year and the animated figures
 ├── CNAME           custom domain (katesplatform.io) for GitHub Pages
 ├── _headers        security and cache headers (Cloudflare Pages, Netlify)
 ├── robots.txt, sitemap.xml
-└── assets/         logo, wordmark, screenshots, social preview (copied from docs/)
+└── assets/         logo, wordmark, screenshots, social preview (copied from docs/), self-hosted fonts
 ```
 
 ## Preview locally
@@ -26,8 +26,9 @@ cd website && python3 -m http.server 8000
 ## Deploy
 
 The site is deployed from this folder by `.github/workflows/website.yml`, which validates
-the HTML on every pull request and publishes to Cloudflare Pages on a push to `main`.
-Setup, once:
+the HTML on every pull request. On a push to `main` it publishes to GitHub Pages, which
+serves the live site (see below), and to Cloudflare Pages if its secrets are set.
+Cloudflare setup, once:
 
 1. Create a Cloudflare Pages project named `kates-website` (direct upload, no Git
    integration: the workflow uploads the folder).
diff --git a/website/_headers b/website/_headers
index 7dbdaaf7e..38a11c95e 100644
--- a/website/_headers
+++ b/website/_headers
@@ -4,7 +4,7 @@
   X-Frame-Options: DENY
   Referrer-Policy: strict-origin-when-cross-origin
   Permissions-Policy: camera=(), microphone=(), geolocation=()
-  Content-Security-Policy: default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
+  Content-Security-Policy: default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self'
 
 /assets/*
   Cache-Control: public, max-age=31536000, immutable
diff --git a/website/assets/fonts/OFL-EB-Garamond.txt b/website/assets/fonts/OFL-EB-Garamond.txt
new file mode 100644
index 000000000..c1ec5e181
--- /dev/null
+++ b/website/assets/fonts/OFL-EB-Garamond.txt
@@ -0,0 +1,93 @@
+Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/website/assets/fonts/OFL-Inter.txt b/website/assets/fonts/OFL-Inter.txt
new file mode 100644
index 000000000..21f6aff96
--- /dev/null
+++ b/website/assets/fonts/OFL-Inter.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/website/assets/fonts/OFL-JetBrains-Mono.txt b/website/assets/fonts/OFL-JetBrains-Mono.txt
new file mode 100644
index 000000000..821a3dac2
--- /dev/null
+++ b/website/assets/fonts/OFL-JetBrains-Mono.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+
+This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/website/assets/fonts/eb-garamond-500.woff2 b/website/assets/fonts/eb-garamond-500.woff2
new file mode 100644
index 000000000..eebd0b186
Binary files /dev/null and b/website/assets/fonts/eb-garamond-500.woff2 differ
diff --git a/website/assets/fonts/eb-garamond-600.woff2 b/website/assets/fonts/eb-garamond-600.woff2
new file mode 100644
index 000000000..5dbb9a0c6
Binary files /dev/null and b/website/assets/fonts/eb-garamond-600.woff2 differ
diff --git a/website/assets/fonts/inter-400.woff2 b/website/assets/fonts/inter-400.woff2
new file mode 100644
index 000000000..8232c9a35
Binary files /dev/null and b/website/assets/fonts/inter-400.woff2 differ
diff --git a/website/assets/fonts/inter-500.woff2 b/website/assets/fonts/inter-500.woff2
new file mode 100644
index 000000000..c83212acd
Binary files /dev/null and b/website/assets/fonts/inter-500.woff2 differ
diff --git a/website/assets/fonts/inter-600.woff2 b/website/assets/fonts/inter-600.woff2
new file mode 100644
index 000000000..fd3415050
Binary files /dev/null and b/website/assets/fonts/inter-600.woff2 differ
diff --git a/website/assets/fonts/inter-700.woff2 b/website/assets/fonts/inter-700.woff2
new file mode 100644
index 000000000..677a5fc00
Binary files /dev/null and b/website/assets/fonts/inter-700.woff2 differ
diff --git a/website/assets/fonts/inter-800.woff2 b/website/assets/fonts/inter-800.woff2
new file mode 100644
index 000000000..3a843a43e
Binary files /dev/null and b/website/assets/fonts/inter-800.woff2 differ
diff --git a/website/assets/fonts/jetbrains-mono-400.woff2 b/website/assets/fonts/jetbrains-mono-400.woff2
new file mode 100644
index 000000000..60d12a8d9
Binary files /dev/null and b/website/assets/fonts/jetbrains-mono-400.woff2 differ
diff --git a/website/assets/fonts/jetbrains-mono-500.woff2 b/website/assets/fonts/jetbrains-mono-500.woff2
new file mode 100644
index 000000000..55033f38b
Binary files /dev/null and b/website/assets/fonts/jetbrains-mono-500.woff2 differ
diff --git a/website/assets/kates-ctx-profiles-chips.png b/website/assets/kates-ctx-profiles-chips.png
deleted file mode 100644
index 6bf79cead..000000000
Binary files a/website/assets/kates-ctx-profiles-chips.png and /dev/null differ
diff --git a/website/assets/kates-lab-classic-aurora.png b/website/assets/kates-lab-classic-aurora.png
deleted file mode 100644
index 1c4ef27e5..000000000
Binary files a/website/assets/kates-lab-classic-aurora.png and /dev/null differ
diff --git a/website/index.html b/website/index.html
index 749e6921c..307a6ca96 100644
--- a/website/index.html
+++ b/website/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <!-- GitHub Pages serves this site and ignores _headers, so the policy lives here; a meta tag cannot set frame-ancestors. -->
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'; connect-src 'self'; base-uri 'self'; form-action 'self'">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self'; connect-src 'self'; base-uri 'self'; form-action 'self'">
   <meta name="referrer" content="strict-origin-when-cross-origin">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Kates — Kafka testing, chaos and security on Kubernetes</title>
@@ -22,9 +22,8 @@
   <meta name="twitter:description" content="Load tests, fault injection, security audits and CI gates for Apache Kafka on Kubernetes.">
   <meta name="twitter:image" content="https://katesplatform.io/assets/social-preview.png">
 
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500;600&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="preload" href="assets/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="assets/fonts/eb-garamond-600.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="stylesheet" href="styles.css">
 
   <script type="application/ld+json">
@@ -62,11 +61,12 @@
         <a href="#compare">Compare</a>
         <a href="#ci">CI gates</a>
         <a href="https://bmscomp.github.io/kates/">Docs</a>
+        <a href="work-with-us.html">Work with us</a>
         <a class="gh" href="https://github.com/bmscomp/kates">
           <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
           GitHub
         </a>
-        <a class="btn btn-primary btn-sm" href="#how">Get started</a>
+        <a class="btn btn-primary btn-sm" href="#how">Quick start</a>
       </nav>
     </div>
   </header>
@@ -74,10 +74,8 @@
   <main id="main">
     <!-- ============ HERO ============ -->
     <section class="hero">
-      <div class="hero-glow" aria-hidden="true"></div>
       <div class="wrap hero-grid">
         <div class="hero-copy">
-          <p class="eyebrow">Open source · Apache Kafka · Kubernetes</p>
           <h1>Break your Kafka cluster <span class="accent">before production does.</span></h1>
           <p class="lead">
             You find out how a Kafka cluster handles a broker failure on the day a broker fails,
@@ -90,7 +88,7 @@ <h1>Break your Kafka cluster <span class="accent">before production does.</span>
             <a class="btn btn-ghost" href="https://bmscomp.github.io/kates/">Read the book</a>
           </div>
           <ul class="hero-points">
-            <li>Repeatable on a local Kind cluster or as pass/fail gates in CI</li>
+            <li>Runs on Kubernetes: repeatable on a local Kind cluster or as pass/fail gates in CI</li>
             <li>Three parts: a Go CLI, a Quarkus API, signed Helm charts</li>
             <li>Apache 2.0 licensed, built in the open on GitHub</li>
           </ul>
@@ -141,7 +139,6 @@ <h1>Break your Kafka cluster <span class="accent">before production does.</span>
     <section class="section" id="why">
       <div class="wrap">
         <div class="section-head">
-          <p class="eyebrow">Why Kates</p>
           <h2>Most teams test Kafka resilience with two terminals and a hunch.</h2>
           <p class="sub">
             A perf-test script in one window, <code>kubectl delete pod</code> in another, and a Grafana board
@@ -179,7 +176,6 @@ <h3>Data integrity</h3>
     <section class="section alt" id="features">
       <div class="wrap">
         <div class="section-head">
-          <p class="eyebrow">What it does</p>
           <h2>One toolkit, from load generation to the audit report.</h2>
         </div>
         <div class="cards three features">
@@ -194,8 +190,8 @@ <h3>Performance tests</h3>
             <div class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M13 2L4 14h7l-1 8 9-12h-7z" /></svg></div>
             <h3>Fault injection</h3>
             <p class="fig"><b>13</b> disruption types</p>
-            <p>Pod kills, network partitions, CPU, memory and I/O stress, DNS errors, disk fill and node drain, via LitmusChaos or Kubernetes.</p>
-            <p class="meta">Blast-radius guard, dry run, automatic rollback.</p>
+            <p>Pod kills, network partitions, CPU, memory and I/O stress, DNS errors and node drain, via LitmusChaos or Kubernetes.</p>
+            <p class="meta">Eleven run on a default install. Blast-radius guard, dry run, automatic rollback.</p>
           </article>
           <article class="card">
             <div class="icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-3-6.7" /><path d="M21 4v5h-5" /></svg></div>
@@ -233,7 +229,6 @@ <h3>A multi-zone lab on one machine</h3>
     <section class="section" id="how">
       <div class="wrap how-grid">
         <div class="how-copy">
-          <p class="eyebrow">Quick start</p>
           <h2>From an empty laptop to a graded load test.</h2>
           <p class="sub">
             You need Docker, Kind, kubectl and Helm, and about 16 GB of RAM. Everything else,
@@ -275,8 +270,8 @@ <h2>From an empty laptop to a graded load test.</h2>
 kates gate --min-grade C --records 100000</code></pre>
           </div>
           <div class="code-block">
-            <div class="code-title">GitHub Actions</div>
-<pre tabindex="0" aria-label="GitHub Actions workflow"><code><span class="k">- uses:</span> bmscomp/kates@v1
+            <div class="code-title">GitHub Actions <button type="button" class="copy" data-copy="#action-example" aria-label="Copy the GitHub Actions step" hidden>Copy</button></div>
+<pre id="action-example" tabindex="0" aria-label="GitHub Actions workflow"><code><span class="k">- uses:</span> bmscomp/kates@v1
   <span class="k">with:</span>
     <span class="k">api-url:</span> ${{ secrets.KATES_API_URL }}
     <span class="k">api-key:</span> ${{ secrets.KATES_API_KEY }}
@@ -290,7 +285,6 @@ <h2>From an empty laptop to a graded load test.</h2>
     <section class="section alt" id="architecture">
       <div class="wrap">
         <div class="section-head">
-          <p class="eyebrow">Architecture</p>
           <h2>Three parts that fit how you already run Kafka.</h2>
           <p class="sub">
             Performance tests work against any Kafka cluster the Kates API can reach. Fault injection
@@ -299,15 +293,9 @@ <h2>Three parts that fit how you already run Kafka.</h2>
           </p>
         </div>
 
-        <figure class="arch" data-tui-design="grid">
+        <figure class="arch">
           <div class="arch-winbar">
             <div class="arch-dots" aria-hidden="true"><span></span><span></span><span></span></div>
-            <div class="arch-wintitle" id="arch-wintitle">kates architecture — grid look, C → aurora</div>
-            <div class="arch-designs" role="group" aria-label="TUI design presets">
-              <button type="button" data-set-design="grid" aria-pressed="true">1 · Grid · Aurora</button>
-              <button type="button" data-set-design="panels" aria-pressed="false">2 · Panels · Dracula</button>
-              <button type="button" data-set-design="chips" aria-pressed="false">3 · Classic · Chips</button>
-            </div>
             <button type="button" class="arch-pause" hidden>Pause animation</button>
           </div>
           <div class="arch-tui-head" aria-hidden="true">
@@ -325,9 +313,6 @@ <h2>Three parts that fit how you already run Kafka.</h2>
               <marker id="arr-fault" class="mk-fault" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" /></marker>
               <marker id="arr-ok" class="mk-ok" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0L10 5L0 10z" /></marker>
               <clipPath id="p99-clip"><rect x="784" y="190" width="0" height="150" /></clipPath>
-              <pattern id="tui-stripes" width="8" height="22" patternUnits="userSpaceOnUse">
-                <line x1="0" y1="21.5" x2="8" y2="21.5" class="tui-stripe-line" />
-              </pattern>
             </defs>
 
             <rect x="240" y="16" width="704" height="368" rx="6" class="cluster" />
@@ -339,7 +324,7 @@ <h2>Three parts that fit how you already run Kafka.</h2>
             <g class="link" data-a="cli" data-b="api" style="--d:0">
               <path class="edge" pathLength="1" d="M196 182H290" marker-end="url(#arr)" />
               <path class="pkt" pathLength="1" d="M196 182H290" style="--t:1.4s" />
-              <g class="chip" transform="translate(243 162)"><rect x="-48" y="-10" width="96" height="20" rx="4" /><text text-anchor="middle" y="4">REST · API key</text></g>
+              <g class="chip" transform="translate(243 162)"><rect x="-46" y="-10" width="92" height="20" rx="4" /><text text-anchor="middle" y="4">REST · API key</text></g>
             </g>
             <g class="link ok" data-a="api" data-b="cli" data-ph="4" style="--d:0">
               <path class="edge" pathLength="1" d="M290 222H196" marker-end="url(#arr-ok)" />
@@ -372,7 +357,6 @@ <h2>Three parts that fit how you already run Kafka.</h2>
 
             <g class="box box-cli node" data-node="cli" tabindex="0" role="img" aria-label="kates CLI" style="--d:0" data-note="The kates CLI runs on a laptop or a CI runner and only ever talks to the Kates API.">
               <rect class="pane-bg" x="16" y="140" width="180" height="110" rx="6" />
-              <rect class="pane-stripes" x="17" y="141" width="178" height="108" rx="5" fill="url(#tui-stripes)" />
               <rect class="title-cut" x="28" y="131" width="86" height="18" rx="3" />
               <text x="34" y="144" class="t-border-title">kates CLI</text>
               <text x="106" y="176" text-anchor="middle" class="t-title">kates CLI</text>
@@ -382,7 +366,6 @@ <h2>Three parts that fit how you already run Kafka.</h2>
             <g class="stamp" data-ph="4" aria-hidden="true"><circle cx="190" cy="142" r="20" /><text x="190" y="149" text-anchor="middle">A</text></g>
             <g class="box box-api node" data-node="api" tabindex="0" role="img" aria-label="Kates API" style="--d:1" data-note="The Kates API runs the load, drives the faults, grades every run and sends the webhooks.">
               <rect class="pane-bg" x="290" y="140" width="180" height="110" rx="6" />
-              <rect class="pane-stripes" x="291" y="141" width="178" height="108" rx="5" fill="url(#tui-stripes)" />
               <rect class="title-cut" x="302" y="131" width="86" height="18" rx="3" />
               <text x="308" y="144" class="t-border-title">Kates API</text>
               <text x="380" y="176" text-anchor="middle" class="t-title">Kates API</text>
@@ -391,7 +374,6 @@ <h2>Three parts that fit how you already run Kafka.</h2>
             </g>
             <g class="box node" data-node="kafka" tabindex="0" role="img" aria-label="Kafka" style="--d:2" data-note="Kafka managed by Strimzi, one broker per zone: the system under test.">
               <rect class="pane-bg kafka-hit" x="560" y="44" width="180" height="118" rx="6" />
-              <rect class="pane-stripes" x="561" y="45" width="178" height="116" rx="5" fill="url(#tui-stripes)" />
               <rect class="title-cut" x="572" y="35" width="54" height="18" rx="3" />
               <text x="578" y="48" class="t-border-title">Kafka</text>
               <text x="650" y="76" text-anchor="middle" class="t-title">Kafka</text>
@@ -401,17 +383,15 @@ <h2>Three parts that fit how you already run Kafka.</h2>
               <circle class="broker" cx="684" cy="124" r="7" />
               <text x="650" y="150" text-anchor="middle" class="t-sub t-small">brokers-0 · 1 · 2</text>
             </g>
-            <g class="box node" data-node="litmus" tabindex="0" role="img" aria-label="LitmusChaos" style="--d:3" data-note="LitmusChaos carries out the 13 disruption types against the brokers, then lets them recover.">
+            <g class="box node" data-node="litmus" tabindex="0" role="img" aria-label="LitmusChaos" style="--d:3" data-note="LitmusChaos carries out 11 disruption types against the brokers on a default install, then lets them recover.">
               <rect class="pane-bg litmus-hit" x="560" y="206" width="180" height="68" rx="6" />
-              <rect class="pane-stripes" x="561" y="207" width="178" height="66" rx="5" fill="url(#tui-stripes)" />
               <rect class="title-cut" x="572" y="197" width="102" height="18" rx="3" />
               <text x="578" y="210" class="t-border-title">LitmusChaos</text>
               <text x="650" y="236" text-anchor="middle" class="t-title">LitmusChaos</text>
-              <text x="650" y="256" text-anchor="middle" class="t-sub">13 disruption types</text>
+              <text x="650" y="256" text-anchor="middle" class="t-sub">11 disruption types</text>
             </g>
             <g class="box node" data-node="pg" tabindex="0" role="img" aria-label="PostgreSQL" style="--d:4" data-note="PostgreSQL keeps every run, so last month's numbers are there to compare with today's.">
               <rect class="pane-bg" x="560" y="298" width="180" height="62" rx="6" />
-              <rect class="pane-stripes" x="561" y="299" width="178" height="60" rx="5" fill="url(#tui-stripes)" />
               <rect class="title-cut" x="572" y="289" width="94" height="18" rx="3" />
               <text x="578" y="302" class="t-border-title">PostgreSQL</text>
               <text x="650" y="324" text-anchor="middle" class="t-title">PostgreSQL</text>
@@ -419,7 +399,6 @@ <h2>Three parts that fit how you already run Kafka.</h2>
             </g>
             <g class="box node" data-node="mon" tabindex="0" role="img" aria-label="Prometheus and Grafana" style="--d:5" data-note="Prometheus scrapes the Kates API and Kafka; 12 Grafana dashboards and the alert rules come with the charts.">
               <rect class="pane-bg" x="770" y="44" width="160" height="316" rx="6" />
-              <rect class="pane-stripes" x="771" y="45" width="158" height="314" rx="5" fill="url(#tui-stripes)" />
               <rect class="title-cut" x="782" y="35" width="72" height="18" rx="3" />
               <text x="788" y="48" class="t-border-title">Grafana</text>
               <text x="850" y="76" text-anchor="middle" class="t-title">Grafana</text>
@@ -501,7 +480,7 @@ <h2>Three parts that fit how you already run Kafka.</h2>
             <g class="box node" data-node="litmus" tabindex="0" role="img" aria-label="LitmusChaos" style="--d:3">
               <rect class="pane-bg litmus-hit" x="64" y="500" width="232" height="80" rx="6" />
               <text x="180" y="534" text-anchor="middle" class="t-title">LitmusChaos</text>
-              <text x="180" y="558" text-anchor="middle" class="t-sub">13 disruption types</text>
+              <text x="180" y="558" text-anchor="middle" class="t-sub">11 disruption types</text>
             </g>
             <g class="box node" data-node="pg" tabindex="0" role="img" aria-label="PostgreSQL" style="--d:4">
               <rect class="pane-bg" x="64" y="620" width="232" height="62" rx="6" />
@@ -526,23 +505,13 @@ <h2>Three parts that fit how you already run Kafka.</h2>
           <p class="arch-step"></p>
           <div class="arch-keyhints" aria-hidden="true">
             <span><b>hover</b> inspect node</span>
-            <span class="sep">│</span>
-            <span><b>T</b> next look</span>
-            <span class="sep">│</span>
-            <span><b>C</b> next colors</span>
           </div>
           <figcaption aria-live="polite">The CLI never touches Kafka directly: the API inside the cluster runs the load, drives the faults, grades the result and keeps the history.</figcaption>
         </figure>
 
-        <figure class="kz" data-phase="0" data-tui-design="grid">
+        <figure class="kz" data-phase="0">
           <div class="arch-winbar">
             <div class="arch-dots" aria-hidden="true"><span></span><span></span><span></span></div>
-            <div class="arch-wintitle" id="kz-wintitle">kates kafka tui — grid look, C → aurora</div>
-            <div class="arch-designs" role="group" aria-label="TUI design presets">
-              <button type="button" data-set-design="grid" aria-pressed="true">1 · Grid · Aurora</button>
-              <button type="button" data-set-design="panels" aria-pressed="false">2 · Panels · Dracula</button>
-              <button type="button" data-set-design="chips" aria-pressed="false">3 · Classic · Chips</button>
-            </div>
             <button type="button" class="arch-pause" hidden>Pause animation</button>
           </div>
           <div class="arch-tui-head">
@@ -573,40 +542,35 @@ <h2>Three parts that fit how you already run Kafka.</h2>
           </div>
           <div class="arch-keyhints" aria-hidden="true">
             <span><b>★</b> partition leader</span>
-            <span class="sep">│</span>
-            <span><b>T</b> next look</span>
-            <span class="sep">│</span>
-            <span><b>C</b> next colors</span>
           </div>
           <figcaption><b>Healthy.</b> ISR back to 3, preferred leader restored. Recovered in 6.4 s, 0 records lost.</figcaption>
         </figure>
+      </div>
+    </section>
 
+    <!-- ============ CLI ============ -->
+    <section class="section" id="cli">
+      <div class="wrap">
+        <div class="section-head">
+          <h2>Watch the run from your terminal.</h2>
+        </div>
         <div class="screens">
           <figure>
-            <img src="assets/kates-lab-panels-dracula.png" width="1024" height="669" alt="kates lab interactive performance tuning in the Panels look with Dracula colors" loading="lazy">
-            <figcaption><b><code>kates lab</code> · Panels look &amp; Dracula colors.</b> Tune producer parameters, run load iterations, compare P99 latency and throughput deltas, and switch looks (<code>T</code>) or color palettes (<code>C</code>) live.</figcaption>
-          </figure>
-          <figure>
-            <img src="assets/kates-lab-classic-aurora.png" width="1024" height="669" alt="kates lab interactive performance tuning in the Classic look with Aurora colors" loading="lazy">
-            <figcaption><b><code>kates lab</code> · Classic look &amp; Aurora colors.</b> The same interactive tuning session rendered in the Classic borderless layout with the Aurora palette; persist your favorite with <code>kates theme set</code>.</figcaption>
+            <img src="assets/kates-dashboard-grid-aurora.png" width="1024" height="669" alt="kates dashboard showing cluster health, active workloads and completed runs" loading="lazy">
+            <figcaption><b><code>kates dashboard</code>.</b> Live view of API and Kafka broker health, under-replicated partitions, active workloads, completed runs, and real-time throughput and P99.</figcaption>
           </figure>
           <figure>
-            <img src="assets/kates-dashboard-grid-aurora.png" width="1024" height="669" alt="kates dashboard live cluster and test monitor in the Grid look with Aurora colors" loading="lazy">
-            <figcaption><b><code>kates dashboard</code> · Grid look &amp; Aurora colors.</b> Live 1s-refreshing view of API and Kafka broker health, under-replicated partitions, active workloads, completed runs, and real-time throughput/P99 sparklines.</figcaption>
-          </figure>
-          <figure>
-            <img src="assets/kates-ctx-profiles-chips.png" width="1024" height="316" alt="kates ctx profiles set interactive selector in the Chips look" loading="lazy">
-            <figcaption><b><code>kates ctx profiles set</code> · Chips look.</b> Scope the CLI to the command groups you need—<code>performance</code>, <code>integrity</code>, <code>chaos</code>, <code>topology</code>, <code>security</code>, or <code>deploy</code>—per context.</figcaption>
+            <img src="assets/kates-lab-panels-dracula.png" width="1024" height="669" alt="kates lab tuning producer parameters and comparing load iterations" loading="lazy">
+            <figcaption><b><code>kates lab</code>.</b> Tune producer parameters, run load iterations, and compare P99 latency and throughput between them.</figcaption>
           </figure>
         </div>
       </div>
     </section>
 
     <!-- ============ COMPARE ============ -->
-    <section class="section" id="compare">
+    <section class="section alt" id="compare">
       <div class="wrap">
         <div class="section-head">
-          <p class="eyebrow">Compared with the usual workflow</p>
           <h2>Benchmark tools measure. Kates measures under failure and keeps score.</h2>
         </div>
         <div class="table-wrap" tabindex="0" aria-label="Comparison of Kates with other Kafka testing tools">
@@ -634,11 +598,11 @@ <h2>Benchmark tools measure. Kates measures under failure and keeps score.</h2>
     </section>
 
     <!-- ============ CI GATES ============ -->
-    <section class="section alt" id="ci">
+    <section class="section" id="ci">
       <div class="wrap how-grid reverse">
         <div class="how-code">
           <div class="code-block">
-            <div class="code-title">scenario.yaml</div>
+            <div class="code-title">scenario.yaml <button type="button" class="copy" data-copy="#scenario-example" aria-label="Copy the scenario file" hidden>Copy</button></div>
 <pre id="scenario-example" tabindex="0" aria-label="Example scenario file"><code><span class="k">name:</span> checkout-peak
 <span class="k">type:</span> LOAD
 <span class="k">spec:</span>
@@ -663,7 +627,6 @@ <h2>Benchmark tools measure. Kates measures under failure and keeps score.</h2>
           </div>
         </div>
         <div class="how-copy">
-          <p class="eyebrow">CI gates</p>
           <h2>Make resilience a build step, not a quarterly exercise.</h2>
           <p class="sub">
             Describe a workload and its SLA in a scenario file. Kates runs it, checks every gate
@@ -687,14 +650,18 @@ <h2>Make resilience a build step, not a quarterly exercise.</h2>
         <img src="assets/kates-logo.svg" width="72" height="72" alt="">
         <h2>Try the failure before it tries you.</h2>
         <p class="sub">Kates is free and open source. Install it, point it at a cluster, and read the first graded report.</p>
+        <div class="install">
+          <code id="install-command">brew install bmscomp/tap/kates</code>
+          <button type="button" class="copy" data-copy="#install-command" aria-label="Copy the install command" hidden>Copy</button>
+        </div>
         <div class="cta-row center">
-          <a class="btn btn-primary" href="https://github.com/bmscomp/kates">Star on GitHub</a>
+          <a class="btn btn-primary" href="#how">Quick start</a>
           <a class="btn btn-ghost" href="https://bmscomp.github.io/kates/">Read the book</a>
-          <a class="btn btn-ghost" href="https://artifacthub.io/packages/search?repo=kates">Helm charts on Artifact Hub</a>
         </div>
-        <p class="install"><code>brew install bmscomp/tap/kates</code></p>
+        <p class="cta-links"><a href="https://github.com/bmscomp/kates">Star on GitHub</a> · <a href="https://artifacthub.io/packages/search?repo=kates">Helm charts on Artifact Hub</a></p>
       </div>
     </section>
+    <p id="copy-status" class="sr-only" role="status"></p>
   </main>
 
   <footer class="footer">
@@ -707,21 +674,22 @@ <h2>Try the failure before it tries you.</h2>
       </div>
       <nav class="footer-links" aria-label="Footer">
         <div>
-          <h4>Project</h4>
+          <h3>Project</h3>
           <a href="https://github.com/bmscomp/kates">Source code</a>
           <a href="https://github.com/bmscomp/kates/releases/latest">Releases</a>
           <a href="https://github.com/bmscomp/kates/blob/main/CONTRIBUTING.md">Contributing</a>
           <a href="https://github.com/bmscomp/kates/blob/main/LICENSE">License</a>
+          <a href="work-with-us.html">Work with us</a>
         </div>
         <div>
-          <h4>Learn</h4>
+          <h3>Learn</h3>
           <a href="https://bmscomp.github.io/kates/">The book</a>
           <a href="https://bmscomp.github.io/kates/10-cli-reference.html">CLI reference</a>
           <a href="https://bmscomp.github.io/kates/11-api-reference.html">API reference</a>
           <a href="https://bmscomp.github.io/kates/14-recipes.html">Recipes</a>
         </div>
         <div>
-          <h4>Ecosystem</h4>
+          <h3>Ecosystem</h3>
           <a href="https://strimzi.io/">Strimzi</a>
           <a href="https://litmuschaos.io/">LitmusChaos</a>
           <a href="https://kafka.apache.org/">Apache Kafka</a>
diff --git a/website/site.js b/website/site.js
index c650ed990..4768b0726 100644
--- a/website/site.js
+++ b/website/site.js
@@ -76,41 +76,6 @@ function holdControl(figure) {
   var steps = ['Steady load: measuring the baseline', 'Injecting POD_KILL through LitmusChaos',
     'Broker down: ISR shrinks, P99 climbs', 'Broker back: recovery time measured', 'Run graded A and stored; the CLI exits 0'];
   var btns = arch.querySelectorAll('.arch-tl button'), bar = arch.querySelector('.arch-tl-bar span'), step = arch.querySelector('.arch-step');
-  var kzFig = document.querySelector('.kz');
-  var designBtns = document.querySelectorAll('[data-set-design]');
-  var winTitle = document.getElementById('arch-wintitle'), kzWinTitle = document.getElementById('kz-wintitle');
-  var designOrder = ['grid', 'panels', 'chips'];
-  var designTitles = {
-    grid: 'kates architecture — grid look, C → aurora',
-    panels: 'kates architecture — T → panels, C → dracula',
-    chips: 'kates architecture — classic look, C → chips / aurora'
-  };
-  var kzDesignTitles = {
-    grid: 'kates kafka tui — grid look, C → aurora',
-    panels: 'kates kafka tui — T → panels, C → dracula',
-    chips: 'kates kafka tui — classic look, C → chips / aurora'
-  };
-  function setDesign(name) {
-    arch.setAttribute('data-tui-design', name);
-    if (kzFig) kzFig.setAttribute('data-tui-design', name);
-    if (winTitle && designTitles[name]) winTitle.textContent = designTitles[name];
-    if (kzWinTitle && kzDesignTitles[name]) kzWinTitle.textContent = kzDesignTitles[name];
-    designBtns.forEach(function (b) {
-      b.setAttribute('aria-pressed', b.getAttribute('data-set-design') === name ? 'true' : 'false');
-    });
-  }
-  designBtns.forEach(function (b) {
-    b.addEventListener('click', function () { setDesign(b.getAttribute('data-set-design')); });
-  });
-  document.addEventListener('keydown', function (e) {
-    if (arch.classList.contains('paused') && (!kzFig || kzFig.classList.contains('paused'))) return;
-    if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) return;
-    if (e.key === 'T' || e.key === 'C') {
-      var cur = arch.getAttribute('data-tui-design') || 'grid';
-      var idx = (designOrder.indexOf(cur) + 1) % designOrder.length;
-      setDesign(designOrder[idx]);
-    }
-  });
   var clip = arch.querySelector('#p99-clip rect'), head = arch.querySelector('.p99-head'), val = arch.querySelector('.p99');
   var X0 = 784, W = 132;
   function ms(p) { // illustrative P99 in ms, matching the hero terminal: 17.8 baseline, 41.2 with a broker down
@@ -139,14 +104,17 @@ function holdControl(figure) {
     bar.style.width = p * 100 + '%';
   }
   btns.forEach(function (b, k) {
-    b.addEventListener('click', function () { t = k / N * D; if (reduce) render((k + 0.99) / N); });
+    b.addEventListener('click', function () { t = k / N * D; render(reduce ? (k + 0.99) / N : t / D); });
   });
   if (reduce) return render(0.99);
   holdControl(arch);
+  render(0);
   requestAnimationFrame(function tick(now) {
-    if (last && !arch.classList.contains('paused') && !arch.classList.contains('held')) t = (t + now - last) % D;
+    if (!arch.classList.contains('paused') && !arch.classList.contains('held')) {
+      if (last) t = (t + now - last) % D;
+      render(t / D);
+    }
     last = now;
-    render(t / D);
     requestAnimationFrame(tick);
   });
 })();
@@ -173,7 +141,7 @@ function holdControl(figure) {
     lanes[1].classList.toggle('idle', down);
     lanes[2].classList.toggle('busy', down);
   }
-  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return set(2);
+  if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return set(4);
   var ph = 0, on = true;
   if ('IntersectionObserver' in window) {
     new IntersectionObserver(function (entries) {
@@ -185,3 +153,22 @@ function holdControl(figure) {
   holdControl(kz);
   setInterval(function () { if (on && !kz.classList.contains('held')) set(ph = (ph + 1) % steps.length); }, 2800);
 })();
+
+// Copy buttons stay hidden without the clipboard API, so none can offer what won't work.
+(function () {
+  if (!navigator.clipboard) return;
+  var status = document.getElementById('copy-status');
+  document.querySelectorAll('[data-copy]').forEach(function (btn) {
+    var timer;
+    function report(message) {
+      btn.textContent = status.textContent = message;
+      clearTimeout(timer);
+      timer = setTimeout(function () { btn.textContent = 'Copy'; status.textContent = ''; }, 2000);
+    }
+    btn.hidden = false;
+    btn.addEventListener('click', function () {
+      var text = document.querySelector(btn.getAttribute('data-copy')).textContent.trim();
+      navigator.clipboard.writeText(text).then(function () { report('Copied'); }, function () { report('Failed'); });
+    });
+  });
+})();
diff --git a/website/sitemap.xml b/website/sitemap.xml
index d612364ae..625e90d40 100644
--- a/website/sitemap.xml
+++ b/website/sitemap.xml
@@ -5,4 +5,9 @@
     <changefreq>monthly</changefreq>
     <priority>1.0</priority>
   </url>
+  <url>
+    <loc>https://katesplatform.io/work-with-us.html</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
 </urlset>
diff --git a/website/styles.css b/website/styles.css
index cc96d7a88..561201576 100644
--- a/website/styles.css
+++ b/website/styles.css
@@ -1,6 +1,15 @@
 /* Kates marketing site — katesplatform.io
-   Theme "Paper": light, editorial; EB Garamond headings, navy ink, sky accent.
-   Alternative palettes live in themes/. */
+   Theme "Paper": light, editorial; EB Garamond headings, navy ink, sky accent. */
+
+@font-face { font-family: "EB Garamond"; font-weight: 500; font-display: swap; src: url(assets/fonts/eb-garamond-500.woff2) format("woff2"); }
+@font-face { font-family: "EB Garamond"; font-weight: 600; font-display: swap; src: url(assets/fonts/eb-garamond-600.woff2) format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-400.woff2) format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-500.woff2) format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-600.woff2) format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(assets/fonts/inter-700.woff2) format("woff2"); }
+@font-face { font-family: "Inter"; font-weight: 800; font-display: swap; src: url(assets/fonts/inter-800.woff2) format("woff2"); }
+@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-400.woff2) format("woff2"); }
+@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-500.woff2) format("woff2"); }
 
 :root {
   --bg: #f7f5ef;
@@ -13,11 +22,17 @@
   --heading: #102a66;
   --muted: #5d667f;
   --accent: #1a5bcc;
-  --accent-strong: #1a5bcc;
   --accent-soft: rgba(26, 91, 204, 0.1);
   --ok: #15784e;
   --warn: #b7791f;
   --no: #666c7b;
+  --on-ink: #e6eaf2;
+  --on-ink-muted: #c3cce0;
+  --on-ink-rule: #243f7a;
+  --code-bg: #0a0f1d;
+  --code-bar: #0d1526;
+  --code-border: #2b3a5e;
+  --code-text: #c9d4ea;
   --code-muted: #8e9ab5;
   --code-ok: #3ecb8e;
   --code-prompt: #7fb0f5;
@@ -30,7 +45,7 @@
 }
 
 *, *::before, *::after { box-sizing: border-box; }
-html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
 body {
   margin: 0;
   font-family: var(--sans);
@@ -42,19 +57,27 @@ body {
 }
 img { max-width: 100%; height: auto; display: block; }
 a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
+a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
+::selection { background: var(--accent); color: #fff; }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.terminal :focus-visible, .code-block :focus-visible { outline-color: var(--code-prompt); outline-offset: -2px; }
+.arch :focus-visible, .kz :focus-visible { outline-color: var(--tui-focus); }
+.footer :focus-visible { outline-color: var(--on-ink); }
 code, pre { font-family: var(--mono); }
 p code, li code, td code, th code, h2 code, figcaption code {
   font-size: 0.85em;
   background: var(--accent-soft);
-  color: #a9cff6;
+  color: #143f8f;
   padding: 0.1em 0.4em;
   border-radius: 6px;
 }
-h1, h2, h3, h4 { color: var(--heading); margin: 0 0 0.5em; line-height: 1.15; letter-spacing: -0.02em; }
-h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 800; }
-h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 700; }
+h1, h2, h3 { color: var(--heading); margin: 0 0 0.5em; line-height: 1.15; letter-spacing: -0.02em; }
+h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 600; }
+h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600; }
 h3 { font-size: 1.2rem; font-weight: 600; }
+h1, h2, h3 { text-wrap: balance; }
+p, li, figcaption { text-wrap: pretty; }
+h1, h2, .brand-name { font-family: "EB Garamond", Georgia, serif; letter-spacing: -0.01em; }
 .wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
 .skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
 .skip:focus { left: 8px; }
@@ -62,17 +85,18 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 /* ---------- nav ---------- */
 .nav {
   position: sticky; top: 0; z-index: 50;
-  background: rgba(14, 20, 37, 0.82);
+  background: rgba(247, 245, 239, 0.88);
   backdrop-filter: saturate(140%) blur(10px);
   border-bottom: 1px solid var(--border);
 }
 .nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
 .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--heading); font-weight: 500; font-size: 1.25rem; }
 .brand:hover { text-decoration: none; }
-.brand-name b { color: var(--accent-strong); font-weight: 800; }
+.brand-name b { color: var(--accent); font-weight: 800; }
 .nav-links { display: flex; align-items: center; gap: 22px; }
 .nav-links a { color: var(--text); font-weight: 500; font-size: 0.95rem; }
 .nav-links a:hover { color: var(--heading); text-decoration: none; }
+.nav-links a[aria-current="page"] { color: var(--heading); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
 .nav-links .gh { display: inline-flex; align-items: center; gap: 6px; }
 .nav-toggle { display: none; background: none; border: 0; padding: 9px 11px; cursor: pointer; }
 .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--heading); margin: 5px 0; border-radius: 2px; }
@@ -84,7 +108,8 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   border: 1px solid transparent; transition: transform .12s ease, background .12s ease, border-color .12s ease;
 }
 .btn:hover { text-decoration: none; transform: translateY(-1px); }
-.btn-primary, .nav-links a.btn-primary { background: var(--accent-strong); color: #fff; }
+.btn:active { transform: none; }
+.btn-primary, .nav-links a.btn-primary { background: var(--accent); color: #fff; }
 .btn-primary:hover, .nav-links a.btn-primary:hover { background: #2f6fdc; color: #fff; }
 .btn-ghost { background: transparent; color: var(--heading); border-color: var(--border-strong); }
 .btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
@@ -93,32 +118,25 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .cta-row.center { justify-content: center; }
 
 /* ---------- hero ---------- */
-.hero { position: relative; padding: 88px 0 72px; overflow: hidden; }
-.hero-glow {
-  position: absolute; inset: -40% -20% auto; height: 120%;
-  background:
-    radial-gradient(60% 50% at 20% 30%, rgba(79, 163, 240, 0.22), transparent 70%),
-    radial-gradient(40% 40% at 85% 20%, rgba(16, 42, 102, 0.6), transparent 70%);
-  pointer-events: none;
-}
-.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
-.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; font-weight: 600; color: var(--accent); margin: 0 0 14px; }
-.accent { color: var(--accent-strong); }
+.hero { padding: 88px 0 72px; overflow: hidden; background: radial-gradient(75% 60% at 25% 25%, rgba(26, 91, 204, 0.12), transparent 70%); }
+.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
+.accent { color: var(--accent); }
 .lead { font-size: 1.15rem; color: var(--text); max-width: 56ch; margin: 18px 0 0; }
 .hero-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 8px; color: var(--muted); font-size: 0.95rem; }
 .hero-points li { padding-left: 22px; position: relative; }
 .hero-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
 
 .terminal {
-  background: #0a0f1d; border: 1px solid var(--border-strong); border-radius: var(--radius);
+  background: var(--code-bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(95, 169, 238, 0.08);
   overflow: hidden; font-size: 0.86rem;
 }
-.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #0d1526; }
-.terminal-bar span { width: 11px; height: 11px; border-radius: 50%; background: #2b3a5e; }
+.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--code-border); background: var(--code-bar); }
+.terminal-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--code-border); }
 .terminal-bar span:nth-child(1) { background: #ff5f57; } .terminal-bar span:nth-child(2) { background: #febc2e; } .terminal-bar span:nth-child(3) { background: #28c840; }
 .terminal-bar em { margin-left: auto; font-style: normal; color: var(--code-muted); font-size: 0.78rem; font-family: var(--mono); }
-.terminal pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #c9d4ea; line-height: 1.6; }
+.terminal pre, .code-block pre { scrollbar-width: thin; scrollbar-color: var(--code-border) transparent; }
+.terminal pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: var(--code-text); line-height: 1.6; }
 .terminal .p { color: var(--code-prompt); }
 .terminal .ok { color: var(--code-ok); font-weight: 600; }
 .terminal .warn { color: var(--warn); }
@@ -139,24 +157,23 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .section { padding: 96px 0; }
 .section.alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
 .section-head { max-width: 760px; margin-bottom: 48px; }
-.sub { color: var(--muted); font-size: 1.08rem; margin: 0; }
+.sub { color: var(--muted); font-size: 1.08rem; margin: 0; max-width: 65ch; }
 .cards { display: grid; gap: 20px; }
 .cards.three { grid-template-columns: repeat(3, 1fr); }
 .card {
   background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
-  padding: 26px; transition: border-color .15s ease, transform .15s ease;
+  padding: 26px;
 }
-.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
 .card p { margin: 0; color: var(--text); font-size: 0.98rem; }
 .card h3 { margin-bottom: 10px; }
 .card .meta { margin-top: 14px; color: var(--muted); font-size: 0.88rem; padding-top: 12px; border-top: 1px dashed var(--border); }
 .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 16px; }
-.icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.icon svg { width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 .features .card { display: flex; flex-direction: column; }
 .features .card .meta { margin-top: auto; }
 .features .card p:has(+ .meta) { margin-bottom: 14px; }
 .card .fig { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: 0.9rem; }
-.fig b { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--accent-strong); }
+.fig b { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--accent); }
 
 /* ---------- how / ci ---------- */
 .how-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
@@ -167,11 +184,11 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .steps li b { color: var(--heading); font-weight: 600; }
 .steps li::before {
   content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
-  background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center;
+  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center;
 }
-.code-block { background: #0a0f1d; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; font-size: 0.86rem; }
-.code-title { padding: 9px 16px; border-bottom: 1px solid var(--border); color: var(--code-muted); font-size: 0.78rem; font-family: var(--mono); background: #0d1526; }
-.code-block pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: #c9d4ea; line-height: 1.6; }
+.code-block { background: var(--code-bg); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; font-size: 0.86rem; }
+.code-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--code-border); color: var(--code-muted); font-size: 0.78rem; font-family: var(--mono); background: var(--code-bar); }
+.code-block pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: var(--code-text); line-height: 1.6; }
 .code-block .c { color: var(--code-muted); }
 .code-block .k { color: #a9cff6; }
 .code-block .ok { color: var(--code-ok); font-weight: 600; }
@@ -190,7 +207,6 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   box-shadow: 0 24px 64px rgba(10, 14, 26, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.05);
   font-family: var(--mono);
   color: var(--tui-text);
-  /* Default tokens = Design 1: Grid · Aurora (kates dashboard style) */
   --tui-bg: #0b0d14;
   --tui-win-bar: #151924;
   --tui-win-border: #262c3d;
@@ -207,52 +223,13 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   --tui-ok: #4ade80;
   --tui-warn: #fbbf24;
   --tui-fault: #fb7185;
-  --tui-stripe: transparent;
 }
 
-/* Design 2: Panels · Dracula (kates lab style — filled slate panes with horizontal row rules) */
-.arch[data-tui-design="panels"], .kz[data-tui-design="panels"] {
-  --tui-bg: #0b0d14;
-  --tui-win-bar: #161822;
-  --tui-win-border: #2c2f42;
-  --tui-pane: #343746;
-  --tui-pane-focus: #383b4c;
-  --tui-border: #6272a4;
-  --tui-focus: #bd93f9;
-  --tui-title: #8be9fd;
-  --tui-heading: #f8f8f2;
-  --tui-text: #e2e4f0;
-  --tui-muted: #9ea8c7;
-  --tui-accent: #bd93f9;
-  --tui-accent-soft: rgba(189, 147, 249, 0.18);
-  --tui-ok: #50fa7b;
-  --tui-warn: #f1fa8c;
-  --tui-fault: #ff5555;
-  --tui-stripe: rgba(18, 20, 30, 0.42);
-}
-
-/* Design 3: Classic · Chips (kates ctx / classic look — solid banner & filled pill badges) */
-.arch[data-tui-design="chips"], .kz[data-tui-design="chips"] {
-  --tui-bg: #0b0d14;
-  --tui-win-bar: #151924;
-  --tui-win-border: #262c3d;
-  --tui-pane: #101420;
-  --tui-pane-focus: #131a2b;
-  --tui-border: #28344e;
-  --tui-focus: #60a5fa;
-  --tui-title: #0b0d14;
-  --tui-heading: #f8fafc;
-  --tui-text: #cbd5e1;
-  --tui-muted: #7d899f;
-  --tui-accent: #60a5fa;
-  --tui-accent-soft: rgba(96, 165, 250, 0.18);
-  --tui-ok: #4ade80;
-  --tui-warn: #fbbf24;
-  --tui-fault: #f87171;
-  --tui-stripe: transparent;
-}
 
-/* macOS terminal titlebar + design switcher */
+
+
+
+/* macOS terminal titlebar */
 .arch-winbar {
   display: flex;
   align-items: center;
@@ -269,18 +246,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .arch-dots span:nth-child(1) { background: #ff5f57; }
 .arch-dots span:nth-child(2) { background: #febc2e; }
 .arch-dots span:nth-child(3) { background: #28c840; }
-.arch-wintitle {
-  font-family: var(--sans);
-  font-size: 0.8rem;
-  color: var(--tui-muted);
-  text-align: center;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.arch-designs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
-.arch-designs button, .arch-pause {
+.arch-pause {
   font: 500 11.5px var(--mono);
   color: var(--tui-muted);
   background: rgba(255, 255, 255, 0.03);
@@ -288,16 +254,10 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   border-radius: 6px;
   padding: 4px 9px;
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: color 0.15s ease, border-color 0.15s ease;
 }
-.arch-designs button:hover, .arch-pause:hover { color: var(--tui-heading); border-color: var(--tui-focus); }
+.arch-pause:hover { color: var(--tui-heading); border-color: var(--tui-focus); }
 .arch-pause[hidden] { display: none; }
-.arch-designs button[aria-pressed="true"] {
-  color: #0b0d14;
-  background: var(--tui-focus);
-  border-color: var(--tui-focus);
-  font-weight: 600;
-}
 
 /* TUI Screen Header Bar (matches kates lab / kates dashboard header) */
 .arch-tui-head {
@@ -316,27 +276,10 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .arch-tui-head b { color: var(--tui-title); font-weight: 700; }
 .arch-tui-head .sep { color: var(--tui-muted); }
 .arch-tui-head .url { color: var(--tui-text); }
-.arch[data-tui-design="panels"] .arch-tui-head,
-.kz[data-tui-design="panels"] .arch-tui-head {
-  border-color: var(--tui-focus);
-  background: var(--tui-pane);
-  border-radius: 4px;
-}
-.arch[data-tui-design="panels"] .arch-tui-head b,
-.kz[data-tui-design="panels"] .arch-tui-head b { color: var(--tui-focus); }
-.arch[data-tui-design="chips"] .arch-tui-head,
-.kz[data-tui-design="chips"] .arch-tui-head {
-  background: #d8b4fe;
-  border-color: #d8b4fe;
-  color: #0b0d14;
-  font-weight: 600;
-}
-.arch[data-tui-design="chips"] .arch-tui-head b,
-.arch[data-tui-design="chips"] .arch-tui-head .sep,
-.arch[data-tui-design="chips"] .arch-tui-head .url,
-.kz[data-tui-design="chips"] .arch-tui-head b,
-.kz[data-tui-design="chips"] .arch-tui-head .sep,
-.kz[data-tui-design="chips"] .arch-tui-head .url { color: #0b0d14; }
+
+
+
+
 
 .arch svg { display: block; width: 100%; height: auto; font-family: var(--mono); color: var(--tui-muted); }
 .arch .arch-v { display: none; }
@@ -344,13 +287,16 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 @media (max-width: 820px) {
   .arch { padding: 0 12px 14px; }
   .arch-winbar { margin: 0 -12px 12px; }
+  .arch-tui-head span { display: none; }
   .arch .arch-h { display: none; }
   .arch .arch-v { display: block; max-width: 420px; margin: 0 auto; }
+  .arch .arch-v .t-sub { font-size: 13px; }
+  .arch .arch-v .t-code { font-size: 12.5px; }
+  .arch .arch-v .chip text { font-size: 11.5px; }
+  .arch-pause, .arch-tl button { min-height: 44px; }
 }
 
-.arch .tui-stripe-line { stroke: var(--tui-stripe); stroke-width: 1; }
-.arch .pane-stripes { pointer-events: none; opacity: 0; }
-.arch[data-tui-design="panels"] .pane-stripes { opacity: 1; }
+
 
 .arch .box .pane-bg {
   fill: var(--tui-pane);
@@ -363,24 +309,20 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   fill: var(--tui-pane-focus);
 }
 /* Grid look: sharp corners + title embedded in top border */
-.arch[data-tui-design="grid"] .box .pane-bg,
-.arch[data-tui-design="grid"] .cluster { rx: 0; }
-.arch[data-tui-design="grid"] .t-title { opacity: 0; }
-.arch[data-tui-design="grid"] .title-cut { fill: var(--tui-bg); stroke: none; }
-.arch[data-tui-design="grid"] .t-border-title { fill: var(--tui-title); font-size: 13.5px; font-weight: 700; }
-
-/* Panels look: rounded filled panes, centered cyan title inside pane */
-.arch[data-tui-design="panels"] .box .pane-bg { rx: 4px; }
-.arch[data-tui-design="panels"] .title-cut,
-.arch[data-tui-design="panels"] .t-border-title { opacity: 0; }
-
-/* Chips look: filled pill badge on top border of each node */
-.arch[data-tui-design="chips"] .t-title { opacity: 0; }
-.arch[data-tui-design] .arch-v .t-title { opacity: 1; } /* the vertical diagram has no border titles */
-.arch[data-tui-design="chips"] .title-cut { fill: var(--tui-accent); rx: 4px; }
-.arch[data-tui-design="chips"] .box-cli .title-cut,
-.arch[data-tui-design="chips"] .box-api .title-cut { fill: #d8b4fe; }
-.arch[data-tui-design="chips"] .t-border-title { fill: #0b0d14; font-size: 12.5px; font-weight: 700; }
+.arch .box .pane-bg,
+.arch .cluster { rx: 0; }
+.arch .t-title { opacity: 0; }
+.arch .title-cut { fill: var(--tui-bg); stroke: none; }
+.arch .t-border-title { fill: var(--tui-title); font-size: 13.5px; font-weight: 700; }
+
+
+
+
+
+.arch .arch-v .t-title { opacity: 1; } /* the vertical diagram has no border titles */
+
+
+
 
 .arch .cluster { fill: none; stroke: var(--tui-border); stroke-dasharray: 5 5; stroke-width: 1.2; }
 .arch .cluster-tag { fill: var(--tui-bg); }
@@ -392,8 +334,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .arch .fault .edge, .arch .fault .pkt { stroke: var(--tui-fault); }
 .arch marker path { fill: var(--tui-accent); }
 .arch .mk-fault path { fill: var(--tui-fault); }
-.arch .pkt { fill: none; stroke: var(--tui-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.01 0.99; stroke-dashoffset: 1; animation: arch-flow var(--t, 2s) linear infinite; filter: drop-shadow(0 0 4px var(--tui-accent)); }
-.arch .fault .pkt { filter: drop-shadow(0 0 5px var(--tui-fault)); }
+.arch .pkt { fill: none; stroke: var(--tui-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.01 0.99; stroke-dashoffset: 1; animation: arch-flow var(--t, 2s) linear infinite; }
 .arch .chip rect { fill: #151926; stroke: var(--tui-border); stroke-width: 1.2; }
 .arch .chip text { fill: var(--tui-heading); font-size: 10.5px; font-family: var(--mono); }
 .arch .fault .chip rect { fill: rgba(251, 113, 133, 0.18); stroke: var(--tui-fault); stroke-width: 1.5; }
@@ -407,7 +348,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .arch .fault .edge { stroke-opacity: 0.65; }
 .arch[data-phase="1"] .fault .edge, .arch[data-phase="2"] .fault .edge { stroke-opacity: 1; }
 .arch .ok .edge { stroke: var(--tui-ok); stroke-dasharray: 5 4; }
-.arch .ok .pkt { stroke: var(--tui-ok); filter: drop-shadow(0 0 4px var(--tui-ok)); }
+.arch .ok .pkt { stroke: var(--tui-ok); }
 .arch .mk-ok path { fill: var(--tui-ok); }
 .arch[data-phase="1"] .litmus-hit, .arch[data-phase="2"] .kafka-hit { stroke: var(--tui-fault) !important; stroke-width: 2.2; }
 .arch[data-phase="3"] .kafka-hit { stroke: var(--tui-warn) !important; }
@@ -416,7 +357,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .arch .stamp { transform-box: fill-box; transform-origin: center; transform: scale(2.2) rotate(-14deg); transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1); }
 .arch[data-phase="4"] .stamp { transform: rotate(-10deg); }
 .arch .stamp circle { fill: var(--tui-ok); }
-.arch .stamp text { fill: #0b0d14; font-weight: 800; font-size: 18px; }
+.arch .stamp text { fill: var(--tui-bg); font-weight: 800; font-size: 18px; }
 .arch .p99 { font-size: 23px; font-weight: 700; fill: var(--tui-ok); transition: fill 0.3s; }
 .arch[data-phase="2"] .p99 { fill: var(--tui-fault); }
 .arch[data-phase="3"] .p99 { fill: var(--tui-warn); }
@@ -448,13 +389,8 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 }
 .arch-tl button.bad[aria-pressed="true"] { color: var(--tui-fault); border-color: var(--tui-fault); background: rgba(251, 113, 133, 0.14); }
 .arch-tl button.good[aria-pressed="true"] { color: var(--tui-ok); border-color: var(--tui-ok); background: rgba(74, 222, 128, 0.14); }
-/* In Chips look, the active timeline phase looks like the solid selection bar in kates ctx profiles set */
-.arch[data-tui-design="chips"] .arch-tl button[aria-pressed="true"] {
-  background: var(--tui-focus);
-  border-color: var(--tui-focus);
-  color: #0b0d14;
-}
-.arch[data-tui-design="chips"] .arch-tl button[aria-pressed="true"] .k-idx { color: #0b0d14; }
+
+
 
 .arch-step {
   text-align: left;
@@ -480,10 +416,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   color: var(--tui-muted);
 }
 .arch-keyhints b { color: var(--tui-focus); font-weight: 600; }
-@media (hover: none) { .arch .arch-keyhints, .kz .arch-keyhints span:not(:first-child) { display: none; } }
-.arch[data-tui-design="panels"] .arch-keyhints b,
-.kz[data-tui-design="panels"] .arch-keyhints b { color: #bd93f9; }
-.arch-keyhints .sep { color: var(--tui-border); }
+@media (hover: none) { .arch .arch-keyhints { display: none; } }
 .arch figcaption, .kz figcaption {
   color: var(--tui-muted);
   font-size: 0.83rem;
@@ -513,6 +446,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   .arch .broker.hit, .arch .spark, .kz * { animation: none !important; stroke-dashoffset: 0; }
 }
 /* inside Kafka: site.js sets data-phase 0-4 on the figure */
+.kz { margin-bottom: 0; }
 .kz-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
 .kz-src {
   border: 1.4px solid var(--tui-focus);
@@ -525,27 +459,16 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   flex-wrap: wrap;
   gap: 4px 16px;
 }
-.kz[data-tui-design="grid"] .kz-src,
-.kz[data-tui-design="grid"] .kz-brk,
-.kz[data-tui-design="grid"] .kz-chaos { border-radius: 0; }
-.kz[data-tui-design="panels"] .kz-src,
-.kz[data-tui-design="panels"] .kz-brk,
-.kz[data-tui-design="panels"] .kz-chaos {
-  border-radius: 4px;
-  background-image: repeating-linear-gradient(
-    to bottom,
-    transparent 0,
-    transparent 21px,
-    var(--tui-stripe) 21px,
-    var(--tui-stripe) 22px
-  );
-}
+.kz .kz-src,
+.kz .kz-brk,
+.kz .kz-chaos { border-radius: 0; }
+
 .kz-src b, .kz-chaos b, .kz-brk-h b { color: var(--tui-title); font-weight: 700; }
 .kz-src span { color: var(--tui-ok); font: 600 12.5px var(--mono); }
 .kz-chaos span { color: var(--tui-muted); font: 12.5px var(--mono); }
 .kz-lane { height: 50px; position: relative; }
 .kz-lane::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1.5px dashed var(--tui-border); }
-.kz-lane i { position: absolute; left: calc(50% - 4px); top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tui-accent); box-shadow: 0 0 6px var(--tui-accent); animation: kz-drop 1s linear infinite; }
+.kz-lane i { position: absolute; left: calc(50% - 4px); top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tui-accent); animation: kz-drop 1s linear infinite; }
 .kz-lane i:nth-child(2) { animation-delay: -0.33s; } .kz-lane i:nth-child(3) { animation-delay: -0.66s; }
 .kz-lane.busy i { animation-duration: 0.55s; }
 .kz-lane.idle i { visibility: hidden; }
@@ -561,25 +484,16 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .kz-brk-h b { font: 700 13px var(--mono); color: var(--tui-title); }
 .kz-brk-h small { color: var(--tui-muted); font-size: 11.5px; }
 /* Grid look: broker title cut into the top border */
-.kz[data-tui-design="grid"] .kz-brk-h b {
+.kz .kz-brk-h b {
   position: absolute;
   top: -10px;
   left: 10px;
   background: var(--tui-bg);
   padding: 0 6px;
 }
-.kz[data-tui-design="grid"] .kz-brk-h { justify-content: flex-end; margin-bottom: 8px; }
-/* Chips look: broker title as a solid filled pill badge on the top border */
-.kz[data-tui-design="chips"] .kz-brk-h b {
-  position: absolute;
-  top: -11px;
-  left: 10px;
-  background: var(--tui-accent);
-  color: #0b0d14;
-  padding: 1px 8px;
-  border-radius: 4px;
-}
-.kz[data-tui-design="chips"] .kz-brk-h { justify-content: flex-end; margin-bottom: 8px; }
+.kz .kz-brk-h { justify-content: flex-end; margin-bottom: 8px; }
+
+
 
 .kz-parts { display: flex; gap: 6px; }
 .kz-parts span {
@@ -595,7 +509,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   background: rgba(255, 255, 255, 0.02);
   transition: background 0.4s, color 0.4s, border-color 0.4s;
 }
-.kz-parts .ldr { background: var(--tui-accent); color: #0b0d14; font-weight: 700; }
+.kz-parts .ldr { background: var(--tui-accent); color: var(--tui-bg); font-weight: 700; }
 .kz-parts .ldr::before { content: "★ "; font-size: 10px; }
 .kz-parts span::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--tui-warn); }
 .kz[data-phase="1"] .kz-hit .kz-brk { animation: kz-shake 0.12s 6; border-color: var(--tui-fault); }
@@ -662,7 +576,7 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .screens figcaption b { color: var(--heading); }
 
 /* ---------- compare ---------- */
-.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
+.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
 .compare { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 760px; }
 .compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
 .compare thead th { color: var(--heading); font-weight: 600; background: var(--surface-2); }
@@ -670,24 +584,58 @@ h3 { font-size: 1.2rem; font-weight: 600; }
 .compare tbody tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
 .compare .yes { color: var(--ok); font-weight: 600; }
 .compare .no { color: var(--no); }
-.compare .hl { background: rgba(95, 169, 238, 0.07); }
-.compare thead .hl { color: var(--accent-strong); }
+.compare .hl { background: rgba(26, 91, 204, 0.06); }
+.compare thead .hl { color: var(--accent); }
 
 /* ---------- cta ---------- */
-.cta { text-align: center; background: radial-gradient(60% 80% at 50% 0%, rgba(79, 163, 240, 0.18), transparent 70%); }
+.cta { text-align: center; background: radial-gradient(60% 80% at 50% 0%, rgba(26, 91, 204, 0.1), transparent 70%); }
 .cta-inner { display: flex; flex-direction: column; align-items: center; }
 .cta-inner .sub { max-width: 54ch; }
-.install { margin-top: 28px; }
-.install code { font-size: 1rem; padding: 10px 16px; border-radius: 10px; background: #0a0f1d; border: 1px solid var(--border-strong); color: #c9d4ea; }
+.install { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 10px 12px 10px 18px; border-radius: 10px; background: var(--code-bg); }
+.install code { font-size: 1.05rem; color: var(--code-text); }
+.cta-links { margin: 18px 0 0; color: var(--muted); font-size: 0.95rem; }
+.copy {
+  min-width: 8ch; padding: 4px 10px; border: 1px solid var(--code-border); border-radius: 6px;
+  background: transparent; color: var(--code-text); font: 500 0.75rem var(--mono); cursor: pointer; transition: border-color .12s ease;
+}
+.copy:hover { border-color: var(--code-prompt); }
+.copy[hidden] { display: none; }
+.install :focus-visible, .code-title :focus-visible { outline-color: var(--code-prompt); }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* ---------- work with us ---------- */
+.work-page { padding: 88px 0 96px; }
+.work-page h1 { margin-bottom: 40px; }
+.work-grid { display: grid; grid-template-columns: 1fr 300px; gap: 72px; align-items: start; }
+.work-list { border-top: 2px solid var(--heading); }
+.work-list details { border-bottom: 1px solid var(--border-strong); }
+.work-list summary { padding: 20px 36px 20px 0; position: relative; cursor: pointer; list-style: none; font: 600 clamp(1.45rem, 3vw, 2rem)/1.2 "EB Garamond", Georgia, serif; color: var(--heading); }
+.work-list summary::-webkit-details-marker { display: none; }
+.work-list summary::after { content: "+"; position: absolute; right: 4px; top: 18px; font-family: var(--sans); font-weight: 400; color: var(--accent); }
+.work-list details[open] summary::after { content: "−"; }
+.work-list summary:hover { color: var(--accent); }
+.work-list details > div { padding: 0 0 28px; max-width: 60ch; }
+.work-list h2 { margin-bottom: 8px; font: 600 0.98rem var(--sans); letter-spacing: 0; color: var(--text); }
+.work-list a { font-weight: 600; }
+.work-page aside { position: sticky; top: 96px; padding-top: 88px; }
+.work-page aside .btn { width: 100%; }
+.work-sponsor { display: block; margin-top: 14px; text-align: center; font-size: 0.95rem; }
+@media (max-width: 1000px) {
+  .work-grid { grid-template-columns: 1fr; gap: 40px; }
+  .work-page aside { position: static; padding-top: 0; }
+}
+@media (max-width: 760px) {
+  .work-page { padding: 56px 0 64px; }
+}
 
 /* ---------- footer ---------- */
-.footer { border-top: 1px solid var(--border); background: #0a0f1d; padding: 56px 0 28px; }
+.footer { background: var(--heading); padding: 56px 0 28px; }
 .footer-inner { display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px; }
-.footer-brand p { color: var(--muted); max-width: 40ch; font-size: 0.95rem; margin-top: 16px; }
+.footer-brand p { color: var(--on-ink-muted); max-width: 40ch; font-size: 0.95rem; margin-top: 16px; }
 .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
-.footer-links h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 14px; }
-.footer-links a { display: block; color: var(--text); font-size: 0.95rem; margin-bottom: 10px; }
-.footer-legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 0.82rem; }
+.footer-links h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-ink-muted); margin-bottom: 14px; }
+.footer-links a { display: block; color: var(--on-ink); font-size: 0.95rem; margin-bottom: 10px; }
+.footer-legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--on-ink-rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--on-ink-muted); font-size: 0.82rem; }
 
 /* ---------- responsive ---------- */
 @media (max-width: 1000px) {
@@ -696,38 +644,30 @@ h3 { font-size: 1.2rem; font-weight: 600; }
   .cards.three { grid-template-columns: 1fr 1fr; }
   .footer-inner { grid-template-columns: 1fr; }
 }
-@media (max-width: 760px) {
-  body { font-size: 16px; }
-  .section { padding: 64px 0; }
-  .hero { padding: 56px 0 48px; }
-  .cards.three, .screens, .footer-links { grid-template-columns: 1fr; }
+@media (max-width: 1020px) {
   .nav-toggle { display: block; }
   .nav-links {
     display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
     gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px var(--gutter) 16px;
+    max-height: calc(100dvh - 65px); overflow-y: auto;
   }
   .nav-links.open { display: flex; }
   .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--border); }
   .nav-links .btn { margin-top: 12px; border-bottom: 0; }
 }
+@media (max-width: 760px) {
+  body { font-size: 16px; }
+  .install code { font-size: 0.85rem; }
+  .copy { min-height: 44px; }
+  .section { padding: 64px 0; }
+  .hero { padding: 56px 0 48px; }
+  .cards.three, .screens, .footer-links { grid-template-columns: 1fr; }
+}
 @media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
-  .btn, .card { transition: none; }
+  .btn { transition: none; }
 }
 
 /* Grid children must be allowed to shrink below their content width, or a
    wide <pre> stretches the column on narrow screens. */
 .hero-grid > *, .how-grid > *, .how-code > *, .screens > * { min-width: 0; }
-
-/* ---------- Paper theme rules ---------- */
-h1, h2, .brand-name { font-family: "EB Garamond", Georgia, serif; letter-spacing: -0.01em; }
-h1 { font-weight: 600; } h2 { font-weight: 600; }
-.nav { background: rgba(247, 245, 239, 0.88); }
-.hero-glow { background: radial-gradient(60% 50% at 20% 30%, rgba(26, 91, 204, 0.12), transparent 70%); }
-p code, li code, td code, th code, h2 code, figcaption code { color: #143f8f; }
-.cta { background: radial-gradient(60% 80% at 50% 0%, rgba(26, 91, 204, 0.1), transparent 70%); }
-.footer { background: #102a66; border-top-color: #102a66; }
-.footer-links a, .footer-brand p, .footer-legal, .footer-links h4 { color: #c3cce0; }
-.footer-links a { color: #e6eaf2; }
-.footer-legal { border-top-color: #243f7a; }
-.compare .hl { background: rgba(26, 91, 204, 0.06); }
diff --git a/website/themes/ember.css b/website/themes/ember.css
deleted file mode 100644
index a270a6e50..000000000
--- a/website/themes/ember.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* Theme: Ember — warm charcoal with an amber accent, geometric headings. */
-@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
-:root {
-  --bg: #141210; --bg-alt: #1a1714; --surface: #1f1b17; --surface-2: #27221d;
-  --border: #332c25; --border-strong: #4a4035;
-  --text: #e6ded4; --heading: #fbf6ef; --muted: #a79c8e;
-  --accent: #f59e0b; --accent-strong: #f59e0b; --accent-soft: rgba(245, 158, 11, 0.13);
-  --ok: #34d399; --warn: #fb7185; --no: #7d7368; --radius: 18px;
-}
-h1, h2, h3, .brand-name { font-family: "Space Grotesk", var(--sans); }
-h1 { font-weight: 700; }
-.nav { background: rgba(20, 18, 16, 0.86); }
-.hero-glow { background: radial-gradient(60% 50% at 20% 30%, rgba(245, 158, 11, 0.16), transparent 70%), radial-gradient(40% 40% at 85% 20%, rgba(120, 53, 15, 0.5), transparent 70%); }
-.btn-primary { color: #1a1206; } .btn-primary:hover { background: #fbbf24; }
-.terminal, .code-block { background: #0f0d0b; border-color: #4a4035; }
-.terminal-bar, .code-title { background: #16130f; }
-.terminal pre, .code-block pre { color: #e8dccd; }
-.terminal .p { color: var(--accent); }
-p code, li code, td code, th code, h2 code { color: #fcd38d; }
-.code-block .k { color: #fcd38d; }
-.cta { background: radial-gradient(60% 80% at 50% 0%, rgba(245, 158, 11, 0.14), transparent 70%); }
-.footer { background: #0f0d0b; }
-.compare .hl { background: rgba(245, 158, 11, 0.07); }
diff --git a/website/themes/navy.css b/website/themes/navy.css
deleted file mode 100644
index 3cb8723ca..000000000
--- a/website/themes/navy.css
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Theme: Navy — the book's dark palette (the original default). */
-:root {
-  --bg: #0e1425;
-  --bg-alt: #111a30;
-  --surface: #131c33;
-  --surface-2: #182340;
-  --border: #243150;
-  --border-strong: #33426a;
-  --text: #dbe2f0;
-  --heading: #f1f4fa;
-  --muted: #95a2bd;
-  --accent: #5fa9ee;
-  --accent-strong: #4fa3f0;
-  --accent-soft: rgba(95, 169, 238, 0.14);
-  --ok: #5ed39b;
-  --warn: #f2b84b;
-  --no: #8794b0;
-  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --radius: 14px;
-  --wrap: 1180px;
-  --gutter: 20px;
-  color-scheme: dark;
-}
-.nav { background: rgba(14, 20, 37, 0.82); }
-.footer { background: #0a0f1d; }
diff --git a/website/themes/phosphor.css b/website/themes/phosphor.css
deleted file mode 100644
index 89fdd174c..000000000
--- a/website/themes/phosphor.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/* Theme: Phosphor — near-black ops console, green accent, mono headings. */
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&display=swap');
-:root {
-  --bg: #080b09; --bg-alt: #0c100d; --surface: #0f1511; --surface-2: #141c16;
-  --border: #1f2b22; --border-strong: #2c3d30;
-  --text: #cfd8d0; --heading: #f2f7f2; --muted: #879a8b;
-  --accent: #4ade80; --accent-strong: #4ade80; --accent-soft: rgba(74, 222, 128, 0.12);
-  --ok: #4ade80; --warn: #fbbf24; --no: #6b7c70;
-  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; --radius: 6px;
-}
-h1, h2, .eyebrow, .brand-name { font-family: var(--mono); letter-spacing: -0.03em; }
-h1 { font-weight: 700; font-size: clamp(2rem, 4.6vw, 3.2rem); }
-.nav { background: rgba(8, 11, 9, 0.88); }
-.hero-glow { background: radial-gradient(50% 45% at 25% 30%, rgba(74, 222, 128, 0.12), transparent 70%); }
-.btn-primary { color: #04120a; } .btn-primary:hover { background: #6ee7a0; }
-.terminal, .code-block { background: #050705; border-color: #2c3d30; box-shadow: 0 0 0 1px rgba(74,222,128,.08), 0 30px 80px rgba(0,0,0,.6); }
-.terminal-bar, .code-title { background: #0a0e0b; }
-.terminal pre, .code-block pre { color: #b8e6c4; }
-p code, li code, td code, th code, h2 code { color: #a7f3c0; }
-.cta { background: radial-gradient(60% 80% at 50% 0%, rgba(74, 222, 128, 0.1), transparent 70%); }
-.footer { background: #050705; }
-.hero-points li::before { box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent); }
diff --git a/website/themes/slate.css b/website/themes/slate.css
deleted file mode 100644
index caaae1b1c..000000000
--- a/website/themes/slate.css
+++ /dev/null
@@ -1,25 +0,0 @@
-/* Theme: Slate — light, minimal, monochrome with one indigo accent and large type. */
-:root {
-  --bg: #fafafa; --bg-alt: #f1f3f6; --surface: #ffffff; --surface-2: #f4f6f9;
-  --border: #e3e7ee; --border-strong: #c9d0db;
-  --text: #334155; --heading: #0f172a; --muted: #64748b;
-  --accent: #4f46e5; --accent-strong: #4f46e5; --accent-soft: rgba(79, 70, 229, 0.09);
-  --ok: #059669; --warn: #d97706; --no: #94a3b8; --radius: 10px; color-scheme: light;
-}
-body { font-size: 18px; }
-h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); letter-spacing: -0.035em; }
-h2 { letter-spacing: -0.03em; }
-.nav { background: rgba(250, 250, 250, 0.9); }
-.hero-glow { background: radial-gradient(60% 50% at 20% 30%, rgba(79, 70, 229, 0.1), transparent 70%); }
-.btn-primary { color: #fff; } .btn-primary:hover { background: #6366f1; }
-.btn-ghost { color: var(--heading); }
-.terminal, .code-block { background: #0f172a; border-color: #1e293b; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18); }
-.terminal-bar, .code-title { background: #111c33; border-bottom-color: #1e293b; }
-p code, li code, td code, th code, h2 code { color: #3730a3; }
-.cta { background: radial-gradient(60% 80% at 50% 0%, rgba(79, 70, 229, 0.08), transparent 70%); }
-.footer { background: #0f172a; }
-.footer-links a, .footer-brand p, .footer-legal, .footer-links h4 { color: #cbd5e1; }
-.footer-links a { color: #f1f5f9; }
-.footer-legal { border-top-color: #1e293b; }
-.compare .hl { background: rgba(79, 70, 229, 0.05); }
-.card:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
diff --git a/website/work-with-us.html b/website/work-with-us.html
new file mode 100644
index 000000000..2b49db638
--- /dev/null
+++ b/website/work-with-us.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self'; connect-src 'self'; base-uri 'self'; form-action 'self'">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Work with us — Kates</title>
+  <meta name="description" content="Work with the team behind Kates: resilience assessments, audit preparation, migration rehearsals, rollouts and workshops for Apache Kafka on Kubernetes.">
+  <link rel="canonical" href="https://katesplatform.io/work-with-us.html">
+  <meta name="theme-color" content="#f7f5ef">
+  <meta name="referrer" content="strict-origin-when-cross-origin">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://katesplatform.io/work-with-us.html">
+  <meta property="og:title" content="Work with us — Kates">
+  <meta property="og:description" content="Resilience assessments, audit preparation, migration rehearsals, rollouts and workshops for Apache Kafka on Kubernetes.">
+  <meta property="og:image" content="https://katesplatform.io/assets/social-preview.png">
+  <link rel="icon" type="image/svg+xml" href="assets/kates-logo.svg">
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <a class="skip" href="#main">Skip to content</a>
+  <header class="nav" id="top">
+    <div class="wrap nav-inner">
+      <a class="brand" href="index.html#top" aria-label="Kates home">
+        <img src="assets/kates-logo.svg" width="36" height="36" alt="">
+        <span class="brand-name"><b>K</b>ates</span>
+      </a>
+      <button type="button" class="nav-toggle" aria-expanded="false" aria-controls="nav-links" aria-label="Open menu">
+        <span></span><span></span><span></span>
+      </button>
+      <nav id="nav-links" class="nav-links" aria-label="Primary">
+        <a href="index.html#features">Features</a>
+        <a href="index.html#how">How it works</a>
+        <a href="index.html#architecture">Architecture</a>
+        <a href="index.html#compare">Compare</a>
+        <a href="index.html#ci">CI gates</a>
+        <a href="https://bmscomp.github.io/kates/">Docs</a>
+        <a href="work-with-us.html" aria-current="page">Work with us</a>
+        <a class="gh" href="https://github.com/bmscomp/kates">
+          <svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+          GitHub
+        </a>
+        <a class="btn btn-primary btn-sm" href="index.html#how">Quick start</a>
+      </nav>
+    </div>
+  </header>
+  <main id="main">
+    <section class="work-page"><div class="wrap work-grid">
+      <div>
+        <h1>What brought you here?</h1>
+        <div class="work-list">
+          <details name="situation" open><summary>We have never lost a broker on purpose.</summary><div><h2>Resilience assessment</h2><p>We run load and agreed faults against staging and show you what a real failure would cost. You keep the report and a ranked list of fixes.</p><a href="https://github.com/bmscomp/kates/discussions/new/choose">Talk to us about this</a></div></details>
+          <details name="situation"><summary>An audit is coming.</summary><div><h2>Security audit and evidence</h2><p>We grade your broker configuration against CIS, SOC 2 and PCI DSS, fix what we can together and save a baseline for the next review.</p><a href="https://github.com/bmscomp/kates/discussions/new/choose">Talk to us about this</a></div></details>
+          <details name="situation"><summary>We are moving Kafka.</summary><div><h2>Migration rehearsal</h2><p>We rehearse the move on a lab or staging cluster, with failures during the cutover, so the first attempt in production is not the first attempt.</p><a href="https://github.com/bmscomp/kates/discussions/new/choose">Talk to us about this</a></div></details>
+          <details name="situation"><summary>Our team needs to own this.</summary><div><h2>Rollout and workshop</h2><p>We install Kates, wire the CI gates and dashboards, and train your engineers on a three-zone lab they can keep.</p><a href="https://github.com/bmscomp/kates/discussions/new/choose">Talk to us about this</a></div></details>
+        </div>
+      </div>
+      <aside>
+        <p>Something else? Tell us what you run and what worries you. If Kates is the wrong tool, we'll say so. Conversations start in public on GitHub Discussions.</p>
+        <a class="btn btn-primary" href="https://github.com/bmscomp/kates/discussions/new/choose">Start a conversation</a>
+        <a class="work-sponsor" href="https://github.com/sponsors/bmscomp">Or sponsor the project</a>
+      </aside>
+    </div></section>
+
+  </main>
+  <footer class="footer">
+    <div class="wrap footer-inner">
+      <div class="footer-brand">
+        <picture>
+          <img src="assets/kates-wordmark-dark.svg" width="310" height="28" alt="Kates — Kafka advanced testing and engineering suite">
+        </picture>
+        <p>Performance testing, chaos engineering and security auditing for Apache Kafka on Kubernetes.</p>
+      </div>
+      <nav class="footer-links" aria-label="Footer">
+        <div>
+          <h3>Project</h3>
+          <a href="https://github.com/bmscomp/kates">Source code</a>
+          <a href="https://github.com/bmscomp/kates/releases/latest">Releases</a>
+          <a href="https://github.com/bmscomp/kates/blob/main/CONTRIBUTING.md">Contributing</a>
+          <a href="https://github.com/bmscomp/kates/blob/main/LICENSE">License</a>
+          <a href="work-with-us.html">Work with us</a>
+        </div>
+        <div>
+          <h3>Learn</h3>
+          <a href="https://bmscomp.github.io/kates/">The book</a>
+          <a href="https://bmscomp.github.io/kates/10-cli-reference.html">CLI reference</a>
+          <a href="https://bmscomp.github.io/kates/11-api-reference.html">API reference</a>
+          <a href="https://bmscomp.github.io/kates/14-recipes.html">Recipes</a>
+        </div>
+        <div>
+          <h3>Ecosystem</h3>
+          <a href="https://strimzi.io/">Strimzi</a>
+          <a href="https://litmuschaos.io/">LitmusChaos</a>
+          <a href="https://kafka.apache.org/">Apache Kafka</a>
+          <a href="https://artifacthub.io/packages/search?repo=kates">Artifact Hub</a>
+        </div>
+      </nav>
+    </div>
+    <div class="wrap footer-legal">
+      <span>© <span id="year">2026</span> Kates contributors. Apache License 2.0.</span>
+      <span>Apache Kafka is a trademark of the Apache Software Foundation. Kates is an independent project, not affiliated with the ASF.</span>
+    </div>
+  </footer>
+  <script src="site.js" defer></script>
+</body>
+</html>