diff --git a/.publish/ai/package.json b/.publish/ai/package.json
index 9a6f0303..452b8325 100644
--- a/.publish/ai/package.json
+++ b/.publish/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
   "license": "MIT",
diff --git a/.publish/authz/package.json b/.publish/authz/package.json
index 6b40e911..d66a5a9c 100644
--- a/.publish/authz/package.json
+++ b/.publish/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/authz — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/cli/package.json b/.publish/cli/package.json
index d23754ed..b80a7fed 100644
--- a/.publish/cli/package.json
+++ b/.publish/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/cli — part of the WrNexus framework.",
   "license": "MIT",
@@ -28,16 +28,16 @@
     "wrnexus": "./dist/index.js"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78",
-    "@wrnexus/router": "^0.2.78",
-    "@wrnexus/csr": "^0.2.78",
-    "@wrnexus/compiler": "^0.2.78",
-    "@wrnexus/styles": "^0.2.78",
-    "@wrnexus/dev-server": "^0.2.78",
-    "@wrnexus/ui": "^0.2.78",
-    "@wrnexus/validation": "^0.2.78",
-    "@wrnexus/i18n": "^0.2.78",
-    "@wrnexus/db": "^0.2.78"
+    "@wrnexus/core": "^0.2.79",
+    "@wrnexus/router": "^0.2.79",
+    "@wrnexus/csr": "^0.2.79",
+    "@wrnexus/compiler": "^0.2.79",
+    "@wrnexus/styles": "^0.2.79",
+    "@wrnexus/dev-server": "^0.2.79",
+    "@wrnexus/ui": "^0.2.79",
+    "@wrnexus/validation": "^0.2.79",
+    "@wrnexus/i18n": "^0.2.79",
+    "@wrnexus/db": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json
index 8e384727..b00f5d5a 100644
--- a/.publish/compiler/package.json
+++ b/.publish/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/compiler — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/core/package.json b/.publish/core/package.json
index a58c03d5..542812ec 100644
--- a/.publish/core/package.json
+++ b/.publish/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/core — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/csr/package.json b/.publish/csr/package.json
index 2372e414..a047a28b 100644
--- a/.publish/csr/package.json
+++ b/.publish/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/csr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/db/package.json b/.publish/db/package.json
index bd049bd1..3445085b 100644
--- a/.publish/db/package.json
+++ b/.publish/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/db — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/dev-server/package.json b/.publish/dev-server/package.json
index 64995dd3..b9be24d3 100644
--- a/.publish/dev-server/package.json
+++ b/.publish/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/dev-server — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,19 +25,19 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78",
-    "@wrnexus/dev-toolbar": "^0.2.78",
-    "@wrnexus/router": "^0.2.78",
-    "@wrnexus/ssr": "^0.2.78",
-    "@wrnexus/csr": "^0.2.78",
-    "@wrnexus/compiler": "^0.2.78",
-    "@wrnexus/styles": "^0.2.78",
-    "@wrnexus/ui": "^0.2.78",
-    "@wrnexus/validation": "^0.2.78",
-    "@wrnexus/i18n": "^0.2.78",
-    "@wrnexus/db": "^0.2.78",
-    "@wrnexus/pubsub": "^0.2.78",
-    "@wrnexus/uploader": "^0.2.78"
+    "@wrnexus/core": "^0.2.79",
+    "@wrnexus/dev-toolbar": "^0.2.79",
+    "@wrnexus/router": "^0.2.79",
+    "@wrnexus/ssr": "^0.2.79",
+    "@wrnexus/csr": "^0.2.79",
+    "@wrnexus/compiler": "^0.2.79",
+    "@wrnexus/styles": "^0.2.79",
+    "@wrnexus/ui": "^0.2.79",
+    "@wrnexus/validation": "^0.2.79",
+    "@wrnexus/i18n": "^0.2.79",
+    "@wrnexus/db": "^0.2.79",
+    "@wrnexus/pubsub": "^0.2.79",
+    "@wrnexus/uploader": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/dev-toolbar/package.json b/.publish/dev-toolbar/package.json
index 5325f55f..35edc0ca 100644
--- a/.publish/dev-toolbar/package.json
+++ b/.publish/dev-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-toolbar",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/dev-toolbar — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json
index 142d41bd..3476a831 100644
--- a/.publish/encryption/package.json
+++ b/.publish/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/encryption — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/helpers/package.json b/.publish/helpers/package.json
index 8daa63ee..6e613285 100644
--- a/.publish/helpers/package.json
+++ b/.publish/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json
index 5db6cc74..8e66f01a 100644
--- a/.publish/i18n/package.json
+++ b/.publish/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/i18n — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json
index a9ea4ac8..59eaf94a 100644
--- a/.publish/jwt/package.json
+++ b/.publish/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/jwt — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/mobile/package.json b/.publish/mobile/package.json
index 7b8d36ac..4eaa93dd 100644
--- a/.publish/mobile/package.json
+++ b/.publish/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/mobile — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/native": "^0.2.78"
+    "@wrnexus/native": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/native/package.json b/.publish/native/package.json
index 0be51423..5cc21b28 100644
--- a/.publish/native/package.json
+++ b/.publish/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/native — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/oauth/package.json b/.publish/oauth/package.json
index 4e1501e9..9f5e423e 100644
--- a/.publish/oauth/package.json
+++ b/.publish/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/oauth — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json
index 41a0e2a7..7e91439c 100644
--- a/.publish/pubsub/package.json
+++ b/.publish/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/pubsub — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/queue/package.json b/.publish/queue/package.json
index 3833b202..0968756f 100644
--- a/.publish/queue/package.json
+++ b/.publish/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/queue — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/reactive/package.json b/.publish/reactive/package.json
index 79585d07..afa62145 100644
--- a/.publish/reactive/package.json
+++ b/.publish/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/reactive — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/router/package.json b/.publish/router/package.json
index b7801f02..863348fe 100644
--- a/.publish/router/package.json
+++ b/.publish/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/router — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,8 +21,8 @@
     }
   },
   "dependencies": {
-    "@wrnexus/compiler": "^0.2.78",
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/compiler": "^0.2.79",
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json
index 6b137bb7..78e8c17f 100644
--- a/.publish/ssr/package.json
+++ b/.publish/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/ssr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/styles/package.json b/.publish/styles/package.json
index cd26e784..d612274c 100644
--- a/.publish/styles/package.json
+++ b/.publish/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/styles — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/uploader": "^0.2.78"
+    "@wrnexus/uploader": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/test/package.json b/.publish/test/package.json
index 0e2ff6cf..79b64e20 100644
--- a/.publish/test/package.json
+++ b/.publish/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/test — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/tracking/package.json b/.publish/tracking/package.json
index fb9a440f..c12e07bf 100644
--- a/.publish/tracking/package.json
+++ b/.publish/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/tracking — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/.publish/ui/components/AnalyticsDashboardPreview.wrn b/.publish/ui/components/AnalyticsDashboardPreview.wrn
index ff6ea26b..3bdef32a 100644
--- a/.publish/ui/components/AnalyticsDashboardPreview.wrn
+++ b/.publish/ui/components/AnalyticsDashboardPreview.wrn
@@ -11,37 +11,57 @@ component AnalyticsDashboardPreview {
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}">
-      <div class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[1.25fr_0.75fr] lg:items-center lg:p-8">
+    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
+      <div
+        class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
+      >
         <div>
           {#if image}
-            <img src="{image}" alt="{alt}" class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover" />
+          <img
+            src="{image}"
+            alt="{alt}"
+            class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
+          />
           {:else}
-            <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] p-4 sm:p-5" role="img" aria-label="Delivery trend rising over seven days">
-              <div class="flex items-center justify-between gap-4 text-sm">
-                <strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
-                <span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
-              </div>
-              <svg class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]" viewBox="0 0 700 250" aria-hidden="true">
-                <defs>
-                  <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
-                    <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
-                  </linearGradient>
-                </defs>
-                <g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
-                <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
-                <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
-              </svg>
-              <div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-text-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
+          <div
+            class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
+            role="img"
+            aria-label="Delivery trend rising over seven days"
+          >
+            <div class="flex items-center justify-between gap-4 text-sm">
+              <strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
+              <span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
             </div>
