From c0a2248673cc8a4f5d5501c086358f9f667ea3cf Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Mon, 27 Jul 2026 09:12:24 -0500
Subject: [PATCH 1/7] Switch cookie consent runtime to WCP API

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>

Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 src/frontend/astro.config.mjs                 |  3 -
 .../src/components/FooterSocials.astro        |  2 +-
 .../src/components/starlight/Head.astro       | 93 +++++++++++++++++--
 .../src/components/starlight/Header.astro     |  4 +-
 .../components/starlight/SocialIcons.astro    |  2 +-
 5 files changed, 87 insertions(+), 17 deletions(-)

diff --git a/src/frontend/astro.config.mjs b/src/frontend/astro.config.mjs
index 21a61b541..c47d03ed5 100644
--- a/src/frontend/astro.config.mjs
+++ b/src/frontend/astro.config.mjs
@@ -4,7 +4,6 @@ import { unified } from '@astrojs/markdown-remark';
 import { sidebarTopics } from './config/sidebar/sidebar.topics.ts';
 import { redirects } from './config/redirects.mjs';
 import { iconPacks } from './config/icon-packs.mjs';
-import { cookieConfig } from './config/cookie.config';
 import { locales } from './config/locales.ts';
 import { headAttrs } from './config/head.attrs.ts';
 import { socialConfig } from './config/socials.config.ts';
@@ -20,7 +19,6 @@ import starlightLlmsTxt from 'starlight-llms-txt';
 import starlightScrollToTop from 'starlight-scroll-to-top';
 import starlightSidebarTopics from 'starlight-sidebar-topics';
 import starlightPageActions from 'starlight-page-actions';
-import jopSoftwarecookieconsent from '@jop-software/astro-cookieconsent';
 import buildTiming from './config/build-timing.mjs';
 import UnoCSS from 'unocss/astro';
 import Icons from 'starlight-plugin-icons';
@@ -229,7 +227,6 @@ export default defineConfig({
       optimize: true,
       gfm: true,
     }),
-    jopSoftwarecookieconsent(cookieConfig),
     ...(isBuildTimingEnabled ? [buildTiming()] : []),
   ],
   build: {
diff --git a/src/frontend/src/components/FooterSocials.astro b/src/frontend/src/components/FooterSocials.astro
index f44417df5..81a47eab4 100644
--- a/src/frontend/src/components/FooterSocials.astro
+++ b/src/frontend/src/components/FooterSocials.astro
@@ -9,7 +9,7 @@ import CookiesSvg from '@assets/icons/cookies.svg';
     <button
       type="button"
       class="footer-mobile-tool-btn cookie-consent-btn"
-      data-cc="show-preferencesModal"
+      data-cookie-manage-consent
       data-tour-target="cookie-preferences"
       data-tour-step="cookie-preferences"
       title="Cookie preferences"
diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index 2cf4ad087..e1a416a30 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -201,26 +201,99 @@ function computeSourceUrl() {
   })();
 </script>
 
+<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
 <script is:inline>
   (function () {
-    if (window.__aspireCookieConsentReloadInitialized) return;
-    window.__aspireCookieConsentReloadInitialized = true;
+    if (window.__aspireWcpConsentInitialized) return;
+    window.__aspireWcpConsentInitialized = true;
+
+    function toCulture(value) {
+      var raw = (value || '').trim().replace('_', '-');
+      if (!raw) return 'en-US';
+      var parts = raw.split('-');
+      var lang = (parts[0] || 'en').toLowerCase();
+      var region = parts[1] ? parts[1].toUpperCase() : '';
+      return region ? lang + '-' + region : lang;
+    }
 
-    var saveRoles = new Set(['all', 'necessary', 'save']);
+    function toLegacyCategories(consent) {
+      if (!consent || typeof consent !== 'object') return null;
+      var categories = ['necessary'];
+      if (consent.Analytics) categories.push('analytics');
+      if (consent.SocialMedia) categories.push('socialmedia');
+      if (consent.Advertising) categories.push('advertising');
+      return categories.sort();
+    }
 
-    document.addEventListener('click', function (event) {
-      var target = event.target;
-      if (!(target instanceof Element)) return;
+    function syncConsentState(consent) {
+      window.__aspireConsentCategories = toLegacyCategories(consent);
+    }
 
-      var actionButton = target.closest('.pm__btn[data-role]');
-      if (!(actionButton instanceof HTMLButtonElement)) return;
+    function withSiteConsent(callback) {
+      var siteConsent = window.__aspireWcpSiteConsent;
+      if (!siteConsent) return false;
+      callback(siteConsent);
+      return true;
+    }
 
-      var actionRole = actionButton.getAttribute('data-role');
-      if (!actionRole || !saveRoles.has(actionRole)) return;
+    function openManageConsent(event) {
+      var target = event.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest('[data-cookie-manage-consent]')) return;
+      event.preventDefault();
+      withSiteConsent(function (siteConsent) {
+        if (siteConsent.isConsentRequired) {
+          siteConsent.manageConsent();
+        }
+      });
+    }
 
+    function onConsentChanged(nextConsent) {
+      syncConsentState(nextConsent);
       window.setTimeout(function () {
         window.location.reload();
       }, 0);
+    }
+
+    function initWcpConsent() {
+      var wcp = window.WcpConsent;
+      if (!wcp || typeof wcp.init !== 'function') {
+        window.setTimeout(initWcpConsent, 100);
+        return;
+      }
+
+      var culture = toCulture(document.documentElement.lang || navigator.language || 'en-US');
+      var themeName = (document.documentElement.getAttribute('data-theme') || '').toLowerCase();
+      var theme = themeName === 'dark' ? wcp.themes.dark : wcp.themes.light;
+
+      wcp.init(
+        culture,
+        document.body,
+        function (err, siteConsent) {
+          if (err || !siteConsent) return;
+          window.__aspireWcpSiteConsent = siteConsent;
+          syncConsentState(siteConsent.getConsent());
+          if (typeof siteConsent.onConsentChanged === 'function') {
+            siteConsent.onConsentChanged(onConsentChanged);
+          }
+        },
+        onConsentChanged,
+        theme
+      );
+    }
+
+    document.addEventListener('click', openManageConsent);
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initWcpConsent, { once: true });
+    } else {
+      initWcpConsent();
+    }
+
+    document.addEventListener('astro:page-load', function () {
+      withSiteConsent(function (siteConsent) {
+        syncConsentState(siteConsent.getConsent());
+      });
     });
   })();
 </script>
diff --git a/src/frontend/src/components/starlight/Header.astro b/src/frontend/src/components/starlight/Header.astro
index e3e471207..89e2d67b6 100644
--- a/src/frontend/src/components/starlight/Header.astro
+++ b/src/frontend/src/components/starlight/Header.astro
@@ -39,7 +39,7 @@ const tryAspireUrl = addLocaleToPath('/get-started/first-app/', locale);
     <button
       type="button"
       class="header-icon-btn cookie-consent-btn"
-      data-cc="show-preferencesModal"
+      data-cookie-manage-consent
       data-tour-target="cookie-preferences"
       data-tour-step="cookie-preferences"
       aria-label="Open cookie preferences dialog"
@@ -79,7 +79,7 @@ const tryAspireUrl = addLocaleToPath('/get-started/first-app/', locale);
     <button
       type="button"
       class="header-icon-btn cookie-consent-btn"
-      data-cc="show-preferencesModal"
+      data-cookie-manage-consent
       data-tour-target="cookie-preferences"
       data-tour-step="cookie-preferences"
       aria-label="Open cookie preferences dialog"
diff --git a/src/frontend/src/components/starlight/SocialIcons.astro b/src/frontend/src/components/starlight/SocialIcons.astro
index b0aae6c55..43f336a73 100644
--- a/src/frontend/src/components/starlight/SocialIcons.astro
+++ b/src/frontend/src/components/starlight/SocialIcons.astro
@@ -32,7 +32,7 @@ import CookiesSvg from '@assets/icons/cookies.svg';
   <button
     type="button"
     class="sl-flex external-link cookie-consent-btn"
-    data-cc="show-preferencesModal"
+    data-cookie-manage-consent
     title="Cookie preferences"
     data-placement="top"
     aria-label="Open cookie preferences dialog"

From b196756d864cd95c31ce0f8ea76dcf1baa3aa361 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Mon, 27 Jul 2026 11:03:05 -0500
Subject: [PATCH 2/7] Theme WCP consent UI, add scroll-lock, prune obsolete
 cookie tests

Fully restyle the WCP cookie banner and preferences dialog to match the
Aspire theme via the team-owned wcp-consent.css (our colors, spacing,
WCAG AA contrast, and the brand icon). The dialog now re-themes live when
the user toggles light/dark, and the underlying page is scroll-locked
while the preferences dialog is open.

Remove the last remnants of the old vanilla-cookieconsent integration:
- delete config/cookie.config.ts and the old cookieconsent-custom.css
- drop @jop-software/astro-cookieconsent + vanilla-cookieconsent deps
- remove the 2 obsolete behavioral cookie e2e tests and their dead
  helpers; the WCP banner is geo-gated/CDN-loaded and can't be exercised
  in CI, so compliance is verified by the WCP scan instead
- rework the integrations-gallery banner suppression to hide the WCP
  banner element instead of pre-seeding the removed cc_cookie shape

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 src/frontend/config/cookie.config.ts          | 671 ------------------
 src/frontend/package.json                     |   4 +-
 src/frontend/pnpm-lock.yaml                   |  22 +-
 .../src/components/starlight/Head.astro       | 131 +++-
 .../src/styles/cookieconsent-custom.css       | 117 ---
 src/frontend/src/styles/site.css              |   2 +-
 src/frontend/src/styles/wcp-consent.css       | 220 ++++++
 src/frontend/tests/e2e/helpers.ts             |  64 --
 .../tests/e2e/integrations-gallery.spec.ts    |  72 +-
 src/frontend/tests/e2e/ui-regressions.spec.ts |  28 -
 10 files changed, 343 insertions(+), 988 deletions(-)
 delete mode 100644 src/frontend/config/cookie.config.ts
 delete mode 100644 src/frontend/src/styles/cookieconsent-custom.css
 create mode 100644 src/frontend/src/styles/wcp-consent.css

