diff --git a/docs/404.html b/docs/404.html
index 86cc7af..11b57b4 100644
--- a/docs/404.html
+++ b/docs/404.html
@@ -3,55 +3,46 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Nothing reading here | Core-Monitor</title>
+  <meta name="color-scheme" content="light dark">
+  <title>No signal at this address | Core-Monitor</title>
   <meta name="robots" content="noindex">
-  <meta name="theme-color" content="#07080b" media="(prefers-color-scheme: dark)">
-  <meta name="theme-color" content="#f1f2ef" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#e8eaec" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#16191c" media="(prefers-color-scheme: dark)">
   <link rel="icon" href="/Core-Monitor/favicon.ico?v=6" sizes="any">
   <link rel="icon" type="image/png" sizes="512x512" href="/Core-Monitor/images/site/core-monitor-logo.png?v=6">
-  <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=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/Core-Monitor/styles.css?v=9">
-  <link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css">
+  <link rel="stylesheet" href="/Core-Monitor/styles.css?v=20">
 </head>
 <body>
-  <a class="skip-link" href="#main">Skip to content</a>
+  <a class="skiplink" href="#main">Skip to content</a>
 
-  <header class="site-header">
-    <div class="wrap header-row">
-      <a class="brand" href="/Core-Monitor/">
-        <img class="brand-mark" src="/Core-Monitor/images/site/core-monitor-logo.png?v=6" alt="Core-Monitor app icon">
-        <span class="brand-text">Core-Monitor</span>
+  <header class="topbar">
+    <div class="shell topbar-inner">
+      <a class="wordmark" href="/Core-Monitor/">
+        <img src="/Core-Monitor/images/site/core-monitor-logo.png?v=6" alt="" width="27" height="27">
+        Core-Monitor
       </a>
-      <div class="header-actions">
-        <a class="icon-link" href="https://github.com/offyotto/Core-Monitor" aria-label="Core-Monitor on GitHub" title="Core-Monitor on GitHub">
-          <picture>
-            <source media="(prefers-color-scheme: light)" srcset="/Core-Monitor/images/site/github-mark.png">
-            <img src="/Core-Monitor/images/site/github-mark-light.png" alt="" width="24" height="24">
-          </picture>
-        </a>
-        <a class="btn btn-solid btn-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Get the app</a>
-      </div>
+      <a class="act act-heat act-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download</a>
     </div>
   </header>
 
   <main id="main">
-    <section class="wrap void">
-      <p class="eyebrow">Sensor not found</p>
+    <section class="shell lost">
+      <svg class="flatline" viewBox="0 0 480 60" preserveAspectRatio="none" aria-hidden="true">
+        <polyline points="0,30 150,30 165,12 180,48 195,30 480,30"></polyline>
+      </svg>
       <h1>404</h1>
       <p>This address is not reporting any data. The page may have moved, or the link was typed slightly wrong.</p>
-      <div class="btn-group">
-        <a class="btn btn-solid" href="/Core-Monitor/">Back to the dashboard</a>
-        <a class="btn btn-outline" href="https://github.com/offyotto/Core-Monitor">Core-Monitor on GitHub</a>
+      <div class="action-row">
+        <a class="act act-heat" href="/Core-Monitor/">Back to the site</a>
+        <a class="act act-line" href="https://github.com/offyotto/Core-Monitor">Core-Monitor on GitHub</a>
       </div>
     </section>
   </main>
 
-  <footer class="site-footer">
-    <div class="wrap footer-row">
-      <p class="footer-brand"><img src="/Core-Monitor/images/site/core-monitor-logo.png?v=6" alt="" width="22" height="22">Core-Monitor</p>
-      <nav class="footer-nav" aria-label="Footer">
+  <footer class="basefoot">
+    <div class="shell basefoot-row">
+      <p class="basefoot-brand"><img src="/Core-Monitor/images/site/core-monitor-logo.png?v=6" alt="" width="21" height="21">Core-Monitor</p>
+      <nav class="basefoot-nav" aria-label="Footer">
         <a href="/Core-Monitor/">Home</a>
         <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
         <a href="https://github.com/offyotto/Core-Monitor/releases/latest">Releases</a>
@@ -59,8 +50,5 @@ <h1>404</h1>
       </nav>
     </div>
   </footer>
-
-  <script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
-  <script src="/Core-Monitor/script.js?v=6"></script>
 </body>
 </html>
diff --git a/docs/Mac-App-Store/index.html b/docs/Mac-App-Store/index.html
index 9642d74..13ce74e 100644
--- a/docs/Mac-App-Store/index.html
+++ b/docs/Mac-App-Store/index.html
@@ -3,17 +3,17 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
   <title>Core-Monitor Is Available on the Mac App Store | macOS</title>
   <meta name="description" content="Core-Monitor is available free on the Mac App Store at Apple app ID 6762558526. The sandboxed macOS edition monitors CPU, memory, storage, battery, network, and thermal state.">
   <meta name="application-name" content="Core-Monitor">
   <meta name="apple-mobile-web-app-title" content="Core-Monitor">
   <meta name="robots" content="index,follow,max-image-preview:large">
-  <meta name="theme-color" content="#07080b" media="(prefers-color-scheme: dark)">
-  <meta name="theme-color" content="#f1f2ef" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#e8eaec" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#16191c" media="(prefers-color-scheme: dark)">
   <link rel="canonical" href="https://offyotto.github.io/Core-Monitor/Mac-App-Store/">
   <link rel="icon" href="../favicon.ico?v=6" sizes="any">
   <link rel="icon" type="image/png" sizes="512x512" href="../images/site/core-monitor-logo.png?v=6">
-  <link rel="shortcut icon" href="../images/site/core-monitor-logo.png?v=6">
   <link rel="apple-touch-icon" href="../images/site/core-monitor-logo.png?v=6">
   <meta property="og:site_name" content="Core-Monitor">
   <meta property="og:type" content="website">
@@ -26,11 +26,9 @@
   <meta name="twitter:title" content="Core-Monitor on the Mac App Store">
   <meta name="twitter:description" content="Core-Monitor is available free on the Mac App Store.">
   <meta name="twitter:image" content="https://offyotto.github.io/Core-Monitor/images/ui/mac-app-store/app-store-dashboard.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=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="../styles.css?v=9">
-  <link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css">
+  <link rel="preload" as="font" type="font/woff2" href="../fonts/bricolage-grotesque-latin.woff2" crossorigin>
+  <link rel="stylesheet" href="../styles.css?v=20">
+  <script src="../script.js?v=9" defer></script>
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -84,113 +82,110 @@
   </script>
 </head>
 <body>
-  <a class="skip-link" href="#main">Skip to content</a>
+  <a class="skiplink" href="#main">Skip to content</a>
 
-  <header class="site-header">
-    <div class="wrap header-row">
-      <a class="brand" href="../">
-        <img class="brand-mark" src="../images/site/core-monitor-logo.png?v=6" alt="Core-Monitor app icon">
-        <span class="brand-text">Core-Monitor</span>
+  <header class="topbar">
+    <div class="shell topbar-inner">
+      <a class="wordmark" href="../">
+        <img src="../images/site/core-monitor-logo.png?v=6" alt="" width="27" height="27">
+        Core-Monitor
       </a>
-      <div class="header-actions">
-        <a class="btn btn-ghost btn-sm" href="support/">Support</a>
-        <a class="btn btn-ghost btn-sm" href="privacy/">Privacy</a>
-        <a class="icon-link" href="https://github.com/offyotto/Core-Monitor" aria-label="Core-Monitor on GitHub" title="Core-Monitor on GitHub">
-          <picture>
-            <source media="(prefers-color-scheme: light)" srcset="../images/site/github-mark.png">
-            <img src="../images/site/github-mark-light.png" alt="" width="24" height="24">
-          </picture>
-        </a>
-        <a class="btn btn-solid btn-sm" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">View on App Store</a>
-      </div>
+      <nav class="site-menu" aria-label="Pages">
+        <a href="support/">Support</a>
+        <a href="privacy/">Privacy</a>
+        <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
+      </nav>
+      <a class="act act-heat act-sm" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">View on App Store</a>
     </div>
   </header>
 
   <main id="main">
-    <section class="wrap intro">
-      <h1>Core-Monitor is available on the Mac App Store</h1>
-      <p class="hero-text">Core-Monitor is listed as a free macOS app at Apple app ID 6762558526. Apple reviews, signs and delivers this sandboxed edition. It reads and displays system data but does not write to hardware. If fan control matters to you, the <a href="../">direct download</a> is the build to use instead.</p>
-      <div class="btn-group">
-        <a class="btn btn-solid" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">Open the Apple listing</a>
-        <a class="btn btn-outline" href="#scope">What is in this edition</a>
+    <section class="shell page-lede">
+      <h1>Core-Monitor is on the Mac App Store</h1>
+      <p class="lede-sub">Core-Monitor is listed as a free macOS app at Apple app ID 6762558526. Apple reviews, signs and delivers this sandboxed edition. It reads and displays system data but does not write to hardware. If fan control matters to you, the <a href="../">direct download</a> is the build to use instead.</p>
+      <div class="action-row">
+        <a class="act act-heat" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">Open the Apple listing</a>
+        <a class="act act-line" href="#scope">What is in this edition</a>
       </div>
     </section>
 
-    <section class="wrap section section-tight">
-      <div class="gallery" style="grid-template-columns: repeat(2, 1fr);">
-        <figure class="gallery-item" data-reveal>
-          <img src="../images/ui/mac-app-store/app-store-dashboard.png" alt="App Store edition dashboard with CPU activity, memory, thermal state and weather cards." loading="lazy">
-          <figcaption class="gallery-caption"><strong>Dashboard</strong></figcaption>
+    <section class="band">
+      <div class="shell duo">
+        <figure class="bezel">
+          <img src="../images/ui/mac-app-store/app-store-dashboard.png" alt="App Store edition dashboard with CPU activity, memory, thermal state and weather cards." loading="lazy" decoding="async">
+          <figcaption>Dashboard</figcaption>
         </figure>
-        <figure class="gallery-item" data-reveal>
-          <img src="../images/ui/mac-app-store/app-store-menubar.png" alt="App Store edition menu bar extra with a live status summary." loading="lazy">
-          <figcaption class="gallery-caption"><strong>Menu bar extra</strong></figcaption>
+        <figure class="bezel">
+          <img src="../images/ui/mac-app-store/app-store-menubar.png" alt="App Store edition menu bar extra with a live status summary." loading="lazy" decoding="async">
+          <figcaption>Menu bar extra</figcaption>
         </figure>
       </div>
     </section>
 
-    <section class="wrap section" id="scope">
-      <div class="section-head">
-        <h2>Exactly what the sandbox allows</h2>
-        <p>App Store rules shape this edition, so the boundaries are written down plainly instead of left implied.</p>
-      </div>
-      <div class="ledger">
-        <div class="ledger-col" data-reveal>
-          <h3>Included</h3>
-          <ul>
-            <li>Overall CPU activity and per-core load</li>
-            <li>Memory usage and pressure</li>
-            <li>Network throughput and startup disk usage</li>
-            <li>Battery status, thermal state, uptime and load averages</li>
-            <li>Live Weather, only after you enable it and grant location access</li>
-            <li>SwiftUI dashboard and a menu bar extra</li>
-          </ul>
+    <section class="band" id="scope">
+      <div class="shell">
+        <div class="band-head">
+          <h2>Exactly what the sandbox allows</h2>
+          <p>App Store rules shape this edition, so the boundaries are written down plainly instead of left implied.</p>
         </div>
-        <div class="ledger-col is-out" data-reveal>
-          <h3>Left out, by design</h3>
-          <ul>
-            <li>Privileged helper and background services</li>
-            <li>Fan control and any hardware writes</li>
-            <li>Direct sensor access and private frameworks</li>
-            <li>Touch Bar overlays and custom widgets</li>
-            <li>Shell commands and self-updating</li>
-          </ul>
+        <div class="duo">
+          <div class="tally">
+            <h3>Included</h3>
+            <ul>
+              <li>Overall CPU activity and per-core load</li>
+              <li>Memory usage and pressure</li>
+              <li>Network throughput and startup disk usage</li>
+              <li>Battery status, thermal state, uptime and load averages</li>
+              <li>Live Weather, only after you enable it and grant location access</li>
+              <li>SwiftUI dashboard and a menu bar extra</li>
+            </ul>
+          </div>
+          <div class="tally is-out">
+            <h3>Left out, by design</h3>
+            <ul>
+              <li>Privileged helper and background services</li>
+              <li>Fan control and any hardware writes</li>
+              <li>Direct sensor access and private frameworks</li>
+              <li>Touch Bar overlays and custom widgets</li>
+              <li>Shell commands and self-updating</li>
+            </ul>
+          </div>
         </div>
       </div>
     </section>
 
-    <section class="wrap section">
-      <div class="cards">
-        <article class="card" data-reveal>
+    <section class="band">
+      <div class="shell trio">
+        <article>
           <h3>Installed by Apple</h3>
           <p>Reviewed, signed and updated through the App Store, inside the standard sandbox that comes with it.</p>
         </article>
-        <article class="card is-cool" data-reveal>
+        <article>
           <h3>WeatherKit, on request</h3>
           <p>Live Weather is off by default. Turn on Enable Live Weather in Settings to request location access; decline, and the rest of the app runs unchanged.</p>
         </article>
-        <article class="card" data-reveal>
+        <article>
           <h3>Nothing collected</h3>
           <p>No account, no analytics, no advertising code. The <a href="privacy/">privacy policy</a> is a short read on purpose.</p>
         </article>
       </div>
     </section>
 
-    <section class="cta">
-      <div class="wrap cta-inner">
+    <section class="coda">
+      <div class="shell">
         <h2>Get it from the App Store.</h2>
-        <div class="btn-group">
-          <a class="btn btn-solid" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">Open the Apple listing</a>
-          <a class="btn btn-outline" href="support/">Get support</a>
+        <div class="action-row">
+          <a class="act act-heat" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">Open the Apple listing</a>
+          <a class="act act-line" href="support/">Get support</a>
         </div>
       </div>
     </section>
   </main>
 
-  <footer class="site-footer">
-    <div class="wrap footer-row">
-      <p class="footer-brand"><img src="../images/site/core-monitor-logo.png?v=6" alt="" width="22" height="22">Core-Monitor</p>
-      <nav class="footer-nav" aria-label="Footer">
+  <footer class="basefoot">
+    <div class="shell basefoot-row">
+      <p class="basefoot-brand"><img src="../images/site/core-monitor-logo.png?v=6" alt="" width="21" height="21">Core-Monitor</p>
+      <nav class="basefoot-nav" aria-label="Footer">
         <a href="../">Home</a>
         <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
         <a href="https://github.com/offyotto/Core-Monitor/releases/latest">Releases</a>
@@ -199,8 +194,5 @@ <h2>Get it from the App Store.</h2>
       </nav>
     </div>
   </footer>
-
-  <script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
-  <script src="../script.js?v=6"></script>
 </body>
 </html>
diff --git a/docs/Mac-App-Store/privacy/index.html b/docs/Mac-App-Store/privacy/index.html
index 2bf024e..fe0a3f2 100644
--- a/docs/Mac-App-Store/privacy/index.html
+++ b/docs/Mac-App-Store/privacy/index.html
@@ -3,17 +3,17 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
   <title>Privacy Policy | Core-Monitor Mac App Store Edition</title>
   <meta name="description" content="Privacy policy for the Mac App Store edition of Core-Monitor. No account, no analytics, no advertising code. Location is used only for optional local weather.">
   <meta name="application-name" content="Core-Monitor">
   <meta name="apple-mobile-web-app-title" content="Core-Monitor">
   <meta name="robots" content="index,follow,max-image-preview:large">
-  <meta name="theme-color" content="#07080b" media="(prefers-color-scheme: dark)">
-  <meta name="theme-color" content="#f1f2ef" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#e8eaec" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#16191c" media="(prefers-color-scheme: dark)">
   <link rel="canonical" href="https://offyotto.github.io/Core-Monitor/Mac-App-Store/privacy/">
   <link rel="icon" href="../../favicon.ico?v=6" sizes="any">
   <link rel="icon" type="image/png" sizes="512x512" href="../../images/site/core-monitor-logo.png?v=6">
-  <link rel="shortcut icon" href="../../images/site/core-monitor-logo.png?v=6">
   <link rel="apple-touch-icon" href="../../images/site/core-monitor-logo.png?v=6">
   <meta property="og:site_name" content="Core-Monitor">
   <meta property="og:type" content="website">
@@ -26,46 +26,37 @@
   <meta name="twitter:title" content="Privacy Policy | Core-Monitor Mac App Store Edition">
   <meta name="twitter:description" content="Privacy policy for Core-Monitor on the Mac App Store.">
   <meta name="twitter:image" content="https://offyotto.github.io/Core-Monitor/images/ui/mac-app-store/app-store-dashboard.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=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="../../styles.css?v=9">
