From 4b058e999c45bc6383b92773c2aa78ec174e4a55 Mon Sep 17 00:00:00 2001
From: Enrico Piovesan <enrico.piovesan10@gmail.com>
Date: Tue, 7 Jul 2026 23:11:45 -0600
Subject: [PATCH] feat: extract shared UI components to components.css (S4)

Added page-hero, two-col, stat-row/stat-card, section-title-sm,
section-lead, problem-list/benefit-list, and use-case-grid as
globally-defined components in components.css. strip_global_styles.py
removes these from page-level <style is:global> blocks so each pattern
is defined once. Verified 80 pages build cleanly and classes resolve
from the shared stylesheet.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .claude/launch.json                           |   2 +-
 public/assets/css/components.css              | 158 +++++++++++++++
 scripts/strip_global_styles.py                | 103 ++++++++++
 src/pages/about.astro                         |   9 +-
 src/pages/blog/ai-agents-need-contracts.astro |   4 +-
 src/pages/blog/logic-duplication.astro        |   8 +-
 src/pages/blog/runtime-assumptions.astro      |   4 +-
 src/pages/blog/uma-explained.astro            |   4 +-
 src/pages/blog/wasm-business-logic.astro      |   4 +-
 src/pages/changelog.astro                     |   4 +-
 src/pages/compare/vs-function-calling.astro   |  57 +-----
 src/pages/compare/vs-microservices.astro      |  20 +-
 src/pages/compare/vs-serverless.astro         |  45 +----
 src/pages/docs/architecture.astro             |   4 +-
 src/pages/docs/cli-reference.astro            |   4 +-
 src/pages/docs/concepts.astro                 |   4 +-
 src/pages/docs/guides/mcp-setup.astro         |   4 +-
 src/pages/docs/guides/react-integration.astro |   4 +-
 src/pages/docs/quickstart.astro               |   9 +-
 src/pages/docs/troubleshooting.astro          |   4 +-
 src/pages/faq.astro                           |   8 +-
 src/pages/roadmap.astro                       |   9 +-
 src/pages/solutions/ai-companies.astro        |  96 +--------
 src/pages/solutions/ecommerce.astro           |   9 +-
 src/pages/solutions/enterprise.astro          |  22 +-
 src/pages/solutions/fintech.astro             | 191 +-----------------
 src/pages/solutions/saas.astro                |  12 +-
 27 files changed, 288 insertions(+), 514 deletions(-)
 create mode 100644 scripts/strip_global_styles.py

diff --git a/.claude/launch.json b/.claude/launch.json
index b66b707..df0674a 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -4,7 +4,7 @@
     {
       "name": "traverse-website",
       "runtimeExecutable": "npx",
-      "runtimeArgs": ["serve", "-l", "8090", "."],
+      "runtimeArgs": ["serve", "-l", "8090", "dist"],
       "port": 8090,
       "cwd": "/Users/enricopiovesan/Documents/repos/traverseweb"
     }
diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index 2757aa9..6f843a7 100644
--- a/public/assets/css/components.css
+++ b/public/assets/css/components.css
@@ -525,3 +525,161 @@
 .animate-delay-2 { animation-delay: 0.22s; }
 .animate-delay-3 { animation-delay: 0.38s; }
 .animate-delay-4 { animation-delay: 0.54s; }