diff --git a/src/frontend/config/cookie.config.ts b/src/frontend/config/cookie.config.ts
deleted file mode 100644
index 0255f6d13..000000000
--- a/src/frontend/config/cookie.config.ts
+++ /dev/null
@@ -1,671 +0,0 @@
-import type { CookieConsentConfig } from '@jop-software/astro-cookieconsent';
-
-export const cookieConfig: CookieConsentConfig = {
-  hideFromBots: false,
-  guiOptions: {
-    consentModal: {
-      layout: 'box',
-      position: 'bottom right',
-      equalWeightButtons: false,
-    },
-    preferencesModal: {
-      layout: 'bar wide',
-      position: 'right',
-      equalWeightButtons: false,
-    },
-  },
-  categories: {
-    necessary: {
-      enabled: true,
-      readOnly: true,
-    },
-    analytics: {
-      enabled: true,
-      readOnly: false,
-    },
-    advertising: {
-      enabled: true,
-      readOnly: false,
-    },
-  },
-  language: {
-    default: 'en',
-    autoDetect: 'document',
-    translations: {
-      en: {
-        consentModal: {
-          title: 'This site uses cookies',
-          description:
-            'We use cookies to enhance your browsing experience, analyze site traffic, and improve our services. By clicking "Accept all," you consent to our use of cookies.',
-          acceptAllBtn: 'Accept all',
-          acceptNecessaryBtn: 'Reject all',
-          showPreferencesBtn: 'Manage preferences',
-          footer: '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy & Cookies</a>',
-        },
-        preferencesModal: {
-          title: 'Cookie preferences',
-          acceptAllBtn: 'Accept all',
-          acceptNecessaryBtn: 'Reject all',
-          savePreferencesBtn: 'Save preferences',
-          closeIconLabel: 'Close',
-          sections: [
-            {
-              title: 'Cookie usage',
-              description:
-                'We use cookies to provide essential website functionality and improve your experience.',
-            },
-            {
-              title: 'Strictly necessary <span class="pm__badge">Always Enabled</span>',
-              description:
-                'Required for the website to function properly. These cannot be disabled.',
-              //this field will generate a toggle linked to the 'necessary' category
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analytics',
-              description:
-                'Help us understand how visitors interact with our website. All data is anonymized.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'More information',
-              description:
-                'For questions about our cookie policy, please <a href="https://support.microsoft.com/contactus/">contact us</a>.',
-            },
-          ],
-        },
-      },
-      de: {
-        consentModal: {
-          title: 'Diese Website verwendet Cookies',
-          description:
-            'Wir verwenden Cookies, um Ihr Browsing-Erlebnis zu verbessern, den Website-Traffic zu analysieren und unsere Dienste zu verbessern. Indem Sie auf "Alle akzeptieren" klicken, stimmen Sie unserer Verwendung von Cookies zu.',
-          acceptAllBtn: 'Alle akzeptieren',
-          acceptNecessaryBtn: 'Alle ablehnen',
-          showPreferencesBtn: 'Einstellungen verwalten',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Datenschutz & Cookies</a>',
-        },
-        preferencesModal: {
-          title: 'Cookie-Einstellungen',
-          acceptAllBtn: 'Alle akzeptieren',
-          acceptNecessaryBtn: 'Alle ablehnen',
-          savePreferencesBtn: 'Einstellungen speichern',
-          closeIconLabel: 'Schließen',
-          sections: [
-            {
-              title: 'Cookie-Verwendung',
-              description:
-                'Wir verwenden Cookies, um wesentliche Website-Funktionen bereitzustellen und Ihre Erfahrung zu verbessern.',
-            },
-            {
-              title: 'Unbedingt erforderlich <span class="pm__badge">Immer aktiviert</span>',
-              description:
-                'Erforderlich, damit die Website ordnungsgemäß funktioniert. Diese können nicht deaktiviert werden.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analyse',
-              description:
-                'Helfen Sie uns zu verstehen, wie Besucher mit unserer Website interagieren. Alle Daten werden anonymisiert.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Weitere Informationen',
-              description:
-                'Bei Fragen zu unserer Cookie-Richtlinie <a href="https://support.microsoft.com/contactus/">kontaktieren Sie uns bitte</a>.',
-            },
-          ],
-        },
-      },
-      es: {
-        consentModal: {
-          title: 'Este sitio utiliza cookies',
-          description:
-            'Utilizamos cookies para mejorar su experiencia de navegación, analizar el tráfico del sitio y mejorar nuestros servicios. Al hacer clic en "Aceptar todo", acepta nuestro uso de cookies.',
-          acceptAllBtn: 'Aceptar todo',
-          acceptNecessaryBtn: 'Rechazar todo',
-          showPreferencesBtn: 'Administrar preferencias',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacidad y cookies</a>',
-        },
-        preferencesModal: {
-          title: 'Preferencias de cookies',
-          acceptAllBtn: 'Aceptar todo',
-          acceptNecessaryBtn: 'Rechazar todo',
-          savePreferencesBtn: 'Guardar preferencias',
-          closeIconLabel: 'Cerrar',
-          sections: [
-            {
-              title: 'Uso de cookies',
-              description:
-                'Utilizamos cookies para proporcionar funcionalidad esencial del sitio web y mejorar su experiencia.',
-            },
-            {
-              title: 'Estrictamente necesarias <span class="pm__badge">Siempre habilitado</span>',
-              description:
-                'Necesarias para que el sitio web funcione correctamente. No se pueden desactivar.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analíticas',
-              description:
-                'Nos ayudan a entender cómo los visitantes interactúan con nuestro sitio web. Todos los datos son anónimos.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Más información',
-              description:
-                'Para preguntas sobre nuestra política de cookies, por favor <a href="https://support.microsoft.com/contactus/">contáctenos</a>.',
-            },
-          ],
-        },
-      },
-      ja: {
-        consentModal: {
-          title: 'このサイトはクッキーを使用しています',
-          description:
-            'ブラウジング体験を向上させ、サイトのトラフィックを分析し、サービスを改善するためにクッキーを使用しています。「すべて受け入れる」をクリックすると、クッキーの使用に同意したことになります。',
-          acceptAllBtn: 'すべて受け入れる',
-          acceptNecessaryBtn: 'すべて拒否',
-          showPreferencesBtn: '設定を管理',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">プライバシーとクッキー</a>',
-        },
-        preferencesModal: {
-          title: 'クッキーの設定',
-          acceptAllBtn: 'すべて受け入れる',
-          acceptNecessaryBtn: 'すべて拒否',
-          savePreferencesBtn: '設定を保存',
-          closeIconLabel: '閉じる',
-          sections: [
-            {
-              title: 'クッキーの使用',
-              description:
-                'ウェブサイトの基本的な機能を提供し、ユーザー体験を向上させるためにクッキーを使用しています。',
-            },
-            {
-              title: '必須 <span class="pm__badge">常に有効</span>',
-              description:
-                'ウェブサイトが正常に機能するために必要です。無効にすることはできません。',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: '分析',
-              description:
-                '訪問者がウェブサイトとどのようにやり取りしているかを理解するのに役立ちます。すべてのデータは匿名化されています。',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: '詳細情報',
-              description:
-                'クッキーポリシーに関するご質問は、<a href="https://support.microsoft.com/contactus/">お問い合わせください</a>。',
-            },
-          ],
-        },
-      },
-      fr: {
-        consentModal: {
-          title: 'Ce site utilise des cookies',
-          description:
-            'Nous utilisons des cookies pour améliorer votre expérience de navigation, analyser le trafic du site et améliorer nos services. En cliquant sur "Tout accepter", vous consentez à notre utilisation de cookies.',
-          acceptAllBtn: 'Tout accepter',
-          acceptNecessaryBtn: 'Tout rejeter',
-          showPreferencesBtn: 'Gérer les préférences',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Confidentialité et cookies</a>',
-        },
-        preferencesModal: {
-          title: 'Préférences des cookies',
-          acceptAllBtn: 'Tout accepter',
-          acceptNecessaryBtn: 'Tout rejeter',
-          savePreferencesBtn: 'Enregistrer les préférences',
-          closeIconLabel: 'Fermer',
-          sections: [
-            {
-              title: 'Utilisation des cookies',
-              description:
-                'Nous utilisons des cookies pour fournir des fonctionnalités essentielles du site web et améliorer votre expérience.',
-            },
-            {
-              title: 'Strictement nécessaires <span class="pm__badge">Toujours activé</span>',
-              description:
-                'Nécessaires au bon fonctionnement du site web. Ils ne peuvent pas être désactivés.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analytiques',
-              description:
-                'Nous aident à comprendre comment les visiteurs interagissent avec notre site web. Toutes les données sont anonymisées.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: "Plus d'informations",
-              description:
-                'Pour toute question concernant notre politique en matière de cookies, veuillez <a href="https://support.microsoft.com/contactus/">nous contacter</a>.',
-            },
-          ],
-        },
-      },
-      it: {
-        consentModal: {
-          title: 'Questo sito utilizza i cookie',
-          description:
-            'Utilizziamo i cookie per migliorare la tua esperienza di navigazione, analizzare il traffico del sito e migliorare i nostri servizi. Cliccando su "Accetta tutto", acconsenti al nostro utilizzo dei cookie.',
-          acceptAllBtn: 'Accetta tutto',
-          acceptNecessaryBtn: 'Rifiuta tutto',
-          showPreferencesBtn: 'Gestisci preferenze',
-          footer: '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy e cookie</a>',
-        },
-        preferencesModal: {
-          title: 'Preferenze dei cookie',
-          acceptAllBtn: 'Accetta tutto',
-          acceptNecessaryBtn: 'Rifiuta tutto',
-          savePreferencesBtn: 'Salva preferenze',
-          closeIconLabel: 'Chiudi',
-          sections: [
-            {
-              title: 'Utilizzo dei cookie',
-              description:
-                'Utilizziamo i cookie per fornire funzionalità essenziali del sito web e migliorare la tua esperienza.',
-            },
-            {
-              title: 'Strettamente necessari <span class="pm__badge">Sempre abilitato</span>',
-              description:
-                'Necessari per il corretto funzionamento del sito web. Non possono essere disabilitati.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analitici',
-              description:
-                'Ci aiutano a capire come i visitatori interagiscono con il nostro sito web. Tutti i dati sono anonimizzati.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Ulteriori informazioni',
-              description:
-                'Per domande sulla nostra politica sui cookie, <a href="https://support.microsoft.com/contactus/">contattaci</a>.',
-            },
-          ],
-        },
-      },
-      id: {
-        consentModal: {
-          title: 'Situs ini menggunakan cookie',
-          description:
-            'Kami menggunakan cookie untuk meningkatkan pengalaman browsing Anda, menganalisis lalu lintas situs, dan meningkatkan layanan kami. Dengan mengklik "Terima semua", Anda menyetujui penggunaan cookie kami.',
-          acceptAllBtn: 'Terima semua',
-          acceptNecessaryBtn: 'Tolak semua',
-          showPreferencesBtn: 'Kelola preferensi',
-          footer: '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Privasi & Cookie</a>',
-        },
-        preferencesModal: {
-          title: 'Preferensi cookie',
-          acceptAllBtn: 'Terima semua',
-          acceptNecessaryBtn: 'Tolak semua',
-          savePreferencesBtn: 'Simpan preferensi',
-          closeIconLabel: 'Tutup',
-          sections: [
-            {
-              title: 'Penggunaan cookie',
-              description:
-                'Kami menggunakan cookie untuk menyediakan fungsi penting situs web dan meningkatkan pengalaman Anda.',
-            },
-            {
-              title: 'Sangat diperlukan <span class="pm__badge">Selalu Diaktifkan</span>',
-              description:
-                'Diperlukan agar situs web berfungsi dengan baik. Ini tidak dapat dinonaktifkan.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analitik',
-              description:
-                'Membantu kami memahami bagaimana pengunjung berinteraksi dengan situs web kami. Semua data dianonimkan.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Informasi lebih lanjut',
-              description:
-                'Untuk pertanyaan tentang kebijakan cookie kami, silakan <a href="https://support.microsoft.com/contactus/">hubungi kami</a>.',
-            },
-          ],
-        },
-      },
-      'zh-cn': {
-        consentModal: {
-          title: '本网站使用Cookie',
-          description:
-            '我们使用Cookie来改善您的浏览体验，分析网站流量并改进我们的服务。点击"全部接受"即表示您同意我们使用Cookie。',
-          acceptAllBtn: '全部接受',
-          acceptNecessaryBtn: '全部拒绝',
-          showPreferencesBtn: '管理偏好设置',
-          footer: '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">隐私和Cookie</a>',
-        },
-        preferencesModal: {
-          title: 'Cookie偏好设置',
-          acceptAllBtn: '全部接受',
-          acceptNecessaryBtn: '全部拒绝',
-          savePreferencesBtn: '保存偏好设置',
-          closeIconLabel: '关闭',
-          sections: [
-            {
-              title: 'Cookie使用',
-              description: '我们使用Cookie来提供基本的网站功能并改善您的体验。',
-            },
-            {
-              title: '严格必要 <span class="pm__badge">始终启用</span>',
-              description: '网站正常运行所必需的。这些无法禁用。',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: '分析',
-              description: '帮助我们了解访问者如何与我们的网站互动。所有数据都已匿名化。',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: '更多信息',
-              description:
-                '有关我们Cookie政策的问题，请<a href="https://support.microsoft.com/contactus/">联系我们</a>。',
-            },
-          ],
-        },
-      },
-      'pt-br': {
-        consentModal: {
-          title: 'Este site usa cookies',
-          description:
-            'Usamos cookies para melhorar sua experiência de navegação, analisar o tráfego do site e melhorar nossos serviços. Ao clicar em "Aceitar tudo", você consente com nosso uso de cookies.',
-          acceptAllBtn: 'Aceitar tudo',
-          acceptNecessaryBtn: 'Rejeitar tudo',
-          showPreferencesBtn: 'Gerenciar preferências',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacidade e Cookies</a>',
-        },
-        preferencesModal: {
-          title: 'Preferências de cookies',
-          acceptAllBtn: 'Aceitar tudo',
-          acceptNecessaryBtn: 'Rejeitar tudo',
-          savePreferencesBtn: 'Salvar preferências',
-          closeIconLabel: 'Fechar',
-          sections: [
-            {
-              title: 'Uso de cookies',
-              description:
-                'Usamos cookies para fornecer funcionalidade essencial do site e melhorar sua experiência.',
-            },
-            {
-              title: 'Estritamente necessários <span class="pm__badge">Sempre ativado</span>',
-              description:
-                'Necessários para que o site funcione corretamente. Estes não podem ser desativados.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Análise',
-              description:
-                'Nos ajudam a entender como os visitantes interagem com nosso site. Todos os dados são anonimizados.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Mais informações',
-              description:
-                'Para dúvidas sobre nossa política de cookies, por favor <a href="https://support.microsoft.com/contactus/">entre em contato</a>.',
-            },
-          ],
-        },
-      },
-
-      ko: {
-        consentModal: {
-          title: '이 사이트는 쿠키를 사용합니다',
-          description:
-            '브라우징 경험을 향상시키고 사이트 트래픽을 분석하며 서비스를 개선하기 위해 쿠키를 사용합니다. "모두 수락"을 클릭하면 쿠키 사용에 동의하는 것입니다.',
-          acceptAllBtn: '모두 수락',
-          acceptNecessaryBtn: '모두 거부',
-          showPreferencesBtn: '기본 설정 관리',
-          footer: '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">개인정보 및 쿠키</a>',
-        },
-        preferencesModal: {
-          title: '쿠키 기본 설정',
-          acceptAllBtn: '모두 수락',
-          acceptNecessaryBtn: '모두 거부',
-          savePreferencesBtn: '기본 설정 저장',
-          closeIconLabel: '닫기',
-          sections: [
-            {
-              title: '쿠키 사용',
-              description:
-                '필수 웹사이트 기능을 제공하고 사용자 경험을 개선하기 위해 쿠키를 사용합니다.',
-            },
-            {
-              title: '필수 <span class="pm__badge">항상 활성화됨</span>',
-              description: '웹사이트가 제대로 작동하는 데 필요합니다. 비활성화할 수 없습니다.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: '분석',
-              description:
-                '방문자가 웹사이트와 상호 작용하는 방식을 이해하는 데 도움이 됩니다. 모든 데이터는 익명화됩니다.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: '추가 정보',
-              description:
-                '쿠키 정책에 대한 질문은 <a href="https://support.microsoft.com/contactus/">문의하십시오</a>.',
-            },
-          ],
-        },
-      },
-      tr: {
-        consentModal: {
-          title: 'Bu site çerez kullanıyor',
-          description:
-            'Gezinme deneyiminizi geliştirmek, site trafiğini analiz etmek ve hizmetlerimizi iyileştirmek için çerezler kullanıyoruz. "Tümünü kabul et"i tıklayarak çerez kullanımımızı onaylamış olursunuz.',
-          acceptAllBtn: 'Tümünü kabul et',
-          acceptNecessaryBtn: 'Tümünü reddet',
-          showPreferencesBtn: 'Tercihleri yönet',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Gizlilik ve Tanımlama Bilgileri</a>',
-        },
-        preferencesModal: {
-          title: 'Çerez tercihleri',
-          acceptAllBtn: 'Tümünü kabul et',
-          acceptNecessaryBtn: 'Tümünü reddet',
-          savePreferencesBtn: 'Tercihleri kaydet',
-          closeIconLabel: 'Kapat',
-          sections: [
-            {
-              title: 'Çerez kullanımı',
-              description:
-                'Temel web sitesi işlevselliği sağlamak ve deneyiminizi geliştirmek için çerezler kullanıyoruz.',
-            },
-            {
-              title: 'Kesinlikle gerekli <span class="pm__badge">Her Zaman Etkin</span>',
-              description:
-                'Web sitesinin düzgün çalışması için gereklidir. Bunlar devre dışı bırakılamaz.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analitik',
-              description:
-                'Ziyaretçilerin web sitemizle nasıl etkileşime girdiğini anlamamıza yardımcı olur. Tüm veriler anonimleştirilir.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Daha fazla bilgi',
-              description:
-                'Çerez politikamız hakkında sorularınız için lütfen <a href="https://support.microsoft.com/contactus/">bizimle iletişime geçin</a>.',
-            },
-          ],
-        },
-      },
-      ru: {
-        consentModal: {
-          title: 'Этот сайт использует файлы cookie',
-          description:
-            'Мы используем файлы cookie для улучшения вашего опыта просмотра, анализа трафика сайта и улучшения наших услуг. Нажимая "Принять все", вы соглашаетесь на использование нами файлов cookie.',
-          acceptAllBtn: 'Принять все',
-          acceptNecessaryBtn: 'Отклонить все',
-          showPreferencesBtn: 'Управление настройками',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Конфиденциальность и файлы cookie</a>',
-        },
-        preferencesModal: {
-          title: 'Настройки файлов cookie',
-          acceptAllBtn: 'Принять все',
-          acceptNecessaryBtn: 'Отклонить все',
-          savePreferencesBtn: 'Сохранить настройки',
-          closeIconLabel: 'Закрыть',
-          sections: [
-            {
-              title: 'Использование файлов cookie',
-              description:
-                'Мы используем файлы cookie для обеспечения основных функций веб-сайта и улучшения вашего опыта.',
-            },
-            {
-              title: 'Строго необходимые <span class="pm__badge">Всегда включено</span>',
-              description: 'Необходимы для правильной работы веб-сайта. Их нельзя отключить.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Аналитика',
-              description:
-                'Помогают нам понять, как посетители взаимодействуют с нашим веб-сайтом. Все данные анонимизированы.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Дополнительная информация',
-              description:
-                'По вопросам о нашей политике в отношении файлов cookie, пожалуйста, <a href="https://support.microsoft.com/contactus/">свяжитесь с нами</a>.',
-            },
-          ],
-        },
-      },
-      hi: {
-        consentModal: {
-          title: 'यह साइट कुकीज़ का उपयोग करती है',
-          description:
-            'हम आपके ब्राउज़िंग अनुभव को बेहतर बनाने, साइट ट्रैफ़िक का विश्लेषण करने और अपनी सेवाओं को बेहतर बनाने के लिए कुकीज़ का उपयोग करते हैं। "सभी स्वीकार करें" पर क्लिक करके, आप हमारे कुकीज़ के उपयोग के लिए सहमति देते हैं।',
-          acceptAllBtn: 'सभी स्वीकार करें',
-          acceptNecessaryBtn: 'सभी अस्वीकार करें',
-          showPreferencesBtn: 'प्राथमिकताएँ प्रबंधित करें',
-          footer: '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">गोपनीयता और कुकीज़</a>',
-        },
-        preferencesModal: {
-          title: 'कुकी प्राथमिकताएँ',
-          acceptAllBtn: 'सभी स्वीकार करें',
-          acceptNecessaryBtn: 'सभी अस्वीकार करें',
-          savePreferencesBtn: 'प्राथमिकताएँ सहेजें',
-          closeIconLabel: 'बंद करें',
-          sections: [
-            {
-              title: 'कुकी उपयोग',
-              description:
-                'हम आवश्यक वेबसाइट कार्यक्षमता प्रदान करने और आपके अनुभव को बेहतर बनाने के लिए कुकीज़ का उपयोग करते हैं।',
-            },
-            {
-              title: 'सख्ती से आवश्यक <span class="pm__badge">हमेशा सक्षम</span>',
-              description:
-                'वेबसाइट के ठीक से काम करने के लिए आवश्यक। इन्हें अक्षम नहीं किया जा सकता।',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'विश्लेषण',
-              description:
-                'आगंतुकों के हमारी वेबसाइट के साथ कैसे इंटरैक्ट करते हैं, यह समझने में हमारी मदद करें। सभी डेटा गुमनाम है।',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'अधिक जानकारी',
-              description:
-                'हमारी कुकी नीति के बारे में प्रश्नों के लिए, कृपया <a href="https://support.microsoft.com/contactus/">हमसे संपर्क करें</a>।',
-            },
-          ],
-        },
-      },
-      da: {
-        consentModal: {
-          title: 'Dette site bruger cookies',
-          description:
-            'Vi bruger cookies til at forbedre din browseroplevelse, analysere webstedstrafik og forbedre vores tjenester. Ved at klikke på "Acceptér alle" giver du samtykke til vores brug af cookies.',
-          acceptAllBtn: 'Acceptér alle',
-          acceptNecessaryBtn: 'Afvis alle',
-          showPreferencesBtn: 'Administrer præferencer',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Beskyttelse af personlige oplysninger og cookies</a>',
-        },
-        preferencesModal: {
-          title: 'Cookie-præferencer',
-          acceptAllBtn: 'Acceptér alle',
-          acceptNecessaryBtn: 'Afvis alle',
-          savePreferencesBtn: 'Gem præferencer',
-          closeIconLabel: 'Luk',
-          sections: [
-            {
-              title: 'Cookie-brug',
-              description:
-                'Vi bruger cookies til at levere essentiel webstedsfunktionalitet og forbedre din oplevelse.',
-            },
-            {
-              title: 'Strengt nødvendige <span class="pm__badge">Altid aktiveret</span>',
-              description: 'Krævet for at webstedet fungerer korrekt. Disse kan ikke deaktiveres.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Analyse',
-              description:
-                'Hjælper os med at forstå, hvordan besøgende interagerer med vores websted. Alle data er anonymiserede.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Mere information',
-              description:
-                'For spørgsmål om vores cookie-politik, bedes du <a href="https://support.microsoft.com/contactus/">kontakte os</a>.',
-            },
-          ],
-        },
-      },
-      uk: {
-        consentModal: {
-          title: 'Цей сайт використовує файли cookie',
-          description:
-            'Ми використовуємо файли cookie для покращення вашого досвіду перегляду, аналізу трафіку сайту та покращення наших послуг. Натискаючи "Прийняти все", ви погоджуєтесь на використання нами файлів cookie.',
-          acceptAllBtn: 'Прийняти все',
-          acceptNecessaryBtn: 'Відхилити все',
-          showPreferencesBtn: 'Керувати налаштуваннями',
-          footer:
-            '<a href="https://go.microsoft.com/fwlink/?LinkId=521839">Конфіденційність і файли cookie</a>',
-        },
-        preferencesModal: {
-          title: 'Налаштування файлів cookie',
-          acceptAllBtn: 'Прийняти все',
-          acceptNecessaryBtn: 'Відхилити все',
-          savePreferencesBtn: 'Зберегти налаштування',
-          closeIconLabel: 'Закрити',
-          sections: [
-            {
-              title: 'Використання файлів cookie',
-              description:
-                'Ми використовуємо файли cookie для забезпечення основних функцій веб-сайту та покращення вашого досвіду.',
-            },
-            {
-              title: 'Суворо необхідні <span class="pm__badge">Завжди ввімкнено</span>',
-              description: 'Необхідні для правильної роботи веб-сайту. Їх не можна вимкнути.',
-              linkedCategory: 'necessary',
-            },
-            {
-              title: 'Аналітика',
-              description:
-                'Допомагають нам зрозуміти, як відвідувачі взаємодіють з нашим веб-сайтом. Усі дані анонімізовані.',
-              linkedCategory: 'analytics',
-            },
-            {
-              title: 'Додаткова інформація',
-              description:
-                'З питань про нашу політику щодо файлів cookie, будь ласка, <a href="https://support.microsoft.com/contactus/">зв\'яжіться з нами</a>.',
-            },
-          ],
-        },
-      },
-    },
-  },
-};
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 05fe3687b..12e006c10 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -70,7 +70,6 @@
     "@fontsource-variable/outfit": "^5.2.8",
     "@fontsource-variable/rubik": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",