-  <link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css">
+  <link rel="preload" as="font" type="font/woff2" href="../../fonts/bricolage-grotesque-latin.woff2" crossorigin>
+  <link rel="stylesheet" href="../../styles.css?v=20">
 </head>
 <body>
-  <a class="skip-link" href="#main">Skip to content</a>
+  <a class="skiplink" href="#main">Skip to content</a>
 
-  <header class="site-header">
-    <div class="wrap header-row">
-      <a class="brand" href="../">
-        <img class="brand-mark" src="../../images/site/core-monitor-logo.png?v=6" alt="Core-Monitor app icon">
-        <span class="brand-text">Core-Monitor</span>
+  <header class="topbar">
+    <div class="shell topbar-inner">
+      <a class="wordmark" href="../">
+        <img src="../../images/site/core-monitor-logo.png?v=6" alt="" width="27" height="27">
+        Core-Monitor
       </a>
-      <div class="header-actions">
-        <a class="btn btn-ghost btn-sm" href="../support/">Support</a>
-        <a class="btn btn-ghost btn-sm" href="../">Edition page</a>
-        <a class="icon-link" href="https://github.com/offyotto/Core-Monitor" aria-label="Core-Monitor on GitHub" title="Core-Monitor on GitHub">
-          <picture>
-            <source media="(prefers-color-scheme: light)" srcset="../../images/site/github-mark.png">
-            <img src="../../images/site/github-mark-light.png" alt="" width="24" height="24">
-          </picture>
-        </a>
-      </div>
+      <nav class="site-menu" aria-label="Pages">
+        <a href="../support/">Support</a>
+        <a href="../">Edition page</a>
+        <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
+      </nav>
     </div>
   </header>
 
   <main id="main">
-    <section class="wrap intro">
-      <p class="eyebrow">Privacy policy</p>
+    <section class="shell page-lede">
       <h1>Not much to disclose, so this is short</h1>
-      <p class="hero-text">The Mac App Store edition of Core-Monitor has no account system, no analytics, and no advertising code. It reads system status to draw its own interface, and that reading stays on your Mac.</p>
+      <p class="lede-sub">The Mac App Store edition of Core-Monitor has no account system, no analytics, and no advertising code. It reads system status to draw its own interface, and that reading stays on your Mac.</p>
       <p class="meta-line">Effective April 20, 2026. Applies to the Mac App Store edition of Core-Monitor.</p>
       <p class="meta-line">Apple listing: <a href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">apps.apple.com/us/app/core-monitor/id6762558526</a></p>
     </section>
 
-    <section class="wrap section section-tight">
-      <div class="ledger">
-        <div class="ledger-col" data-reveal>
+    <section class="band">
+      <div class="shell duo">
+        <div class="tally">
           <h3>What the app reads, locally</h3>
           <ul>
             <li>CPU activity and per-core load</li>
@@ -78,7 +69,7 @@ <h3>What the app reads, locally</h3>
             <li>Your location, only if you enable Live Weather</li>
           </ul>
         </div>
-        <div class="ledger-col is-out" data-reveal>
+        <div class="tally is-out">
           <h3>What never happens</h3>
           <ul>
             <li>No account creation or sign-in</li>
@@ -91,62 +82,64 @@ <h3>What never happens</h3>
       </div>
     </section>
 
-    <section class="wrap section">
-      <div class="cards">
-        <article class="card" data-reveal>
+    <section class="band">
+      <div class="shell trio">
+        <article>
           <h3>Location is explicitly opt-in</h3>
           <p>Live Weather is off by default. The app requests location only after you turn on Enable Live Weather in Settings. It never asks for camera, microphone, contacts, photos, accessibility, input monitoring, automation, or full disk access.</p>
         </article>
-        <article class="card is-cool" data-reveal>
+        <article>
           <h3>WeatherKit, only while enabled</h3>
           <p>While Live Weather is enabled, the app sends the device location to Apple WeatherKit and receives weather data for that location. The Core-Monitor developer does not receive it. Core-Monitor&rsquo;s own source makes no other network requests; macOS and App Store components may independently contact Apple services.</p>
         </article>
-        <article class="card" data-reveal>
+        <article>
           <h3>Revoke any time</h3>
           <p>Turn Live Weather off in the app, or withdraw location access in macOS System Settings. Turning it off stops Core-Monitor&rsquo;s weather requests. Everything else keeps working either way.</p>
         </article>
       </div>
     </section>
 
-    <section class="wrap section">
-      <div class="section-head">
-        <h2>Contact</h2>
-        <p>Questions about this policy go straight to the developer.</p>
-      </div>
-      <div class="ledger">
-        <div class="ledger-col" data-reveal>
-          <h3>Reach the developer</h3>
-          <ul>
-            <li>Legal owner: Nazish Faizan</li>
-            <li>Email: <a href="mailto:coremonitor.app@gmail.com">coremonitor.app@gmail.com</a></li>
-            <li>Public help page: <a href="../support/">Core-Monitor support</a></li>
-          </ul>
+    <section class="band">
+      <div class="shell">
+        <div class="band-head">
+          <h2>Contact</h2>
+          <p>Questions about this policy go straight to the developer.</p>
         </div>
-        <div class="ledger-col is-out" data-reveal>
-          <h3>Record</h3>
-          <ul>
-            <li>Copyright &copy; 2026 Nazish Faizan</li>
-            <li>This page is the complete policy for the Mac App Store edition</li>
-          </ul>
+        <div class="duo">
+          <div class="tally">
+            <h3>Reach the developer</h3>
+            <ul>
+              <li>Legal owner: Nazish Faizan</li>
+              <li>Email: <a href="mailto:coremonitor.app@gmail.com">coremonitor.app@gmail.com</a></li>
+              <li>Public help page: <a href="../support/">Core-Monitor support</a></li>
+            </ul>
+          </div>
+          <div class="tally is-out">
+            <h3>Record</h3>
+            <ul>
+              <li>Copyright &copy; 2026 Nazish Faizan</li>
+              <li>This page is the complete policy for the Mac App Store edition</li>
+            </ul>
+          </div>
         </div>
       </div>
     </section>
 
-    <section class="cta">
-      <div class="wrap cta-inner">
+    <section class="coda">
+      <div class="shell">
         <h2>Questions about privacy?</h2>
-        <div class="btn-group">
-          <a class="btn btn-solid" href="mailto:coremonitor.app@gmail.com">Email the developer</a>
-          <a class="btn btn-outline" href="../">Back to the edition page</a>
+        <div class="action-row">
+          <a class="act act-heat" href="mailto:coremonitor.app@gmail.com">Email the developer</a>
+          <a class="act act-line" href="../">Back to the edition page</a>
         </div>
       </div>
     </section>
   </main>
 
-  <footer class="site-footer">
-    <div class="wrap footer-row">
-      <p class="footer-brand"><img src="../../images/site/core-monitor-logo.png?v=6" alt="" width="22" height="22">Core-Monitor</p>
-      <nav class="footer-nav" aria-label="Footer">
+  <footer class="basefoot">
+    <div class="shell basefoot-row">
+      <p class="basefoot-brand"><img src="../../images/site/core-monitor-logo.png?v=6" alt="" width="21" height="21">Core-Monitor</p>
+      <nav class="basefoot-nav" aria-label="Footer">
         <a href="../../">Home</a>
         <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
         <a href="../">Mac App Store</a>
@@ -154,8 +147,5 @@ <h2>Questions about privacy?</h2>
       </nav>
     </div>
   </footer>
-
-  <script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
-  <script src="../../script.js?v=6"></script>
 </body>
 </html>
diff --git a/docs/Mac-App-Store/support/index.html b/docs/Mac-App-Store/support/index.html
index 1b499b5..da12678 100644
--- a/docs/Mac-App-Store/support/index.html
+++ b/docs/Mac-App-Store/support/index.html
@@ -3,17 +3,17 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="light dark">
   <title>Support | Core-Monitor Mac App Store Edition</title>
   <meta name="description" content="Support for the Mac App Store edition of Core-Monitor. Email the developer directly or open an issue on GitHub for bugs, questions and feature requests.">
   <meta name="application-name" content="Core-Monitor">
   <meta name="apple-mobile-web-app-title" content="Core-Monitor">
   <meta name="robots" content="index,follow,max-image-preview:large">
-  <meta name="theme-color" content="#07080b" media="(prefers-color-scheme: dark)">
-  <meta name="theme-color" content="#f1f2ef" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#e8eaec" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#16191c" media="(prefers-color-scheme: dark)">
   <link rel="canonical" href="https://offyotto.github.io/Core-Monitor/Mac-App-Store/support/">
   <link rel="icon" href="../../favicon.ico?v=6" sizes="any">
   <link rel="icon" type="image/png" sizes="512x512" href="../../images/site/core-monitor-logo.png?v=6">
-  <link rel="shortcut icon" href="../../images/site/core-monitor-logo.png?v=6">
   <link rel="apple-touch-icon" href="../../images/site/core-monitor-logo.png?v=6">
   <meta property="og:site_name" content="Core-Monitor">
   <meta property="og:type" content="website">
@@ -26,50 +26,41 @@
   <meta name="twitter:title" content="Support | Core-Monitor Mac App Store Edition">
   <meta name="twitter:description" content="Support for Core-Monitor on the Mac App Store.">
   <meta name="twitter:image" content="https://offyotto.github.io/Core-Monitor/images/ui/mac-app-store/app-store-dashboard.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=JetBrains+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="../../styles.css?v=9">
-  <link rel="stylesheet" href="https://unpkg.com/lenis@1.3.23/dist/lenis.css">
+  <link rel="preload" as="font" type="font/woff2" href="../../fonts/bricolage-grotesque-latin.woff2" crossorigin>
+  <link rel="stylesheet" href="../../styles.css?v=20">
 </head>
 <body>
-  <a class="skip-link" href="#main">Skip to content</a>
+  <a class="skiplink" href="#main">Skip to content</a>
 
-  <header class="site-header">
-    <div class="wrap header-row">
-      <a class="brand" href="../">
-        <img class="brand-mark" src="../../images/site/core-monitor-logo.png?v=6" alt="Core-Monitor app icon">
-        <span class="brand-text">Core-Monitor</span>
+  <header class="topbar">
+    <div class="shell topbar-inner">
+      <a class="wordmark" href="../">
+        <img src="../../images/site/core-monitor-logo.png?v=6" alt="" width="27" height="27">
+        Core-Monitor
       </a>
-      <div class="header-actions">
-        <a class="btn btn-ghost btn-sm" href="../privacy/">Privacy</a>
-        <a class="btn btn-ghost btn-sm" href="../">Edition page</a>
-        <a class="icon-link" href="https://github.com/offyotto/Core-Monitor" aria-label="Core-Monitor on GitHub" title="Core-Monitor on GitHub">
-          <picture>
-            <source media="(prefers-color-scheme: light)" srcset="../../images/site/github-mark.png">
-            <img src="../../images/site/github-mark-light.png" alt="" width="24" height="24">
-          </picture>
-        </a>
-        <a class="btn btn-solid btn-sm" href="mailto:coremonitor.app@gmail.com">Email support</a>
-      </div>
+      <nav class="site-menu" aria-label="Pages">
+        <a href="../privacy/">Privacy</a>
+        <a href="../">Edition page</a>
+        <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
+      </nav>
+      <a class="act act-heat act-sm" href="mailto:coremonitor.app@gmail.com">Email support</a>
     </div>
   </header>
 
   <main id="main">
-    <section class="wrap intro">
-      <p class="eyebrow">Support</p>
+    <section class="shell page-lede">
       <h1>One developer, one inbox</h1>
-      <p class="hero-text">Core-Monitor is built and supported by a single developer, Nazish Faizan. Bug reports, setup questions and feature ideas for the Mac App Store edition all land in the same place.</p>
+      <p class="lede-sub">Core-Monitor is built and supported by a single developer, Nazish Faizan. Bug reports, setup questions and feature ideas for the Mac App Store edition all land in the same place.</p>
       <p class="meta-line">Apple listing: <a href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">apps.apple.com/us/app/core-monitor/id6762558526</a></p>
-      <div class="btn-group">
-        <a class="btn btn-solid" href="mailto:coremonitor.app@gmail.com">Email coremonitor.app@gmail.com</a>
-        <a class="btn btn-outline" href="https://github.com/offyotto/core-monitor-app-store/issues">Open a GitHub issue</a>
+      <div class="action-row">
+        <a class="act act-heat" href="mailto:coremonitor.app@gmail.com">Email coremonitor.app@gmail.com</a>
+        <a class="act act-line" href="https://github.com/offyotto/core-monitor-app-store/issues">Open a GitHub issue</a>
       </div>
     </section>
 
-    <section class="wrap section section-tight">
-      <div class="ledger">
-        <div class="ledger-col" data-reveal>
+    <section class="band">
+      <div class="shell duo">
+        <div class="tally">
           <h3>Good reasons to write in</h3>
           <ul>
             <li>Something in the App Store edition looks wrong or crashes</li>
@@ -79,7 +70,7 @@ <h3>Good reasons to write in</h3>
             <li>General feedback on the interface</li>
           </ul>
         </div>
-        <div class="ledger-col is-out" data-reveal>
+        <div class="tally is-out">
           <h3>Covered elsewhere</h3>
           <ul>
             <li>Fan control and the privileged helper belong to the <a href="../../">direct download build</a></li>
@@ -90,38 +81,38 @@ <h3>Covered elsewhere</h3>
       </div>
     </section>
 
-    <section class="wrap section">
-      <div class="cards">
-        <article class="card" data-reveal>
+    <section class="band">
+      <div class="shell trio">
+        <article>
           <h3>Direct line</h3>
           <p><a href="mailto:coremonitor.app@gmail.com">coremonitor.app@gmail.com</a> reaches the developer, not a ticket queue. Include your macOS version and Mac model if you are reporting a bug.</p>
         </article>
-        <article class="card is-cool" data-reveal>
+        <article>
           <h3>Public tracker</h3>
           <p>Prefer working in the open? File it on the <a href="https://github.com/offyotto/core-monitor-app-store/issues">issue tracker</a> so others can find the answer later.</p>
         </article>
-        <article class="card" data-reveal>
+        <article>
           <h3>Ownership</h3>
           <p>Legal owner and support contact: Nazish Faizan. Copyright &copy; 2026 Nazish Faizan.</p>
         </article>
       </div>
     </section>
 
-    <section class="cta">
-      <div class="wrap cta-inner">
+    <section class="coda">
+      <div class="shell">
         <h2>Stuck on something? Say so.</h2>
-        <div class="btn-group">
-          <a class="btn btn-solid" href="mailto:coremonitor.app@gmail.com">Email support</a>
-          <a class="btn btn-outline" href="../">Back to the edition page</a>
+        <div class="action-row">
+          <a class="act act-heat" href="mailto:coremonitor.app@gmail.com">Email support</a>
+          <a class="act act-line" href="../">Back to the edition page</a>
         </div>
       </div>
     </section>
   </main>
 
-  <footer class="site-footer">
-    <div class="wrap footer-row">
-      <p class="footer-brand"><img src="../../images/site/core-monitor-logo.png?v=6" alt="" width="22" height="22">Core-Monitor</p>
-      <nav class="footer-nav" aria-label="Footer">
+  <footer class="basefoot">
+    <div class="shell basefoot-row">
+      <p class="basefoot-brand"><img src="../../images/site/core-monitor-logo.png?v=6" alt="" width="21" height="21">Core-Monitor</p>
+      <nav class="basefoot-nav" aria-label="Footer">
         <a href="../../">Home</a>
         <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
         <a href="../">Mac App Store</a>
@@ -129,8 +120,5 @@ <h2>Stuck on something? Say so.</h2>
       </nav>
     </div>
   </footer>
-
-  <script src="https://unpkg.com/lenis@1.3.23/dist/lenis.min.js"></script>
-  <script src="../../script.js?v=6"></script>
 </body>
 </html>
diff --git a/docs/fonts/bricolage-grotesque-latin.woff2 b/docs/fonts/bricolage-grotesque-latin.woff2
new file mode 100644
index 0000000..b908aff
Binary files /dev/null and b/docs/fonts/bricolage-grotesque-latin.woff2 differ
diff --git a/docs/fonts/spline-sans-mono-latin.woff2 b/docs/fonts/spline-sans-mono-latin.woff2
new file mode 100644
index 0000000..5ffd342
Binary files /dev/null and b/docs/fonts/spline-sans-mono-latin.woff2 differ
diff --git a/docs/index.html b/docs/index.html
index f2932c3..42533c4 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,19 +3,19 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="color-scheme" content="dark light">
-  <!-- Everything this page needs is served from this origin, so the policy can
-       stay strict. If you ever add a webfont, analytics or an embed, widen the
-       matching directive below or the browser will silently block it. -->
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; media-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self' https://api.github.com; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests">
+  <meta name="color-scheme" content="light dark">
+  <!-- Everything this page needs is served from this origin, so the policy
+       stays strict. Widen the matching directive before adding any external
+       resource or the browser will silently block it. -->
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; media-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'">
   <title>Core-Monitor | Apple Silicon System Monitor and Fan Control for macOS</title>
   <meta name="description" content="Core-Monitor is a free, open-source system monitor for Apple Silicon Macs. It reads CPU load, temperature, power draw, memory, battery and fan speed, and can hand you the fans when you want them. Nothing leaves the Mac.">
   <meta name="application-name" content="Core-Monitor">
   <meta name="apple-mobile-web-app-title" content="Core-Monitor">
   <meta name="author" content="offyotto">
   <meta name="robots" content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1">
