diff --git a/docs/projects/2509-css-migration/TASK-TRACKER.md b/docs/projects/2509-css-migration/TASK-TRACKER.md
index 19ae95f31..0416357dc 100644
--- a/docs/projects/2509-css-migration/TASK-TRACKER.md
+++ b/docs/projects/2509-css-migration/TASK-TRACKER.md
@@ -52,9 +52,9 @@ Lines Eliminated: 0 / 27,394-31,936 target (0% complete)
 
 ### Work Package Status
 
-#### WP1.1: CSS Variables Foundation 🔲 NOT STARTED
+#### WP1.1: CSS Variables Foundation 🔄 IN PROGRESS
 ```yaml
-status: 🔲 Not Started
+status: 🔄 In Progress (font-system-ui extraction COMPLETE 2026-07-11)
 priority: P0 🔥 Critical
 duration: 4-6 hours
 files_affected: 12 inline critical CSS files
@@ -62,22 +62,37 @@ impact: 2.8KB savings, ~50 lines eliminated
 micro_commits_target: 15-20 commits
 
 tasks:
-  - [ ] Create _css-variables.scss with design tokens
-  - [ ] Extract --font-system-ui variable (18 font-family declarations)
+  - [x] Create foundations/css-variables.css with design tokens (pre-existing, 2025-10-12)
+  - [x] Extract --font-system-ui variable — ALL exact-match literal stacks
+        (25 stacks across 8 critical files) replaced with var(--font-system-ui);
+        @import wired into the 3 no-base bundles (careers, single-careers,
+        single-use-cases) that never defined the variable
   - [ ] Extract --color-primary, --color-secondary, --color-text
   - [ ] Extract --border-radius-default, --spacing-unit
-  - [ ] Update 12 inline critical CSS files to reference variables
-  - [ ] Validation: bin/rake test:critical (all pass)
+  - [x] Dedup the identical 35-line Bootstrap :root block copied across
+        8 critical files — DELETED outright (sprint 2, 2026-07-11): zero
+        var() consumers repo-wide, so no relocation needed; 280 lines
+        removed; vendor base-4.min.css copy untouched
+  - [x] Validation: bin/rake test:critical (46/46 pass, 84 screenshots 0 diffs)
+  - [x] Validation: bin/dtest Linux gate (46/46 pass, per commit)
   - [ ] Validation: FCP metrics unchanged
 
 blockers: NONE
 dependencies: NONE (can start immediately)
-assigned_to: TBD
-started_date: -
+assigned_to: Claude (sprint 1, 2026-07-11)
+started_date: 2026-07-11
 completed_date: -
-actual_duration: -
-actual_commits: -
-notes: Foundation for all CSS variable usage
+actual_duration: ~2.5 hours (sprint 1)
+actual_commits: 10 (c2a161f6..498edbba), 9 files, +44/-420 lines
+notes: |
+  Foundation for all CSS variable usage.
+  Sprint-1 findings:
+  - careers bundle had 4 var(--font-system-ui) usages with NO definition
+    (unresolved var since a prior partial extraction) — fixed by @import.
+  - use-cases-critical.css is ORPHANED (no template loads it; repo-wide
+    grep finds zero loaders). Follow-up: wire into use-cases bundle or delete.
+  - Variant stacks (short system-ui + Bootstrap-reboot -apple-system-first)
+    intentionally NOT converted — different values, would be value changes.
 ```
 
 #### WP1.2: Reset Utilities Extraction 🔲 NOT STARTED
@@ -533,6 +548,50 @@ fcp_metrics:
 
 ## 🔄 UPDATE LOG
 
