diff --git a/DESIGN.md b/DESIGN.md
index 858cd5a..3ab10fe 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -355,10 +355,114 @@ When in doubt, apply these in order:
 
 ---
 
+## 15. Tailwind v4 integration
+
+The marketing site (`site/`) uses **Tailwind v4** wired through `@tailwindcss/vite`. There is no `tailwind.config.{js,ts}` — Tailwind v4 is **CSS-first**: tokens declared in `@theme {}` inside [`site/src/styles/tokens.css`](site/src/styles/tokens.css) automatically become utilities (`bg-brand-primary`, `text-ink-700`, `rounded-lg`, …).
+
+### 15.1 Wiring
+
+- `astro.config.mjs` → `vite: { plugins: [tailwindcss()] }`.
+- `site/src/styles/tokens.css` is the single source of truth:
+  1. **Tailwind imports are split, NOT `@import "tailwindcss"`** :
+     ```css
+     @import 'tailwindcss/theme.css'     layer(theme);
+     @import 'tailwindcss/utilities.css' layer(utilities);
+     ```
+     Preflight is **intentionally omitted**. The full `@import "tailwindcss"` pulls a global CSS reset that resets `h1`/`p`/`ul` margins and list markers — that mangles Starlight's docs typography (heading sizes collapse, lists lose bullets, links default-color). Starlight ships its own scoped reset; ours adds nothing. If a marketing component needs a real reset, scope it manually with `.reset { all: revert; }` etc.
+  2. `@variant dark (&:where([data-theme='dark'], [data-theme='dark'] *))` rebinds Tailwind's built-in `dark:` variant to our `[data-theme]` attribute (instead of `prefers-color-scheme`), so it stays in sync with `ThemeToggle.astro` + Starlight's theme provider.
+  3. `@theme { … }` declares **every** token Tailwind should expose as utilities.
+  4. `:root[data-theme='dark']` overrides the same `--color-*` vars for dark mode — utilities and raw `var(--color-…)` references both flip automatically.
+  5. Legacy aliases (`--brand-primary`, `--space-4`, …) are kept as `var(--color-brand-primary)` etc. so older components written before Tailwind landed keep working without a rewrite.
+
+### 15.2 Token → utility mapping
+
+Tailwind v4 generates utilities from the prefix of each `--*-name` declared in `@theme`. The naming convention is **enforced by Tailwind**, so it's worth memorizing.
+
+| `@theme` prefix | Utilities generated | Example |
+|----------------|---------------------|---------|
+| `--color-*` | `bg-*`, `text-*`, `border-*`, `ring-*`, `from-*`, `to-*`, `via-*`, `outline-*`, `decoration-*`, `accent-*`, `caret-*`, `divide-*`, `placeholder-*` | `bg-brand-primary`, `text-ink-700` |
+| `--font-*` | `font-*` | `font-display`, `font-mono` |
+| `--text-*` | `text-*` (typography scale) | `text-md`, `text-3xl` |
+| `--spacing` (single) | `p-N`, `m-N`, `gap-N`, `w-N`, `h-N`, etc. — `N × spacing` | `p-4` = `4 × 4px` = `16px` |
+| `--radius-*` | `rounded-*` | `rounded-md`, `rounded-full` |
+| `--shadow-*` | `shadow-*` | `shadow-md`, `shadow-lg` |
+| `--container-*` | `max-w-*`, `mx-auto` containers | `max-w-prose`, `max-w-main` |
+| `--breakpoint-*` | responsive variants | `sm:`, `md:`, `lg:`, `xl:` |
+
+### 15.3 When to use utility vs CSS var
+
+- **Tailwind utility** — for layout, spacing, typography, color in JSX-style markup. Reads cleanly inline. Default choice for new components.
+- **Raw `var(--color-…)`** — for SVG fills/strokes, CSS-in-JS dynamic values, gradients with `color-mix()`, anywhere a utility doesn't exist or you need the raw value. The two systems share the same `--color-*` vars, so they stay in sync.
+- **Scoped `<style>`** — for complex, single-use styles (the hero's orb glows, the architecture diagram). Compose with Tailwind, don't replace it.
+
+### 15.4 Component pattern (recommended)
+
+```astro
+---
+// Hero.astro — utility-first with raw vars only where utilities can't reach.
+---
+<section class="bg-paper-raised dark:bg-paper">
+  <div class="mx-auto grid max-w-wide gap-12 px-4 py-24 lg:grid-cols-[1.1fr_minmax(22rem,30rem)]">
+    <div>
+      <p class="mb-6 inline-flex rounded-full bg-brand-primary-muted px-3 py-1 text-xs font-semibold uppercase tracking-wide text-brand-primary">
+        Self-hosted · Theme-aware · Rust-fast
+      </p>
+      <h1 class="text-3xl font-semibold leading-tight tracking-tighter text-ink-900 lg:text-4xl">
+        The mail server that wears your brand.
+      </h1>
+      <p class="mt-6 max-w-xl text-md text-ink-500">
+        Self-hosted transactional mail with your colors, your templates, and your SMTP provider.
+      </p>
+    </div>
+
+    {/* SVG strokes use raw vars so they flip with [data-theme] */}
+    <svg viewBox="0 0 64 64" class="size-32" aria-hidden="true">
+      <path d="M..." stroke="var(--color-brand-primary)" stroke-width="4" fill="none"/>
+    </svg>
+  </div>
+</section>
+```
+
+### 15.5 Dark mode
+
+Already wired. Use `dark:` variant on any utility:
+
+```astro
+<button class="bg-brand-primary text-paper-raised dark:bg-brand-primary dark:text-ink-900">
+  CTA
+</button>
+```
+
+The `--color-*` vars are redefined under `[data-theme='dark']` in `tokens.css`, so `bg-brand-primary` already flips. Use `dark:` only when you need a *different token* in dark mode (rare with our system — most of the time the auto-flip is enough).
+
+### 15.6 What NOT to do
+
+- ❌ Don't add a `tailwind.config.js`. Tailwind v4 is CSS-first; that file is legacy.
+- ❌ Don't switch to `@import "tailwindcss"` — it pulls preflight, which destroys Starlight's docs typography (h1/p/ul margins, list markers, link colors all reset). Keep the split imports.
+- ❌ Don't redeclare tokens elsewhere (in component `<style>` blocks, in other CSS files). One source of truth — `tokens.css`.
+- ❌ Don't use `class:list={...}` to compose colors at runtime — Tailwind needs to see literal class names at build time. Use full conditional ternaries with literal classes instead.
+- ❌ Don't bypass `@variant dark (...)` and use Tailwind's default `prefers-color-scheme` dark mode — it would desync from Starlight + the ThemeToggle.
+
+### 15.7 Migrating existing components
+
+Existing components in `site/src/components/*.astro` use scoped `<style>` blocks with raw CSS vars. They keep working because of the legacy aliases in §15.1.5. Migrate incrementally — pick a component, replace its `<style>` block with Tailwind utilities, delete the legacy `<style>`.
+
+Suggested migration order (simplest → most painful):
+1. `404.astro`, `pricing.astro` — small, mostly text.
+2. `FeatureGrid.astro`, `CodeTabs.astro` — clear card/tab patterns.
+3. `SiteFooter.astro`, `SiteHeader.astro` — chrome.
+4. `Hero.astro`, `ThemeShowcase.astro`, `ArchitectureDiagram.astro` — keep their bespoke `<style>` for the SVG/animation parts; convert layout chrome only.
+
+---
+
 ## 14. Versioning this document
 
 - Bump `## N. …` section number only when adding new sections (never renumber).
 - Changes to tokens (colors, sizes) = note in `CHANGELOG.md` under `### Design`.
 - Major palette/typography changes = bump to a new major doc version in a `DESIGN-v2.md` and link back, so historical context is preserved.
 
-**Current version:** `v1` — 2026-04-23 — initial system.
+**Current version:** `v2` — 2026-04-26 — Tailwind v4 integration via `@theme` + `@variant dark`.
+
+### Changelog
+- `v2` (2026-04-26) — Added §15: Tailwind v4 wired through `@tailwindcss/vite`. Tokens exposed via `@theme {}` in `tokens.css`. Dark variant rebound to `[data-theme]` attribute. Legacy `--brand-*` / `--space-*` aliases preserved.
+- `v1` (2026-04-23) — Initial system.
diff --git a/docs/getting-started/installation.md b/docs/getting-started/installation.md
index 42012a1..9a4e697 100644
--- a/docs/getting-started/installation.md
+++ b/docs/getting-started/installation.md
@@ -5,8 +5,6 @@ sidebar:
   order: 1
 ---
 
-# Installation
-
 Mailify ships four install paths. Pick the one that matches your target.
 
 ## 1. Docker (recommended)
@@ -71,7 +69,9 @@ mailify
 
 ## 3. `cargo install` (Rust toolchain)
 
-> **Status:** planned. Publishing to crates.io is gated on the lib crates being deemed API-stable. Track progress in [`TODO.md §4.1`](https://github.com/donilite/mailify/blob/master/TODO.md).
+:::caution[Planned, not yet released]
+Publishing to crates.io is gated on the lib crates being deemed API-stable. Track progress in [`TODO.md §4.1`](https://github.com/donilite/mailify/blob/master/TODO.md).
+:::
 
 When ready:
 
@@ -79,7 +79,11 @@ When ready:
 cargo install mailify-api --locked
 ```
 
-This installs the `mailify` binary into `$CARGO_HOME/bin`. Note that `cargo install` does **not** ship the compiled template bundle — you will need to either build them from source (see [Template contract](../reference/template-contract.md)) or point `MAILIFY_TEMPLATES__PATH` at a pre-built bundle extracted from a GitHub Release archive.
+This installs the `mailify` binary into `$CARGO_HOME/bin`.
+
+:::note
+`cargo install` does **not** ship the compiled template bundle — you'll either build them from source (see [Template contract](../reference/template-contract.md)) or point `MAILIFY_TEMPLATES__PATH` at a pre-built bundle extracted from a GitHub Release archive.
+:::
 
 ## 4. Build from source
 
@@ -102,3 +106,4 @@ cargo build --release --bin mailify
 - [Send your first email →](./quickstart.md)
 - [Understand the moving parts →](./concepts.md)
 - [Configure SMTP for your provider →](../guides/configure-smtp.md)
+- [Brand your mail →](../guides/configure-theme.md)
diff --git a/docs/index.md b/docs/index.md
index 80e37a6..de5988c 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,8 +5,6 @@ sidebar:
   order: 0
 ---
 
-# Mailify
-
 **The mail server that wears your brand.**
 
 Mailify is a self-hosted transactional email server written in Rust. You give it a theme, a template id, and a recipient — it sends a branded email through your own SMTP provider. No SaaS, no vendor lock-in, no external service holding your template library hostage.
@@ -15,7 +13,7 @@ Mailify is a self-hosted transactional email server written in Rust. You give it
 
 - **Branded out of the box** — palette, fonts, logo, footer text injected into every template via a single `Theme` config object.
 - **One Docker image** — `donighost/mailify:<tag>` ships binary + compiled templates + built-in migrations. `docker run`, done.
-- **Templates as code** — React Email (`.tsx`) compiles to pre-rendered HTML with minijinja placeholders preserved for runtime variables. Edit in your editor, ship in CI.
+- **Templates as code** — React Email (`.tsx`) compiles to pre-rendered HTML with minijinja placeholders preserved for runtime variables.
 - **Durable queue** — jobs persist in Postgres via [apalis](https://github.com/geofmureithi/apalis). A worker crash does not eat your outbound.
 - **Per-job SMTP override** — one install can fan out to many tenants, each using their own SMTP provider, with credentials accepted in-memory only.
 - **Argon2 + JWT auth** — API keys are argon2-hashed at rest; clients exchange them for short-lived JWTs per session.
@@ -23,21 +21,23 @@ Mailify is a self-hosted transactional email server written in Rust. You give it
 
 ## Who it's for
 
-- **Indie / solo backend devs** who don't want to write a `MJML` template every time.
+- **Indie / solo backend devs** who don't want to write an MJML template every time.
 - **Small SaaS teams** needing Postmark-like ergonomics without paying per email.
 - **Agencies** running multi-tenant stacks where each client needs its own visual identity.
 
-If you need drag-and-drop campaign editors, audience segmentation, or bounce-analytics dashboards — Mailify is not for you. This is a *sending* server, not a marketing suite.
+:::note[Not a fit?]
+If you need drag-and-drop campaign editors, audience segmentation, or bounce-analytics dashboards — Mailify is not for you. This is a **sending** server, not a marketing suite.
+:::
 
 ## Quick links
 
-- [Install →](./getting-started/installation.md)
-- [Send your first mail →](./getting-started/quickstart.md)
-- [Concepts & vocabulary →](./getting-started/concepts.md)
-- [Full config reference →](./reference/config.md)
-- [HTTP API →](./reference/http-api.md)
-- [Troubleshooting →](./troubleshooting/common-errors.md)
-- [Contribute →](./contributing/overview.md)
+- [Install →](./getting-started/installation.md) — Docker, install script, cargo install, or build from source
+- [Quickstart →](./getting-started/quickstart.md) — send your first email in 5 minutes against a local Mailpit
+- [Concepts →](./getting-started/concepts.md) — templates, themes, jobs, queue, overrides, bootstrap
+- [Configuration →](./reference/config.md) — every TOML key, every env var, every default
+- [HTTP API →](./reference/http-api.md) — auth, send, jobs, templates, health
+- [Troubleshooting →](./troubleshooting/common-errors.md) — symptoms, causes, fixes by stage
+- [Contribute →](./contributing/overview.md) — three ways to help: code, reach, sponsorship
 
 ## License
 
diff --git a/docs/troubleshooting/common-errors.md b/docs/troubleshooting/common-errors.md
index 557359f..af117f3 100644
--- a/docs/troubleshooting/common-errors.md
+++ b/docs/troubleshooting/common-errors.md
@@ -5,10 +5,12 @@ sidebar:
   order: 1
 ---
 
-# Common errors
-
 Errors are grouped by stage. If yours isn't here, check [Debugging](./debugging.md) and [FAQ](./faq.md).
 
+:::tip[Speed up debugging]
+Set `RUST_LOG=mailify=debug,mailify_api=debug,mailify_queue=debug` before reproducing. Most errors below are easier to identify with the structured logs surfaced by these targets.
+:::
+
 ## Startup
 
 ### `error: figment error: missing field smtp.host`
@@ -98,6 +100,10 @@ psql "$MAILIFY_DATABASE__URL" -c 'SELECT 1'
 - If stuck past `retry_backoff_secs`, restart the server — apalis will requeue on next poll.
 - Persistent hangs often mean an external dependency (SMTP provider) is timing out silently; raise `MAILIFY_SMTP__TIMEOUT_SECS` briefly to confirm, then fix the upstream.
 
+:::danger[SMTP error 550 = upstream rejection]
+A `5xx` SMTP code from your provider means the provider refused the message — Mailify just relays the rejection. Don't bury this; investigate domain auth (SPF/DKIM/DMARC) before retrying.
+:::
+
 ### `relay access denied` / `550 5.7.1`
 
 **Cause** — SMTP provider refused the `From:` domain. Most transactional providers (SES, Mailgun, Postmark) require you to prove domain ownership via DNS records (SPF, DKIM, DMARC) before accepting mail from `@yourdomain.com`.
diff --git a/site/.gitignore b/site/.gitignore
index 0cabc9a..3da2092 100644
--- a/site/.gitignore
+++ b/site/.gitignore
@@ -4,3 +4,8 @@ node_modules
 .env
 .env.*
 !.env.example
+
+# Generated at prebuild — source of truth lives elsewhere
+public/og-default.png
+public/install.sh
+public/install.ps1
diff --git a/site/astro.config.mjs b/site/astro.config.mjs
index 0e7c361..d44a915 100644
--- a/site/astro.config.mjs
+++ b/site/astro.config.mjs
@@ -2,18 +2,43 @@
 import { defineConfig } from 'astro/config';
 import starlight from '@astrojs/starlight';
 import sitemap from '@astrojs/sitemap';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   site: 'https://mailify.donilite.me',
   trailingSlash: 'never',
 
+  vite: {
+    plugins: [tailwindcss()],
+  },
+
   integrations: [
     starlight({
       title: 'Mailify',
       description: 'Self-hosted, theme-aware transactional mail server in Rust.',
+      disable404Route: true,
+      expressiveCode: {
+        themes: ['github-dark-default', 'github-light-default'],
+        themeCssRoot: ':root',
+        themeCssSelector: (theme) =>
+          `[data-theme='${theme.type === 'dark' ? 'dark' : 'light'}']`,
+        styleOverrides: {
+          borderRadius: 'var(--radius-md)',
+          borderColor: 'var(--color-border)',
+          codeFontFamily: 'var(--font-mono)',
+          codeFontSize: '0.9rem',
+          codeLineHeight: '1.6',
+          frames: {
+            shadowColor: 'transparent',
+            editorActiveTabBorderColor: 'var(--color-brand-primary)',
+            editorActiveTabIndicatorBottomColor: 'var(--color-brand-primary)',
+            terminalBackground: 'var(--color-paper-raised)',
+            terminalTitlebarBackground: 'var(--color-paper)',
+          },
+        },
+      },
       logo: {
-        light: './public/logo.png',
-        dark: './public/logo-white.png',
+        src: './src/assets/logo.svg',
         alt: 'Mailify',
         replacesTitle: false,
       },
@@ -31,7 +56,7 @@ export default defineConfig({
       head: [
         {
           tag: 'meta',
-          attrs: { property: 'og:image', content: 'https://mailify.donilite.me/og-default.svg' },
+          attrs: { property: 'og:image', content: 'https://mailify.donilite.me/og-default.png' },
         },
         {
           tag: 'meta',
@@ -99,6 +124,20 @@ export default defineConfig({
         },
       ],
     }),
-    sitemap(),
+    sitemap({
+      changefreq: 'weekly',
+      priority: 0.8,
+      lastmod: new Date(),
+      filter: (page) => !page.includes('/404'),
+      serialize(item) {
+        if (item.url === 'https://mailify.donilite.me/') {
+          return { ...item, priority: 1.0 };
+        }
+        if (item.url.includes('/docs/')) {
+          return { ...item, priority: 0.9 };
+        }
+        return item;
+      },
+    }),
   ],
 });
diff --git a/site/bun.lock b/site/bun.lock
index 76b9651..0b1ecd1 100644
--- a/site/bun.lock
+++ b/site/bun.lock
@@ -8,11 +8,14 @@
         "@astrojs/check": "^0.9.0",
         "@astrojs/sitemap": "^3.2.0",
         "@astrojs/starlight": "^0.38.4",
+        "@astrojs/starlight-tailwind": "^5.0.0",
         "@fontsource/geist-mono": "^5.1.0",
         "@fontsource/geist-sans": "^5.1.0",
         "@fontsource/inter": "^5.1.0",
+        "@tailwindcss/vite": "^4.2.4",
         "astro": "^6.1.9",
         "sharp": "^0.34.5",
+        "tailwindcss": "^4.2.4",
         "typescript": "^6.0.3",
       },
     },
@@ -36,6 +39,8 @@
 
     "@astrojs/starlight": ["@astrojs/starlight@0.38.4", "", { "dependencies": { "@astrojs/markdown-remark": "^7.0.0", "@astrojs/mdx": "^5.0.0", "@astrojs/sitemap": "^3.7.1", "@pagefind/default-ui": "^1.3.0", "@types/hast": "^3.0.4", "@types/js-yaml": "^4.0.9", "@types/mdast": "^4.0.4", "astro-expressive-code": "^0.41.6", "bcp-47": "^2.1.0", "hast-util-from-html": "^2.0.1", "hast-util-select": "^6.0.2", "hast-util-to-string": "^3.0.0", "hastscript": "^9.0.0", "i18next": "^23.11.5", "js-yaml": "^4.1.0", "klona": "^2.0.6", "magic-string": "^0.30.17", "mdast-util-directive": "^3.0.0", "mdast-util-to-markdown": "^2.1.0", "mdast-util-to-string": "^4.0.0", "pagefind": "^1.3.0", "rehype": "^13.0.1", "rehype-format": "^5.0.0", "remark-directive": "^3.0.0", "ultrahtml": "^1.6.0", "unified": "^11.0.5", "unist-util-visit": "^5.0.0", "vfile": "^6.0.2" }, "peerDependencies": { "astro": "^6.0.0" } }, "sha512-TGFIr2aVC+gcZCPQzJOO4ZnA/yL3jRnsUDcKlVdEhxhxaOQnWr9lZ9MRScg9zU6uh3HVeZAmmjkLCdTlHdcaZA=="],
 
+    "@astrojs/starlight-tailwind": ["@astrojs/starlight-tailwind@5.0.0", "", { "peerDependencies": { "@astrojs/starlight": ">=0.38.0", "tailwindcss": "^4.0.0" } }, "sha512-VivF+bWg++4ma/ffr5sgHsd/ONtGdVJIKAaRZ6jmL4yqxy7bviu59MGNi5aW3nd8psP9i/aivBTrpwGxRM1XyA=="],
+
     "@astrojs/telemetry": ["@astrojs/telemetry@3.3.1", "", { "dependencies": { "ci-info": "^4.4.0", "dlv": "^1.1.3", "dset": "^3.1.4", "is-docker": "^4.0.0", "is-wsl": "^3.1.1", "which-pm-runs": "^1.1.0" } }, "sha512-7fcIxXS9J4ls5tr8b3ww9rbAIz2+HrhNJYZdkAhhB4za/I5IZ/60g+Bs8q7zwG0tOIZfNB4JWhVJ1Qkl/OrNCw=="],
 
     "@astrojs/yaml2ts": ["@astrojs/yaml2ts@0.2.3", "", { "dependencies": { "yaml": "^2.8.2" } }, "sha512-PJzRmgQzUxI2uwpdX2lXSHtP4G8ocp24/t+bZyf5Fy0SZLSF9f9KXZoMlFM/XCGue+B0nH/2IZ7FpBYQATBsCg=="],
@@ -190,8 +195,16 @@
 
     "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
 
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
     "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
 
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
     "@mdx-js/mdx": ["@mdx-js/mdx@3.1.1", "", { "dependencies": { "@types/estree": "^1.0.0", "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", "@types/mdx": "^2.0.0", "acorn": "^8.0.0", "collapse-white-space": "^2.0.0", "devlop": "^1.0.0", "estree-util-is-identifier-name": "^3.0.0", "estree-util-scope": "^1.0.0", "estree-walker": "^3.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "markdown-extensions": "^2.0.0", "recma-build-jsx": "^1.0.0", "recma-jsx": "^1.0.0", "recma-stringify": "^1.0.0", "rehype-recma": "^1.0.0", "remark-mdx": "^3.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "source-map": "^0.7.0", "unified": "^11.0.0", "unist-util-position-from-estree": "^2.0.0", "unist-util-stringify-position": "^4.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-f6ZO2ifpwAQIpzGWaBQT2TXxPv6z3RBzQKpVftEWN78Vl/YweF1uwussDx8ECAXVtr3Rs89fKyG9YlzUs9DyGQ=="],
 
     "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="],
@@ -280,6 +293,36 @@
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
+    "@tailwindcss/node": ["@tailwindcss/node@4.2.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.4" } }, "sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.4", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.4", "@tailwindcss/oxide-darwin-arm64": "4.2.4", "@tailwindcss/oxide-darwin-x64": "4.2.4", "@tailwindcss/oxide-freebsd-x64": "4.2.4", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.4", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.4", "@tailwindcss/oxide-linux-arm64-musl": "4.2.4", "@tailwindcss/oxide-linux-x64-gnu": "4.2.4", "@tailwindcss/oxide-linux-x64-musl": "4.2.4", "@tailwindcss/oxide-wasm32-wasi": "4.2.4", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.4", "@tailwindcss/oxide-win32-x64-msvc": "4.2.4" } }, "sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.4", "", { "os": "android", "cpu": "arm64" }, "sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.4", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.4", "", { "os": "win32", "cpu": "x64" }, "sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw=="],
+
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.2.4", "", { "dependencies": { "@tailwindcss/node": "4.2.4", "@tailwindcss/oxide": "4.2.4", "tailwindcss": "4.2.4" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-pCvohwOCspk3ZFn6eJzrrX3g4n2JY73H6MmYC87XfGPyTty4YsCjYTMArRZm/zOI8dIt3+EcrLHAFPe5A4bgtw=="],
+
     "@types/debug": ["@types/debug@4.1.13", "", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
 
     "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
@@ -444,6 +487,8 @@
 
     "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
+    "enhanced-resolve": ["enhanced-resolve@5.21.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA=="],
+
     "entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
 
     "es-module-lexer": ["es-module-lexer@2.0.0", "", {}, "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw=="],
@@ -502,6 +547,8 @@
 
     "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
 
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
     "h3": ["h3@1.15.11", "", { "dependencies": { "cookie-es": "^1.2.3", "crossws": "^0.3.5", "defu": "^6.1.6", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.4", "radix3": "^1.1.2", "ufo": "^1.6.3", "uncrypto": "^0.1.3" } }, "sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg=="],
 
     "hast-util-embedded": ["hast-util-embedded@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-is-element": "^3.0.0" } }, "sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA=="],
@@ -576,6 +623,8 @@
 
     "is-wsl": ["is-wsl@3.1.1", "", { "dependencies": { "is-inside-container": "^1.0.0" } }, "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw=="],
 
+    "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
+
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
 
     "json-schema-traverse": ["json-schema-traverse@1.0.0", "", {}, "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="],
@@ -586,6 +635,30 @@
 
     "klona": ["klona@2.0.6", "", {}, "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA=="],
 
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
     "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
     "lru-cache": ["lru-cache@11.3.5", "", {}, "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw=="],
@@ -870,6 +943,10 @@
 
     "svgo": ["svgo@4.0.1", "", { "dependencies": { "commander": "^11.1.0", "css-select": "^5.1.0", "css-tree": "^3.0.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.1.1", "sax": "^1.5.0" }, "bin": "./bin/svgo.js" }, "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w=="],
 
+    "tailwindcss": ["tailwindcss@4.2.4", "", {}, "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA=="],
+
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
+
     "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
 
     "tinyclip": ["tinyclip@0.1.12", "", {}, "sha512-Ae3OVUqifDw0wBriIBS7yVaW44Dp6eSHQcyq4Igc7eN2TJH/2YsicswaW+J/OuMvhpDPOKEgpAZCjkb4hpoyeA=="],
@@ -1002,6 +1079,18 @@
 
     "@mdx-js/mdx/estree-walker": ["estree-walker@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.0" } }, "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g=="],
 
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
     "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="],
diff --git a/site/package.json b/site/package.json
index 1f64493..fc83731 100644
--- a/site/package.json
+++ b/site/package.json
@@ -6,19 +6,23 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && astro build",
+    "prebuild": "node scripts/gen-og.mjs",
+    "build": "bun run prebuild && astro check && astro build",
     "preview": "astro preview",
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^6.1.9",
-    "@astrojs/starlight": "^0.38.4",
-    "@astrojs/sitemap": "^3.2.0",
     "@astrojs/check": "^0.9.0",
-    "@fontsource/inter": "^5.1.0",
-    "@fontsource/geist-sans": "^5.1.0",
+    "@astrojs/sitemap": "^3.2.0",
+    "@astrojs/starlight": "^0.38.4",
+    "@astrojs/starlight-tailwind": "^5.0.0",
     "@fontsource/geist-mono": "^5.1.0",
-    "typescript": "^6.0.3",
-    "sharp": "^0.34.5"
+    "@fontsource/geist-sans": "^5.1.0",
+    "@fontsource/inter": "^5.1.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "astro": "^6.1.9",
+    "sharp": "^0.34.5",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3"
   }
 }
diff --git a/site/public/favicon.svg b/site/public/favicon.svg
deleted file mode 100644
index 630a7c6..0000000
--- a/site/public/favicon.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect x="8" y="14" width="48" height="36" rx="10" fill="#F8FAFC" stroke="#2D5BFF" stroke-width="4"/>
-  <path d="M14 21L30.972 33.5437C31.5767 33.9905 32.4233 33.9905 33.028 33.5437L50 21" stroke="#2D5BFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-  <path d="M40 14H50C53.3137 14 56 16.6863 56 20V30" stroke="#FF8A3D" stroke-width="4" stroke-linecap="round"/>
-  <path d="M39 22L46 15" stroke="#FF8A3D" stroke-width="4" stroke-linecap="round"/>
-</svg>
diff --git a/site/public/robots.txt b/site/public/robots.txt
index 113491b..78d5ed9 100644
--- a/site/public/robots.txt
+++ b/site/public/robots.txt
@@ -1,4 +1,7 @@
+# https://mailify.donilite.me
+
 User-agent: *
 Allow: /
+Disallow: /404
 
 Sitemap: https://mailify.donilite.me/sitemap-index.xml
diff --git a/site/scripts/gen-og.mjs b/site/scripts/gen-og.mjs
new file mode 100644
index 0000000..6fc2019
--- /dev/null
+++ b/site/scripts/gen-og.mjs
@@ -0,0 +1,35 @@
+/**
+ * Pre-build step: rasterize public/og-default.svg → public/og-default.png at 1200×630.
+ *
+ * Twitter, LinkedIn, Slack, and most messaging clients prefer raster OG images
+ * — SVG OG cards either get downscaled or rejected outright.
+ *
+ * Run via `bun run prebuild` (called automatically before `astro build`).
+ */
+
+import sharp from 'sharp';
+import { copyFile, readFile, writeFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+const here = dirname(fileURLToPath(import.meta.url));
+const publicDir = resolve(here, '../public');
+
+// 1. Rasterize OG image
+const svgPath = resolve(publicDir, 'og-default.svg');
+const pngPath = resolve(publicDir, 'og-default.png');
+const svg = await readFile(svgPath);
+const png = await sharp(svg, { density: 192 })
+  .resize(1200, 630, { fit: 'contain', background: '#0B1020' })
+  .png({ compressionLevel: 9 })
+  .toBuffer();
+await writeFile(pngPath, png);
+console.log(`✓ Wrote ${pngPath} (${(png.byteLength / 1024).toFixed(1)} KB)`);
+
+// 2. Copy universal install scripts into public/ so they're served at the domain root.
+//    Source of truth is `install/` at the repo root.
+const installSrc = resolve(here, '../../install');
+for (const name of ['install.sh', 'install.ps1']) {
+  await copyFile(resolve(installSrc, name), resolve(publicDir, name));
+  console.log(`✓ Copied ${name} → public/${name}`);
+}
diff --git a/site/src/assets/logo.svg b/site/src/assets/logo.svg
new file mode 100644
index 0000000..8774178
--- /dev/null
+++ b/site/src/assets/logo.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-label="Mailify" role="img">
+  <rect x="6" y="14" width="44" height="36" rx="6" stroke="currentColor" stroke-width="4"/>
+  <path d="M10 20 L28 34 Q31 36 34 34 L52 20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <path d="M36 24 Q48 22 60 22" stroke="#FF8A3D" stroke-width="4" stroke-linecap="round" fill="none"/>
+  <path d="M44 16 L52 22" stroke="#FF8A3D" stroke-width="4" stroke-linecap="round"/>
+</svg>
diff --git a/site/src/components/ArchitectureDiagram.astro b/site/src/components/ArchitectureDiagram.astro
index 6c59ad1..262c191 100644
--- a/site/src/components/ArchitectureDiagram.astro
+++ b/site/src/components/ArchitectureDiagram.astro
@@ -10,20 +10,31 @@ const crates = [
 ];
 ---
 
-<section class="section">
-  <div class="shell">
-    <div class="intro">
-      <p class="kicker">Architecture</p>
-      <h2>Seven crates. One delivery path.</h2>
-      <p>
+<section class="py-16 lg:pb-24">
+  <div class="mx-auto w-[min(100%-2rem,var(--container-main))]">
+    <div class="max-w-2xl">
+      <p class="m-0 font-display text-sm font-semibold text-brand-primary">Architecture</p>
+      <h2
+        class="my-3 font-display font-semibold leading-tight text-ink-900"
+        style="font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));"
+      >
+        Seven crates. One delivery path.
+      </h2>
+      <p class="m-0 text-ink-500">
         The API layer receives mail requests, auth validates tokens, templates render branded HTML,
         and the queue worker ships through SMTP.
       </p>
     </div>
 
-    <div class="diagram">
+    <div class="diagram mt-8 grid grid-cols-1 gap-4 md:grid-cols-7 md:items-center">
       {crates.map((crateName, index) => (
-        <div class:list={['node', index === crates.length - 1 && 'node--primary']}>
+        <div
+          class:list={[
+            'node relative rounded-2xl border border-border bg-paper-raised px-4 py-3 font-mono text-sm text-ink-700',
+            index === crates.length - 1 &&
+              'border-brand-primary/50 bg-linear-[135deg] from-brand-primary-muted/70 to-paper-raised text-ink-900',
+          ]}
+        >
           {crateName}
         </div>
       ))}
@@ -32,53 +43,6 @@ const crates = [
 </section>
 
 <style>
-  .section {
-    padding: var(--space-16) 0 var(--space-24);
-  }
-
-  .shell {
-    width: min(100% - 2rem, var(--container-main));
-    margin: 0 auto;
-  }
-
-  .intro {
-    max-width: 40rem;
-  }
-
-  .kicker {
-    margin: 0;
-    color: var(--brand-primary);
-    font-family: var(--font-display);
-    font-size: var(--fs-sm);
-    font-weight: 600;
-  }
-
-  h2 {
-    margin: var(--space-3) 0;
-    font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
-  }
-
-  .intro p:last-child {
-    color: var(--text-muted);
-  }
-
-  .diagram {
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: var(--space-4);
-    margin-top: var(--space-8);
-  }
-
-  .node {
-    position: relative;
-    padding: 1rem 1.1rem;
-    border: 1px solid var(--border);
-    border-radius: 1rem;
-    background: var(--bg-raised);
-    font-family: var(--font-mono);
-    font-size: var(--fs-sm);
-  }
-
   .node::after {
     content: '';
     position: absolute;
@@ -88,22 +52,10 @@ const crates = [
     height: 1rem;
     background: color-mix(in srgb, var(--brand-primary) 35%, var(--border));
   }
-
   .node:last-child::after {
     display: none;
   }
-
-  .node--primary {
-    border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--border));
-    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary-muted) 70%, transparent), var(--bg-raised));
-  }
-
   @media (min-width: 768px) {
-    .diagram {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-      align-items: center;
-    }
-
     .node::after {
       left: auto;
       right: -1rem;
diff --git a/site/src/components/CodeTabs.astro b/site/src/components/CodeTabs.astro
index 30b6236..cee91fc 100644
--- a/site/src/components/CodeTabs.astro
+++ b/site/src/components/CodeTabs.astro
@@ -16,109 +16,31 @@ curl -X POST https://mailify.example.com/mail/send \\
   }'`;
 ---
 
-<section class="section">
-  <div class="shell panel">
-    <div class="copy">
-      <p class="kicker">Workflow</p>
-      <h2>Token, send, deliver.</h2>
-      <p>
+<section class="py-16">
+  <div
+    class="mx-auto grid w-[min(100%-2rem,var(--container-main))] gap-8 rounded-3xl border border-border bg-linear-to-b from-paper-raised/95 to-brand-primary-muted/45 p-8 lg:grid-cols-[minmax(0,0.8fr)_minmax(0,1.2fr)] lg:items-center"
+  >
+    <div>
+      <p class="m-0 font-display text-sm font-semibold text-brand-primary">Workflow</p>
+      <h2
+        class="my-3 font-display font-semibold leading-tight text-ink-900"
+        style="font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));"
+      >
+        Token, send, deliver.
+      </h2>
+      <p class="m-0 max-w-lg text-ink-500">
         Mailify keeps the request path boring: exchange an API key for a JWT, send a template id,
         let the queue handle the actual SMTP work.
       </p>
     </div>
 
-    <div class="code">
-      <div class="window-bar">
-        <span></span>
-        <span></span>
-        <span></span>
+    <div class="overflow-hidden rounded-2xl border border-ink-300/20 bg-[#0f172a] text-[#dbe5ff]">
+      <div class="flex gap-2 border-b border-white/10 px-4 py-3">
+        <span class="size-3 rounded-full bg-brand-accent"></span>
+        <span class="size-3 rounded-full bg-brand-primary"></span>
+        <span class="size-3 rounded-full bg-white/30"></span>
       </div>
-      <pre><code>{snippet}</code></pre>
+      <pre class="m-0 overflow-x-auto p-5 font-mono text-[0.92rem] leading-relaxed"><code>{snippet}</code></pre>
     </div>
   </div>
 </section>
-
-<style>
-  .section {
-    padding: var(--space-16) 0;
-  }
-
-  .shell {
-    width: min(100% - 2rem, var(--container-main));
-    margin: 0 auto;
-  }
-
-  .panel {
-    display: grid;
-    gap: var(--space-8);
-    padding: var(--space-8);
-    border: 1px solid var(--border);
-    border-radius: 1.5rem;
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 94%, transparent), color-mix(in srgb, var(--brand-primary-muted) 45%, transparent));
-  }
-
-  .kicker {
-    margin: 0;
-    color: var(--brand-primary);
-    font-family: var(--font-display);
-    font-size: var(--fs-sm);
-    font-weight: 600;
-  }
-
-  .copy h2 {
-    margin: var(--space-3) 0;
-    font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
-  }
-
-  .copy p {
-    max-width: 34rem;
-    margin: 0;
-    color: var(--text-muted);
-  }
-
-  .code {
-    overflow: hidden;
-    border: 1px solid color-mix(in srgb, var(--ink-300) 22%, transparent);
-    border-radius: 1rem;
-    background: #0f172a;
-    color: #dbe5ff;
-  }
-
-  .window-bar {
-    display: flex;
-    gap: 0.5rem;
-    padding: 0.9rem 1rem;
-    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
-  }
-
-  .window-bar span {
-    width: 0.7rem;
-    height: 0.7rem;
-    border-radius: 999px;
-    background: rgba(248, 250, 252, 0.32);
-  }
-
-  .window-bar span:first-child {
-    background: #ff8a3d;
-  }
-
-  .window-bar span:nth-child(2) {
-    background: #2d5bff;
-  }
-
-  pre {
-    margin: 0;
-    padding: 1.25rem;
-    overflow-x: auto;
-    font-size: 0.92rem;
-    line-height: 1.7;
-  }
-
-  @media (min-width: 1024px) {
-    .panel {
-      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
-      align-items: center;
-    }
-  }
-</style>
diff --git a/site/src/components/FeatureGrid.astro b/site/src/components/FeatureGrid.astro
index e2d01be..b1fb760 100644
--- a/site/src/components/FeatureGrid.astro
+++ b/site/src/components/FeatureGrid.astro
@@ -27,99 +27,33 @@ const features = [
 ];
 ---
 
-<section class="section">
-  <div class="shell">
-    <div class="intro">
-      <p class="kicker">Why Mailify</p>
-      <h2>Built for developers who want ownership without redoing email infra from scratch.</h2>
+<section class="py-16">
+  <div class="mx-auto w-[min(100%-2rem,var(--container-main))]">
+    <div class="max-w-3xl">
+      <p class="m-0 font-display text-sm font-semibold text-brand-primary">Why Mailify</p>
+      <h2
+        class="mt-3 max-w-[18ch] font-display font-semibold leading-tight text-ink-900"
+        style="font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));"
+      >
+        Built for developers who want ownership without redoing email infra from scratch.
+      </h2>
     </div>
 
-    <div class="grid">
+    <div class="mt-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
       {features.map((feature) => (
-        <article class="card">
-          <div class="icon" aria-hidden="true"></div>
-          <h3>{feature.title}</h3>
-          <p>{feature.body}</p>
+        <article
+          class="group rounded-lg border border-border bg-paper-raised p-6 transition duration-150 hover:-translate-y-0.5 hover:border-brand-primary/30 hover:shadow-md"
+        >
+          <div
+            class="size-8 rounded-[0.7rem] bg-linear-[135deg] from-brand-primary to-brand-primary/40"
+            aria-hidden="true"
+          ></div>
+          <h3 class="mt-4 mb-3 font-display text-md font-semibold text-ink-900">
+            {feature.title}
+          </h3>
+          <p class="m-0 text-sm text-ink-500">{feature.body}</p>
         </article>
       ))}
     </div>
   </div>
 </section>
-
-<style>
-  .section {
-    padding: var(--space-16) 0;
-  }
-
-  .shell {
-    width: min(100% - 2rem, var(--container-main));
-    margin: 0 auto;
-  }
-
-  .kicker {
-    margin: 0;
-    color: var(--brand-primary);
-    font-family: var(--font-display);
-    font-size: var(--fs-sm);
-    font-weight: 600;
-  }
-
-  .intro h2 {
-    max-width: 18ch;
-    margin: var(--space-3) 0 0;
-    font-size: clamp(var(--fs-xl), 5vw, var(--fs-2xl));
-    line-height: 1.1;
-  }
-
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: var(--space-4);
-    margin-top: var(--space-8);
-  }
-
-  .card {
-    padding: var(--space-6);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--bg-raised);
-    transition: transform 150ms ease-out, box-shadow 150ms ease-out, border-color 150ms ease-out;
-  }
-
-  .card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-md);
-    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border));
-  }
-
-  .icon {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.7rem;
-    background:
-      linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 42%, white));
-  }
-
-  .card h3 {
-    margin: var(--space-4) 0 var(--space-3);
-    font-size: var(--fs-md);
-  }
-
-  .card p {
-    margin: 0;
-    color: var(--text-muted);
-    font-size: var(--fs-sm);
-  }
-
-  @media (min-width: 640px) {
-    .grid {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .grid {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
-</style>
diff --git a/site/src/components/Hero.astro b/site/src/components/Hero.astro
index 09b492f..8a3f570 100644
--- a/site/src/components/Hero.astro
+++ b/site/src/components/Hero.astro
@@ -1,31 +1,69 @@
-<section class="hero">
-  <div class="shell">
-    <div class="copy">
-      <p class="eyebrow">Self-hosted. Theme-aware. Rust-fast.</p>
-      <h1>The mail server that wears your brand.</h1>
-      <p class="lede">
+---
+---
+
+<section class="hero relative overflow-hidden py-12 lg:pb-24">
+  <div
+    class="mx-auto grid w-[min(100%-2rem,var(--container-wide))] items-center gap-12 lg:grid-cols-[minmax(0,1.1fr)_minmax(22rem,30rem)]"
+  >
+    <div>
+      <p
+        class="mb-6 inline-flex rounded-full bg-brand-primary-muted px-3 py-1 font-display text-xs font-semibold uppercase tracking-wider text-brand-primary"
+      >
+        Self-hosted · Theme-aware · Rust-fast
+      </p>
+
+      <h1
+        class="m-0 max-w-[11ch] font-display font-semibold leading-[1.02] tracking-tighter text-ink-900"
+        style="font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));"
+      >
+        The mail server that wears your brand.
+      </h1>
+
+      <p class="mt-6 max-w-xl text-md text-ink-500">
         Self-hosted transactional mail with your colors, your templates, and your SMTP provider.
         One Docker image. Zero vendor lock-in.
       </p>
 
-      <div class="actions">
-        <a class="btn btn-primary" href="/docs/getting-started/installation">Get started</a>
-        <a class="docker-pill" href="/docs/getting-started/installation" aria-label="Read the install docs">
-          <span>docker pull donighost/mailify</span>
+      <div class="mt-8 flex flex-wrap items-center gap-4">
+        <a
+          class="inline-flex items-center gap-2 rounded-md bg-brand-primary px-6 py-3 font-display text-sm font-medium text-white transition hover:bg-brand-primary-hover"
+          href="/docs/getting-started/installation"
+        >
+          Get started →
         </a>
+        <code
+          class="inline-flex min-h-12 items-center rounded-full border border-border bg-paper-raised/85 px-4 py-3 font-mono text-sm text-ink-900"
+          aria-label="Docker pull command"
+        >
+          docker pull donighost/mailify
+        </code>
       </div>
 
-      <ul class="proof">
-        <li>Branded emails from config-driven theme tokens</li>
-        <li>Per-job SMTP override for multi-tenant setups</li>
-        <li>Compiled React Email templates with a durable queue</li>
+      <ul class="mt-8 grid gap-3 p-0 text-ink-500 list-none">
+        <li class="flex items-baseline gap-3">
+          <span aria-hidden class="size-2 shrink-0 translate-y-1 rounded-full bg-brand-accent"></span>
+          Branded emails from config-driven theme tokens
+        </li>
+        <li class="flex items-baseline gap-3">
+          <span aria-hidden class="size-2 shrink-0 translate-y-1 rounded-full bg-brand-accent"></span>
+          Per-job SMTP override for multi-tenant setups
+        </li>
+        <li class="flex items-baseline gap-3">
+          <span aria-hidden class="size-2 shrink-0 translate-y-1 rounded-full bg-brand-accent"></span>
+          Compiled React Email templates with a durable queue
+        </li>
       </ul>
     </div>
 
-    <div class="visual" aria-hidden="true">
-      <div class="orb orb-primary"></div>
-      <div class="orb orb-accent"></div>
-      <svg viewBox="0 0 520 420" class="hero-svg">
+    <div class="visual relative grid min-h-96 place-items-center" aria-hidden="true">
+      <div
+        class="orb orb-primary absolute right-8 top-0 size-48 rounded-full opacity-80 blur-2xl"
+      ></div>
+      <div
+        class="orb orb-accent absolute bottom-4 left-8 size-36 rounded-full opacity-80 blur-2xl"
+      ></div>
+
+      <svg viewBox="0 0 520 420" class="hero-svg relative z-10 w-[min(100%,32rem)] drop-shadow-xl">
         <defs>
           <linearGradient id="mailify-surface" x1="0" y1="0" x2="1" y2="1">
             <stop offset="0%" stop-color="var(--bg-raised)" />
@@ -48,129 +86,17 @@
 
 <style>
   .hero {
-    padding: var(--space-12) 0 var(--space-24);
     background:
       radial-gradient(circle at top left, color-mix(in srgb, var(--brand-primary-muted) 82%, transparent), transparent 34%),
       radial-gradient(circle at 85% 20%, color-mix(in srgb, var(--brand-accent-muted) 65%, transparent), transparent 22%),
       linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 55%, transparent), transparent 55%);
   }
 
-  .shell {
-    width: min(100% - 2rem, var(--container-wide));
-    margin: 0 auto;
-    display: grid;
-    gap: var(--space-12);
-    align-items: center;
-  }
-
-  .eyebrow {
-    display: inline-flex;
-    margin: 0 0 var(--space-6);
-    padding: 0.4rem 0.7rem;
-    border-radius: var(--radius-full);
-    background: var(--brand-primary-muted);
-    color: var(--brand-primary);
-    font-family: var(--font-display);
-    font-size: var(--fs-xs);
-    font-weight: 600;
-    letter-spacing: 0.03em;
-    text-transform: uppercase;
-  }
-
-  h1 {
-    margin: 0;
-    max-width: 11ch;
-    font-size: clamp(var(--fs-2xl), 8vw, var(--fs-4xl));
-    line-height: 1.02;
-    letter-spacing: -0.04em;
-  }
-
-  .lede {
-    max-width: 38rem;
-    margin: var(--space-6) 0 0;
-    font-size: var(--fs-md);
-    color: var(--text-muted);
-  }
-
-  .actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-4);
-    margin-top: var(--space-8);
-  }
-
-  .docker-pill {
-    display: inline-flex;
-    align-items: center;
-    min-height: 48px;
-    padding: 0.85rem 1rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-full);
-    background: color-mix(in srgb, var(--bg-raised) 82%, transparent);
-    color: var(--text);
-    font-family: var(--font-mono);
-    font-size: var(--fs-sm);
-  }
-
-  .proof {
-    display: grid;
-    gap: var(--space-3);
-    margin: var(--space-8) 0 0;
-    padding: 0;
-    list-style: none;
-    color: var(--text-muted);
-  }
-
-  .proof li::before {
-    content: '';
-    display: inline-block;
-    width: 0.55rem;
-    height: 0.55rem;
-    margin-right: 0.75rem;
-    border-radius: 999px;
-    background: var(--brand-accent);
-  }
-
-  .visual {
-    position: relative;
-    min-height: 24rem;
-    display: grid;
-    place-items: center;
-  }
-
-  .hero-svg {
-    width: min(100%, 32rem);
-    position: relative;
-    z-index: 2;
-    filter: drop-shadow(var(--shadow-lg));
-  }
-
-  .orb {
-    position: absolute;
-    border-radius: 999px;
-    filter: blur(10px);
-    opacity: 0.8;
-  }
-
   .orb-primary {
-    width: 12rem;
-    height: 12rem;
-    top: 0;
-    right: 2rem;
     background: color-mix(in srgb, var(--brand-primary) 28%, transparent);
   }
 
   .orb-accent {
-    width: 9rem;
-    height: 9rem;
-    left: 2rem;
-    bottom: 1rem;
     background: color-mix(in srgb, var(--brand-accent) 30%, transparent);
   }