+            <svg
+              class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
+              viewBox="0 0 700 250"
+              aria-hidden="true"
+            >
+              <defs>
+                <linearGradient
+                  id="wire-analytics-area"
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
+                  <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
+                </linearGradient>
+              </defs>
+              <g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
+              <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
+              <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
+            </svg>
+            <div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
+          </div>
           {/if}
         </div>
 
         <div>
           {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
           {#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
-          {#if description}<p class="mt-4 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+          {#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
           <div class="mt-5"><slot /></div>
           {#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
         </div>
diff --git a/.publish/ui/components/ChannelCard.wrn b/.publish/ui/components/ChannelCard.wrn
index be2e8d9e..32aab3a0 100644
--- a/.publish/ui/components/ChannelCard.wrn
+++ b/.publish/ui/components/ChannelCard.wrn
@@ -8,21 +8,27 @@ component ChannelCard {
   }
 
   view {
-    <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
+    <article
+      class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}"
+    >
       <div class="flex min-h-12 items-start justify-between gap-4">
         {#if icon}
-          <span class="inline-grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-xl text-[var(--wire-color-primary,#059669)] {icon}" aria-hidden="true"></span>
+        <span class="inline-grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-xl text-[var(--wire-color-primary,#059669)] {icon}" aria-hidden="true"></span>
         {/if}
         <div class="flex min-w-0 justify-end"><slot /></div>
       </div>
 
       {#if title}<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
 
       {#if href}
-        <a href="{href}" class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]" aria-label="Explore {title}">
-          <span>Explore {title}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
-        </a>
+      <a
+        href="{href}"
+        class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]"
+        aria-label="Explore {title}"
+      >
+        <span>Explore {title}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
+      </a>
       {/if}
     </article>
   }
diff --git a/.publish/ui/components/ChannelFlow.wrn b/.publish/ui/components/ChannelFlow.wrn
index 4443acb4..97cd8ccf 100644
--- a/.publish/ui/components/ChannelFlow.wrn
+++ b/.publish/ui/components/ChannelFlow.wrn
@@ -4,22 +4,32 @@ component ChannelFlow {
   }
 
   view {
-    <div class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}" role="img" aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks">
-      <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
+    <div
+      class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}"
+      role="img"
+      aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks"
+    >
+      <div
+        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
+      >
         <span class="icon-[lucide--webhook] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
         <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Customer event</strong>
-        <small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">order.shipped</small>
+        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">order.shipped</small>
       </div>
       <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
 
-      <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
+      <div
+        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
+      >
         <span class="icon-[lucide--shield-check] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
         <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Profile + consent</strong>
-        <small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Eligibility checked</small>
+        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Eligibility checked</small>
       </div>
       <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
 
-      <div class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3">
+      <div
+        class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3"
+      >
         <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">WhatsApp</span>
         <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">SMS</span>
         <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Email</span>
@@ -27,10 +37,12 @@ component ChannelFlow {
       </div>
       <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
 
-      <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
+      <div
+        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
+      >
         <span class="icon-[lucide--chart-no-axes-combined] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
         <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Delivery + analytics</strong>
-        <small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Webhook emitted</small>
+        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Webhook emitted</small>
       </div>
     </div>
   }
diff --git a/.publish/ui/components/CodeBlock.wrn b/.publish/ui/components/CodeBlock.wrn
index 37664737..66321440 100644
--- a/.publish/ui/components/CodeBlock.wrn
+++ b/.publish/ui/components/CodeBlock.wrn
@@ -1,11 +1,11 @@
 component CodeBlock {
-  props {
-    language = "text"
-    title = ""
-    code = ""
-    copyable = true
-    class = ""
-  }
+  props { 
+    language = "text" 
+    title = "" 
+    code = "" 
+    copyable = true 
+    class = "" 
+    }
 
   view {
     <section class="overflow-hidden bg-[var(--wire-color-code-background,#020617)] text-[var(--wire-color-code-text,#e2e8f0)] {class}">
diff --git a/.publish/ui/components/CodeTabs.wrn b/.publish/ui/components/CodeTabs.wrn
index 59938133..9fd89555 100644
--- a/.publish/ui/components/CodeTabs.wrn
+++ b/.publish/ui/components/CodeTabs.wrn
@@ -4,7 +4,9 @@ component CodeTabs {
   }
 
   view {
-    <div class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] {class}">
+    <div
+      class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] {class}"
+    >
       <slot />
     </div>
   }
diff --git a/.publish/ui/components/FeatureTabs.wrn b/.publish/ui/components/FeatureTabs.wrn
index e197102a..8e323491 100644
--- a/.publish/ui/components/FeatureTabs.wrn
+++ b/.publish/ui/components/FeatureTabs.wrn
@@ -11,7 +11,7 @@ component FeatureTabs {
   }
 
   view {
-    <article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
+    <article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}">
       {#if image}
         <img src="{image}" alt="{alt}" class="aspect-[16/9] w-full border-b border-[var(--wire-color-border,#e2e8f0)] object-cover" />
       {/if}
@@ -19,7 +19,7 @@ component FeatureTabs {
       <div class="flex flex-1 flex-col p-6">
         {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
         {#if title}<h3 class="mt-4 text-xl font-semibold leading-snug tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-        {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+        {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
         <div class="mt-5"><slot /></div>
         {#if href}
           <a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
diff --git a/.publish/ui/components/FinalCTA.wrn b/.publish/ui/components/FinalCTA.wrn
index 2bdc3d4a..e6048ae1 100644
--- a/.publish/ui/components/FinalCTA.wrn
+++ b/.publish/ui/components/FinalCTA.wrn
@@ -11,25 +11,58 @@ component FinalCTA {
   view {
     <span class="contents {class}">
       {#if href}
+      {#if variant === "primary"}
       <a
         href="{href}"
-        class=' group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background,#ffffff)] {variant === "primary" ? "bg-[var(--wire-color-primary,#059669)] text-[var(--wire-color-primary-contrast,#ffffff)] hover:bg-[var(--wire-color-primary-hover,#047857)]" : "border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] text-[var(--wire-color-text,#0f172a)] hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)]"} '
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] no-underline transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
         aria-disabled="{disabled}"
       >
         <span>{label}</span>
-        <span class="transition-transform duration-200 group-hover:translate-x-0.5" aria-hidden="true">→</span>
+        <span
+          class="transition-transform duration-200 group-hover:translate-x-0.5"
+          aria-hidden="true"
+        >
+          →
+        </span>
         <slot />
       </a>
       {:else}
+      <a
+        href="{href}"
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] no-underline transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
+        aria-disabled="{disabled}"
+      >
+        <span>{label}</span>
+        <span
+          class="transition-transform duration-200 group-hover:translate-x-0.5"
+          aria-hidden="true"
+        >
+          →
+        </span>
+        <slot />
+      </a>
+      {/if}
+      {:else}
+      {#if variant === "primary"}
+      <button
+        type="{type}"
+        disabled="{disabled}"
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
+      >
+        <span>{label}</span>
+        <slot />
+      </button>
+      {:else}
       <button
         type="{type}"
         disabled="{disabled}"
-        class=' group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition duration-200 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background,#ffffff)] {variant === "primary" ? "bg-[var(--wire-color-primary,#059669)] text-[var(--wire-color-primary-contrast,#ffffff)] hover:bg-[var(--wire-color-primary-hover,#047857)]" : "border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] text-[var(--wire-color-text,#0f172a)] hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)]"} '
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
       >
         <span>{label}</span>
         <slot />
       </button>
       {/if}
+      {/if}
     </span>
   }
 }
diff --git a/.publish/ui/components/MarketingSectionHeader.wrn b/.publish/ui/components/MarketingSectionHeader.wrn
index e8dd8cda..bd0e410f 100644
--- a/.publish/ui/components/MarketingSectionHeader.wrn
+++ b/.publish/ui/components/MarketingSectionHeader.wrn
@@ -8,7 +8,7 @@ component MarketingSectionHeader {
   }
 
   view {
-    <section class="px-4 py-16 sm:px-6 sm:py-20 lg:px-8 {class}">
+    <section class="px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20 {class}">
       <div class="mx-auto w-full max-w-7xl">
         <header
           class="max-w-3xl"
@@ -22,11 +22,11 @@ component MarketingSectionHeader {
             <h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{title}</h2>
           {/if}
           {#if description}
-            <p class="mt-5 text-base leading-8 text-[var(--wire-color-text-muted,#64748b)] sm:text-lg">{description}</p>
+            <p class="mt-5 text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg">{description}</p>
           {/if}
         </header>
 
-        <div class="mt-8">
+        <div class="mt-10">
           <slot />
         </div>
       </div>
diff --git a/.publish/ui/components/MetricGrid.wrn b/.publish/ui/components/MetricGrid.wrn
index 03dbe3ce..536ad57a 100644
--- a/.publish/ui/components/MetricGrid.wrn
+++ b/.publish/ui/components/MetricGrid.wrn
@@ -9,17 +9,17 @@ component MetricGrid {
     <section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
       <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         {#each metrics as metric}
-          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))]">
+          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
             <strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
               {metric.value}
             </strong>
             <span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
             {#if metric.description}
-              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted,#64748b)]">{metric.description}</p>
+              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
             {/if}
           </article>
         {:empty}
-          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-text-muted,#64748b)]">
+          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
             No metrics available.
           </p>
         {/each}
diff --git a/.publish/ui/components/ProductArchitectureDiagram.wrn b/.publish/ui/components/ProductArchitectureDiagram.wrn
index df51e53e..032227c9 100644
--- a/.publish/ui/components/ProductArchitectureDiagram.wrn
+++ b/.publish/ui/components/ProductArchitectureDiagram.wrn
@@ -9,26 +9,26 @@ component ProductArchitectureDiagram {
   }
 
   view {
-    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
+    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
       <header class="flex flex-col gap-4 border-b border-[var(--wire-color-border,#e2e8f0)] p-6 sm:flex-row sm:items-start sm:justify-between lg:p-8">
         <div>
           {#if title}<p class="m-0 font-semibold text-[var(--wire-color-text,#0f172a)]">{title}</p>{/if}
           {#if value}<strong class="mt-3 block text-3xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{value}</strong>{/if}
-          {#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+          {#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
         </div>
         {#if loading}
-          <span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-muted,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-text-muted,#64748b)]">
+          <span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-muted,#64748b)]">
             <span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]"></span>Loading
           </span>
         {/if}
       </header>
 
-      <div class="bg-[var(--wire-color-surface-muted,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
+      <div class="bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
         <slot />
       </div>
 
       {#if summary}
-        <p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-text-muted,#64748b)] lg:px-8">{summary}</p>
+        <p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-muted,#64748b)] lg:px-8">{summary}</p>
       {/if}
     </section>
   }
diff --git a/.publish/ui/components/ProductCard.wrn b/.publish/ui/components/ProductCard.wrn
index 1710284d..fe490ab3 100644
--- a/.publish/ui/components/ProductCard.wrn
+++ b/.publish/ui/components/ProductCard.wrn
@@ -10,13 +10,13 @@ component ProductCard {
   }
 
   view {
-    <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
+    <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}">
       <div class="flex min-h-7 items-start justify-between gap-4">
         {#if eyebrow}<span class="text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</span>{/if}
-        {#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-muted,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-text-muted,#64748b)]">{status}</span>{/if}
+        {#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-muted,#64748b)]">{status}</span>{/if}
       </div>
       {#if title}<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
       {#if href}
         <a href="{href}" class="mt-6 inline-flex items-center gap-2 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
           <span>{actionLabel}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
diff --git a/.publish/ui/components/ProductGrid.wrn b/.publish/ui/components/ProductGrid.wrn
index 9d830b75..61e2bf64 100644
--- a/.publish/ui/components/ProductGrid.wrn
+++ b/.publish/ui/components/ProductGrid.wrn
@@ -8,17 +8,17 @@ component ProductGrid {
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}">
+    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
       <div class="mx-auto w-full max-w-7xl">
         {#if title}<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
-        {#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+        {#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
 
         {#if empty}
-          <div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] p-10 text-center text-[var(--wire-color-text-muted,#64748b)]">
+          <div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-10 text-center text-[var(--wire-color-muted,#64748b)]">
             {emptyText}
           </div>
         {:else}
-          <div class="mt-8 grid grid-cols-1 items-stretch gap-5 md:grid-cols-2 xl:grid-cols-3 [&>*]:min-w-0 [&>*]:h-full">
+          <div class="mt-8 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-7 [&>*]:min-w-0 [&>*]:h-full">
             <slot />
           </div>
         {/if}
diff --git a/.publish/ui/components/ProductHero.wrn b/.publish/ui/components/ProductHero.wrn
index 8e9646a5..c30428cc 100644
--- a/.publish/ui/components/ProductHero.wrn
+++ b/.publish/ui/components/ProductHero.wrn
@@ -9,17 +9,9 @@ component ProductHero {
 
   view {
     <section
-      class="
-        relative isolate overflow-hidden border-b border-[var(--wire-color-border,#e2e8f0)]
-        bg-[var(--wire-color-background,#ffffff)] px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24
-        {class}
-      "
+      class=" relative isolate overflow-hidden border-b border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-bg,#ffffff)] px-4 py-14 sm:px-6 sm:py-18 lg:px-8 lg:py-20 {class} "
     >
-      <div
-        class="pointer-events-none absolute inset-0 -z-10 opacity-80"
-        style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);"
-        aria-hidden="true"
-      ></div>
+      <div class="pointer-events-none absolute inset-0 -z-10 opacity-80" style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);" aria-hidden="true" ></div>
 
       <div class="mx-auto w-full max-w-7xl">
         <div
@@ -28,25 +20,33 @@ component ProductHero {
           class:text-center='{align === "center"}'
         >
           {#if eyebrow}
-            <p class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm">
-              {eyebrow}
-            </p>
+          <p
+            class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm"
+          >
+            {eyebrow}
+          </p>
           {/if}
 
           {#if title}
-            <h1 class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl" class:mx-auto='{align === "center"}'>
-              {title}
-            </h1>
+          <h1
+            class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl"
+            class:mx-auto='{align === "center"}'
+          >
+            {title}
+          </h1>
           {/if}
 
           {#if description}
-            <p class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-text-muted,#64748b)] sm:text-lg" class:mx-auto='{align === "center"}'>
-              {description}
-            </p>
+          <p
+            class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg"
+            class:mx-auto='{align === "center"}'
+          >
+            {description}
+          </p>
           {/if}
         </div>
 
-        <div class="mt-8 space-y-8">
+        <div class="mt-10 space-y-10">
           <slot />
         </div>
       </div>
diff --git a/.publish/ui/components/ProductPageShell.wrn b/.publish/ui/components/ProductPageShell.wrn
index 8fb71190..77a1325d 100644
--- a/.publish/ui/components/ProductPageShell.wrn
+++ b/.publish/ui/components/ProductPageShell.wrn
@@ -1,16 +1,11 @@
 component ProductPageShell {
-  props { class = "" }
+  props {
+    class = ""
+  }
 
   view {
     <main
-      class="
-        min-h-screen w-full overflow-x-clip
-        bg-[var(--wire-color-background,#ffffff)]
-        font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)]
-        text-[var(--wire-color-text,#0f172a)]
-        antialiased
-        {class}
-      "
+      class=" min-h-screen w-full overflow-x-clip bg-[var(--wire-color-bg,#ffffff)] font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)] text-[var(--wire-color-text,#0f172a)] antialiased {class} "
     >
       <slot />
     </main>
diff --git a/.publish/ui/components/ProductStatusBadge.wrn b/.publish/ui/components/ProductStatusBadge.wrn
index 391dab53..7d7b90f5 100644
--- a/.publish/ui/components/ProductStatusBadge.wrn
+++ b/.publish/ui/components/ProductStatusBadge.wrn
@@ -7,7 +7,7 @@ component ProductStatusBadge {
 
   view {
     <span
-      class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] text-[var(--wire-color-text-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
+      class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] text-[var(--wire-color-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
     >
       <span class="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true"></span>
       {label}
diff --git a/.publish/ui/package.json b/.publish/ui/package.json
index 938e690f..b24cd728 100644
--- a/.publish/ui/package.json
+++ b/.publish/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/ui — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "./ui.css": "./ui.css"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist",
diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json
index c755b08b..03baefdb 100644
--- a/.publish/uploader/package.json
+++ b/.publish/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/uploader — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.78"
+    "@wrnexus/core": "^0.2.79"
   },
   "files": [
     "dist"
diff --git a/.publish/validation/package.json b/.publish/validation/package.json
index 17887e97..38123b2b 100644
--- a/.publish/validation/package.json
+++ b/.publish/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "description": "@wrnexus/validation — part of the WrNexus framework.",
   "license": "MIT",
diff --git a/packages/ai/package.json b/packages/ai/package.json
index df04223c..1e566465 100644
--- a/packages/ai/package.json
+++ b/packages/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
diff --git a/packages/authz/package.json b/packages/authz/package.json
index 6d7b9aa7..09036d63 100644
--- a/packages/authz/package.json
+++ b/packages/authz/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 6e985324..7ab8607a 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts
index 5758b2eb..a7a39aef 100644
--- a/packages/cli/src/update.ts
+++ b/packages/cli/src/update.ts
@@ -775,6 +775,14 @@ const MIGRATIONS: Migration[] = [
       // Language and shared UI behavior improve automatically after updating.
     },
   },
+  {
+    version: "0.2.79",
+    id: "ui-components-fix",
+    description: "Dev toolbar for optimization and developer.",
+    apply() {
+      // Language and shared UI behavior improve automatically after updating.
+    },
+  },
 ];
 
 /** Release tooling uses this to require an explicit migration entry per version. */
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
index 5d2654b0..6c041a7d 100644
--- a/packages/compiler/package.json
+++ b/packages/compiler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/core/package.json b/packages/core/package.json
index 2dfbf81c..4aabdf3a 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/csr/package.json b/packages/csr/package.json
index 0ca45c2e..fb31490f 100644
--- a/packages/csr/package.json
+++ b/packages/csr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/db/package.json b/packages/db/package.json
index f014aff8..a32339a6 100644
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index dcd17e86..c1716df9 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/dev-toolbar/package.json b/packages/dev-toolbar/package.json
index 775da7f1..e657a898 100644
--- a/packages/dev-toolbar/package.json
+++ b/packages/dev-toolbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-toolbar",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "sideEffects": false,
diff --git a/packages/encryption/package.json b/packages/encryption/package.json
index 2b260ae1..7405418f 100644
--- a/packages/encryption/package.json
+++ b/packages/encryption/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
index 520cce5a..9ec2c225 100644
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index 37eb552c..d7e2e9c9 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/jwt/package.json b/packages/jwt/package.json
index dea05cf2..82803827 100644
--- a/packages/jwt/package.json
+++ b/packages/jwt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
index 559dd4f9..099c3c09 100644
--- a/packages/mobile/package.json
+++ b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/native/package.json b/packages/native/package.json
index 22d15895..0356216e 100644
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/oauth/package.json b/packages/oauth/package.json
index a853c91e..dd84e9e6 100644
--- a/packages/oauth/package.json
+++ b/packages/oauth/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/pubsub/package.json b/packages/pubsub/package.json
index 393146af..b8b10796 100644
--- a/packages/pubsub/package.json
+++ b/packages/pubsub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/queue/package.json b/packages/queue/package.json
index 5a180c09..754d8b44 100644
--- a/packages/queue/package.json
+++ b/packages/queue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/reactive/package.json b/packages/reactive/package.json
index 80782a34..c42dd4e4 100644
--- a/packages/reactive/package.json
+++ b/packages/reactive/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/router/package.json b/packages/router/package.json
index d11eccf3..72796860 100644
--- a/packages/router/package.json
+++ b/packages/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/ssr/package.json b/packages/ssr/package.json
index 6bc5ea27..2bf1b0d8 100644
--- a/packages/ssr/package.json
+++ b/packages/ssr/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 5b0a430c..34b687d2 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
diff --git a/packages/styles/src/theme.ts b/packages/styles/src/theme.ts
index eff1c448..a395e318 100644
--- a/packages/styles/src/theme.ts
+++ b/packages/styles/src/theme.ts
@@ -201,6 +201,30 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
   light: {
     "color-scheme": "light",
     "color-bg": "#ffffff",
+    "color-background": "#ffffff",
+    "color-foreground": "#0b1020",
+    "color-surface-raised": "#ffffff",
+    "color-surface-muted": "#eceff6",
+    "color-text-muted": "#5a6178",
+    "color-text-subtle": "#737b91",
+    "color-border-strong": "#c7cedd",
+    "color-primary-soft": "#eff6ff",
+    "color-secondary-soft": "#f1f5f9",
+    "color-info-soft": "#e0f2fe",
+    "color-success-soft": "#ecfdf3",
+    "color-warning-soft": "#fffbeb",
+    "color-danger-soft": "#fef2f2",
+    "color-code-background": "#0b1020",
+    "color-code-surface": "#141a30",
+    "color-code-text": "#e7ecff",
+    "color-code-muted": "#9aa6d0",
+    "color-code-border": "#27304d",
+    "shadow-sm": "0 1px 2px rgba(16,24,40,0.06)",
+    "shadow-md": "0 8px 24px rgba(16,24,40,0.10)",
+    "shadow-lg": "0 20px 50px rgba(16,24,40,0.14)",
+    "space-section": "5rem",
+    "space-section-sm": "3.5rem",
+    "container-max": "80rem",
     "color-surface": "#f6f7fb",
     "color-surface-2": "#eceff6",
     "color-text": "#0b1020",
@@ -225,6 +249,30 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
   dark: {
     "color-scheme": "dark",
     "color-bg": "#0b1020",
+    "color-background": "#0b1020",
+    "color-foreground": "#e7ecff",
+    "color-surface-raised": "#1a223b",
+    "color-surface-muted": "#1c243f",
+    "color-text-muted": "#aab4d8",
+    "color-text-subtle": "#8995bd",
+    "color-border-strong": "#ffffff38",
+    "color-primary-soft": "#6c8cff24",
+    "color-secondary-soft": "#a78bfa24",
+    "color-info-soft": "#38bdf824",
+    "color-success-soft": "#4ade8024",
+    "color-warning-soft": "#fbbf2424",
+    "color-danger-soft": "#f8717124",
+    "color-code-background": "#060a15",
+    "color-code-surface": "#10172a",
+    "color-code-text": "#e7ecff",
+    "color-code-muted": "#9aa6d0",
+    "color-code-border": "#ffffff24",
+    "shadow-sm": "0 1px 2px rgba(0,0,0,0.28)",
+    "shadow-md": "0 10px 30px rgba(0,0,0,0.35)",
+    "shadow-lg": "0 24px 64px rgba(0,0,0,0.45)",
+    "space-section": "5rem",
+    "space-section-sm": "3.5rem",
+    "container-max": "80rem",
     "color-surface": "#141a30",
     "color-surface-2": "#1c243f",
     "color-text": "#e7ecff",
diff --git a/packages/test/package.json b/packages/test/package.json
index 3712f96d..63d03100 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/tracking/package.json b/packages/tracking/package.json
index e6a19f2f..bdeb116f 100644
--- a/packages/tracking/package.json
+++ b/packages/tracking/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/ui/components/AnalyticsDashboardPreview.wrn b/packages/ui/components/AnalyticsDashboardPreview.wrn
index ff6ea26b..3bdef32a 100644
--- a/packages/ui/components/AnalyticsDashboardPreview.wrn
+++ b/packages/ui/components/AnalyticsDashboardPreview.wrn
@@ -11,37 +11,57 @@ component AnalyticsDashboardPreview {
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}">
-      <div class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[1.25fr_0.75fr] lg:items-center lg:p-8">
+    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
+      <div
+        class="mx-auto grid w-full max-w-7xl gap-8 overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-5 shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] sm:p-7 lg:grid-cols-[minmax(0,1.15fr)_minmax(20rem,0.85fr)] lg:items-center lg:p-8"
+      >
         <div>
           {#if image}
-            <img src="{image}" alt="{alt}" class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover" />
+          <img
+            src="{image}"
+            alt="{alt}"
+            class="aspect-[16/9] w-full rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] object-cover"
+          />
           {:else}
-            <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] p-4 sm:p-5" role="img" aria-label="Delivery trend rising over seven days">
-              <div class="flex items-center justify-between gap-4 text-sm">
-                <strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
-                <span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
-              </div>
-              <svg class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]" viewBox="0 0 700 250" aria-hidden="true">
-                <defs>
-                  <linearGradient id="wire-analytics-area" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
-                    <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
-                  </linearGradient>
-                </defs>
-                <g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
-                <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
-                <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
-              </svg>
-              <div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-text-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
+          <div
+            class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-5"
+            role="img"
+            aria-label="Delivery trend rising over seven days"
+          >
+            <div class="flex items-center justify-between gap-4 text-sm">
+              <strong class="text-[var(--wire-color-text,#0f172a)]">Delivery trend</strong>
+              <span class="font-bold text-[var(--wire-color-success,#059669)]">↗ 18.4%</span>
             </div>
+            <svg
+              class="mt-4 h-auto w-full text-[var(--wire-color-primary,#059669)]"
+              viewBox="0 0 700 250"
+              aria-hidden="true"
+            >
+              <defs>
+                <linearGradient
+                  id="wire-analytics-area"
+                  x1="0"
+                  y1="0"
+                  x2="0"
+                  y2="1"
+                >
+                  <stop offset="0%" stop-color="currentColor" stop-opacity=".24"></stop>
+                  <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
+                </linearGradient>
+              </defs>
+              <g fill="none" stroke="var(--wire-color-border,#e2e8f0)"><path d="M20 50H680M20 115H680M20 180H680M20 230H680"></path></g>
+              <path fill="url(#wire-analytics-area)" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32 L680 230 L20 230Z"></path>
+              <path fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" d="M20 210 C100 195 120 150 190 165 S310 195 370 120 S475 130 525 100 S610 90 680 32"></path>
+            </svg>
+            <div class="mt-2 flex justify-between text-[0.7rem] text-[var(--wire-color-muted,#64748b)]"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span></div>
+          </div>
           {/if}
         </div>
 
         <div>
           {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.16em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
           {#if title}<h2 class="mt-4 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
-          {#if description}<p class="mt-4 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+          {#if description}<p class="mt-4 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
           <div class="mt-5"><slot /></div>
           {#if href}<a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline">{actionLabel}<span aria-hidden="true">→</span></a>{/if}
         </div>
diff --git a/packages/ui/components/ChannelCard.wrn b/packages/ui/components/ChannelCard.wrn
index be2e8d9e..32aab3a0 100644
--- a/packages/ui/components/ChannelCard.wrn
+++ b/packages/ui/components/ChannelCard.wrn
@@ -8,21 +8,27 @@ component ChannelCard {
   }
 
   view {
-    <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
+    <article
+      class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}"
+    >
       <div class="flex min-h-12 items-start justify-between gap-4">
         {#if icon}
-          <span class="inline-grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-xl text-[var(--wire-color-primary,#059669)] {icon}" aria-hidden="true"></span>
+        <span class="inline-grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-xl text-[var(--wire-color-primary,#059669)] {icon}" aria-hidden="true"></span>
         {/if}
         <div class="flex min-w-0 justify-end"><slot /></div>
       </div>
 
       {#if title}<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
 
       {#if href}
-        <a href="{href}" class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]" aria-label="Explore {title}">
-          <span>Explore {title}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
-        </a>
+      <a
+        href="{href}"
+        class="mt-6 inline-flex items-center justify-between gap-3 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]"
+        aria-label="Explore {title}"
+      >
+        <span>Explore {title}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
+      </a>
       {/if}
     </article>
   }
diff --git a/packages/ui/components/ChannelFlow.wrn b/packages/ui/components/ChannelFlow.wrn
index 4443acb4..97cd8ccf 100644
--- a/packages/ui/components/ChannelFlow.wrn
+++ b/packages/ui/components/ChannelFlow.wrn
@@ -4,22 +4,32 @@ component ChannelFlow {
   }
 
   view {
-    <div class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}" role="img" aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks">
-      <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
+    <div
+      class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}"
+      role="img"
+      aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks"
+    >
+      <div
+        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
+      >
         <span class="icon-[lucide--webhook] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
         <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Customer event</strong>
-        <small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">order.shipped</small>
+        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">order.shipped</small>
       </div>
       <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
 
-      <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
+      <div
+        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
+      >
         <span class="icon-[lucide--shield-check] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
         <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Profile + consent</strong>
-        <small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Eligibility checked</small>
+        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Eligibility checked</small>
       </div>
       <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
 
-      <div class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3">
+      <div
+        class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3"
+      >
         <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">WhatsApp</span>
         <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">SMS</span>
         <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Email</span>
@@ -27,10 +37,12 @@ component ChannelFlow {
       </div>
       <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>
 
-      <div class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4">
+      <div
+        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
+      >
         <span class="icon-[lucide--chart-no-axes-combined] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
         <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Delivery + analytics</strong>
-        <small class="mt-1 block text-[var(--wire-color-text-muted,#64748b)]">Webhook emitted</small>
+        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Webhook emitted</small>
       </div>
     </div>
   }
diff --git a/packages/ui/components/CodeBlock.wrn b/packages/ui/components/CodeBlock.wrn
index 37664737..66321440 100644
--- a/packages/ui/components/CodeBlock.wrn
+++ b/packages/ui/components/CodeBlock.wrn
@@ -1,11 +1,11 @@
 component CodeBlock {
-  props {
-    language = "text"
-    title = ""
-    code = ""
-    copyable = true
-    class = ""
-  }
+  props { 
+    language = "text" 
+    title = "" 
+    code = "" 
+    copyable = true 
+    class = "" 
+    }
 
   view {
     <section class="overflow-hidden bg-[var(--wire-color-code-background,#020617)] text-[var(--wire-color-code-text,#e2e8f0)] {class}">
diff --git a/packages/ui/components/CodeTabs.wrn b/packages/ui/components/CodeTabs.wrn
index 59938133..9fd89555 100644
--- a/packages/ui/components/CodeTabs.wrn
+++ b/packages/ui/components/CodeTabs.wrn
@@ -4,7 +4,9 @@ component CodeTabs {
   }
 
   view {
-    <div class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] {class}">
+    <div
+      class="overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] {class}"
+    >
       <slot />
     </div>
   }
diff --git a/packages/ui/components/FeatureTabs.wrn b/packages/ui/components/FeatureTabs.wrn
index e197102a..8e323491 100644
--- a/packages/ui/components/FeatureTabs.wrn
+++ b/packages/ui/components/FeatureTabs.wrn
@@ -11,7 +11,7 @@ component FeatureTabs {
   }
 
   view {
-    <article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
+    <article class="group flex h-full min-h-72 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}">
       {#if image}
         <img src="{image}" alt="{alt}" class="aspect-[16/9] w-full border-b border-[var(--wire-color-border,#e2e8f0)] object-cover" />
       {/if}
@@ -19,7 +19,7 @@ component FeatureTabs {
       <div class="flex flex-1 flex-col p-6">
         {#if eyebrow}<p class="m-0 text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</p>{/if}
         {#if title}<h3 class="mt-4 text-xl font-semibold leading-snug tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-        {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+        {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
         <div class="mt-5"><slot /></div>
         {#if href}
           <a href="{href}" class="mt-6 inline-flex items-center gap-2 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
diff --git a/packages/ui/components/FinalCTA.wrn b/packages/ui/components/FinalCTA.wrn
index 2bdc3d4a..e6048ae1 100644
--- a/packages/ui/components/FinalCTA.wrn
+++ b/packages/ui/components/FinalCTA.wrn
@@ -11,25 +11,58 @@ component FinalCTA {
   view {
     <span class="contents {class}">
       {#if href}
+      {#if variant === "primary"}
       <a
         href="{href}"
-        class=' group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold no-underline transition duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background,#ffffff)] {variant === "primary" ? "bg-[var(--wire-color-primary,#059669)] text-[var(--wire-color-primary-contrast,#ffffff)] hover:bg-[var(--wire-color-primary-hover,#047857)]" : "border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] text-[var(--wire-color-text,#0f172a)] hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)]"} '
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] no-underline transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
         aria-disabled="{disabled}"
       >
         <span>{label}</span>
-        <span class="transition-transform duration-200 group-hover:translate-x-0.5" aria-hidden="true">→</span>
+        <span
+          class="transition-transform duration-200 group-hover:translate-x-0.5"
+          aria-hidden="true"
+        >
+          →
+        </span>
         <slot />
       </a>
       {:else}
+      <a
+        href="{href}"
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] no-underline transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
+        aria-disabled="{disabled}"
+      >
+        <span>{label}</span>
+        <span
+          class="transition-transform duration-200 group-hover:translate-x-0.5"
+          aria-hidden="true"
+        >
+          →
+        </span>
+        <slot />
+      </a>
+      {/if}
+      {:else}
+      {#if variant === "primary"}
+      <button
+        type="{type}"
+        disabled="{disabled}"
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl bg-[var(--wire-color-primary,#059669)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-primary-contrast,#ffffff)] transition duration-200 hover:bg-[var(--wire-color-primary-hover,#047857)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
+      >
+        <span>{label}</span>
+        <slot />
+      </button>
+      {:else}
       <button
         type="{type}"
         disabled="{disabled}"
-        class=' group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-semibold transition duration-200 disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background,#ffffff)] {variant === "primary" ? "bg-[var(--wire-color-primary,#059669)] text-[var(--wire-color-primary-contrast,#ffffff)] hover:bg-[var(--wire-color-primary-hover,#047857)]" : "border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] text-[var(--wire-color-text,#0f172a)] hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)]"} '
+        class="group inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] px-5 py-2.5 text-sm font-semibold text-[var(--wire-color-text,#0f172a)] transition duration-200 hover:border-[var(--wire-color-primary,#059669)] hover:text-[var(--wire-color-primary,#059669)] disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)] focus-visible:ring-offset-2"
       >
         <span>{label}</span>
         <slot />
       </button>
       {/if}
+      {/if}
     </span>
   }
 }
diff --git a/packages/ui/components/MarketingSectionHeader.wrn b/packages/ui/components/MarketingSectionHeader.wrn
index e8dd8cda..bd0e410f 100644
--- a/packages/ui/components/MarketingSectionHeader.wrn
+++ b/packages/ui/components/MarketingSectionHeader.wrn
@@ -8,7 +8,7 @@ component MarketingSectionHeader {
   }
 
   view {
-    <section class="px-4 py-16 sm:px-6 sm:py-20 lg:px-8 {class}">
+    <section class="px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20 {class}">
       <div class="mx-auto w-full max-w-7xl">
         <header
           class="max-w-3xl"
@@ -22,11 +22,11 @@ component MarketingSectionHeader {
             <h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{title}</h2>
           {/if}
           {#if description}
-            <p class="mt-5 text-base leading-8 text-[var(--wire-color-text-muted,#64748b)] sm:text-lg">{description}</p>
+            <p class="mt-5 text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg">{description}</p>
           {/if}
         </header>
 
-        <div class="mt-8">
+        <div class="mt-10">
           <slot />
         </div>
       </div>
diff --git a/packages/ui/components/MetricGrid.wrn b/packages/ui/components/MetricGrid.wrn
index 03dbe3ce..536ad57a 100644
--- a/packages/ui/components/MetricGrid.wrn
+++ b/packages/ui/components/MetricGrid.wrn
@@ -9,17 +9,17 @@ component MetricGrid {
     <section class="px-4 sm:px-6 lg:px-8 {class}" aria-label="{label}">
       <div class="mx-auto grid w-full max-w-7xl grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
         {#each metrics as metric}
-          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))]">
+          <article class="flex min-h-40 flex-col justify-center rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))]">
             <strong class="text-3xl font-semibold leading-none tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">
               {metric.value}
             </strong>
             <span class="mt-4 font-semibold text-[var(--wire-color-text,#0f172a)]">{metric.label}</span>
             {#if metric.description}
-              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-text-muted,#64748b)]">{metric.description}</p>
+              <p class="mt-2 text-sm leading-6 text-[var(--wire-color-muted,#64748b)]">{metric.description}</p>
             {/if}
           </article>
         {:empty}
-          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-text-muted,#64748b)]">
+          <p class="col-span-full rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] p-8 text-center text-[var(--wire-color-muted,#64748b)]">
             No metrics available.
           </p>
         {/each}
diff --git a/packages/ui/components/ProductArchitectureDiagram.wrn b/packages/ui/components/ProductArchitectureDiagram.wrn
index df51e53e..032227c9 100644
--- a/packages/ui/components/ProductArchitectureDiagram.wrn
+++ b/packages/ui/components/ProductArchitectureDiagram.wrn
@@ -9,26 +9,26 @@ component ProductArchitectureDiagram {
   }
 
   view {
-    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
+    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
       <header class="flex flex-col gap-4 border-b border-[var(--wire-color-border,#e2e8f0)] p-6 sm:flex-row sm:items-start sm:justify-between lg:p-8">
         <div>
           {#if title}<p class="m-0 font-semibold text-[var(--wire-color-text,#0f172a)]">{title}</p>{/if}
           {#if value}<strong class="mt-3 block text-3xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{value}</strong>{/if}
-          {#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+          {#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
         </div>
         {#if loading}
-          <span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-muted,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-text-muted,#64748b)]">
+          <span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-muted,#64748b)]">
             <span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]"></span>Loading
           </span>
         {/if}
       </header>
 
-      <div class="bg-[var(--wire-color-surface-muted,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
+      <div class="bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
         <slot />
       </div>
 
       {#if summary}
-        <p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-text-muted,#64748b)] lg:px-8">{summary}</p>
+        <p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-muted,#64748b)] lg:px-8">{summary}</p>
       {/if}
     </section>
   }
diff --git a/packages/ui/components/ProductCard.wrn b/packages/ui/components/ProductCard.wrn
index 1710284d..fe490ab3 100644
--- a/packages/ui/components/ProductCard.wrn
+++ b/packages/ui/components/ProductCard.wrn
@@ -10,13 +10,13 @@ component ProductCard {
   }
 
   view {
-    <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-sm,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-md,0_12px_30px_rgb(0_0_0/0.10))] {class}">
+    <article class="group flex h-full min-h-72 flex-col rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-6 shadow-[var(--wire-shadow-1,0_1px_2px_rgb(0_0_0/0.05))] transition duration-200 hover:-translate-y-1 hover:border-[var(--wire-color-primary,#059669)] hover:shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.10))] {class}">
       <div class="flex min-h-7 items-start justify-between gap-4">
         {#if eyebrow}<span class="text-xs font-bold uppercase tracking-[0.14em] text-[var(--wire-color-primary,#059669)]">{eyebrow}</span>{/if}
-        {#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-muted,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-text-muted,#64748b)]">{status}</span>{/if}
+        {#if status}<span class="shrink-0 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-2.5 py-1 text-[0.7rem] font-bold text-[var(--wire-color-muted,#64748b)]">{status}</span>{/if}
       </div>
       {#if title}<h3 class="mt-5 text-xl font-semibold tracking-[-0.02em] text-[var(--wire-color-text,#0f172a)]">{title}</h3>{/if}
-      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+      {#if description}<p class="mt-3 flex-1 leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
       {#if href}
         <a href="{href}" class="mt-6 inline-flex items-center gap-2 border-t border-[var(--wire-color-border,#e2e8f0)] pt-5 font-semibold text-[var(--wire-color-primary,#059669)] no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-primary,#059669)]">
           <span>{actionLabel}</span><span class="transition-transform group-hover:translate-x-0.5" aria-hidden="true">→</span>
diff --git a/packages/ui/components/ProductGrid.wrn b/packages/ui/components/ProductGrid.wrn
index 9d830b75..61e2bf64 100644
--- a/packages/ui/components/ProductGrid.wrn
+++ b/packages/ui/components/ProductGrid.wrn
@@ -8,17 +8,17 @@ component ProductGrid {
   }
 
   view {
-    <section class="px-4 sm:px-6 lg:px-8 {class}">
+    <section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
       <div class="mx-auto w-full max-w-7xl">
         {#if title}<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
-        {#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-text-muted,#64748b)]">{description}</p>{/if}
+        {#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
 
         {#if empty}
-          <div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] p-10 text-center text-[var(--wire-color-text-muted,#64748b)]">
+          <div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-10 text-center text-[var(--wire-color-muted,#64748b)]">
             {emptyText}
           </div>
         {:else}
-          <div class="mt-8 grid grid-cols-1 items-stretch gap-5 md:grid-cols-2 xl:grid-cols-3 [&>*]:min-w-0 [&>*]:h-full">
+          <div class="mt-8 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-7 [&>*]:min-w-0 [&>*]:h-full">
             <slot />
           </div>
         {/if}
diff --git a/packages/ui/components/ProductHero.wrn b/packages/ui/components/ProductHero.wrn
index 8e9646a5..c30428cc 100644
--- a/packages/ui/components/ProductHero.wrn
+++ b/packages/ui/components/ProductHero.wrn
@@ -9,17 +9,9 @@ component ProductHero {
 
   view {
     <section
-      class="
-        relative isolate overflow-hidden border-b border-[var(--wire-color-border,#e2e8f0)]
-        bg-[var(--wire-color-background,#ffffff)] px-4 py-16 sm:px-6 sm:py-20 lg:px-8 lg:py-24
-        {class}
-      "
+      class=" relative isolate overflow-hidden border-b border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-bg,#ffffff)] px-4 py-14 sm:px-6 sm:py-18 lg:px-8 lg:py-20 {class} "
     >
-      <div
-        class="pointer-events-none absolute inset-0 -z-10 opacity-80"
-        style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);"
-        aria-hidden="true"
-      ></div>
+      <div class="pointer-events-none absolute inset-0 -z-10 opacity-80" style="background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--wire-color-primary, #059669) 16%, transparent), transparent 36%);" aria-hidden="true" ></div>
 
       <div class="mx-auto w-full max-w-7xl">
         <div
@@ -28,25 +20,33 @@ component ProductHero {
           class:text-center='{align === "center"}'
         >
           {#if eyebrow}
-            <p class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm">
-              {eyebrow}
-            </p>
+          <p
+            class="mb-4 text-xs font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary,#059669)] sm:text-sm"
+          >
+            {eyebrow}
+          </p>
           {/if}
 
           {#if title}
-            <h1 class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl" class:mx-auto='{align === "center"}'>
-              {title}
-            </h1>
+          <h1
+            class="m-0 max-w-[18ch] text-4xl font-semibold leading-[1.05] tracking-[-0.045em] text-[var(--wire-color-text,#0f172a)] sm:text-5xl lg:text-6xl"
+            class:mx-auto='{align === "center"}'
+          >
+            {title}
+          </h1>
           {/if}
 
           {#if description}
-            <p class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-text-muted,#64748b)] sm:text-lg" class:mx-auto='{align === "center"}'>
-              {description}
-            </p>
+          <p
+            class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-muted,#64748b)] sm:text-lg"
+            class:mx-auto='{align === "center"}'
+          >
+            {description}
+          </p>
           {/if}
         </div>
 
-        <div class="mt-8 space-y-8">
+        <div class="mt-10 space-y-10">
           <slot />
         </div>
       </div>
diff --git a/packages/ui/components/ProductPageShell.wrn b/packages/ui/components/ProductPageShell.wrn
index 8fb71190..77a1325d 100644
--- a/packages/ui/components/ProductPageShell.wrn
+++ b/packages/ui/components/ProductPageShell.wrn
@@ -1,16 +1,11 @@
 component ProductPageShell {
-  props { class = "" }
+  props {
+    class = ""
+  }
 
   view {
     <main
-      class="
-        min-h-screen w-full overflow-x-clip
-        bg-[var(--wire-color-background,#ffffff)]
-        font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)]
-        text-[var(--wire-color-text,#0f172a)]
-        antialiased
-        {class}
-      "
+      class=" min-h-screen w-full overflow-x-clip bg-[var(--wire-color-bg,#ffffff)] font-[var(--wire-font-sans,ui-sans-serif,system-ui,sans-serif)] text-[var(--wire-color-text,#0f172a)] antialiased {class} "
     >
       <slot />
     </main>
diff --git a/packages/ui/components/ProductStatusBadge.wrn b/packages/ui/components/ProductStatusBadge.wrn
index 391dab53..7d7b90f5 100644
--- a/packages/ui/components/ProductStatusBadge.wrn
+++ b/packages/ui/components/ProductStatusBadge.wrn
@@ -7,7 +7,7 @@ component ProductStatusBadge {
 
   view {
     <span
-      class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-muted,#f8fafc)] text-[var(--wire-color-text-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
+      class=' inline-flex w-max items-center gap-1.5 rounded-full border px-2.5 py-1 text-[0.7rem] font-bold leading-none {status === "warning" ? "border-[var(--wire-color-warning,#d97706)] bg-[var(--wire-color-warning-soft,#fffbeb)] text-[var(--wire-color-warning,#d97706)]" : status === "muted" ? "border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] text-[var(--wire-color-muted,#64748b)]" : "border-[var(--wire-color-primary,#059669)] bg-[var(--wire-color-primary-soft,#ecfdf5)] text-[var(--wire-color-primary,#059669)]"} {class} '
     >
       <span class="h-1.5 w-1.5 rounded-full bg-current" aria-hidden="true"></span>
       {label}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index ba203a7f..70f3ccdd 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/uploader/package.json b/packages/uploader/package.json
index dd24140f..7b906e7a 100644
--- a/packages/uploader/package.json
+++ b/packages/uploader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/packages/validation/package.json b/packages/validation/package.json
index 32115d35..38fb6afa 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.78",
+  "version": "0.2.79",
   "private": true,
   "type": "module",
   "main": "src/index.ts",
diff --git a/update-package-versions.mjs b/update-package-versions.mjs
index da767a77..6c22a495 100644
--- a/update-package-versions.mjs
+++ b/update-package-versions.mjs
@@ -1,7 +1,7 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 
-const version = "0.2.78";
+const version = "0.2.79";
 
 const dependencyGroups = [
   "dependencies",