+### 2026-07-11 (sprint 3)
+- **Landed**: orphaned use-cases-critical.css deleted (265 lines); 8 invalid
+  mid-file @charset removed; css-variables foundation wired into the 4
+  bundles that lacked it (blog-single, taxonomy list, not_found, course-single)
+- **ROLLED BACK**: skin-65eda28877e04.css font-stack extraction (6 stacks).
+  Root cause: postcss-delete-duplicate-css (production builds only) deletes
+  the later of two byte-identical declarations; converting skin's body
+  font-family to var() made it duplicate an earlier critical-CSS declaration,
+  unmasking a short-variant body rule as cascade winner → 17 macOS screenshot
+  diffs (Linux green — font resolution masks it). See memory
+  project-css-var-extraction-dedup-trap.
+- **RESOLVED (Paul chose option a — per-case production-bundle masking
+  analysis)**: skin extraction landed for the 3 button-group stacks only
+  (d0da5e7b); body/h1/h1-h6 stay literal with KEEP LITERAL comments —
+  v2 attempt confirmed the minifier hoists merged h1 rules up-cascade
+  (reviewer hand-traced h1 70px→40px inversion; 17 macOS diffs).
+  --color-ruby rollout complete: token defined (91d5da27), foundation
+  inlined site-wide via baseof navigation bundle (987935a1), all 14
+  literal declarations replaced across style.css/navigation.css/
+  single-post.css (6ba9b23b, ef907fc8, 1ae080e0) — each commit gated by
+  production-bundle rule-level diff + rule-count check + both platform
+  suites; zero rollbacks needed under the option-a protocol.
+- **New follow-ups**: root list.html is dead code (no taxonomy pages
+  generated; its "blog-list" bundleName collides with blog/list.html's) —
+  rename or remove; --color-ruby token name approved by Paul for #cc342d.
+
+### 2026-07-11 (sprint 2)
+- **Action**: Dead Bootstrap :root block deleted from all 8 critical files
+- **Metrics**: 8 commits (763996f2..17838e2d), 280 lines removed, 0 added
+- **Quality**: 100% test pass both platforms per commit, 0 visual regressions;
+  reviewer independently re-verified zero consumers of all 28 vars
+- **New follow-ups**: stray mid-file @charset in single-services.css,
+  single-use-cases.css, fl-common-modules.css (pre-existing concat leftovers)
+- **Next**: WP1.1 remaining variables (--color-primary already exists in
+  variables/colors.css naming — reconcile), orphaned use-cases-critical.css
+
+### 2026-07-11
+- **Action**: WP1.1 sprint 1 executed — --font-system-ui extraction complete
+- **Status**: WP1.1 🔄 In Progress; Phase 1 progress 0→~0.5/4 WPs
+- **Metrics**: 10 commits, 9 files, +44/-420 lines (376 net eliminated)
+- **Quality**: 100% test pass maintained (macOS + Linux gates per commit), 0 visual regressions
+- **Findings**: careers bundle unresolved-var defect fixed; use-cases-critical.css orphaned (follow-up); 35-line :root Bootstrap block duplicated across 8 critical files (queued for sprint 2)
+- **Next**: WP1.1 remaining variables (--color-primary, --color-text, spacing/radius) + :root dedup
+
 ### 2025-01-27
 - **Action**: Initial task tracker created
 - **Status**: All phases set to "Not Started"
diff --git a/themes/beaver/assets/css/586.css b/themes/beaver/assets/css/586.css
index f16bf0086..891a2fe42 100644
--- a/themes/beaver/assets/css/586.css
+++ b/themes/beaver/assets/css/586.css
@@ -1,7 +1,6 @@
 /******* Do not edit this file *******
 Simple Custom CSS and JS - by Silkypress.com
 Saved: Nov 25 2022 | 22:27:19 */
-@charset "UTF-8";
 /*
 *	Services Menu Properties
 *	Please change the variable value below to update
diff --git a/themes/beaver/assets/css/critical/about-us-critical.css b/themes/beaver/assets/css/critical/about-us-critical.css
index 6b7b49a2f..ab329f862 100644
--- a/themes/beaver/assets/css/critical/about-us-critical.css
+++ b/themes/beaver/assets/css/critical/about-us-critical.css
@@ -1319,41 +1319,6 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 ::after,
 ::before {
diff --git a/themes/beaver/assets/css/critical/careers-critical.css b/themes/beaver/assets/css/critical/careers-critical.css
index 1d02f5a3f..3de975310 100644
--- a/themes/beaver/assets/css/critical/careers-critical.css
+++ b/themes/beaver/assets/css/critical/careers-critical.css
@@ -1,4 +1,9 @@
 @charset "UTF-8";
+
+/* CSS Variables Foundation (WP1.1) — careers bundle has no critical/base.css,
+   so --font-system-ui used below must be imported here */
+@import "foundations/css-variables.css";
+
 .fl-node-lru5v2k7htgj {
   width: 100%;
 }
@@ -1236,41 +1241,6 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 ::after,
 ::before {
diff --git a/themes/beaver/assets/css/critical/fl-common-modules.css b/themes/beaver/assets/css/critical/fl-common-modules.css
index 0bd4576c9..7117cacc8 100644
--- a/themes/beaver/assets/css/critical/fl-common-modules.css
+++ b/themes/beaver/assets/css/critical/fl-common-modules.css
@@ -261,7 +261,6 @@
 }
 
 /* Custom JT Rich Text Styles */
-@charset "UTF-8";
 .fl-rich-text p {
   margin-bottom: 0 !important;
 }
@@ -420,42 +419,6 @@ button::-moz-focus-inner {
 }
 
 /* Theme Base Styles (Bootstrap + JT Theme) */
-@charset "UTF-8";
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 *::before,
 *::after {
diff --git a/themes/beaver/assets/css/critical/free-consultation-critical.css b/themes/beaver/assets/css/critical/free-consultation-critical.css
index 938fefa38..0511f992d 100644
--- a/themes/beaver/assets/css/critical/free-consultation-critical.css
+++ b/themes/beaver/assets/css/critical/free-consultation-critical.css
@@ -225,20 +225,7 @@
   gap: 25px;
 }
 .fl-node-ot4qbyieg3xm .pp-infolist-title .pp-infolist-title-text {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 300;
   font-size: 18px;
 }
@@ -388,20 +375,7 @@
   padding-left: 35px;
 }
 .fl-node-bmn85orw3pj1 .pp-gf-content .gform_wrapper .gfield .gfield_label {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 14px;
 }
@@ -413,20 +387,7 @@
     [type="button"]
   ):not([type="image"]):not([type="file"]),
 .fl-node-bmn85orw3pj1 .pp-gf-content .gform_wrapper .gfield textarea {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 400;
   font-size: 18px;
 }