-
-  @media (min-width: 1024px) {
-    .shell {
-      grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 30rem);
-    }
-  }
 </style>
diff --git a/site/src/components/MarketingLayout.astro b/site/src/components/MarketingLayout.astro
index faf71df..71505fa 100644
--- a/site/src/components/MarketingLayout.astro
+++ b/site/src/components/MarketingLayout.astro
@@ -21,7 +21,10 @@ const { title, description } = Astro.props;
     <meta name="description" content={description} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
-    <meta property="og:image" content="https://mailify.donilite.me/og-default.svg" />
+    <meta property="og:image" content="https://mailify.donilite.me/og-default.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="Mailify — self-hosted theme-aware transactional mail server in Rust" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content={new URL(Astro.url.pathname, Astro.site).toString()} />
     <meta name="twitter:card" content="summary_large_image" />
@@ -29,7 +32,7 @@ const { title, description } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).toString()} />
   </head>
-  <body>
+  <body class="marketing">
     <a class="skip-link" href="#content">Skip to content</a>
     <SiteHeader />
     <main id="content">
diff --git a/site/src/components/SiteFooter.astro b/site/src/components/SiteFooter.astro
index 86e0eef..d9711c4 100644
--- a/site/src/components/SiteFooter.astro
+++ b/site/src/components/SiteFooter.astro
@@ -1,128 +1,90 @@
-<footer class="site-footer">
-  <div class="shell">
-    <div class="footer-brand">
-      <a class="brand" href="/">
-        <img class="logo logo--light" src="/logo.png" alt="Mailify" width="120" height="32" />
-        <img class="logo logo--dark" src="/logo-white.png" alt="Mailify" width="120" height="32" />
-        <span>Mailify</span>
+---
+import Logo from '../assets/logo.svg?raw';
+
+const cols = [
+  {
+    title: 'Product',
+    links: [
+      { label: 'Docs', href: '/docs' },
+      { label: 'API', href: '/docs/reference/http-api' },
+      { label: 'Pricing', href: '/pricing' },
+    ],
+  },
+  {
+    title: 'Project',
+    links: [
+      { label: 'GitHub', href: 'https://github.com/donilite/mailify' },
+      { label: 'Roadmap', href: 'https://github.com/donilite/mailify/blob/master/TODO.md' },
+      { label: 'Sponsors', href: 'https://github.com/sponsors/donilite' },
+    ],
+  },
+  {
+    title: 'Community',
+    links: [
+      { label: 'Discussions', href: 'https://github.com/donilite/mailify/discussions' },
+      { label: 'Issues', href: 'https://github.com/donilite/mailify/issues' },
+      { label: 'Contributing', href: '/docs/contributing/overview' },
+    ],
+  },
+];
+---
+
+<footer
+  class="border-t border-border bg-linear-to-b from-brand-primary-muted/30 to-bg pb-8 pt-16"
+>
+  <div
+    class="mx-auto grid w-[min(100%-2rem,var(--container-wide))] gap-12 lg:grid-cols-[1.25fr_1fr] lg:items-start"
+  >
+    <div>
+      <a
+        class="relative inline-flex items-center gap-3 font-display font-semibold text-ink-900"
+        href="/"
+        aria-label="Mailify home"
+      >
+        <span
+          class="brand-mark inline-flex size-8 text-brand-primary"
+          set:html={Logo}
+          aria-hidden="true"
+        ></span>
+        <span class="text-md font-bold tracking-tight">Mailify</span>
       </a>