-  <meta name="theme-color" content="#07080b" media="(prefers-color-scheme: dark)">
-  <meta name="theme-color" content="#f1f2ef" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#e8eaec" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#16191c" media="(prefers-color-scheme: dark)">
   <link rel="canonical" href="https://offyotto.github.io/Core-Monitor/">
   <link rel="manifest" href="manifest.webmanifest">
   <link rel="icon" href="favicon.ico?v=6" sizes="any">
@@ -37,14 +37,13 @@
   <meta name="twitter:description" content="A free, open-source monitor for Apple Silicon Macs. Temperature, power, memory, battery and fans in one native window.">
   <meta name="twitter:image" content="https://offyotto.github.io/Core-Monitor/images/ui/overview-v16.png?v=16">
   <meta name="twitter:image:alt" content="Core-Monitor dashboard showing CPU, memory, thermal, cooling, power, network and storage readings.">
-  <!-- The hero screenshot is the largest element on first paint, so it is
-       fetched at the same priority as the stylesheet rather than waiting for
-       the parser to reach the <img>. -->
+  <!-- The display face paints the headline and the hero screenshot is the
+       largest element on first paint; both are fetched early. -->
+  <link rel="preload" as="font" type="font/woff2" href="fonts/bricolage-grotesque-latin.woff2" crossorigin>
+  <link rel="preload" as="font" type="font/woff2" href="fonts/spline-sans-mono-latin.woff2" crossorigin>
   <link rel="preload" as="image" href="images/ui/overview-v16.png?v=16" fetchpriority="high">
-  <link rel="stylesheet" href="styles.css?v=19">
-  <!-- Type is set in the system UI font (SF Pro on macOS), so there are no
-       webfont requests and nothing about a visitor reaches a third party. -->
-  <script src="script.js?v=8" defer></script>
+  <link rel="stylesheet" href="styles.css?v=20">
+  <script src="script.js?v=9" defer></script>
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -154,357 +153,367 @@
   </script>
 </head>
 <body>
-  <a class="skip-link" href="#main">Skip to content</a>
+  <a class="skiplink" href="#main">Skip to content</a>
 
-  <header class="site-header">
-    <div class="wrap header-row">
-      <a class="brand" href="#top">
-        <img class="brand-mark" src="images/site/core-monitor-logo.png?v=6" alt="" width="30" height="30">
-        <span class="brand-text">Core-Monitor</span>
+  <header class="topbar">
+    <div class="shell topbar-inner">
+      <a class="wordmark" href="#top">
+        <img src="images/site/core-monitor-logo.png?v=6" alt="" width="27" height="27">
+        Core-Monitor
       </a>
-      <button class="nav-toggle" type="button" data-nav-toggle aria-expanded="false" aria-controls="primary-nav" aria-label="Open menu">
-        <span></span>
-      </button>
-      <nav class="primary-nav" id="primary-nav" data-nav aria-label="Sections">
-        <a href="#dashboard">Dashboard</a>
+      <button class="menu-btn" type="button" data-menu-btn aria-expanded="false" aria-controls="site-menu">Menu</button>
+      <nav class="site-menu" id="site-menu" data-menu aria-label="Sections">
+        <a href="#screens">Screens</a>
         <a href="#cooling">Cooling</a>
         <a href="#touchbar">Touch Bar</a>
         <a href="#compare">Compare</a>
         <a href="#install">Install</a>
         <a href="#faq">FAQ</a>
       </nav>
-      <div class="header-actions">
-        <a class="star-btn" href="https://github.com/offyotto/Core-Monitor">
-          <picture>
-            <source media="(prefers-color-scheme: light)" srcset="images/site/github-mark.png">
-            <img src="images/site/github-mark-light.png" alt="" width="16" height="16">
-          </picture>
-          <span class="star-btn-label">Star</span>
-          <span class="star-btn-count" data-star-count>100+</span>
-          <span class="visually-hidden">stars on GitHub</span>
-        </a>
-        <a class="btn btn-solid btn-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Get the app</a>
-      </div>
+      <a class="act act-heat act-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download</a>
     </div>
   </header>
 
   <main id="main">
-    <section class="wrap hero" id="top">
-      <div class="hero-copy">
-        <h1>Your Mac already knows how hot it&rsquo;s running. Now you can watch too.</h1>
-        <p class="hero-text">Core-Monitor reads temperature, CPU and GPU load, power draw, memory, battery and fan speed straight from your Mac&rsquo;s own sensors, then puts them in one native window and the menu bar. No account, no telemetry, and optional fan control for when you want it.</p>
-        <div class="hero-actions btn-group">
-          <a class="btn btn-solid" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download for macOS</a>
-          <a class="btn btn-outline" href="Mac-App-Store/">Mac App Store edition</a>
-          <a class="btn btn-ghost" href="https://github.com/offyotto/Core-Monitor">Read the source</a>
+    <section class="hero" id="top">
+      <div class="shell">
+        <div class="hero-grid">
+          <div class="lede">
+            <h1 class="rise">The instrument panel your Mac never shipped with.</h1>
+            <p class="lede-sub rise rise-2">Core-Monitor reads temperature, CPU and GPU load, power draw, memory, battery and fan speed from the sensors already inside your Apple Silicon Mac, and shows them in one native window and the menu bar. No account, no telemetry, and fan control only when you ask for it.</p>
+            <div class="action-row rise rise-3">
+              <a class="act act-heat" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download for macOS</a>
+              <a class="act act-line" href="Mac-App-Store/">Mac App Store edition</a>
+              <a class="act act-bare" href="https://github.com/offyotto/Core-Monitor">Read the source</a>
+            </div>
+          </div>
         </div>
-      </div>
-      <div class="hero-visual">
-        <figure class="frame">
+
+        <figure class="bezel hero-shot">
           <img src="images/ui/overview-v16.png?v=16" alt="Core-Monitor dashboard with CPU, memory, thermal, cooling, power, network and storage readings." width="1192" height="884" fetchpriority="high" decoding="async">
+          <figcaption>The Overview screen on an Apple Silicon MacBook Pro. Every number on it came off the machine itself.</figcaption>
         </figure>
       </div>
     </section>
 
-    <section class="wrap section" id="dashboard">
-      <div class="section-head">
-        <h2>One panel, seven screens</h2>
-        <p>Every subsystem gets its own screen with history behind it, and the menu bar carries a short version so the window can stay closed most of the day.</p>
-      </div>
-      <div class="gallery">
-        <figure class="gallery-item">
-          <a class="gallery-link" href="images/ui/overview-v16.png?v=16" data-lightbox="Overview" aria-label="Enlarge the Overview screenshot">
-            <img src="images/ui/overview-v16.png?v=16" alt="Overview screen summarizing CPU, memory, thermal, cooling, power, network and storage." loading="lazy" decoding="async">
-          </a>
-          <figcaption class="gallery-caption"><strong>Overview</strong></figcaption>
-        </figure>
-        <figure class="gallery-item">
-          <a class="gallery-link" href="images/ui/cooling-v16.png?v=16" data-lightbox="Cooling" aria-label="Enlarge the Cooling screenshot">
-            <img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen with fan speeds, cooling mode and a custom fan curve editor." loading="lazy" decoding="async">
-          </a>
-          <figcaption class="gallery-caption"><strong>Cooling</strong></figcaption>
-        </figure>
-        <figure class="gallery-item">
-          <a class="gallery-link" href="images/ui/memory-v16.png?v=16" data-lightbox="Memory" aria-label="Enlarge the Memory screenshot">
-            <img src="images/ui/memory-v16.png?v=16" alt="Memory screen with usage history and a pressure breakdown." loading="lazy" decoding="async">
-          </a>
-          <figcaption class="gallery-caption"><strong>Memory</strong></figcaption>
-        </figure>
-        <figure class="gallery-item">
-          <a class="gallery-link" href="images/ui/storage-v16.png?v=16" data-lightbox="Storage" aria-label="Enlarge the Storage screenshot">
-            <img src="images/ui/storage-v16.png?v=16" alt="Storage screen with used, purgeable and free capacity." loading="lazy" decoding="async">
-          </a>
-          <figcaption class="gallery-caption"><strong>Storage</strong></figcaption>
-        </figure>
-        <figure class="gallery-item is-tall">
-          <a class="gallery-link" href="images/ui/menu-thermal-v16.png?v=16" data-lightbox="Thermal panel" aria-label="Enlarge the Thermal panel screenshot">
-            <img src="images/ui/menu-thermal-v16.png?v=16" alt="Thermal panel opened from the menu bar." loading="lazy" decoding="async">
-          </a>
-          <figcaption class="gallery-caption"><strong>Thermal panel</strong></figcaption>
-        </figure>
-        <figure class="gallery-item is-tall">
-          <a class="gallery-link" href="images/ui/menu-network-v16.png?v=16" data-lightbox="Network panel" aria-label="Enlarge the Network panel screenshot">
-            <img src="images/ui/menu-network-v16.png?v=16" alt="Network panel opened from the menu bar." loading="lazy" decoding="async">
-          </a>
-          <figcaption class="gallery-caption"><strong>Network panel</strong></figcaption>
-        </figure>
+    <section class="band" id="screens">
+      <div class="shell">
+        <div class="band-head">
+          <h2>Every subsystem gets its own screen</h2>
+          <p>History sits behind each number, and the menu bar carries a short version, so the window can stay closed most of the day.</p>
+        </div>
+        <div class="strip-scroller" tabindex="0" role="region" aria-label="Screenshots of Core-Monitor screens">
+          <div class="strip">
+            <figure class="shot">
+              <a href="images/ui/overview-v16.png?v=16"><img src="images/ui/overview-v16.png?v=16" alt="Overview screen summarizing CPU, memory, thermal, cooling, power, network and storage." loading="lazy" decoding="async" width="1192" height="884"></a>
+              <figcaption><b>Overview</b><span>everything at a glance</span></figcaption>
+            </figure>
+            <figure class="shot">
+              <a href="images/ui/cooling-v16.png?v=16"><img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen with fan speeds, cooling mode and a custom fan curve editor." loading="lazy" decoding="async" width="1192" height="884"></a>
+              <figcaption><b>Cooling</b><span>fans and curves</span></figcaption>
+            </figure>
+            <figure class="shot">
+              <a href="images/ui/memory-v16.png?v=16"><img src="images/ui/memory-v16.png?v=16" alt="Memory screen with usage history and a pressure breakdown." loading="lazy" decoding="async" width="1192" height="884"></a>
+              <figcaption><b>Memory</b><span>usage and pressure</span></figcaption>
+            </figure>
+            <figure class="shot">
+              <a href="images/ui/storage-v16.png?v=16"><img src="images/ui/storage-v16.png?v=16" alt="Storage screen with used, purgeable and free capacity." loading="lazy" decoding="async" width="1192" height="884"></a>
+              <figcaption><b>Storage</b><span>used, purgeable, free</span></figcaption>
+            </figure>
+            <figure class="shot is-narrow">
+              <a href="images/ui/menu-thermal-v16.png?v=16"><img src="images/ui/menu-thermal-v16.png?v=16" alt="Thermal panel opened from the menu bar." loading="lazy" decoding="async" width="782" height="776"></a>
+              <figcaption><b>Thermal panel</b><span>from the menu bar</span></figcaption>
+            </figure>
+            <figure class="shot is-narrow">
+              <a href="images/ui/menu-network-v16.png?v=16"><img src="images/ui/menu-network-v16.png?v=16" alt="Network panel opened from the menu bar." loading="lazy" decoding="async" width="782" height="776"></a>
+              <figcaption><b>Network panel</b><span>from the menu bar</span></figcaption>
+            </figure>
+          </div>
+        </div>
+        <p class="strip-hint">scroll sideways for more &mdash; each tile opens the full-size capture</p>
       </div>
     </section>
 
-    <section class="wrap section" id="cooling">
-      <div class="feature">
-        <div class="feature-copy">
-          <h2>Read only, until you decide otherwise</h2>
-          <p>By default, Core-Monitor only watches the fans. Install the optional helper and you get three ways to drive them: a fixed speed, a boost profile, or a custom curve you draw yourself, point by point.</p>
-          <ul class="steps">
-            <li>
-              <span class="step-body"><strong>Hand it back anytime</strong><span>One button returns full control to macOS, no restart needed.</span></span>
-            </li>
-            <li>
-              <span class="step-body"><strong>Draw your own curve</strong><span>Map CPU or GPU temperature to fan speed across as many points as you want.</span></span>
-            </li>
-            <li>
-              <span class="step-body"><strong>Skip the helper entirely</strong><span>Monitoring works identically whether or not it is installed.</span></span>
-            </li>
-            <li>
-              <span class="step-body"><strong>Calibrate first</strong><span>Measure each fan&rsquo;s real minimum and maximum before trusting a profile to it.</span></span>
-            </li>
-          </ul>
+    <section class="band" id="cooling">
+      <div class="shell">
+        <div class="cooling-grid">
+          <div>
+            <h2>Read-only, until you decide otherwise</h2>
+            <p>Out of the box, Core-Monitor only watches the fans. Install the optional helper and you get three ways to drive them: a fixed speed, a boost profile, or a curve you draw yourself, point by point.</p>
+            <dl class="fan-points">
+              <div>
+                <dt>Hand it back anytime</dt>
+                <dd>One button returns full control to macOS, no restart needed.</dd>
+              </div>
+              <div>
+                <dt>Draw your own curve</dt>
+                <dd>Map CPU or GPU temperature to fan speed across as many points as you want.</dd>
+              </div>
+              <div>
+                <dt>Skip the helper entirely</dt>
+                <dd>Monitoring works identically whether or not it is installed.</dd>
+              </div>
+              <div>
+                <dt>Calibrate first</dt>
+                <dd>Measure each fan&rsquo;s real minimum and maximum before trusting a profile to it.</dd>
+              </div>
+            </dl>
+          </div>
+          <div class="curvebox" data-curve>
+            <svg viewBox="0 0 520 300" role="img" aria-label="A custom fan curve mapping CPU temperature to fan speed, with the current operating point marked at 72 degrees.">
+              <g class="curve-grid">
+                <line x1="50" y1="20" x2="50" y2="262"></line>
+                <line x1="213" y1="20" x2="213" y2="262"></line>
+                <line x1="377" y1="20" x2="377" y2="262"></line>
+                <line x1="500" y1="20" x2="500" y2="262"></line>
+                <line x1="50" y1="262" x2="500" y2="262"></line>
+                <line x1="50" y1="169" x2="500" y2="169"></line>
+                <line x1="50" y1="76" x2="500" y2="76"></line>
+              </g>
+              <g class="curve-axis">
+                <text x="50" y="280">40&#176;</text>
+                <text x="203" y="280">60&#176;</text>
+                <text x="367" y="280">80&#176;</text>
+                <text x="486" y="280">95&#176;</text>
+                <text x="8" y="266">1.2k</text>
+                <text x="8" y="173">3.6k</text>
+                <text x="8" y="80">6k rpm</text>
+              </g>
+              <path class="curve-line" d="M50 250 L200 226 L320 150 L420 78 L500 44"></path>
+              <circle class="curve-node" cx="50" cy="250" r="5"></circle>
+              <circle class="curve-node" cx="200" cy="226" r="5"></circle>
+              <circle class="curve-node" cx="320" cy="150" r="5"></circle>
+              <circle class="curve-node" cx="420" cy="78" r="5"></circle>
+              <circle class="curve-node" cx="500" cy="44" r="5"></circle>
+              <circle class="curve-op-ring" cx="336" cy="140" r="7"></circle>
+              <circle class="curve-op" cx="336" cy="140" r="5.5"></circle>
+            </svg>
+            <p class="curve-caption">a custom curve &middot; current operating point at 72&#176;, about 2,900 rpm</p>
+          </div>
         </div>
-        <figure class="frame">
-          <img src="images/ui/cooling-v16.png?v=16" alt="Cooling screen showing two fans near 2,900 rpm, a custom curve mode, and a button that hands cooling back to macOS." width="1192" height="884" loading="lazy" decoding="async">
-        </figure>
       </div>
     </section>
 