-    "@jop-software/astro-cookieconsent": "^3.0.1",
     "@lunariajs/core": "^0.1.1",
     "@lunariajs/starlight": "^0.1.1",
     "asciinema-player": "^3.16.0",
@@ -94,8 +93,7 @@
     "starlight-page-actions": "^0.6.2",
     "starlight-plugin-icons": "^1.1.6",
     "starlight-scroll-to-top": "^1.0.1",
-    "starlight-sidebar-topics": "^0.8.0",
-    "vanilla-cookieconsent": "^3.1.0"
+    "starlight-sidebar-topics": "^0.8.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
index f384188a7..e9edd09bf 100644
--- a/src/frontend/pnpm-lock.yaml
+++ b/src/frontend/pnpm-lock.yaml
@@ -72,9 +72,6 @@ importers:
       '@fontsource/poppins':
         specifier: ^5.2.7
         version: 5.2.7
-      '@jop-software/astro-cookieconsent':
-        specifier: ^3.0.1
-        version: 3.0.1(vanilla-cookieconsent@3.1.0)
       '@lunariajs/core':
         specifier: ^0.1.1
         version: 0.1.1
@@ -147,9 +144,6 @@ importers:
       starlight-sidebar-topics:
         specifier: ^0.8.0
         version: 0.8.0(@astrojs/starlight@0.41.1(@astrojs/markdown-remark@7.2.0)(astro@7.0.3(@astrojs/markdown-remark@7.2.0)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.13.2)(jiti@1.21.7)(tsx@4.22.4)(yaml@2.9.0))(typescript@6.0.3))
-      vanilla-cookieconsent:
-        specifier: ^3.1.0
-        version: 3.1.0
     devDependencies:
       '@axe-core/playwright':
         specifier: ^4.12.1
@@ -1029,11 +1023,6 @@ packages:
     resolution: {integrity: sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==}
     engines: {node: '>=18'}
 
-  '@jop-software/astro-cookieconsent@3.0.1':
-    resolution: {integrity: sha512-UXo6aMR9/kEEmUIZoRTRJXDf/ADju9qQ0qNRWM1twdf0vRCh2s/ucHqaYOcs57Q2PcKmcq+Sc+0Tq0gSUgVDzA==}
-    peerDependencies:
-      vanilla-cookieconsent: ^3.0.0
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -4020,9 +4009,6 @@ packages:
     resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==}
     hasBin: true
 
-  vanilla-cookieconsent@3.1.0:
-    resolution: {integrity: sha512-/McNRtm/3IXzb9dhqMIcbquoU45SzbN2VB+To4jxEPqMmp7uVniP6BhGLjU8MC7ZCDsNQVOp27fhQTM/ruIXAA==}
-
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
@@ -4384,7 +4370,7 @@ snapshots:
       '@astrojs/internal-helpers': 0.10.0
       '@astrojs/prism': 4.0.2
       github-slugger: 2.0.0
-      satteri: 0.9.3
+      satteri: 0.9.4
 
   '@astrojs/mdx@5.0.6(astro@7.0.3(@astrojs/markdown-remark@7.2.0)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.13.2)(jiti@1.21.7)(tsx@4.22.4)(yaml@2.9.0))':
     dependencies:
@@ -4951,10 +4937,6 @@ snapshots:
 
   '@isaacs/cliui@9.0.0': {}
 
-  '@jop-software/astro-cookieconsent@3.0.1(vanilla-cookieconsent@3.1.0)':
-    dependencies:
-      vanilla-cookieconsent: 3.1.0
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -8706,8 +8688,6 @@ snapshots:
 
   uuid@14.0.1: {}
 
-  vanilla-cookieconsent@3.1.0: {}
-
   vfile-location@5.0.3:
     dependencies:
       '@types/unist': 3.0.3
diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index e1a416a30..8c9164c47 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -201,12 +201,25 @@ function computeSourceUrl() {
   })();
 </script>
 
-<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
+<!--
+  WCP consent runtime. Per Microsoft WCP requirements this MUST be loaded live from
+  the CDN and never bundled or self-hosted: the CDN applies geo-sensitive logic that
+  decides whether the banner is shown and returns different payloads per region.
+  `is:inline` stops Astro from processing/bundling it; `async` keeps a slow or blocked
+  CDN from ever blocking page render.
+-->
+<script is:inline async src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
 <script is:inline>
   (function () {
     if (window.__aspireWcpConsentInitialized) return;
     window.__aspireWcpConsentInitialized = true;
 
+    // Failsafe: if the CDN script is blocked (ad-blocker, firewall, CSP) or slow to
+    // arrive, poll for a bounded window and then give up so the page never hangs or
+    // spins forever. Consent code must never degrade the rest of the site.
+    var MAX_INIT_ATTEMPTS = 150; // ~15s at 100ms intervals
+    var initAttempts = 0;
+
     function toCulture(value) {
       var raw = (value || '').trim().replace('_', '-');
       if (!raw) return 'en-US';
@@ -226,13 +239,17 @@ function computeSourceUrl() {
     }
 
     function syncConsentState(consent) {
-      window.__aspireConsentCategories = toLegacyCategories(consent);
+      try {
+        window.__aspireConsentCategories = toLegacyCategories(consent);
+      } catch (e) {}
     }
 
     function withSiteConsent(callback) {
       var siteConsent = window.__aspireWcpSiteConsent;
       if (!siteConsent) return false;
-      callback(siteConsent);
+      try {
+        callback(siteConsent);
+      } catch (e) {}
       return true;
     }
 
@@ -255,34 +272,106 @@ function computeSourceUrl() {
       }, 0);
     }
 
+    function ensureBannerPlaceholder() {
+      var id = 'wcp-cookie-banner';
+      var placeholder = document.getElementById(id);
+      if (placeholder) return placeholder;
+      if (!document.body) return null;
+      placeholder = document.createElement('div');
+      placeholder.id = id;
+      // Dedicated placeholder pinned to the top of the viewport. WCP injects its
+      // banner INTO this element in normal flow, so without a top-anchored host the
+      // banner lands wherever the host sits. Using document.body dropped it at the
+      // very bottom of the page (invisible on load) which fails the compliance scan.
+      // A fixed, full-width, top strip guarantees the standard banner is visible on
+      // load regardless of scroll position or the site's own sticky header.
+      placeholder.style.position = 'fixed';
+      placeholder.style.top = '0';
+      placeholder.style.left = '0';
+      placeholder.style.width = '100%';
+      placeholder.style.zIndex = '2147483647';
+      document.body.insertBefore(placeholder, document.body.firstChild);
+      return placeholder;
+    }
+
+    // WCP paints the banner AND the preferences dialog from the theme passed at
+    // init time. It does not re-read the theme on its own, so when the user
+    // toggles the site theme after load we must tell WCP to repaint by dispatching
+    // the documented `theme-changed` event. Our CSS overrides re-theme instantly
+    // from custom properties; this keeps WCP's own internals (e.g. category
+    // toggles) in sync too.
+    function toWcpThemeName(themeName) {
+      var wcp = window.WcpConsent;
+      var isDark = (themeName || '').toLowerCase() === 'dark';
+      if (wcp && wcp.themes) {
+        return isDark ? wcp.themes.dark : wcp.themes.light;
+      }
+      return isDark ? 'dark' : 'light';
+    }
+
+    function notifyWcpThemeChanged() {
+      try {
+        var current = toWcpThemeName(document.documentElement.getAttribute('data-theme'));
+        // Dispatch on both targets: the WCP listener attaches to one of them and
+        // ignores the other, so this is robust to library changes.
+        window.dispatchEvent(new CustomEvent('theme-changed', { detail: { currentTheme: current } }));
+        document.dispatchEvent(new CustomEvent('theme-changed', { detail: { currentTheme: current } }));
+      } catch (e) {}
+    }
+
+    function watchThemeChanges() {
+      try {
+        if (window.__aspireWcpThemeObserver || !document.documentElement) return;
+        var observer = new MutationObserver(function (mutations) {
+          for (var i = 0; i < mutations.length; i++) {
+            if (mutations[i].attributeName === 'data-theme') {
+              notifyWcpThemeChanged();
+              break;
+            }
+          }
+        });
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ['data-theme'],
+        });
+        window.__aspireWcpThemeObserver = observer;
+      } catch (e) {}
+    }
+
     function initWcpConsent() {
       var wcp = window.WcpConsent;
       if (!wcp || typeof wcp.init !== 'function') {
+        if (++initAttempts >= MAX_INIT_ATTEMPTS) return; // give up; page stays fully functional
         window.setTimeout(initWcpConsent, 100);
         return;
       }
 
-      var culture = toCulture(document.documentElement.lang || navigator.language || 'en-US');
-      var themeName = (document.documentElement.getAttribute('data-theme') || '').toLowerCase();
-      var theme = themeName === 'dark' ? wcp.themes.dark : wcp.themes.light;
-
-      wcp.init(
-        culture,
-        document.body,
-        function (err, siteConsent) {
-          if (err || !siteConsent) return;
-          window.__aspireWcpSiteConsent = siteConsent;
-          syncConsentState(siteConsent.getConsent());
-          if (typeof siteConsent.onConsentChanged === 'function') {
-            siteConsent.onConsentChanged(onConsentChanged);
-          }
-        },
-        onConsentChanged,
-        theme
-      );
+      try {
+        var culture = toCulture(document.documentElement.lang || navigator.language || 'en-US');
+        var themeName = (document.documentElement.getAttribute('data-theme') || '').toLowerCase();
+        var theme = themeName === 'dark' ? wcp.themes.dark : wcp.themes.light;
+
+        wcp.init(
+          culture,
+          ensureBannerPlaceholder() || document.body,
+          function (err, siteConsent) {
+            if (err || !siteConsent) return;
+            window.__aspireWcpSiteConsent = siteConsent;
+            syncConsentState(siteConsent.getConsent());
+            if (typeof siteConsent.onConsentChanged === 'function') {
+              siteConsent.onConsentChanged(onConsentChanged);
+            }
+          },
+          onConsentChanged,
+          theme
+        );
+      } catch (e) {
+        // Never let consent initialization break page rendering.
+      }
     }
 
     document.addEventListener('click', openManageConsent);