-      <p>The self-hosted transactional email server that wears your brand.</p>
+      <p class="mt-4 max-w-md text-sm text-ink-500">
+        The self-hosted transactional email server that wears your brand.
+      </p>
+
+      <div class="mt-8 flex flex-wrap items-center gap-3 text-xs text-ink-500">
+        <span>MIT-licensed · made in Rust</span>
+        <span aria-hidden>·</span>
+        <a class="hover:text-ink-900" href="https://github.com/donilite/mailify" rel="noopener">v0.1.2</a>
+      </div>
     </div>
 
-    <div class="footer-links">
-      <div>
-        <h2>Product</h2>
-        <a href="/docs">Docs</a>
-        <a href="/docs/reference/http-api">API</a>
-        <a href="/pricing">Pricing</a>
-      </div>
-      <div>
-        <h2>Project</h2>
-        <a href="https://github.com/donilite/mailify">GitHub</a>
-        <a href="https://github.com/donilite/mailify/blob/master/TODO.md">Roadmap</a>
-        <a href="https://github.com/sponsors/donilite">Sponsors</a>
-      </div>
-      <div>
-        <h2>Community</h2>
-        <a href="https://github.com/donilite/mailify/discussions">Discussions</a>
-        <a href="https://github.com/donilite/mailify/issues">Issues</a>
-        <a href="/docs/contributing/overview">Contributing</a>
-      </div>
+    <div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
+      {cols.map((col) => (
+        <div>
+          <h2 class="m-0 mb-4 font-display text-sm font-semibold text-ink-900">{col.title}</h2>
+          <ul class="m-0 list-none space-y-3 p-0">
+            {col.links.map((link) => (
+              <li>
+                <a
+                  class="block text-sm text-ink-500 transition hover:text-ink-900 focus-visible:text-ink-900"
+                  href={link.href}
+                  rel={link.href.startsWith('http') ? 'noopener' : undefined}
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
     </div>
   </div>
 </footer>
 
 <style>
-  .site-footer {
-    border-top: 1px solid var(--border);
-    padding: var(--space-16) 0 var(--space-8);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--brand-primary-muted) 30%, transparent), transparent 26%),
-      var(--bg);
-  }
-
-  .shell {
-    width: min(100% - 2rem, var(--container-wide));
-    margin: 0 auto;
-    display: grid;
-    gap: var(--space-12);
-  }
-
-  .footer-brand p {
-    max-width: 32rem;
-    margin: var(--space-4) 0 0;
-    color: var(--text-muted);
-  }
-
-  .brand {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-    color: var(--text);
-    font-family: var(--font-display);
-    font-weight: 600;
-  }
-
-  .logo {
-    height: 2rem;
-    width: auto;
-  }
-
-  .logo--dark {
-    display: none;
-  }
-
-  :root[data-theme='dark'] .logo--light {
-    display: none;
-  }
-
-  :root[data-theme='dark'] .logo--dark {
-    display: block;
-  }
-
-  .brand span {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .footer-links {
-    display: grid;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: var(--space-8);
-  }
-
-  .footer-links h2 {
-    margin: 0 0 var(--space-4);
-    font-size: var(--fs-sm);
-  }
-
-  .footer-links a {
-    display: block;
-    margin-top: var(--space-3);
-    color: var(--text-muted);
-    font-size: var(--fs-sm);
-  }
-
-  .footer-links a:hover {
-    color: var(--text);
-  }
-
-  @media (min-width: 1024px) {
-    .shell {
-      grid-template-columns: 1.25fr 1fr;
-      align-items: start;
-    }
-
-    .footer-links {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
+  .brand-mark :global(svg) {
+    width: 100%;
+    height: 100%;
   }
 </style>
diff --git a/site/src/components/SiteHeader.astro b/site/src/components/SiteHeader.astro
index 7568960..d373fd4 100644
--- a/site/src/components/SiteHeader.astro
+++ b/site/src/components/SiteHeader.astro
@@ -1,125 +1,51 @@
 ---
 import ThemeToggle from './ThemeToggle.astro';
+import Logo from '../assets/logo.svg?raw';
 ---
 
-<header class="site-header">
-  <div class="shell">
-    <a class="brand" href="/" aria-label="Mailify home">
-      <img class="logo logo--light" src="/logo.png" alt="Mailify" width="120" height="32" />
-      <img class="logo logo--dark" src="/logo-white.png" alt="Mailify" width="120" height="32" />
-      <span>Mailify</span>
+<header
+  class="sticky top-0 z-50 border-b border-border/70 bg-bg/80 backdrop-blur-md"
+>
+  <div
+    class="mx-auto grid w-[min(100%-2rem,var(--container-wide))] min-h-16 grid-cols-[auto_1fr_auto] items-center gap-4"
+  >
+    <a
+      class="relative inline-flex items-center gap-3 font-display text-md font-semibold tracking-tight text-ink-900 hover:text-brand-primary"
+      href="/"
+      aria-label="Mailify home"
+    >
+      <span
+        class="brand-mark inline-flex size-8 text-brand-primary"
+        set:html={Logo}
+        aria-hidden="true"
+      ></span>
+      <span class="text-md font-bold tracking-tight">Mailify</span>
     </a>
 
-    <nav class="nav" aria-label="Primary">
-      <a href="/docs">Docs</a>
-      <a href="https://github.com/donilite/mailify">GitHub</a>
-      <a href="https://github.com/sponsors/donilite">Sponsors</a>
+    <nav
+      class="hidden items-center justify-center gap-6 text-sm text-ink-500 lg:inline-flex"
+      aria-label="Primary"
+    >
+      <a class="hover:text-ink-900 focus-visible:text-ink-900" href="/docs">Docs</a>
+      <a class="hover:text-ink-900 focus-visible:text-ink-900" href="https://github.com/donilite/mailify" rel="noopener">GitHub</a>
+      <a class="hover:text-ink-900 focus-visible:text-ink-900" href="https://github.com/sponsors/donilite" rel="noopener">Sponsors</a>
     </nav>
 
-    <div class="actions">
+    <div class="inline-flex items-center justify-end gap-3">
       <ThemeToggle />
-      <a class="btn btn-primary" href="/docs/getting-started/installation">Get started</a>
+      <a
+        class="hidden md:inline-flex items-center gap-2 rounded-md bg-brand-primary px-6 py-3 font-display text-sm font-medium text-white transition hover:bg-brand-primary-hover"
+        href="/docs/getting-started/installation"
+      >
+        Get started
+      </a>
     </div>
   </div>
 </header>
 
 <style>
-  .site-header {
-    position: sticky;
-    top: 0;
-    z-index: 50;
-    backdrop-filter: blur(12px);
-    background: color-mix(in srgb, var(--bg) 82%, transparent);
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
-  }
-
-  .shell {
-    width: min(100% - 2rem, var(--container-wide));
-    margin: 0 auto;
-    min-height: 4rem;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    gap: var(--space-4);
-  }
-
-  .brand {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-    color: var(--text);
-    font-family: var(--font-display);
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  }
-
-  .logo {
-    height: 2rem;
-    width: auto;
-  }
-
-  .logo--dark {
-    display: none;
-  }
-
-  :root[data-theme='dark'] .logo--light {
-    display: none;
-  }
-
-  :root[data-theme='dark'] .logo--dark {
-    display: block;
-  }
-
-  .brand span {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  .nav {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-6);
-  }
-
-  .nav a {
-    color: var(--text-muted);
-    font-size: var(--fs-sm);
-  }
-
-  .nav a:hover,
-  .nav a:focus-visible {
-    color: var(--text);
-  }
-
-  .actions {
-    display: inline-flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--space-3);
-  }
-
-  .actions :global(.btn) {
-    display: none;
-  }
-
-  @media (min-width: 768px) {
-    .actions :global(.btn) {
-      display: inline-flex;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .nav {
-      display: inline-flex;
-    }
+  .brand-mark :global(svg) {
+    width: 100%;
+    height: 100%;
   }
 </style>
diff --git a/site/src/components/ThemeShowcase.astro b/site/src/components/ThemeShowcase.astro
index 16ba2c4..a7e4bbf 100644
--- a/site/src/components/ThemeShowcase.astro
+++ b/site/src/components/ThemeShowcase.astro
@@ -1,175 +1,85 @@
-<section class="section">
-  <div class="shell split">
+---
+const swatches = [
+  { name: 'primary', cssVar: 'var(--brand-primary)' },
+  { name: 'accent', cssVar: 'var(--brand-accent)' },
+  { name: 'success', cssVar: 'var(--success)' },
+];
+---
+
+<section class="py-16">
+  <div
+    class="mx-auto grid w-[min(100%-2rem,var(--container-main))] items-center gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(18rem,26rem)]"
+  >
     <div>
-      <p class="kicker">Theme system</p>
-      <h2>Brand once. Reuse everywhere.</h2>
-      <p class="body">
-        Mailify’s default templates read from a theme object at render time, so brand changes stay
+      <p class="m-0 font-display text-sm font-semibold text-brand-primary">Theme system</p>
+      <h2
+        class="my-3 font-display font-semibold leading-tight text-ink-900"
+        style="font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));"
+      >
+        Brand once. Reuse everywhere.
+      </h2>
+      <p class="m-0 max-w-xl text-ink-500">
+        Mailify's default templates read from a theme object at render time, so brand changes stay
         in config instead of leaking into every mail template.
       </p>
 
-      <div class="swatches" aria-label="Mailify brand tokens">
-        <div><span style="background: var(--brand-primary);"></span><code>primary</code></div>
-        <div><span style="background: var(--brand-accent);"></span><code>accent</code></div>
-        <div><span style="background: var(--success);"></span><code>success</code></div>
+      <div class="mt-6 flex flex-wrap gap-4" aria-label="Mailify brand tokens">
+        {swatches.map((s) => (
+          <div
+            class="inline-flex items-center gap-3 rounded-full border border-border bg-paper-raised px-3 py-2"
+          >
+            <span class="size-4 rounded-full" style={`background:${s.cssVar}`}></span>
+            <code class="font-mono text-sm text-ink-700">{s.name}</code>
+          </div>
+        ))}
       </div>
     </div>
 
-    <div class="preview">
-      <div class="mail">
-        <div class="mail__top">
-          <div class="mail__logo">
-            <img src="/favicon.svg" alt="" width="22" height="22" />
-            <strong>Mailify</strong>
+    <div class="grid place-items-center">
+      <article
+        class="w-[min(100%,28rem)] rounded-3xl border border-border bg-paper-raised p-6 shadow-lg"
+      >
+        <header class="flex items-center justify-between gap-4">
+          <div class="inline-flex items-center gap-3 font-display">
+            <span class="inline-flex size-6 items-center justify-center text-brand-primary">
+              <svg viewBox="0 0 64 64" fill="none" aria-hidden="true">
+                <rect x="6" y="14" width="44" height="36" rx="6" stroke="currentColor" stroke-width="4"/>
+                <path d="M10 20 L28 34 Q31 36 34 34 L52 20" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                <path d="M36 24 Q48 22 60 22" stroke="var(--brand-accent)" stroke-width="4" stroke-linecap="round" fill="none"/>
+              </svg>
+            </span>
+            <strong class="font-semibold text-ink-900">Mailify</strong>
           </div>
-          <span class="badge">welcome</span>
-        </div>
-        <h3>Your brand, not your provider.</h3>
-        <p>
+          <span
+            class="rounded-full bg-brand-accent-muted px-3 py-1 font-display text-xs font-semibold uppercase tracking-wider text-brand-accent"
+          >
+            welcome
+          </span>
+        </header>
+
+        <h3 class="mt-8 mb-3 font-display text-lg font-semibold text-ink-900">
+          Your brand, not your provider.
+        </h3>
+        <p class="m-0 text-ink-500">
           Swap colors and logo once, then keep shipping the same templates across environments and
           tenants.
         </p>
-        <a href="/" class="mail__button">Open dashboard</a>
-        <div class="mail__footer">
+
+        <a
+          href="/"
+          class="mt-8 inline-flex items-center rounded-md bg-brand-primary px-4 py-3 font-display text-sm font-semibold text-white transition hover:bg-brand-primary-hover"
+        >
+          Open dashboard
+        </a>
+
+        <footer
+          class="mt-8 flex justify-between gap-4 border-t border-border pt-4 text-xs text-ink-500"
+        >
           <span>Primary</span>
           <span>Accent</span>
           <span>Radius</span>
-        </div>
-      </div>
+        </footer>
+      </article>
     </div>
   </div>
 </section>
-
-<style>
-  .section {
-    padding: var(--space-16) 0;
-  }
-
-  .shell {
-    width: min(100% - 2rem, var(--container-main));
-    margin: 0 auto;
-  }
-
-  .split {
-    display: grid;
-    gap: var(--space-8);
-    align-items: center;
-  }
-
-  .kicker {
-    margin: 0;
-    color: var(--brand-primary);
-    font-family: var(--font-display);
-    font-size: var(--fs-sm);
-    font-weight: 600;
-  }
-
-  h2 {
-    margin: var(--space-3) 0;
-    font-size: clamp(var(--fs-xl), 4vw, var(--fs-2xl));
-  }
-
-  .body {
-    max-width: 36rem;
-    color: var(--text-muted);
-  }
-
-  .swatches {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--space-4);
-    margin-top: var(--space-6);
-  }
-
-  .swatches div {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-    padding: 0.6rem 0.85rem;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-full);
-    background: var(--bg-raised);
-  }
-
-  .swatches span {
-    width: 1rem;
-    height: 1rem;
-    border-radius: 999px;
-  }
-
-  .preview {
-    display: grid;
-    place-items: center;
-  }
-
-  .mail {
-    width: min(100%, 28rem);
-    padding: var(--space-6);
-    border: 1px solid var(--border);
-    border-radius: 1.5rem;
-    background: var(--bg-raised);
-    box-shadow: var(--shadow-lg);
-  }
-
-  .mail__top,
-  .mail__footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--space-4);
-  }
-
-  .mail__logo {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-3);
-    font-family: var(--font-display);
-  }
-
-  .badge {
-    padding: 0.25rem 0.65rem;
-    border-radius: var(--radius-full);
-    background: var(--brand-accent-muted);
-    color: var(--brand-accent);
-    font-size: var(--fs-xs);
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.02em;
-  }
-
-  .mail h3 {
-    margin: var(--space-8) 0 var(--space-3);
-    font-size: var(--fs-lg);
-  }
-
-  .mail p {
-    margin: 0;
-    color: var(--text-muted);
-  }
-
-  .mail__button {
-    display: inline-flex;
-    margin-top: var(--space-8);
-    padding: 0.8rem 1rem;
-    border-radius: var(--radius-md);
-    background: var(--brand-primary);
-    color: white;
-    font-family: var(--font-display);
-    font-size: var(--fs-sm);
-    font-weight: 600;
-  }
-
-  .mail__footer {
-    margin-top: var(--space-8);
-    padding-top: var(--space-4);
-    border-top: 1px solid var(--border);
-    color: var(--text-muted);
-    font-size: var(--fs-xs);
-  }
-
-  @media (min-width: 1024px) {
-    .split {
-      grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
-    }
-  }
-</style>
diff --git a/site/src/styles/global.css b/site/src/styles/global.css
index ffaf56f..6667256 100644
--- a/site/src/styles/global.css
+++ b/site/src/styles/global.css
@@ -1,3 +1,12 @@
+/*
+ * Global styles. Two scopes:
+ *   1. Truly global resets (fonts, box-sizing, prefers-reduced-motion).
+ *   2. Marketing-only rules under .marketing — applied via the MarketingLayout
+ *      <body class="marketing"> wrapper. Starlight docs pages MUST NOT inherit
+ *      heading/link colors from here, otherwise the sidebar links go invisible
+ *      and the docs typography breaks.
+ */
+
 @import '@fontsource/inter/400.css';
 @import '@fontsource/inter/500.css';
 @import '@fontsource/geist-sans/500.css';
@@ -6,7 +15,10 @@
 @import '@fontsource/geist-mono/400.css';
 @import '@fontsource/geist-mono/500.css';
 
-* {
+/* ─── Truly global ─── */
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -27,33 +39,56 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-h1, h2, h3, h4, h5, h6 {
+img {
+  max-width: 100%;
+  display: block;
+}
+
+:focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+::selection {
+  background: color-mix(in srgb, var(--brand-primary) 26%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ─── Marketing-only (scoped under .marketing on <body>) ─── */
+.marketing h1,
+.marketing h2,
+.marketing h3,
+.marketing h4,
+.marketing h5,
+.marketing h6 {
   font-family: var(--font-display);
   font-weight: 600;
   letter-spacing: -0.02em;
   color: var(--text);
 }
 
-a {
+.marketing a {
   color: var(--link);
   text-decoration: none;
   transition: color 150ms ease-out;
 }
 
-a:hover {
+.marketing a:hover {
   color: var(--brand-primary-hover);
 }
 
-img {
-  max-width: 100%;
-  display: block;
-}
-
-code, pre {
-  font-family: var(--font-mono);
-}
-
-code:not(pre code) {
+.marketing code:not(pre code) {
   padding: 0.1rem 0.35rem;
   border-radius: var(--radius-sm);
   background: var(--brand-primary-muted);
@@ -61,7 +96,7 @@ code:not(pre code) {
   font-size: 0.925em;
 }
 
-.skip-link {
+.marketing .skip-link {
   position: absolute;
   left: var(--space-4);
   top: -3rem;
@@ -72,10 +107,12 @@ code:not(pre code) {
   color: var(--paper);
 }
 
-.skip-link:focus {
+.marketing .skip-link:focus {
   top: var(--space-4);
 }
 
+/* Buttons used across marketing pages */
+.marketing .btn,
 .btn {
   display: inline-flex;
   align-items: center;
@@ -91,52 +128,38 @@ code:not(pre code) {
   text-decoration: none;
 }
 
+.marketing .btn-primary,
 .btn-primary {
   background: var(--brand-primary);
   color: white;
 }
 
+.marketing .btn-primary:hover,
 .btn-primary:hover {
   background: var(--brand-primary-hover);
   color: white;
 }
 
+.marketing .btn-secondary,
 .btn-secondary {
   background: var(--bg-raised);
   color: var(--text);
   border-color: var(--border);
 }
 
+.marketing .btn-secondary:hover,
 .btn-secondary:hover {
   background: var(--ink-100);
   color: var(--text);
 }
 
+.marketing .btn-ghost,
 .btn-ghost {
   background: transparent;
   color: var(--link);
 }
 
+.marketing .btn-ghost:hover,
 .btn-ghost:hover {
   background: var(--brand-primary-muted);
 }
-
-:focus-visible {
-  outline: 2px solid var(--brand-primary);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
-
-::selection {
-  background: color-mix(in srgb, var(--brand-primary) 26%, transparent);
-}
-
-/* Prefers reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}
diff --git a/site/src/styles/tokens.css b/site/src/styles/tokens.css
index 82d041c..bee5d65 100644
--- a/site/src/styles/tokens.css
+++ b/site/src/styles/tokens.css
@@ -1,115 +1,186 @@
-/* Mailify design tokens — mirrors DESIGN.md §2–§4 */
+/*
+ * Mailify design tokens — single source of truth for the site theme.
+ * Mirrors DESIGN.md §2–§4. Exposed to Tailwind v4 via @theme so utilities
+ * like `bg-brand-primary`, `text-ink-700`, `rounded-lg` are auto-generated.
+ *
+ * Components can use either Tailwind utilities or raw CSS vars (`var(--color-...)`).
+ */
 
-:root {
-  /* Brand scale */
-  --brand-primary: #2d5bff;
-  --brand-primary-hover: #1e43d9;
-  --brand-primary-muted: #e7edff;
-  --brand-accent: #ff8a3d;
-  --brand-accent-muted: #fff0e5;
-
-  /* Neutral scale (light) */
-  --ink-900: #0b1020;
-  --ink-700: #1f2937;
-  --ink-500: #475569;
-  --ink-300: #94a3b8;
-  --ink-100: #e2e8f0;
-  --paper: #f8fafc;
-  --paper-raised: #ffffff;
-  --border: #e2e8f0;
-
-  /* Semantic */
-  --text: var(--ink-900);
-  --text-muted: var(--ink-500);
-  --link: var(--brand-primary);
-  --bg: var(--paper);
-  --bg-raised: var(--paper-raised);
-  --success: #10b981;
-  --warning: #f59e0b;
-  --danger: #ef4444;
-  --info: var(--brand-primary);
-
-  /* Typography */
-  --fs-xs: 0.75rem;
-  --fs-sm: 0.875rem;
-  --fs-base: 1rem;
-  --fs-md: 1.125rem;
-  --fs-lg: 1.5rem;
-  --fs-xl: 1.875rem;
-  --fs-2xl: 2.5rem;
-  --fs-3xl: 3.5rem;
-  --fs-4xl: 4.5rem;
+/*
+ * Tailwind v4 imports — split, NOT `@import "tailwindcss"`:
+ *   - `theme`     → enables @theme {} so tokens become utilities
+ *   - `utilities` → ships utility classes
+ *   - preflight is intentionally OMITTED. It would reset Starlight's
+ *     typography (h1/p margins, list markers, link colors). Starlight
+ *     already ships its own scoped reset. Components needing reset can
+ *     scope it manually.
+ */
+@layer base, starlight, theme, components, utilities;
+@import '@astrojs/starlight-tailwind';
+@import 'tailwindcss/theme.css' layer(theme);
+@import 'tailwindcss/utilities.css' layer(utilities);
+
+/* Bind `dark:` variant to the [data-theme="dark"] attribute used by Starlight + ThemeToggle. */
+@variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+@theme {
+  /* ─── Brand colors ─── */
+  --color-brand-primary: #2d5bff;
+  --color-brand-primary-hover: #1e43d9;
+  --color-brand-primary-muted: #e7edff;
+  --color-brand-accent: #ff8a3d;
+  --color-brand-accent-muted: #fff0e5;
+
+  /* ─── Neutral scale ─── */
+  --color-ink-900: #0b1020;
+  --color-ink-700: #1f2937;
+  --color-ink-500: #475569;
+  --color-ink-300: #94a3b8;
+  --color-ink-100: #e2e8f0;
+  --color-paper: #f8fafc;
+  --color-paper-raised: #ffffff;
+  --color-border: #e2e8f0;
+
+  /* ─── Semantic ─── */
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-info: #2d5bff;
 
+  /* ─── Typography ─── */
   --font-display: 'Geist Sans', 'Inter', -apple-system, system-ui, sans-serif;
   --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
   --font-mono: 'Geist Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  --font-sans: var(--font-body);
 
-  /* Spacing (4px base) */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-12: 48px;
-  --space-16: 64px;
-  --space-24: 96px;
-  --space-32: 128px;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-md: 1.125rem;
+  --text-lg: 1.5rem;
+  --text-xl: 1.875rem;
+  --text-2xl: 2.5rem;
+  --text-3xl: 3.5rem;
+  --text-4xl: 4.5rem;
 
-  /* Radii */
+  /* ─── Spacing (4px base) ─── */
+  --spacing: 4px;
+
+  /* ─── Radii ─── */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-full: 9999px;
 
-  /* Elevation */
+  /* ─── Elevation ─── */
   --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.06);
   --shadow-md: 0 4px 12px rgba(11, 16, 32, 0.08);
   --shadow-lg: 0 12px 32px rgba(11, 16, 32, 0.12);
 
-  /* Containers */
-  --container-prose: 720px;
-  --container-main: 1120px;
-  --container-wide: 1280px;
+  /* ─── Containers ─── */
+  --container-prose: 45rem;
+  --container-main: 70rem;
+  --container-wide: 80rem;
+
+  /* ─── Breakpoints (mirror DESIGN.md §4.5) ─── */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
 }
 
+/* ─── Light-mode semantic aliases ─── */
+:root {
+  --color-text: var(--color-ink-900);
+  --color-text-muted: var(--color-ink-500);
+  --color-link: var(--color-brand-primary);
+  --color-bg: var(--color-paper);
+  --color-bg-raised: var(--color-paper-raised);
+
+  /* Legacy short aliases (kept for components written before Tailwind landed) */
+  --brand-primary: var(--color-brand-primary);
+  --brand-primary-hover: var(--color-brand-primary-hover);
+  --brand-primary-muted: var(--color-brand-primary-muted);
+  --brand-accent: var(--color-brand-accent);
+  --brand-accent-muted: var(--color-brand-accent-muted);
+  --ink-900: var(--color-ink-900);
+  --ink-700: var(--color-ink-700);
+  --ink-500: var(--color-ink-500);
+  --ink-300: var(--color-ink-300);
+  --ink-100: var(--color-ink-100);
+  --paper: var(--color-paper);
+  --paper-raised: var(--color-paper-raised);
+  --border: var(--color-border);
+  --text: var(--color-text);
+  --text-muted: var(--color-text-muted);
+  --link: var(--color-link);
+  --bg: var(--color-bg);
+  --bg-raised: var(--color-bg-raised);
+  --success: var(--color-success);
+  --warning: var(--color-warning);
+  --danger: var(--color-danger);
+  --info: var(--color-info);
+
+  --fs-xs: var(--text-xs);
+  --fs-sm: var(--text-sm);
+  --fs-base: var(--text-base);
+  --fs-md: var(--text-md);
+  --fs-lg: var(--text-lg);
+  --fs-xl: var(--text-xl);
+  --fs-2xl: var(--text-2xl);
+  --fs-3xl: var(--text-3xl);
+  --fs-4xl: var(--text-4xl);
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-24: 96px;
+  --space-32: 128px;
+}
+
+/* ─── Dark-mode overrides — apply to both Tailwind utilities and raw vars ─── */
 :root[data-theme='dark'] {
-  --brand-primary: #5b82ff;
-  --brand-primary-hover: #7a9cff;
-  --brand-primary-muted: #1a2449;
-  --brand-accent: #ffa466;
-  --brand-accent-muted: #3d2414;
-
-  --ink-900: #f8fafc;
-  --ink-700: #e2e8f0;
-  --ink-500: #94a3b8;
-  --ink-300: #475569;
-  --ink-100: #1f2937;
-  --paper: #0b1020;
-  --paper-raised: #111832;
-  --border: #1f2937;
+  --color-brand-primary: #5b82ff;
+  --color-brand-primary-hover: #7a9cff;
+  --color-brand-primary-muted: #1a2449;
+  --color-brand-accent: #ffa466;
+  --color-brand-accent-muted: #3d2414;
+
+  --color-ink-900: #f8fafc;
+  --color-ink-700: #e2e8f0;
+  --color-ink-500: #94a3b8;
+  --color-ink-300: #475569;
+  --color-ink-100: #1f2937;
+  --color-paper: #0b1020;
+  --color-paper-raised: #111832;
+  --color-border: #1f2937;
 
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
 }
 
-/* Map to Starlight theme hooks */
+/* ─── Starlight theme bridge ─── */
 :root {
-  --sl-color-accent: var(--brand-primary);
-  --sl-color-accent-high: var(--brand-primary-hover);
-  --sl-color-accent-low: var(--brand-primary-muted);
-  --sl-color-white: var(--paper-raised);
-  --sl-color-gray-1: var(--ink-100);
-  --sl-color-gray-2: var(--border);
-  --sl-color-gray-6: var(--ink-500);
-  --sl-color-gray-7: var(--ink-700);
-  --sl-color-black: var(--ink-900);
-  --sl-color-text: var(--text);
-  --sl-color-text-accent: var(--brand-primary);
-  --sl-color-bg: var(--bg);
-  --sl-color-bg-nav: var(--paper-raised);
-  --sl-color-bg-sidebar: var(--paper-raised);
+  --sl-color-accent: var(--color-brand-primary);
+  --sl-color-accent-high: var(--color-brand-primary-hover);
+  --sl-color-accent-low: var(--color-brand-primary-muted);
+  --sl-color-white: var(--color-paper-raised);
+  --sl-color-gray-1: var(--color-ink-100);
+  --sl-color-gray-2: var(--color-border);
+  --sl-color-gray-6: var(--color-ink-500);
+  --sl-color-gray-7: var(--color-ink-700);
+  --sl-color-black: var(--color-ink-900);
+  --sl-color-text: var(--color-text);
+  --sl-color-text-accent: var(--color-brand-primary);
+  --sl-color-bg: var(--color-bg);
+  --sl-color-bg-nav: var(--color-paper-raised);
+  --sl-color-bg-sidebar: var(--color-paper-raised);
   --sl-font: var(--font-body);
   --sl-font-mono: var(--font-mono);
 }