+
+/* ─── Subpage: Page Hero ─────────────────────────────────────────────────── */
+.page-hero {
+  padding: 5rem 0 4rem;
+  border-bottom: 1px solid var(--border);
+}
+.page-hero-inner { max-width: 780px; }
+.page-hero h1 { margin: 1rem 0 1.5rem; }
+.page-hero-sub {
+  font-size: 1.1rem;
+  line-height: 1.75;
+  color: var(--fg-muted);
+  max-width: 640px;
+}
+.page-hero-badges {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+}
+
+/* ─── Subpage: Two-column layout ─────────────────────────────────────────── */
+.two-col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4rem;
+  align-items: start;
+}
+@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 2.5rem; } }
+
+/* ─── Subpage: Section typography ───────────────────────────────────────── */
+.section-title-sm {
+  font-family: var(--font-display);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+  line-height: 1.3;
+}
+.section-lead {
+  color: var(--fg-muted);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+/* ─── Subpage: Problem / Benefit lists ───────────────────────────────────── */
+.problem-list, .benefit-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+.benefit-list { gap: 1rem; }
+.problem-item, .benefit-item {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+.problem-icon, .benefit-icon {
+  flex-shrink: 0;
+  width: 28px; height: 28px;
+  border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 0.75rem;
+  margin-top: 2px;
+}
+.problem-icon {
+  background: rgba(239,68,68,0.12);
+  border: 1px solid rgba(239,68,68,0.25);
+  color: #ef4444;
+}
+.benefit-icon {
+  background: rgba(16,185,129,0.1);
+  border: 1px solid rgba(16,185,129,0.25);
+  color: var(--success);
+}
+.problem-text {
+  font-size: 0.95rem;
+  line-height: 1.65;
+  color: var(--fg-muted);
+}
+.benefit-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--fg);
+  margin-bottom: 0.2rem;
+}
+.benefit-desc {
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  line-height: 1.6;
+}
+
+/* ─── Subpage: Use-case grid ─────────────────────────────────────────────── */
+.use-case-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.25rem;
+}
+@media (max-width: 640px) { .use-case-grid { grid-template-columns: 1fr; } }
+.use-case-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.5rem;
+  transition: border-color 0.2s;
+}
+.use-case-card:hover { border-color: var(--accent); }
+.use-case-num {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--accent);
+  margin-bottom: 0.6rem;
+  letter-spacing: 0.05em;
+}
+.use-case-title {
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--fg);
+  margin-bottom: 0.4rem;
+}
+.use-case-desc {
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+  line-height: 1.6;
+}
+
+/* ─── Subpage: Stat row ──────────────────────────────────────────────────── */
+.stat-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+}
+@media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } }
+.stat-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.5rem;
+  text-align: center;
+}
+.stat-value {
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--accent);
+  line-height: 1;
+  margin-bottom: 0.5rem;
+}
+.stat-label {
+  font-size: 0.8rem;
+  color: var(--fg-muted);
+  line-height: 1.4;
+}
diff --git a/scripts/strip_global_styles.py b/scripts/strip_global_styles.py
new file mode 100644
index 0000000..b69f553
--- /dev/null
+++ b/scripts/strip_global_styles.py
@@ -0,0 +1,103 @@
+#!/usr/bin/env python3
+"""
+Strip CSS rules for classes now defined globally in components.css
+from page-level <style is:global slot="head"> blocks.
+"""
+import re
+from pathlib import Path
+
+ROOT = Path(__file__).parent.parent
+SRC_PAGES = ROOT / "src" / "pages"
+
+# Class name prefixes now defined in components.css (subpage section)
+GLOBAL_PREFIXES = (
+    ".page-hero",
+    ".two-col",
+    ".section-title-sm",
+    ".section-lead",
+    ".problem-list",
+    ".problem-item",
+    ".problem-icon",
+    ".problem-text",
+    ".benefit-list",
+    ".benefit-item",
+    ".benefit-icon",
+    ".benefit-body",
+    ".benefit-title",
+    ".benefit-desc",
+    ".use-case-grid",
+    ".use-case-card",
+    ".use-case-num",
+    ".use-case-title",
+    ".use-case-desc",
+    ".stat-row",
+    ".stat-card",
+    ".stat-value",
+    ".stat-label",
+    # Already handled by Breadcrumb.astro scoped styles
+    ".breadcrumb",
+    ".breadcrumb-sep",
+    # Already in SubpageLayout padding
+    "body { padding-top: var(--nav-h)",
+)
+
+
+def strip_rule(css: str, prefix: str) -> str:
+    """Remove all CSS rules/declarations that start with `prefix`."""
+    # Match selector { ... } blocks — greedy within balanced braces
+    pattern = re.compile(
+        r'\s*' + re.escape(prefix) + r'[^{]*\{[^}]*\}',
+        re.DOTALL
+    )
+    return pattern.sub('', css)
+
+
+def strip_single_line(css: str, prefix: str) -> str:
+    """Remove single-line declarations starting with prefix (no braces)."""
+    pattern = re.compile(r'\n[ \t]*' + re.escape(prefix) + r'[^\n]*', re.DOTALL)
+    return pattern.sub('', css)
+
+
+def clean_style_block(css: str) -> str:
+    for p in GLOBAL_PREFIXES:
+        css = strip_rule(css, p)
+    # Remove orphaned @media blocks that are now empty or only contain whitespace
+    css = re.sub(r'@media[^{]+\{\s*\}', '', css)
+    return css.strip()
+
+
+def process_file(path: Path):
+    content = path.read_text(encoding="utf-8")
+
+    def replace_style(m):
+        attrs = m.group(1)
+        original = m.group(2)
+        cleaned = clean_style_block(original)
+        if cleaned == original.strip():
+            return m.group(0)  # no change
+        if not cleaned:
+            return ''  # remove empty style block
+        return f'<style{attrs}>{cleaned}</style>'
+
+    new_content = re.sub(
+        r'<style([^>]*)>(.*?)</style>',
+        replace_style,
+        content,
+        flags=re.DOTALL
+    )
+
+    if new_content != content:
+        path.write_text(new_content, encoding="utf-8")
+        print(f"  ✓ {path.relative_to(ROOT)}")
+
+
+def main():
+    pages = list(SRC_PAGES.rglob("*.astro"))
+    print(f"Scanning {len(pages)} pages...\n")
+    for p in sorted(pages):
+        process_file(p)
+    print("\nDone.")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 115e3a2..6cadb1f 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -9,14 +9,7 @@ const _body = "<div class=\"container\">\n  <div class=\"about-hero\">\n    <spa
   canonical={"https://traverse-framework.com/about.html"}
   crumbs={[{ label: "Home", href: "/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    /* Hero */
-    .about-hero {
-      padding: 5rem 0 4rem;
-      max-width: 720px;
-    }
-    .about-hero .t-h1 {
+  <style is:global slot="head">.about-hero .t-h1 {
       margin: 0.75rem 0 1.5rem;
       line-height: 1.15;
     }
diff --git a/src/pages/blog/ai-agents-need-contracts.astro b/src/pages/blog/ai-agents-need-contracts.astro
index 822bdfa..4c86e81 100644
--- a/src/pages/blog/ai-agents-need-contracts.astro
+++ b/src/pages/blog/ai-agents-need-contracts.astro
@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/ai-agents-need-contracts.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }
diff --git a/src/pages/blog/logic-duplication.astro b/src/pages/blog/logic-duplication.astro
index 963cc85..0417f64 100644
--- a/src/pages/blog/logic-duplication.astro
+++ b/src/pages/blog/logic-duplication.astro
@@ -9,13 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/logic-duplication.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .post-hero {
-      padding: 4rem 0 3rem;
-      border-bottom: 1px solid var(--border);
-    }
-    .post-hero-meta {
+  <style is:global slot="head">.post-hero-meta {
       display: flex;
       align-items: center;
       gap: 0.75rem;
diff --git a/src/pages/blog/runtime-assumptions.astro b/src/pages/blog/runtime-assumptions.astro
index af9ce8f..5686acd 100644
--- a/src/pages/blog/runtime-assumptions.astro
+++ b/src/pages/blog/runtime-assumptions.astro
@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/runtime-assumptions.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }
diff --git a/src/pages/blog/uma-explained.astro b/src/pages/blog/uma-explained.astro
index 093c136..68e1438 100644
--- a/src/pages/blog/uma-explained.astro
+++ b/src/pages/blog/uma-explained.astro
@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/uma-explained.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }
diff --git a/src/pages/blog/wasm-business-logic.astro b/src/pages/blog/wasm-business-logic.astro
index aad6de6..749bac4 100644
--- a/src/pages/blog/wasm-business-logic.astro
+++ b/src/pages/blog/wasm-business-logic.astro
@@ -9,9 +9,7 @@ const _body = "<section class=\"post-hero\">\n  <div class=\"container\">\n    <
   canonical={"https://traverse-framework.com/blog/wasm-business-logic.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .post-hero { padding: 4rem 0 3rem; border-bottom: 1px solid var(--border); }
-    .post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
+  <style is:global slot="head">.post-hero-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
     .post-date { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--fg-muted); }
     .post-hero h1 { max-width: 760px; margin-bottom: 1.5rem; }
     .post-byline { display: flex; align-items: center; gap: 1.5rem; font-family: 'Inter', sans-serif; font-size: 0.875rem; color: var(--fg-muted); flex-wrap: wrap; }
diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro
index 3d47c26..8ab5aee 100644
--- a/src/pages/changelog.astro
+++ b/src/pages/changelog.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"changelog-wrap\">\n  <div class=\"section-label\" st
   canonical={"https://traverse-framework.com/changelog.html"}
   crumbs={[{ label: "Home", href: "/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .changelog-wrap { max-width: 760px; margin: 0 auto; padding: 4rem 2rem 6rem; }
-    @media (max-width: 768px) { .changelog-wrap { padding: 2.5rem 1.25rem 4rem; } }
+  <style is:global slot="head">@media (max-width: 768px) { .changelog-wrap { padding: 2.5rem 1.25rem 4rem; } }
 
     .release {
       display: grid;
diff --git a/src/pages/compare/vs-function-calling.astro b/src/pages/compare/vs-function-calling.astro
index 374cf17..0c38537 100644
--- a/src/pages/compare/vs-function-calling.astro
+++ b/src/pages/compare/vs-function-calling.astro
@@ -9,31 +9,13 @@ const _body = "<section class=\"compare-hero\">\n  <div class=\"container\">\n
   canonical={"https://traverse-framework.com/compare/vs-function-calling.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Compare", href: "/compare/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .compare-hero {
-      padding: 4.5rem 0 3.5rem;
-      position: relative;
-    }
-    .compare-hero::before {
+  <style is:global slot="head">.compare-hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 50% 60% at 20% 50%, var(--accent-dim) 0%, transparent 70%);
       pointer-events: none;
     }
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.82rem;
-      color: var(--fg-muted);
-      margin-bottom: 1.5rem;
-      font-family: 'JetBrains Mono', monospace;
-    }
-    .breadcrumb a { color: var(--fg-muted); text-decoration: none; }
-    .breadcrumb a:hover { color: var(--accent); }
-    .breadcrumb span { color: var(--accent); }
     .compare-hero h1 {
       font-size: clamp(2rem, 4.5vw, 3.2rem);
       font-weight: 700;
@@ -90,43 +72,6 @@ const _body = "<section class=\"compare-hero\">\n  <div class=\"container\">\n
       max-width: 720px;
     }
 
-    .problem-list {
-      list-style: none;
-      padding: 0;
-      margin: 1.5rem 0;
-      max-width: 700px;
-    }
-    .problem-list li {
-      display: flex;
-      gap: 0.85rem;
-      align-items: flex-start;
-      padding: 1rem 0;
-      border-bottom: 1px solid var(--border);
-    }
-    .problem-list li:last-child { border-bottom: none; }
-    .problem-list .marker {
-      color: var(--fg-muted);
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.78rem;
-      margin-top: 0.2rem;
-      flex-shrink: 0;
-      background: var(--bg-elevated);
-      border: 1px solid var(--border);
-      padding: 0.2rem 0.5rem;
-      border-radius: 4px;
-    }
-    .problem-list .item-body strong {
-      display: block;
-      color: var(--fg);
-      font-size: 0.92rem;
-      margin-bottom: 0.3rem;
-    }
-    .problem-list .item-body span {
-      color: var(--fg-muted);
-      font-size: 0.88rem;
-      line-height: 1.65;
-    }
-
     .add-list {
       list-style: none;
       padding: 0;
diff --git a/src/pages/compare/vs-microservices.astro b/src/pages/compare/vs-microservices.astro
index 3ef5018..41cf729 100644
--- a/src/pages/compare/vs-microservices.astro
+++ b/src/pages/compare/vs-microservices.astro
@@ -9,31 +9,13 @@ const _body = "<section class=\"compare-hero\">\n  <div class=\"container\">\n
   canonical={"https://traverse-framework.com/compare/vs-microservices.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Compare", href: "/compare/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .compare-hero {
-      padding: 4.5rem 0 3.5rem;
-      position: relative;
-    }
-    .compare-hero::before {
+  <style is:global slot="head">.compare-hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 50% 60% at 20% 50%, var(--accent-dim) 0%, transparent 70%);
       pointer-events: none;
     }
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.82rem;
-      color: var(--fg-muted);
-      margin-bottom: 1.5rem;
-      font-family: 'JetBrains Mono', monospace;
-    }
-    .breadcrumb a { color: var(--fg-muted); text-decoration: none; }
-    .breadcrumb a:hover { color: var(--accent); }
-    .breadcrumb span { color: var(--accent); }
     .compare-hero h1 {
       font-size: clamp(2rem, 4.5vw, 3.2rem);
       font-weight: 700;
diff --git a/src/pages/compare/vs-serverless.astro b/src/pages/compare/vs-serverless.astro
index 9149d04..8ca1f74 100644
--- a/src/pages/compare/vs-serverless.astro
+++ b/src/pages/compare/vs-serverless.astro
@@ -9,31 +9,13 @@ const _body = "<section class=\"compare-hero\">\n  <div class=\"container\">\n
   canonical={"https://traverse-framework.com/compare/vs-serverless.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Compare", href: "/compare/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .compare-hero {
-      padding: 4.5rem 0 3.5rem;
-      position: relative;
-    }
-    .compare-hero::before {
+  <style is:global slot="head">.compare-hero::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 50% 60% at 20% 50%, var(--accent-dim) 0%, transparent 70%);
       pointer-events: none;
     }
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.82rem;
-      color: var(--fg-muted);
-      margin-bottom: 1.5rem;
-      font-family: 'JetBrains Mono', monospace;
-    }
-    .breadcrumb a { color: var(--fg-muted); text-decoration: none; }
-    .breadcrumb a:hover { color: var(--accent); }
-    .breadcrumb span { color: var(--accent); }
     .compare-hero h1 {
       font-size: clamp(2rem, 4.5vw, 3.2rem);
       font-weight: 700;
@@ -165,31 +147,6 @@ const _body = "<section class=\"compare-hero\">\n  <div class=\"container\">\n
     }
     .highlight-callout strong { color: var(--fg); }
 
-    .problem-list {
-      list-style: none;
-      padding: 0;
-      margin: 1.5rem 0;
-      max-width: 680px;
-    }
-    .problem-list li {
-      display: flex;
-      gap: 0.75rem;
-      align-items: flex-start;
-      padding: 0.75rem 0;
-      border-bottom: 1px solid var(--border);
-      font-size: 0.92rem;
-      color: var(--fg-muted);
-      line-height: 1.65;
-    }
-    .problem-list li:last-child { border-bottom: none; }
-    .problem-list .marker {
-      color: var(--accent);
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.8rem;
-      margin-top: 0.2rem;
-      flex-shrink: 0;
-    }
-
     .compare-nav {
       display: flex;
       gap: 1rem;
diff --git a/src/pages/docs/architecture.astro b/src/pages/docs/architecture.astro
index a8445d2..03d303a 100644
--- a/src/pages/docs/architecture.astro
+++ b/src/pages/docs/architecture.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <aside class=\"docs-sidebar\">\n
   canonical={"https://traverse-framework.com/docs/architecture.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.4em; color: var(--accent); }
-    .crate-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
+  <style is:global slot="head">.crate-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
     .crate-table th { text-align: left; padding: 0.6rem 1rem; font-size: 0.72rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); border-bottom: 1px solid var(--border); }
     .crate-table td { padding: 0.8rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--border); vertical-align: top; }
     .crate-table tr:last-child td { border-bottom: none; }
diff --git a/src/pages/docs/cli-reference.astro b/src/pages/docs/cli-reference.astro
index fc355b4..67635a9 100644
--- a/src/pages/docs/cli-reference.astro
+++ b/src/pages/docs/cli-reference.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <aside class=\"docs-sidebar\">\n
   canonical={"https://traverse-framework.com/docs/cli-reference.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.4em; color: var(--accent); }
-    .cmd-block { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
+  <style is:global slot="head">.cmd-block { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
     .cmd-block:last-child { border-bottom: none; }
     .cmd-sig { font-family: var(--font-mono); font-size: 1rem; color: var(--fg); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.75rem 1.25rem; margin-bottom: 1.25rem; display: inline-block; }
     .cmd-sig .cmd-name { color: var(--accent); }
diff --git a/src/pages/docs/concepts.astro b/src/pages/docs/concepts.astro
index 9078420..1fb24cd 100644
--- a/src/pages/docs/concepts.astro
+++ b/src/pages/docs/concepts.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <aside class=\"docs-sidebar\">\n
   canonical={"https://traverse-framework.com/docs/concepts.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.4em; color: var(--accent); }
-    .concept-section { padding: 3rem 0; border-bottom: 1px solid var(--border); }
+  <style is:global slot="head">.concept-section { padding: 3rem 0; border-bottom: 1px solid var(--border); }
     .concept-section:last-child { border-bottom: none; }
     .concept-h { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.75rem; }
     .concept-body { color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.75; margin-bottom: 1.25rem; max-width: 62ch; }
diff --git a/src/pages/docs/guides/mcp-setup.astro b/src/pages/docs/guides/mcp-setup.astro
index 548ec40..1f5fa3e 100644
--- a/src/pages/docs/guides/mcp-setup.astro
+++ b/src/pages/docs/guides/mcp-setup.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <aside class=\"docs-sidebar\">\n
   canonical={"https://traverse-framework.com/docs/guides/mcp-setup.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.4em; color: var(--accent); }
-    .step-marker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
+  <style is:global slot="head">.step-marker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
     .step-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim); border: 1px solid rgba(232,81,10,0.3); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); flex-shrink: 0; }
     .step-label { font-size: 0.72rem; color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
     .doc-step { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
diff --git a/src/pages/docs/guides/react-integration.astro b/src/pages/docs/guides/react-integration.astro
index caef680..3a1fda4 100644
--- a/src/pages/docs/guides/react-integration.astro
+++ b/src/pages/docs/guides/react-integration.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <aside class=\"docs-sidebar\">\n
   canonical={"https://traverse-framework.com/docs/guides/react-integration.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.4em; color: var(--accent); }
-    .step-marker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
+  <style is:global slot="head">.step-marker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
     .step-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-dim); border: 1px solid rgba(232,81,10,0.3); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); flex-shrink: 0; }
     .step-label { font-size: 0.72rem; color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
     .doc-step { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
diff --git a/src/pages/docs/quickstart.astro b/src/pages/docs/quickstart.astro
index 5b8cb3d..dec40cf 100644
--- a/src/pages/docs/quickstart.astro
+++ b/src/pages/docs/quickstart.astro
@@ -9,14 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <!-- Sidebar -->\n  <aside class=\
   canonical={"https://traverse-framework.com/docs/quickstart.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .step-marker {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      margin-bottom: 1rem;
-    }
-    .step-circle {
+  <style is:global slot="head">.step-circle {
       width: 28px; height: 28px;
       border-radius: 50%;
       background: var(--accent-dim);
diff --git a/src/pages/docs/troubleshooting.astro b/src/pages/docs/troubleshooting.astro
index 796c7eb..707d8fc 100644
--- a/src/pages/docs/troubleshooting.astro
+++ b/src/pages/docs/troubleshooting.astro
@@ -9,9 +9,7 @@ const _body = "<div class=\"docs-layout\">\n  <aside class=\"docs-sidebar\">\n
   canonical={"https://traverse-framework.com/docs/troubleshooting.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.1em 0.4em; color: var(--accent); }
-    .problem-block { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
+  <style is:global slot="head">.problem-block { padding: 2.5rem 0; border-bottom: 1px solid var(--border); }
     .problem-block:last-child { border-bottom: none; }
     .problem-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
     .problem-tag { font-size: 0.7rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2rem 0.5rem; border-radius: 4px; }
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index a1d70e3..3642b55 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -9,13 +9,7 @@ const _body = "<div class=\"faq-hero\">\n  <div class=\"container\">\n    <span
   canonical={"https://traverse-framework.com/faq.html"}
   crumbs={[{ label: "Home", href: "/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .faq-hero {
-      padding: 5rem 0 3rem;
-      text-align: center;
-    }
-    .faq-hero .t-h1 {
+  <style is:global slot="head">.faq-hero .t-h1 {
       margin: 0.75rem 0 1rem;
     }
     .faq-hero .subtitle {
diff --git a/src/pages/roadmap.astro b/src/pages/roadmap.astro
index 539d05e..407b947 100644
--- a/src/pages/roadmap.astro
+++ b/src/pages/roadmap.astro
@@ -9,14 +9,7 @@ const _body = "<div class=\"container\">\n\n  <div class=\"roadmap-hero\">\n
   canonical={"https://traverse-framework.com/roadmap.html"}
   crumbs={[{ label: "Home", href: "/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    /* Hero */
-    .roadmap-hero {
-      padding: 5rem 0 3.5rem;
-      max-width: 640px;
-    }
-    .roadmap-hero .t-h1 { margin: 0.75rem 0 1rem; }
+  <style is:global slot="head">.roadmap-hero .t-h1 { margin: 0.75rem 0 1rem; }
     .roadmap-hero .lead {
       color: var(--fg-muted);
       font-size: 1.05rem;
diff --git a/src/pages/solutions/ai-companies.astro b/src/pages/solutions/ai-companies.astro
index b18e5fb..d955872 100644
--- a/src/pages/solutions/ai-companies.astro
+++ b/src/pages/solutions/ai-companies.astro
@@ -9,73 +9,7 @@ const _body = "<main>\n  <section class=\"page-hero\">\n    <div class=\"contain
   canonical={"https://traverse-framework.com/solutions/ai-companies.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Solutions", href: "/solutions/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .page-hero {
-      padding: 5rem 0 4rem;
-      border-bottom: 1px solid var(--border);
-    }
-    .page-hero-inner {
-      max-width: 780px;
-    }
-    .page-hero h1 {
-      margin: 1rem 0 1.5rem;
-    }
-    .page-hero-sub {
-      font-size: 1.1rem;
-      line-height: 1.75;
-      color: var(--fg-muted);
-      max-width: 640px;
-    }
-    .page-hero-badges {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      margin-top: 2rem;
-    }
-
-    .two-col {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 4rem;
-      align-items: start;
-    }
-    @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 2.5rem; } }
-
-    .problem-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-    .problem-item {
-      display: flex;
-      gap: 1rem;
-      align-items: flex-start;
-    }
-    .problem-icon {
-      flex-shrink: 0;
-      width: 28px;
-      height: 28px;
-      border-radius: 6px;
-      background: rgba(239,68,68,0.12);
-      border: 1px solid rgba(239,68,68,0.25);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.75rem;
-      color: #ef4444;
-      margin-top: 2px;
-    }
-    .problem-text {
-      font-size: 0.95rem;
-      line-height: 1.65;
-      color: var(--fg-muted);
-    }
-
-    .feature-grid {
+  <style is:global slot="head">.feature-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1.25rem;
@@ -157,32 +91,6 @@ const _body = "<main>\n  <section class=\"page-hero\">\n    <div class=\"contain
       color: var(--fg-muted);
       margin-bottom: 1rem;
       line-height: 1.6;
-    }
-
-    .section-title-sm {
-      font-family: 'Space Grotesk', sans-serif;
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 0.75rem;
-      line-height: 1.3;
-    }
-    .section-lead {
-      color: var(--fg-muted);
-      font-size: 0.95rem;
-      line-height: 1.7;
-      margin-bottom: 2rem;
-    }
-
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.8rem;
-      color: var(--fg-muted);
-      margin-bottom: 1.25rem;
-    }
-    .breadcrumb a { color: var(--fg-muted); text-decoration: none; }
-    .breadcrumb a:hover { color: var(--accent); }
-    .breadcrumb-sep { opacity: 0.4; }</style>
+    }</style>
   <Fragment set:html={_body} />
 </SubpageLayout>
diff --git a/src/pages/solutions/ecommerce.astro b/src/pages/solutions/ecommerce.astro
index 41abdd0..e60eb2d 100644
--- a/src/pages/solutions/ecommerce.astro
+++ b/src/pages/solutions/ecommerce.astro
@@ -9,14 +9,7 @@ const _body = "<section class=\"sol-hero\">\n  <div class=\"container\">\n    <d
   canonical={"https://traverse-framework.com/solutions/ecommerce.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Solutions", href: "/solutions/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .sol-hero {
-      padding: 5rem 0 4.5rem;
-      position: relative;
-      overflow: hidden;
-    }
-    .sol-hero::before {
+  <style is:global slot="head">.sol-hero::before {
       content: '';
       position: absolute;
       inset: 0;
diff --git a/src/pages/solutions/enterprise.astro b/src/pages/solutions/enterprise.astro
index 5620a52..1163217 100644
--- a/src/pages/solutions/enterprise.astro
+++ b/src/pages/solutions/enterprise.astro
@@ -9,14 +9,7 @@ const _body = "<section class=\"sol-hero\">\n  <div class=\"container\">\n    <d
   canonical={"https://traverse-framework.com/solutions/enterprise.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Solutions", href: "/solutions/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .sol-hero {
-      padding: 5rem 0 4rem;
-      position: relative;
-      overflow: hidden;
-    }
-    .sol-hero::before {
+  <style is:global slot="head">.sol-hero::before {
       content: '';
       position: absolute;
       inset: 0;
@@ -63,19 +56,6 @@ const _body = "<section class=\"sol-hero\">\n  <div class=\"container\">\n    <d
     .stat-item:nth-child(2) { border-radius: 0 8px 0 0; }
     .stat-item:nth-child(3) { border-radius: 0 0 0 8px; }
     .stat-item:nth-child(4) { border-radius: 0 0 8px 0; }
-    .stat-value {
-      font-size: 1.6rem;
-      font-weight: 700;
-      font-family: 'Space Grotesk', sans-serif;
-      color: var(--accent);
-      line-height: 1;
-      margin-bottom: 0.35rem;
-    }
-    .stat-label {
-      font-size: 0.82rem;
-      color: var(--fg-muted);
-      line-height: 1.4;
-    }
 
     .problems-section {
       padding: 4rem 0;
diff --git a/src/pages/solutions/fintech.astro b/src/pages/solutions/fintech.astro
index 11c0fc8..881d28d 100644
--- a/src/pages/solutions/fintech.astro
+++ b/src/pages/solutions/fintech.astro
@@ -9,195 +9,6 @@ const _body = "<main>\n  <section class=\"page-hero\">\n    <div class=\"contain
   canonical={"https://traverse-framework.com/solutions/fintech.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Solutions", href: "/solutions/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-
-    .page-hero {
-      padding: 5rem 0 4rem;
-      border-bottom: 1px solid var(--border);
-    }
-    .page-hero-inner { max-width: 780px; }
-    .page-hero h1 { margin: 1rem 0 1.5rem; }
-    .page-hero-sub {
-      font-size: 1.1rem;
-      line-height: 1.75;
-      color: var(--fg-muted);
-      max-width: 640px;
-    }
-    .page-hero-badges {
-      display: flex;
-      gap: 0.5rem;
-      flex-wrap: wrap;
-      margin-top: 2rem;
-    }
-
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-size: 0.8rem;
-      color: var(--fg-muted);
-      margin-bottom: 1.25rem;
-    }
-    .breadcrumb a { color: var(--fg-muted); text-decoration: none; }
-    .breadcrumb a:hover { color: var(--accent); }
-    .breadcrumb-sep { opacity: 0.4; }
-
-    .two-col {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 4rem;
-      align-items: start;
-    }
-    @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 2.5rem; } }
-
-    .section-title-sm {
-      font-family: 'Space Grotesk', sans-serif;
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin-bottom: 0.75rem;
-      line-height: 1.3;
-    }
-    .section-lead {
-      color: var(--fg-muted);
-      font-size: 0.95rem;
-      line-height: 1.7;
-      margin-bottom: 2rem;
-    }
-
-    .problem-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 1.25rem;
-    }
-    .problem-item {
-      display: flex;
-      gap: 1rem;
-      align-items: flex-start;
-    }
-    .problem-icon {
-      flex-shrink: 0;
-      width: 28px;
-      height: 28px;
-      border-radius: 6px;
-      background: rgba(239,68,68,0.12);
-      border: 1px solid rgba(239,68,68,0.25);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.75rem;
-      color: #ef4444;
-      margin-top: 2px;
-    }
-    .problem-text {
-      font-size: 0.95rem;
-      line-height: 1.65;
-      color: var(--fg-muted);
-    }
-
-    .benefit-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-    .benefit-item {
-      display: flex;
-      gap: 1rem;
-      align-items: flex-start;
-    }
-    .benefit-icon {
-      flex-shrink: 0;
-      width: 28px;
-      height: 28px;
-      border-radius: 6px;
-      background: rgba(16,185,129,0.1);
-      border: 1px solid rgba(16,185,129,0.25);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 0.75rem;
-      color: var(--success);
-      margin-top: 2px;
-    }
-    .benefit-body {}
-    .benefit-title {
-      font-weight: 600;
-      font-size: 0.9rem;
-      color: var(--fg);
-      margin-bottom: 0.2rem;
-    }
-    .benefit-desc {
-      font-size: 0.85rem;
-      color: var(--fg-muted);
-      line-height: 1.6;
-    }
-
-    .use-case-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 1.25rem;
-    }
-    @media (max-width: 640px) { .use-case-grid { grid-template-columns: 1fr; } }
-
-    .use-case-card {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 1.5rem;
-      transition: border-color 0.2s;
-    }
-    .use-case-card:hover { border-color: var(--accent); }
-    .use-case-num {
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.7rem;
-      color: var(--accent);
-      margin-bottom: 0.6rem;
-      letter-spacing: 0.05em;
-    }
-    .use-case-title {
-      font-family: 'Space Grotesk', sans-serif;
-      font-weight: 600;
-      font-size: 0.95rem;
-      color: var(--fg);
-      margin-bottom: 0.4rem;
-    }
-    .use-case-desc {
-      font-size: 0.85rem;
-      color: var(--fg-muted);
-      line-height: 1.6;
-    }
-
-    .stat-row {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1.5rem;
-      margin-bottom: 3rem;
-    }
-    @media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } }
-    .stat-card {
-      background: var(--bg-card);
-      border: 1px solid var(--border);
-      border-radius: 10px;
-      padding: 1.5rem;
-      text-align: center;
-    }
-    .stat-value {
-      font-family: 'Space Grotesk', sans-serif;
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--accent);
-      line-height: 1;
-      margin-bottom: 0.5rem;
-    }
-    .stat-label {
-      font-size: 0.8rem;
-      color: var(--fg-muted);
-      line-height: 1.4;
-    }</style>
+  
   <Fragment set:html={_body} />
 </SubpageLayout>
diff --git a/src/pages/solutions/saas.astro b/src/pages/solutions/saas.astro
index 374c52d..861f8fd 100644
--- a/src/pages/solutions/saas.astro
+++ b/src/pages/solutions/saas.astro
@@ -9,9 +9,7 @@ const _body = "<section class=\"hero\">\n  <div class=\"container\">\n    <div c
   canonical={"https://traverse-framework.com/solutions/saas.html"}
   crumbs={[{ label: "Home", href: "/" }, { label: "Solutions", href: "/solutions/" }]}
 >
-  <style is:global slot="head">body { padding-top: var(--nav-h); }
-    .hero { padding: 6rem 0 4rem; }
-    .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
+  <style is:global slot="head">.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
     .problem-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; }
     .problem-card .problem-title { font-size: 0.9rem; font-weight: 600; color: var(--fg); margin-bottom: 0.5rem; }
     .problem-card p { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.6; margin: 0; }
@@ -19,12 +17,6 @@ const _body = "<section class=\"hero\">\n  <div class=\"container\">\n    <div c
     .sol-item { display: flex; gap: 1rem; align-items: flex-start; }
     .sol-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
     .sol-item h3 { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.25rem; }
-    .sol-item p { font-size: 0.85rem; color: var(--fg-muted); margin: 0; line-height: 1.5; }
-    .use-case-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
-    .use-case-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: border-color 0.2s; }
-    .use-case-card:hover { border-color: var(--accent); }
-    .use-case-num { font-size: 0.75rem; font-weight: 700; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 0.5rem; }
-    .use-case-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem; }
-    .use-case-card p { font-size: 0.85rem; color: var(--fg-muted); margin: 0; line-height: 1.5; }</style>
+    .sol-item p { font-size: 0.85rem; color: var(--fg-muted); margin: 0; line-height: 1.5; }</style>
   <Fragment set:html={_body} />
 </SubpageLayout>