+    watchThemeChanges();
 
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', initWcpConsent, { once: true });
diff --git a/src/frontend/src/styles/cookieconsent-custom.css b/src/frontend/src/styles/cookieconsent-custom.css
deleted file mode 100644
index c5823bd68..000000000
--- a/src/frontend/src/styles/cookieconsent-custom.css
+++ /dev/null
@@ -1,117 +0,0 @@
-/* Cookie consent - https://playground.cookieconsent.orestbida.com/ */
-
-#cc-main {
-  --cc-font-family:
-    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --cc-modal-border-radius: 0.5rem;
-  --cc-btn-border-radius: 0.375rem;
-}
-
-/* Light theme */
-:root[data-theme='light'] #cc-main {
-  color-scheme: light;
-  --cc-bg: #ffffff;
-  --cc-primary-color: #1f1e33;
-  --cc-secondary-color: #55585f;
-  --cc-btn-primary-bg: #7455dd;
-  --cc-btn-primary-color: #ffffff;
-  --cc-btn-primary-border-color: #7455dd;
-  --cc-btn-primary-hover-bg: #512bd4;
-  --cc-btn-primary-hover-color: #ffffff;
-  --cc-btn-primary-hover-border-color: #512bd4;
-  --cc-btn-secondary-bg: transparent;
-  --cc-btn-secondary-color: #7455dd;
-  --cc-btn-secondary-border-color: #7455dd;
-  --cc-btn-secondary-hover-bg: rgba(116, 85, 221, 0.08);
-  --cc-btn-secondary-hover-color: #7455dd;
-  --cc-btn-secondary-hover-border-color: #7455dd;
-  --cc-toggle-on-bg: #7455dd;
-  --cc-toggle-off-bg: #c0c2c6;
-  --cc-toggle-on-knob-bg: #ffffff;
-  --cc-toggle-off-knob-bg: #55585f;
-  --cc-toggle-on-knob-icon-color: var(--cc-toggle-on-bg);
-  --cc-toggle-off-knob-icon-color: var(--cc-toggle-off-bg);
-  --cc-toggle-enabled-icon-color: var(--cc-bg);
-  --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
-  --cc-toggle-readonly-bg: #d5d8db;
-  --cc-toggle-readonly-knob-bg: #969899;
-  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
-  --cc-section-category-border: #eceef1;
-  --cc-cookie-category-block-bg: transparent;
-  --cc-cookie-category-block-border: transparent;
-  --cc-cookie-category-block-hover-bg: rgba(116, 85, 221, 0.05);
-  --cc-cookie-category-block-hover-border: transparent;
-  --cc-cookie-category-expanded-block-bg: transparent;
-  --cc-cookie-category-expanded-block-hover-bg: rgba(116, 85, 221, 0.05);
-  --cc-separator-border-color: #eceef1;
-  --cc-overlay-bg: rgba(0, 0, 0, 0.1);
-  --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
-  --cc-webkit-scrollbar-hover-bg: #7455dd;
-  --cc-footer-bg: #eceef1;
-  --cc-footer-color: var(--cc-secondary-color);
-  --cc-footer-border-color: var(--cc-section-category-border);
-
-  .pm__badge {
-    font-weight: normal;
-    font-size: 0.7rem;
-    padding: 0.5rem 0.75rem;
-    background-color: color-mix(in srgb, var(--cc-btn-secondary-bg) 95%, black 5%);
-  }
-}
-
-/* Dark theme */
-:root[data-theme='dark'] #cc-main {
-  color-scheme: dark;
-  --cc-bg: #1f1e33;
-  --cc-primary-color: #ffffff;
-  --cc-secondary-color: #c6c8cc;
-  --cc-btn-primary-bg: #7455dd;
-  --cc-btn-primary-color: #ffffff;
-  --cc-btn-primary-border-color: #7455dd;
-  --cc-btn-primary-hover-bg: #512bd4;
-  --cc-btn-primary-hover-color: #ffffff;
-  --cc-btn-primary-hover-border-color: #512bd4;
-  --cc-btn-secondary-bg: transparent;
-  --cc-btn-secondary-color: #c6c8cc;
-  --cc-btn-secondary-border-color: var(--cc-separator-border-color);
-  --cc-btn-secondary-hover-bg: rgba(116, 85, 221, 0.1);
-  --cc-btn-secondary-hover-color: #ffffff;
-  --cc-btn-secondary-hover-border-color: #c6c8cc;
-  --cc-toggle-on-bg: #7455dd;
-  --cc-toggle-off-bg: #55585f;
-  --cc-toggle-on-knob-bg: #ffffff;
-  --cc-toggle-off-knob-bg: #c6c8cc;
-  --cc-toggle-on-knob-icon-color: var(--cc-toggle-on-bg);
-  --cc-toggle-off-knob-icon-color: var(--cc-toggle-off-bg);
-  --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);
-  --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);
-  --cc-toggle-readonly-bg: #35383e;
-  --cc-toggle-readonly-knob-bg: #55585f;
-  --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
-  --cc-section-category-border: #35383e;
-  --cc-cookie-category-block-bg: transparent;
-  --cc-cookie-category-block-border: transparent;
-  --cc-cookie-category-block-hover-bg: rgba(116, 85, 221, 0.1);
-  --cc-cookie-category-block-hover-border: transparent;
-  --cc-cookie-category-expanded-block-bg: transparent;
-  --cc-cookie-category-expanded-block-hover-bg: rgba(116, 85, 221, 0.1);
-  --cc-separator-border-color: #35383e;
-  --cc-overlay-bg: rgba(0, 0, 0, 0.1);
-  --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
-  --cc-webkit-scrollbar-hover-bg: #7455dd;
-  --cc-footer-bg: #1a1828;
-  --cc-footer-color: var(--cc-secondary-color);
-  --cc-footer-border-color: var(--cc-section-category-border);
-
-  .pm__badge {
-    font-weight: normal;
-    font-size: 0.7rem;
-    padding: 0.5rem 0.75rem;
-    background-color: color-mix(in srgb, var(--cc-btn-secondary-bg) 95%, white 5%);
-  }
-}
-
-#cc-main .cm,
-#cc-main .pm {
-  border: 1px solid var(--cc-separator-border-color);
-}
diff --git a/src/frontend/src/styles/site.css b/src/frontend/src/styles/site.css
index 9b70bfaf2..89351f623 100644
--- a/src/frontend/src/styles/site.css
+++ b/src/frontend/src/styles/site.css
@@ -4,7 +4,7 @@
 @import '@fontsource/poppins/600.css';
 @import '@fontsource/poppins/700.css';
 @import '@fontsource-variable/fira-code/wght.css';
-@import './cookieconsent-custom.css';
+@import './wcp-consent.css';
 @import './utils.css';
 @import './api-reference.css';
 @import './mermaid.css';
diff --git a/src/frontend/src/styles/wcp-consent.css b/src/frontend/src/styles/wcp-consent.css
new file mode 100644
index 000000000..b96501852
--- /dev/null
+++ b/src/frontend/src/styles/wcp-consent.css
@@ -0,0 +1,220 @@
+/* Full visual ownership of the Microsoft WCP (Web Compliance Portal) cookie
+ * consent UI, restyled to look like a native Aspire component instead of the
+ * default Microsoft banner.
+ *
+ * WCP injects the banner (#wcpConsentBannerCtrl) and the preferences dialog
+ * (#wcpCookiePreferenceCtrl) from a CDN script, with hashed, version-specific
+ * CSS-module class names (e.g. ._1XuCi2Whi...) that change between releases. We
+ * therefore NEVER target those classes. Everything below is scoped to the two
+ * STABLE container IDs; an ID selector outranks WCP's generated `.class` rules,
+ * and `!important` overrides the handful of inline styles WCP sets, so we get
+ * full, update-resilient control of the visuals.
+ *
+ * We keep WCP's DOM (required: it is what writes the MSCC consent cookie and what
+ * the compliance scan looks for) but replace its entire visual language with
+ * Aspire's: Poppins type, the site's surface/text tokens, the lavender primary
+ * CTA (mirrors the "Try Aspire" button), ghost secondary actions, and the brand
+ * purple for links, focus, and form controls. All colors come from the
+ * theme-aware custom properties in site.css, so the UI tracks light/dark itself.
+ */
+
+/* ==========================================================================
+ * Banner
+ * ======================================================================== */
+#wcpConsentBannerCtrl {
+  font-family: var(--sl-font-system) !important;
+  background: var(--sl-color-bg) !important;
+  color: var(--sl-color-text) !important;
+  /* Brand hairline + soft drop shadow so the bar reads as a distinct floating
+     layer above the page in both themes. */
+  border-bottom: 1px solid color-mix(in srgb, var(--aspire-color-primary) 55%, transparent) !important;
+  box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.45) !important;
+  padding: 0.85rem 1.25rem !important;
+}
+
+#wcpConsentBannerCtrl p,
+#wcpConsentBannerCtrl span {
+  color: var(--sl-color-text) !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5 !important;
+}
+
+/* Leading info icon: outlined "i" (WCP draws it with stroke="currentColor" and
+   fill="none"). We only set the color — never force `fill`, or the circle fills
+   into a solid disc. --sl-color-text-accent is AA in both themes. */
+#wcpConsentBannerCtrl svg {
+  color: var(--sl-color-text-accent) !important;
+  fill: none !important;
+}
+
+/* Links (Privacy Statement, Third-Party Cookies). --sl-color-text-accent keeps
+   WCAG AA contrast in both themes (7.78:1 dark, 5.14:1 light); --aspire-color-primary
+   would drop to 3.16:1 on the dark surface. */
+#wcpConsentBannerCtrl a,
+#wcpCookiePreferenceCtrl a {
+  color: var(--sl-color-text-accent) !important;
+  text-underline-offset: 2px;
+  font-weight: 500 !important;
+}
+
+#wcpConsentBannerCtrl a:hover,
+#wcpCookiePreferenceCtrl a:hover {
+  color: var(--sl-color-accent-high) !important;
+}
+
+/* Shared button shape: Poppins, weight, rounded corners, comfortable hit area. */
+#wcpConsentBannerCtrl button,
+#wcpCookiePreferenceCtrl button {
+  font-family: var(--sl-font-system) !important;
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+  border-radius: 8px !important;
+  padding: 0.5rem 1.25rem !important;
+  min-height: 0 !important;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+/* The banner's three actions share one parent group, so :nth-of-type is a stable
+   way to distinguish them: 1 = Accept (primary), 2 = Reject, 3 = Manage cookies. */
+
+/* Primary "Accept" — mirrors the site's lavender "Try Aspire" CTA. */
+#wcpConsentBannerCtrl button:nth-of-type(1) {
+  background: var(--aspire-color-light) !important;
+  color: var(--aspire-color-black) !important;
+  border: 1px solid var(--aspire-color-light) !important;
+}
+
+#wcpConsentBannerCtrl button:nth-of-type(1):hover {
+  background: color-mix(in srgb, var(--aspire-color-light) 82%, var(--aspire-color-purple)) !important;
+  border-color: color-mix(in srgb, var(--aspire-color-light) 82%, var(--aspire-color-purple)) !important;
+}
+
+/* Secondary "Reject" / "Manage cookies" — ghost buttons that fill toward brand
+   purple on hover. */
+#wcpConsentBannerCtrl button:nth-of-type(2),
+#wcpConsentBannerCtrl button:nth-of-type(3) {
+  background: transparent !important;
+  color: var(--sl-color-text) !important;
+  border: 1px solid color-mix(in srgb, var(--sl-color-text) 30%, transparent) !important;
+}
+
+#wcpConsentBannerCtrl button:nth-of-type(2):hover,
+#wcpConsentBannerCtrl button:nth-of-type(3):hover {
+  background: color-mix(in srgb, var(--aspire-color-primary) 14%, transparent) !important;
+  border-color: var(--aspire-color-primary) !important;
+  color: var(--sl-color-text) !important;
+}
+
+/* ==========================================================================
+ * Preferences dialog
+ *
+ * We take full ownership of the modal too, using WCP's stable ARIA roles
+ * (role="dialog" panel, role="document" body) rather than hashed classes. WCP
+ * hardcodes a white surface + black text (and repaints them from its own theme
+ * on init), so we override the surface, text, scrim, and footer buttons with
+ * theme-aware Aspire tokens — the same treatment as the banner. Because these
+ * rules resolve from the --sl- and --aspire- custom properties, the dialog
+ * re-themes instantly when the site theme toggles (backed up by the theme-changed
+ * event we dispatch so WCP repaints its own internals too).
+ * ======================================================================== */
+
+/* Lock the underlying page while the modal is open. WCP injects
+   #wcpCookiePreferenceCtrl only while the dialog is open (and removes it on
+   close), so :has() toggles this lock automatically with no JavaScript. The site
+   scrolls on <html>, so overflow:hidden there stops wheel/touch scroll from
+   leaking to the page behind the scrim; scrollbar-gutter:stable reserves the
+   scrollbar's width so content doesn't shift horizontally when the scrollbar is
+   hidden. Degrades gracefully — browsers without :has() simply keep normal
+   scroll rather than breaking. */
+html:has(#wcpCookiePreferenceCtrl) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+
+#wcpCookiePreferenceCtrl,
+#wcpCookiePreferenceCtrl * {
+  font-family: var(--sl-font-system) !important;
+}
+
+/* Backdrop scrim — WCP defaults to a translucent white wash, which looks broken
+   in dark mode. A neutral dark scrim reads correctly in both themes. */
+#wcpCookiePreferenceCtrl {
+  background: color-mix(in srgb, var(--aspire-color-black) 60%, transparent) !important;
+}
+
+/* Modal panel — the branded Aspire card. */
+#wcpCookiePreferenceCtrl [role='dialog'] {
+  background: var(--sl-color-bg) !important;
+  color: var(--sl-color-text) !important;
+  border: 1px solid color-mix(in srgb, var(--sl-color-text) 12%, transparent) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5) !important;
+}
+
+/* WCP hardcodes black on its text nodes, so recolor them to the theme text.
+   (Elements without an explicit WCP color inherit from the panel rule above.) */
+#wcpCookiePreferenceCtrl [role='dialog'] h1,
+#wcpCookiePreferenceCtrl [role='dialog'] h2,
+#wcpCookiePreferenceCtrl [role='dialog'] h3,
+#wcpCookiePreferenceCtrl [role='dialog'] p,
+#wcpCookiePreferenceCtrl [role='dialog'] dt,
+#wcpCookiePreferenceCtrl [role='dialog'] dd,
+#wcpCookiePreferenceCtrl [role='dialog'] label,
+#wcpCookiePreferenceCtrl [role='dialog'] span,
+#wcpCookiePreferenceCtrl [role='dialog'] li {
+  color: var(--sl-color-text) !important;
+}
+
+/* Native radios/checkboxes per category adopt the brand color. accent-color is
+   the failsafe way to recolor form controls without touching hashed classes. */
+#wcpCookiePreferenceCtrl input {
+  accent-color: var(--aspire-color-primary) !important;
+}
+
+/* Close (✕) button — the direct child button of the dialog panel. */
+#wcpCookiePreferenceCtrl [role='dialog'] > button {
+  background: transparent !important;
+  color: var(--sl-color-text) !important;
+  border: none !important;
+  padding: 0.35rem !important;
+}
+#wcpCookiePreferenceCtrl [role='dialog'] > button:hover {
+  color: var(--sl-color-text-accent) !important;
+}
+
+/* Footer actions live in the last child of the dialog body: the first button is
+   the primary "Save changes" (lavender CTA), the second is "Reset all" (ghost). */
+#wcpCookiePreferenceCtrl [role='document'] > div:last-child button:first-of-type {
+  background: var(--aspire-color-light) !important;
+  color: var(--aspire-color-black) !important;
+  border: 1px solid var(--aspire-color-light) !important;
+}
+#wcpCookiePreferenceCtrl [role='document'] > div:last-child button:first-of-type:hover {
+  background: color-mix(in srgb, var(--aspire-color-light) 82%, var(--aspire-color-purple)) !important;
+  border-color: color-mix(in srgb, var(--aspire-color-light) 82%, var(--aspire-color-purple)) !important;
+}
+#wcpCookiePreferenceCtrl [role='document'] > div:last-child button:last-of-type {
+  background: transparent !important;
+  color: var(--sl-color-text) !important;
+  border: 1px solid color-mix(in srgb, var(--sl-color-text) 30%, transparent) !important;
+}
+#wcpCookiePreferenceCtrl [role='document'] > div:last-child button:last-of-type:hover {
+  background: color-mix(in srgb, var(--aspire-color-primary) 14%, transparent) !important;
+  border-color: var(--aspire-color-primary) !important;
+}
+
+/* ==========================================================================
+ * Shared focus treatment
+ * ======================================================================== */
+#wcpConsentBannerCtrl button:focus-visible,
+#wcpConsentBannerCtrl a:focus-visible,
+#wcpCookiePreferenceCtrl button:focus-visible,
+#wcpCookiePreferenceCtrl a:focus-visible,
+#wcpCookiePreferenceCtrl input:focus-visible {
+  outline: 2px solid var(--aspire-color-primary) !important;
+  outline-offset: 2px !important;
+}
diff --git a/src/frontend/tests/e2e/helpers.ts b/src/frontend/tests/e2e/helpers.ts
index 668573ef1..5000b6bcf 100644
--- a/src/frontend/tests/e2e/helpers.ts
+++ b/src/frontend/tests/e2e/helpers.ts
@@ -4,15 +4,6 @@ export async function resetCookieConsentState(page: Page): Promise<void> {
   await page.context().clearCookies();
 }
 