diff --git a/themes/beaver/assets/css/critical/homepage-critical.css b/themes/beaver/assets/css/critical/homepage-critical.css
index 8df3b213e..8488648fe 100644
--- a/themes/beaver/assets/css/critical/homepage-critical.css
+++ b/themes/beaver/assets/css/critical/homepage-critical.css
@@ -73,20 +73,7 @@
   justify-content: flex-start;
 }
 .fl-node-vo75i29j3fmz .pp-tabs-labels .pp-tabs-label .pp-tab-title {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 20px;
   text-align: left;
@@ -1052,20 +1039,7 @@
 
 /* Rich Text Module Specific Nodes */
 .fl-builder-content .fl-node-s3wp4tod8vfm .fl-rich-text {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 75px;
   line-height: 1;
@@ -1468,20 +1442,7 @@
   color: #121212;
 }
 .fl-node-vo75i29j3fmz .pp-tabs-panels .pp-tabs-label .pp-tab-title {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 20px;
   text-align: left;
@@ -1548,41 +1509,6 @@
 }
 
 /* Bootstrap Base Styles */
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 
 *,
 ::after,
@@ -1756,20 +1682,7 @@ button::-moz-focus-inner {
 body {
   background-color: #fff;
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-size: 18px;
   font-weight: 400;
   line-height: 1.6;
@@ -1780,20 +1693,7 @@ body {
 h1,
 h3 {
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   line-height: 1.4;
   text-transform: none;
@@ -1804,20 +1704,7 @@ h1 {
   line-height: 1;
   letter-spacing: -1px;
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   font-style: normal;
   text-transform: none;
@@ -1945,20 +1832,7 @@ button {
 .fl-page button:visited {
   color: #fff;
   background-color: #1a8cff;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 18px;
   line-height: 1.45;
diff --git a/themes/beaver/assets/css/critical/services-critical.css b/themes/beaver/assets/css/critical/services-critical.css
index 20d9c16a9..5779e099a 100644
--- a/themes/beaver/assets/css/critical/services-critical.css
+++ b/themes/beaver/assets/css/critical/services-critical.css
@@ -278,20 +278,7 @@
   border-bottom-right-radius: 14px;
 }
 .fl-node-0pigeztak1xl .pp-more-link {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
 }
 .fl-node-0pigeztak1xl .pp-infobox .pp-more-link {
@@ -364,20 +351,7 @@
   border-bottom-right-radius: 14px;
 }
 .fl-node-ugiypbhnvlfw .pp-more-link {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
 }
 .fl-node-ugiypbhnvlfw .pp-infobox .pp-more-link {
@@ -450,20 +424,7 @@
   border-bottom-right-radius: 14px;
 }
 .fl-node-h2wjp3zb7afk .pp-more-link {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
 }
 .fl-node-h2wjp3zb7afk .pp-infobox .pp-more-link {
diff --git a/themes/beaver/assets/css/critical/single-careers.css b/themes/beaver/assets/css/critical/single-careers.css
index 1f300b66e..f8cb60bb0 100644
--- a/themes/beaver/assets/css/critical/single-careers.css
+++ b/themes/beaver/assets/css/critical/single-careers.css
@@ -1,4 +1,9 @@
 @charset "UTF-8";
+
+/* CSS Variables Foundation (WP1.1) — single-career bundle has no critical/base.css,
+   so --font-system-ui must be imported here before use */
+@import "foundations/css-variables.css";
+
 .fl-node-d09l8jp3qrgf {
   width: 100%;
 }
@@ -52,20 +57,7 @@ h2 {
 h1,
 h2 {
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   line-height: 1.4;
   text-transform: none;
@@ -1436,20 +1428,7 @@ body:not(.single-fl-theme-layout)
   margin-bottom: 0;
 }
 .fl-node-rnjk7gex4iu1 .pp-social-share-content .pp-share-button-title {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 300;
   font-size: 20px;
 }
@@ -1629,20 +1608,7 @@ body:not(.single-fl-theme-layout)
   font-size: 30px;
 }
 .fl-node-nkrzpgyfwo7s .pp-gf-content .gform_wrapper .gfield .gfield_label {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 14px;
 }
@@ -1653,20 +1619,7 @@ body:not(.single-fl-theme-layout)
   input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not(
     [type="button"]
   ):not([type="image"]):not([type="file"]) {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 400;
   font-size: 18px;
 }
@@ -1701,41 +1654,6 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 ::after,
 ::before {
@@ -1856,20 +1774,7 @@ h1,
 h2,
 h3 {
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   line-height: 1.4;
   text-transform: none;
@@ -1880,20 +1785,7 @@ h1 {
   line-height: 1;
   letter-spacing: -1px;
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   font-style: normal;
   text-transform: none;
@@ -2014,20 +1906,7 @@ input[type="text"]:-ms-input-placeholder {
 .fl-page button:visited {
   color: #fff;
   background-color: #1a8cff;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 18px;
   line-height: 1.45;
diff --git a/themes/beaver/assets/css/critical/single-clients.css b/themes/beaver/assets/css/critical/single-clients.css
index 5d8d8eb0d..2c3ab2321 100644
--- a/themes/beaver/assets/css/critical/single-clients.css
+++ b/themes/beaver/assets/css/critical/single-clients.css
@@ -1377,41 +1377,6 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 ::after,
 ::before {
@@ -1514,20 +1479,7 @@ body {
 }
 h1 {
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   line-height: 1.4;
   text-transform: none;
@@ -1538,20 +1490,7 @@ h1 {
   line-height: 1;
   letter-spacing: -1px;
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   font-style: normal;
   text-transform: none;
@@ -1623,20 +1562,7 @@ button {
 .fl-page button:visited {
   color: #fff;
   background-color: #1a8cff;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 18px;
   line-height: 1.45;
diff --git a/themes/beaver/assets/css/critical/single-services.css b/themes/beaver/assets/css/critical/single-services.css
index ab81592c6..8d260d4ae 100644
--- a/themes/beaver/assets/css/critical/single-services.css
+++ b/themes/beaver/assets/css/critical/single-services.css
@@ -1193,7 +1193,6 @@ body:not(.single-fl-theme-layout)
 .fl-node-header-nav-row .fl-row-content {
   min-width: 0;
 }
-@charset "UTF-8";
 .fl-rich-text p {
   margin-bottom: 0 !important;
 }
@@ -1330,42 +1329,6 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-@charset "UTF-8";
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 *::before,
 *::after {
@@ -1519,20 +1482,7 @@ body {
 }
 h1 {
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   line-height: 1.4;
   text-transform: none;
@@ -1543,20 +1493,7 @@ h1 {
   line-height: 1;
   letter-spacing: -1px;
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   font-style: normal;
   text-transform: none;
@@ -1692,20 +1629,7 @@ button {
 .fl-page a.fl-button:visited {
   color: #fff;
   background-color: #1a8cff;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 18px;
   line-height: 1.45;
diff --git a/themes/beaver/assets/css/critical/single-use-cases.css b/themes/beaver/assets/css/critical/single-use-cases.css
index ef1d09805..876cbb463 100644
--- a/themes/beaver/assets/css/critical/single-use-cases.css
+++ b/themes/beaver/assets/css/critical/single-use-cases.css
@@ -1,3 +1,7 @@
+/* CSS Variables Foundation (WP1.1) — single-use-cases bundle has no critical/base.css,
+   so --font-system-ui must be imported here before use */
+@import "foundations/css-variables.css";
+
 .fl-builder-content *,
 .fl-builder-content *:before,
 .fl-builder-content *:after {
@@ -1205,7 +1209,6 @@ body:not(.single-fl-theme-layout)
 .fl-node-header-nav-row .fl-row-content {
   min-width: 0;
 }
-@charset "UTF-8";
 .fl-rich-text p {
   margin-bottom: 0 !important;
 }
@@ -1356,42 +1359,6 @@ button::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
-@charset "UTF-8";
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
-  --font-family-sans-serif:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
-    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace:
-    SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
-}
 *,
 *::before,
 *::after {
@@ -1558,20 +1525,7 @@ body {
 }
 h1 {
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   line-height: 1.4;
   text-transform: none;
@@ -1582,20 +1536,7 @@ h1 {
   line-height: 1;
   letter-spacing: -1px;
   color: #121212;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 800;
   font-style: normal;
   text-transform: none;
@@ -1731,20 +1672,7 @@ button {
 .fl-page a.fl-button:visited {
   color: #fff;
   background-color: #1a8cff;
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 18px;
   line-height: 1.45;
diff --git a/themes/beaver/assets/css/critical/use-cases-critical.css b/themes/beaver/assets/css/critical/use-cases-critical.css
deleted file mode 100644
index bfb2de4ef..000000000
--- a/themes/beaver/assets/css/critical/use-cases-critical.css
+++ /dev/null
@@ -1,278 +0,0 @@
-/* Page-specific row styling */
-.fl-node-g2six6yjldnm > .fl-row-content-wrap {
-  background-repeat: no-repeat;
-  background-position: 50%;
-  background-attachment: scroll;
-  background-size: cover;
-}
-.fl-node-g2six6yjldnm > .fl-row-content-wrap {
-  padding-top: 200px;
-  padding-bottom: 130px;
-}
-@media (max-width: 1115px) {
-  .fl-node-g2six6yjldnm.fl-row > .fl-row-content-wrap {
-    padding-top: 150px;
-    padding-bottom: 50px;
-  }
-}
-@media (max-width: 860px) {
-  .fl-node-g2six6yjldnm.fl-row > .fl-row-content-wrap {
-    padding-top: 100px;
-    padding-bottom: 50px;
-  }
-}
-
-/* Page-specific column widths */
-.fl-node-wsyxila978cn {
-  width: 100%;
-}
-.fl-node-wsyxila978cn > .fl-col-content {
-  padding-top: 0;
-}
-@media (max-width: 860px) {
-  .fl-node-wsyxila978cn.fl-col > .fl-col-content {
-    padding-top: 0;
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-/* Page-specific heading module */
-.fl-node-w87g4xknctej.fl-module-heading .fl-heading {
-  text-align: center;
-}
-.fl-node-w87g4xknctej > .fl-module-content {
-  margin-top: 0;
-  margin-right: 200px;
-  margin-left: 200px;
-}
-@media (max-width: 1115px) {
-  .fl-node-w87g4xknctej.fl-module > .fl-module-content {
-    margin-right: 50px;
-    margin-left: 50px;
-  }
-}
-@media (max-width: 860px) {
-  .fl-node-w87g4xknctej.fl-module > .fl-module-content {
-    margin-top: 10px;
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-
-/* Page-specific rich text module */
-.fl-builder-content .fl-node-fmku6gzyasrn .fl-rich-text,
-.fl-builder-content .fl-node-fmku6gzyasrn .fl-rich-text *:not(b, strong) {
-  font-size: 20px;
-  text-align: center;
-}
-.fl-node-fmku6gzyasrn > .fl-module-content {
-  margin-top: 20px;
-  margin-right: 300px;
-  margin-left: 300px;
-}
-@media (max-width: 1115px) {
-  .fl-node-fmku6gzyasrn.fl-module > .fl-module-content {
-    margin-right: 50px;
-    margin-left: 50px;
-  }
-}
-@media (max-width: 860px) {
-  .fl-node-fmku6gzyasrn.fl-module > .fl-module-content {
-    margin-top: 15px;
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-
-/* PowerPack tabs module */
-.fl-node-vbmpyhxt6i7k .pp-tabs-default .pp-tabs-label.pp-tab-active {
-  border-color:;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-default .pp-tabs-panels,
-.fl-node-vbmpyhxt6i7k .pp-tabs-default .pp-tabs-panel {
-  border-color:;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-vertical .pp-tabs-label {
-  text-align: left;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-labels .pp-tabs-label .pp-tab-label-flex {
-  justify-content: flex-start;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-panels .pp-tabs-panel-content {
-  color:;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs .pp-tabs-label {
-  color: #121212;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs .pp-tabs-label.pp-tab-active {
-  background-color: #f5f6f8;
-  color: #121212;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-panel-label .pp-toggle-icon {
-  font-size: 16px;
-  color: #333;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs .pp-tabs-label.pp-tab-active .pp-toggle-icon {
-  color: #121212;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-labels .pp-tabs-label .pp-tab-title,
-.fl-node-vbmpyhxt6i7k .pp-tabs-panels .pp-tabs-label .pp-tab-title {
-  font-family:
-    system-ui,
-    -apple-system,
-    "Segoe UI",
-    Roboto,
-    "Helvetica Neue",
-    "Noto Sans",
-    "Liberation Sans",
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol",
-    "Noto Color Emoji";
-  font-weight: 700;
-  font-size: 20px;
-  text-align: left;
-}
-.fl-node-vbmpyhxt6i7k .pp-tabs-panels .pp-tabs-panel-content {
-  padding-top: 0;
-  padding-right: 0;
-  padding-bottom: 0;
-  padding-left: 100px;
-}
-@media (max-width: 1115px) {
-  .fl-node-vbmpyhxt6i7k .pp-tabs-panels .pp-tabs-panel-content {
-    padding-left: 50px;
-  }
-}
-@media (max-width: 860px) {
-  .fl-node-vbmpyhxt6i7k .pp-tabs-labels .pp-tabs-label .pp-tab-title,
-  .fl-node-vbmpyhxt6i7k .pp-tabs-panels .pp-tabs-label .pp-tab-title {
-    font-size: 16px;
-  }
-  .fl-node-vbmpyhxt6i7k .pp-tabs-panels .pp-tabs-panel-content {
-    padding-top: 30px;
-    padding-right: 0;
-    padding-bottom: 30px;
-    padding-left: 0;
-  }
-}
-.fl-node-vbmpyhxt6i7k > .fl-module-content {
-  margin-top: 60px;
-}
-@media (max-width: 860px) {
-  .fl-node-vbmpyhxt6i7k.fl-module > .fl-module-content {
-    margin-top: 50px;
-  }
-}
-
-/* PowerPack reviews swiper button styling */
-.fl-node-08kl1yzxeout .pp-swiper-button svg {
-  width: 24px;
-  height: 24px;
-}
-
-.fl-node-g2six6yjldnm .fl-row-content {
-  min-width: 0;
-}
-
-/* Custom use-cases page styling - current menu ancestor */
-header ul.menu > li.current-page-ancestor > .pp-has-submenu-container > a {
-  color: #1a8cff !important;
-}
-header
-  ul.menu
-  > li.current-page-ancestor
-  > .pp-has-submenu-container
-  > a
-  .pp-menu-toggle::before {
-  border-color: #1a8cff;
-}
-
-/* JetThoughts tabs custom styling */
-.jt-tabs .pp-tabs .pp-tabs-labels {
-  width: 43% !important;
-}
-.jt-tabs .pp-tabs .pp-tabs-labels .pp-tabs-label {
-  padding: 28px 35px;
-  border-radius: 14px;
-  border: unset !important;
-}
-.jt-tabs .pp-tabs .pp-tabs-labels .pp-tabs-label:not(:first-child) {
-  margin-top: 10px;
-}
-.jt-tabs .pp-tabs .pp-tabs-panels {
-  width: 57% !important;
-}
-.jt-tabs .pp-tabs .pp-tabs-panels .pp-tabs-panel .pp-tabs-panel-content div h3 {
-  font-size: 45px;
-  margin-top: 0;
-  margin-bottom: 30px;
-}
-@media (max-width: 1115px) {
-  .jt-tabs
-    .pp-tabs
-    .pp-tabs-panels
-    .pp-tabs-panel
-    .pp-tabs-panel-content
-    div
-    h3 {
-    font-size: 34px;
-  }
-}
-.jt-tabs .pp-tabs .pp-tabs-panels .pp-tabs-panel .pp-tabs-panel-content div ul {
-  margin-top: 0;
-  padding-left: 0;
-  list-style: none;
-  margin-bottom: 32px !important;
-}
-.jt-tabs .pp-tabs .pp-tabs-panels .pp-tabs-panel .pp-tabs-panel-content div a {
-  padding: 12px 25px;
-  background-color: #1a8cff;
-  color: #fff;
-  border-radius: 25px;
-  font-family: roboto, sans-serif !important;
-  font-weight: 700;
-  text-decoration: none;
-  display: inline-block;
-}
-
-@media (max-width: 860px) {
-  .jt-tabs .pp-tabs .pp-tabs-panels {
-    width: 100% !important;
-  }
-  .jt-tabs .pp-tabs .pp-tabs-panels .pp-tabs-panel .pp-tabs-label {
-    background-color: #f5f6f8 !important;
-    padding: 20px !important;
-  }
-  .jt-tabs
-    .pp-tabs
-    .pp-tabs-panels
-    .pp-tabs-panel
-    .pp-tabs-panel-content
-    div
-    h3 {
-    font-size: 30px;
-    margin-bottom: 20px;
-  }
-  .jt-tabs
-    .pp-tabs
-    .pp-tabs-panels
-    .pp-tabs-panel
-    .pp-tabs-panel-content
-    div
-    ul {
-    margin-bottom: 22px !important;
-  }
-  .jt-tabs
-    .pp-tabs
-    .pp-tabs-panels
-    .pp-tabs-panel
-    .pp-tabs-panel-content
-    div
-    a {
-    padding: 10px 25px;
-  }
-}
diff --git a/themes/beaver/assets/css/foundations/css-variables.css b/themes/beaver/assets/css/foundations/css-variables.css
index af65a0b8c..f9dba9050 100644
--- a/themes/beaver/assets/css/foundations/css-variables.css
+++ b/themes/beaver/assets/css/foundations/css-variables.css
@@ -5,4 +5,9 @@
 :root {
   /* System UI Font Stack - Pattern #4 (330 occurrences) */
   --font-system-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  /* Brand Ruby red (JetVelocity design system; design.md "Ruby red").
+     NOT --color-primary: that token already exists as #1a8cff (blue)
+     with 89 usages. Name approved by Paul 2026-07-11. */
+  --color-ruby: #cc342d;
 }
diff --git a/themes/beaver/assets/css/navigation.css b/themes/beaver/assets/css/navigation.css
index 9ddb90742..7606c8abe 100644
--- a/themes/beaver/assets/css/navigation.css
+++ b/themes/beaver/assets/css/navigation.css
@@ -31,7 +31,7 @@ body {
    leaks onto pagination Next button (which is `<li class="page-item"><a class="btn btn-primary">`). */
 .btn.btn-primary,
 .btn.btn-primary:visited {
-  background-color: #cc342d;
+  background-color: var(--color-ruby);
   color: #fff !important;
   padding: 14px 28px;
   border-radius: 8px;
@@ -56,7 +56,7 @@ body {
 a.fl-button,
 a.fl-button:visited,
 .fl-button-wrap a {
-  background-color: #cc342d !important;
+  background-color: var(--color-ruby) !important;
   color: #fff !important;
   padding: 14px 28px !important;
   border-radius: 8px !important;
@@ -80,7 +80,7 @@ a.fl-button:hover,
    and .fl-button so all CTAs read as one brand action. */
 a.action-button,
 a.action-button:visited {
-  background-color: #cc342d !important;
+  background-color: var(--color-ruby) !important;
   color: #fff !important;
   padding: 14px 28px !important;
   border-radius: 8px !important;
diff --git a/themes/beaver/assets/css/services-layout.css b/themes/beaver/assets/css/services-layout.css
index 99267ea12..40401229d 100644
--- a/themes/beaver/assets/css/services-layout.css
+++ b/themes/beaver/assets/css/services-layout.css
@@ -1,7 +1,6 @@
 /******* Do not edit this file *******
 Simple Custom CSS and JS - by Silkypress.com
 Saved: Nov 25 2022 | 22:27:19 */
-@charset "UTF-8";
 /*
 *	Services Menu Properties
 *	Please change the variable value below to update
diff --git a/themes/beaver/assets/css/single-post.css b/themes/beaver/assets/css/single-post.css
index 1f3fc7176..f3aa4e1d6 100644
--- a/themes/beaver/assets/css/single-post.css
+++ b/themes/beaver/assets/css/single-post.css
@@ -157,7 +157,7 @@
   min-height: 5rem;
 }
 .course-prev-next__link:hover {
-  border-color: #cc342d;
+  border-color: var(--color-ruby);
   background: #fff5f5;
   text-decoration: none;
 }
@@ -176,7 +176,7 @@
 .course-prev-next__direction {
   font-size: 0.8125rem;
   font-weight: 600;
-  color: #cc342d;
+  color: var(--color-ruby);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
diff --git a/themes/beaver/assets/css/skin-65eda28877e04.css b/themes/beaver/assets/css/skin-65eda28877e04.css
index 7d350aa74..f4f85866d 100644
--- a/themes/beaver/assets/css/skin-65eda28877e04.css
+++ b/themes/beaver/assets/css/skin-65eda28877e04.css
@@ -1,6 +1,9 @@
 body {
   background-color: #fff;
   color: #121212;
+  /* KEEP LITERAL: var() form gets deduped against the earlier critical body var rule
+     by postcss-delete-duplicate-css (production only), unmasking the short-stack
+     body rule. See TASK-TRACKER 2026-07-11 sprint 3. */
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 18px;
   font-weight: 400;
@@ -22,6 +25,7 @@ body.modal-open .media-modal-close:focus {
 
 h1, h2, h3, h4, h5, h6 {
   color: #121212;
+  /* KEEP LITERAL: same minifier-hoist trap as the h1 rule below. 2026-07-11. */
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: 800;
   line-height: 1.4;
@@ -42,6 +46,9 @@ h1 {
   line-height: 1;
   letter-spacing: -1px;
   color: #121212;
+  /* KEEP LITERAL: converting to var(--font-system-ui) makes this mergeable with the
+     early critical h1 var rule; the production minifier hoists skin h1 styles there,
+     letting Bootstrap reboot (fl-common-modules) win: h1 70px->40px. 2026-07-11. */
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-weight: 800;
   font-style: normal;
@@ -1053,7 +1060,7 @@ input[type=text].fl-search-input:focus {
 .fl-page .fl-module-woocommerce a.button, .fl-page .fl-module-woocommerce button.button.alt, .fl-page .fl-post-module-woo-button button[type=submit], .fl-page .fl-post-module-woo-button button[type=submit].alt.disabled, .fl-page .fl-post-module-woo-button a.button {
   color: #515151;
   background-color: #ebe9eb;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 16px;
   line-height: 1.2;
@@ -1077,7 +1084,7 @@ input[type=text].fl-search-input:focus {
 .woocommerce-page ul.products li.product a.button, .woocommerce-page .woocommerce-message a.button, .woocommerce-page .woocommerce-message a.button.wc-forward, .woocommerce-page .woocommerce a.button.wc-forward, .woocommerce-page button.button, .woocommerce-page button.button.alt, .woocommerce-page a.button, .woocommerce-page a.button.alt, .woocommerce-page .woocommerce button[type=submit], .woocommerce-page button[type=submit].alt.disabled {
   color: #515151;
   background-color: #ebe9eb;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 16px;
   line-height: 1.2;
@@ -2384,7 +2391,7 @@ ul.wp-block-latest-posts.alignwide, ul.wp-block-latest-posts.alignfull, ul.wp-bl
 .fl-page button:visited, .fl-responsive-preview-content button:visited, .fl-button-lightbox-content button:visited, .fl-page input[type=button], .fl-responsive-preview-content input[type=button], .fl-button-lightbox-content input[type=button], .fl-page input[type=submit], .fl-responsive-preview-content input[type=submit], .fl-button-lightbox-content input[type=submit], .fl-page a.fl-button, .fl-responsive-preview-content a.fl-button, .fl-button-lightbox-content a.fl-button, .fl-page a.fl-button:visited, .fl-responsive-preview-content a.fl-button:visited, .fl-button-lightbox-content a.fl-button:visited, .fl-page a.button, .fl-responsive-preview-content a.button, .fl-button-lightbox-content a.button, .fl-page a.button:visited, .fl-responsive-preview-content a.button:visited, .fl-button-lightbox-content a.button:visited, .fl-page button.button, .fl-responsive-preview-content button.button, .fl-button-lightbox-content button.button, .fl-page button.button:visited, .fl-responsive-preview-content button.button:visited, .fl-button-lightbox-content button.button:visited, .fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle, .fl-responsive-preview-content .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle, .fl-button-lightbox-content .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle, .fl-page .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:visited, .fl-responsive-preview-content .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:visited, .fl-button-lightbox-content .fl-page-nav-toggle-button .fl-page-nav .navbar-toggle:visited {
   color: #fff;
   background-color: #1a8cff;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-system-ui);
   font-weight: 700;
   font-size: 18px;
   line-height: 1.45;
diff --git a/themes/beaver/assets/css/style.css b/themes/beaver/assets/css/style.css
index 25e7d8dda..5499feba6 100644
--- a/themes/beaver/assets/css/style.css
+++ b/themes/beaver/assets/css/style.css
@@ -320,7 +320,7 @@ input[type=submit]:disabled {
 }
 
 .blog .post-tags a:hover {
-  color: #cc342d;
+  color: var(--color-ruby);
   text-decoration: none;
 }
 
@@ -344,7 +344,7 @@ input[type=submit]:disabled {
   text-decoration: none;
 }
 .blog .post-tags-card a:hover {
-  color: #cc342d;
+  color: var(--color-ruby);
   text-decoration: none;
 }
 .blog .post-tags-card .post-tags-sep {
@@ -477,7 +477,7 @@ input[type=submit]:disabled {
 /* Brand-colored blockquotes — true callout treatment (background + padding + radius) */
 .blog blockquote {
   background: rgba(204, 52, 45, 0.05);
-  border-left: 6px solid #cc342d;
+  border-left: 6px solid var(--color-ruby);
   box-shadow: none;
   margin: 48px 0;
   padding: 24px 28px;
@@ -525,7 +525,7 @@ input[type=submit]:disabled {
 .blog li a.cta-link,
 .blog .cta-link {
   display: inline-block;
-  background: #cc342d;
+  background: var(--color-ruby);
   color: #ffffff;
   text-decoration: none;
   padding: 14px 28px;
@@ -695,8 +695,8 @@ input[type=submit]:disabled {
 .blog .cta-link--ghost,
 .blog .course-hero-ctas a.cta-link--ghost {
   background: transparent;
-  border: 2px solid #cc342d;
-  color: #cc342d;
+  border: 2px solid var(--color-ruby);
+  color: var(--color-ruby);
   padding: 12px 26px;
 }
 .blog .cta-link--ghost:hover,
@@ -705,7 +705,7 @@ input[type=submit]:disabled {
   color: #a8231e;
 }
 .blog .course-hero-ctas a.cta-link--ghost:visited {
-  color: #cc342d;
+  color: var(--color-ruby);
 }
 
 /* Module cards — one card per module in the syllabus. Breaks the
@@ -723,7 +723,7 @@ input[type=submit]:disabled {
   font-weight: 700;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: #cc342d;
+  color: var(--color-ruby);
   margin-bottom: 6px;
 }
 .blog .module-card h3,
@@ -812,7 +812,7 @@ input[type=submit]:disabled {
   position: absolute;
   left: 0;
   top: 1px;
-  color: #cc342d;
+  color: var(--color-ruby);
   font-weight: 700;
   font-size: 20px;
 }
diff --git a/themes/beaver/layouts/404.html b/themes/beaver/layouts/404.html
index e2238fdc0..e2518655f 100644
--- a/themes/beaver/layouts/404.html
+++ b/themes/beaver/layouts/404.html
@@ -1,5 +1,6 @@
 {{ define "header" }}
   {{- $cssResources := slice
+    (resources.Get "css/foundations/css-variables.css")
     (resources.Get "css/dynamic-404-590.css" | resources.ExecuteAsTemplate "css/dynamic.css" .)
     (resources.Get "css/404.css")
     (resources.Get "css/vendors/base-4.min.css")
diff --git a/themes/beaver/layouts/baseof.html b/themes/beaver/layouts/baseof.html
index d2ede01b9..0ea975af0 100644
--- a/themes/beaver/layouts/baseof.html
+++ b/themes/beaver/layouts/baseof.html
@@ -21,7 +21,9 @@
       content="{{ $browserConfig.Permalink }}" />
     <meta name="theme-color" content="#ffffff" />
 
-    {{- $navigationResources := slice (resources.Get "css/navigation.css") -}}
+    {{- /* css-variables first: inlined on every page so design tokens resolve site-wide,
+           including bundles that don't load critical/base.css (e.g. /blog/) */ -}}
+    {{- $navigationResources := slice (resources.Get "css/foundations/css-variables.css") (resources.Get "css/navigation.css") -}}
     {{ partialCached "assets/css-inline.html" (dict "resources" $navigationResources "bundleName" "navigation") "navigation" }}
 
     {{- $componentsResources := slice (resources.Get "css/components.css") -}}
diff --git a/themes/beaver/layouts/course/single.html b/themes/beaver/layouts/course/single.html
index 12e85d769..56ee446a8 100644
--- a/themes/beaver/layouts/course/single.html
+++ b/themes/beaver/layouts/course/single.html
@@ -1,6 +1,7 @@
 {{ define "header" }}
 
   {{- $cssFiles := slice
+    (resources.Get "css/foundations/css-variables.css")
     (resources.Get "css/dynamic-icons.css" | resources.ExecuteAsTemplate "css/dynamic586.css" .)
     (resources.Get "css/586.css")
     (resources.Get "css/style.css")
diff --git a/themes/beaver/layouts/list.html b/themes/beaver/layouts/list.html
index b4a343ca8..2fd4cc4c7 100644
--- a/themes/beaver/layouts/list.html
+++ b/themes/beaver/layouts/list.html
@@ -4,6 +4,7 @@
 
 {{ define "header" }}
   {{- $cssFiles := slice
+    (resources.Get "css/foundations/css-variables.css")
     (resources.Get "css/dynamic-icons.css" | resources.ExecuteAsTemplate "css/dynamic586.css" .)
     (resources.Get "css/586.css")
     (resources.Get "css/style.css")
diff --git a/themes/beaver/layouts/single.html b/themes/beaver/layouts/single.html
index a82f27fc6..89c9934b6 100644
--- a/themes/beaver/layouts/single.html
+++ b/themes/beaver/layouts/single.html
@@ -1,6 +1,7 @@
 {{ define "header" }}
 
   {{- $cssFiles := slice
+    (resources.Get "css/foundations/css-variables.css")
     (resources.Get "css/dynamic-icons.css" | resources.ExecuteAsTemplate "css/dynamic586.css" .)
     (resources.Get "css/586.css")
     (resources.Get "css/style.css")