diff --git a/src/styles/app.css b/src/styles/app.css
index e78918f5..1b9a0b0b 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -9,7 +9,7 @@
    Ports superwall.com's brand system (superwall.com/design.md) onto Fumadocs.
    Docs sit in the "Application" register: sidebar/topbar chrome, dense type,
    long-form prose, Roboto Mono as the sole mono face. Paper-flat by intent —
-   no shadows, square corners (only circles round), one fixed orange accent,
+   no shadows, square corners (only circles round), one fixed teal accent,
    hairline borders, editorial Manrope type. Light (warm cream) and dark (true
    warm ink) both ship with a header toggle; the palette matches superwall.com so
    the two sites read as one brand. Theme rides a `.dark`/`.light` class
@@ -94,7 +94,7 @@
    Semantic Fumadocs tokens — the only colors that swap by mode.
    Three-tier depth (design.md Application register): canvas → surface →
    elevated, read through hue contrast + a single hairline border, never a
-   shadow. `primary` carries the fixed orange accent (links, active nav/TOC,
+   shadow. `primary` carries the fixed teal accent (links, active nav/TOC,
    tab underline, focus ring); `accent` is the low-alpha hover wash.
    --------------------------------------------------------------------------- */
 
@@ -115,15 +115,20 @@
   --color-fd-card-foreground: var(--color-black-500);
   --color-fd-border: var(--color-cream-400);        /* #e2e4d0 hairline */
   --color-fd-input: var(--color-cream-400);
-  /* Accent as TEXT (links, active nav/TOC labels) — a darker burnt-orange that
-     clears WCAG AA on cream/white/callout fills. Dark mode keeps orange-300
-     (already AA on ink). The ring below stays bright orange-300 (a 2px non-text
-     indicator, 3:1 suffices) so focus keeps its punch. */
-  --color-fd-primary: #a8421a;                      /* accent text, AA (~6:1) on light */
+  /* Accent as TEXT (links, active nav/TOC labels) — the deep teal step, which
+     clears WCAG AA on cream/white/callout fills. Dark mode uses teal-300
+     (already AA on ink).
+     The ring takes teal-400 too, unlike the old orange scheme where the ring
+     stayed bright (orange-300) for punch while text used a darker step. Teal's
+     bright step is a LIGHT cyan: teal-300 on this white canvas is only 1.76:1,
+     under the 3:1 minimum for a non-text indicator, and this token is the sole
+     `focus-visible:ring-2` marker across the app. teal-400 is 6.75:1. Dark mode
+     keeps teal-300 (11.2:1 on ink). Do not "brighten" this back to teal-300. */
+  --color-fd-primary: var(--color-teal-400);        /* #216564 — accent text, AA (~6.8:1) on light */
   --color-fd-primary-foreground: var(--color-cream-100);
   --color-fd-accent: color-mix(in srgb, var(--color-black-500) 5%, transparent);
   --color-fd-accent-foreground: var(--color-black-500);
-  --color-fd-ring: var(--color-orange-300);
+  --color-fd-ring: var(--color-teal-400);           /* 6.75:1 on white; teal-300 would be 1.76:1 */
   color-scheme: light;
 }
 
@@ -146,11 +151,11 @@
   --color-fd-card-foreground: var(--color-cream-100);
   --color-fd-border: var(--color-black-300);        /* #211f1d hairline */
   --color-fd-input: var(--color-black-300);
-  --color-fd-primary: var(--color-orange-300);      /* accent — fixed */
+  --color-fd-primary: var(--color-teal-300);        /* accent — fixed */
   --color-fd-primary-foreground: var(--color-black-500);
   --color-fd-accent: color-mix(in srgb, var(--color-cream-100) 6%, transparent);
   --color-fd-accent-foreground: var(--color-cream-100);
-  --color-fd-ring: var(--color-orange-300);
+  --color-fd-ring: var(--color-teal-300);
   color-scheme: dark;
 }
 
@@ -168,11 +173,11 @@
     --color-fd-card-foreground: var(--color-cream-100);
     --color-fd-border: var(--color-black-300);
     --color-fd-input: var(--color-black-300);
-    --color-fd-primary: var(--color-orange-300);
+    --color-fd-primary: var(--color-teal-300);
     --color-fd-primary-foreground: var(--color-black-500);
     --color-fd-accent: color-mix(in srgb, var(--color-cream-100) 6%, transparent);
     --color-fd-accent-foreground: var(--color-cream-100);
-    --color-fd-ring: var(--color-orange-300);
+    --color-fd-ring: var(--color-teal-300);
     color-scheme: dark;
   }
 }
@@ -186,6 +191,14 @@
   --color-fd-muted-foreground: #aaaaaa;
 }
 
+/* The sidebar aside paints `bg-fd-card`, which sat a tier above the canvas and
+   read as a differently-colored panel. Pin card to the canvas inside the
+   sidebar (both modes) so the nav shares the page background and the hairline
+   border alone separates them. */
+#nd-sidebar {
+  --color-fd-card: var(--color-fd-background);
+}
+
 /* ---------------------------------------------------------------------------
    Superwall wordmark — two-tone, theme-swapped (replicates superwall.com's own
    SuperwallLogo). All glyph paths take `--logo-primary`; the first four take
@@ -227,12 +240,11 @@
 
 /* ---------------------------------------------------------------------------
    Type — editorial Manrope. Headings are weight 500 (never 700) with negative
-   tracking that tightens as size grows; body is 400 with a gentle -0.01em.
+   tracking that tightens as size grows; body keeps the face's natural tracking.
    --------------------------------------------------------------------------- */
 @layer base {
   body {
     font-family: var(--font-sans);
-    letter-spacing: -0.01em;
   }
 
   /* Docked agent mode publishes this desktop push width; it stays 0px
@@ -284,10 +296,10 @@
 
 /* ---------------------------------------------------------------------------
    Prose — brighten long-form body toward fg (design.md: fg/85 for body, not a
-   heavy gray). Links carry the orange accent; hover strengthens with an
+   heavy gray). Links carry the teal accent; hover strengthens with an
    underline rather than a color shift (design rule 14).
    --------------------------------------------------------------------------- */
-/* Inline markdown links carry the orange accent via the prose link token — set
+/* Inline markdown links carry the teal accent via the prose link token — set
    here (not a raw `.prose a` rule) so it stays scoped by Fumadocs' typography
    `:where()` selectors: heading permalink anchors keep the heading color, and
    component links that set their own `text-*` utility (e.g. changelog rows) win
@@ -434,7 +446,7 @@ svg.lucide-external-link > * {
 }
 
 /* ---------------------------------------------------------------------------
-   "Ask AI" search-trigger shimmer — retinted from teal to the orange accent.
+   "Ask AI" search-trigger shimmer — tinted with the teal accent.
    --------------------------------------------------------------------------- */
 @keyframes ask-ai-empty-shimmer {
   0% {