-    <section class="wrap section">
-      <div class="section-head">
-        <h2>Where people actually reach for it</h2>
-        <p>The moments this was made around: the fans wind up and you want to know exactly why.</p>
-      </div>
-      <div class="cards">
-        <article class="card">
-          <h3>Compiling and exporting</h3>
-          <p>Watch clock speed and heat while a long build or render runs, and see whether a slowdown is thermal or something else entirely.</p>
-        </article>
-        <article class="card">
-          <h3>Away from the charger</h3>
-          <p>Watts in and watts out, so the time-remaining figure reflects what the Mac is actually drawing right now, not a rough guess.</p>
-        </article>
-        <article class="card is-cool">
-          <h3>Recording and calls</h3>
-          <p>Pin the fans low before you hit record, check the temperature margin, then hand cooling back to macOS once you are done.</p>
-        </article>
-        <article class="card is-cool">
-          <h3>Warnings that stay put</h3>
-          <p>Set a threshold for heat, memory or battery and get a notification straight from the Mac itself, with no server involved.</p>
-        </article>
-        <article class="card">
-          <h3>Nothing hidden</h3>
-          <p>The full source is public, so anyone can check exactly what gets read, what the helper writes, and what never leaves the machine.</p>
-        </article>
-        <article class="card">
-          <h3>No account needed</h3>
-          <p>No sign-in, no subscription, and no analytics library anywhere in the binary. Process names can be hidden in memory views too.</p>
-        </article>
+    <section class="band">
+      <div class="shell">
+        <div class="band-head">
+          <h2>Where people actually reach for it</h2>
+          <p>The moments this was made around: the fans wind up and you want to know exactly why.</p>
+        </div>
+        <ul class="log">
+          <li>
+            <h3>Compiling and exporting</h3>
+            <p>Watch clock speed and heat while a long build or render runs, and see whether a slowdown is thermal or something else entirely.</p>
+          </li>
+          <li>
+            <h3>Away from the charger</h3>
+            <p>Watts in and watts out, so the time-remaining figure reflects what the Mac is actually drawing right now, not a rough guess.</p>
+          </li>
+          <li class="is-cool">
+            <h3>Recording and calls</h3>
+            <p>Pin the fans low before you hit record, check the temperature margin, then hand cooling back to macOS once you are done.</p>
+          </li>
+          <li class="is-cool">
+            <h3>Warnings that stay put</h3>
+            <p>Set a threshold for heat, memory or battery and get a notification straight from the Mac itself, with no server involved.</p>
+          </li>
+          <li>
+            <h3>Nothing hidden</h3>
+            <p>The full source is public, so anyone can check exactly what gets read, what the helper writes, and what never leaves the machine.</p>
+          </li>
+          <li>
+            <h3>No account needed</h3>
+            <p>No sign-in, no subscription, and no analytics library anywhere in the binary. Process names can be hidden in memory views too.</p>
+          </li>
+        </ul>
       </div>
     </section>
 
-    <section class="wrap section" id="touchbar">
-      <div class="section-head">
-        <h2>The Touch Bar, put back to work</h2>
-        <p>On Macs that still have one, Core-Monitor turns the Touch Bar into a strip of live instruments that sits above whatever app has focus.</p>
-      </div>
-      <div class="filmstrip">
-        <figure class="reel">
-          <video controls playsinline preload="metadata" width="1280" height="720" title="Core-Monitor Touch Bar widgets in use">
-            <source src="videos/touchbar-showcase.mp4" type="video/mp4">
-            <p class="reel-fallback">Your browser cannot play this clip. <a href="videos/touchbar-showcase.mp4" download>Download the MP4</a> instead.</p>
-          </video>
-          <div class="reel-info">
-            <strong>Widgets, overlays and shortcuts</strong>
-            <p>Stats, optional live weather, shortcuts and memory pressure, arranged with a live width preview so a layout never runs off the edge of the strip. Live weather stays off until you enable it. The strip holds its place across apps, so you can check a reading or launch something without switching windows.</p>
+    <section class="band" id="touchbar">
+      <div class="shell">
+        <div class="band-head">
+          <h2>The Touch Bar, put back to work</h2>
+          <p>On Macs that still have one, Core-Monitor turns the Touch Bar into a strip of live instruments that sits above whatever app has focus.</p>
+        </div>
+        <div class="reel-grid">
+          <div class="bezel">
+            <video controls playsinline preload="metadata" width="1280" height="720" title="Core-Monitor Touch Bar widgets in use">
+              <source src="videos/touchbar-showcase.mp4" type="video/mp4">
+              <p>Your browser cannot play this clip. <a href="videos/touchbar-showcase.mp4" download>Download the MP4</a> instead.</p>
+            </video>
           </div>
-        </figure>
+          <div class="reel-note">
+            <h3>Widgets, overlays and shortcuts</h3>
+            <p>Stats, optional live weather, shortcuts and memory pressure, arranged with a live width preview so a layout never runs off the edge of the strip. The strip holds its place across apps, so you can check a reading or launch something without switching windows. Live weather stays off until you enable it.</p>
+          </div>
+        </div>
       </div>
     </section>
 
-    <section class="privacy-section" id="privacy" aria-labelledby="privacy-title">
-      <div class="privacy-layout">
-        <h2 id="privacy-title">Your Mac has<br>a private life.<br>Keep it that way.</h2>
-        <div class="privacy-copy">
+    <section class="anodized" id="privacy" aria-labelledby="privacy-title">
+      <div class="shell anodized-grid">
+        <div class="anodized-copy">
+          <h2 id="privacy-title">Readings stay on the machine that made them.</h2>
           <p>Core-Monitor reads your system, then keeps that data on your Mac. There is no account to create and no telemetry to switch off.</p>
-          <div class="privacy-facts">
-            <p>
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <rect x="5" y="10" width="14" height="11" rx="2"/>
-                <path d="M8 10V7a4 4 0 0 1 8 0v3m-4 5v2"/>
-              </svg>
-              Local data
-            </p>
-            <p>
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <circle cx="12" cy="7" r="4"/>
-                <path d="M4 21v-2a8 8 0 0 1 16 0v2"/>
-              </svg>
-              No account
-            </p>
-            <p>
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="m8 6-6 6 6 6m8-12 6 6-6 6m-3-15-2 18"/>
-              </svg>
-              Open source
-            </p>
-          </div>
-          <p class="privacy-footnote">Live Weather is off by default. If you enable it, Apple WeatherKit receives your location after you grant permission.</p>
-          <a class="privacy-source" href="https://github.com/offyotto/Core-Monitor">Read the source code</a>
+          <p class="anodized-foot">Live Weather is off by default. If you enable it, Apple WeatherKit receives your location after you grant permission. <a href="https://github.com/offyotto/Core-Monitor">Read the source code</a> and check for yourself.</p>
         </div>
+        <dl class="readouts">
+          <div><dt>monitoring data sent</dt><dd class="ok">none</dd></div>
+          <div><dt>accounts required</dt><dd class="ok">none</dd></div>
+          <div><dt>analytics libraries</dt><dd class="ok">none</dd></div>
+          <div><dt>source code</dt><dd>public, GPL-licensed</dd></div>
+          <div><dt>weather requests</dt><dd>only after opt-in</dd></div>
+        </dl>
       </div>
     </section>
 
-    <section class="wrap section" id="compare">
-      <div class="section-head">
-        <h2 id="compare-title">How it stacks up</h2>
-        <p>A handful of good Mac monitors already exist. This is where Core-Monitor sits next to them, stated plainly.</p>
-      </div>
-      <div class="compare-wrap" tabindex="0" role="region" aria-labelledby="compare-title">
-        <table class="compare">
-          <caption>Written by the Core-Monitor developer. Check each app&rsquo;s own site for its current feature list.</caption>
-          <thead>
-            <tr>
-              <th scope="col">App</th>
-              <th scope="col">Strong at</th>
-              <th scope="col">Where Core-Monitor differs</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th scope="row">iStat Menus</th>
-              <td>Covers dozens of metrics across many menu bar modules.</td>
-              <td>Narrower on purpose. Heat, power and fans, open source, with no license to buy.</td>
-            </tr>
-            <tr>
-              <th scope="row">TG Pro</th>
-              <td>Deep per-sensor diagnostics.</td>
-              <td>Monitoring comes first here; writing fan speed is an optional layer, not the whole app.</td>
-            </tr>
-            <tr>
-              <th scope="row">Macs Fan Control</th>
-              <td>Direct control over fan speed.</td>
-              <td>Wraps that control in a full dashboard, with history, alerts and menu bar readouts.</td>
-            </tr>
-            <tr>
-              <th scope="row">Stats</th>
-              <td>Free, modular menu bar widgets.</td>
-              <td>One dedicated window with history, built specifically around thermals.</td>
-            </tr>
-          </tbody>
-        </table>
+    <section class="band" id="compare">
+      <div class="shell">
+        <div class="band-head">
+          <h2 id="compare-title">How it stacks up</h2>
+          <p>A handful of good Mac monitors already exist. This is where Core-Monitor sits next to them, stated plainly.</p>
+        </div>
+        <div class="matrix-scroll" tabindex="0" role="region" aria-labelledby="compare-title">
+          <table class="matrix">
+            <caption>Written by the Core-Monitor developer. Check each app&rsquo;s own site for its current feature list.</caption>
+            <thead>
+              <tr>
+                <th scope="col">App</th>
+                <th scope="col">Strong at</th>
+                <th scope="col">Where Core-Monitor differs</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <th scope="row">iStat Menus</th>
+                <td>Covers dozens of metrics across many menu bar modules.</td>
+                <td>Narrower on purpose. Heat, power and fans, open source, with no license to buy.</td>
+              </tr>
+              <tr>
+                <th scope="row">TG Pro</th>
+                <td>Deep per-sensor diagnostics.</td>
+                <td>Monitoring comes first here; writing fan speed is an optional layer, not the whole app.</td>
+              </tr>
+              <tr>
+                <th scope="row">Macs Fan Control</th>
+                <td>Direct control over fan speed.</td>
+                <td>Wraps that control in a full dashboard, with history, alerts and menu bar readouts.</td>
+              </tr>
+              <tr>
+                <th scope="row">Stats</th>
+                <td>Free, modular menu bar widgets.</td>
+                <td>One dedicated window with history, built specifically around thermals.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </section>
 
-    <section class="wrap section" id="install">
-      <div class="section-head">
-        <h2>Two editions, three install options</h2>
-        <p>Pick whichever matches how you manage software on your Mac. Every route below is free.</p>
-      </div>
-      <div class="routes">
-        <article class="route">
-          <h3>Download the signed build</h3>
-          <p>Grab it straight from GitHub. The DMG gives you the familiar drag-to-Applications install; the ZIP is the bare app bundle.</p>
-          <div class="route-actions">
-            <a class="btn btn-solid btn-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">DMG</a>
-            <a class="btn btn-outline btn-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.app.zip">ZIP</a>
+    <section class="band" id="install">
+      <div class="shell">
+        <div class="band-head">
+          <h2>Two editions, three ways in</h2>
+          <p>Pick whichever matches how you manage software on your Mac. Every route below is free.</p>
+        </div>
+        <div class="ways">
+          <div class="way">
+            <h3>Download the signed build</h3>
+            <div>
+              <p class="way-blurb">Grab it straight from GitHub. The DMG gives you the familiar drag-to-Applications install; the ZIP is the bare app bundle.</p>
+              <div class="action-row">
+                <a class="act act-heat act-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">DMG</a>
+                <a class="act act-line act-sm" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.app.zip">ZIP</a>
+              </div>
+            </div>
           </div>
-        </article>
-        <article class="route">
-          <h3>Install through Homebrew</h3>
-          <p>Add the tap once, then install and upgrade the cask the same way you handle everything else.</p>
-          <pre class="code-block" id="brew-command">brew tap --custom-remote offyotto/core-monitor \
+          <div class="way">
+            <h3>Install through Homebrew</h3>
+            <div>
+              <p class="way-blurb">Add the tap once, then install and upgrade the cask the same way you handle everything else.</p>
+              <pre class="command" id="brew-command">brew tap --custom-remote offyotto/core-monitor \
   https://github.com/offyotto/Core-Monitor
 brew install --cask offyotto/core-monitor/core-monitor</pre>
-          <div class="route-actions">
-            <button class="copy-btn" type="button" data-copy="#brew-command">Copy command</button>
+              <div class="action-row">
+                <button class="act act-line act-sm copy-act" type="button" data-copy="brew-command">Copy command</button>
+              </div>
+            </div>
           </div>
-        </article>
-        <article class="route">
-          <h3>Take the sandboxed edition</h3>
-          <p>Core-Monitor is available free on the Mac App Store as a read-only build reviewed and delivered by Apple. It has no helper or fan writes.</p>
-          <div class="route-actions">
-            <a class="btn btn-outline btn-sm" href="Mac-App-Store/">About this edition</a>
-            <a class="btn btn-ghost btn-sm" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">Open listing</a>
+          <div class="way">
+            <h3>Take the sandboxed edition</h3>
+            <div>
+              <p class="way-blurb">Core-Monitor is available free on the Mac App Store as a read-only build reviewed and delivered by Apple. It has no helper and no fan writes.</p>
+              <div class="action-row">
+                <a class="act act-line act-sm" href="Mac-App-Store/">About this edition</a>
+                <a class="act act-bare act-sm" href="https://apps.apple.com/us/app/core-monitor/id6762558526?mt=12">Open listing</a>
+              </div>
+            </div>
           </div>
-        </article>
+        </div>
+        <p class="sr" id="copy-status" role="status" aria-live="polite"></p>
       </div>
-      <p class="visually-hidden" id="copy-status" role="status" aria-live="polite"></p>
     </section>
 
-    <section class="wrap section" id="faq">
-      <div class="section-head">
-        <h2>Questions before you install</h2>
-        <p>Short, direct answers to what people usually check first.</p>
-      </div>
-      <div class="faq">
-        <details class="faq-item" open>
-          <summary class="faq-q">Which Macs can run it?<span class="faq-icon" aria-hidden="true"></span></summary>
-          <p>Apple Silicon Macs on macOS 13 or later. The sensors and fan interfaces it reads are specific to Apple&rsquo;s own chips, so Intel Macs are not supported.</p>
-        </details>
-        <details class="faq-item">
-          <summary class="faq-q">Do I need the helper installed?<span class="faq-icon" aria-hidden="true"></span></summary>
-          <p>No. Every reading works without it. It exists only so the app can write fan speeds, and you can hand control back to macOS whenever you like.</p>
-        </details>
-        <details class="faq-item">
-          <summary class="faq-q">Does it phone home?<span class="faq-icon" aria-hidden="true"></span></summary>
-          <p>Core-Monitor has no account, advertising, or analytics, and it does not send monitoring data to the developer. Live Weather is off by default. If you explicitly enable it, the app asks macOS for location access and requests weather from Apple WeatherKit. Turning it off stops Core-Monitor&rsquo;s weather requests; macOS and App Store components may still make their own connections to Apple services.</p>
-        </details>
-        <details class="faq-item">
-          <summary class="faq-q">Can fan control damage my Mac?<span class="faq-icon" aria-hidden="true"></span></summary>
-          <p>macOS keeps its own thermal limits regardless of what any app requests. Core-Monitor also keeps an obvious way out, one click gives full control back to the system.</p>
-        </details>
-        <details class="faq-item">
-          <summary class="faq-q">What is deliberately left out?<span class="faq-icon" aria-hidden="true"></span></summary>
-          <p>Cloud dashboards, fleet management, and a metric for every corner of the OS. The scope stays heat, power, memory, battery and fans, done properly.</p>
-        </details>
-        <details class="faq-item">
-          <summary class="faq-q">Where do bug reports go?<span class="faq-icon" aria-hidden="true"></span></summary>
-          <p>Open an issue on the <a href="https://github.com/offyotto/Core-Monitor/issues">GitHub tracker</a>. Release notes and older builds live on the <a href="https://github.com/offyotto/Core-Monitor/releases">releases page</a>.</p>
-        </details>
+    <section class="band" id="faq">
+      <div class="shell">
+        <div class="band-head">
+          <h2>Questions before you install</h2>
+          <p>Short, direct answers to what people usually check first.</p>
+        </div>
+        <div class="qa">
+          <details class="qa-item" open>
+            <summary>Which Macs can run it?<span class="qa-mark" aria-hidden="true">+</span></summary>
+            <p>Apple Silicon Macs on macOS 13 or later. The sensors and fan interfaces it reads are specific to Apple&rsquo;s own chips, so Intel Macs are not supported.</p>
+          </details>
+          <details class="qa-item">
+            <summary>Do I need the helper installed?<span class="qa-mark" aria-hidden="true">+</span></summary>
+            <p>No. Every reading works without it. It exists only so the app can write fan speeds, and you can hand control back to macOS whenever you like.</p>
+          </details>
+          <details class="qa-item">
+            <summary>Does it phone home?<span class="qa-mark" aria-hidden="true">+</span></summary>
+            <p>Core-Monitor has no account, advertising, or analytics, and it does not send monitoring data to the developer. Live Weather is off by default. If you explicitly enable it, the app asks macOS for location access and requests weather from Apple WeatherKit. Turning it off stops Core-Monitor&rsquo;s weather requests; macOS and App Store components may still make their own connections to Apple services.</p>
+          </details>
+          <details class="qa-item">
+            <summary>Can fan control damage my Mac?<span class="qa-mark" aria-hidden="true">+</span></summary>
+            <p>macOS keeps its own thermal limits regardless of what any app requests. Core-Monitor also keeps an obvious way out: one click gives full control back to the system.</p>
+          </details>
+          <details class="qa-item">
+            <summary>What is deliberately left out?<span class="qa-mark" aria-hidden="true">+</span></summary>
+            <p>Cloud dashboards, fleet management, and a metric for every corner of the OS. The scope stays heat, power, memory, battery and fans, done properly.</p>
+          </details>
+          <details class="qa-item">
+            <summary>Where do bug reports go?<span class="qa-mark" aria-hidden="true">+</span></summary>
+            <p>Open an issue on the <a href="https://github.com/offyotto/Core-Monitor/issues">GitHub tracker</a>. Release notes and older builds live on the <a href="https://github.com/offyotto/Core-Monitor/releases">releases page</a>.</p>
+          </details>
+        </div>
       </div>
     </section>
 