-export async function openCookiePreferences(page: Page): Promise<void> {
-  const openPreferencesButton = page.locator('.cookie-consent-btn:visible').first();
-  await expect(openPreferencesButton).toBeVisible({ timeout: 15000 });
-  await openPreferencesButton.click();
-  await expect(page.locator('#pm__title')).toBeVisible({
-    timeout: 15000,
-  });
-}
-
 export async function dismissCookieConsentIfVisible(page: Page): Promise<void> {
   const siteTourDismissButton = page.locator('[data-tour-action="dismiss"]');
   if (await siteTourDismissButton.isVisible().catch(() => false)) {
@@ -25,20 +16,6 @@ export async function dismissCookieConsentIfVisible(page: Page): Promise<void> {
   }
 }
 
-export async function clickCookiePreferencesAction(
-  page: Page,
-  actionName: RegExp
-): Promise<void> {
-  const actionButton = page.getByRole('button', { name: actionName }).last();
-  await Promise.all([
-    page.waitForEvent('framenavigated', {
-      predicate: (frame) => frame === page.mainFrame(),
-    }),
-    actionButton.click(),
-  ]);
-  await page.waitForLoadState('domcontentloaded');
-}
-
 export async function waitForAccessibilityEnhancements(page: Page): Promise<void> {
   await expect(page.locator('main h1').first()).toBeVisible();
   await expect
@@ -107,44 +84,3 @@ export function isNarrowViewport(page: Page): boolean {
   const viewport = page.viewportSize();
   return Boolean(viewport && viewport.width < 800);
 }
-
-async function readConsentCategories(page: Page): Promise<string[] | null> {
-  try {
-    return await page.evaluate(() => {
-      const cookieEntry = document.cookie
-        .split('; ')
-        .find((entry) => entry.startsWith('cc_cookie='));
-
-      if (!cookieEntry) {
-        return null;
-      }
-
-      const [, rawValue = ''] = cookieEntry.split('=');
-      const parsed = JSON.parse(decodeURIComponent(rawValue));
-      return Array.isArray(parsed?.categories) ? parsed.categories.slice().sort() : null;
-    });
-  } catch {
-    return null;
-  }
-}
-
-export async function waitForConsentRecorded(page: Page): Promise<void> {
-  await expect.poll(() => readConsentCategories(page)).not.toBeNull();
-}
-
-export async function waitForAnalyticsConsent(page: Page, expected: boolean): Promise<void> {
-  await expect
-    .poll(async () => {
-      const categories = await readConsentCategories(page);
-      return categories ? categories.includes('analytics') : null;
-    })
-    .toBe(expected);
-}
-
-export async function waitForConsentCategories(
-  page: Page,
-  expectedCategories: string[]
-): Promise<void> {
-  const sortedExpectedCategories = [...expectedCategories].sort();
-  await expect.poll(() => readConsentCategories(page)).toEqual(sortedExpectedCategories);
-}
diff --git a/src/frontend/tests/e2e/integrations-gallery.spec.ts b/src/frontend/tests/e2e/integrations-gallery.spec.ts
index 78185594a..52c968d83 100644
--- a/src/frontend/tests/e2e/integrations-gallery.spec.ts
+++ b/src/frontend/tests/e2e/integrations-gallery.spec.ts
@@ -4,71 +4,19 @@ import { dismissCookieConsentIfVisible } from '@tests/e2e/helpers';
 const SHOW_CLIENT = process.env.PUBLIC_SHOW_CLIENT_INTEGRATIONS === 'true';
 
 // On tablet viewports, the gallery's two-column EC code blocks can stack
-// above the fixed-position cookie banner once Playwright scrolls the
-// "Reject all" button into view — clicks then time out because a `<code>`
-// element from a card intercepts pointer events.  Sidestep the whole
-// banner by pre-seeding a "Reject all"-equivalent `cc_cookie` before the
-// first navigation; vanilla-cookieconsent reads this on init and never
-// renders the modal.
-test.beforeEach(async ({ context, baseURL }) => {
-  // Pre-seed a "Reject all"-equivalent cc_cookie so vanilla-cookieconsent
-  // skips the modal on first paint. The cookie banner is fixed-position at
-  // the bottom of the viewport, and on tablet our EC code blocks stack
-  // above it once Playwright scrolls the reject button into view — the
-  // resulting pointer-event interception makes the standard
-  // dismissCookieConsentIfVisible helper time out. Suppressing the banner
-  // up front avoids the overlap entirely.
-  //
-  // Shape mirrors vanilla-cookieconsent v3's persisted cookie after a real
-  // "Reject all" — categories: ['necessary'] is the minimal accepted set
-  // (matches the readOnly: true necessary category in
-  // src/frontend/config/cookie.config.ts).
-  const ccCookieValue = encodeURIComponent(
-    JSON.stringify({
-      categories: ['necessary'],
-      revision: 0,
-      data: null,
-      consentTimestamp: new Date().toISOString(),
-      consentId: '00000000-0000-0000-0000-000000000000',
-      services: { necessary: [] },
-      lastConsentTimestamp: new Date().toISOString(),
-      expirationTime: Date.now() + 365 * 24 * 60 * 60 * 1000,
-    }),
-  );
-
-  // Set on both the explicit base URL host (so the lib sees it on first
-  // request) and via init script (defensive — runs before any inline page
-  // script). The CSS fallback hides the banner if a future lib upgrade
-  // rejects our pre-seeded shape.
-  if (baseURL) {
-    const url = new URL(baseURL);
-    await context.addCookies([
-      {
-        name: 'cc_cookie',
-        value: ccCookieValue,
-        domain: url.hostname,
-        path: '/',
-        expires: Math.floor(Date.now() / 1000) + 365 * 24 * 60 * 60,
-        sameSite: 'Lax',
-      },
-    ]);
-  }
-
-  await context.addInitScript((value) => {
-    try {
-      document.cookie = `cc_cookie=${value}; path=/; max-age=31536000; SameSite=Lax`;
-    } catch {
-      // best-effort
-    }
-
-    // Belt-and-suspenders: hide the banner via CSS in case the pre-seed
-    // shape is rejected by a future lib upgrade. The CSS rule is appended
-    // as soon as <head> exists, so it applies before paint.
+// above the fixed-position WCP cookie banner once Playwright scrolls a
+// card into view — clicks then time out because a `<code>` element
+// intercepts pointer events. Sidestep the overlap by hiding the WCP
+// banner (`#wcpConsentBannerCtrl`) via CSS before first paint. The banner
+// is geo-gated so it never renders in CI, but this keeps local EU runs
+// stable too.
+test.beforeEach(async ({ context }) => {
+  await context.addInitScript(() => {
     const installHide = () => {
       if (document.querySelector('style[data-test-cc-suppress]')) return;
       const style = document.createElement('style');
       style.setAttribute('data-test-cc-suppress', '');
-      style.textContent = '#cc-main, #cm, .cm--box { display: none !important; }';
+      style.textContent = '#wcpConsentBannerCtrl { display: none !important; }';
       (document.head ?? document.documentElement).appendChild(style);
     };
     if (document.head) {
@@ -76,7 +24,7 @@ test.beforeEach(async ({ context, baseURL }) => {
     } else {
       document.addEventListener('DOMContentLoaded', installHide, { once: true });
     }
-  }, ccCookieValue);
+  });
 });
 
 test.describe('integrations gallery', () => {
diff --git a/src/frontend/tests/e2e/ui-regressions.spec.ts b/src/frontend/tests/e2e/ui-regressions.spec.ts
index dde57a4ff..add4610e3 100644
--- a/src/frontend/tests/e2e/ui-regressions.spec.ts
+++ b/src/frontend/tests/e2e/ui-regressions.spec.ts
@@ -1,14 +1,9 @@
 import { expect, test, type Page } from '@playwright/test';
 import {
-  clickCookiePreferencesAction,
   dismissCookieConsentIfVisible,
   isNarrowViewport,
-  openCookiePreferences,
   resetCookieConsentState,
   waitForApiSidebarReady,
-  waitForAnalyticsConsent,
-  waitForConsentCategories,
-  waitForConsentRecorded,
   waitForTopicSidebarReady,
 } from '@tests/e2e/helpers';
 
@@ -225,29 +220,6 @@ test('homepage header actions stay reachable at zoomed and reflow widths', async
   }
 });
 
-test('cookie consent reject-all keeps analytics disabled', async ({ page }) => {
-  await resetCookieConsentState(page);
-  await page.goto('/get-started/prerequisites/');
-  await openCookiePreferences(page);
-
-  await clickCookiePreferencesAction(page, /reject all/i);
-  await waitForConsentRecorded(page);
-  await waitForAnalyticsConsent(page, false);
-  await waitForConsentCategories(page, ['necessary']);
-});
-
-test('cookie preferences and accept-all enable analytics tracking consent', async ({ page }) => {
-  await resetCookieConsentState(page);
-  await page.goto('/get-started/prerequisites/');
-  await openCookiePreferences(page);
-
-  await clickCookiePreferencesAction(page, /accept all/i);
-
-  await waitForConsentRecorded(page);
-  await waitForAnalyticsConsent(page, true);
-  await waitForConsentCategories(page, ['necessary', 'analytics', 'advertising']);
-});
-
 test('footer preferences persist theme and keyboard style selections', async ({ page }) => {
   await page.goto('/get-started/aspire-vscode-extension/');
   await dismissCookieConsentIfVisible(page);

From 69dc321c1d4774ecb08a3573e66db569523601a4 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Mon, 27 Jul 2026 11:40:11 -0500
Subject: [PATCH 3/7] Hide "Manage cookies" buttons where consent isn't
 required

WCP reports whether consent is required for the visitor's region. Where it
is not (e.g. the US) there is nothing to manage, so hide the four "Manage
cookies" buttons instead of leaving inert controls on the page.

The WCP runtime sets a data-consent-not-required flag on <html> once it
knows the region; a CSS rule hides .cookie-consent-btn when the flag is
present. The flag is primed from localStorage before paint so returning
visitors in non-required regions don't see the buttons flash in. Defaulting
to visible keeps this failsafe: if WCP is slow or blocked we never hide a
control a required region needs. display:none also makes the site tour
auto-skip its cookie-preferences step, so no tour changes are needed.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 .../src/components/starlight/Head.astro       | 37 +++++++++++++++++++
 src/frontend/src/styles/wcp-consent.css       | 19 ++++++++++
 2 files changed, 56 insertions(+)

diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index 8c9164c47..10827a369 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -214,6 +214,42 @@ function computeSourceUrl() {
     if (window.__aspireWcpConsentInitialized) return;
     window.__aspireWcpConsentInitialized = true;
 
+    // The four "Manage cookies" buttons are always server-rendered. Once WCP
+    // tells us whether consent is required for this region, reflect it on <html>
+    // so CSS can hide those buttons where there is nothing to manage (e.g. the
+    // US). Persist the answer so a returning visitor doesn't see the button
+    // flash in before WCP loads.
+    function setConsentRequirementState(isRequired) {
+      try {
+        var el = document.documentElement;
+        if (el) {
+          if (isRequired) {
+            el.removeAttribute('data-consent-not-required');
+          } else {
+            el.setAttribute('data-consent-not-required', '');
+          }
+        }
+        window.localStorage.setItem('aspireConsentRequired', isRequired ? 'true' : 'false');
+      } catch (e) {}
+    }
+
+    // Before WCP loads, hide the buttons only if a previous visit already
+    // established that consent is not required here. Unknown => leave them
+    // visible; defaulting to visible keeps us failsafe (we never hide a control
+    // a required region needs just because WCP was slow or blocked).
+    function primeConsentRequirementState() {
+      try {
+        if (
+          window.localStorage.getItem('aspireConsentRequired') === 'false' &&
+          document.documentElement
+        ) {
+          document.documentElement.setAttribute('data-consent-not-required', '');
+        }
+      } catch (e) {}
+    }
+
+    primeConsentRequirementState();
+
     // Failsafe: if the CDN script is blocked (ad-blocker, firewall, CSP) or slow to
     // arrive, poll for a bounded window and then give up so the page never hangs or
     // spins forever. Consent code must never degrade the rest of the site.
@@ -357,6 +393,7 @@ function computeSourceUrl() {
           function (err, siteConsent) {
             if (err || !siteConsent) return;
             window.__aspireWcpSiteConsent = siteConsent;
+            setConsentRequirementState(!!siteConsent.isConsentRequired);
             syncConsentState(siteConsent.getConsent());
             if (typeof siteConsent.onConsentChanged === 'function') {
               siteConsent.onConsentChanged(onConsentChanged);
diff --git a/src/frontend/src/styles/wcp-consent.css b/src/frontend/src/styles/wcp-consent.css
index b96501852..9ee718a2a 100644
--- a/src/frontend/src/styles/wcp-consent.css
+++ b/src/frontend/src/styles/wcp-consent.css
@@ -18,6 +18,25 @@
  * theme-aware custom properties in site.css, so the UI tracks light/dark itself.
  */
 
+/* ==========================================================================
+ * Manage-cookies buttons (site chrome)
+ *
+ * The four "Manage cookies" buttons (header desktop + mobile, footer tools, and
+ * the social-icons row) are always server-rendered so they are available the
+ * instant WCP decides consent is required. Where WCP reports consent is NOT
+ * required (e.g. the US) there is nothing to manage, so we hide them. The
+ * `data-consent-not-required` flag is set on <html> by the WCP runtime in
+ * Head.astro once it knows the region (and primed from localStorage before
+ * paint on return visits to avoid a flash). Defaulting to visible is failsafe:
+ * if WCP never loads we never wrongly hide a control a required region needs.
+ *
+ * `display: none` also makes the site tour skip its `cookie-preferences` step,
+ * because the tour ignores targets that aren't visible.
+ * ======================================================================== */
+html[data-consent-not-required] .cookie-consent-btn {
+  display: none !important;
+}
+
 /* ==========================================================================
  * Banner
  * ======================================================================== */

From 60db87703cba5ca5465f00b7311fc783fd1c9ab0 Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Mon, 27 Jul 2026 11:44:51 -0500
Subject: [PATCH 4/7] Keep header-order e2e test deterministic when consent
 isn't required

The compact-header-order regression asserts the full set of header
controls, including the "Manage cookies" button. That button is now
region-gated: WCP hides it where consent isn't required, which is how most
CI runner IPs resolve, so the test could see a shorter header and fail.
Block the WCP CDN for this test so it always exercises the failsafe default
(every control present), keeping the expected order stable regardless of
the runner's geo. The site-tour e2e test needs no change; it advances until
"Finish" without counting steps, so it tolerates the cookie step being
skipped.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 src/frontend/tests/e2e/ui-regressions.spec.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/frontend/tests/e2e/ui-regressions.spec.ts b/src/frontend/tests/e2e/ui-regressions.spec.ts
index add4610e3..9d58f27c9 100644
--- a/src/frontend/tests/e2e/ui-regressions.spec.ts
+++ b/src/frontend/tests/e2e/ui-regressions.spec.ts
@@ -100,6 +100,13 @@ test('homepage header actions stay reachable at zoomed and reflow widths', async
   // the page interactive across the repeated navigations.
   await page.emulateMedia({ reducedMotion: 'reduce' });
 
+  // The "Manage cookies" button is region-gated: once WCP resolves the
+  // visitor's region it hides the button where consent isn't required (which
+  // is how most CI runner IPs resolve). Block the WCP CDN so this layout test
+  // always sees the failsafe default — every header control present — keeping
+  // the expected order deterministic regardless of where the runner lives.
+  await page.route(/wcpstatic\.microsoft\.com/, (route) => route.abort());
+
   const expectedCompactHeaderOrder = [
     'Aspire',
     'Search',

From 4524e1bcce907f1da36e01b9a0592335769d84cf Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Mon, 27 Jul 2026 13:04:20 -0500
Subject: [PATCH 5/7] Address PR review: drop dead consent global, harden WCP
 init

Two fixes for the Copilot review comments on #1403, both in the WCP
initializer in Head.astro:

- Remove the toLegacyCategories / syncConsentState path that only ever
  wrote window.__aspireConsentCategories, a global nothing in the frontend
  (or anywhere in the repo) reads. This also drops the astro:page-load
  handler and getConsent() calls that existed solely to feed that dead
  global, removing a runtime side effect with no consumer.

- Resolve the WCP init theme through toWcpThemeName instead of
  dereferencing wcp.themes.dark/light directly. If a future WCP payload
  omits or renames themes, the direct access threw, the throw was swallowed
  by the surrounding try/catch, and initialization stopped permanently with
  no retry. toWcpThemeName already falls back to a plain string, and init
  now reschedules itself on exceptions within the existing bounded window.

Validated locally against the WCP CDN: consent still initializes (US ->
consent not required, manage-cookies buttons hidden), the removed global is
now undefined, and there are no console errors.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 .../src/components/starlight/Head.astro       | 39 ++++++-------------
 1 file changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index 10827a369..476e03b1d 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -265,21 +265,6 @@ function computeSourceUrl() {
       return region ? lang + '-' + region : lang;
     }
 
-    function toLegacyCategories(consent) {
-      if (!consent || typeof consent !== 'object') return null;
-      var categories = ['necessary'];
-      if (consent.Analytics) categories.push('analytics');
-      if (consent.SocialMedia) categories.push('socialmedia');
-      if (consent.Advertising) categories.push('advertising');
-      return categories.sort();
-    }
-
-    function syncConsentState(consent) {
-      try {
-        window.__aspireConsentCategories = toLegacyCategories(consent);
-      } catch (e) {}
-    }
-
     function withSiteConsent(callback) {
       var siteConsent = window.__aspireWcpSiteConsent;
       if (!siteConsent) return false;
@@ -301,8 +286,9 @@ function computeSourceUrl() {
       });
     }
 
-    function onConsentChanged(nextConsent) {
-      syncConsentState(nextConsent);
+    function onConsentChanged() {
+      // WCP fires this when the visitor changes their choices. Reload so the new
+      // consent is applied consistently across any consent-gated behavior.
       window.setTimeout(function () {
         window.location.reload();
       }, 0);
@@ -384,8 +370,10 @@ function computeSourceUrl() {
 
       try {
         var culture = toCulture(document.documentElement.lang || navigator.language || 'en-US');
-        var themeName = (document.documentElement.getAttribute('data-theme') || '').toLowerCase();
-        var theme = themeName === 'dark' ? wcp.themes.dark : wcp.themes.light;
+        // Resolve the theme through toWcpThemeName so a missing or renamed
+        // wcp.themes payload falls back to a string here instead of throwing
+        // (which would be swallowed below and permanently stop initialization).
+        var theme = toWcpThemeName(document.documentElement.getAttribute('data-theme'));
 
         wcp.init(
           culture,
@@ -394,7 +382,6 @@ function computeSourceUrl() {
             if (err || !siteConsent) return;
             window.__aspireWcpSiteConsent = siteConsent;
             setConsentRequirementState(!!siteConsent.isConsentRequired);
-            syncConsentState(siteConsent.getConsent());
             if (typeof siteConsent.onConsentChanged === 'function') {
               siteConsent.onConsentChanged(onConsentChanged);
             }
@@ -403,7 +390,11 @@ function computeSourceUrl() {
           theme
         );
       } catch (e) {
-        // Never let consent initialization break page rendering.
+        // Never let consent initialization break page rendering. Retry within
+        // the bounded window in case WCP delivered a transient or partial payload.
+        if (++initAttempts < MAX_INIT_ATTEMPTS) {
+          window.setTimeout(initWcpConsent, 100);
+        }
       }
     }
 
@@ -415,12 +406,6 @@ function computeSourceUrl() {
     } else {
       initWcpConsent();
     }
-
-    document.addEventListener('astro:page-load', function () {
-      withSiteConsent(function (siteConsent) {
-        syncConsentState(siteConsent.getConsent());
-      });
-    });
   })();
 </script>
 

From ac4720fb8e68612838f95133f80ce3068cadc1af Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Mon, 27 Jul 2026 21:51:34 -0500
Subject: [PATCH 6/7] Address review 4790741647: wire analytics, fix banner
 overlap + a11y

Implements every point from adamint's review on #1403.

Critical:
- Analytics never loaded under WCP. The three analytics scripts still ship
  inert (type="text/plain" data-category="analytics") from the previous
  cookie library, but WCP is a consent-collection API and does not manage
  script tags, so nothing re-activated them. Head.astro now bridges the gap:
  on init it reads siteConsent.getConsent().Analytics and, when granted
  (default where consent isn't required, e.g. the US), promotes each inert
  script to an executable clone. onConsentChanged reloads, so a later grant
  re-applies via the same path. Verified locally: all three scripts flip
  from text/plain to active on the US default-grant page.

Accessibility:
- The geo-gated banner is a fixed top strip that painted over the fixed
  Starlight header (z-index 10), hiding nav/search (WCAG 2.4.11). A new
  ResizeObserver (trackBannerHeight) publishes the banner's live height as
  --wcp-banner-height, and CSS translates .page (the body-level wrapper that
  contains every fixed control) down by that amount only while the banner is
  in the DOM. It is a no-op with no banner (0px), so the US is unaffected.
  Verified: injecting a 60px banner shifts the header to top:60 uncovered.
- Reject / Manage-cookies ghost buttons used a 30% border that failed WCAG
  1.4.11 non-text contrast (1.90:1 light / 2.70:1 dark). Bumped to 55%
  (3.73:1 / 5.82:1) on the banner and the dialog reset button.

Cleanups:
- Guard openManageConsent so preventDefault only fires when WCP's dialog
  actually opened, not on every click.
- Replace the dead `theme-changed` CustomEvent (WCP has no such listener)
  with the real re-theme hook, siteConsent.applyTheme(themeObject), driven
  by the existing data-theme observer.
- Register onConsentChanged once via init's callback argument; drop the
  redundant siteConsent.onConsentChanged(...) call that double-registered it
  (WCP stores callbacks in a list, so it fired two reloads per change).
- Refresh the Cookie Consent + screenshot sections of astro.instructions.md
  to describe WCP (geo-gated top strip, Accept/Reject/More info, MSCC
  cookie) instead of the removed jop-software library.
- Drop the dead E2E_TESTS env (read nowhere) from frontend-build.yml and the
  two playwright configs, plus the stale cookie.config.ts comment.

Tests:
- Restore the consent regression coverage adamint flagged as deleted. New
  tests/e2e/cookie-consent.spec.ts stubs window.WcpConsent (blocking the real
  CDN) so it can assert the behavior that only exists at runtime: analytics
  scripts are promoted from inert to executable when Analytics consent is
  granted, stay inert when it is withheld, and every server-rendered
  manage-cookies control routes a click to siteConsent.manageConsent(). Green
  across the desktop, tablet, and mobile projects.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 .github/astro.instructions.md                 |  11 +-
 .github/workflows/frontend-build.yml          |   6 -
 .../playwright.api-markdown.config.mjs        |   1 -
 src/frontend/playwright.config.mjs            |   1 -
 .../src/components/starlight/Head.astro       | 123 ++++++++--
 src/frontend/src/styles/wcp-consent.css       |  36 ++-
 src/frontend/tests/e2e/cookie-consent.spec.ts | 218 ++++++++++++++++++
 7 files changed, 356 insertions(+), 40 deletions(-)
 create mode 100644 src/frontend/tests/e2e/cookie-consent.spec.ts

diff --git a/.github/astro.instructions.md b/.github/astro.instructions.md
index 90aa05e77..2da9248b4 100644
--- a/.github/astro.instructions.md
+++ b/.github/astro.instructions.md
@@ -338,11 +338,11 @@ Sidebar topics are defined in `config/sidebar/` as separate modules and aggregat
 
 ## Cookie Consent
 
-The site uses `@jop-software/astro-cookieconsent` with a box modal at bottom-right. The consent modal has three buttons: **"Accept all"**, **"Reject all"**, and **"Manage preferences"**. This is relevant when automating browser interactions — always dismiss the cookie modal first.
+The site uses Microsoft's **WCP** consent runtime (`wcp-consent.js`, loaded live from `wcpstatic.microsoft.com`), wired up in `src/components/starlight/Head.astro` and fully restyled by `src/styles/wcp-consent.css`. The banner is **geo-gated**: the CDN decides per region whether it appears, so where consent is not required (e.g. the US) **no banner shows** and the "Manage cookies" buttons are hidden (`html[data-consent-not-required]`). When it does appear (e.g. the EU) it is a **fixed strip at the top of the viewport** — not a bottom-right box — with **"Accept"**, **"Reject"**, and **"More info"** actions; "More info" opens a preferences dialog with per-category toggles and "Save changes" / "Reset all". Consent is persisted in the `MSCC` cookie. Because it is geo-gated, you usually will not see it in local/US automation — if it does appear, dismiss it first.
 
 ## Screenshots and Visual Verification with playwright-cli
 
-When making visual changes or preparing PR screenshots, use the `playwright-cli` skill to automate browser interaction. This site has a cookie consent modal that appears on first visit and **must be dismissed before taking screenshots**.
+When making visual changes or preparing PR screenshots, use the `playwright-cli` skill to automate browser interaction. This site _may_ show a WCP cookie banner on first visit, but it is **geo-gated** and usually absent in local/US runs — when it does appear (a fixed strip at the top of the viewport) **dismiss it before taking screenshots**.
 
 ### Workflow for Taking Screenshots
 
@@ -352,10 +352,11 @@ When making visual changes or preparing PR screenshots, use the `playwright-cli`
    playwright-cli open http://localhost:4321
    playwright-cli goto http://localhost:4321/path/to/page/
    ```
-3. **Dismiss the cookie consent modal first** — click the "Reject all" button:
+3. **Dismiss the cookie banner if one appears** — click the "Reject" button (often a
+   no-op locally, since the banner is geo-gated and typically does not render):
    ```bash
    playwright-cli snapshot
-   # Find the ref for the "Reject all" button in the snapshot
+   # If a banner is present, find the "Reject" ref in the snapshot and click it
    playwright-cli click <ref>
    ```
 4. Take the screenshot:
@@ -370,7 +371,7 @@ When making visual changes or preparing PR screenshots, use the `playwright-cli`
    playwright-cli screenshot --filename=mobile.png
    ```
 
-Always dismiss the cookie modal before any screenshot or visual verification. The "Reject all" button avoids setting unnecessary cookies during development.
+If a banner is present, dismiss it before any screenshot or visual verification. The "Reject" button avoids setting unnecessary cookies during development; in local/US runs no banner appears, so this step is usually unnecessary.
 
 ## Accessibility and Inclusive Writing
 
diff --git a/.github/workflows/frontend-build.yml b/.github/workflows/frontend-build.yml
index 9897e24ef..fa26c56c0 100644
--- a/.github/workflows/frontend-build.yml
+++ b/.github/workflows/frontend-build.yml
@@ -88,12 +88,6 @@ jobs:
         env:
           MODE: production
           ASTRO_TELEMETRY_DISABLED: 1
-          # The built artifact is consumed by `astro preview` during the
-          # e2e shards. `config/cookie.config.ts` reads `E2E_TESTS` at
-          # build time to disable the cookie-consent bot check; without
-          # this, the preview serves a production-configured modal that
-          # playwright is mistaken for a bot and never opens.
-          E2E_TESTS: 1
         run: pnpm build:production
 
       # Upload before the dist sanity-check so the artifact is always
diff --git a/src/frontend/playwright.api-markdown.config.mjs b/src/frontend/playwright.api-markdown.config.mjs
index ebedc7077..427a8006b 100644
--- a/src/frontend/playwright.api-markdown.config.mjs
+++ b/src/frontend/playwright.api-markdown.config.mjs
@@ -14,7 +14,6 @@ export default defineConfig({
     env: {
       ...process.env,
       ASTRO_TELEMETRY_DISABLED: '1',
-      E2E_TESTS: '1',
     },
     url: 'http://127.0.0.1:4322',
     reuseExistingServer: false,
diff --git a/src/frontend/playwright.config.mjs b/src/frontend/playwright.config.mjs
index b467dc967..f0d57d03f 100644
--- a/src/frontend/playwright.config.mjs
+++ b/src/frontend/playwright.config.mjs
@@ -74,7 +74,6 @@ export default defineConfig({
     env: {
       ...process.env,
       ASTRO_TELEMETRY_DISABLED: '1',
-      E2E_TESTS: '1',
     },
     url: e2eBaseUrl,
     reuseExistingServer: false,
diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index 476e03b1d..fe86a4f56 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -274,16 +274,57 @@ function computeSourceUrl() {
       return true;
     }
 
+    // WCP is a consent-collection API — unlike the previous cookie library it does
+    // NOT manage <script> tags. The analytics scripts ship inert as
+    // `type="text/plain" data-category="analytics"`; we must promote them to
+    // executable ourselves once WCP reports Analytics consent (granted by default
+    // where consent isn't required, e.g. the US). Without this bridge analytics
+    // never loads anywhere.
+    function activateAnalyticsScripts() {
+      if (window.__aspireAnalyticsActivated) return;
+      window.__aspireAnalyticsActivated = true;
+      var pending = document.querySelectorAll(
+        'script[type="text/plain"][data-category="analytics"]'
+      );
+      for (var i = 0; i < pending.length; i++) {
+        var old = pending[i];
+        var next = document.createElement('script');
+        for (var a = 0; a < old.attributes.length; a++) {
+          var attr = old.attributes[a];
+          // Drop the neutralizing `type="text/plain"` so the browser executes it.
+          if (attr.name === 'type') continue;
+          next.setAttribute(attr.name, attr.value);
+        }
+        if (old.textContent) next.textContent = old.textContent;
+        if (old.parentNode) old.parentNode.replaceChild(next, old);
+      }
+    }
+
+    function applyConsentToScripts(siteConsent) {
+      try {
+        var consent =
+          typeof siteConsent.getConsent === 'function' ? siteConsent.getConsent() : null;
+        if (consent && consent.Analytics) {
+          activateAnalyticsScripts();
+        }
+      } catch (e) {}
+    }
+
     function openManageConsent(event) {
       var target = event.target;
       if (!(target instanceof Element)) return;
       if (!target.closest('[data-cookie-manage-consent]')) return;
-      event.preventDefault();
+      var opened = false;
       withSiteConsent(function (siteConsent) {
         if (siteConsent.isConsentRequired) {
           siteConsent.manageConsent();
+          opened = true;
         }
       });
+      // Only suppress the trigger's native action when we actually opened WCP's
+      // dialog. If WCP is blocked/slow (ad-blocker, CSP) or consent isn't required
+      // here, leave the default behavior intact instead of swallowing the click.
+      if (opened) event.preventDefault();
     }
 
     function onConsentChanged() {
@@ -316,29 +357,61 @@ function computeSourceUrl() {
       return placeholder;
     }
 
+    // While WCP's banner is visible it sits in a fixed, full-width strip at the top
+    // of the viewport (see ensureBannerPlaceholder). Publish its live height as a
+    // custom property so CSS can push the fixed site header + content down by
+    // exactly that much instead of letting the banner overlay them. Tracks wraps
+    // and viewport resizes; collapses back to 0 when WCP removes the banner.
+    function trackBannerHeight() {
+      try {
+        var placeholder = document.getElementById('wcp-cookie-banner');
+        if (
+          !placeholder ||
+          window.__aspireWcpBannerObserver ||
+          typeof ResizeObserver === 'undefined'
+        ) {
+          return;
+        }
+        var apply = function () {
+          var height = placeholder.offsetHeight || 0;
+          document.documentElement.style.setProperty('--wcp-banner-height', height + 'px');
+        };
+        var observer = new ResizeObserver(apply);
+        observer.observe(placeholder);
+        window.__aspireWcpBannerObserver = observer;
+        apply();
+      } catch (e) {}
+    }
+
     // WCP paints the banner AND the preferences dialog from the theme passed at
-    // init time. It does not re-read the theme on its own, so when the user
-    // toggles the site theme after load we must tell WCP to repaint by dispatching
-    // the documented `theme-changed` event. Our CSS overrides re-theme instantly
-    // from custom properties; this keeps WCP's own internals (e.g. category
-    // toggles) in sync too.
-    function toWcpThemeName(themeName) {
+    // init time and does not re-read the site theme on its own. WCP exposes no
+    // `theme-changed` event — its only supported runtime re-theme hook is
+    // `siteConsent.applyTheme(themeObject)`. Our CSS overrides already re-theme the
+    // visible surfaces instantly from custom properties; calling applyTheme keeps
+    // WCP's own internal nodes in sync when the user toggles the site theme.
+    function resolveWcpTheme(themeName) {
       var wcp = window.WcpConsent;
       var isDark = (themeName || '').toLowerCase() === 'dark';
       if (wcp && wcp.themes) {
         return isDark ? wcp.themes.dark : wcp.themes.light;
       }
+      // String fallback keeps wcp.init from throwing when the themes payload is
+      // missing; applyTheme is guarded separately since it needs the real object.
       return isDark ? 'dark' : 'light';
     }
 
-    function notifyWcpThemeChanged() {
-      try {
-        var current = toWcpThemeName(document.documentElement.getAttribute('data-theme'));
-        // Dispatch on both targets: the WCP listener attaches to one of them and
-        // ignores the other, so this is robust to library changes.
-        window.dispatchEvent(new CustomEvent('theme-changed', { detail: { currentTheme: current } }));
-        document.dispatchEvent(new CustomEvent('theme-changed', { detail: { currentTheme: current } }));
-      } catch (e) {}
+    function applyWcpTheme() {
+      var wcp = window.WcpConsent;
+      // applyTheme reads color fields off the theme OBJECT, so only call it when
+      // the real themes payload is available (never with the string fallback).
+      if (!wcp || !wcp.themes) return;
+      withSiteConsent(function (siteConsent) {
+        if (typeof siteConsent.applyTheme === 'function') {
+          siteConsent.applyTheme(
+            resolveWcpTheme(document.documentElement.getAttribute('data-theme'))
+          );
+        }
+      });
     }
 
     function watchThemeChanges() {
@@ -347,7 +420,7 @@ function computeSourceUrl() {
         var observer = new MutationObserver(function (mutations) {
           for (var i = 0; i < mutations.length; i++) {
             if (mutations[i].attributeName === 'data-theme') {
-              notifyWcpThemeChanged();
+              applyWcpTheme();
               break;
             }
           }
@@ -370,22 +443,28 @@ function computeSourceUrl() {
 
       try {
         var culture = toCulture(document.documentElement.lang || navigator.language || 'en-US');
-        // Resolve the theme through toWcpThemeName so a missing or renamed
+        // Resolve the theme through resolveWcpTheme so a missing or renamed
         // wcp.themes payload falls back to a string here instead of throwing
         // (which would be swallowed below and permanently stop initialization).
-        var theme = toWcpThemeName(document.documentElement.getAttribute('data-theme'));
+        var theme = resolveWcpTheme(document.documentElement.getAttribute('data-theme'));
+        var host = ensureBannerPlaceholder() || document.body;
+        trackBannerHeight();
 
         wcp.init(
           culture,
-          ensureBannerPlaceholder() || document.body,
+          host,
           function (err, siteConsent) {
             if (err || !siteConsent) return;
             window.__aspireWcpSiteConsent = siteConsent;
             setConsentRequirementState(!!siteConsent.isConsentRequired);
-            if (typeof siteConsent.onConsentChanged === 'function') {
-              siteConsent.onConsentChanged(onConsentChanged);
-            }
+            // Bridge WCP consent to our inert analytics scripts. onConsentChanged
+            // reloads, so a later grant is re-applied by this same path on re-init.
+            applyConsentToScripts(siteConsent);
           },
+          // Single registration: passing onConsentChanged as init's 4th argument
+          // registers it once. WCP stores consent callbacks in a LIST, so ALSO
+          // calling siteConsent.onConsentChanged(onConsentChanged) would fire it
+          // twice (two reloads per change).
           onConsentChanged,
           theme
         );
diff --git a/src/frontend/src/styles/wcp-consent.css b/src/frontend/src/styles/wcp-consent.css
index 9ee718a2a..d46b128f3 100644
--- a/src/frontend/src/styles/wcp-consent.css
+++ b/src/frontend/src/styles/wcp-consent.css
@@ -37,6 +37,29 @@ html[data-consent-not-required] .cookie-consent-btn {
   display: none !important;
 }
 
+/* ==========================================================================
+ * Banner layout offset (keeps the fixed banner from covering site chrome)
+ *
+ * ensureBannerPlaceholder() in Head.astro pins WCP's banner to a fixed,
+ * full-width strip at the very top of the viewport so it is always visible on
+ * load. Left alone it would paint OVER the fixed Starlight header (z-index 10),
+ * hiding the nav and search behind it (a11y 2.4.11). Every top-anchored fixed
+ * element (header, sidebars, TOC, menu button) plus the content padding lives
+ * inside `.page`, while the banner is a body-level sibling — so translating
+ * `.page` down by the banner's live height clears all of them in one move
+ * without touching Starlight internals. `--wcp-banner-height` is published by
+ * trackBannerHeight() (a ResizeObserver) and is 0 whenever no banner is shown,
+ * so this is a no-op in regions/states without a banner (e.g. the US). The
+ * :has() guard matches only while WCP's banner element is actually in the DOM.
+ * ======================================================================== */
+:root {
+  --wcp-banner-height: 0px;
+}
+
+html:has(#wcpConsentBannerCtrl) .page {
+  transform: translateY(var(--wcp-banner-height));
+}
+
 /* ==========================================================================
  * Banner
  * ======================================================================== */
@@ -113,12 +136,14 @@ html[data-consent-not-required] .cookie-consent-btn {
 }
 
 /* Secondary "Reject" / "Manage cookies" — ghost buttons that fill toward brand
-   purple on hover. */
+   purple on hover. The resting border uses --sl-color-text at 55% so the button
+   boundary clears WCAG 1.4.11 non-text contrast (>=3:1) in both themes
+   (3.73:1 light, 5.82:1 dark); 30% failed it (1.90:1 / 2.70:1). */
 #wcpConsentBannerCtrl button:nth-of-type(2),
 #wcpConsentBannerCtrl button:nth-of-type(3) {
   background: transparent !important;
   color: var(--sl-color-text) !important;
-  border: 1px solid color-mix(in srgb, var(--sl-color-text) 30%, transparent) !important;
+  border: 1px solid color-mix(in srgb, var(--sl-color-text) 55%, transparent) !important;
 }
 
 #wcpConsentBannerCtrl button:nth-of-type(2):hover,
@@ -137,8 +162,8 @@ html[data-consent-not-required] .cookie-consent-btn {
  * on init), so we override the surface, text, scrim, and footer buttons with
  * theme-aware Aspire tokens — the same treatment as the banner. Because these
  * rules resolve from the --sl- and --aspire- custom properties, the dialog
- * re-themes instantly when the site theme toggles (backed up by the theme-changed
- * event we dispatch so WCP repaints its own internals too).
+ * re-themes instantly when the site theme toggles (backed up by an applyTheme
+ * call so WCP repaints its own internals too).
  * ======================================================================== */
 
 /* Lock the underlying page while the modal is open. WCP injects
@@ -219,7 +244,8 @@ html:has(#wcpCookiePreferenceCtrl) {
 #wcpCookiePreferenceCtrl [role='document'] > div:last-child button:last-of-type {
   background: transparent !important;
   color: var(--sl-color-text) !important;
-  border: 1px solid color-mix(in srgb, var(--sl-color-text) 30%, transparent) !important;
+  /* 55% keeps the ghost boundary >=3:1 (WCAG 1.4.11) in both themes; see banner. */
+  border: 1px solid color-mix(in srgb, var(--sl-color-text) 55%, transparent) !important;
 }
 #wcpCookiePreferenceCtrl [role='document'] > div:last-child button:last-of-type:hover {
   background: color-mix(in srgb, var(--aspire-color-primary) 14%, transparent) !important;
diff --git a/src/frontend/tests/e2e/cookie-consent.spec.ts b/src/frontend/tests/e2e/cookie-consent.spec.ts
new file mode 100644
index 000000000..d1d65f8e4
--- /dev/null
+++ b/src/frontend/tests/e2e/cookie-consent.spec.ts
@@ -0,0 +1,218 @@
+import { expect, test, type Page } from '@playwright/test';
+
+// The analytics scripts ship inert (`type="text/plain"`) and are promoted to
+// executable at runtime once WCP reports Analytics consent. These selectors let
+// us assert on that promotion without depending on which script sources exist.
+const ANALYTICS_SELECTOR = 'script[data-category="analytics"]';
+const INERT_ANALYTICS_SELECTOR = 'script[type="text/plain"][data-category="analytics"]';
+const EXECUTABLE_ANALYTICS_SELECTOR = 'script[data-category="analytics"]:not([type="text/plain"])';
+const MANAGE_TRIGGER_SELECTOR = '[data-cookie-manage-consent]';
+
+// astro dev fires a one-time full-page reload once Vite finishes pre-bundling
+// dependencies on a cold server, which can destroy the page's execution context
+// mid-assertion. Poll generously and evaluate defensively so that reload never
+// makes these tests flaky. (CI serves the built site via `astro preview`, where
+// this reload does not happen.)
+const POLL_TIMEOUT = 20_000;
+
+type WcpStubOptions = {
+  /** Whether WCP reports the visitor's region as requiring a consent choice. */
+  consentRequired: boolean;
+  /** Whether the stubbed consent record grants the Analytics category. */
+  analyticsGranted: boolean;
+};
+
+// WCP is a consent-collection API loaded from Microsoft's CDN; it exposes a
+// global `window.WcpConsent` whose `init` hands our bootstrap a `siteConsent`
+// object. Production behavior (does analytics load? do the manage buttons open
+// the dialog?) is driven entirely by that object, which in turn depends on the
+// runner's region — untestable against the real CDN. This installs a
+// deterministic stand-in before the page's inline consent bootstrap runs and
+// blocks the real library so it can't overwrite the stub.
+async function installWcpStub(page: Page, options: WcpStubOptions): Promise<void> {
+  // Stop the real (async) library from loading and clobbering our stub.
+  await page.route(/wcpstatic\.microsoft\.com/, (route) => route.abort());
+  // Once analytics scripts are promoted the browser fetches their sources.
+  // Neutralize those requests so the tests never hit the real network or run
+  // production analytics side effects; we only assert on the DOM promotion.
+  await page.route(/js\.monitor\.azure\.com/, (route) =>
+    route.fulfill({ contentType: 'application/javascript', body: '' })
+  );
+  await page.route(/\/scripts\/analytics\//, (route) =>
+    route.fulfill({ contentType: 'application/javascript', body: '' })
+  );
+
+  await page.addInitScript((opts: WcpStubOptions) => {
+    const siteConsent = {
+      isConsentRequired: opts.consentRequired,
+      getConsent() {
+        return {
+          Required: true,
+          Analytics: opts.analyticsGranted,
+          SocialMedia: opts.analyticsGranted,
+          Advertising: opts.analyticsGranted,
+        };
+      },
+      manageConsent() {
+        const w = window as unknown as { __wcpManageConsentCalls?: number };
+        w.__wcpManageConsentCalls = (w.__wcpManageConsentCalls ?? 0) + 1;
+      },
+      applyTheme() {
+        const w = window as unknown as { __wcpApplyThemeCalls?: number };
+        w.__wcpApplyThemeCalls = (w.__wcpApplyThemeCalls ?? 0) + 1;
+      },
+      onConsentChanged() {},
+    };
+
+    (window as unknown as { WcpConsent: unknown }).WcpConsent = {
+      themes: { dark: {}, light: {} },
+      init(
+        _culture: string,
+        _host: unknown,
+        initCallback: (err: unknown, consent: typeof siteConsent) => void
+      ) {
+        // Mirror WCP: invoke the init callback once consent is resolved so our
+        // bootstrap stores the siteConsent and runs the analytics bridge.
+        initCallback(null, siteConsent);
+      },
+    };
+  }, options);
+}
+
+// Evaluate a page function, tolerating the transient "execution context was
+// destroyed" throw that the cold-server reload can raise. Returns undefined
+// when the context is gone so callers can poll until it settles.
+async function safeEvaluate<T>(page: Page, fn: () => T): Promise<T | undefined> {
+  try {
+    return await page.evaluate(fn);
+  } catch {
+    return undefined;
+  }
+}
+
+// Our bootstrap stores the resolved consent on `window.__aspireWcpSiteConsent`.
+// Wait for it so assertions run after the consent -> DOM bridge has executed.
+async function waitForConsentBootstrap(page: Page): Promise<void> {
+  await expect
+    .poll(
+      () =>
+        safeEvaluate(page, () =>
+          Boolean((window as unknown as { __aspireWcpSiteConsent?: unknown }).__aspireWcpSiteConsent)
+        ),
+      { timeout: POLL_TIMEOUT }
+    )
+    .toBe(true);
+}
+
+test.describe('WCP cookie consent bridge', () => {
+  test('promotes inert analytics scripts once Analytics consent is granted', async ({ page }) => {
+    await installWcpStub(page, { consentRequired: false, analyticsGranted: true });
+    await page.goto('/');
+    await waitForConsentBootstrap(page);
+
+    // Every previously inert analytics script must have been promoted to an
+    // executable one (its neutralizing `type="text/plain"` removed). Locator
+    // polls re-query the live DOM, so they ride out the cold-server reload.
+    await expect
+      .poll(() => page.locator(INERT_ANALYTICS_SELECTOR).count(), { timeout: POLL_TIMEOUT })
+      .toBe(0);
+    await expect
+      .poll(
+        async () => {
+          const total = await page.locator(ANALYTICS_SELECTOR).count();
+          const executable = await page.locator(EXECUTABLE_ANALYTICS_SELECTOR).count();
+          return total > 0 && executable === total;
+        },
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(true);
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(page, () =>
+            Boolean(
+              (window as unknown as { __aspireAnalyticsActivated?: boolean })
+                .__aspireAnalyticsActivated
+            )
+          ),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(true);
+  });
+
+  test('leaves analytics scripts inert while Analytics consent is withheld', async ({ page }) => {
+    await installWcpStub(page, { consentRequired: true, analyticsGranted: false });
+    await page.goto('/');
+    await waitForConsentBootstrap(page);
+
+    // Consent is required here, so the manage-cookies controls stay enabled.
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(page, () =>
+            document.documentElement.hasAttribute('data-consent-not-required')
+          ),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(false);
+
+    // Nothing should have promoted the analytics scripts: every one stays inert
+    // and the activation flag is never set.
+    const total = await page.locator(ANALYTICS_SELECTOR).count();
+    expect(total).toBeGreaterThan(0);
+    await expect
+      .poll(() => page.locator(INERT_ANALYTICS_SELECTOR).count(), { timeout: POLL_TIMEOUT })
+      .toBe(total);
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(page, () =>
+            Boolean(
+              (window as unknown as { __aspireAnalyticsActivated?: boolean })
+                .__aspireAnalyticsActivated
+            )
+          ),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(false);
+  });
+
+  test('routes every manage-cookies control to the WCP consent dialog', async ({ page }) => {
+    await installWcpStub(page, { consentRequired: true, analyticsGranted: false });
+    await page.goto('/');
+    await waitForConsentBootstrap(page);
+
+    // At least one manage-cookies control must be server-rendered (the homepage
+    // ships three: the header's desktop and mobile buttons plus the footer's
+    // social row). The exact count varies by page/viewport, so assert on the
+    // behavior — every rendered control opens WCP's dialog — rather than a
+    // brittle fixed number.
+    await expect
+      .poll(() => page.locator(MANAGE_TRIGGER_SELECTOR).count(), { timeout: POLL_TIMEOUT })
+      .toBeGreaterThan(0);
+
+    // Fire every control through a real DOM click and confirm each one reached
+    // the single document-level handler that opens WCP's dialog. Doing the
+    // reset, clicks, and read in one evaluate keeps it atomic (manageConsent
+    // increments synchronously) and immune to the cold-server reload: if the
+    // context is torn down mid-run the whole step simply retries.
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(page, () => {
+            const w = window as unknown as {
+              __aspireWcpSiteConsent?: unknown;
+              __wcpManageConsentCalls?: number;
+            };
+            if (!w.__aspireWcpSiteConsent) return false;
+            w.__wcpManageConsentCalls = 0;
+            const controls = document.querySelectorAll<HTMLElement>('[data-cookie-manage-consent]');
+            if (controls.length === 0) return false;
+            controls.forEach((el) => el.click());
+            return (w.__wcpManageConsentCalls ?? 0) === controls.length;
+          }),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(true);
+  });
+});

From 81eb3ffb68df93c4f6042c2644b844dc6f06c6da Mon Sep 17 00:00:00 2001
From: David Pine <7679720+IEvangelist@users.noreply.github.com>
Date: Tue, 28 Jul 2026 10:48:42 -0500
Subject: [PATCH 7/7] Fix WCP analytics ordering and applyTheme arg (review
 4797687282)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

adamint's CHANGES_REQUESTED (with JamesNK's two inline notes) caught two real
bugs the e2e stub had masked. Both verified against the live library and fixed.

1. Analytics was dead on the default (US) path. activateAnalyticsScripts()
   rebuilds each inert script with document.createElement('script') but never
   reset `async`. Dynamically-created scripts default to async=true and the
   copied `defer` is a no-op for them, so the two tiny same-origin scripts
   (1ds.js, track.js) won the race against the ~140 KB 1DS SDK and each bailed
   silently (1ds.js returns without `oneDS`; track.js returns without
   `window.analytics.__initialized`). Set `next.async = false` so they execute
   in insertion (document) order. Since consent isn't required in the US,
   Analytics is auto-granted there, so this was most traffic, not an edge case.

2. applyTheme always threw. WCP v2's public `siteConsent.applyTheme(name)`
   takes a string theme KEY and looks it up in its internal map; we were
   passing `wcp.themes.dark/.light` (an object), so `this.themes[object]` was
   undefined -> "Theme not found error", swallowed by withSiteConsent's
   try/catch. resolveWcpTheme now returns the 'dark'|'light' string for both
   applyTheme and init, so the WCP-internal re-theme actually runs on toggle.
   (init's 5th theme arg is ignored by the current CDN build; our CSS overrides
   theme the visible surfaces regardless.)

Tests: strengthen the stub so it can no longer hide either bug and add the
missing coverage adamint flagged.
- applyTheme now validates its argument (string key in the themes map) and
  throws otherwise, exactly like the live library; a permissive stub could not
  catch a wrong-argument regression.
- New assertion: every promoted analytics script has async===false.
- New test: toggling data-theme drives applyTheme with the string key.
- New test: WCP's onConsentChanged (init's 4th arg, now captured by the stub)
  reloads the page — restores the accept/reject-persistence coverage lost with
  the old ui-regressions tests.
Verified the strengthened guards fail when either fix is reverted, and pass with
both applied: cookie-consent.spec.ts is 15/15 across desktop/tablet/mobile.

Also:
- Revert an unintended pnpm-lock transitive drift (satteri 0.9.3 -> 0.9.4) so
  the lockfile diff is only the removed cookie-consent packages.
- Fix a stale CSS comment: the banner's third action is "More info", not
  "Manage cookies".

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4182d84d-5dc1-4c74-be09-15995a872350
---
 src/frontend/pnpm-lock.yaml                   |   2 +-
 .../src/components/starlight/Head.astro       |  42 +++---
 src/frontend/src/styles/wcp-consent.css       |   4 +-
 src/frontend/tests/e2e/cookie-consent.spec.ts | 132 +++++++++++++++++-
 4 files changed, 153 insertions(+), 27 deletions(-)

diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml
index e9edd09bf..089efd585 100644
--- a/src/frontend/pnpm-lock.yaml
+++ b/src/frontend/pnpm-lock.yaml
@@ -4370,7 +4370,7 @@ snapshots:
       '@astrojs/internal-helpers': 0.10.0
       '@astrojs/prism': 4.0.2
       github-slugger: 2.0.0
-      satteri: 0.9.4
+      satteri: 0.9.3
 
   '@astrojs/mdx@5.0.6(astro@7.0.3(@astrojs/markdown-remark@7.2.0)(@emnapi/core@1.11.1)(@emnapi/runtime@1.11.1)(@types/node@24.13.2)(jiti@1.21.7)(tsx@4.22.4)(yaml@2.9.0))':
     dependencies:
diff --git a/src/frontend/src/components/starlight/Head.astro b/src/frontend/src/components/starlight/Head.astro
index fe86a4f56..512261729 100644
--- a/src/frontend/src/components/starlight/Head.astro
+++ b/src/frontend/src/components/starlight/Head.astro
@@ -296,6 +296,14 @@ function computeSourceUrl() {
           next.setAttribute(attr.name, attr.value);
         }
         if (old.textContent) next.textContent = old.textContent;
+        // The analytics scripts are order-dependent: the SDK must run before
+        // 1ds.js (which reads `oneDS`) and track.js (which reads
+        // `window.analytics`). Dynamically-created scripts default to async=true
+        // and the copied `defer` is a no-op for them, so without this the two
+        // tiny same-origin scripts win the race against the ~140 KB SDK and each
+        // bail silently. Forcing async=false runs them in insertion (document)
+        // order. Set after the copy so a stray `async` attribute can't override.
+        next.async = false;
         if (old.parentNode) old.parentNode.replaceChild(next, old);
       }
     }
@@ -386,25 +394,22 @@ function computeSourceUrl() {
     // WCP paints the banner AND the preferences dialog from the theme passed at
     // init time and does not re-read the site theme on its own. WCP exposes no
     // `theme-changed` event — its only supported runtime re-theme hook is
-    // `siteConsent.applyTheme(themeObject)`. Our CSS overrides already re-theme the
-    // visible surfaces instantly from custom properties; calling applyTheme keeps
-    // WCP's own internal nodes in sync when the user toggles the site theme.
+    // `siteConsent.applyTheme(name)`, whose argument is the string theme KEY (it
+    // looks the theme up in its internal map by that key). Our CSS overrides
+    // already re-theme the visible surfaces instantly from custom properties;
+    // calling applyTheme keeps WCP's own internal nodes in sync on theme toggles.
     function resolveWcpTheme(themeName) {
-      var wcp = window.WcpConsent;
-      var isDark = (themeName || '').toLowerCase() === 'dark';
-      if (wcp && wcp.themes) {
-        return isDark ? wcp.themes.dark : wcp.themes.light;
-      }
-      // String fallback keeps wcp.init from throwing when the themes payload is
-      // missing; applyTheme is guarded separately since it needs the real object.
-      return isDark ? 'dark' : 'light';
+      // Resolve the site's data-theme to the WCP theme KEY. Both applyTheme and
+      // init expect this string ('dark' | 'light'); passing a wcp.themes[...]
+      // OBJECT instead makes applyTheme do `this.themes[object]` -> undefined ->
+      // "Theme not found error" (silently swallowed), so the re-theme never runs.
+      return (themeName || '').toLowerCase() === 'dark' ? 'dark' : 'light';
     }
 
     function applyWcpTheme() {
-      var wcp = window.WcpConsent;
-      // applyTheme reads color fields off the theme OBJECT, so only call it when
-      // the real themes payload is available (never with the string fallback).
-      if (!wcp || !wcp.themes) return;
+      // applyTheme takes the string theme key and throws on an unknown key;
+      // withSiteConsent swallows that so a renamed/absent theme can't break the
+      // observer.
       withSiteConsent(function (siteConsent) {
         if (typeof siteConsent.applyTheme === 'function') {
           siteConsent.applyTheme(
@@ -443,9 +448,10 @@ function computeSourceUrl() {
 
       try {
         var culture = toCulture(document.documentElement.lang || navigator.language || 'en-US');
-        // Resolve the theme through resolveWcpTheme so a missing or renamed
-        // wcp.themes payload falls back to a string here instead of throwing
-        // (which would be swallowed below and permanently stop initialization).
+        // The string theme key WCP's init expects as its 5th argument. (The
+        // current CDN build ignores this arg; our CSS overrides theme the visible
+        // surfaces regardless, and applyWcpTheme() re-syncs WCP's own nodes on
+        // later theme toggles.)
         var theme = resolveWcpTheme(document.documentElement.getAttribute('data-theme'));
         var host = ensureBannerPlaceholder() || document.body;
         trackBannerHeight();
diff --git a/src/frontend/src/styles/wcp-consent.css b/src/frontend/src/styles/wcp-consent.css
index d46b128f3..6ef176c79 100644
--- a/src/frontend/src/styles/wcp-consent.css
+++ b/src/frontend/src/styles/wcp-consent.css
@@ -121,7 +121,7 @@ html:has(#wcpConsentBannerCtrl) .page {
 }
 
 /* The banner's three actions share one parent group, so :nth-of-type is a stable
-   way to distinguish them: 1 = Accept (primary), 2 = Reject, 3 = Manage cookies. */
+   way to distinguish them: 1 = Accept (primary), 2 = Reject, 3 = More info. */
 
 /* Primary "Accept" — mirrors the site's lavender "Try Aspire" CTA. */
 #wcpConsentBannerCtrl button:nth-of-type(1) {
@@ -135,7 +135,7 @@ html:has(#wcpConsentBannerCtrl) .page {
   border-color: color-mix(in srgb, var(--aspire-color-light) 82%, var(--aspire-color-purple)) !important;
 }
 
-/* Secondary "Reject" / "Manage cookies" — ghost buttons that fill toward brand
+/* Secondary "Reject" / "More info" — ghost buttons that fill toward brand
    purple on hover. The resting border uses --sl-color-text at 55% so the button
    boundary clears WCAG 1.4.11 non-text contrast (>=3:1) in both themes
    (3.73:1 light, 5.82:1 dark); 30% failed it (1.90:1 / 2.70:1). */
diff --git a/src/frontend/tests/e2e/cookie-consent.spec.ts b/src/frontend/tests/e2e/cookie-consent.spec.ts
index d1d65f8e4..4b987fe90 100644
--- a/src/frontend/tests/e2e/cookie-consent.spec.ts
+++ b/src/frontend/tests/e2e/cookie-consent.spec.ts
@@ -43,6 +43,11 @@ async function installWcpStub(page: Page, options: WcpStubOptions): Promise<void
   );
 
   await page.addInitScript((opts: WcpStubOptions) => {
+    // WCP v2 is key-based: `siteConsent.applyTheme(name)` looks the theme up in
+    // this map and throws on a miss, and `WcpConsent.themes` is a string-keyed
+    // record of theme objects.
+    const themes: Record<string, unknown> = { dark: {}, light: {}, 'high-contrast': {} };
+
     const siteConsent = {
       isConsentRequired: opts.consentRequired,
       getConsent() {
@@ -57,22 +62,39 @@ async function installWcpStub(page: Page, options: WcpStubOptions): Promise<void
         const w = window as unknown as { __wcpManageConsentCalls?: number };
         w.__wcpManageConsentCalls = (w.__wcpManageConsentCalls ?? 0) + 1;
       },
-      applyTheme() {
-        const w = window as unknown as { __wcpApplyThemeCalls?: number };
+      applyTheme(themeKey: unknown) {
+        // Mirror the real API exactly: only a valid string key is accepted;
+        // anything else (e.g. a `themes[...]` object) throws just as the live
+        // library does. This is what lets the theme test catch a wrong-argument
+        // regression that a permissive `applyTheme() {}` stub would silently hide.
+        if (typeof themeKey !== 'string' || !(themeKey in themes)) {
+          throw new Error('Theme not found error');
+        }
+        const w = window as unknown as {
+          __wcpApplyThemeCalls?: number;
+          __wcpLastAppliedTheme?: string;
+        };
         w.__wcpApplyThemeCalls = (w.__wcpApplyThemeCalls ?? 0) + 1;
+        w.__wcpLastAppliedTheme = themeKey;
       },
       onConsentChanged() {},
     };
 
     (window as unknown as { WcpConsent: unknown }).WcpConsent = {
-      themes: { dark: {}, light: {} },
+      themes,
       init(
         _culture: string,
         _host: unknown,
-        initCallback: (err: unknown, consent: typeof siteConsent) => void
+        initCallback: (err: unknown, consent: typeof siteConsent) => void,
+        onConsentChanged?: () => void
       ) {
-        // Mirror WCP: invoke the init callback once consent is resolved so our
-        // bootstrap stores the siteConsent and runs the analytics bridge.
+        // Expose WCP's own consent-changed callback (init's 4th argument) so a
+        // test can drive the consent-*changed* path, which the bootstrap handles
+        // by reloading. Then mirror WCP: invoke the init callback once consent is
+        // resolved so our bootstrap stores siteConsent and runs the bridge.
+        (
+          window as unknown as { __triggerWcpConsentChanged?: () => void }
+        ).__triggerWcpConsentChanged = () => onConsentChanged?.();
         initCallback(null, siteConsent);
       },
     };
@@ -126,6 +148,24 @@ test.describe('WCP cookie consent bridge', () => {
         { timeout: POLL_TIMEOUT }
       )
       .toBe(true);
+    // Execution order is load-bearing (the SDK must run before 1ds.js/track.js),
+    // so the bootstrap forces `async = false` on each promoted script — otherwise
+    // dynamically-created scripts default to async and race, and analytics
+    // silently never initializes. Assert the flag so that fix can't regress.
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(page, () => {
+            const scripts = Array.from(
+              document.querySelectorAll<HTMLScriptElement>(
+                'script[data-category="analytics"]:not([type="text/plain"])'
+              )
+            );
+            return scripts.length > 0 && scripts.every((script) => script.async === false);
+          }),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(true);
     await expect
       .poll(
         () =>
@@ -215,4 +255,84 @@ test.describe('WCP cookie consent bridge', () => {
       )
       .toBe(true);
   });
+
+  test('re-applies the WCP theme with a string key when the site theme changes', async ({
+    page,
+  }) => {
+    await installWcpStub(page, { consentRequired: true, analyticsGranted: false });
+    await page.goto('/');
+    await waitForConsentBootstrap(page);
+
+    // Toggling `data-theme` must drive `siteConsent.applyTheme` with the string
+    // theme KEY. The stub throws (like the real library) on a non-key argument,
+    // so if the bootstrap passed a `themes[...]` object the call would throw, get
+    // swallowed, and never record — leaving `__wcpLastAppliedTheme` unset and
+    // failing this poll. (A permissive stub could not catch that regression.)
+    await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(
+            page,
+            () =>
+              (window as unknown as { __wcpLastAppliedTheme?: string }).__wcpLastAppliedTheme ?? null
+          ),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe('dark');
+
+    await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'light'));
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(
+            page,
+            () =>
+              (window as unknown as { __wcpLastAppliedTheme?: string }).__wcpLastAppliedTheme ?? null
+          ),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe('light');
+  });
+
+  test('reloads to re-apply consent when WCP reports a consent change', async ({ page }) => {
+    await installWcpStub(page, { consentRequired: true, analyticsGranted: false });
+    await page.goto('/');
+    await waitForConsentBootstrap(page);
+
+    // Mark the live document so we can detect the reload. WCP invokes init's
+    // 4th-arg callback when the visitor changes consent; the bootstrap responds
+    // by reloading so the new choice is applied across any consent-gated behavior.
+    await page.evaluate(() => {
+      (window as unknown as { __preReloadMarker?: boolean }).__preReloadMarker = true;
+    });
+    await expect
+      .poll(() =>
+        safeEvaluate(
+          page,
+          () => (window as unknown as { __preReloadMarker?: boolean }).__preReloadMarker === true
+        )
+      )
+      .toBe(true);
+
+    await page.evaluate(() =>
+      (
+        window as unknown as { __triggerWcpConsentChanged?: () => void }
+      ).__triggerWcpConsentChanged?.()
+    );
+
+    // After the reload the fresh document no longer carries the marker, and the
+    // bootstrap re-runs and re-resolves consent against the new page.
+    await expect
+      .poll(
+        () =>
+          safeEvaluate(
+            page,
+            () => (window as unknown as { __preReloadMarker?: boolean }).__preReloadMarker === true
+          ),
+        { timeout: POLL_TIMEOUT }
+      )
+      .toBe(false);
+    await waitForConsentBootstrap(page);
+  });
 });