-    <section class="cta">
-      <div class="wrap cta-inner">
-        <h2>The sensors are already in your Mac. Go look at them.</h2>
-        <div class="cta-actions btn-group">
-          <a class="btn btn-solid" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download for macOS</a>
-          <a class="btn btn-outline" href="https://github.com/offyotto/Core-Monitor">Star it on GitHub<span class="btn-count" data-star-count>100+</span></a>
+    <section class="coda">
+      <div class="shell">
+        <h2>Your Mac has been taking its own temperature all along. Start reading it.</h2>
+        <div class="action-row">
+          <a class="act act-heat" href="https://github.com/offyotto/Core-Monitor/releases/latest/download/Core-Monitor.dmg">Download for macOS</a>
+          <a class="act act-line" href="https://github.com/offyotto/Core-Monitor">View on GitHub</a>
         </div>
       </div>
     </section>
   </main>
 
-  <footer class="site-footer">
-    <div class="wrap footer-row">
-      <p class="footer-brand"><img src="images/site/core-monitor-logo.png?v=6" alt="" width="22" height="22">Core-Monitor</p>
-      <nav class="footer-nav" aria-label="Footer">
-        <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
-        <a href="https://github.com/offyotto/Core-Monitor/releases/latest">Releases</a>
-        <a href="Mac-App-Store/">Mac App Store</a>
-        <a href="Mac-App-Store/privacy/">Privacy</a>
-        <a href="Mac-App-Store/support/">Support</a>
-      </nav>
+  <footer class="basefoot">
+    <div class="shell">
+      <div class="basefoot-row">
+        <p class="basefoot-brand"><img src="images/site/core-monitor-logo.png?v=6" alt="" width="21" height="21">Core-Monitor</p>
+        <nav class="basefoot-nav" aria-label="Footer">
+          <a href="https://github.com/offyotto/Core-Monitor">GitHub</a>
+          <a href="https://github.com/offyotto/Core-Monitor/releases/latest">Releases</a>
+          <a href="Mac-App-Store/">Mac App Store</a>
+          <a href="Mac-App-Store/privacy/">Privacy</a>
+          <a href="Mac-App-Store/support/">Support</a>
+        </nav>
+      </div>
+      <p class="basefoot-legal"><a href="https://github.com/offyotto/Core-Monitor/blob/main/LICENSE">License</a></p>
     </div>
-    <p class="wrap footer-legal"><a href="https://github.com/offyotto/Core-Monitor/blob/main/LICENSE">License</a></p>
   </footer>
-
-  <!-- Screenshot viewer. The gallery tiles are plain links to the full-size
-       image, so this is purely an enhancement. -->
-  <dialog class="lightbox" id="lightbox" aria-label="Screenshot viewer">
-    <img class="lightbox-img" alt="">
-    <div class="lightbox-bar">
-      <p class="lightbox-caption"></p>
-      <button class="lightbox-close" type="button" data-lightbox-close aria-label="Close screenshot">&times;</button>
-    </div>
-  </dialog>
 </body>
 </html>
diff --git a/docs/manifest.webmanifest b/docs/manifest.webmanifest
index 8efba4e..b3fa811 100644
--- a/docs/manifest.webmanifest
+++ b/docs/manifest.webmanifest
@@ -6,8 +6,8 @@
   "start_url": "/Core-Monitor/",
   "scope": "/Core-Monitor/",
   "display": "minimal-ui",
-  "background_color": "#07080b",
-  "theme_color": "#07080b",
+  "background_color": "#e8eaec",
+  "theme_color": "#e8eaec",
   "lang": "en",
   "dir": "ltr",
   "categories": ["utilities", "productivity"],
diff --git a/docs/script.js b/docs/script.js
index 6cdcf76..58a640c 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,309 +1,106 @@
 /* ==========================================================================
-   Core-Monitor site behaviour
+   Core-Monitor site behaviour — bench instrument edition
 
-   Everything here is a progressive enhancement: the page is fully readable,
-   navigable and usable with this file blocked or broken. Nothing here is
-   load-bearing, so no content can ever be left hidden by a JavaScript
-   failure.
-
-   No third-party libraries. The one network request is a cached lookup of
-   the repository's star count, and the page already ships a truthful,
-   crawlable milestone for it.
+   Everything here is progressive enhancement. With this file blocked the
+   page stays fully readable: the fan curve renders fully drawn, navigation and copy fall back
+   to plain HTML behaviour. No libraries, no network requests.
    ========================================================================== */
 
 (function () {
   "use strict";
 
   var doc = document;
+  var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
 
-  var closest = function (node, selector) {
-    return node && node.closest ? node.closest(selector) : null;
-  };
+  /* ---------- mobile menu ---------- */
 
-  /* ---------- sticky header gets a shadow once you leave the top ---------- */
+  var menuBtn = doc.querySelector("[data-menu-btn]");
+  var menu = doc.querySelector("[data-menu]");
 
-  var header = doc.querySelector(".site-header");
-  if (header) {
-    var syncHeader = function () {
-      header.classList.toggle("is-scrolled", window.scrollY > 8);
+  if (menuBtn && menu) {
+    var setMenu = function (open) {
+      menu.classList.toggle("is-open", open);
+      menuBtn.setAttribute("aria-expanded", open ? "true" : "false");
+      menuBtn.textContent = open ? "Close" : "Menu";
     };
-    syncHeader();
-    window.addEventListener("scroll", syncHeader, { passive: true });
-  }
-
-  /* ---------- mobile navigation ---------- */
-
-  var toggle = doc.querySelector(".nav-toggle");
-  var nav = doc.getElementById("primary-nav");
-
-  if (toggle && nav) {
-    var setNav = function (open) {
-      nav.classList.toggle("is-open", open);
-      toggle.setAttribute("aria-expanded", open ? "true" : "false");
-      toggle.setAttribute("aria-label", open ? "Close menu" : "Open menu");
-    };
-
-    var navIsOpen = function () {
-      return nav.classList.contains("is-open");
-    };
-
-    setNav(false);
 
-    toggle.addEventListener("click", function () {
-      setNav(!navIsOpen());
+    menuBtn.addEventListener("click", function () {
+      setMenu(!menu.classList.contains("is-open"));
     });
 
-    // Tapping a section link should close the sheet behind you.
-    nav.addEventListener("click", function (event) {
-      if (closest(event.target, "a")) setNav(false);
+    menu.addEventListener("click", function (event) {
+      if (event.target.closest("a")) setMenu(false);
     });
 
     doc.addEventListener("keydown", function (event) {
-      if (event.key === "Escape" && navIsOpen()) {
-        setNav(false);
-        toggle.focus();
+      if (event.key === "Escape" && menu.classList.contains("is-open")) {
+        setMenu(false);
+        menuBtn.focus();
       }
     });
-
-    doc.addEventListener("click", function (event) {
-      if (!navIsOpen()) return;
-      if (nav.contains(event.target) || toggle.contains(event.target)) return;
-      setNav(false);
-    });
-  }
-
-  /* ---------- scroll spy: highlight the section you are reading ---------- */
-
-  var navLinks = Array.prototype.slice.call(
-    doc.querySelectorAll('.primary-nav a[href^="#"]')
-  );
-
-  if (navLinks.length && "IntersectionObserver" in window) {
-    var linkFor = {};
-    var sections = [];
-
-    navLinks.forEach(function (link) {
-      var id = link.getAttribute("href").slice(1);
-      var section = id ? doc.getElementById(id) : null;
-      if (!section) return;
-      linkFor[id] = link;
-      sections.push(section);
-    });
-
-    var onScreen = {};
-
-    var paintCurrent = function () {
-      var current = null;
-      sections.forEach(function (section) {
-        if (!current && onScreen[section.id]) current = section.id;
-      });
-
-      navLinks.forEach(function (link) {
-        if (current && linkFor[current] === link) {
-          link.setAttribute("aria-current", "true");
-        } else {
-          link.removeAttribute("aria-current");
-        }
-      });
-    };
-
-    var spy = new IntersectionObserver(
-      function (entries) {
-        entries.forEach(function (entry) {
-          onScreen[entry.target.id] = entry.isIntersecting;
-        });
-        paintCurrent();
-      },
-      { rootMargin: "-30% 0px -60% 0px" }
-    );
-
-    sections.forEach(function (section) {
-      spy.observe(section);
-    });
   }
 
-  /* ---------- copy-to-clipboard buttons ---------- */
+  /* ---------- copy-to-clipboard ---------- */
 
-  var liveRegion = doc.getElementById("copy-status");
+  var copyStatus = doc.getElementById("copy-status");
 
-  var announce = function (message) {
-    if (liveRegion) liveRegion.textContent = message;
-  };
+  doc.querySelectorAll("[data-copy]").forEach(function (button) {
+    var resting = button.textContent;
+    var timer = null;
 
-  Array.prototype.slice
-    .call(doc.querySelectorAll("[data-copy]"))
-    .forEach(function (button) {
-      var restingLabel = button.textContent;
-      var resetTimer = null;
+    button.addEventListener("click", function () {
+      var source = doc.getElementById(button.getAttribute("data-copy"));
+      var text = source ? source.textContent.replace(/\s+$/, "") : "";
 
       var settle = function (ok) {
         button.textContent = ok ? "Copied" : "Copy failed";
-        button.setAttribute("data-state", ok ? "done" : "failed");
-        announce(
-          ok
+        if (ok) button.setAttribute("data-state", "done");
+        else button.setAttribute("data-state", "failed");
+        if (copyStatus) {
+          copyStatus.textContent = ok
             ? "Command copied to the clipboard."
-            : "Copying failed. Select the command and copy it manually."
-        );
-
-        window.clearTimeout(resetTimer);
-        resetTimer = window.setTimeout(function () {
-          button.textContent = restingLabel;
+            : "Copying failed. Select the command and copy it manually.";
+        }
+        window.clearTimeout(timer);
+        timer = window.setTimeout(function () {
+          button.textContent = resting;
           button.removeAttribute("data-state");
-          announce("");
-        }, 2400);
+          if (copyStatus) copyStatus.textContent = "";
+        }, 2200);
       };
 
-      button.addEventListener("click", function () {
-        // data-copy holds a selector pointing at the block to copy, so the
-        // command itself lives in exactly one place: the markup people read.
-        var raw = button.getAttribute("data-copy") || "";
-        var text = raw;
-
-        if (raw.charAt(0) === "#") {
-          var source = doc.getElementById(raw.slice(1));
-          if (source) text = source.textContent;
-        }
-
-        text = text.replace(/\s+$/, "");
-
-        if (navigator.clipboard && navigator.clipboard.writeText) {
-          navigator.clipboard.writeText(text).then(
-            function () {
-              settle(true);
-            },
-            function () {
-              settle(false);
-            }
-          );
-          return;
-        }
-
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(
+          function () { settle(true); },
+          function () { settle(false); }
+        );
+      } else {
         settle(false);
-      });
-    });
-
-  /* ---------- live github star count ----------
-     A stable milestone is already in the markup, so this refreshes it to the
-     exact count. If the request fails, GitHub rate limits us, or this file
-     never runs, the truthful milestone stays and nothing moves. Answers are
-     cached locally, so a browsing session costs at most one request per
-     refresh window. */
-
-  (function () {
-    var targets = doc.querySelectorAll("[data-star-count]");
-    if (!targets.length || !window.fetch) return;
-
-    var ENDPOINT = "https://api.github.com/repos/offyotto/Core-Monitor";
-    var KEY = "core-monitor:stars";
-    var MAX_AGE = 10 * 60 * 1000;
-
-    var recall = function () {
-      try {
-        return window.localStorage.getItem(KEY);
-      } catch (error) {
-        // Private windows and blocked storage both throw here.
-        return null;
       }
-    };
-
-    var remember = function (value) {
-      try {
-        window.localStorage.setItem(KEY, value);
-      } catch (error) {
-        // Caching is an optimisation; carry on without it.
-      }
-    };
-
-    var abbreviate = function (count) {
-      if (count < 1000) return String(count);
-      var thousands = count / 1000;
-      return (
-        (thousands >= 10
-          ? Math.round(thousands)
-          : Math.round(thousands * 10) / 10) + "k"
+    });
+  });
+
+  /* ---------- fan curve: draw when it scrolls into view ---------- */
+
+  var curve = doc.querySelector("[data-curve]");
+
+  if (curve) {
+    if (reducedMotion.matches || !("IntersectionObserver" in window)) {
+      curve.classList.add("is-drawn");
+    } else {
+      var drawWatch = new IntersectionObserver(
+        function (entries) {
+          entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+              curve.classList.add("is-drawn");
+              drawWatch.disconnect();
+            }
+          });
+        },
+        { threshold: 0.45 }
       );
-    };
-
-    var paint = function (count) {
-      if (typeof count !== "number" || !isFinite(count) || count < 0) return;
-      Array.prototype.slice.call(targets).forEach(function (target) {
-        target.textContent = abbreviate(count);
-      });
-    };
-
-    var stored = recall();
-
-    if (stored) {
-      var halves = stored.split(":");
-      var checkedAt = parseInt(halves[0], 10);
-      var lastCount = parseInt(halves[1], 10);
-      if (isFinite(checkedAt) && isFinite(lastCount)) {
-        var age = Date.now() - checkedAt;
-        if (age >= 0 && age < MAX_AGE) {
-          paint(lastCount);
-          return;
-        }
-      }
+      drawWatch.observe(curve);
     }
-
-    window
-      .fetch(ENDPOINT, { headers: { Accept: "application/vnd.github+json" } })
-      .then(function (response) {
-        return response.ok ? response.json() : null;
-      })
-      .then(function (data) {
-        if (!data || typeof data.stargazers_count !== "number") return;
-        paint(data.stargazers_count);
-        remember(Date.now() + ":" + data.stargazers_count);
-      })
-      .catch(function () {
-        // Offline, rate limited or blocked. The shipped milestone stands.
-      });
-  })();
-
-  /* ---------- screenshot lightbox ----------
-     The gallery tiles are ordinary links to the full-size image, so with
-     this disabled they still open the screenshot. When <dialog> is
-     available we intercept and show it in place instead. Escape, backdrop
-     clicks and focus restoration all come free from the dialog element. */
-
-  var lightbox = doc.getElementById("lightbox");
-
-  if (lightbox && typeof lightbox.showModal === "function") {
-    var stage = lightbox.querySelector(".lightbox-img");
-    var stageCaption = lightbox.querySelector(".lightbox-caption");
-
-    doc.addEventListener("click", function (event) {
-      var trigger = closest(event.target, "[data-lightbox]");
-      if (!trigger) return;
-
-      // Let people open the raw image in a new tab if they mean to.
-      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
-      if (typeof event.button === "number" && event.button !== 0) return;
-
-      var thumb = trigger.querySelector("img");
-      event.preventDefault();
-
-      stage.setAttribute("src", trigger.getAttribute("href"));
-      stage.setAttribute("alt", thumb ? thumb.getAttribute("alt") || "" : "");
-      if (stageCaption) {
-        stageCaption.textContent = trigger.getAttribute("data-lightbox") || "";
-      }
-
-      lightbox.showModal();
-    });
-
-    lightbox.addEventListener("click", function (event) {
-      if (
-        event.target === lightbox ||
-        closest(event.target, "[data-lightbox-close]")
-      ) {
-        lightbox.close();
-      }
-    });
-
-    lightbox.addEventListener("close", function () {
-      stage.removeAttribute("src");
-    });
   }
+
 })();
diff --git a/docs/styles.css b/docs/styles.css
index 9f8cf52..842191e 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,1175 +1,815 @@
 /* ==========================================================================
-   Core-Monitor site styles
-
-   A rounded, native-feeling system built on macOS's own colour language:
-   system blue for interactive elements and links, system orange for the
-   thermal/heat theme, system green for "cool" states. Every colour is a
-   solid value, nothing blends two colours together.
-
-   Colour lives entirely in the custom properties below, so the whole site
-   can switch between a dark and a light chassis by swapping one block of
-   variables. See the prefers-color-scheme: light block at the end of this
-   file for the light variant; everything above it is the dark default.
-
-   Typography is 100% system fonts, so the site ships zero webfont requests
-   and nothing about a visitor reaches a third-party server. On macOS this
-   resolves to SF Pro / SF Mono. To go back to a webfont, set --font-display
-   below and re-add the stylesheet link in each page head.
+   Core-Monitor site — "bench instrument"
+
+   The site is styled as the thing it advertises: a precision instrument.
+   Light brushed-aluminum ground, machined 2px rules, square shoulders.
+   Two signal colors carry meaning rather than decoration:
+
+     --heat  deep signal orange-red : temperature, primary actions
+     --cool  coolant teal           : fans, cooling, "handed back to macOS"
+
+   Type is Bricolage Grotesque (variable: optical size + weight), self-hosted
+   so the same-origin CSP stays intact. Spline Sans Mono appears only where
+   the content is genuinely a readout or a command.
+
+   Every token lives below; the dark variant swaps the chassis at the end of
+   the file. All motion respects prefers-reduced-motion.
    ========================================================================== */
 
+@font-face {
+  font-family: "Bricolage Grotesque";
+  font-style: normal;
+  font-weight: 200 800;
+  font-stretch: 75% 100%;
+  font-display: swap;
+  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Spline Sans Mono";
+  font-style: normal;
+  font-weight: 300 700;
+  font-display: swap;
+  src: url("fonts/spline-sans-mono-latin.woff2") format("woff2");
+}
+
 :root {
-  --ink: #07080b;
-  --panel: #111419;
-  --panel-raised: #161b22;
-  --panel-soft: #0d1015;
-  --stroke: #262c35;
-  --stroke-soft: #1a1f26;
-  --text: #f1f3f6;
-  --text-dim: #a7b0bd;
-  --text-faint: #7d8796;
-
-  --accent: #0a84ff;
-  --accent-bright: #409cff;
-  --accent-ink: #ffffff;
-  --signal: #ff9f0a;
-  --signal-bright: #ffb43d;
-  --signal-ink: #241200;
-  --volt: #32d74b;
-  --volt-dim: #28b23d;
-  --volt-ink: #04210b;
-  --volt-edge: rgba(50, 215, 75, 0.34);
-  --link: var(--accent);
-  --caution: #ffd60a;
-  --danger: #ff453a;
-  --header-glass: rgba(7, 8, 11, 0.88);
-  --shadow-card: none;
-  --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.45), 0 22px 60px rgba(0, 0, 0, 0.55);
-  --scrim: rgba(4, 5, 7, 0.78);
-
-  --radius-lg: 18px;
-  --radius: 12px;
-  --radius-sm: 9px;
-
-  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
-  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
-
-  --max: 1180px;
-  --header-h: 62px;
-
-  color-scheme: dark light;
+  --bench: #e8eaec;
+  --plate: #f6f7f8;
+  --plate-deep: #dde0e3;
+  --ink: #22272c;
+  --dim: #59646e;
+  --faint: #7f8994;
+
+  --rule: #c3c9cf;
+  --rule-strong: #22272c;
+
+  --heat: #c93a0f;          /* accent surfaces, strokes            */
+  --heat-text: #b13309;     /* accent text on light chassis        */
+  --heat-hot: #e04a1a;      /* hover / active                      */
+  --heat-ink: #ffffff;      /* text on heat surfaces               */
+  --heat-wash: rgba(201, 58, 15, 0.07);
+
+  --cool: #0f6672;
+  --cool-text: #0c5761;
+  --cool-wash: rgba(15, 102, 114, 0.08);
+
+  --anodized: #171b1e;      /* the one dark band (privacy)         */
+  --anodized-plate: #21272b;
+  --anodized-ink: #e8ebed;
+  --anodized-dim: #9fa9b1;
+  --anodized-rule: #363e44;
+
+  --sans: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", sans-serif;
+  --mono: "Spline Sans Mono", "Andale Mono", monospace;
+
+  --measure: 66ch;
+  --span: 1160px;
+  --bar-h: 60px;
+
+  color-scheme: light;
 }
 
 * { box-sizing: border-box; }
 
 html {
+  background: var(--bench);
   scroll-behavior: smooth;
-  /* Keeps anchored headings clear of the sticky header on every jump. */
-  scroll-padding-top: calc(var(--header-h) + 1.5rem);
-  background: var(--ink);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html { scroll-behavior: auto; }
+  scroll-padding-top: calc(var(--bar-h) + 1.25rem);
 }
 
 body {
   margin: 0;
-  background: var(--ink);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.3' cy='1.3' r='1.3' fill='%23161b22'/%3E%3C/svg%3E");
-  color: var(--text);
-  font-family: var(--font-body);
-  font-size: 1.05rem;
-  line-height: 1.6;
+  background: var(--bench);
+  color: var(--ink);
+  font-family: var(--sans);
+  font-size: 1.0625rem;
+  font-weight: 400;
+  line-height: 1.55;
+  font-optical-sizing: auto;
   -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
 }
 
-::selection { background: rgba(10, 132, 255, 0.35); color: var(--text); }
+::selection { background: var(--heat); color: var(--heat-ink); }
 
-a { color: var(--link); text-decoration: none; }
-a:hover { text-decoration: underline; text-underline-offset: 3px; }
+a { color: var(--heat-text); text-underline-offset: 3px; }
+a:hover { color: var(--heat-hot); }
 
 :focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-  border-radius: 4px;
+  outline: 2.5px solid var(--heat);
+  outline-offset: 2px;
 }
 
-img, video { max-width: 100%; height: auto; display: block; }
+img, video, svg { max-width: 100%; height: auto; display: block; }
 
-p { margin: 0 0 1em; }
+p { margin: 0 0 1em; max-width: var(--measure); }
 p:last-child { margin-bottom: 0; }
 
-/* Headings are short enough that balancing them is cheap and stops a lone
-   word stranding on the last line. Body copy gets the looser "pretty" pass,
-   which only adjusts the final few lines. */
-h1, h2, h3 { text-wrap: balance; }
-.hero-text, .section-head p, .card p, .route > p { text-wrap: pretty; }
+h1, h2, h3 {
+  font-weight: 640;
+  line-height: 1.06;
+  letter-spacing: -0.015em;
+  margin: 0 0 0.5em;
+  text-wrap: balance;
+}
+
+h1 { font-size: clamp(2.7rem, 6.2vw, 4.6rem); font-weight: 700; }
+h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
+h3 { font-size: 1.3rem; line-height: 1.2; }
 
-.wrap {
-  width: min(var(--max), calc(100% - 3rem));
-  margin: 0 auto;
+.shell {
+  width: min(var(--span), calc(100% - 2.75rem));
+  margin-inline: auto;
 }
 
-.visually-hidden {
+.sr {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  width: 1px; height: 1px;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
 }
 
-.skip-link {
-  position: absolute;
-  left: -999px;
-  top: 1rem;
-  z-index: 100;
-  background: var(--accent);
-  color: var(--accent-ink);
+.skiplink {
+  position: fixed;
+  top: -100%;
+  left: 1rem;
+  z-index: 99;
   padding: 0.6rem 1rem;
-  border-radius: var(--radius-sm);
-  font-weight: 600;
-  font-size: 0.95rem;
-}
-.skip-link:focus { left: 1rem; }
-
-/* ---------- buttons ---------- */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.55rem;
-  min-height: 44px;
-  padding: 0.7rem 1.35rem;
-  border-radius: var(--radius);
-  border: 1px solid transparent;
-  font-family: var(--font-body);
-  font-size: 0.96rem;
-  font-weight: 600;
-  letter-spacing: 0.005em;
-  white-space: nowrap;
-  cursor: pointer;
-  background: none;
-  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, color 140ms ease;
-}
-.btn:hover { text-decoration: none; transform: translateY(-1px); }
-.btn:active { transform: translateY(0); }
-
-.btn-solid { background: var(--accent); color: var(--accent-ink); }
-.btn-solid:hover { background: var(--accent-bright); }
-
-.btn-outline { border-color: var(--stroke); color: var(--text); }
-.btn-outline:hover { border-color: var(--text-faint); background: var(--panel); }
-
-.btn-ghost { color: var(--text-dim); }
-.btn-ghost:hover { color: var(--text); background: var(--panel); }
-
-.btn-sm { min-height: 40px; padding: 0.45rem 0.95rem; font-size: 0.875rem; }
-
-@media (pointer: coarse) {
-  .btn-sm { min-height: 44px; }
-}
-
-.btn-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.7rem;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .btn, .btn:hover { transform: none; transition: none; }
+  background: var(--ink);
+  color: var(--bench);
+  text-decoration: none;
 }
+.skiplink:focus { top: 0.5rem; color: var(--bench); }
 
-/* ---------- header ---------- */
+/* ---------- top bar ------------------------------------------------------ */
 
-.site-header {
+.topbar {
   position: sticky;
   top: 0;
-  z-index: 50;
-  background: var(--header-glass);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border-bottom: 1px solid var(--stroke-soft);
-  transition: border-color 200ms ease, box-shadow 200ms ease;
+  z-index: 40;
+  background: var(--bench);
+  border-bottom: 2px solid var(--rule-strong);
 }
 
-/* Lifts the bar off the page once you start scrolling. */
-.site-header.is-scrolled {
-  border-bottom-color: var(--stroke);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
-}
-
-.header-row {
+.topbar-inner {
   display: flex;
   align-items: center;
-  gap: 1.4rem;
-  padding: 0.75rem 0;
+  gap: 1.5rem;
+  min-height: var(--bar-h);
 }
 
-.brand {
+.wordmark {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
-  color: var(--text);
-  font-weight: 600;
-}
-.brand:hover { text-decoration: none; }
-
-.brand-mark { width: 30px; height: 30px; border-radius: 8px; flex: none; }
-
-.brand-text { display: block; line-height: 1.15; font-size: 1rem; }
-
-.brand-text small {
-  display: block;
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  font-weight: 500;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--text-faint);
-}
-
-.nav-toggle {
-  display: none;
-  margin-left: auto;
-  width: 44px;
-  height: 44px;
-  border: 1px solid var(--stroke);
-  background: var(--panel);
-  border-radius: var(--radius-sm);
-  position: relative;
-  cursor: pointer;
-  flex: none;
+  gap: 0.6rem;
+  color: var(--ink);
+  text-decoration: none;
+  font-weight: 680;
+  font-size: 1.08rem;
+  letter-spacing: -0.01em;
+  margin-right: auto;
 }
+.wordmark img { width: 27px; height: 27px; }
 
-.nav-toggle span,
-.nav-toggle span::before,
-.nav-toggle span::after {
-  content: "";
-  position: absolute;
-  left: 12px;
-  right: 12px;
-  height: 1.5px;
-  background: var(--text-dim);
-  transition: transform 160ms ease, opacity 160ms ease;
-}
-.nav-toggle span { top: 50%; transform: translateY(-0.5px); }
-.nav-toggle span::before,
-.nav-toggle span::after { left: 0; right: 0; }
-.nav-toggle span::before { top: -7px; }
-.nav-toggle span::after { top: 7px; }
-
-.nav-toggle[aria-expanded="true"] span { background: transparent; }
-.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); background: var(--accent); }
-.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); background: var(--accent); }
-
-.primary-nav {
+.site-menu {
   display: flex;
   gap: 1.35rem;
-  margin-left: auto;
 }
-
-.primary-nav a {
-  position: relative;
-  color: var(--text-dim);
-  font-size: 0.925rem;
+.site-menu a {
+  color: var(--dim);
+  text-decoration: none;
+  font-size: 0.95rem;
   font-weight: 500;
   padding: 0.25rem 0;
+  border-bottom: 2px solid transparent;
 }
-.primary-nav a:hover { color: var(--text); text-decoration: none; }
+.site-menu a:hover { color: var(--ink); border-bottom-color: var(--heat); }
 
-/* Scroll spy: marks the section you are currently reading. */
-.primary-nav a[aria-current="true"] { color: var(--text); }
-.primary-nav a[aria-current="true"]::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -2px;
-  height: 2px;
-  border-radius: 2px;
-  background: var(--accent);
+.menu-btn {
+  display: none;
+  border: 2px solid var(--rule-strong);
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.35rem 0.8rem;
+  cursor: pointer;
 }
 
-.header-actions {
+/* ---------- actions ------------------------------------------------------ */
+
+.action-row {
   display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
   align-items: center;
-  gap: 0.85rem;
 }
-.primary-nav + .header-actions { margin-left: 0; }
 
-.icon-link {
+.act {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  color: var(--text-dim);
-  border-radius: var(--radius-sm);
-}
-.icon-link:hover { color: var(--text); background: var(--panel); }
-.icon-link img { width: 24px; height: 24px; }
-
-/* ---------- github star button ----------
-   An ordinary link to the repository that happens to carry the star count.
-   The number ships in the markup, so it is present with JavaScript blocked
-   and the button never changes width after load; script.js only refreshes
-   it. */
-
-.star-btn {
-  display: inline-flex;
-  align-items: center;
   gap: 0.5rem;
-  min-height: 40px;
-  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-sm);
-  color: var(--text-dim);
-  font-size: 0.875rem;
-  font-weight: 600;
-  white-space: nowrap;
-  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
-}
-.star-btn:hover {
-  color: var(--text);
-  border-color: var(--text-faint);
-  background: var(--panel);
+  padding: 0.72rem 1.35rem;
+  border: 2px solid var(--rule-strong);
+  font: inherit;
+  font-size: 0.98rem;
+  font-weight: 620;
   text-decoration: none;
+  color: var(--ink);
+  background: none;
+  cursor: pointer;
+  transition: transform 140ms ease, background-color 140ms ease,
+              color 140ms ease, border-color 140ms ease;
 }
-.star-btn img { width: 16px; height: 16px; }
+.act:hover { transform: translateY(-1.5px); color: var(--ink); }
+.act:active { transform: translateY(0); }
 
-.star-btn-count {
-  padding: 0.05rem 0.4rem;
-  border-radius: 5px;
-  background: var(--panel-raised);
-  color: var(--text);
-  font-variant-numeric: tabular-nums;
+.act-heat {
+  background: var(--heat);
+  border-color: var(--heat);
+  color: var(--heat-ink);
 }
+.act-heat:hover { background: var(--heat-hot); border-color: var(--heat-hot); color: var(--heat-ink); }
 
-/* Same treatment for the count sitting inside the closing call to action. */
-.btn-count {
-  margin-left: 0.1rem;
-  padding: 0.05rem 0.4rem;
-  border-radius: 5px;
-  background: var(--panel-raised);
-  font-size: 0.85em;
-  font-variant-numeric: tabular-nums;
-}
+.act-line:hover { border-color: var(--heat); }
 
-@media (pointer: coarse) {
-  .star-btn { min-height: 44px; }
+.act-bare {
+  border-color: transparent;
+  color: var(--dim);
+  text-decoration: underline;
+  text-underline-offset: 4px;
 }
+.act-bare:hover { color: var(--heat-text); }
 
-@media (prefers-reduced-motion: reduce) {
-  .star-btn { transition: none; }
-}
+.act-sm { padding: 0.45rem 0.95rem; font-size: 0.9rem; }
 
-/* ---------- hero ---------- */
+/* ---------- hero --------------------------------------------------------- */
 
 .hero {
-  padding: 4.5rem 0 3.5rem;
+  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(2.5rem, 5vh, 4rem);
+}
+
+.hero-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
-  gap: 3rem;
+  grid-template-columns: minmax(0, 1fr);
   align-items: center;
 }
 
-.hero h1 {
-  margin: 0 0 1.2rem;
-  font-family: var(--font-display);
-  font-size: clamp(2.3rem, 4.6vw, 3.45rem);
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.022em;
+.lede-sub {
+  font-size: 1.15rem;
+  color: var(--dim);
+  margin: 1.4rem 0 2rem;
 }
 
-.hero-text {
-  max-width: 34rem;
-  font-size: 1.14rem;
-  color: var(--text-dim);
-  margin-bottom: 1.7rem;
+/* one orchestrated load moment: title, sub, and actions */
+@media (prefers-reduced-motion: no-preference) {
+  .rise {
+    animation: rise 640ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+  }
+  .rise-2 { animation-delay: 90ms; }
+  .rise-3 { animation-delay: 180ms; }
+  @keyframes rise {
+    from { opacity: 0; transform: translateY(18px); }
+    to   { opacity: 1; transform: none; }
+  }
 }
 
-.hero-actions { margin-bottom: 1.1rem; }
-
-.hero-visual { position: relative; }
+/* ---------- framed screenshots ------------------------------------------- */
 
-.frame {
+.bezel {
   margin: 0;
-  padding: 10px;
-  background: var(--panel-soft);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
+  border: 2px solid var(--rule-strong);
+  background: var(--plate);
+  padding: 0.6rem;
+  box-shadow: 8px 8px 0 var(--plate-deep);
+}
+.bezel img { width: 100%; }
+.bezel figcaption {
+  padding: 0.55rem 0.25rem 0;
+  font-size: 0.85rem;
+  color: var(--dim);
 }
 
-.frame img { width: 100%; border-radius: 12px; }
+.hero-shot { margin-top: clamp(2.5rem, 6vh, 4.5rem); }
 
-/* ---------- sections ---------- */
+/* ---------- bands (sections) --------------------------------------------- */
 
-.section { padding: 5.5rem 0; }
-.section-tight { padding-top: 0; }
+.band { padding: clamp(3rem, 8vh, 5.5rem) 0; }
 
-.section-head {
-  max-width: 38rem;
-  margin-bottom: 2.6rem;
-}
+.band-head { margin-bottom: 2.25rem; max-width: 46rem; }
+.band-head h2 { margin-bottom: 0.4rem; }
+.band-head p { color: var(--dim); font-size: 1.08rem; }
 
-.section-head h2 {
-  margin: 0 0 0.75rem;
-  font-family: var(--font-display);
-  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
-  font-weight: 700;
-  letter-spacing: -0.018em;
-  line-height: 1.15;
-}
+.band + .band { border-top: 1.5px solid var(--rule); }
 
-.section-head p {
-  margin: 0;
-  color: var(--text-dim);
-}
-
-/* ---------- gallery ---------- */
+/* ---------- filmstrip gallery -------------------------------------------- */
 
-.gallery {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.2rem;
+.strip-scroller {
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x proximity;
+  padding-bottom: 0.9rem;
+  /* let the strip bleed to the viewport edge on the right */
+  margin-right: calc(50% - 50vw);
+  padding-right: max(1.375rem, calc(50vw - var(--span) / 2));
+  scrollbar-color: var(--rule-strong) transparent;
 }
 
-.gallery-2up { grid-template-columns: repeat(2, 1fr); }
+.strip {
+  display: flex;
+  gap: 1.1rem;
+  width: max-content;
+}
 
-.gallery-item {
+.shot {
   margin: 0;
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  background: var(--panel);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
-  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
+  scroll-snap-align: start;
+  width: min(74vw, 470px);
+  flex: none;
 }
+.shot.is-narrow { width: min(58vw, 300px); }
 
-.gallery-item:hover { border-color: var(--text-faint); transform: translateY(-3px); }
-.gallery-item:focus-within { border-color: var(--accent); }
+.shot a { display: block; border: 2px solid var(--rule-strong); background: var(--plate); padding: 0.45rem; }
+.shot a:hover { border-color: var(--heat); }
+.shot img { width: 100%; }
 
-.gallery-link {
-  display: block;
-  position: relative;
-  cursor: zoom-in;
-}
-.gallery-link:hover { text-decoration: none; }
-
-.gallery-item.is-tall img {
-  object-fit: contain;
-  background: var(--panel);
+.shot figcaption {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+  font-size: 0.88rem;
+  color: var(--dim);
 }
+.shot figcaption b { color: var(--ink); font-weight: 620; }
 
-.gallery-item img {
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
-  object-position: top center;
-  transition: transform 320ms ease;
+.strip-hint {
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--faint);
+  margin-top: 0.25rem;
 }
 
-.gallery-item:hover img { transform: scale(1.03); }
+/* ---------- cooling / fan curve ------------------------------------------ */
 
-.gallery-caption {
-  padding: 0.85rem 1rem;
-  border-top: 1px solid var(--stroke-soft);
+.cooling-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  gap: clamp(2rem, 5vw, 4rem);
+  align-items: start;
 }
 
-.gallery-caption strong { font-size: 0.95rem; font-weight: 600; }
-
-@media (prefers-reduced-motion: reduce) {
-  .gallery-item, .gallery-item:hover,
-  .gallery-item img, .gallery-item:hover img { transform: none; transition: none; }
+.fan-points { margin: 1.75rem 0 0; }
+.fan-points > div {
+  padding: 0.9rem 0;
+  border-top: 1.5px solid var(--rule);
 }
+.fan-points dt { font-weight: 640; margin-bottom: 0.15rem; }
+.fan-points dd { margin: 0; color: var(--dim); max-width: 52ch; }
 
-/* ---------- lightbox ---------- */
-
-.lightbox {
-  width: min(1180px, calc(100vw - 2.5rem));
-  max-width: none;
-  max-height: calc(100vh - 2.5rem);
-  padding: 0;
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  background: var(--panel);
-  color: var(--text);
-  box-shadow: var(--shadow-pop);
-  overflow: hidden;
+.curvebox {
+  border: 2px solid var(--rule-strong);
+  background: var(--plate);
+  box-shadow: 8px 8px 0 var(--plate-deep);
+  padding: 1.1rem 1.1rem 0.75rem;
 }
-.lightbox::backdrop { background: rgba(3, 4, 6, 0.82); }
-.lightbox:not([open]) { display: none; }
 
-.lightbox-img {
-  width: 100%;
-  max-height: calc(100vh - 9rem);
-  object-fit: contain;
-  background: var(--panel-soft);
-}
+.curvebox svg { width: 100%; height: auto; }
 
-.lightbox-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.8rem 0.8rem 0.8rem 1.15rem;
-  border-top: 1px solid var(--stroke-soft);
-}
+.curve-grid line { stroke: var(--plate-deep); stroke-width: 1; }
+.curve-axis { font-family: var(--mono); font-size: 11px; fill: var(--faint); }
 
-.lightbox-caption {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 600;
+.curve-line {
+  fill: none;
+  stroke: var(--cool);
+  stroke-width: 3;
+  stroke-linecap: round;
 }
 
-.lightbox-close {
-  flex: none;
-  width: 44px;
-  height: 44px;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--stroke);
-  background: none;
-  color: var(--text-dim);
-  font-size: 1.35rem;
-  line-height: 1;
-  cursor: pointer;
-}
-.lightbox-close:hover { color: var(--text); border-color: var(--text-faint); background: var(--panel-raised); }
+.curve-node { fill: var(--plate); stroke: var(--cool); stroke-width: 2.5; }
 
-/* ---------- feature split (cooling) ---------- */
+.curve-op { fill: var(--heat); }
+.curve-op-ring { fill: none; stroke: var(--heat); stroke-width: 2; opacity: 0; }
 
-.feature {
-  display: grid;
-  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
-  gap: 3.2rem;
-  align-items: center;
+/* drawn when scrolled into view */
+@media (prefers-reduced-motion: no-preference) {
+  .curve-line {
+    stroke-dasharray: 620;
+    stroke-dashoffset: 620;
+  }
+  .curve-node, .curve-op { opacity: 0; transition: opacity 300ms ease; }
+
+  .is-drawn .curve-line {
+    transition: stroke-dashoffset 1400ms cubic-bezier(0.4, 0, 0.2, 1);
+    stroke-dashoffset: 0;
+  }
+  .is-drawn .curve-node { opacity: 1; transition-delay: 1100ms; }
+  .is-drawn .curve-op   { opacity: 1; transition-delay: 1350ms; }
+  .is-drawn .curve-op-ring { animation: op-pulse 2600ms ease-out 1600ms infinite; }
+
+  @keyframes op-pulse {
+    0%   { opacity: 0.9; transform: scale(1); }
+    70%  { opacity: 0;   transform: scale(2.1); }
+    100% { opacity: 0; }
+  }
+  .curve-op-ring { transform-origin: center; transform-box: fill-box; }
 }
 
-.feature-copy h2 {
-  margin: 0 0 0.9rem;
-  font-family: var(--font-display);
-  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
-  font-weight: 700;
-  letter-spacing: -0.018em;
-  line-height: 1.15;
+.curve-caption {
+  margin-top: 0.6rem;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  color: var(--dim);
 }
 
-.feature-copy > p { color: var(--text-dim); margin-bottom: 1.6rem; }
+/* ---------- field log (use cases) ---------------------------------------- */
 
-.steps {
-  list-style: none;
+.log {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 clamp(2rem, 5vw, 4.5rem);
   margin: 0;
   padding: 0;
-  display: grid;
-  gap: 1.1rem;
+  list-style: none;
 }
 
-.steps li {
-  display: flex;
-  gap: 0.85rem;
+.log li {
+  padding: 1.15rem 0 1.25rem;
+  border-top: 1.5px solid var(--rule);
 }
 
-/* Parallel guarantees rather than an ordered procedure, so the list is
-   unordered and marked with a neutral dot, not a number. */
-.steps li::before {
+.log h3 {
+  font-size: 1.12rem;
+  margin-bottom: 0.25rem;
+  padding-left: 1.15rem;
+  position: relative;
+}
+.log h3::before {
   content: "";
-  flex: none;
-  width: 6px;
-  height: 6px;
-  margin-top: 0.6rem;
-  border-radius: 50%;
-  background: var(--text-faint);
+  position: absolute;
+  left: 0;
+  top: 0.32em;
+  width: 0.55em;
+  height: 0.55em;
+  background: var(--heat);
 }
+.log li.is-cool h3::before { background: var(--cool); }
 
-.step-body strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.15rem; }
-.step-body span { color: var(--text-dim); font-size: 0.95rem; }
+.log p { color: var(--dim); padding-left: 1.15rem; max-width: 48ch; }
 
-/* ---------- scenario cards ---------- */
+/* ---------- touch bar ----------------------------------------------------- */
 
-.cards {
+.reel-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.2rem;
+  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
+  gap: clamp(2rem, 5vw, 4rem);
+  align-items: center;
 }
 
-.card {
-  background: var(--panel);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  padding: 1.6rem 1.5rem;
-  box-shadow: var(--shadow-card);
-}
+.reel-note h3 { margin-bottom: 0.3rem; }
+.reel-note p { color: var(--dim); }
 
-/* "is-cool" cards are the ones about handing heat back under control. */
-.card.is-cool { border-color: var(--volt-edge); }
-.card.is-cool:hover { border-color: var(--volt); }
+/* ---------- privacy: the anodized band ------------------------------------ */
 
-.card h3 { margin: 0 0 0.5rem; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.005em; }
-.card p { margin: 0; font-size: 0.96rem; color: var(--text-dim); }
+.anodized {
+  background: var(--anodized);
+  color: var(--anodized-ink);
+  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
+  border-top: 2px solid var(--rule-strong);
+  border-bottom: 2px solid var(--rule-strong);
+}
 
-/* ---------- filmstrip (touch bar video) ---------- */
+.anodized h2 {
+  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
+  max-width: 15em;
+}
 
-.filmstrip {
+.anodized-grid {
   display: grid;
+  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
+  gap: clamp(2rem, 5vw, 4.5rem);
+  align-items: start;
 }
 
-.reel {
+.anodized-copy p { color: var(--anodized-dim); }
+.anodized-copy a { color: var(--anodized-ink); }
+
+.readouts {
   margin: 0;
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  background: var(--panel);
-  overflow: hidden;
-  box-shadow: var(--shadow-card);
+  border: 1.5px solid var(--anodized-rule);
+  background: var(--anodized-plate);
+  font-family: var(--mono);
+  font-size: 0.85rem;
 }
-
-.reel video { width: 100%; display: block; background: var(--panel-soft); }
-
-.reel-info {
-  padding: 1rem 1.1rem;
-  border-top: 1px solid var(--stroke-soft);
-  color: var(--text-dim);
-  font-size: 0.94rem;
+.readouts > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 1.5rem;
+  padding: 0.7rem 1rem;
 }
+.readouts > div + div { border-top: 1.5px solid var(--anodized-rule); }
+.readouts dt { color: var(--anodized-dim); }
+.readouts dd { margin: 0; color: var(--anodized-ink); font-weight: 500; }
+.readouts dd.ok { color: #7fd6c2; }
 
-.reel-info strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.25rem; }
-
-.reel-fallback { margin: 0.6rem 0 0; font-size: 0.9rem; }
-
-/* ---------- comparison table ---------- */
-
-.compare-wrap {
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  overflow-x: auto;
-  box-shadow: var(--shadow-card);
+.anodized-foot {
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: var(--anodized-dim);
+  max-width: 52ch;
 }
 
-.compare-wrap:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 2px;
-}
+/* ---------- compare table -------------------------------------------------- */
 
-.compare {
+.matrix-scroll { overflow-x: auto; }
+
+.matrix {
   width: 100%;
-  min-width: 640px;
   border-collapse: collapse;
-  background: var(--panel);
+  font-size: 0.98rem;
 }
-
-.compare caption {
+.matrix caption {
   caption-side: bottom;
-  padding: 0.85rem 1.3rem;
-  border-top: 1px solid var(--stroke-soft);
   text-align: left;
+  padding-top: 0.75rem;
   font-size: 0.85rem;
-  color: var(--text-faint);
+  color: var(--faint);
 }
-
-.compare th, .compare td {
+.matrix th, .matrix td {
   text-align: left;
-  padding: 1rem 1.3rem;
-  border-top: 1px solid var(--stroke-soft);
   vertical-align: top;
+  padding: 0.85rem 1.25rem 0.85rem 0;
+  border-top: 1.5px solid var(--rule);
+  min-width: 11rem;
 }
-
-.compare thead th {
+.matrix thead th {
   border-top: 0;
-  background: var(--panel-soft);
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  font-weight: 600;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  color: var(--text-dim);
+  font-size: 0.85rem;
+  font-weight: 620;
+  color: var(--faint);
+  padding-top: 0;
 }
+.matrix tbody th { font-weight: 660; white-space: nowrap; }
+.matrix td:last-child { color: var(--dim); }
+.matrix tbody tr:first-child th,
+.matrix tbody tr:first-child td { border-top: 2px solid var(--rule-strong); }
 
-.compare tbody th { font-weight: 600; white-space: nowrap; color: var(--text); }
-.compare td { font-size: 0.95rem; color: var(--text-dim); }
-.compare tbody tr:hover { background: var(--panel-raised); }
+/* ---------- install ways --------------------------------------------------- */
 
-/* ---------- install routes ---------- */
+.ways { border-top: 2px solid var(--rule-strong); }
 
-.routes {
+.way {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.2rem;
+  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
+  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
+  padding: 1.9rem 0;
+  border-bottom: 1.5px solid var(--rule);
 }
 
-.route {
-  background: var(--panel);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  padding: 1.7rem 1.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.9rem;
-  box-shadow: var(--shadow-card);
-}
-
-.route h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
-.route > p { margin: 0; font-size: 0.96rem; color: var(--text-dim); flex-grow: 1; }
-.route-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
+.way h3 { margin-bottom: 0.3rem; }
+.way-blurb { color: var(--dim); margin-bottom: 1.1rem; max-width: 56ch; }
 
-.code-block {
-  margin: 0;
-  padding: 0.9rem 1rem;
-  background: var(--panel-soft);
-  border: 1px solid var(--stroke-soft);
-  border-radius: var(--radius-sm);
-  font-family: var(--font-mono);
-  font-size: 0.82rem;
+.command {
+  margin: 0 0 1rem;
+  padding: 1rem 1.15rem;
+  background: var(--anodized);
+  color: var(--anodized-ink);
+  font-family: var(--mono);
+  font-size: 0.86rem;
   line-height: 1.6;
-  color: var(--text);
   overflow-x: auto;
   white-space: pre;
-  tab-size: 2;
 }
 
-.copy-btn {
-  display: inline-flex;
-  align-items: center;
-  min-height: 38px;
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--text-dim);
-  font-family: var(--font-mono);
-  font-size: 0.78rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  padding: 0.4rem 0.85rem;
-  cursor: pointer;
-  transition: color 140ms ease, border-color 140ms ease;
+.copy-act[data-state="done"] {
+  background: var(--cool);
+  border-color: var(--cool);
+  color: #fff;
 }
-.copy-btn:hover { color: var(--text); border-color: var(--text-faint); }
-.copy-btn[data-state="done"] { color: var(--volt); border-color: var(--volt-edge); }
-.copy-btn[data-state="failed"] { color: var(--danger); border-color: var(--danger); }
+.copy-act[data-state="failed"] { border-color: var(--heat); color: var(--heat-text); }
 
-.route-note { margin: 0; font-size: 0.875rem; color: var(--text-faint); }
+/* ---------- FAQ ------------------------------------------------------------ */
 
-/* ---------- faq ---------- */
+.qa { max-width: 54rem; }
 
-.faq {
-  background: var(--panel);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  padding: 0 1.35rem;
-  box-shadow: var(--shadow-card);
-}
+.qa-item { border-top: 1.5px solid var(--rule); }
+.qa-item:last-child { border-bottom: 1.5px solid var(--rule); }
 
-.faq-item { border-bottom: 1px solid var(--stroke-soft); }
-.faq-item:last-of-type { border-bottom: 0; }
-
-.faq-q {
+.qa-item summary {
+  list-style: none;
+  cursor: pointer;
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 1.2rem 0;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 1.03rem;
-  list-style: none;
+  align-items: baseline;
+  gap: 1.5rem;
+  padding: 1.05rem 0.25rem;
+  font-size: 1.12rem;
+  font-weight: 640;
 }
-.faq-q::-webkit-details-marker { display: none; }
-.faq-q:hover { color: var(--accent-bright); }
+.qa-item summary::-webkit-details-marker { display: none; }
+.qa-item summary:hover { color: var(--heat-text); }
 
-.faq-icon {
-  position: relative;
+.qa-mark {
   flex: none;
-  width: 16px;
-  height: 16px;
-}
-.faq-icon::before, .faq-icon::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  background: var(--signal);
-  transform: translate(-50%, -50%);
-}
-.faq-icon::before { width: 16px; height: 2px; }
-.faq-icon::after { width: 2px; height: 16px; transition: transform 200ms ease; }
-.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
-
-.faq-item p {
-  margin: 0 0 1.3rem;
-  max-width: 40rem;
-  font-size: 0.97rem;
-  color: var(--text-dim);
-}
-
-/* ---------- cta band ---------- */
-
-.cta {
-  margin-top: 2rem;
-  border-top: 1px solid var(--stroke-soft);
-  background: var(--panel-soft);
-}
-
-.cta-inner {
-  padding: 4.2rem 0;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 2rem;
+  font-family: var(--mono);
+  font-weight: 400;
+  color: var(--heat-text);
+  transition: rotate 240ms ease;
+}
+.qa-item[open] .qa-mark { rotate: 45deg; }
+
+.qa-item p {
+  padding: 0 0.25rem 1.25rem;
+  color: var(--dim);
+  max-width: 60ch;
+}
+
+/* smooth open where the platform supports it */
+@media (prefers-reduced-motion: no-preference) {
+  .qa-item::details-content {
+    opacity: 0;
+    block-size: 0;
+    overflow-y: clip;
+    transition: content-visibility 300ms allow-discrete,
+                opacity 300ms ease, block-size 300ms ease;
+  }
+  .qa-item[open]::details-content {
+    opacity: 1;
+    block-size: auto;
+    block-size: calc-size(auto, size);
+  }
 }
 
-.cta h2 {
-  margin: 0;
-  max-width: 30rem;
-  font-family: var(--font-display);
-  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
-  font-weight: 700;
-  letter-spacing: -0.018em;
-  line-height: 1.2;
-}
+/* ---------- coda ------------------------------------------------------------ */
 
-/* ---------- footer ---------- */
+.coda { padding: clamp(4rem, 10vh, 7rem) 0; text-align: left; }
+.coda h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); max-width: 18em; }
+.coda .action-row { margin-top: 1.75rem; }
 
-.btn.btn-ghost { padding-inline: 0.55rem; }
+/* ---------- footer ----------------------------------------------------------- */
 
-.site-footer {
-  border-top: 1px solid var(--stroke-soft);
-  padding: 2.6rem 0 2.8rem;
+.basefoot {
+  border-top: 2px solid var(--rule-strong);
+  padding: 1.75rem 0 2.25rem;
 }
 
-.footer-row {
+.basefoot-row {
   display: flex;
   flex-wrap: wrap;
-  gap: 1.6rem;
-  align-items: flex-start;
+  gap: 1rem 2rem;
+  align-items: center;
   justify-content: space-between;
 }
 
-.footer-brand {
+.basefoot-brand {
   display: flex;
   align-items: center;
-  gap: 0.6rem;
-  font-weight: 600;
-}
-.footer-brand img { width: 22px; height: 22px; border-radius: 5px; }
-
-.footer-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.2rem;
+  gap: 0.5rem;
+  margin: 0;
+  font-weight: 660;
 }
-.footer-nav a { color: var(--text-dim); font-size: 0.925rem; }
-.footer-nav a:hover { color: var(--text); }
+.basefoot-brand img { width: 21px; height: 21px; }
 
-.footer-legal { margin: 1.6rem 0 0; font-size: 0.875rem; color: var(--text-faint); }
-.footer-legal a { color: inherit; }
+.basefoot-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
+.basefoot-nav a { color: var(--dim); text-decoration: none; font-size: 0.92rem; }
+.basefoot-nav a:hover { color: var(--heat-text); }
 
-/* ---------- subpages ---------- */
-
-.intro { padding: 4rem 0 3rem; max-width: 44rem; }
-
-.intro h1 {
-  margin: 0 0 1rem;
-  font-family: var(--font-display);
-  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  line-height: 1.08;
+.basefoot-legal {
+  margin-top: 1rem;
+  font-size: 0.82rem;
+  color: var(--faint);
 }
+.basefoot-legal a { color: inherit; }
+
+/* ---------- interior pages (Mac App Store, 404) ------------------------------ */
 
-.intro .hero-text { margin-bottom: 1.5rem; }
+.page-lede { padding: clamp(3rem, 7vh, 5rem) 0 clamp(2rem, 4vh, 3rem); }
+.page-lede h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 20em; }
+.page-lede .lede-sub { max-width: var(--measure); }
 
 .meta-line {
-  margin: 0 0 0.4rem;
-  font-family: var(--font-mono);
-  font-size: 0.85rem;
-  letter-spacing: 0.01em;
-  color: var(--text-faint);
+  font-family: var(--mono);
+  font-size: 0.8rem;
+  color: var(--faint);
 }
 
-.ledger {
+.duo {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1.2rem;
+  gap: clamp(1.5rem, 4vw, 3rem);
 }
 
-.ledger-col {
-  background: var(--panel);
-  border: 1px solid var(--stroke);
-  border-radius: var(--radius-lg);
-  padding: 1.7rem 1.6rem;
-  box-shadow: var(--shadow-card);
+.tally {
+  border: 2px solid var(--rule-strong);
+  background: var(--plate);
+  padding: 1.4rem 1.5rem 1.5rem;
 }
-
-.ledger-col h3 { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 600; }
-
-.ledger-col ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: grid;
-  gap: 0.75rem;
-}
-
-.ledger-col li {
-  display: flex;
-  gap: 0.75rem;
-  align-items: baseline;
-  font-size: 0.96rem;
-  color: var(--text-dim);
+.tally.is-out { background: none; border-color: var(--rule); }
+.tally h3 { margin-bottom: 0.75rem; }
+.tally ul { margin: 0; padding: 0; list-style: none; }
+.tally li {
+  padding: 0.45rem 0 0.45rem 1.2rem;
+  position: relative;
+  color: var(--dim);
 }
-
-.ledger-col li::before {
+.tally li::before {
   content: "";
-  flex: none;
-  width: 7px;
-  height: 7px;
-  border-radius: 2px;
-  transform: translateY(-1px);
-  background: var(--volt);
+  position: absolute;
+  left: 0;
+  top: 0.95em;
+  width: 0.5em;
+  height: 2px;
+  background: var(--cool);
 }
+.tally.is-out li::before { background: var(--heat); }
 
-.ledger-col.is-out li::before { background: var(--text-faint); border-radius: 50%; }
-
-/* ---------- 404 ---------- */
-
-.void {
-  min-height: 58vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 1.3rem;
-  padding: 4rem 0;
+.trio {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0 clamp(1.75rem, 4vw, 3.5rem);
 }
+.trio > article { border-top: 2px solid var(--rule-strong); padding-top: 1rem; }
+.trio h3 { font-size: 1.1rem; }
+.trio p { color: var(--dim); font-size: 0.97rem; }
 
-.void h1 {
-  margin: 0;
-  font-family: var(--font-display);
-  font-size: clamp(3.2rem, 10vw, 6.5rem);
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  line-height: 1;
+.lost { padding: clamp(4rem, 14vh, 9rem) 0; }
+.lost h1 {
+  font-family: var(--mono);
+  font-weight: 500;
+  font-size: clamp(4rem, 14vw, 9rem);
+  letter-spacing: 0.02em;
+  margin-bottom: 0.2em;
 }
+.lost .flatline { max-width: 30rem; margin-bottom: 1.5rem; }
+.lost .flatline polyline { fill: none; stroke: var(--heat); stroke-width: 2.5; }
+.lost p { color: var(--dim); }
 
-.void p { margin: 0; color: var(--text-dim); max-width: 30rem; }
+/* ---------- responsive -------------------------------------------------------- */
 
-/* ---------- responsive ---------- */
+@media (max-width: 960px) {
+  .hero-grid, .cooling-grid, .reel-grid, .anodized-grid { grid-template-columns: 1fr; }
+  .way { grid-template-columns: 1fr; padding: 1.5rem 0; }
+  .trio { grid-template-columns: 1fr; }
+  .trio > article { padding-bottom: 0.75rem; }
+}
 
-@media (max-width: 980px) {
-  .hero { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; padding-top: 2.6rem; }
-  .gallery, .cards, .routes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
-  .feature { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
-  .header-row { flex-wrap: wrap; }
-  .nav-toggle { display: block; margin-left: auto; }
-  .primary-nav {
+@media (max-width: 760px) {
+  .site-menu {
     display: none;
-    width: 100%;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
     flex-direction: column;
     gap: 0;
-    order: 3;
-    margin-left: 0;
-  }
-  .primary-nav.is-open {
-    display: flex;
-    border-top: 1px solid var(--stroke-soft);
-    margin-top: 0.9rem;
-    padding-top: 0.4rem;
+    background: var(--bench);
+    border-bottom: 2px solid var(--rule-strong);
+    padding: 0.5rem 1.375rem 1rem;
   }
-  .primary-nav a { padding: 0.7rem 0; }
-  .primary-nav a[aria-current="true"]::after { display: none; }
-}
+  .site-menu.is-open { display: flex; }
+  .site-menu a { padding: 0.65rem 0; border-bottom: 1.5px solid var(--rule); }
+  .menu-btn { display: block; }
+  .topbar .act { display: none; }
 
-@media (max-width: 640px) {
-  body { font-size: 1rem; }
-  .wrap { width: min(var(--max), calc(100% - 2.5rem)); }
-  .gallery, .gallery-2up, .cards, .routes, .ledger { grid-template-columns: minmax(0, 1fr); }
-  .filmstrip { max-width: none; }
-  .section { padding: 3.6rem 0; }
-  .cta-inner { padding: 3rem 0; }
-  .hero { padding-bottom: 2.5rem; }
-  .header-actions { gap: 0.5rem; }
-  .header-actions .icon-link { display: none; }
-  .star-btn-label { display: none; }
-  .star-btn { padding-inline: 0.45rem; gap: 0.4rem; }
-  .btn-group .btn { flex: 1 1 auto; }
-  .lightbox { width: calc(100vw - 1.25rem); }
+  .log, .duo { grid-template-columns: 1fr; }
 }
 
-/* Narrower than this the star button starts shoving the download button off
-   the screen, and the download button is the one that matters here. The
-   count is still on the page: the closing call to action carries it. */
-
-@media (max-width: 560px) {
-  .star-btn { display: none; }
-}
-
-/* ---------- print ---------- */
-
-@media print {
-  .site-header, .cta, .nav-toggle, .lightbox { display: none !important; }
-  body { background: #ffffff; color: #000000; font-size: 11pt; }
-  a { color: #000000; text-decoration: underline; }
-  .card, .route, .ledger-col, .faq, .compare-wrap, .frame { border-color: #cccccc; box-shadow: none; }
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .act, .qa-mark { transition: none; }
 }
 
-/* ---------- light chassis ----------
-   Swaps the whole palette when the visitor's system is set to light mode,
-   using Apple's own light-appearance system colours. Everything above
-   defaults to the dark chassis; nothing else in the file needs to change
-   because every colour reference already runs through these custom
-   properties. Only the dot texture and the header glass bake in raw hex
-   values, so they get a matching override here too. */
+/* ---------- dark chassis -------------------------------------------------------- */
 
-@media (prefers-color-scheme: light) {
+@media (prefers-color-scheme: dark) {
   :root {
-    --ink: #f1f2ef;
-    --panel: #ffffff;
-    --panel-raised: #f7f8f5;
-    --panel-soft: #e8eae4;
-    --stroke: #d9dbd4;
-    --stroke-soft: #e6e8e1;
-    --text: #14171a;
-    --text-dim: #4a4e54;
-    --text-faint: #55595e;
-
-    --accent: #0069d9;
-    --accent-bright: #0058b8;
-    --signal: #b35c00;
-    --signal-bright: #995000;
-    --volt: #248a3d;
-    --volt-edge: rgba(36, 138, 61, 0.4);
-    --danger: #c9271c;
-    --header-glass: rgba(241, 242, 239, 0.86);
-    --shadow-card: 0 1px 2px rgba(20, 23, 26, 0.06), 0 14px 28px rgba(20, 23, 26, 0.08);
-    --shadow-pop: 0 1px 2px rgba(20, 23, 26, 0.1), 0 24px 60px rgba(20, 23, 26, 0.22);
-    --scrim: rgba(20, 23, 26, 0.62);
-  }
+    --bench: #16191c;
+    --plate: #1e2226;
+    --plate-deep: #0e1113;
+    --ink: #e7eaec;
+    --dim: #a2abb3;
+    --faint: #79838c;
 
-  body {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.3' cy='1.3' r='1.3' fill='%23e1e3dd'/%3E%3C/svg%3E");
-  }
+    --rule: #343b41;
+    --rule-strong: #e7eaec;
 
-  .site-header.is-scrolled { box-shadow: 0 10px 30px rgba(20, 23, 26, 0.09); }
+    --heat-text: #ff7a4d;
+    --heat-hot: #e85a28;
+    --heat-wash: rgba(255, 122, 77, 0.08);
 
-  ::selection { background: rgba(0, 105, 217, 0.2); }
-}
+    --cool-text: #5fbcc9;
+    --cool-wash: rgba(95, 188, 201, 0.08);
 
-/* Privacy section. These styles do not affect the rest of the website. */
-.privacy-section {
-  padding-block: 110px;
-  background: #0b1016;
-  color: #edf2f6;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 16px;
-  line-height: 1.6;
-  -webkit-font-smoothing: antialiased;
-}
+    --anodized: #0b0e10;
+    --anodized-plate: #15191c;
+    --anodized-rule: #2c3338;
 
-.privacy-section .privacy-layout {
-  display: grid;
-  grid-template-columns: 1.1fr 1fr;
-  gap: 100px;
-  width: min(1280px, calc(100% - 112px));
-  margin-inline: auto;
-  padding-top: 95px;
-  border-top: 1px solid #ffffff19;
-}
-
-.privacy-section h2 {
-  max-width: 550px;
-  margin: 0;
-  font-size: clamp(2.4rem, 4.4vw, 4.4rem);
-  font-weight: 500;
-  line-height: 1.08;
-  letter-spacing: -.055em;
-  text-wrap: balance;
-}
-
-.privacy-section .privacy-copy > p {
-  margin: 0 0 26px;
-  color: #a4b0bd;
-  font-size: 18px;
-}
-
-.privacy-section .privacy-facts {
-  display: flex;
-  gap: 30px;
-  margin-block: 35px;
-}
-
-.privacy-section .privacy-facts p {
-  margin: 0;
-  color: #edf2f6;
-  font-size: 14px;
-}
-
-.privacy-section .privacy-facts svg {
-  display: block;
-  width: 22px;
-  height: 22px;
-  margin-bottom: 12px;
-  fill: none;
-  stroke: #b8d8ef;
-  stroke-width: 1.6;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.privacy-section .privacy-copy .privacy-footnote {
-  font-size: 13px;
-}
-
-.privacy-section .privacy-source {
-  display: inline-flex;
-  align-items: center;
-  color: #edf2f6;
-  font-size: 14px;
-  text-decoration: underline;
-  text-underline-offset: 5px;
-  text-decoration-color: #ffffff50;
-}
-
-.privacy-section .privacy-source:hover {
-  text-decoration-color: currentColor;
-}
-
-.privacy-section :focus-visible {
-  outline: 2px solid #b8d8ef;
-  outline-offset: 6px;
-}
-
-@media (max-width: 1150px) {
-  .privacy-section .privacy-layout {
-    width: calc(100% - 72px);
-    gap: 60px;
-  }
-}
-
-@media (max-width: 850px) {
-  .privacy-section {
-    padding-block: 65px;
-  }
-
-  .privacy-section .privacy-layout {
-    grid-template-columns: 1fr;
-    gap: 45px;
-    width: calc(100% - 48px);
-    padding-top: 65px;
+    color-scheme: dark;
   }
-}
 
-@media (max-width: 540px) {
-  .privacy-section .privacy-layout {
-    width: calc(100% - 36px);
-  }
-
-  .privacy-section .privacy-facts {
-    gap: 25px;
-  }
+  .skiplink { background: var(--plate); color: var(--ink); }
+  ::selection { background: var(--heat); color: #fff; }
 }
