From 89d442b5523d2a6070d63a5b96bed893ad7fd6e3 Mon Sep 17 00:00:00 2001
From: Jaime Morales <jaime.raul.morales@gmail.com>
Date: Thu, 18 Sep 2025 13:58:59 -0700
Subject: [PATCH 1/3] added support for a custom atlassian remote MCP server
 (#545)

---
 .../nodes/tools/MCP/Atlassian/AtlassianMcp.ts | 12 ++++---
 packages/server/src/config/passport.ts        |  7 +++-
 packages/server/src/utils/constants.ts        |  1 +
 packages/server/src/utils/index.ts            | 33 +++++++------------
 packages/server/src/utils/mcp-metadata.ts     |  3 +-
 5 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/packages/components/nodes/tools/MCP/Atlassian/AtlassianMcp.ts b/packages/components/nodes/tools/MCP/Atlassian/AtlassianMcp.ts
index 535b5777179..11af2a1b7ea 100644
--- a/packages/components/nodes/tools/MCP/Atlassian/AtlassianMcp.ts
+++ b/packages/components/nodes/tools/MCP/Atlassian/AtlassianMcp.ts
@@ -1,8 +1,8 @@
 /**
  * Atlassian Remote MCP Server Node
  *
- * This file implements an Atlassian MCP server node that uses the remote MCP server
- * at https://mcp.atlassian.com/v1/sse with OAuth 2.0 bearer token authentication.
+ * This file implements an Atlassian MCP server node that uses a custom remote MCP server
+ * with OAuth 2.0 bearer token authentication.
  *
  * Key features:
  * - Uses atlassianOAuth credential with access_token, refresh_token, expiration_time
@@ -128,9 +128,13 @@ class Atlassian_MCP implements INode {
             throw new Error('Access token not found in credential data')
         }
 
-        // For remote MCP servers, we need to provide the URL directly
+        if (!process.env.ATLASSIAN_MCP_SERVER_URL) {
+            console.error('ATLASSIAN_MCP_SERVER_URL environment variable is not set')
+            return []
+        }
+
         const serverParams = {
-            url: 'https://mcp.atlassian.com/v1/sse'
+            url: `${process.env.ATLASSIAN_MCP_SERVER_URL}/sse`
         }
 
         const toolkit = new MCPToolkit(serverParams, 'sse', credentialData.access_token)
diff --git a/packages/server/src/config/passport.ts b/packages/server/src/config/passport.ts
index e89eb837454..88b876a0111 100644
--- a/packages/server/src/config/passport.ts
+++ b/packages/server/src/config/passport.ts
@@ -96,6 +96,11 @@ export default function (passport: any) {
                     return done(null, false, { message: 'Authorization code missing' })
                 }
 
+                const baseUrl = process.env.ATLASSIAN_MCP_SERVER_URL
+                if (!baseUrl) {
+                    return done(null, false, { message: 'ATLASSIAN_MCP_SERVER_URL environment variable is not set' })
+                }
+
                 // Get MCP client info from state parameter (sessionId)
                 const sessionId = state
                 const mcpClientInfo = sessionId ? getPendingRegistration(sessionId) : null
@@ -105,7 +110,7 @@ export default function (passport: any) {
                 }
 
                 // Fetch MCP metadata and use MCP client credentials
-                const metadata = await fetchMCPMetadata()
+                const metadata = await fetchMCPMetadata(baseUrl)
                 const tokenURL = metadata.token_endpoint
                 const clientId = mcpClientInfo.client_id
                 const clientSecret = mcpClientInfo.client_secret
diff --git a/packages/server/src/utils/constants.ts b/packages/server/src/utils/constants.ts
index e075e839382..6a298e9e329 100644
--- a/packages/server/src/utils/constants.ts
+++ b/packages/server/src/utils/constants.ts
@@ -26,6 +26,7 @@ export const WHITELIST_URLS = [
     '/api/v1/salesforce-auth/callback',
     '/api/v1/atlassian-auth',
     '/api/v1/atlassian-auth/callback',
+    '/api/v1/atlassian-auth/mcp-initialize',
     '/api/v1/gmail/labels',
     '/api/v1/gmail/messages',
     '/api/v1/gmail/message',
diff --git a/packages/server/src/utils/index.ts b/packages/server/src/utils/index.ts
index 77801d97e13..5a2faa0fe3f 100644
--- a/packages/server/src/utils/index.ts
+++ b/packages/server/src/utils/index.ts
@@ -2107,11 +2107,15 @@ export async function registerOAuthClient(redirectUri: string): Promise<{
     authorization_endpoint: string
     scope: string
 }> {
+    const baseUrl = process.env.ATLASSIAN_MCP_SERVER_URL
+    if (!baseUrl) {
+        throw new Error('ATLASSIAN_MCP_SERVER_URL environment variable is not set')
+    }
     try {
         logger.info('[ATLASSIAN OAUTH]: Starting OAuth client registration')
 
         // Step 1: Get MCP metadata
-        const metadata = await fetchMCPMetadata()
+        const metadata = await fetchMCPMetadata(baseUrl)
         logger.debug('[ATLASSIAN OAUTH]: Retrieved MCP metadata')
 
         // Step 2: Register dynamic client
@@ -2121,25 +2125,7 @@ export async function registerOAuthClient(redirectUri: string): Promise<{
             client_uri: process.env.API_HOST,
             grant_types: ['authorization_code', 'refresh_token'],
             response_types: ['code'],
-            scope: [
-                'offline_access',
-                'read:account',
-                'read:confluence-content.all',
-                'read:confluence-content.summary',
-                'read:confluence-groups',
-                'read:confluence-props',
-                'read:confluence-space.summary',
-                'read:confluence-user',
-                'read:jira-user',
-                'read:jira-work',
-                'read:me',
-                'readonly:content.attachment:confluence',
-                'search:confluence',
-                'write:confluence-content',
-                'write:confluence-file',
-                'write:confluence-props',
-                'write:jira-work'
-            ].join(' ')
+            scope: `offline-access read:me read:account read:jira-user read:jira-work write:jira-work read:confluence-user write:confluence-content read:confluence-content.all search:confluence read:space:confluence read:page:confluence write:page:confluence read:hierarchical-content:confluence read:attachment:confluence read:comment:confluence write:comment:confluence`
         }
 
         logger.debug('[ATLASSIAN OAUTH]: Registering client with MCP server')
@@ -2305,8 +2291,13 @@ export async function refreshStoredCredentialTokens(credentialId: string, appDat
             return true // Token is still valid
         }
 
+        const baseUrl = process.env.ATLASSIAN_MCP_SERVER_URL
+        if (!baseUrl) {
+            throw new Error('ATLASSIAN_MCP_SERVER_URL environment variable is not set')
+        }
+
         // Get MCP metadata
-        const metadata = await fetchMCPMetadata()
+        const metadata = await fetchMCPMetadata(baseUrl)
 
         // Refresh tokens
         const tokenResponse = await fetch(metadata.token_endpoint, {
diff --git a/packages/server/src/utils/mcp-metadata.ts b/packages/server/src/utils/mcp-metadata.ts
index 0e8d9a24d79..87bc3fc7369 100644
--- a/packages/server/src/utils/mcp-metadata.ts
+++ b/packages/server/src/utils/mcp-metadata.ts
@@ -28,7 +28,8 @@ const CACHE_DURATION = 30 * 60 * 1000
  * Fetches MCP OAuth metadata from the well-known endpoint
  * Uses caching to avoid repeated requests
  */
-export async function fetchMCPMetadata(baseUrl: string = 'https://mcp.atlassian.com'): Promise<MCPOAuthMetadata> {
+
+export async function fetchMCPMetadata(baseUrl: string): Promise<MCPOAuthMetadata> {
     const metadataUrl = `${baseUrl}/.well-known/oauth-authorization-server`
     const cacheKey = metadataUrl
 

From 1561c5133ee193d78aecb4741e58f110a91e1dee Mon Sep 17 00:00:00 2001
From: Cameron Taylor <50385537+ct3685@users.noreply.github.com>
Date: Thu, 18 Sep 2025 18:49:57 -0400
Subject: [PATCH 2/3] Ct/SUPPORT-5021-dalle-api-url-issues-with-domain-var
 (#547)

This commit introduces several updates to the configuration and
functionality of the DALL-E image generation tools.

### Changes:
- Added a new environment variable `API_HOST` to the manifest for better
API endpoint management.
- Updated the `next.config.js` to support HTTPS for the specified
hostname.
- Modified the DALL-E image tools to prioritize the new `API_HOST`
variable for constructing URLs, ensuring that the tools can correctly
reference the API in production environments.
- Incremented the version of the DALL-E tools from 1.0 to 1.1 to reflect
these changes.

### Impact:
These updates enhance the flexibility of the API configuration and
improve the reliability of image generation by ensuring the correct API
endpoint is used based on the environment settings.
---
 apps/web/next.config.js                                  | 6 ++++++
 copilot/flowise/manifest.yml                             | 1 +
 .../nodes/tools/CreateDalleImage/AAICreateDalleImage.ts  | 9 +++++----
 .../nodes/tools/CreateDalleImage/CreateDalleImage.ts     | 9 +++++----
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 9fb7c0fa255..cf6d0c3256a 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -84,6 +84,12 @@ let nextConfig = withBundleAnalyzer({
                 hostname: 'localhost',
                 port: '4000',
                 pathname: '/**'
+            },
+            {
+                protocol: 'https',
+                hostname: '**.theanswer.ai',
+                port: '',
+                pathname: '/**'
             }
         ]
     },
diff --git a/copilot/flowise/manifest.yml b/copilot/flowise/manifest.yml
index b5673d347e3..56784994fe9 100644
--- a/copilot/flowise/manifest.yml
+++ b/copilot/flowise/manifest.yml
@@ -64,6 +64,7 @@ variables: # Pass environment variables as key value pairs.
     CHATFLOW_DOMAIN: 'http://flowise:4000'
     DOMAIN: 'http://flowise:4000'
     FLOWISE_DOMAIN: 'http://flowise:4000'
+    API_HOST: 'https://api.${CLIENT_DOMAIN}'
     NODE_ENV: 'production'
     PORT: '4000'
     NUMBER_OF_PROXIES: '1'
diff --git a/packages/components/nodes/tools/CreateDalleImage/AAICreateDalleImage.ts b/packages/components/nodes/tools/CreateDalleImage/AAICreateDalleImage.ts
index 10b19c14230..21398da8f7c 100644
--- a/packages/components/nodes/tools/CreateDalleImage/AAICreateDalleImage.ts
+++ b/packages/components/nodes/tools/CreateDalleImage/AAICreateDalleImage.ts
@@ -101,7 +101,8 @@ export class AAIDallePostTool extends Tool {
             }
 
             // Convert FILE-STORAGE:: reference to a full URL with domain
-            const domain = process.env.DOMAIN || process.env.FLOWISE_DOMAIN || this.baseURL || 'http://localhost:4000'
+            const domain =
+                process.env.API_HOST || process.env.DOMAIN || process.env.FLOWISE_DOMAIN || this.baseURL || 'http://localhost:4000'
             const imageFileName = imageStorageUrl.replace('FILE-STORAGE::', '')
             const fullImageUrl = `${domain}/api/v1/get-upload-file?chatflowId=dalle-images&chatId=${orgId}%2F${usrId}&fileName=${imageFileName}`
 
@@ -308,7 +309,7 @@ class AAIDallePost_Tool implements INode {
     constructor() {
         this.label = 'Answer DALL-E Post'
         this.name = 'aaiDallePost'
-        this.version = 1.0
+        this.version = 1.1
         this.type = 'AAIDallePost'
         this.icon = 'openai.svg'
         this.category = 'Tools'
@@ -459,8 +460,8 @@ class AAIDallePost_Tool implements INode {
         if (process.env.NODE_ENV === 'development') {
             baseURL = 'http://localhost:4000'
         } else {
-            // In production, use the current domain (Flowise server)
-            baseURL = process.env.DOMAIN || process.env.FLOWISE_DOMAIN || 'http://localhost:4000'
+            // In production, prefer external API host, then fall back to Flowise domain
+            baseURL = process.env.API_HOST || process.env.DOMAIN || process.env.FLOWISE_DOMAIN || 'http://localhost:4000'
         }
 
         const obj: RequestParameters = {}
diff --git a/packages/components/nodes/tools/CreateDalleImage/CreateDalleImage.ts b/packages/components/nodes/tools/CreateDalleImage/CreateDalleImage.ts
index 29ec99dfa91..04943b0cbac 100644
--- a/packages/components/nodes/tools/CreateDalleImage/CreateDalleImage.ts
+++ b/packages/components/nodes/tools/CreateDalleImage/CreateDalleImage.ts
@@ -104,7 +104,8 @@ export class DallePostTool extends Tool {
             }
 
             // Convert FILE-STORAGE:: reference to a full URL with domain
-            const domain = process.env.DOMAIN || process.env.FLOWISE_DOMAIN || this.baseURL || 'http://localhost:4000'
+            const domain =
+                process.env.API_HOST || process.env.DOMAIN || process.env.FLOWISE_DOMAIN || this.baseURL || 'http://localhost:4000'
             const imageFileName = imageStorageUrl.replace('FILE-STORAGE::', '')
             const fullImageUrl = `${domain}/api/v1/get-upload-file?chatflowId=dalle-images&chatId=${orgId}%2F${usrId}&fileName=${imageFileName}`
 
@@ -314,7 +315,7 @@ class DallePost_Tool implements INode {
     constructor() {
         this.label = 'Dall-E Post'
         this.name = 'dallePost'
-        this.version = 1.0
+        this.version = 1.1
         this.type = 'DallePost'
         this.icon = 'openai.svg'
         this.category = 'Tools'
@@ -470,8 +471,8 @@ class DallePost_Tool implements INode {
         if (process.env.NODE_ENV === 'development') {
             baseURL = 'http://localhost:4000'
         } else {
-            // In production, use the current domain (Flowise server)
-            baseURL = process.env.DOMAIN || process.env.FLOWISE_DOMAIN || 'http://localhost:4000'
+            // In production, prefer external API host, then fall back to Flowise domain
+            baseURL = process.env.API_HOST || process.env.DOMAIN || process.env.FLOWISE_DOMAIN || 'http://localhost:4000'
         }
 
         const obj: RequestParameters = {}

From 3dd34acd2eebc007507f30a03bfaf819270eee1a Mon Sep 17 00:00:00 2001
From: Max Techera <maxi.techerag@gmail.com>
Date: Tue, 23 Sep 2025 16:39:47 -0300
Subject: [PATCH 3/3] Update webinar pages and ElevenLabs widget (#549)

## Summary
Updates to webinar landing pages, ElevenLabs widget integration, and
supporting styles.

## Changes
- Enhanced ElevenLabs inline widget component with improved
functionality and styles
- Updated webinar enterprise AI landing page with improved content
structure
- Refactored webinar thank you page layout and user experience
- Streamlined mailerLite service implementation
- Improved responsive design for index page with additional styles

## Test plan
- [x] Tested webinar landing page locally
- [x] Verified ElevenLabs widget integration works correctly
- [x] Confirmed thank you page displays properly after registration
- [x] Validated responsive design on mobile and desktop
- [x] ESLint and prettier checks pass
---
 .gitignore                                    |    1 +
 packages/docs/package.json                    |    6 +-
 .../ElevenLabsInlineWidget/index.tsx          |  180 +-
 .../ElevenLabsInlineWidget/styles.module.css  |  172 +
 .../docs/src/components/LazyThreeScene.tsx    |   36 +
 .../src/components/WebinarCalendarButtons.tsx |   57 +
 .../docs/src/components/WebinarCountdown.tsx  |  180 ++
 .../src/components/WebinarLegalFooter.tsx     |   20 +
 .../components/WebinarRegistrationForm.tsx    |  241 ++
 packages/docs/src/config/marketingConfig.ts   |  264 ++
 packages/docs/src/config/webinarContent.ts    |  520 +++
 packages/docs/src/pages/index.module.css      | 2801 ++++++++++++++---
 .../docs/src/pages/webinar-enterprise-ai.tsx  | 1037 ++++++
 packages/docs/src/pages/webinar-thank-you.tsx |  861 +++++
 .../docs/src/services/mailerLiteService.ts    |  108 +
 packages/docs/src/services/trackingService.ts |  368 +++
 packages/docs/src/types/tracking.d.ts         |   33 +
 packages/embed                                |    2 +-
 .../billing/stripe/StripeProvider.ts          |    5 -
 pnpm-lock.yaml                                |  132 +-
 20 files changed, 6404 insertions(+), 620 deletions(-)
 create mode 100644 packages/docs/src/components/LazyThreeScene.tsx
 create mode 100644 packages/docs/src/components/WebinarCalendarButtons.tsx
 create mode 100644 packages/docs/src/components/WebinarCountdown.tsx
 create mode 100644 packages/docs/src/components/WebinarLegalFooter.tsx
 create mode 100644 packages/docs/src/components/WebinarRegistrationForm.tsx
 create mode 100644 packages/docs/src/config/marketingConfig.ts
 create mode 100644 packages/docs/src/config/webinarContent.ts
 create mode 100644 packages/docs/src/pages/webinar-enterprise-ai.tsx
 create mode 100644 packages/docs/src/pages/webinar-thank-you.tsx
 create mode 100644 packages/docs/src/services/mailerLiteService.ts
 create mode 100644 packages/docs/src/services/trackingService.ts
 create mode 100644 packages/docs/src/types/tracking.d.ts

diff --git a/.gitignore b/.gitignore
index 881f685540c..681a6f15126 100644
--- a/.gitignore
+++ b/.gitignore
@@ -197,3 +197,4 @@ requiredVars.env
 
 bwsconfig.json
 .bwsconfig.cache
+_docs/
diff --git a/packages/docs/package.json b/packages/docs/package.json
index fa04befb3ea..285f6ee7663 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -17,11 +17,12 @@
         "@docusaurus/preset-classic": "3.8.1",
         "@docusaurus/theme-mermaid": "3.8.1",
         "@elevenlabs/react": "^0.3.0",
-        "@mdx-js/react": "^3.1.1",
+        "@mdx-js/react": "^3.1.0",
         "clsx": "^2.1.1",
         "docusaurus-plugin-openapi-docs": "^4.5.1",
         "docusaurus-theme-openapi-docs": "^4.5.1",
         "js-yaml": "^4.1.0",
+        "dotenv": "^16.6.1",
         "prism-react-renderer": "^2.4.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -35,7 +36,7 @@
         "typescript": "~5.5.4"
     },
     "engines": {
-        "node": ">=18.0"
+        "node": ">=20.0"
     },
     "name": "docs",
     "private": true,
@@ -43,6 +44,7 @@
         "build": "pnpm api-docs && docusaurus build && node scripts/fix-sitemap.js",
         "clear": "docusaurus clear",
         "deploy": "docusaurus deploy",
+        "dev": "docusaurus start --listen 4242",
         "docs": "docusaurus start --port 4242",
         "docusaurus": "docusaurus",
         "serve": "docusaurus serve",
diff --git a/packages/docs/src/components/ElevenLabsInlineWidget/index.tsx b/packages/docs/src/components/ElevenLabsInlineWidget/index.tsx
index f24d31893a0..69ce1c21f19 100644
--- a/packages/docs/src/components/ElevenLabsInlineWidget/index.tsx
+++ b/packages/docs/src/components/ElevenLabsInlineWidget/index.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { useConversation } from '@elevenlabs/react'
 import clsx from 'clsx'
 import styles from './styles.module.css'
@@ -31,14 +32,23 @@ const ElevenLabsInlineWidget: React.FC<ElevenLabsInlineWidgetProps> = ({
     const [error, setError] = useState<string | null>(null)
     const [hasStarted, setHasStarted] = useState(false)
     const [hasEnded, setHasEnded] = useState(false)
+    const [elapsedSeconds, setElapsedSeconds] = useState(0)
+    const callStartRef = useRef<number | null>(null)
+    const timerRef = useRef<number | null>(null)
     const conversation = useConversation({
         onConnect: () => {
             setHasStarted(true)
             setHasEnded(false)
+            callStartRef.current = Date.now()
+            setElapsedSeconds(0)
             onConversationStart?.()
         },
         onDisconnect: () => {
             if (hasStarted) setHasEnded(true)
+            if (timerRef.current) {
+                window.clearInterval(timerRef.current)
+                timerRef.current = null
+            }
             onConversationEnd?.()
         },
         onError: (err: any) => setError(err?.message || String(err) || 'Unknown error')
@@ -65,12 +75,64 @@ const ElevenLabsInlineWidget: React.FC<ElevenLabsInlineWidgetProps> = ({
         }
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (conversation.status === 'connecting' || conversation.status === 'connected') {
             setHasEnded(false)
         }
     }, [conversation.status])
 
+    useEffect(() => {
+        if (conversation.status === 'connected') {
+            if (!timerRef.current) {
+                timerRef.current = window.setInterval(() => {
+                    if (callStartRef.current) {
+                        setElapsedSeconds(Math.floor((Date.now() - callStartRef.current) / 1000))
+                    }
+                }, 1000)
+            }
+        } else {
+            if (timerRef.current) {
+                window.clearInterval(timerRef.current)
+                timerRef.current = null
+            }
+        }
+
+        return () => {
+            if (timerRef.current) {
+                window.clearInterval(timerRef.current)
+                timerRef.current = null
+            }
+        }
+    }, [conversation.status])
+
+    const [floatingContainer, setFloatingContainer] = useState<HTMLElement | null>(null)
+
+    useEffect(() => {
+        if (inline) {
+            return
+        }
+
+        if (typeof document === 'undefined') {
+            return
+        }
+
+        const node = document.createElement('div')
+        node.className = styles.floatingRoot
+        document.body.appendChild(node)
+        setFloatingContainer(node)
+
+        return () => {
+            document.body.removeChild(node)
+            setFloatingContainer(null)
+        }
+    }, [inline])
+
+    const formatDuration = (seconds: number) => {
+        const mins = Math.floor(seconds / 60)
+        const secs = seconds % 60
+        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+    }
+
     // Button style selection
     const buttonClass =
         variant === 'cta' && buttonClassName
@@ -83,57 +145,87 @@ const ElevenLabsInlineWidget: React.FC<ElevenLabsInlineWidgetProps> = ({
                   conversation.status === 'connecting' && styles.loading
               )
 
-    if (inline) {
+    const isConnected = conversation.status === 'connected'
+    const isConnecting = conversation.status === 'connecting'
+
+    const renderCallPanel = (inlineMode = false) => (
+        <div
+            className={clsx(styles.callPanel, inlineMode && styles.callPanelInline, variant === 'chip' && styles.callPanelChip)}
+            role='status'
+            aria-live='polite'
+        >
+            <div className={styles.callHeader}>
+                <span className={styles.callDot} aria-hidden='true' />
+                <span className={styles.callLabel}>Live with AnswerAgent</span>
+                <span className={styles.callTimer}>{formatDuration(elapsedSeconds)}</span>
+            </div>
+            <div className={styles.callWave} aria-hidden='true'>
+                <span />
+                <span />
+                <span />
+            </div>
+            <button onClick={endCall} className={clsx(styles.widgetButton, styles.danger, styles.callAction)}>
+                End Call
+            </button>
+        </div>
+    )
+
+    const renderStatus = () => {
+        if (!showStatus) {
+            return null
+        }
+
+        if (isConnected) {
+            return null
+        }
+
         return (
-            <>
-                {conversation.status !== 'connected' ? (
-                    <button onClick={startCall} disabled={conversation.status === 'connecting'} className={buttonClass}>
-                        {variant === 'chip' && emoji && <span className={styles.chipEmoji}>{emoji}</span>}
-                        {conversation.status === 'connecting' ? 'Connecting...' : text}
-                    </button>
-                ) : (
-                    <button onClick={endCall} className={clsx(styles.widgetButton, styles.danger)}>
-                        End Call
-                    </button>
-                )}
-                {showStatus && (
-                    <div
-                        style={{
-                            position: 'absolute',
-                            bottom: -24,
-                            left: '50%',
-                            transform: 'translateX(-50%)',
-                            whiteSpace: 'nowrap',
-                            fontSize: '0.875rem'
-                        }}
-                    >
-                        {conversation.status === 'connected' && <span>Call in progress...</span>}
-                        {error && <span style={{ color: '#ef4444' }}>{error}</span>}
-                        {hasStarted && hasEnded && conversation.status !== 'connected' && !error && <span>Call ended.</span>}
+            <div className={styles.statusArea} role='status' aria-live='polite'>
+                {isConnecting && (
+                    <div className={styles.connectingNotice}>
+                        <span className={styles.connectingSpinner} aria-hidden='true' />
+                        <span>Connecting to AnswerAgent…</span>
                     </div>
                 )}
-            </>
+                {error && <div className={styles.errorText}>{error}</div>}
+                {hasStarted && hasEnded && !error && <div className={styles.endedText}>Call ended. Restart anytime.</div>}
+            </div>
         )
     }
 
-    return (
-        <div className={wrapperClassName} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-            {conversation.status !== 'connected' ? (
-                <button onClick={startCall} disabled={conversation.status === 'connecting'} className={buttonClass}>
+    if (inline) {
+        return isConnected ? (
+            renderCallPanel(true)
+        ) : (
+            <div className={styles.inlineContainer}>
+                <button onClick={startCall} disabled={isConnecting} className={buttonClass}>
                     {variant === 'chip' && emoji && <span className={styles.chipEmoji}>{emoji}</span>}
-                    {conversation.status === 'connecting' ? 'Connecting...' : text}
-                </button>
-            ) : (
-                <button onClick={endCall} className={clsx(styles.widgetButton, styles.danger)}>
-                    End Call
+                    {isConnecting ? 'Connecting…' : text}
                 </button>
-            )}
-            {showStatus && (
-                <div style={{ marginTop: 8, minHeight: 24 }}>
-                    {conversation.status === 'connected' && <span>Call in progress...</span>}
-                    {error && <span style={{ color: '#ef4444' }}>{error}</span>}
-                    {hasStarted && hasEnded && conversation.status !== 'connected' && !error && <span>Call ended.</span>}
+                {renderStatus()}
+            </div>
+        )
+    }
+
+    const floatingPanel = isConnected && floatingContainer ? createPortal(renderCallPanel(), floatingContainer) : null
+
+    return (
+        <div className={clsx(styles.widgetWrapper, wrapperClassName)}>
+            {floatingPanel}
+            {isConnected ? (
+                <div className={styles.floatingPlaceholder}>
+                    <span role='status' aria-live='polite'>
+                        Live call active — controls are docked bottom right.
+                    </span>
                 </div>
+            ) : (
+                <>
+                    <button onClick={startCall} disabled={isConnecting} className={buttonClass}>
+                        {variant === 'chip' && emoji && <span className={styles.chipEmoji}>{emoji}</span>}
+                        {isConnecting ? 'Connecting…' : text}
+                    </button>
+                    {renderStatus()}
+                </>
             )}
         </div>
     )
diff --git a/packages/docs/src/components/ElevenLabsInlineWidget/styles.module.css b/packages/docs/src/components/ElevenLabsInlineWidget/styles.module.css
index 95748a81983..95843944aa2 100644
--- a/packages/docs/src/components/ElevenLabsInlineWidget/styles.module.css
+++ b/packages/docs/src/components/ElevenLabsInlineWidget/styles.module.css
@@ -71,6 +71,178 @@
     animation: pulse 2s infinite;
 }
 
+.widgetWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+}
+
+.floatingPlaceholder {
+    font-size: 0.85rem;
+    color: rgba(17, 24, 39, 0.6);
+    text-align: center;
+    background: rgba(226, 232, 240, 0.6);
+    border-radius: 12px;
+    padding: 0.6rem 0.9rem;
+    max-width: 320px;
+}
+
+.inlineContainer {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+}
+
+.statusArea {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.85rem;
+    color: rgba(17, 24, 39, 0.7);
+    text-align: center;
+    min-height: 1.1rem;
+}
+
+.connectingNotice {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    color: #2563eb;
+    font-weight: 500;
+}
+
+.connectingSpinner {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid rgba(37, 99, 235, 0.4);
+    border-top-color: #2563eb;
+    animation: spin 1s linear infinite;
+}
+
+.errorText {
+    color: #dc2626;
+}
+
+.endedText {
+    color: #047857;
+}
+
+.callPanel {
+    width: 100%;
+    max-width: 320px;
+    background: rgba(15, 23, 42, 0.95);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    border-radius: 18px;
+    padding: 1.2rem 1rem;
+    display: grid;
+    gap: 1rem;
+    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.35);
+    color: #e2e8f0;
+}
+
+.callPanelChip {
+    max-width: none;
+}
+
+.callPanelInline {
+    max-width: 280px;
+}
+
+.floatingRoot {
+    position: fixed;
+    bottom: 1.25rem;
+    right: 1.25rem;
+    z-index: 2147483646;
+    pointer-events: none;
+}
+
+.floatingRoot .callPanel {
+    pointer-events: auto;
+}
+
+.callHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    font-weight: 600;
+    color: rgba(226, 232, 240, 0.85);
+}
+
+.callDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #22c55e;
+    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
+}
+
+.callLabel {
+    flex: 1;
+    margin-left: 0.5rem;
+}
+
+.callTimer {
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    color: #38bdf8;
+}
+
+.callWave {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: flex-end;
+    gap: 6px;
+    height: 32px;
+}
+
+.callWave span {
+    display: block;
+    width: 100%;
+    border-radius: 6px;
+    background: linear-gradient(180deg, rgba(56, 189, 248, 0.9), rgba(8, 47, 73, 0.1));
+    animation: wave 1.2s ease-in-out infinite;
+}
+
+.callWave span:nth-child(2) {
+    animation-delay: 0.15s;
+}
+
+.callWave span:nth-child(3) {
+    animation-delay: 0.3s;
+}
+
+.callAction {
+    width: 100%;
+}
+
+@keyframes wave {
+    0%,
+    100% {
+        height: 30%;
+    }
+    50% {
+        height: 100%;
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 @keyframes pulse {
     0%,
     100% {
diff --git a/packages/docs/src/components/LazyThreeScene.tsx b/packages/docs/src/components/LazyThreeScene.tsx
new file mode 100644
index 00000000000..d89892ace23
--- /dev/null
+++ b/packages/docs/src/components/LazyThreeScene.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react'
+
+interface Props {
+    className?: string
+    fallbackClassName?: string
+}
+
+type SceneComponent = React.ComponentType<Props>
+
+export default function LazyThreeScene({ className, fallbackClassName }: Props): JSX.Element {
+    const [ThreeScene, setThreeScene] = useState<SceneComponent | null>(null)
+
+    useEffect(() => {
+        let mounted = true
+
+        import('@site/src/components/Annimations/SphereScene')
+            .then((module) => {
+                if (mounted) {
+                    setThreeScene(() => module.default)
+                }
+            })
+            .catch((error) => {
+                console.warn('Unable to load ThreeJS scene', error)
+            })
+
+        return () => {
+            mounted = false
+        }
+    }, [])
+
+    if (!ThreeScene) {
+        return <div className={fallbackClassName || className} aria-hidden='true' />
+    }
+
+    return <ThreeScene className={className} />
+}
diff --git a/packages/docs/src/components/WebinarCalendarButtons.tsx b/packages/docs/src/components/WebinarCalendarButtons.tsx
new file mode 100644
index 00000000000..2c20777e442
--- /dev/null
+++ b/packages/docs/src/components/WebinarCalendarButtons.tsx
@@ -0,0 +1,57 @@
+import styles from '../pages/index.module.css'
+import { webinarConfig } from '@site/src/config/webinarContent'
+
+const getCalendarStartEnd = () => {
+    const start = new Date(webinarConfig.webinarDateTimeISO)
+    if (Number.isNaN(start.getTime())) {
+        return { startISO: '', endISO: '' }
+    }
+
+    const end = new Date(start.getTime() + 60 * 60 * 1000)
+    const format = (date: Date) => date.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z'
+
+    return {
+        startISO: format(start),
+        endISO: format(end)
+    }
+}
+
+export default function WebinarCalendarButtons(): JSX.Element | null {
+    const { startISO, endISO } = getCalendarStartEnd()
+
+    if (!startISO || !endISO) {
+        return null
+    }
+
+    const title = encodeURIComponent('Enterprise AI Webinar: Deploy AI Agents in 4 Weeks')
+    const details = encodeURIComponent(
+        "Live 60-minute working session with Bradley Taylor & Adam Harris. You'll get the 4-week deployment playbook, ROI calculator, and security checklist."
+    )
+    const location = encodeURIComponent('Live Online Webinar')
+
+    const googleLink = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${startISO}/${endISO}&details=${details}&location=${location}`
+    const outlookLink = `https://outlook.live.com/calendar/0/deeplink/compose?subject=${title}&body=${details}&startdt=${startISO}&enddt=${endISO}&location=${location}`
+
+    const icsContent = `BEGIN:VCALENDAR\nVERSION:2.0\nPRODID:-//AnswerAI//Enterprise AI Webinar//EN\nBEGIN:VEVENT\nUID:${startISO}@theanswer.ai\nDTSTAMP:${startISO}\nDTSTART:${startISO}\nDTEND:${endISO}\nSUMMARY:Enterprise AI Webinar: Deploy AI Agents in 4 Weeks\nDESCRIPTION:Live 60-minute working session with Bradley Taylor & Adam Harris.\nLOCATION:Live Online Webinar\nEND:VEVENT\nEND:VCALENDAR`
+    const icsLink = `data:text/calendar;charset=utf8,${encodeURIComponent(icsContent)}`
+
+    return (
+        <div className={styles.calendarButtons}>
+            <a href={googleLink} target='_blank' rel='noreferrer' className={styles.calendarButton}>
+                Add to Google
+            </a>
+            <a href={outlookLink} target='_blank' rel='noreferrer' className={styles.calendarButton}>
+                Add to Outlook
+            </a>
+            <a href={icsLink} download='enterprise-ai-webinar.ics' className={styles.calendarButton}>
+                Download ICS
+            </a>
+            <a
+                href='mailto:hello@theanswer.ai?subject=Send%20me%20the%20webinar%20recording&body=Hi%20AnswerAI%20team%2C%0A%0APlease%20email%20me%20the%20Enterprise%20AI%20webinar%20replay%20and%20updates.%0A%0AThank%20you!'
+                className={styles.calendarButton}
+            >
+                Just send me reminders
+            </a>
+        </div>
+    )
+}
diff --git a/packages/docs/src/components/WebinarCountdown.tsx b/packages/docs/src/components/WebinarCountdown.tsx
new file mode 100644
index 00000000000..30ed4a02a89
--- /dev/null
+++ b/packages/docs/src/components/WebinarCountdown.tsx
@@ -0,0 +1,180 @@
+import { useState, useEffect } from 'react'
+import clsx from 'clsx'
+import { webinarConfig } from '@site/src/config/webinarContent'
+
+import styles from '../pages/index.module.css'
+
+interface TimeLeft {
+    days: number
+    hours: number
+    minutes: number
+    seconds: number
+}
+
+interface WebinarCountdownProps {
+    className?: string
+    showSeconds?: boolean
+    compact?: boolean
+}
+
+export default function WebinarCountdown({ className, showSeconds = true, compact = false }: WebinarCountdownProps): JSX.Element {
+    const [timeLeft, setTimeLeft] = useState<TimeLeft>({ days: 0, hours: 0, minutes: 0, seconds: 0 })
+    const [isExpired, setIsExpired] = useState(false)
+
+    // Parse webinar date/time
+    const getWebinarDate = () => {
+        if (webinarConfig.webinarDateTimeISO) {
+            const parsed = new Date(webinarConfig.webinarDateTimeISO)
+            if (!Number.isNaN(parsed.getTime())) {
+                return parsed
+            }
+        }
+
+        // Fallback for legacy config without ISO date
+        const dateStr = `${webinarConfig.webinarDate} ${webinarConfig.webinarTime}`
+        const fallback = new Date(dateStr)
+        return Number.isNaN(fallback.getTime()) ? new Date() : fallback
+    }
+
+    const calculateTimeLeft = (): TimeLeft => {
+        const webinarDate = getWebinarDate()
+        const now = new Date()
+        const difference = webinarDate.getTime() - now.getTime()
+
+        if (difference <= 0) {
+            setIsExpired(true)
+            return { days: 0, hours: 0, minutes: 0, seconds: 0 }
+        }
+
+        const days = Math.floor(difference / (1000 * 60 * 60 * 24))
+        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60))
+        const seconds = Math.floor((difference % (1000 * 60)) / 1000)
+
+        return { days, hours, minutes, seconds }
+    }
+
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTimeLeft(calculateTimeLeft())
+        }, 1000)
+
+        // Initial calculation
+        setTimeLeft(calculateTimeLeft())
+
+        return () => clearInterval(timer)
+    }, [])
+
+    if (isExpired) {
+        return (
+            <div
+                className={clsx(className, styles.countdownContainer)}
+                style={{
+                    backgroundColor: 'rgba(255, 68, 68, 0.1)',
+                    border: '2px solid #ff4444',
+                    padding: compact ? '0.5rem' : '1rem',
+                    borderRadius: '8px',
+                    textAlign: 'center'
+                }}
+            >
+                <div style={{ fontSize: compact ? '1rem' : '1.2rem', fontWeight: 'bold', color: '#ff4444' }}>🔴 Webinar has started!</div>
+                {!compact && <div style={{ fontSize: '0.9rem', opacity: 0.8, marginTop: '0.5rem' }}>Join now or catch the replay</div>}
+            </div>
+        )
+    }
+
+    const formatNumber = (num: number): string => num.toString().padStart(2, '0')
+
+    return (
+        <div
+            className={clsx(className, styles.countdownContainer)}
+            style={{
+                backgroundColor: 'rgba(0, 255, 255, 0.1)',
+                border: '2px solid #00ffff',
+                padding: compact ? '0.5rem' : '1rem',
+                borderRadius: '8px',
+                textAlign: 'center'
+            }}
+        >
+            {!compact && <div style={{ fontSize: '1rem', marginBottom: '0.5rem', opacity: 0.9 }}>⏰ Webinar starts in:</div>}
+
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: compact ? '0.5rem' : '1rem',
+                    flexWrap: 'wrap'
+                }}
+            >
+                {timeLeft.days > 0 && (
+                    <div className={styles.countdownUnit}>
+                        <div
+                            style={{
+                                fontSize: compact ? '1.5rem' : '2rem',
+                                fontWeight: 'bold',
+                                color: '#00ffff',
+                                lineHeight: 1
+                            }}
+                        >
+                            {formatNumber(timeLeft.days)}
+                        </div>
+                        <div style={{ fontSize: compact ? '0.7rem' : '0.8rem', opacity: 0.8 }}>{timeLeft.days === 1 ? 'day' : 'days'}</div>
+                    </div>
+                )}
+
+                <div className={styles.countdownUnit}>
+                    <div
+                        style={{
+                            fontSize: compact ? '1.5rem' : '2rem',
+                            fontWeight: 'bold',
+                            color: '#00ffff',
+                            lineHeight: 1
+                        }}
+                    >
+                        {formatNumber(timeLeft.hours)}
+                    </div>
+                    <div style={{ fontSize: compact ? '0.7rem' : '0.8rem', opacity: 0.8 }}>{timeLeft.hours === 1 ? 'hour' : 'hours'}</div>
+                </div>
+
+                <div className={styles.countdownUnit}>
+                    <div
+                        style={{
+                            fontSize: compact ? '1.5rem' : '2rem',
+                            fontWeight: 'bold',
+                            color: '#00ffff',
+                            lineHeight: 1
+                        }}
+                    >
+                        {formatNumber(timeLeft.minutes)}
+                    </div>
+                    <div style={{ fontSize: compact ? '0.7rem' : '0.8rem', opacity: 0.8 }}>{timeLeft.minutes === 1 ? 'min' : 'mins'}</div>
+                </div>
+
+                {showSeconds && (
+                    <div className={styles.countdownUnit}>
+                        <div
+                            style={{
+                                fontSize: compact ? '1.5rem' : '2rem',
+                                fontWeight: 'bold',
+                                color: '#00ffff',
+                                lineHeight: 1
+                            }}
+                        >
+                            {formatNumber(timeLeft.seconds)}
+                        </div>
+                        <div style={{ fontSize: compact ? '0.7rem' : '0.8rem', opacity: 0.8 }}>
+                            {timeLeft.seconds === 1 ? 'sec' : 'secs'}
+                        </div>
+                    </div>
+                )}
+            </div>
+
+            {!compact && (
+                <div style={{ fontSize: '0.9rem', opacity: 0.8, marginTop: '0.5rem' }}>
+                    {webinarConfig.webinarDate} at {webinarConfig.webinarTime}
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/packages/docs/src/components/WebinarLegalFooter.tsx b/packages/docs/src/components/WebinarLegalFooter.tsx
new file mode 100644
index 00000000000..23563d91f12
--- /dev/null
+++ b/packages/docs/src/components/WebinarLegalFooter.tsx
@@ -0,0 +1,20 @@
+import styles from '../pages/index.module.css'
+
+export default function WebinarLegalFooter(): JSX.Element {
+    const currentYear = new Date().getFullYear()
+
+    return (
+        <footer className={styles.legalFooter}>
+            <div className='container'>
+                <div>© {currentYear} AnswerAI. All rights reserved.</div>
+                <div className={styles.legalLinks}>
+                    <a href='/privacy-policy'>Privacy Policy</a>
+                    <span aria-hidden='true'>•</span>
+                    <a href='/terms-of-service'>Terms of Service</a>
+                    <span aria-hidden='true'>•</span>
+                    <a href='mailto:legal@theanswer.ai'>Contact Legal</a>
+                </div>
+            </div>
+        </footer>
+    )
+}
diff --git a/packages/docs/src/components/WebinarRegistrationForm.tsx b/packages/docs/src/components/WebinarRegistrationForm.tsx
new file mode 100644
index 00000000000..03e05eec41d
--- /dev/null
+++ b/packages/docs/src/components/WebinarRegistrationForm.tsx
@@ -0,0 +1,241 @@
+import React, { useState, FormEvent, useEffect } from 'react'
+import clsx from 'clsx'
+import { marketingConfig, calculateLeadScore } from '@site/src/config/marketingConfig'
+import { webinarConfig } from '@site/src/config/webinarContent'
+import styles from '../pages/index.module.css'
+
+interface FormData {
+    email: string
+}
+
+interface ValidationErrors {
+    [key: string]: string
+}
+
+export default function WebinarRegistrationForm(): JSX.Element {
+    const [formData, setFormData] = useState<FormData>({ email: '' })
+    const [errors, setErrors] = useState<ValidationErrors>({})
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [isSubmitted, setIsSubmitted] = useState(false)
+
+    // Load saved email from localStorage
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const savedEmail = localStorage.getItem('webinar_registration_email')
+            if (savedEmail) {
+                setFormData({ email: savedEmail })
+            }
+        }
+    }, [])
+
+    const validateEmail = (email: string): boolean => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+        if (!emailRegex.test(email)) {
+            setErrors({ email: 'Please enter a valid email address' })
+            return false
+        }
+        setErrors({})
+        return true
+    }
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = e.target
+        setFormData({ email: value })
+
+        // Save to localStorage
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('webinar_registration_email', value)
+        }
+
+        // Clear errors when user starts typing
+        if (errors.email) {
+            setErrors({})
+        }
+    }
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault()
+
+        if (!validateEmail(formData.email)) {
+            return
+        }
+
+        setIsSubmitting(true)
+        setErrors({})
+
+        try {
+            // Gather UTM parameters
+            const urlParams = new URLSearchParams(window.location.search)
+
+            // Call our API endpoint
+            const response = await fetch('/api/mailerlite-subscribe', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    email: formData.email,
+                    fields: {
+                        utm_source: urlParams.get('utm_source') || 'direct',
+                        utm_medium: urlParams.get('utm_medium') || 'website',
+                        utm_campaign: urlParams.get('utm_campaign') || 'webinar-enterprise-ai',
+                        lead_score: calculateLeadScore(formData),
+                        webinar_date: webinarConfig.webinarDate,
+                        webinar_time: webinarConfig.webinarTime,
+                        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
+                    }
+                })
+            })
+
+            const result = await response.json()
+
+            if (result.success) {
+                setIsSubmitted(true)
+
+                // Clear saved email
+                if (typeof window !== 'undefined') {
+                    localStorage.removeItem('webinar_registration_email')
+                    localStorage.setItem('webinar_registration_confirmed_email', formData.email)
+
+                    // Track success event
+                    window.dispatchEvent(new Event('webinar-registration-success'))
+                }
+
+                // Redirect to thank you page after delay
+                setTimeout(() => {
+                    window.location.href = marketingConfig.endpoints.thankYou
+                }, 2000)
+            } else {
+                setErrors({ submit: result.message || 'Registration failed. Please try again.' })
+            }
+        } catch (error) {
+            console.error('Registration error:', error)
+            setErrors({ submit: 'Network error. Please check your connection and try again.' })
+        } finally {
+            setIsSubmitting(false)
+        }
+    }
+
+    if (isSubmitted) {
+        return (
+            <div
+                className={clsx(styles.featureCard, styles.commandment)}
+                style={{ textAlign: 'center', backgroundColor: 'rgba(0, 255, 0, 0.1)', border: '2px solid #00ff00' }}
+            >
+                <div className={styles.comingSoonIcon}>✅</div>
+                <h3 style={{ color: '#00ff00' }}>Registration Confirmed!</h3>
+                <p>Check your email for:</p>
+                <ul style={{ textAlign: 'left', maxWidth: '300px', margin: '1rem auto' }}>
+                    <li>Webinar join link</li>
+                    <li>Calendar invitation</li>
+                    <li>Bonus &quot;Enterprise AI Readiness Checklist&quot;</li>
+                </ul>
+                <p style={{ fontSize: '0.9rem', opacity: 0.8 }}>Redirecting to confirmation page...</p>
+            </div>
+        )
+    }
+
+    return (
+        <form onSubmit={handleSubmit} style={{ maxWidth: '450px', margin: '0 auto' }}>
+            <div style={{ marginBottom: '1.5rem' }}>
+                <input
+                    type='email'
+                    name='email'
+                    placeholder='Enter your work email'
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    required
+                    disabled={isSubmitting}
+                    aria-label='Email address'
+                    aria-invalid={Boolean(errors.email)}
+                    aria-describedby={errors.email ? 'email-error' : undefined}
+                    style={{
+                        width: '100%',
+                        padding: '1.2rem 1.5rem',
+                        borderRadius: '12px',
+                        border: errors.email ? '2px solid #ff4444' : '2px solid rgba(255, 255, 255, 0.2)',
+                        backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                        color: 'white',
+                        fontSize: '1.1rem',
+                        outline: 'none',
+                        transition: 'all 0.3s ease',
+                        boxSizing: 'border-box'
+                    }}
+                    onFocus={(e) => {
+                        if (!errors.email) {
+                            e.target.style.border = '2px solid #00ffff'
+                            e.target.style.backgroundColor = 'rgba(0, 255, 255, 0.05)'
+                        }
+                    }}
+                    onBlur={(e) => {
+                        if (!errors.email) {
+                            e.target.style.border = '2px solid rgba(255, 255, 255, 0.2)'
+                            e.target.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'
+                        }
+                    }}
+                />
+                {errors.email && (
+                    <div id='email-error' style={{ color: '#ff4444', fontSize: '0.9rem', marginTop: '0.5rem', textAlign: 'center' }}>
+                        {errors.email}
+                    </div>
+                )}
+            </div>
+
+            {errors.submit && (
+                <div
+                    style={{
+                        color: '#ff4444',
+                        backgroundColor: 'rgba(255, 68, 68, 0.1)',
+                        padding: '0.75rem',
+                        borderRadius: '8px',
+                        border: '1px solid #ff4444',
+                        marginBottom: '1.5rem',
+                        textAlign: 'center'
+                    }}
+                >
+                    {errors.submit}
+                </div>
+            )}
+
+            <button
+                type='submit'
+                disabled={isSubmitting}
+                style={{
+                    width: '100%',
+                    padding: '1.2rem',
+                    fontSize: '1.3rem',
+                    fontWeight: '600',
+                    backgroundColor: isSubmitting ? '#666666' : '#00ffff',
+                    color: isSubmitting ? '#cccccc' : '#000000',
+                    border: 'none',
+                    borderRadius: '12px',
+                    cursor: isSubmitting ? 'not-allowed' : 'pointer',
+                    transition: 'all 0.3s ease',
+                    boxSizing: 'border-box',
+                    textTransform: 'none',
+                    letterSpacing: '0.5px'
+                }}
+                onMouseEnter={(e) => {
+                    if (!isSubmitting) {
+                        ;(e.target as HTMLButtonElement).style.backgroundColor = '#00cccc'
+                        ;(e.target as HTMLButtonElement).style.transform = 'translateY(-1px)'
+                        ;(e.target as HTMLButtonElement).style.boxShadow = '0 4px 20px rgba(0, 255, 255, 0.3)'
+                    }
+                }}
+                onMouseLeave={(e) => {
+                    if (!isSubmitting) {
+                        ;(e.target as HTMLButtonElement).style.backgroundColor = '#00ffff'
+                        ;(e.target as HTMLButtonElement).style.transform = 'translateY(0px)'
+                        ;(e.target as HTMLButtonElement).style.boxShadow = 'none'
+                    }
+                }}
+            >
+                {isSubmitting ? 'Registering...' : 'Reserve My Free Spot 🚀'}
+            </button>
+
+            <div style={{ marginTop: '1rem', textAlign: 'center', opacity: 0.8, fontSize: '0.9rem' }}>
+                <p>🔒 Your information is secure and will never be shared</p>
+            </div>
+        </form>
+    )
+}
diff --git a/packages/docs/src/config/marketingConfig.ts b/packages/docs/src/config/marketingConfig.ts
new file mode 100644
index 00000000000..940a346ac66
--- /dev/null
+++ b/packages/docs/src/config/marketingConfig.ts
@@ -0,0 +1,264 @@
+// MailerLite configuration - hardcoded values with env var fallbacks
+const MAILERLITE_CONFIG = {
+    webformId: '6zbHKe', // This is the data-form ID from the Universal embed code
+    accountId: '1802410', // Your MailerLite account ID
+    enabled: true,
+    apiBaseUrl: 'https://assets.mailerlite.com/api',
+    defaultGroups: undefined as string[] | undefined,
+    doubleOptIn: false,
+    customRedirectUrl: undefined as string | undefined
+}
+
+// Use hardcoded values with fallback to env vars (for when we fix env loading)
+const mailerLiteWebformId = process.env.DOCUSAURUS_MAILERLITE_WEBFORM_ID?.trim() || MAILERLITE_CONFIG.webformId
+const mailerLiteEnabled = process.env.DOCUSAURUS_MAILERLITE_ENABLED
+    ? !['0', 'false', 'off'].includes(process.env.DOCUSAURUS_MAILERLITE_ENABLED.toLowerCase())
+    : MAILERLITE_CONFIG.enabled
+const mailerLiteApiBaseUrl = process.env.DOCUSAURUS_MAILERLITE_API_BASE_URL?.trim() || MAILERLITE_CONFIG.apiBaseUrl
+const mailerLiteDefaultGroups = process.env.DOCUSAURUS_MAILERLITE_GROUP_IDS
+    ? process.env.DOCUSAURUS_MAILERLITE_GROUP_IDS.split(',')
+          .map((groupId) => groupId.trim())
+          .filter(Boolean)
+    : MAILERLITE_CONFIG.defaultGroups
+const mailerLiteDoubleOptIn = process.env.DOCUSAURUS_MAILERLITE_DOUBLE_OPT_IN
+    ? !['0', 'false', 'off'].includes(process.env.DOCUSAURUS_MAILERLITE_DOUBLE_OPT_IN.toLowerCase())
+    : MAILERLITE_CONFIG.doubleOptIn
+const mailerLiteCustomRedirectUrl = process.env.DOCUSAURUS_MAILERLITE_REDIRECT_URL?.trim() || MAILERLITE_CONFIG.customRedirectUrl
+export interface MarketingConfig {
+    // Tracking and analytics
+    tracking: {
+        googleAnalyticsId?: string
+        linkedInPixel?: string
+        facebookPixel?: string
+        gtmId?: string
+    }
+
+    // MailerLite integration
+    mailerLite: {
+        enabled: boolean
+        webformId?: string
+        apiBaseUrl: string
+        defaultGroups?: string[]
+        doubleOptIn?: boolean
+        customRedirectUrl?: string
+    }
+
+    // A/B testing configuration
+    abTests: {
+        [key: string]: {
+            enabled: boolean
+            variants: string[]
+            defaultVariant?: string
+        }
+    }
+
+    // API endpoints
+    endpoints: {
+        registration: string
+        leadMagnet: string
+        thankYou: string
+    }
+
+    // Urgency and scarcity settings
+    urgency: {
+        seatsRemaining: boolean
+        countdownTimer: boolean
+        lastChanceHours: number
+        bonusTimeLimit?: number
+    }
+
+    // Email automation
+    emailAutomation: {
+        confirmationEmail: boolean
+        reminderEmails: boolean
+        followupSequence: boolean
+        leadMagnetDelivery: boolean
+    }
+
+    // Social proof and trust signals
+    socialProof: {
+        customerLogos: string[]
+        testimonials: boolean
+        registrationCount: boolean
+        liveAttendeeCount?: boolean
+    }
+
+    // Conversion optimization
+    optimization: {
+        exitIntent: boolean
+        stickyHeader: boolean
+        mobileOptimized: boolean
+        formValidation: boolean
+    }
+}
+
+export const marketingConfig: MarketingConfig = {
+    // Easy to update tracking codes
+    tracking: {
+        googleAnalyticsId: process.env.DOCUSAURUS_GA_ID,
+        linkedInPixel: process.env.DOCUSAURUS_LINKEDIN_PIXEL,
+        facebookPixel: process.env.DOCUSAURUS_FACEBOOK_PIXEL,
+        gtmId: process.env.DOCUSAURUS_GTM_ID
+    },
+
+    // MailerLite configuration
+    mailerLite: {
+        enabled: mailerLiteEnabled,
+        webformId: mailerLiteWebformId,
+        apiBaseUrl: mailerLiteApiBaseUrl,
+        defaultGroups: mailerLiteDefaultGroups,
+        doubleOptIn: mailerLiteDoubleOptIn,
+        customRedirectUrl: mailerLiteCustomRedirectUrl
+    },
+
+    // A/B test variants - EASY TO ENABLE/DISABLE
+    abTests: {
+        headline: {
+            enabled: false, // Set to true to enable A/B testing
+            variants: ['primary', 'alternate1', 'alternate2'],
+            defaultVariant: 'primary'
+        },
+        cta: {
+            enabled: false,
+            variants: ['Register Now', 'Save My Seat', 'Reserve Spot Free'],
+            defaultVariant: 'Reserve Spot Free'
+        },
+        formPosition: {
+            enabled: false,
+            variants: ['hero', 'midPage', 'both'],
+            defaultVariant: 'hero'
+        }
+    },
+
+    // Email automation endpoints - UPDATE THESE
+    endpoints: {
+        registration: '/api/webinar/register',
+        leadMagnet: '/api/webinar/download-checklist',
+        thankYou: '/webinar-thank-you'
+    },
+
+    // Urgency messaging - EASY TO TOGGLE
+    urgency: {
+        seatsRemaining: true,
+        countdownTimer: true,
+        lastChanceHours: 24, // Show "last chance" messaging 24 hours before
+        bonusTimeLimit: 72 // Bonus offer expires 72 hours after registration
+    },
+
+    // Email automation settings
+    emailAutomation: {
+        confirmationEmail: true, // Send immediate confirmation
+        reminderEmails: true, // Send reminder sequence
+        followupSequence: true, // Post-webinar nurture
+        leadMagnetDelivery: true // Auto-deliver bonus materials
+    },
+
+    // Social proof elements
+    socialProof: {
+        customerLogos: [
+            'ias-logo.png',
+            'palatine-capital.png',
+            'moonstruck-medical.png',
+            'wow-internet.png',
+            'contentful-logo.png',
+            'dropbox-logo.png',
+            'marqeta-logo.png'
+        ],
+        testimonials: true,
+        registrationCount: true,
+        liveAttendeeCount: false // Could show real-time registration numbers
+    },
+
+    // Conversion optimization features
+    optimization: {
+        exitIntent: true, // Show exit-intent popup
+        stickyHeader: false, // Sticky registration CTA
+        mobileOptimized: true, // Mobile-first responsive design
+        formValidation: true // Real-time form validation
+    }
+}
+
+// UTM parameter configuration for tracking
+export const utmConfig = {
+    source: 'website',
+    medium: 'webinar-landing',
+    campaign: 'enterprise-ai-webinar-jan-2025',
+    content: 'primary-landing-page'
+}
+
+// Lead scoring configuration
+export const leadScoringConfig = {
+    jobTitleScores: {
+        CTO: 10,
+        CDO: 10,
+        VP: 8,
+        Director: 7,
+        Manager: 5,
+        Engineer: 3,
+        Other: 1
+    },
+    companySizeScores: {
+        '500-1000': 10,
+        '1000-5000': 9,
+        '200-500': 8,
+        '50-200': 5,
+        '10-50': 2,
+        '1-10': 1
+    },
+    industryScores: {
+        Technology: 10,
+        'Financial Services': 9,
+        Healthcare: 9,
+        Manufacturing: 8,
+        Retail: 6,
+        Other: 5
+    }
+}
+
+// Helper functions for marketing automation
+export const getUtmParams = (source?: string, medium?: string, campaign?: string) => {
+    return new URLSearchParams({
+        utm_source: source || utmConfig.source,
+        utm_medium: medium || utmConfig.medium,
+        utm_campaign: campaign || utmConfig.campaign,
+        utm_content: utmConfig.content
+    }).toString()
+}
+
+export const calculateLeadScore = (formData: any) => {
+    let score = 50 // Base score for webinar registration
+
+    // Email domain scoring (work email bonus)
+    if (formData.email) {
+        const domain = formData.email.split('@')[1]?.toLowerCase()
+        const personalDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'outlook.com', 'aol.com']
+        if (!personalDomains.includes(domain)) {
+            score += 25 // Work email bonus
+        } else {
+            score += 10 // Personal email still gets some points for interest
+        }
+    }
+
+    // UTM source scoring for lead quality
+    if (formData.utm_source) {
+        const source = formData.utm_source.toLowerCase()
+        if (source.includes('linkedin')) score += 15
+        else if (source.includes('google') || source.includes('search')) score += 10
+        else if (source === 'direct') score += 5
+    }
+
+    return Math.min(score, 100) // Cap at 100
+}
+
+// A/B testing helper
+export const getActiveVariant = (testName: string): string => {
+    const test = marketingConfig.abTests[testName]
+    if (!test || !test.enabled) {
+        return test?.defaultVariant || test?.variants[0] || 'default'
+    }
+
+    // Simple random selection for now
+    // In production, this would use a proper A/B testing service
+    const randomIndex = Math.floor(Math.random() * test.variants.length)
+    return test.variants[randomIndex]
+}
diff --git a/packages/docs/src/config/webinarContent.ts b/packages/docs/src/config/webinarContent.ts
new file mode 100644
index 00000000000..681786d0180
--- /dev/null
+++ b/packages/docs/src/config/webinarContent.ts
@@ -0,0 +1,520 @@
+export interface WebinarConfig {
+    // Basic webinar details
+    webinarDate: string
+    webinarTime: string
+    webinarDateTimeISO: string
+    maxSeats: number
+    currentRegistrations: number
+    scarcity?: {
+        totalSeats: number
+        registrationDeadline: string
+        urgencyMessages: string[]
+    }
+    limitedBonus?: {
+        headline: string
+        subhead: string
+        perks: string[]
+    }
+    pressFeatures?: Array<{
+        name: string
+        logo?: string
+        url?: string
+        label?: string
+    }>
+    hostHighlights?: Array<{
+        speaker: string
+        highlight: string
+    }>
+    testimonialQuotes?: Array<{
+        quote: string
+        author: string
+        role?: string
+        company: string
+    }>
+    roadmap?: Array<{
+        phase: string
+        duration: string
+        outcomes: string[]
+    }>
+    toolkitPreview?: Array<{
+        title: string
+        description: string
+        asset?: string
+    }>
+    introVideo?: {
+        url: string
+        caption?: string
+    }
+
+    // Headlines for A/B testing
+    headlines: {
+        primary: string
+        alternate1: string
+        alternate2: string
+    }
+
+    // Customer success stories
+    customerStats: {
+        [key: string]: {
+            saved?: string
+            roi?: string
+            deployment?: string
+            systems?: string
+            reps?: string
+            search?: string
+            [key: string]: string | undefined
+        }
+    }
+
+    // Speaker information
+    speakers: Array<{
+        name: string
+        title: string
+        bio: string
+        image?: string
+    }>
+
+    // Form configuration
+    formFields: {
+        requiredFields: string[]
+        optionalFields: string[]
+    }
+
+    // Content sections
+    problems: Array<{
+        icon: string
+        title: string
+        description: string
+    }>
+
+    framework: Array<{
+        week: number
+        title: string
+        description: string
+        deliverables: string[]
+    }>
+
+    customerStories: Array<{
+        company: string
+        logo: string
+        industry: string
+        challenge: string
+        solution: string
+        results: string[]
+        metrics: string
+    }>
+
+    agenda: Array<{
+        time: string
+        topic: string
+        description: string
+    }>
+
+    faqs: Array<{
+        question: string
+        answer: string
+    }>
+}
+
+export const webinarConfig: WebinarConfig = {
+    // Basic webinar details - EASY TO UPDATE
+    webinarDate: 'Saturday, January 18, 2025',
+    webinarTime: '11:00 AM PST',
+    webinarDateTimeISO: '2025-01-18T19:00:00Z',
+    maxSeats: 200,
+    currentRegistrations: 147,
+    scarcity: {
+        totalSeats: 200,
+        registrationDeadline: '2025-01-18T18:59:59Z',
+        urgencyMessages: [
+            "Only {remainingSeats} seats left for Saturday's live session",
+            'Registration closes Saturday at 11:00 AM PST',
+            '⚡ Limited seating — save your spot now'
+        ]
+    },
+    limitedBonus: {
+        headline: 'Bonus for the first 150 registrants',
+        subhead: 'Lock in your seat now and you’ll also get:',
+        perks: [
+            'Private Slack AMA with the AnswerAI founding team the week before the webinar',
+            '1:1 20-minute AI readiness audit (scheduled post-workshop)',
+            'Early access to the Enterprise AI Playbook PDF before it goes public'
+        ]
+    },
+    pressFeatures: [{ name: 'TechCrunch' }, { name: 'Forbes AI 50' }, { name: 'AWS Startups' }, { name: 'Google Cloud Innovators' }],
+    hostHighlights: [
+        {
+            speaker: 'Brad Taylor',
+            highlight: 'Former Optimizely executive • 340% conversion rate improvement • Founded multiple tech companies'
+        },
+        {
+            speaker: 'Adam Harris',
+            highlight: 'Former Google DoubleClick Lead • 20+ years scaling enterprise platforms • Operations expert'
+        },
+        { speaker: 'Max Techera', highlight: 'Architected AnswerAI platform • Built Last Rev framework • Powers enterprise AI deployments' }
+    ],
+    testimonialQuotes: [
+        {
+            quote: '“We replaced six scattered systems with one compliant AI interface in just four weeks.”',
+            author: 'Customer Success Lead',
+            role: 'Enterprise Enablement',
+            company: 'Integral Ad Science'
+        },
+        {
+            quote: '“120 analyst hours every week back in our pipeline — the Palatine playbook alone paid for the program.”',
+            author: 'Deal Operations Director',
+            role: 'Private Equity',
+            company: 'Palatine Capital Partners'
+        },
+        {
+            quote: '“Our reps now find answers in seconds and stay on-message across nine regions.”',
+            author: 'Director of Sales Enablement',
+            role: 'Commercial Operations',
+            company: 'Moonstruck Medical'
+        }
+    ],
+    roadmap: [
+        {
+            phase: 'Week 1',
+            duration: 'Days 1-7',
+            outcomes: ['Executive alignment & success metrics', 'AI readiness audit delivered', 'Use-case priority matrix built']
+        },
+        {
+            phase: 'Week 2',
+            duration: 'Days 8-14',
+            outcomes: ['Secure environment configured', 'Systems & data sources connected', 'Governance guardrails activated']
+        },
+        {
+            phase: 'Week 3',
+            duration: 'Days 15-21',
+            outcomes: ['Pilot teams onboarded', 'Workflows automated with human-in-loop QA', 'Performance baseline captured']
+        },
+        {
+            phase: 'Week 4+',
+            duration: 'Days 22-30',
+            outcomes: ['Company-wide launch playbook', 'Executive dashboard + ROI tracker', '90-day optimization backlog']
+        }
+    ],
+    toolkitPreview: [
+        {
+            title: 'Deployment Command Center',
+            description: 'Notion + Airtable templates to manage requirements, approvals, and cutover checklist.'
+        },
+        {
+            title: 'Executive Scorecard Dashboard',
+            description: 'Ready-to-use Looker/Sheets dashboards for ROI, adoption, and compliance tracking.'
+        },
+        {
+            title: 'Security & Compliance Packet',
+            description: 'SOC2-ready policy templates, vendor review questionnaires, and data flow diagrams.'
+        },
+        {
+            title: 'AI Use-Case Prioritization Matrix',
+            description: 'Weighted scoring model to align stakeholders on impact vs. complexity instantly.'
+        }
+    ],
+    introVideo: {
+        url: 'https://www.youtube-nocookie.com/embed/TODO_REPLACE_WITH_WEBINAR_INTRO',
+        caption: 'Bradley Taylor shares what you’ll accomplish in this 60-minute working session (replace with final video).'
+    },
+
+    // Headlines - easily A/B testable
+    headlines: {
+        primary: 'From AI Chaos to Enterprise Success: Deploy AI Agents in 4 Weeks, Not 6 Months',
+        alternate1: 'Stop Paying AI Tax: How Enterprises Cut Costs 30% While Scaling AI',
+        alternate2: 'The Enterprise AI Playbook: Vendor-Free Implementation in 30 Days'
+    },
+
+    // Customer success metrics - UPDATE THESE EASILY
+    customerStats: {
+        palatine: {
+            saved: '120 analyst-hours/week',
+            roi: '$312K annual savings',
+            deployment: '12 weeks',
+            systems: '50-60 daily broker emails automated'
+        },
+        ias: {
+            deployment: '4 weeks',
+            systems: '6 systems consolidated to 1 AI interface',
+            roi: '40% faster ticket resolution'
+        },
+        moonstruck: {
+            reps: '9 sales reps unified',
+            search: 'minutes to seconds search time',
+            roi: 'Operations team freed for strategic work'
+        },
+        wow: {
+            conversion: 'POC → $36K annual license',
+            roi: 'Complete support workflow automation'
+        },
+        contentful: {
+            systems: '6 scattered systems to 1 unified interface',
+            roi: '90% of queries handled instantly by AI'
+        }
+    },
+
+    // Speaker info - UPDATE BIOS/IMAGES HERE
+    speakers: [
+        {
+            name: 'Brad Taylor',
+            title: 'CEO & Co-Founder',
+            bio: 'Founder & CEO of AnswerAI and Co-Founder of Last Rev. Former Head of Web & Experimentation at Optimizely where he led a 340% increase in conversion rates. Built and sold multiple tech companies including 195Places. 15+ years pioneering advanced technology solutions and AI automation for enterprise clients.',
+            image: '/img/brad-blackand-white.png'
+        },
+        {
+            name: 'Adam Harris',
+            title: 'COO & Co-Founder',
+            bio: 'COO & Co-Founder with 20+ years in engineering, sales, and business development. Former Lead Product Evangelist at Google DoubleClick, Senior BD at Leap Motion. Led DoubleClick Rich Media to 200%+ growth. Expert in scaling SaaS platforms and enterprise digital transformation.'
+        },
+        {
+            name: 'Max Techera',
+            title: 'CTO & Co-Founder',
+            bio: "CTO & Co-Founder, architected the entire AnswerAI platform from the ground up. Director of Engineering at Last Rev where he built the framework powering 10+ enterprise websites. Created the unified GraphQL data layer and AI orchestration system that enables AnswerAI's rapid 4-week deployments. Expert in React, Node.js, and enterprise-scale architectures."
+        }
+    ],
+
+    // Form fields - ADD/REMOVE FIELDS EASILY
+    formFields: {
+        requiredFields: ['email'],
+        optionalFields: []
+    },
+
+    // Problem section content
+    problems: [
+        {
+            icon: '📉',
+            title: '87% of AI Projects Fail',
+            description:
+                'Most enterprises get trapped in vendor lock-in, paying 60% more than needed for AI implementations that take 6+ months and deliver no measurable ROI.'
+        },
+        {
+            icon: '🔒',
+            title: 'Vendor Lock-In Nightmare',
+            description:
+                "Companies spend millions on proprietary AI platforms, then discover they can't switch models, export data, or customize workflows to their actual needs."
+        },
+        {
+            icon: '⏰',
+            title: '6-Month Implementation Hell',
+            description:
+                'Traditional AI deployments require armies of consultants, endless meetings, and complex integrations that still leave teams frustrated and unproductive.'
+        }
+    ],
+
+    // 4-Week framework content
+    framework: [
+        {
+            week: 1,
+            title: 'Discovery & Strategy',
+            description: 'Live demo of our enterprise AI assessment process',
+            deliverables: [
+                'AI readiness evaluation',
+                'Use case prioritization',
+                'Technical requirements analysis',
+                'Success metrics definition'
+            ]
+        },
+        {
+            week: 2,
+            title: 'Document & Tool Setup',
+            description: 'Platform configuration and integration planning',
+            deliverables: [
+                'System integrations configured',
+                'Data sources connected',
+                'Security protocols established',
+                'User access controls set'
+            ]
+        },
+        {
+            week: 3,
+            title: 'Internal Testing & Iteration',
+            description: 'Pilot deployment with real workflows',
+            deliverables: ['Pilot user training', 'Workflow optimization', 'Performance monitoring', 'Feedback incorporation']
+        },
+        {
+            week: 4,
+            title: 'Launch & Optimization',
+            description: 'Full deployment across organization',
+            deliverables: ['Company-wide rollout', 'Success metrics tracking', 'Ongoing optimization', 'ROI measurement']
+        }
+    ],
+
+    // Customer success stories with real metrics
+    customerStories: [
+        {
+            company: 'Palatine Capital Partners',
+            logo: '/img/customers/palatine-capital.png',
+            industry: 'Private Equity / Real Estate Investment',
+            challenge:
+                '50-60 broker-blast emails flooding inbox daily. 120 analyst-hours per week on manual data entry, CA signing, and document processing.',
+            solution:
+                'Smart Intake Agent processes deal emails automatically. Document Extraction Agent reads financial/property data with confidence scoring. ROC Builder Service returns fully-populated models in <60 seconds.',
+            results: [
+                'Automated 50-60 daily broker emails',
+                'Freed 4-5 FTEs for strategic underwriting work',
+                '3x faster deal throughput (≤20 min per deal)',
+                'GL bucket mis-classification <5%',
+                '99.5% system uptime'
+            ],
+            metrics: '$312K+ annual savings from 120 analyst-hours/week automation'
+        },
+        {
+            company: 'Integral Ad Science (IAS)',
+            logo: '/img/customers/ias-logo.png',
+            industry: 'Digital Advertising Technology',
+            challenge:
+                'Complex legal and compliance workflows. Information scattered across 6 different systems. Need for audit trails and governance in public company environment.',
+            solution:
+                '4-week rapid deployment with enterprise-grade security. Legal department automation for document processing. Multi-system integration with unified AI interface.',
+            results: [
+                '4-week deployment vs 6+ month industry standard',
+                'Single AI interface replacing 6 scattered systems',
+                'Legal automation with full compliance maintained',
+                'High user adoption across legal and operations teams'
+            ],
+            metrics: '40% faster ticket resolution with 90% accuracy maintained'
+        },
+        {
+            company: 'Moonstruck Medical',
+            logo: '/img/customers/moonstruck-medical.png',
+            industry: 'Medical Device / Pharmaceutical',
+            challenge:
+                '9 sales reps (1099 contractors) across locations with info silos. 5-6 new product lines monthly creating nonstop training demands. Documentation chaos across Google Drive, PDFs, emails.',
+            solution:
+                'Sales Cheat-Sheet Bot for instant product & pricing lookups. Rep Role-Play Coach for sales call simulation. Knowledge centralization across all documentation sources.',
+            results: [
+                'Search time: from minutes to seconds',
+                'Single source of truth across 9 distributed reps',
+                'Operations team freed for strategic work',
+                'Consistent messaging eliminated info silos',
+                'Automated onboarding for new product lines'
+            ],
+            metrics: 'Ops team capacity optimized, consistent revenue per rep through standardized messaging'
+        },
+        {
+            company: 'WOW! Internet',
+            logo: '/img/customers/wow-internet.png',
+            industry: 'Telecommunications / Internet Services',
+            challenge:
+                'Customer support bottlenecks. Manual ticket routing and response. Need for scalable automation solution without massive upfront investment.',
+            solution:
+                '3-month $3K POC program with custom support agents. Live voice agents with CRM integration. Chrome extension for agent productivity.',
+            results: [
+                'Successfully completed POC in 90 days',
+                'Moved to annual Enterprise License ($36K/year)',
+                'Customer support response times improved',
+                'Agent productivity increased through automation',
+                'Unified customer data access across systems'
+            ],
+            metrics: 'POC converted to full implementation with measurable support efficiency gains'
+        }
+    ],
+
+    // Webinar agenda
+    agenda: [
+        {
+            time: '5 min',
+            topic: 'Opening & Problem Statement',
+            description: 'AI implementation chaos in enterprises and our proven solution framework'
+        },
+        {
+            time: '15 min',
+            topic: 'The Enterprise AI Reality Check',
+            description: 'Why 87% of AI projects fail, vendor lock-in costs, and IAS 4-week vs 6+ month case study'
+        },
+        {
+            time: '20 min',
+            topic: 'Live Demo: 4-Week Deployment Framework',
+            description: 'Week-by-week breakdown with live AnswerAgent platform demonstration and real client examples'
+        },
+        {
+            time: '10 min',
+            topic: 'Enterprise Success Stories',
+            description: 'Palatine Capital (120 hours saved), IAS (6 systems unified), Moonstruck (9 reps), WOW! ($3K→$36K), ROI metrics'
+        },
+        {
+            time: '10 min',
+            topic: 'Q&A & 90-Day Pilot Program',
+            description: 'Live objection handling with client proof points, 90-day pilot introduction, clear next steps'
+        }
+    ],
+
+    // FAQ content addressing common objections
+    faqs: [
+        {
+            question: "This sounds too complex to implement. How do we know it won't be another 18-month project?",
+            answer: "IAS (Integral Ad Science) deployed our full solution in exactly 4 weeks with all employees onboarded. We've proven this timeline works because we pre-built 100+ integrations (SFDC, Jira, Confluence, etc.) and use a human-in-the-loop approach rather than trying to automate everything at once."
+        },
+        {
+            question: "What about vendor lock-in? We've been burned before by platforms that held our data hostage.",
+            answer: 'Unlike competitors, you bring your own API tokens and can switch between OpenAI, Claude, and Gemini instantly. Complete export capabilities mean you keep everything if you cancel. Open-source components let you fork and modify code. Your data, your infrastructure, your control.'
+        },
+        {
+            question: 'How do we handle security and compliance in a regulated industry?',
+            answer: 'We offer SOC2 Type II compliance pathways, on-premise deployment, and air-gapped options. Fortune 500 financial services companies use our platform with full regulatory compliance (SOX, FINRA). Complete audit trails and role-based access controls are built-in.'
+        },
+        {
+            question: "What's the actual ROI? We need concrete numbers to justify this to our board.",
+            answer: 'Palatine Capital Partners saved $312K annually by automating 120 analyst-hours per week. Average clients see 10-30% reduction in SaaS tool spending within 90 days. IAS achieved 40% faster ticket resolution. Typical payback period is 90 days with measurable productivity gains.'
+        },
+        {
+            question: "Our team isn't technical. Will we need to hire AI specialists to use this?",
+            answer: "Monostruck Medical's sales operations team (non-technical) unified 9 reps across locations in 3 weeks. Our 'buttons beat chat' philosophy means simple interfaces, not complex AI interactions. We provide training, but the platform is designed for business users, not developers."
+        },
+        {
+            question: 'How is this different from Microsoft Copilot or OpenAI Enterprise?',
+            answer: 'No vendor lock-in (swap models instantly), usage-based pricing (not per-seat), 4-week deployment (not 6+ months), and complete customization. While competitors lock you into their ecosystem, we integrate with your existing tools and let you maintain full control.'
+        }
+    ]
+}
+
+// Helper function to get available seats
+export const getAvailableSeats = () => {
+    return webinarConfig.maxSeats - webinarConfig.currentRegistrations
+}
+
+// Helper function to get urgency messaging
+export const getUrgencyMessage = () => {
+    const available = getAvailableSeats()
+    if (!webinarConfig.scarcity) {
+        if (available <= 10) return `Only ${available} seats left!`
+        if (available <= 50) return `${available} seats remaining`
+        return `Limited to ${webinarConfig.maxSeats} seats`
+    }
+
+    const messageTemplate = webinarConfig.scarcity.urgencyMessages[0] || '{remainingSeats} seats remaining'
+    return messageTemplate.replace('{remainingSeats}', available.toString())
+}
+
+// Helper to format webinar date/time
+export const getWebinarDateTime = () => {
+    return `${webinarConfig.webinarDate} at ${webinarConfig.webinarTime}`
+}
+
+export const getRegistrationDeadline = () => webinarConfig.scarcity?.registrationDeadline
+
+export const getLocalWebinarDateTime = () => {
+    try {
+        const eventDate = new Date(webinarConfig.webinarDateTimeISO)
+        if (Number.isNaN(eventDate.getTime())) {
+            return getWebinarDateTime()
+        }
+
+        const dateFormatter = new Intl.DateTimeFormat(undefined, {
+            weekday: 'long',
+            month: 'long',
+            day: 'numeric'
+        })
+
+        const timeFormatter = new Intl.DateTimeFormat(undefined, {
+            hour: 'numeric',
+            minute: '2-digit',
+            timeZoneName: 'short'
+        })
+
+        return `${dateFormatter.format(eventDate)} · ${timeFormatter.format(eventDate)}`
+    } catch (error) {
+        console.warn('Unable to format webinar datetime for locale', error)
+        return getWebinarDateTime()
+    }
+}
diff --git a/packages/docs/src/pages/index.module.css b/packages/docs/src/pages/index.module.css
index 7a77ac907a5..dac0c207151 100644
--- a/packages/docs/src/pages/index.module.css
+++ b/packages/docs/src/pages/index.module.css
@@ -30,6 +30,13 @@
     pointer-events: none;
 }
 
+.heroFallback {
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.2), rgba(0, 0, 0, 0.9));
+    opacity: 0.85;
+}
+
 .heroContent {
     position: relative;
     z-index: 2;
@@ -46,746 +53,2502 @@
     margin: 0 auto;
 }
 
-.heroSubtitle {
-    font-size: 1.5rem;
-    text-align: center;
-    padding-top: 1rem;
-    width: 100%;
-    position: relative;
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+.heroCelebration {
+    font-size: clamp(3rem, 6vw, 4.5rem);
+    margin-bottom: 0.75rem;
 }
 
-.heroLogo {
-    margin: auto 0;
+.heroChecklist {
+    list-style: none;
+    padding: 0;
+    margin: 1.5rem 0 2.5rem;
+    display: grid;
+    gap: 0.85rem;
 }
 
-.heroCTAs {
+.heroChecklistItem {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.5rem;
-    margin-top: 2rem;
-    width: 100%;
+    align-items: flex-start;
+    gap: 0.75rem;
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 12px;
+    padding: 0.9rem 1rem;
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.85);
 }
 
-.ctaButton {
-    display: inline-block;
-    padding: 1rem 2rem;
-    font-size: 1.2rem;
-    font-weight: bold;
-    text-decoration: none;
-    transition: all 0.3s ease;
-    border: 2px solid;
+.heroChecklistIcon {
+    font-size: 1.4rem;
+    line-height: 1;
 }
 
-.ctaPrimary {
-    background: linear-gradient(45deg, #ff00ff, #00ffff);
-    color: #fff;
-    border-radius: 50px;
-    padding: 1.2rem 3rem;
-    font-size: 1.3rem;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
-    border: none;
+.heroActionRow {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2rem;
+    width: 100%;
 }
 
-.ctaPrimary:hover {
-    background: linear-gradient(45deg, #00ffff, #ff00ff);
-    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
-    transform: translateY(-2px);
-    color: #fff;
+.heroActionPrimary {
+    display: grid;
+    gap: 1.5rem;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 18px;
+    padding: 1.75rem;
 }
 
-.secondaryLinks {
+.heroActionFooter {
     display: flex;
-    gap: 2rem;
-    align-items: center;
     justify-content: center;
 }
 
-.secondaryLink {
-    display: flex;
+.heroVoiceCard {
+    display: grid;
+    gap: 1rem;
+    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 0, 0, 0.65));
+    border: 1px solid rgba(0, 255, 255, 0.35);
+    border-radius: 18px;
+    padding: 1.75rem;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+}
+
+.heroVoiceHeader {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.heroVoiceTitle {
+    margin: 0;
+    font-size: 1.6rem;
+    color: #ffffff;
+}
+
+.heroVoiceCopy {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.78);
+    font-size: 1rem;
+}
+
+.heroVoiceButton {
+    display: inline-flex;
     align-items: center;
+    justify-content: center;
     gap: 0.5rem;
-    color: rgba(255, 255, 255, 0.8);
-    text-decoration: none;
-    font-size: 0.9rem;
-    transition: all 0.3s ease;
-    padding: 0.5rem 1rem;
-    border-radius: 20px;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
+    padding: 0.9rem 1.6rem;
+    border-radius: 999px;
+    background: #00ffff;
+    color: #001828;
+    font-weight: 600;
+    border: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
-.secondaryLink:hover {
-    color: #00ffff;
-    background: rgba(0, 255, 255, 0.1);
+.heroVoiceButton:hover:not(:disabled) {
     transform: translateY(-1px);
+    box-shadow: 0 12px 28px rgba(0, 255, 255, 0.35);
 }
 
-.chromeIcon {
-    width: 16px;
-    height: 16px;
+.heroVoiceAssurance {
+    margin: 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.65);
 }
 
-.ctaDevelopers {
-    background-color: #00ffff;
-    color: #000;
+.heroSecondaryLinks {
+    margin-top: 2.5rem;
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    justify-content: center;
 }
 
-.ctaDevelopers:hover {
-    background-color: transparent;
-    color: #00ffff;
+.landingHero {
+    padding: 6rem 0 4rem;
+    background: radial-gradient(circle at top right, rgba(0, 255, 255, 0.15), rgba(0, 0, 0, 0.85));
 }
 
-.ctaAlpha {
-    background-color: #ff00ff;
-    color: #fff;
-    border-color: #ff00ff;
+.heroContainer {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    padding: 0 1.5rem;
 }
 
-.ctaAlpha:hover {
-    background-color: transparent;
-    color: #ff00ff;
+.heroGrid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
+    gap: 3rem;
+    align-items: center;
 }
 
-.ctaChromeExtension {
-    background-color: #00ff00;
-    color: #000;
-    border-color: #00ff00;
+.heroCopy {
+    color: #ffffff;
 }
 
-.ctaChromeExtension:hover {
-    background-color: transparent;
-    color: #00ff00;
+.heroEyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.95rem;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: #00ffff;
+    background: rgba(0, 255, 255, 0.15);
+    border: 1px solid rgba(0, 255, 255, 0.35);
+    border-radius: 999px;
+    padding: 0.55rem 1.25rem;
+    margin-bottom: 1.5rem;
 }
 
-.missionSection,
-.featuresSection,
-.macAppTeaserSection,
-.pricingSection {
-    background-color: rgba(0, 0, 0, 0.8);
-    color: #fff;
-    padding: 4rem 2rem;
+.heroHeadline {
+    font-size: clamp(2.6rem, 4.3vw, 3.8rem);
+    line-height: 1.05;
+    font-weight: 700;
+    margin-bottom: 1.25rem;
+    background: linear-gradient(120deg, #ffffff, #00ffff 70%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.missionSection h2,
-.featuresSection h2,
-.macAppTeaserSection h2,
-.pricingSection h2 {
-    color: #00ffff;
+.heroSubhead {
+    font-size: 1.2rem;
+    opacity: 0.88;
     margin-bottom: 2rem;
+    max-width: 640px;
 }
 
-.videoContainer {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 56.25%; /* 16:9 aspect ratio */
-    border-radius: 15px;
-    overflow: hidden;
-    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
+.heroHighlightsHeading {
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 0.75rem;
 }
 
-.youtubeVideo {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: none;
+.heroProofSection {
+    background: rgba(0, 18, 40, 0.92);
+    padding: 2.75rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.04);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }
 
-.beliefsSection {
-    margin-top: 4rem;
-    text-align: center;
+.heroProofGrid {
+    display: grid;
+    gap: 2rem;
+    align-items: center;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 }
 
-.beliefsSection h2 {
-    font-size: 2.5rem;
-    background: linear-gradient(45deg, #ff00ff, #00ffff);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 3rem;
+.heroProofLabel {
+    font-size: 0.85rem;
     text-transform: uppercase;
-    letter-spacing: 2px;
+    letter-spacing: 0.14em;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 0.75rem;
 }
 
-.commandments {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 2rem;
-    max-width: 800px;
-    margin: 0 auto;
+.logoStrip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem 2rem;
+    align-items: center;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.95rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
-/* Commandments Grid Layout */
-.pyramidContainer {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 2rem 0;
+.logoStrip span {
+    background: rgba(255, 255, 255, 0.08);
+    padding: 0.6rem 1rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
 }
 
-.commandmentsGrid {
+.heroCarousel {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
+    gap: 1rem;
     margin-bottom: 2rem;
 }
 
-.commandmentCard {
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
-    border: 2px solid rgba(0, 255, 255, 0.4);
-    border-radius: 12px;
-    padding: 2rem;
-    backdrop-filter: blur(10px);
-    cursor: pointer;
-    transition: all 0.3s ease;
-    position: relative;
-    overflow: hidden;
+.heroCarouselCard {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 14px;
+    padding: 1.15rem 1.4rem;
+    min-height: 96px;
+    animation: heroCarouselFade 0.4s ease;
 }
 
-.commandmentCard:hover {
-    border-color: rgba(0, 255, 255, 0.8);
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.15), rgba(0, 255, 255, 0.15));
-    transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.3);
+.heroCarouselIcon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
 }
 
-.commandmentCard::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: linear-gradient(90deg, #ff00ff, #00ffff);
-    opacity: 0;
-    transition: opacity 0.3s ease;
+.heroCarouselCopy {
+    margin: 0;
+    font-size: 1.05rem;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.88);
 }
 
-.commandmentCard:hover::before {
-    opacity: 1;
+.heroCarouselIndicators {
+    display: inline-flex;
+    gap: 0.5rem;
+    align-items: center;
 }
 
-.commandmentNumber {
-    font-size: 3rem;
-    font-weight: bold;
-    background: linear-gradient(45deg, #ff00ff, #00ffff);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-family: 'Courier New', monospace;
-    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.6));
-    margin-bottom: 1rem;
-    text-align: center;
+.heroCarouselIndicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 255, 255, 0.4);
+    background: transparent;
+    cursor: pointer;
+    padding: 0;
+    transition: background 0.2s ease, transform 0.2s ease;
 }
 
-.commandmentTitle {
-    font-size: 1.4rem;
-    font-weight: bold;
-    color: #00ffff;
-    margin-bottom: 1rem;
-    text-align: center;
+.heroCarouselIndicator:hover,
+.heroCarouselIndicator:focus {
+    transform: scale(1.1);
+    outline: none;
 }
 
-.commandmentDescription {
-    font-size: 1rem;
-    line-height: 1.6;
-    color: rgba(255, 255, 255, 0.9);
-    text-align: center;
+.heroCarouselIndicatorActive {
+    background: #00ffff;
+    border-color: #00ffff;
 }
 
-.commandmentCardFull {
-    grid-column: 1 / -1;
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.15), rgba(0, 255, 255, 0.15));
-    border: 2px solid rgba(0, 255, 255, 0.6);
+@keyframes heroCarouselFade {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-.commandmentCardFull .commandmentNumber {
-    font-size: 4rem;
-    margin-bottom: 1.5rem;
+.testimonialCard {
+    background: rgba(0, 0, 0, 0.5);
+    border-left: 3px solid #00ffff;
+    padding: 1.2rem 1.4rem;
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 0.95rem;
+    line-height: 1.6;
 }
 
-.commandmentCardFull .commandmentTitle {
-    font-size: 1.8rem;
-    margin-bottom: 1.5rem;
-}
-
-.commandmentCardFull .commandmentDescription {
-    font-size: 1.2rem;
-    max-width: 800px;
-    margin: 0 auto;
-}
-
-/* Remove old pyramid styles */
-.pyramidRow {
-    display: none;
-}
-
-.pyramidCard {
-    display: none;
-}
-
-.featuresSection {
-    text-align: center;
-}
-
-.featureCard {
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
-    border: 1px solid rgba(0, 255, 255, 0.3);
-    border-radius: 20px;
-    padding: 2rem;
-    height: 100%;
+.testimonialAuthor {
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-    margin-bottom: 2rem;
+    align-items: center;
+    gap: 0.6rem;
+    margin-top: 0.75rem;
+    font-weight: 600;
+    color: #00ffff;
 }
 
-.featureCard:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
-    border-color: rgba(0, 255, 255, 0.6);
+.heroFormCard {
+    background: rgba(0, 16, 40, 0.9);
+    border: 1px solid rgba(0, 255, 255, 0.35);
+    border-radius: 18px;
+    padding: 2.5rem 2.25rem;
+    box-shadow: 0 28px 48px rgba(0, 0, 0, 0.45);
+    position: relative;
 }
 
-.featureCard h3 {
-    color: #00ffff;
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
+.scarcityBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 0, 0.15);
+    border: 1px solid rgba(255, 255, 0, 0.4);
+    border-radius: 999px;
+    padding: 0.4rem 1rem;
+    font-size: 0.85rem;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 0.1em;
+    color: #ffff80;
+    margin-bottom: 1.25rem;
 }
 
-.featureCard p {
-    flex: 1;
-    margin-bottom: 1.5rem;
-    line-height: 1.6;
+.heroFormHeading {
+    text-align: center;
+    margin-bottom: 1.75rem;
 }
 
-.featureCardCTA {
-    display: inline-block;
-    padding: 0.8rem 1.5rem;
-    background: linear-gradient(45deg, #ff00ff, #00ffff);
-    color: #fff;
-    text-decoration: none;
-    border-radius: 25px;
-    font-weight: bold;
-    transition: all 0.3s ease;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    font-size: 0.9rem;
+.heroFormHeading h3 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.65rem;
+    color: #ffffff;
 }
 
-.featureCardCTA:hover {
-    background: linear-gradient(45deg, #00ffff, #ff00ff);
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(255, 0, 255, 0.3);
-    color: #fff;
+.heroFormHeading p {
+    margin: 0;
+    font-size: 0.98rem;
+    color: rgba(255, 255, 255, 0.75);
 }
 
-.macAppTeaserSection {
-    text-align: center;
+.formCountdown {
+    margin-top: 1.75rem;
 }
 
-.macAppIcon {
-    width: 100px;
-    height: 100px;
-    margin-bottom: 1rem;
-    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
+.formFooterNote {
+    margin-top: 1.5rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+    text-align: center;
 }
 
-/* Apps Page Specific Styles */
-.appIcon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
+.riskList {
+    list-style: none;
+    margin: 1.5rem 0 0;
+    padding: 0;
+    display: grid;
+    gap: 0.6rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.75);
+    text-align: left;
 }
 
-.appFeatures {
+.calendarButtons {
+    margin-top: 1.25rem;
     display: flex;
     flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 1.5rem;
+    gap: 0.75rem;
+    justify-content: center;
 }
 
-.appFeatures span {
-    background: rgba(0, 255, 255, 0.1);
-    color: #00ffff;
-    padding: 0.3rem 0.8rem;
-    border-radius: 15px;
-    font-size: 0.8rem;
+.calendarButton {
+    background: rgba(0, 255, 255, 0.15);
     border: 1px solid rgba(0, 255, 255, 0.3);
+    border-radius: 999px;
+    padding: 0.45rem 1.2rem;
+    font-size: 0.85rem;
+    color: #00ffff;
+    text-decoration: none;
+    transition: all 0.2s ease;
 }
 
-.comingSoonSection {
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(10, 0, 20, 0.8));
+.calendarButton:hover {
+    background: rgba(0, 255, 255, 0.25);
 }
 
-.comingSoonCard {
-    min-height: 200px;
-    margin-bottom: 2rem;
+.valueStackSection {
+    background: rgba(7, 14, 28, 0.95);
+    padding: 5rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.comingSoonIcon {
-    font-size: 2.5rem;
-    min-width: 4rem;
+.sectionTitle {
     text-align: center;
-    filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.5));
+    font-size: clamp(2rem, 4vw, 2.8rem);
+    margin-bottom: 1rem;
+    font-weight: 600;
+    background: linear-gradient(120deg, #ffffff, #00ffff 70%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
 }
 
-.stepCard {
+.sectionSubtitle {
     text-align: center;
-    min-height: 250px;
+    max-width: 620px;
+    margin: 0 auto 3rem auto;
+    font-size: 1.05rem;
+    color: rgba(255, 255, 255, 0.75);
 }
 
-.stepNumber {
-    font-size: 3rem;
-    font-weight: bold;
-    background: linear-gradient(45deg, #ff00ff, #00ffff);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 1rem;
-    font-family: 'Courier New', monospace;
+.valueStackGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
 }
 
-.ctaSection {
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.05), rgba(0, 255, 255, 0.05));
-    border-top: 1px solid rgba(0, 255, 255, 0.2);
-    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+.valueCard {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 16px;
+    padding: 1.6rem;
+    display: grid;
+    gap: 0.75rem;
 }
 
-/* Integration Section Styles */
-.integrationCard {
-    min-height: 180px;
-    margin-bottom: 2rem;
-    transition: all 0.3s ease;
+.valueCard strong {
+    font-size: 1rem;
+    color: #00ffff;
 }
 
-.integrationCard:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 15px 35px rgba(0, 255, 255, 0.15);
-    border-color: rgba(0, 255, 255, 0.6);
+.valueTotal {
+    margin-top: 2.5rem;
+    text-align: center;
+    font-size: 1.1rem;
+    color: #ffff80;
+    font-weight: 600;
 }
 
-.integrationIcon {
-    font-size: 2.5rem;
-    min-width: 4rem;
+.presenterSection {
+    background: rgba(0, 10, 24, 0.92);
+    padding: 4.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.presenterIntro {
     text-align: center;
-    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.4));
-    margin-bottom: 0.5rem;
+    margin-bottom: 2.5rem;
 }
 
-/* YouTube Video Styles */
-.videoCard {
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.08), rgba(0, 255, 255, 0.08));
-    border: 1px solid rgba(0, 255, 255, 0.4);
-    min-height: 500px;
+.presenterGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 1.75rem;
 }
 
-.videoCard:hover {
-    border-color: rgba(0, 255, 255, 0.8);
-    box-shadow: 0 25px 50px rgba(0, 255, 255, 0.15);
+.presenterCard {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 20px;
+    padding: 2rem;
+    display: grid;
+    gap: 1.25rem;
 }
 
-/* Subscription Banner Styles */
-.subscriptionBanner {
-    margin: 0 auto !important;
-    padding: 1.5rem 2rem !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: space-between !important;
-    flex-wrap: wrap !important;
-    gap: 1rem !important;
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.12), rgba(0, 255, 255, 0.12)) !important;
-    border: 1px solid rgba(0, 255, 255, 0.5) !important;
-    transition: all 0.3s ease;
+.presenterHeader {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
 }
 
-.subscriptionBanner:hover {
-    border-color: rgba(0, 255, 255, 0.8);
-    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.25);
-    transform: translateY(-2px);
+.presenterPhoto {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid rgba(0, 255, 255, 0.6);
 }
 
-.subscriptionBannerContent {
+.presenterPlaceholder {
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
     display: flex;
     align-items: center;
-    gap: 1rem;
-    flex: 1;
-    min-width: 300px;
+    justify-content: center;
+    background: rgba(0, 255, 255, 0.15);
+    color: #00ffff;
+    font-weight: 600;
+    letter-spacing: 1px;
 }
 
-.subscriptionBannerIcon {
-    font-size: 2rem !important;
-    margin: 0 !important;
-    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.6));
+.presenterTitle {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.95rem;
 }
 
-.subscriptionBannerText {
-    text-align: left !important;
-    margin: 0 !important;
+.presenterBio {
+    margin: 0;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.8);
 }
 
-.subscriptionBannerButton {
-    flex-shrink: 0;
+.presenterHighlight {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    padding: 0.85rem 1rem;
+    font-size: 0.9rem;
+    color: #ffffa6;
 }
 
-@media screen and (max-width: 768px) {
-    .subscriptionBanner {
-        flex-direction: column !important;
-        text-align: center !important;
-        gap: 1.5rem !important;
-    }
+.carouselSection {
+    background: rgba(0, 8, 18, 0.92);
+    padding: 4rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
 
-    .subscriptionBannerContent {
-        justify-content: center;
-        min-width: auto;
-        text-align: center;
-    }
+.carouselCard {
+    max-width: 720px;
+    margin: 0 auto;
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 24px;
+    padding: 3rem;
+    text-align: center;
+}
 
-    .subscriptionBannerText {
-        text-align: center !important;
-    }
+.carouselQuote {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.92);
+    margin-bottom: 1.5rem;
 }
 
-/* Pricing Section Styles */
-.pricingSection {
-    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(10, 0, 20, 0.8));
+.carouselAuthor {
+    font-size: 0.95rem;
+    color: rgba(0, 255, 255, 0.8);
+    margin-bottom: 1.5rem;
 }
 
-.pricingCard {
-    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
-    border: 1px solid rgba(0, 255, 255, 0.3);
-    border-radius: 16px;
-    text-align: center;
-    min-height: 500px;
-    height: 100%;
+.carouselDots {
     display: flex;
-    flex-direction: column;
-    position: relative;
-    transition: all 0.3s ease;
-    padding: 2rem;
-    margin-bottom: 2rem;
+    justify-content: center;
+    gap: 0.5rem;
 }
 
-.pricingCard:hover {
-    border-color: rgba(0, 255, 255, 0.6);
-    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
-    transform: translateY(-5px);
+.carouselDot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid rgba(0, 255, 255, 0.4);
+    background: transparent;
+    cursor: pointer;
+    transition: background 0.2s ease;
 }
 
-.pricingCardHighlighted {
-    border: 2px solid #00ffff;
-    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 0, 255, 0.15));
-    transform: scale(1.08) translateY(-10px);
-    box-shadow: 0 25px 50px rgba(0, 255, 255, 0.3);
-    z-index: 2;
+.carouselDotActive {
+    background: #00ffff;
 }
 
-.pricingCardHighlighted:hover {
-    transform: scale(1.08) translateY(-15px);
-    box-shadow: 0 30px 60px rgba(0, 255, 255, 0.4);
+.videoSection {
+    background: rgba(0, 12, 26, 0.95);
+    padding: 4rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
-.pricingIcon {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
+.videoWrapper {
+    max-width: 820px;
+    margin: 0 auto;
+    text-align: center;
 }
 
-.pricingHighlight {
-    background: linear-gradient(45deg, #ff00ff, #00ffff);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin: 1rem 0;
+.videoFrame {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%;
+    border-radius: 18px;
+    overflow: hidden;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+.videoFrame iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.videoCaption {
+    margin-top: 1rem;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.toolkitSection {
+    background: rgba(6, 14, 30, 0.95);
+    padding: 4.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.toolkitGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.toolkitCard {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 18px;
+    padding: 2rem 1.75rem;
+    display: grid;
+    gap: 0.75rem;
+}
+
+.toolkitCard h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    color: #00ffff;
+}
+
+.toolkitCard p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+.toolkitIcon {
+    font-size: 1.8rem;
+}
+
+.roadmapSection {
+    background: rgba(2, 10, 24, 0.92);
+    padding: 4.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.roadmapGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.roadmapCard {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 18px;
+    padding: 1.75rem;
+}
+
+.roadmapHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 1rem;
+}
+
+.roadmapPhase {
+    font-weight: 600;
+    color: #00ffff;
     text-transform: uppercase;
-    letter-spacing: 1px;
+    letter-spacing: 0.08em;
 }
 
-.pricingCallout {
-    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.1));
-    border: 2px solid rgba(0, 255, 255, 0.3);
-    border-radius: 16px;
-    padding: 2rem;
+.roadmapDuration {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.roadmapCard ul {
+    margin: 0;
+    padding-left: 1.1rem;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.95rem;
+    display: grid;
+    gap: 0.5rem;
+}
+
+.bonusSection {
+    background: rgba(10, 24, 38, 0.95);
+    padding: 3.5rem 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.bonusCard {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 0, 0.08);
+    border: 1px solid rgba(255, 255, 0, 0.35);
+    border-radius: 18px;
+    padding: 2.5rem 2rem;
+}
+
+.bonusCard h2 {
+    margin: 0.5rem 0 0.75rem;
+    color: #ffff80;
+}
+
+.bonusCard p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.bonusCard ul {
+    margin: 0;
+    padding-left: 1.2rem;
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.95rem;
+    display: grid;
+    gap: 0.65rem;
+}
+
+.bonusBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.8rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: #1a1a05;
+    background: #ffff80;
+    border-radius: 999px;
+    padding: 0.4rem 1rem;
+}
+
+.testimonialGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 1.5rem;
+}
+
+.miniStat {
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 14px;
+    padding: 2rem 1.5rem;
+    text-align: center;
+}
+
+.miniStatValue {
+    font-size: 2.25rem;
+    font-weight: 700;
+    color: #00ffff;
+}
+
+.miniStatLabel {
+    margin-top: 0.5rem;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.65);
+}
+
+.faqGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.faqCard {
+    background: rgba(0, 0, 0, 0.45);
+    border-radius: 12px;
+    padding: 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.faqCard h4 {
+    color: #00ffff;
+    margin-bottom: 0.75rem;
+}
+
+.finalCtaCard {
+    background: rgba(0, 20, 50, 0.9);
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    padding: 3.5rem 3rem;
+    border-radius: 20px;
+    text-align: center;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+}
+
+.finalCtaHeadline {
+    font-size: 2.1rem;
+    margin-bottom: 1rem;
+    color: #00ffff;
+}
+
+.finalCtaCopy {
+    font-size: 1.1rem;
+    color: rgba(255, 255, 255, 0.8);
     margin-bottom: 2rem;
-    min-height: 500px;
+}
+
+.finalCtaFooter {
+    margin-top: 1.5rem;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.65);
+}
+
+.countdownContainer {
+    /* existing styles extended via inline overrides */
+}
+
+.countdownUnit {
+    text-align: center;
+}
+
+.stickyCtaBar {
+    position: fixed;
+    left: 1rem;
+    right: 1rem;
+    bottom: 1rem;
+    background: rgba(0, 18, 36, 0.95);
+    border: 1px solid rgba(0, 255, 255, 0.35);
+    border-radius: 16px;
+    padding: 1rem 1.25rem;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1.25rem;
+    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
+    transform: translateY(140%);
+    transition: transform 0.35s ease;
+    z-index: 999;
+    backdrop-filter: blur(12px);
 }
 
-@media screen and (max-width: 1200px) {
-    .heroContent {
-        max-width: 700px;
-    }
+.stickyCtaBarVisible {
+    transform: translateY(0);
 }
 
-@media screen and (max-width: 996px) {
-    .heroContent {
-        max-width: 90%;
-        padding: 1.5rem;
-    }
+.stickyCtaButton {
+    background: linear-gradient(120deg, #00ffff, #00cccc);
+    color: #001020;
+    border: none;
+    border-radius: 999px;
+    padding: 0.85rem 1.8rem;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    box-shadow: 0 12px 30px rgba(0, 255, 255, 0.35);
+    transition: transform 0.2s ease;
+}
 
-    .heroTitle {
-        font-size: 2rem;
-    }
+.stickyCtaButton:hover {
+    transform: translateY(-1px);
+}
 
-    .heroSubtitle {
-        font-size: 1.2rem;
-    }
+.desktopStickyHeader {
+    position: fixed;
+    top: 0.75rem;
+    left: 0;
+    right: 0;
+    display: none;
+    justify-content: center;
+    transform: translateY(-150%);
+    transition: transform 0.35s ease;
+    z-index: 998;
+}
 
-    .heroCTAs {
-        gap: 1rem;
-    }
+.desktopStickyHeaderVisible {
+    transform: translateY(0);
+}
 
-    .ctaPrimary {
-        padding: 1rem 2rem;
-        font-size: 1.1rem;
-    }
+.desktopStickyInner {
+    background: rgba(0, 18, 36, 0.95);
+    border: 1px solid rgba(0, 255, 255, 0.35);
+    border-radius: 999px;
+    padding: 0.6rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1.75rem;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+}
 
-    .secondaryLinks {
-        flex-direction: column;
-        gap: 1rem;
-    }
+.desktopStickyInner span {
+    color: rgba(255, 255, 255, 0.85);
+    font-size: 0.95rem;
+}
 
-    .commandments {
+@media (max-width: 996px) {
+    .heroGrid {
         grid-template-columns: 1fr;
     }
 
-    .commandmentsGrid {
-        grid-template-columns: 1fr !important;
+    .heroCarousel {
+        margin: 0 auto 2rem;
     }
 
-    .commandment {
-        flex-direction: column;
+    .heroProofGrid {
+        grid-template-columns: 1fr;
         text-align: center;
     }
 
-    .commandmentNumber {
-        align-self: center;
-    }
-
-    .beliefsSection h2 {
-        font-size: 2rem;
+    .logoStrip {
+        justify-content: center;
     }
 
-    /* Pyramid Responsive Adjustments */
-    .pyramidContainer {
-        padding: 1rem 0;
+    .heroFormCard {
+        padding: 2rem 1.75rem;
     }
 
-    .pyramidCard {
-        height: 60px;
+    .valueStackGrid {
+        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     }
 
-    .pyramidCard .commandmentNumber {
-        font-size: 2rem;
+    .presenterGrid {
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     }
 
-    .pyramidTop,
-    .pyramidLeft,
-    .pyramidRight,
-    .pyramidCenter {
-        width: 100px;
+    .carouselCard {
+        padding: 2.25rem 1.75rem;
     }
 
-    .pyramidBase {
-        width: 280px;
+    .desktopStickyHeader {
+        display: none;
     }
+}
 
-    .pyramidFlyout {
-        min-width: 280px;
-        max-width: 300px;
-        padding: 1rem;
+@media (max-width: 600px) {
+    .landingHero {
+        padding: 4.5rem 0 3rem;
     }
 
-    .flyoutTitle strong {
-        font-size: 1rem;
+    .heroEyebrow {
+        margin: 0 auto 1.25rem;
     }
 
-    .flyoutContent {
-        font-size: 0.85rem;
+    .heroCarouselCard {
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
     }
 
-    /* Feature Cards Mobile Responsiveness */
-    .featuresSection .row .col {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
-        width: 100% !important;
+    .heroCarouselCopy {
+        text-align: center;
+        font-size: 1rem;
     }
 
-    .featuresSection .row .col.col--6 {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
-        width: 100% !important;
+    .heroFormCard {
+        padding: 1.75rem 1.4rem;
     }
 
-    /* Also target pricing section and any other grids */
-    .pricingSection .row .col {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
-        width: 100% !important;
+    .testimonialCard {
+        font-size: 0.9rem;
     }
 
-    .pricingSection .row .col.col--4,
-    .pricingSection .row .col.col--6 {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
-        width: 100% !important;
+    .riskList {
+        text-align: center;
     }
 
-    /* Global override for any section with cards */
-    .container .row .col {
-        flex: 0 0 100% !important;
-        max-width: 100% !important;
-        width: 100% !important;
+    .calendarButtons {
+        justify-content: center;
     }
+}
 
-    .featureCard {
-        margin-bottom: 1.5rem;
-        padding: 1.5rem;
+@media (min-width: 996px) {
+    .stickyCtaBar {
+        display: none;
     }
 
-    .featureCard h3 {
-        font-size: 1.3rem;
+    .desktopStickyHeader {
+        display: flex;
     }
+}
 
-    .featureCard p {
-        font-size: 0.9rem;
-        line-height: 1.4;
+.heroSubtitle {
+    font-size: 1.5rem;
+    text-align: center;
+    padding-top: 1rem;
+    width: 100%;
+    position: relative;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.heroLogo {
+    margin: auto 0;
+}
+
+.heroCTAs {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    margin-top: 2rem;
+    width: 100%;
+}
+
+.ctaButton {
+    display: inline-block;
+    padding: 1rem 2rem;
+    font-size: 1.2rem;
+    font-weight: bold;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    border: 2px solid;
+}
+
+.ctaPrimary {
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    color: #fff;
+    border-radius: 50px;
+    padding: 1.2rem 3rem;
+    font-size: 1.3rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
+    border: none;
+}
+
+.ctaPrimary:hover {
+    background: linear-gradient(45deg, #00ffff, #ff00ff);
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
+    transform: translateY(-2px);
+    color: #fff;
+}
+
+.secondaryLinks {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    justify-content: center;
+}
+
+.secondaryLink {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+}
+
+.secondaryLink:hover {
+    color: #00ffff;
+    background: rgba(0, 255, 255, 0.1);
+    transform: translateY(-1px);
+}
+
+.chromeIcon {
+    width: 16px;
+    height: 16px;
+}
+
+.ctaDevelopers {
+    background-color: #00ffff;
+    color: #000;
+}
+
+.ctaDevelopers:hover {
+    background-color: transparent;
+    color: #00ffff;
+}
+
+.ctaAlpha {
+    background-color: #ff00ff;
+    color: #fff;
+    border-color: #ff00ff;
+}
+
+.ctaAlpha:hover {
+    background-color: transparent;
+    color: #ff00ff;
+}
+
+.ctaChromeExtension {
+    background-color: #00ff00;
+    color: #000;
+    border-color: #00ff00;
+}
+
+.ctaChromeExtension:hover {
+    background-color: transparent;
+    color: #00ff00;
+}
+
+.missionSection,
+.featuresSection,
+.macAppTeaserSection,
+.pricingSection {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #fff;
+    padding: 4rem 2rem;
+}
+
+.missionSection h2,
+.featuresSection h2,
+.macAppTeaserSection h2,
+.pricingSection h2 {
+    color: #00ffff;
+    margin-bottom: 2rem;
+}
+
+.sectionEyebrow {
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    font-size: 0.8rem;
+    color: rgba(0, 255, 255, 0.8);
+    margin-bottom: 0.75rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.sectionHeading {
+    margin: 0;
+    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
+    color: #ffffff;
+}
+
+.sectionLead {
+    margin: 1rem 0 2.5rem;
+    font-size: 1.05rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.confirmationSection {
+    background: rgba(0, 12, 28, 0.92);
+}
+
+.confirmationCard {
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 20px;
+    padding: 2.75rem;
+    display: grid;
+    gap: 2rem;
+}
+
+.confirmationGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.25rem;
+}
+
+.confirmationItem {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 16px;
+    padding: 1.2rem 1.1rem;
+    display: grid;
+    gap: 0.6rem;
+}
+
+.confirmationItem h3 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.confirmationIcon {
+    font-size: 1.5rem;
+}
+
+.confirmationCopy {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.95rem;
+}
+
+.confirmationProTip {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    background: rgba(255, 255, 0, 0.08);
+    border: 1px solid rgba(255, 255, 0, 0.35);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.confirmationProTipIcon {
+    font-size: 1.2rem;
+    line-height: 1.2;
+}
+
+.videoContainer {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio */
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
+}
+
+.youtubeVideo {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+.beliefsSection {
+    margin-top: 4rem;
+    text-align: center;
+}
+
+.beliefsSection h2 {
+    font-size: 2.5rem;
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 3rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.commandments {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+/* Commandments Grid Layout */
+.pyramidContainer {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 2rem 0;
+}
+
+.commandmentsGrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+.commandmentCard {
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
+    border: 2px solid rgba(0, 255, 255, 0.4);
+    border-radius: 12px;
+    padding: 2rem;
+    backdrop-filter: blur(10px);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.commandmentCard:hover {
+    border-color: rgba(0, 255, 255, 0.8);
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.15), rgba(0, 255, 255, 0.15));
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.3);
+}
+
+.commandmentCard::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, #ff00ff, #00ffff);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.commandmentCard:hover::before {
+    opacity: 1;
+}
+
+.commandmentNumber {
+    font-size: 3rem;
+    font-weight: bold;
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: 'Courier New', monospace;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.6));
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.commandmentTitle {
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: #00ffff;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+.commandmentDescription {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.9);
+    text-align: center;
+}
+
+.commandmentCardFull {
+    grid-column: 1 / -1;
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.15), rgba(0, 255, 255, 0.15));
+    border: 2px solid rgba(0, 255, 255, 0.6);
+}
+
+.commandmentCardFull .commandmentNumber {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+}
+
+.commandmentCardFull .commandmentTitle {
+    font-size: 1.8rem;
+    margin-bottom: 1.5rem;
+}
+
+.commandmentCardFull .commandmentDescription {
+    font-size: 1.2rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+/* Remove old pyramid styles */
+.pyramidRow {
+    display: none;
+}
+
+.pyramidCard {
+    display: none;
+}
+
+.featuresSection {
+    text-align: center;
+}
+
+.featureCard {
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    border-radius: 20px;
+    padding: 2rem;
+    /* Remove forced stretching that can create oversized panels */
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(10px);
+    margin-bottom: 2rem;
+}
+
+.featureCard:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
+    border-color: rgba(0, 255, 255, 0.6);
+}
+
+.featureCard h3 {
+    color: #00ffff;
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.featureCard p {
+    flex: 1;
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+}
+
+.featureCardCTA {
+    display: inline-block;
+    padding: 0.8rem 1.5rem;
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    color: #fff;
+    text-decoration: none;
+    border-radius: 25px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.9rem;
+}
+
+.featureCardCTA:hover {
+    background: linear-gradient(45deg, #00ffff, #ff00ff);
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(255, 0, 255, 0.3);
+    color: #fff;
+}
+
+.macAppTeaserSection {
+    text-align: center;
+}
+
+.macAppIcon {
+    width: 100px;
+    height: 100px;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
+}
+
+/* Apps Page Specific Styles */
+.appIcon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
+}
+
+.appFeatures {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.appFeatures span {
+    background: rgba(0, 255, 255, 0.1);
+    color: #00ffff;
+    padding: 0.3rem 0.8rem;
+    border-radius: 15px;
+    font-size: 0.8rem;
+    border: 1px solid rgba(0, 255, 255, 0.3);
+}
+
+.comingSoonSection {
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(10, 0, 20, 0.8));
+}
+
+.comingSoonCard {
+    min-height: 200px;
+    margin-bottom: 2rem;
+}
+
+.comingSoonIcon {
+    font-size: 2.5rem;
+    min-width: 4rem;
+    text-align: center;
+    filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.5));
+}
+
+.expectationVoiceNote {
+    margin: 3rem auto 0;
+    max-width: 680px;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 14px;
+    padding: 0.9rem 1.2rem;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.95rem;
+}
+
+.bonusGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+}
+
+.bonusCard {
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 16px;
+    padding: 1.75rem 1.5rem;
+    display: grid;
+    gap: 0.75rem;
+}
+
+.bonusIcon {
+    font-size: 1.6rem;
+}
+
+.bonusMeta {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.65);
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 12px;
+    padding: 0.4rem 0.75rem;
+    display: inline-block;
+}
+
+.bonusVoiceBand {
+    margin-top: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+    justify-content: space-between;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 14px;
+    padding: 1.1rem 1.4rem;
+    font-size: 0.95rem;
+}
+
+.stepCard {
+    text-align: center;
+    /* Keep cards compact to avoid giant vertical gaps */
+    min-height: 140px;
+}
+
+.stepNumber {
+    font-size: 3rem;
+    font-weight: bold;
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 1rem;
+    font-family: 'Courier New', monospace;
+}
+
+.ctaSection {
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.05), rgba(0, 255, 255, 0.05));
+    border-top: 1px solid rgba(0, 255, 255, 0.2);
+    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
+}
+
+/* Integration Section Styles */
+.integrationCard {
+    min-height: 180px;
+    margin-bottom: 2rem;
+    transition: all 0.3s ease;
+}
+
+.integrationCard:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 35px rgba(0, 255, 255, 0.15);
+    border-color: rgba(0, 255, 255, 0.6);
+}
+
+.integrationIcon {
+    font-size: 2.5rem;
+    min-width: 4rem;
+    text-align: center;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.4));
+    margin-bottom: 0.5rem;
+}
+
+/* YouTube Video Styles */
+.videoCard {
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.08), rgba(0, 255, 255, 0.08));
+    border: 1px solid rgba(0, 255, 255, 0.4);
+    min-height: 500px;
+}
+
+.videoCard:hover {
+    border-color: rgba(0, 255, 255, 0.8);
+    box-shadow: 0 25px 50px rgba(0, 255, 255, 0.15);
+}
+
+/* Subscription Banner Styles */
+.subscriptionBanner {
+    margin: 0 auto !important;
+    padding: 1.5rem 2rem !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    flex-wrap: wrap !important;
+    gap: 1rem !important;
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.12), rgba(0, 255, 255, 0.12)) !important;
+    border: 1px solid rgba(0, 255, 255, 0.5) !important;
+    transition: all 0.3s ease;
+}
+
+.subscriptionBanner:hover {
+    border-color: rgba(0, 255, 255, 0.8);
+    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.25);
+    transform: translateY(-2px);
+}
+
+.subscriptionBannerContent {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1;
+    min-width: 300px;
+}
+
+.subscriptionBannerIcon {
+    font-size: 2rem !important;
+    margin: 0 !important;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.6));
+}
+
+.subscriptionBannerText {
+    text-align: left !important;
+    margin: 0 !important;
+}
+
+.subscriptionBannerButton {
+    flex-shrink: 0;
+}
+
+@media screen and (max-width: 768px) {
+    .subscriptionBanner {
+        flex-direction: column !important;
+        text-align: center !important;
+        gap: 1.5rem !important;
+    }
+
+    .subscriptionBannerContent {
+        justify-content: center;
+        min-width: auto;
+        text-align: center;
+    }
+
+    .subscriptionBannerText {
+        text-align: center !important;
+    }
+}
+
+/* Pricing Section Styles */
+.pricingSection {
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(10, 0, 20, 0.8));
+}
+
+.pricingCard {
+    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(0, 255, 255, 0.1));
+    border: 1px solid rgba(0, 255, 255, 0.3);
+    border-radius: 16px;
+    text-align: center;
+    min-height: 500px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    transition: all 0.3s ease;
+    padding: 2rem;
+    margin-bottom: 2rem;
+}
+
+.pricingCard:hover {
+    border-color: rgba(0, 255, 255, 0.6);
+    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
+    transform: translateY(-5px);
+}
+
+.pricingCardHighlighted {
+    border: 2px solid #00ffff;
+    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(255, 0, 255, 0.15));
+    transform: scale(1.08) translateY(-10px);
+    box-shadow: 0 25px 50px rgba(0, 255, 255, 0.3);
+    z-index: 2;
+}
+
+.pricingCardHighlighted:hover {
+    transform: scale(1.08) translateY(-15px);
+    box-shadow: 0 30px 60px rgba(0, 255, 255, 0.4);
+}
+
+.pricingIcon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
+}
+
+.pricingHighlight {
+    background: linear-gradient(45deg, #ff00ff, #00ffff);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin: 1rem 0;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.pricingCallout {
+    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.1));
+    border: 2px solid rgba(0, 255, 255, 0.3);
+    border-radius: 16px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    min-height: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+@media screen and (max-width: 1200px) {
+    .heroContent {
+        max-width: 700px;
+    }
+}
+
+@media screen and (max-width: 996px) {
+    .heroContent {
+        max-width: 90%;
+        padding: 1.5rem;
+    }
+
+    .heroTitle {
+        font-size: 2rem;
+    }
+
+    .heroSubtitle {
+        font-size: 1.2rem;
+    }
+
+    .heroCTAs {
+        gap: 1rem;
+    }
+
+    .ctaPrimary {
+        padding: 1rem 2rem;
+        font-size: 1.1rem;
+    }
+
+    .secondaryLinks {
+        flex-direction: column;
+        gap: 1rem;
+    }
+
+    .commandments {
+        grid-template-columns: 1fr;
+    }
+
+    .commandmentsGrid {
+        grid-template-columns: 1fr !important;
+    }
+
+    .commandment {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .commandmentNumber {
+        align-self: center;
+    }
+
+    .beliefsSection h2 {
+        font-size: 2rem;
+    }
+
+    /* Pyramid Responsive Adjustments */
+    .pyramidContainer {
+        padding: 1rem 0;
+    }
+
+    .pyramidCard {
+        height: 60px;
+    }
+
+    .pyramidCard .commandmentNumber {
+        font-size: 2rem;
+    }
+
+    .pyramidTop,
+    .pyramidLeft,
+    .pyramidRight,
+    .pyramidCenter {
+        width: 100px;
+    }
+
+    .pyramidBase {
+        width: 280px;
+    }
+
+    .pyramidFlyout {
+        min-width: 280px;
+        max-width: 300px;
+        padding: 1rem;
+    }
+
+    .flyoutTitle strong {
+        font-size: 1rem;
+    }
+
+    .flyoutContent {
+        font-size: 0.85rem;
+    }
+
+    /* Feature Cards Mobile Responsiveness */
+    .featuresSection .row .col {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    .featuresSection .row .col.col--6 {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    /* Also target pricing section and any other grids */
+    .pricingSection .row .col {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    .pricingSection .row .col.col--4,
+    .pricingSection .row .col.col--6 {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    /* Global override for any section with cards */
+    .container .row .col {
+        flex: 0 0 100% !important;
+        max-width: 100% !important;
+        width: 100% !important;
+    }
+
+    .featureCard {
+        margin-bottom: 1.5rem;
+        padding: 1.5rem;
+    }
+
+    .featureCard h3 {
+        font-size: 1.3rem;
+    }
+
+    .featureCard p {
+        font-size: 0.9rem;
+        line-height: 1.4;
+    }
+
+    .featureCardCTA {
+        font-size: 0.9rem;
+        padding: 0.6rem 1.2rem;
+    }
+
+    /* Pricing Cards Mobile */
+    .pricingCard {
+        margin-bottom: 1.5rem;
+        min-height: auto;
+        padding: 1.5rem;
+    }
+
+    .pricingCardHighlighted {
+        transform: none;
+        margin-bottom: 1.5rem;
+    }
+
+    .pricingCardHighlighted:hover {
+        transform: translateY(-5px);
     }
+}
+
+.legalFooter {
+    background: rgba(0, 0, 0, 0.85);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    padding: 1.5rem 0;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.55);
+    font-size: 0.85rem;
+}
+
+.legalLinks {
+    display: flex;
+    justify-content: center;
+    gap: 0.75rem;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-top: 0.35rem;
+}
+
+.legalFooter a {
+    color: rgba(0, 255, 255, 0.8);
+    text-decoration: none;
+}
+
+.legalFooter a:hover {
+    text-decoration: underline;
+}
+
+.videoSection {
+    background: rgba(4, 12, 26, 0.95);
+    padding: 4rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.videoCard {
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 20px;
+    padding: 2.5rem;
+    display: grid;
+    gap: 1.75rem;
+}
+
+.videoHeader h2 {
+    margin: 0.75rem 0;
+    font-size: clamp(1.8rem, 3vw, 2.2rem);
+    color: #ffffff;
+}
+
+.videoHeader p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.videoTakeaways {
+    list-style: none;
+    margin: 1.25rem 0 0;
+    padding: 0;
+    display: grid;
+    gap: 0.6rem;
+    color: rgba(255, 255, 255, 0.78);
+    font-size: 0.95rem;
+}
+
+.videoEmbed {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%;
+    border-radius: 16px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.videoEmbed iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.videoPlaceholder {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px dashed rgba(0, 255, 255, 0.4);
+    border-radius: 16px;
+    padding: 1.5rem;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.videoCaption {
+    margin: 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.videoResources {
+    margin-top: 1.75rem;
+    display: grid;
+    gap: 1.5rem;
+}
+
+.videoFootnote {
+    margin: 0;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+    text-align: center;
+}
+
+.progressiveSection {
+    background: rgba(6, 16, 30, 0.9);
+    padding: 4rem 0;
+}
 
-    .featureCardCTA {
-        font-size: 0.9rem;
-        padding: 0.6rem 1.2rem;
-    }
+.progressiveCard {
+    background: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 18px;
+    padding: 2.75rem;
+}
 
-    /* Pricing Cards Mobile */
-    .pricingCard {
-        margin-bottom: 1.5rem;
-        min-height: auto;
-        padding: 1.5rem;
-    }
+.progressiveCard h2 {
+    margin: 0.5rem 0 1rem;
+    color: #00ffff;
+}
 
-    .pricingCardHighlighted {
-        transform: none;
-        margin-bottom: 1.5rem;
-    }
+.progressiveCard p {
+    margin-bottom: 2rem;
+    color: rgba(255, 255, 255, 0.75);
+}
 
-    .pricingCardHighlighted:hover {
-        transform: translateY(-5px);
-    }
+.progressiveForm {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.progressiveChoice {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2.25rem;
+}
+
+.progressiveChoiceColumn {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 14px;
+    padding: 1.25rem 1.4rem;
+    display: grid;
+    gap: 0.75rem;
+}
+
+.progressiveChoiceColumn h3 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.progressiveVoiceColumn {
+    background: rgba(0, 255, 255, 0.12);
+    border-color: rgba(0, 255, 255, 0.4);
+}
+
+.progressiveChoiceCopy {
+    margin: 0;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.progressiveVoiceButtonWrap {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.progressiveVoiceButton {
+    padding: 0.75rem 1.4rem;
+    border-radius: 999px;
+    border: 1px solid rgba(0, 255, 255, 0.55);
+    color: #00ffff;
+    background: transparent;
+    font-weight: 600;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.progressiveVoiceButton:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 24px rgba(0, 255, 255, 0.25);
+}
+
+.progressiveProof {
+    margin-top: 1.75rem;
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+    background: rgba(255, 255, 255, 0.06);
+    border-radius: 12px;
+    padding: 1rem 1.25rem;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.customerLogoSection {
+    background: rgba(5, 15, 30, 0.95);
+    padding: 4rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.customerLogoGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2.5rem;
+}
+
+.customerLogoCard {
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 16px;
+    padding: 1.75rem;
+    display: grid;
+    gap: 0.6rem;
+}
+
+.customerLogoInitials {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(0, 255, 255, 0.6), rgba(0, 136, 255, 0.6));
+    color: #001828;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+}
+
+.customerLogoName {
+    font-weight: 600;
+    color: #ffffff;
+}
+
+.customerLogoHighlight {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.65);
+}
+
+.customerLogoMetric {
+    font-size: 0.9rem;
+    color: #00ffff;
+    font-weight: 600;
+}
+
+.formGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.25rem;
+}
+
+.formField {
+    display: grid;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.formField input,
+.formField textarea {
+    width: 100%;
+    padding: 0.9rem 1rem;
+    border-radius: 10px;
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    background: rgba(0, 0, 0, 0.45);
+    color: #ffffff;
+    font-size: 1rem;
+    transition: border 0.2s ease, background 0.2s ease;
+}
+
+.formField input:focus,
+.formField textarea:focus {
+    border-color: #00ffff;
+    outline: none;
+    background: rgba(0, 255, 255, 0.08);
+}
+
+.formFieldFull {
+    grid-column: 1 / -1;
+}
+
+.formCheckbox {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    font-size: 0.95rem;
+}
+
+.formCheckbox input {
+    width: auto;
+    margin-top: 0.2rem;
+}
+
+.formError {
+    background: rgba(255, 68, 68, 0.12);
+    border: 1px solid rgba(255, 68, 68, 0.6);
+    border-radius: 10px;
+    padding: 0.75rem 1rem;
+    color: #ff9b9b;
+    font-size: 0.9rem;
+}
+
+.formSuccess {
+    background: rgba(0, 255, 123, 0.12);
+    border: 1px solid rgba(0, 255, 123, 0.4);
+    border-radius: 10px;
+    padding: 0.75rem 1rem;
+    color: #80ffbf;
+    font-size: 0.9rem;
+}
+
+.formSubmit {
+    justify-self: flex-start;
+    padding: 0.95rem 2.5rem;
+    border-radius: 999px;
+    border: none;
+    background: linear-gradient(120deg, #00ffff, #00b7ff);
+    color: #001828;
+    font-weight: 600;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.formSubmit:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.formSubmit:not(:disabled):hover {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 32px rgba(0, 255, 255, 0.25);
+}
+
+.fitCallSection {
+    background: rgba(3, 8, 18, 0.95);
+    padding: 4rem 0;
+}
+
+.fitCallGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2.5rem;
+    align-items: stretch;
+}
+
+.fitCallContent {
+    background: linear-gradient(135deg, rgba(10, 40, 60, 0.85), rgba(0, 0, 0, 0.7));
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 20px;
+    padding: 3rem;
+    display: grid;
+    gap: 1.4rem;
+}
+
+.fitCallScarcity {
+    margin: 0;
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.fitCallVoicePanel {
+    display: flex;
+    align-items: stretch;
+}
+
+.fitCallVoiceCard {
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 20px;
+    padding: 2.2rem;
+    display: grid;
+    gap: 1rem;
+    width: 100%;
+}
+
+.fitCallVoiceCard h3 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.fitCallVoiceCard p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.fitCallVoiceHint {
+    margin: 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.65);
+}
+
+.fitCallCard {
+    background: linear-gradient(135deg, rgba(10, 40, 60, 0.85), rgba(0, 0, 0, 0.7));
+    border: 1px solid rgba(0, 255, 255, 0.18);
+    border-radius: 20px;
+    padding: 3rem;
+    display: grid;
+    gap: 1.5rem;
+}
+
+.midCtaSection {
+    background: rgba(0, 10, 25, 0.9);
+    padding: 4rem 0;
+}
+
+.midCtaCard {
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.25);
+    border-radius: 20px;
+    padding: 3rem;
+    display: grid;
+    gap: 2rem;
+}
+
+.midCtaCopy h2 {
+    margin: 0 0 0.75rem;
+    color: #ffffff;
+}
+
+.midCtaCopy p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.midCtaForm {
+    max-width: 520px;
+    margin: 0 auto;
+}
+
+.fitCallCard h2 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.fitCallCard p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.fitCallList {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: 0.6rem;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.fitCallButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.95rem 2.2rem;
+    border-radius: 999px;
+    background: #00ffff;
+    color: #001828;
+    font-weight: 600;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.fitCallButton:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 14px 36px rgba(0, 255, 255, 0.3);
+}
+
+.shareActions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.shareSnippetsGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.25rem;
+    margin-bottom: 2rem;
+}
+
+.shareSnippet {
+    display: grid;
+    gap: 0.75rem;
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 16px;
+    padding: 1.2rem;
+}
+
+.shareSnippetLabel {
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.shareSnippet textarea {
+    width: 100%;
+    min-height: 140px;
+    resize: none;
+    padding: 1rem;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    background: rgba(0, 0, 0, 0.45);
+    color: rgba(255, 255, 255, 0.8);
+    font-family: inherit;
+    font-size: 0.9rem;
+}
+
+.copyButton {
+    justify-self: center;
+    padding: 0.65rem 1.8rem;
+    border-radius: 999px;
+    border: 1px solid rgba(0, 255, 255, 0.4);
+    background: rgba(0, 255, 255, 0.12);
+    color: #00ffff;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.copyButton:hover {
+    background: rgba(0, 255, 255, 0.2);
+}
+
+.copyButton:active {
+    transform: translateY(1px);
+}
+
+.finalAssuranceSection {
+    background: rgba(0, 0, 0, 0.9);
+    padding: 4rem 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.finalAssuranceCard {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 2.5rem;
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(0, 255, 255, 0.2);
+    border-radius: 22px;
+    padding: 3rem;
+}
+
+.finalAssuranceCopy {
+    display: grid;
+    gap: 1.5rem;
+}
+
+.finalAssuranceCopy h2 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.finalAssuranceCopy p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+.finalAssuranceList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: grid;
+    gap: 0.6rem;
+    color: rgba(255, 255, 255, 0.75);
+    font-size: 0.95rem;
+}
+
+.finalAssuranceFaqs {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.finalAssuranceFaqs h3 {
+    margin: 0 0 0.4rem 0;
+    color: #00ffff;
+}
+
+.finalAssuranceFaqs p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.finalAssuranceAction {
+    display: flex;
+    align-items: stretch;
+}
+
+.finalAssuranceWidget {
+    background: rgba(0, 255, 255, 0.08);
+    border: 1px solid rgba(0, 255, 255, 0.35);
+    border-radius: 18px;
+    padding: 2rem;
+    display: grid;
+    gap: 1rem;
+    width: 100%;
+    text-align: center;
+}
+
+.finalAssuranceWidget h3 {
+    margin: 0;
+    color: #ffffff;
+}
+
+.finalAssuranceWidget p {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.78);
+}
+
+.finalAssuranceButton {
+    padding: 0.9rem 1.8rem;
+    border-radius: 999px;
+    background: #00ffff;
+    color: #001828;
+    font-weight: 600;
+    border: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.finalAssuranceButton:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 12px 32px rgba(0, 255, 255, 0.3);
+}
+
+.finalAssuranceCaption {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.65);
 }
 
 .animatedIntegrationsWrapper {
diff --git a/packages/docs/src/pages/webinar-enterprise-ai.tsx b/packages/docs/src/pages/webinar-enterprise-ai.tsx
new file mode 100644
index 00000000000..748e64fc50b
--- /dev/null
+++ b/packages/docs/src/pages/webinar-enterprise-ai.tsx
@@ -0,0 +1,1037 @@
+import { useEffect, useState } from 'react'
+import clsx from 'clsx'
+import Layout from '@theme/Layout'
+import LazyThreeScene from '@site/src/components/LazyThreeScene'
+import WebinarRegistrationForm from '@site/src/components/WebinarRegistrationForm'
+import WebinarCountdown from '@site/src/components/WebinarCountdown'
+import WebinarCalendarButtons from '@site/src/components/WebinarCalendarButtons'
+import { webinarConfig, getAvailableSeats, getLocalWebinarDateTime, getRegistrationDeadline } from '@site/src/config/webinarContent'
+import { trackingService } from '@site/src/services/trackingService'
+import WebinarLegalFooter from '@site/src/components/WebinarLegalFooter'
+
+import styles from './index.module.css'
+
+const RiskAssurances = () => (
+    <ul className={styles.riskList}>
+        <li>✅ 30-day replay access + slides</li>
+        <li>✅ Zero sales pitch — just frameworks and dashboards</li>
+        <li>✅ Privacy-first: your email stays with us (no spam)</li>
+        <li>✅ Can’t attend live? Register anyway and we’ll deliver the replay + toolkit automatically</li>
+    </ul>
+)
+
+function WebinarHero() {
+    const formatUrgencyMessage = (available: number) => {
+        if (!webinarConfig.scarcity) {
+            if (available <= 10) return `Only ${available} seats left!`
+            if (available <= 50) return `${available} seats remaining`
+            return `Limited to ${webinarConfig.maxSeats} seats`
+        }
+
+        const template = webinarConfig.scarcity.urgencyMessages[0] || '{remainingSeats} seats remaining'
+        return template.replace('{remainingSeats}', Math.max(available, 0).toString())
+    }
+
+    const [availableSeats, setAvailableSeats] = useState(getAvailableSeats())
+    const [urgencyMessage, setUrgencyMessage] = useState(() => formatUrgencyMessage(getAvailableSeats()))
+    const [localDateTime, setLocalDateTime] = useState(() => getLocalWebinarDateTime())
+    const registrationDeadline = getRegistrationDeadline()
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return
+        }
+
+        const updateAvailability = () => {
+            try {
+                const localRegistrations = Number(window.localStorage.getItem('webinar_registration_local_count') || '0')
+                const adjusted = Math.max(getAvailableSeats() - localRegistrations, 0)
+                setAvailableSeats(adjusted)
+                setUrgencyMessage(formatUrgencyMessage(adjusted))
+            } catch (error) {
+                console.warn('Unable to sync local registration count', error)
+            }
+        }
+
+        const handleLocalRegistration = () => updateAvailability()
+
+        updateAvailability()
+
+        window.addEventListener('storage', updateAvailability)
+        window.addEventListener('webinar-registration-success', handleLocalRegistration)
+
+        const intervalId = window.setInterval(updateAvailability, 60000)
+
+        return () => {
+            window.removeEventListener('storage', updateAvailability)
+            window.removeEventListener('webinar-registration-success', handleLocalRegistration)
+            window.clearInterval(intervalId)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return
+        }
+
+        setLocalDateTime(getLocalWebinarDateTime())
+    }, [])
+
+    const heroBullets = [
+        {
+            icon: '⚙️',
+            copy: '4-week IAS rollout: six disconnected systems unified into one governed assistant.'
+        },
+        {
+            icon: '💰',
+            copy: '$312K annual savings: Palatine’s automation play is still running live after 90 days.'
+        },
+        {
+            icon: '🛡️',
+            copy: 'Security-first: SOC 2 evidence pack, SSO/SAML patterns, and data residency options baked in.'
+        },
+        {
+            icon: '🧭',
+            copy: 'Change enablement: stakeholder scripts, rollout comms, and adoption metrics ready to reuse.'
+        },
+        {
+            icon: '🚀',
+            copy: '30-day pilot guarantee: qualification checklist + risk-free governance review to get sign-off fast.'
+        },
+        {
+            icon: '🤝',
+            copy: 'Hybrid support: live AnswerAgent voice coaches plus human office hours so your team isn’t alone day one.'
+        }
+    ]
+
+    const [activeBulletIndex, setActiveBulletIndex] = useState(0)
+
+    useEffect(() => {
+        if (heroBullets.length <= 1 || typeof window === 'undefined') {
+            return
+        }
+
+        const intervalId = window.setInterval(() => {
+            setActiveBulletIndex((prev) => (prev + 1) % heroBullets.length)
+        }, 6000)
+
+        return () => window.clearInterval(intervalId)
+        // heroBullets length is constant within render; safe to omit from deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+
+    const handleCarouselSelect = (index: number) => {
+        setActiveBulletIndex(index)
+    }
+
+    const deadlineLabel = (() => {
+        if (!registrationDeadline) return null
+        try {
+            const date = new Date(registrationDeadline)
+            if (Number.isNaN(date.getTime())) return null
+            return new Intl.DateTimeFormat(undefined, {
+                weekday: 'short',
+                hour: 'numeric',
+                minute: '2-digit',
+                timeZoneName: 'short'
+            }).format(date)
+        } catch (error) {
+            console.warn('Unable to format registration deadline', error)
+            return null
+        }
+    })()
+
+    return (
+        <header className={clsx('hero hero--primary', styles.heroSection, styles.landingHero)}>
+            <div className={styles.heroBackground}>
+                <LazyThreeScene className={styles.threeJsCanvas} fallbackClassName={styles.heroFallback} />
+            </div>
+            <div className={clsx('container', styles.heroContainer)}>
+                <div className={styles.heroGrid}>
+                    <div className={styles.heroCopy}>
+                        <div className={styles.heroEyebrow}>
+                            <span role='img' aria-hidden='true'>
+                                🔴
+                            </span>
+                            <span>Free Live Workshop • {localDateTime}</span>
+                        </div>
+
+                        <h1 className={styles.heroHeadline}>{webinarConfig.headlines.primary}</h1>
+
+                        <p className={styles.heroSubhead}>
+                            Join Brad Taylor (CEO), Adam Harris (COO), and Max Techera (CTO) as they show the exact AI orchestration system
+                            and framework they built to deploy enterprise AI agents in weeks, not months.
+                        </p>
+
+                        <div className={styles.heroHighlightsHeading}>What you’ll see live</div>
+                        <div className={styles.heroCarousel} aria-live='polite' aria-atomic='true'>
+                            <div key={activeBulletIndex} className={styles.heroCarouselCard}>
+                                <span className={styles.heroCarouselIcon} aria-hidden='true'>
+                                    {heroBullets[activeBulletIndex].icon}
+                                </span>
+                                <p className={styles.heroCarouselCopy}>{heroBullets[activeBulletIndex].copy}</p>
+                            </div>
+
+                            <div className={styles.heroCarouselIndicators} role='tablist' aria-label='Webinar highlights'>
+                                {heroBullets.map((bullet, index) => (
+                                    <button
+                                        key={bullet.copy}
+                                        type='button'
+                                        className={clsx(
+                                            styles.heroCarouselIndicator,
+                                            index === activeBulletIndex && styles.heroCarouselIndicatorActive
+                                        )}
+                                        onClick={() => handleCarouselSelect(index)}
+                                        aria-label={`Show highlight ${index + 1}: ${bullet.copy}`}
+                                        aria-pressed={index === activeBulletIndex}
+                                    />
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div id='hero-registration' className={styles.heroFormCard}>
+                        <div className={styles.scarcityBadge}>
+                            <span role='img' aria-hidden='true'>
+                                ⚡
+                            </span>
+                            <span>
+                                {urgencyMessage} • {availableSeats} seats left
+                                {deadlineLabel ? ` • Closes ${deadlineLabel}` : ''}
+                            </span>
+                        </div>
+
+                        <div className={styles.heroFormHeading}>
+                            <h3>Save Your Seat — Free</h3>
+                            <p>Live demo + 30-day replay • No sales pitch, just the playbooks</p>
+                        </div>
+
+                        <WebinarRegistrationForm />
+
+                        <div className={styles.formCountdown}>
+                            <WebinarCountdown compact />
+                        </div>
+
+                        <RiskAssurances />
+                        <WebinarCalendarButtons />
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+function HeroProofSection() {
+    const pressFeatures = webinarConfig.pressFeatures || []
+    const testimonial =
+        webinarConfig.testimonialQuotes?.[0] ||
+        ({
+            quote: '“We went from scattered information across 6 systems to one unified AI interface in 28 days.”',
+            author: 'Customer Success Lead',
+            company: 'Integral Ad Science'
+        } as const)
+
+    const hasPress = pressFeatures.length > 0
+    const hasTestimonial = Boolean(testimonial?.quote)
+
+    if (!hasPress && !hasTestimonial) {
+        return null
+    }
+
+    return (
+        <section className={styles.heroProofSection} aria-labelledby='hero-proof-heading'>
+            <div className='container'>
+                <div className={styles.heroProofGrid}>
+                    {hasPress && (
+                        <div>
+                            <p id='hero-proof-heading' className={styles.heroProofLabel}>
+                                Featured by leading enterprise innovators
+                            </p>
+                            <div className={styles.logoStrip}>
+                                {pressFeatures.map((feature) => (
+                                    <span key={feature.name}>{feature.label || feature.name}</span>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    {hasTestimonial && (
+                        <div className={styles.testimonialCard}>
+                            <div>{testimonial.quote}</div>
+                            <div className={styles.testimonialAuthor}>
+                                <span role='img' aria-hidden='true'>
+                                    ⭐
+                                </span>
+                                <span>
+                                    {testimonial.author}
+                                    {testimonial.company ? `, ${testimonial.company}` : ''}
+                                </span>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function ValueProposition() {
+    return (
+        <section
+            style={{
+                backgroundColor: 'rgba(10, 25, 47, 0.95)',
+                padding: '5rem 0',
+                borderTop: '1px solid rgba(255, 255, 255, 0.1)',
+                borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+            }}
+            id='value'
+        >
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--10 col--offset-1'>
+                        <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
+                            <h2
+                                style={{
+                                    fontSize: 'clamp(2rem, 4vw, 2.8rem)',
+                                    marginBottom: '1rem',
+                                    fontWeight: '600',
+                                    background: 'linear-gradient(135deg, #ffffff, #00ffff)',
+                                    WebkitBackgroundClip: 'text',
+                                    WebkitTextFillColor: 'transparent'
+                                }}
+                            >
+                                What You&apos;ll Learn in 60 Minutes
+                            </h2>
+                            <p
+                                style={{
+                                    fontSize: '1.1rem',
+                                    opacity: 0.8,
+                                    maxWidth: '600px',
+                                    margin: '0 auto'
+                                }}
+                            >
+                                No fluff, no theory. Just the proven frameworks that work.
+                            </p>
+                        </div>
+                        <div
+                            style={{
+                                display: 'grid',
+                                gridTemplateColumns: 'repeat(3, 1fr)',
+                                gap: '2rem',
+                                marginBottom: '3rem'
+                            }}
+                        >
+                            <div
+                                style={{
+                                    padding: '2rem',
+                                    backgroundColor: 'rgba(0, 255, 255, 0.1)',
+                                    borderRadius: '12px',
+                                    border: '2px solid #00ffff'
+                                }}
+                            >
+                                <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>🎯</div>
+                                <h3 style={{ color: '#00ffff', marginBottom: '1rem' }}>Live 4-Week Framework</h3>
+                                <p style={{ fontSize: '1.1rem' }}>
+                                    Watch the exact deployment process used by IAS to go from scattered systems to unified AI in just 4
+                                    weeks.
+                                </p>
+                            </div>
+
+                            <div
+                                style={{
+                                    padding: '2rem',
+                                    backgroundColor: 'rgba(0, 255, 0, 0.1)',
+                                    borderRadius: '12px',
+                                    border: '2px solid #00ff00'
+                                }}
+                            >
+                                <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>💰</div>
+                                <h3 style={{ color: '#00ff00', marginBottom: '1rem' }}>Real ROI Numbers</h3>
+                                <p style={{ fontSize: '1.1rem' }}>
+                                    $312K saved (Palatine), 120 hours/week (IAS), minutes-to-seconds search time (Moonstruck). See the
+                                    actual proof.
+                                </p>
+                            </div>
+
+                            <div
+                                style={{
+                                    padding: '2rem',
+                                    backgroundColor: 'rgba(255, 255, 0, 0.1)',
+                                    borderRadius: '12px',
+                                    border: '2px solid #ffff00'
+                                }}
+                            >
+                                <div style={{ fontSize: '3rem', marginBottom: '1rem' }}>🔄</div>
+                                <h3 style={{ color: '#ffff00', marginBottom: '1rem' }}>No Vendor Lock-in</h3>
+                                <p style={{ fontSize: '1.1rem' }}>
+                                    Swap OpenAI ↔ Claude ↔ Gemini instantly. Keep full control of your AI stack.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function LimitedBonusSection() {
+    const bonus = webinarConfig.limitedBonus
+
+    if (!bonus) {
+        return null
+    }
+
+    return (
+        <section className={styles.bonusSection} id='limited-bonus'>
+            <div className='container'>
+                <div className={styles.bonusCard}>
+                    <div>
+                        <span className={styles.bonusBadge}>Exclusive Bonus</span>
+                        <h2>{bonus.headline}</h2>
+                        <p>{bonus.subhead}</p>
+                    </div>
+                    <ul>
+                        {bonus.perks.map((perk) => (
+                            <li key={perk}>⚡ {perk}</li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function CustomerLogosSection() {
+    const stats = webinarConfig.customerStats
+    const customers = [
+        {
+            name: 'Integral Ad Science',
+            highlight: '4-week deployment • 6 systems → 1 AI hub',
+            metric: stats.ias?.roi || '40% faster ticket resolution'
+        },
+        {
+            name: 'Palatine Capital Partners',
+            highlight: '120 analyst-hours/week automated',
+            metric: stats.palatine?.saved || '$312K annual savings'
+        },
+        {
+            name: 'Moonstruck Medical',
+            highlight: '9 reps unified • search in seconds',
+            metric: stats.moonstruck?.search || '3× faster enablement'
+        },
+        {
+            name: 'WOW! Internet',
+            highlight: 'Support workflows automated',
+            metric: stats.wow?.conversion || 'POC → $36K annual license'
+        },
+        {
+            name: 'Contentful',
+            highlight: '90% of knowledge requests automated',
+            metric: stats.contentful?.roi || '6 systems consolidated'
+        }
+    ]
+
+    const getInitials = (name: string) =>
+        name
+            .split(' ')
+            .map((part) => part[0])
+            .join('')
+            .slice(0, 3)
+
+    return (
+        <section className={styles.customerLogoSection} id='customer-proof'>
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>Trusted by teams shipping enterprise AI in weeks</h2>
+                <p className={styles.sectionSubtitle}>
+                    These teams used the playbook you’ll learn on Saturday to launch compliance-ready AI agents and unlock immediate ROI.
+                </p>
+                <div className={styles.customerLogoGrid}>
+                    {customers.map((customer) => (
+                        <div key={customer.name} className={styles.customerLogoCard}>
+                            <div className={styles.customerLogoInitials} aria-hidden='true'>
+                                {getInitials(customer.name)}
+                            </div>
+                            <div className={styles.customerLogoName}>{customer.name}</div>
+                            <div className={styles.customerLogoHighlight}>{customer.highlight}</div>
+                            <div className={styles.customerLogoMetric}>{customer.metric}</div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function ValueStackSection() {
+    const bonuses = [
+        {
+            label: 'Live 60-minute enterprise AI deployment training',
+            value: '$497 value'
+        },
+        {
+            label: '4-week implementation worksheet',
+            value: '$197 value'
+        },
+        {
+            label: 'Enterprise AI readiness checklist',
+            value: '$97 value'
+        },
+        {
+            label: 'ROI calculator template',
+            value: '$147 value'
+        },
+        {
+            label: 'Security & compliance whitepaper',
+            value: '$97 value'
+        }
+    ]
+
+    return (
+        <section className={styles.valueStackSection} id='value-stack'>
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>What You Get When You Register Today</h2>
+                <p className={styles.sectionSubtitle}>
+                    Everything you need to execute a board-ready AI project in the next 90 days — yours free just for attending live.
+                </p>
+                <div className={styles.valueStackGrid}>
+                    {bonuses.map((bonus) => (
+                        <div key={bonus.label} className={styles.valueCard}>
+                            <div style={{ fontSize: '1.5rem' }} role='img' aria-hidden='true'>
+                                ✅
+                            </div>
+                            <strong>{bonus.label}</strong>
+                            <div style={{ color: 'rgba(255,255,255,0.65)', fontSize: '0.95rem' }}>{bonus.value}</div>
+                        </div>
+                    ))}
+                </div>
+                <div className={styles.valueTotal}>Total value: $1,035 — access it all free on Saturday.</div>
+            </div>
+        </section>
+    )
+}
+
+function MidPageCTA() {
+    return (
+        <section className={styles.midCtaSection} id='mid-registration'>
+            <div className='container'>
+                <div className={styles.midCtaCard}>
+                    <div className={styles.midCtaCopy}>
+                        <h2>Need the playbook before Saturday?</h2>
+                        <p>Drop your email to hold your seat and get the Enterprise AI readiness checklist + ROI worksheet immediately.</p>
+                    </div>
+                    <div className={styles.midCtaForm}>
+                        <WebinarRegistrationForm />
+                        <div className={styles.formCountdown}>
+                            <WebinarCountdown compact />
+                        </div>
+                        <RiskAssurances />
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function CustomerSuccessSection() {
+    return (
+        <section
+            style={{
+                backgroundColor: 'rgba(5, 15, 30, 0.8)',
+                padding: '5rem 0',
+                borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+            }}
+            id='customer-results'
+        >
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>Real Results from Real Teams</h2>
+                <p className={styles.sectionSubtitle}>
+                    Proof that the 4-week deployment framework delivers measurable ROI across finance, advertising, healthcare, and telecom.
+                </p>
+
+                <div className={styles.testimonialGrid}>
+                    <div className={styles.miniStat}>
+                        <div style={{ fontSize: '2.5rem', marginBottom: '0.75rem' }}>💰</div>
+                        <div className={styles.miniStatValue}>$312K</div>
+                        <div className={styles.miniStatLabel}>Annual savings at Palatine Capital</div>
+                        <p style={{ marginTop: '1.25rem', fontSize: '0.95rem', lineHeight: 1.6 }}>
+                            Automated 120 analyst-hours every week by routing 50-60 broker emails straight into underwriting workflows.
+                        </p>
+                    </div>
+
+                    <div className={styles.miniStat}>
+                        <div style={{ fontSize: '2.5rem', marginBottom: '0.75rem' }}>⚡</div>
+                        <div className={styles.miniStatValue}>4 Weeks</div>
+                        <div className={styles.miniStatLabel}>Full deployment at IAS</div>
+                        <p style={{ marginTop: '1.25rem', fontSize: '0.95rem', lineHeight: 1.6 }}>
+                            Unified 6 scattered systems into a single AI interface with complete audit trails and compliance approvals.
+                        </p>
+                    </div>
+
+                    <div className={styles.miniStat}>
+                        <div style={{ fontSize: '2.5rem', marginBottom: '0.75rem' }}>🚀</div>
+                        <div className={styles.miniStatValue}>3× Faster</div>
+                        <div className={styles.miniStatLabel}>Sales enablement at Moonstruck</div>
+                        <p style={{ marginTop: '1.25rem', fontSize: '0.95rem', lineHeight: 1.6 }}>
+                            9 distributed reps now get answers in seconds, freeing operations to focus on strategic launches and compliance.
+                        </p>
+                    </div>
+                </div>
+
+                <p style={{ textAlign: 'center', marginTop: '3rem', fontSize: '1rem', color: 'rgba(255,255,255,0.75)' }}>
+                    💡 Saturday’s session walks through these playbooks step-by-step so you can replicate them inside your org.
+                </p>
+            </div>
+        </section>
+    )
+}
+
+function PresenterSection() {
+    const highlights = webinarConfig.hostHighlights || []
+
+    return (
+        <section className={styles.presenterSection} id='hosts'>
+            <div className='container'>
+                <div className={styles.presenterIntro}>
+                    <h2 className={styles.sectionTitle}>Meet Your Hosts</h2>
+                    <p className={styles.sectionSubtitle}>
+                        Brad Taylor, Adam Harris, and Max Techera are the founding team behind AnswerAI and Last Rev, with deep experience
+                        at Google, Optimizely, and building enterprise-scale AI platforms.
+                    </p>
+                </div>
+
+                <div className={styles.presenterGrid}>
+                    {webinarConfig.speakers.map((speaker) => {
+                        const highlight = highlights.find((h) => h.speaker === speaker.name)?.highlight
+                        return (
+                            <div key={speaker.name} className={styles.presenterCard}>
+                                <div className={styles.presenterHeader}>
+                                    {speaker.image ? (
+                                        <img src={speaker.image} alt={speaker.name} className={styles.presenterPhoto} />
+                                    ) : (
+                                        <div className={styles.presenterPlaceholder} aria-hidden='true'>
+                                            {speaker.name
+                                                .split(' ')
+                                                .map((part) => part[0])
+                                                .join('')}
+                                        </div>
+                                    )}
+                                    <div>
+                                        <h3>{speaker.name}</h3>
+                                        <p className={styles.presenterTitle}>{speaker.title}</p>
+                                    </div>
+                                </div>
+                                <p className={styles.presenterBio}>{speaker.bio}</p>
+                                {highlight && <div className={styles.presenterHighlight}>{highlight}</div>}
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function IntroVideoSection() {
+    const video = webinarConfig.introVideo
+
+    if (!video?.url) {
+        return null
+    }
+
+    return (
+        <section className={styles.videoSection} id='intro-video'>
+            <div className='container'>
+                <div className={styles.videoWrapper}>
+                    <div className={styles.videoFrame}>
+                        <iframe
+                            src={video.url}
+                            title='Enterprise AI Webinar Intro'
+                            allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+                            allowFullScreen
+                        />
+                    </div>
+                    {video.caption && <p className={styles.videoCaption}>{video.caption}</p>}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function TestimonialsCarousel() {
+    const testimonials = webinarConfig.testimonialQuotes || []
+    const [activeIndex, setActiveIndex] = useState(0)
+
+    useEffect(() => {
+        if (testimonials.length <= 1) return undefined
+
+        const timer = setInterval(() => {
+            setActiveIndex((prev) => (prev + 1) % testimonials.length)
+        }, 6000)
+
+        return () => clearInterval(timer)
+    }, [testimonials.length])
+
+    if (!testimonials.length) {
+        return null
+    }
+
+    const active = testimonials[activeIndex]
+
+    return (
+        <section className={styles.carouselSection} id='testimonials'>
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>What Leaders Say About the Workshop</h2>
+                <div className={styles.carouselCard}>
+                    <p className={styles.carouselQuote}>{active.quote}</p>
+                    <p className={styles.carouselAuthor}>
+                        {active.author}
+                        {active.role ? `, ${active.role}` : ''}
+                        {active.company ? ` • ${active.company}` : ''}
+                    </p>
+                    <div className={styles.carouselDots}>
+                        {testimonials.map((_, index) => (
+                            <button
+                                key={`testimonial-${index}`}
+                                type='button'
+                                aria-label={`Show testimonial ${index + 1}`}
+                                className={clsx(styles.carouselDot, index === activeIndex && styles.carouselDotActive)}
+                                onClick={() => setActiveIndex(index)}
+                            />
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function ToolkitPreviewSection() {
+    const toolkit = webinarConfig.toolkitPreview || []
+
+    if (!toolkit.length) {
+        return null
+    }
+
+    return (
+        <section className={styles.toolkitSection} id='toolkit'>
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>Peek Inside the Implementation Toolkit</h2>
+                <p className={styles.sectionSubtitle}>
+                    Download everything the moment you register so you can execute the 30/60/90-day plan without guesswork.
+                </p>
+                <div className={styles.toolkitGrid}>
+                    {toolkit.map((item) => (
+                        <div key={item.title} className={styles.toolkitCard}>
+                            <div className={styles.toolkitIcon} aria-hidden='true'>
+                                📦
+                            </div>
+                            <h3>{item.title}</h3>
+                            <p>{item.description}</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function RoadmapSection() {
+    const roadmap = webinarConfig.roadmap || []
+
+    if (!roadmap.length) {
+        return null
+    }
+
+    return (
+        <section className={styles.roadmapSection} id='roadmap'>
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>Your First 30 Days, Mapped Out</h2>
+                <p className={styles.sectionSubtitle}>
+                    Walk away with a step-by-step execution plan so your team knows exactly what happens after the webinar.
+                </p>
+                <div className={styles.roadmapGrid}>
+                    {roadmap.map((step) => (
+                        <div key={step.phase} className={styles.roadmapCard}>
+                            <div className={styles.roadmapHeader}>
+                                <span className={styles.roadmapPhase}>{step.phase}</span>
+                                <span className={styles.roadmapDuration}>{step.duration}</span>
+                            </div>
+                            <ul>
+                                {step.outcomes.map((outcome) => (
+                                    <li key={`${step.phase}-${outcome}`}>{outcome}</li>
+                                ))}
+                            </ul>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function AgendaSection() {
+    return (
+        <section
+            style={{
+                backgroundColor: 'rgba(15, 30, 50, 0.9)',
+                padding: '5rem 0',
+                borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+            }}
+            id='agenda'
+        >
+            <div className='container'>
+                <h2 className={styles.sectionTitle}>60-Minute Game Plan</h2>
+                <p className={styles.sectionSubtitle}>
+                    We move fast — you’ll leave with a week-by-week rollout timeline, governance blueprint, and next-step checklist.
+                </p>
+
+                <div className='row'>
+                    <div className='col col--8 col--offset-2'>
+                        {webinarConfig.agenda.map((item, index) => (
+                            <div key={index} className={clsx(styles.featureCard, styles.stepCard)} style={{ marginBottom: '1rem' }}>
+                                <div className={styles.stepNumber} style={{ minWidth: '60px', fontSize: '0.9rem' }}>
+                                    {item.time}
+                                </div>
+                                <div>
+                                    <h4>{item.topic}</h4>
+                                    <p>{item.description}</p>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function FinalCTA() {
+    return (
+        <section
+            style={{
+                backgroundColor: 'rgba(0, 10, 25, 0.95)',
+                padding: '6rem 0',
+                borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
+            }}
+            id='final-cta'
+        >
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--10 col--offset-1'>
+                        <div className={styles.finalCtaCard}>
+                            <h2 className={styles.finalCtaHeadline}>Ready to Launch an AI Win in the Next 30 Days?</h2>
+                            <p className={styles.finalCtaCopy}>
+                                Save your seat for Saturday’s live workshop and walk away with the exact templates, governance safeguards,
+                                and deployment timeline that closed enterprise deals for IAS, Palatine, Moonstruck, and more.
+                            </p>
+
+                            <div
+                                id='final-registration'
+                                style={{
+                                    maxWidth: '520px',
+                                    margin: '0 auto',
+                                    background: 'rgba(0,0,0,0.35)',
+                                    padding: '2.25rem',
+                                    borderRadius: '14px'
+                                }}
+                            >
+                                <h3 style={{ color: '#ffff80', marginBottom: '1.25rem' }}>Reserve your free seat now</h3>
+                                <WebinarRegistrationForm />
+                                <div className={styles.formCountdown}>
+                                    <WebinarCountdown compact />
+                                </div>
+                                <RiskAssurances />
+                                <WebinarCalendarButtons />
+                            </div>
+
+                            <div className={styles.finalCtaFooter}>
+                                {getLocalWebinarDateTime()} • 60 minutes + live Q&A • Bonus toolkit delivered right after the session
+                                <br />
+                                500+ AI leaders registered — seats refresh daily
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function SimpleFAQ() {
+    return (
+        <section
+            style={{
+                backgroundColor: 'rgba(8, 20, 35, 0.9)',
+                padding: '4rem 0 6rem 0'
+            }}
+            id='faq'
+        >
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--10 col--offset-1'>
+                        <h2 className={styles.sectionTitle}>Quick Answers Before You Register</h2>
+                        <p className={styles.sectionSubtitle}>
+                            Bring your questions — we handle the strategy, compliance, and execution details live.
+                        </p>
+
+                        <div className={styles.faqGrid}>
+                            <div className={styles.faqCard}>
+                                <h4>Is this a sales pitch?</h4>
+                                <p style={{ fontSize: '0.95rem', lineHeight: 1.6 }}>
+                                    Nope. It’s a live teardown of the frameworks and dashboards that drive our enterprise deployments.
+                                    You’ll see product, but there’s no sales deck.
+                                </p>
+                            </div>
+
+                            <div className={styles.faqCard}>
+                                <h4>Will it be recorded?</h4>
+                                <p style={{ fontSize: '0.95rem', lineHeight: 1.6 }}>
+                                    Yes — register and you’ll get 30-day replay access plus the slide deck, worksheets, and toolkit
+                                    downloads.
+                                </p>
+                            </div>
+
+                            <div className={styles.faqCard}>
+                                <h4>What if I can’t attend live?</h4>
+                                <p style={{ fontSize: '0.95rem', lineHeight: 1.6 }}>
+                                    Secure your seat anyway and catch the replay. We’ll also send the templates and instructions so you can
+                                    execute at your pace.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function StickyCTA() {
+    const [visible, setVisible] = useState(false)
+
+    useEffect(() => {
+        const handleVisibility = () => {
+            const heroRegistration = document.getElementById('hero-registration')
+            const finalRegistration = document.getElementById('final-registration')
+
+            const elementIsInViewport = (element: HTMLElement | null) => {
+                if (!element) return false
+                const rect = element.getBoundingClientRect()
+                return rect.top < window.innerHeight * 0.85 && rect.bottom > window.innerHeight * 0.15
+            }
+
+            const shouldShow = window.scrollY > 320 && !elementIsInViewport(heroRegistration) && !elementIsInViewport(finalRegistration)
+            setVisible(shouldShow)
+        }
+
+        handleVisibility()
+        window.addEventListener('scroll', handleVisibility)
+        window.addEventListener('resize', handleVisibility)
+
+        return () => {
+            window.removeEventListener('scroll', handleVisibility)
+            window.removeEventListener('resize', handleVisibility)
+        }
+    }, [])
+
+    const scrollToForm = () => {
+        const target = document.getElementById('hero-registration')
+        if (target) {
+            target.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+    }
+
+    const seatsLeft = getAvailableSeats()
+    const localTime = getLocalWebinarDateTime()
+
+    return (
+        <>
+            <div className={clsx(styles.desktopStickyHeader, visible && styles.desktopStickyHeaderVisible)}>
+                <div className={styles.desktopStickyInner}>
+                    <span>
+                        Next live session: <strong>{localTime}</strong> • {seatsLeft} seats left
+                    </span>
+                    <button type='button' className={styles.stickyCtaButton} onClick={scrollToForm}>
+                        Save My Seat - Free
+                    </button>
+                </div>
+            </div>
+
+            <div className={clsx(styles.stickyCtaBar, visible && styles.stickyCtaBarVisible)}>
+                <div>
+                    <div style={{ fontWeight: 600 }}>Save Your Seat Now</div>
+                    <div style={{ fontSize: '0.9rem', opacity: 0.8 }}>
+                        Live {localTime} • {seatsLeft} seats left • 60-minute playbook + toolkit
+                    </div>
+                </div>
+                <button type='button' className={styles.stickyCtaButton} onClick={scrollToForm}>
+                    Save My Seat - Free
+                </button>
+            </div>
+        </>
+    )
+}
+
+export default function WebinarEnterpriseAI(): JSX.Element {
+    // Initialize page tracking
+    useEffect(() => {
+        trackingService.trackPageView('/webinar-enterprise-ai', 'Enterprise AI Webinar Landing Page')
+
+        // Track content engagement for different sections when they come into view
+        const observerOptions = {
+            threshold: 0.5,
+            rootMargin: '0px 0px -10% 0px'
+        }
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    const sectionId = entry.target.id
+                    if (sectionId) {
+                        trackingService.trackContentEngagement('section', sectionId)
+                    }
+                }
+            })
+        }, observerOptions)
+
+        // Observe all sections
+        const sections = document.querySelectorAll('section[id]')
+        sections.forEach((section) => observer.observe(section))
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [])
+
+    return (
+        <div data-theme='dark'>
+            <Layout
+                title='Enterprise AI Webinar - Deploy AI Agents in 4 Weeks'
+                description='Free Saturday webinar: From AI Chaos to Enterprise Success. See how IAS, Palatine Capital, and Moonstruck Medical deployed AI in 4 weeks vs 6+ months. Live demo of vendor-free framework.'
+                noFooter
+                noNavbar
+            >
+                <WebinarHero />
+                <main>
+                    <HeroProofSection />
+                    <PresenterSection />
+                    <IntroVideoSection />
+                    <LimitedBonusSection />
+                    <CustomerLogosSection />
+                    <ValueProposition />
+                    <ToolkitPreviewSection />
+                    <ValueStackSection />
+                    <MidPageCTA />
+                    <CustomerSuccessSection />
+                    <TestimonialsCarousel />
+                    <RoadmapSection />
+                    <AgendaSection />
+                    <FinalCTA />
+                    <SimpleFAQ />
+                </main>
+                <WebinarLegalFooter />
+                <StickyCTA />
+            </Layout>
+        </div>
+    )
+}
diff --git a/packages/docs/src/pages/webinar-thank-you.tsx b/packages/docs/src/pages/webinar-thank-you.tsx
new file mode 100644
index 00000000000..671a7f0adf7
--- /dev/null
+++ b/packages/docs/src/pages/webinar-thank-you.tsx
@@ -0,0 +1,861 @@
+import React, { FormEvent, useEffect, useState } from 'react'
+import clsx from 'clsx'
+import Layout from '@theme/Layout'
+import LazyThreeScene from '@site/src/components/LazyThreeScene'
+import WebinarCountdown from '@site/src/components/WebinarCountdown'
+import WebinarCalendarButtons from '@site/src/components/WebinarCalendarButtons'
+import WebinarLegalFooter from '@site/src/components/WebinarLegalFooter'
+import ElevenLabsInlineWidget from '@site/src/components/ElevenLabsInlineWidget'
+import { marketingConfig } from '@site/src/config/marketingConfig'
+import { webinarConfig, getWebinarDateTime, getLocalWebinarDateTime } from '@site/src/config/webinarContent'
+import { mailerLiteService } from '@site/src/services/mailerLiteService'
+import { trackingService } from '@site/src/services/trackingService'
+
+import styles from './index.module.css'
+
+const ELEVEN_LABS_AGENT_ID = 'agent_01k03gnw7xe11btz2vprkf7ay5' as const
+
+const trackVoiceStart = (context: string) => () =>
+    trackingService.trackEvent({
+        event: 'voice_assessment_started',
+        eventCategory: 'voice_assessment',
+        eventLabel: context
+    })
+
+const trackVoiceEnd = (context: string) => () =>
+    trackingService.trackEvent({
+        event: 'voice_assessment_completed',
+        eventCategory: 'voice_assessment',
+        eventLabel: context,
+        value: 1
+    })
+
+function ThankYouHero() {
+    const [localEventTime, setLocalEventTime] = useState(() => getLocalWebinarDateTime())
+
+    useEffect(() => {
+        setLocalEventTime(getLocalWebinarDateTime())
+    }, [])
+
+    return (
+        <header className={clsx('hero hero--primary', styles.heroSection)}>
+            <div className={styles.heroBackground}>
+                <LazyThreeScene className={styles.threeJsCanvas} fallbackClassName={styles.heroFallback} />
+            </div>
+            <div className={styles.heroContent}>
+                <span className={styles.heroCelebration} aria-hidden='true'>
+                    🎉
+                </span>
+                <p className={styles.heroEyebrow}>Registration confirmed</p>
+                <h1 className={styles.heroHeadline}>You’re locked in for Saturday’s Enterprise AI playbook</h1>
+                <p className={styles.heroSubhead}>
+                    We go live <strong>{localEventTime}</strong>. Take a minute now so the workshop zeroes in on the workflow your leaders
+                    care about most.
+                </p>
+
+                <ul className={styles.heroChecklist}>
+                    <li className={styles.heroChecklistItem}>
+                        <span className={styles.heroChecklistIcon}>📅</span>
+                        Add the calendar invite and forward the join link to your decision-makers.
+                    </li>
+                    <li className={styles.heroChecklistItem}>
+                        <span className={styles.heroChecklistIcon}>🧭</span>
+                        Tell us the metric or workflow you want solved in the form below—Bradley will prioritize it live.
+                    </li>
+                    <li className={styles.heroChecklistItem}>
+                        <span className={styles.heroChecklistIcon}>🤖</span>
+                        Prefer a conversation? Jump into our AI voice coach to pressure-test the agenda in 2 minutes.
+                    </li>
+                </ul>
+
+                <div className={styles.heroActionRow}>
+                    <div className={styles.heroActionPrimary}>
+                        <WebinarCountdown className={styles.countdownSection} />
+                        <WebinarCalendarButtons />
+                        <div className={styles.heroActionFooter}>
+                            <a
+                                href='mailto:?subject=Enterprise AI Webinar - Deploy AI in 4 Weeks&body=I just registered for this free webinar on enterprise AI deployment. Thought you might be interested: https://theanswer.ai/webinar-enterprise-ai'
+                                className={clsx(styles.ctaButton, styles.ctaPrimary)}
+                            >
+                                Share with your team
+                            </a>
+                        </div>
+                    </div>
+
+                    <div className={styles.heroVoiceCard}>
+                        <div className={styles.heroVoiceHeader}>
+                            <span className={styles.bonusBadge}>Instant option</span>
+                            <h3 className={styles.heroVoiceTitle}>Talk through your use case now</h3>
+                        </div>
+                        <p className={styles.heroVoiceCopy}>
+                            Spin up our ElevenLabs-powered AnswerAgent for a quick readiness call. It’ll confirm fit, capture context for
+                            the team, and send a recap before we go live.
+                        </p>
+                        <ElevenLabsInlineWidget
+                            agentId={ELEVEN_LABS_AGENT_ID}
+                            text='Start the readiness call'
+                            buttonClassName={styles.heroVoiceButton}
+                            onConversationStart={trackVoiceStart('hero_voice_widget')}
+                            onConversationEnd={trackVoiceEnd('hero_voice_widget')}
+                        />
+                        <p className={styles.heroVoiceAssurance}>No scheduling. Instant answers. Replay emailed automatically.</p>
+                    </div>
+                </div>
+
+                <div className={styles.heroSecondaryLinks}>
+                    <a href='#what-to-expect' className={styles.secondaryLink}>
+                        📋 See the agenda
+                    </a>
+                    <a href='#prep' className={styles.secondaryLink}>
+                        🎁 Prep materials
+                    </a>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+function ConfirmationDetails() {
+    return (
+        <section className={clsx(styles.missionSection, styles.confirmationSection)} id='confirmation'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--10 col--offset-1'>
+                        <div className={styles.confirmationCard}>
+                            <p className={styles.sectionEyebrow}>Step 1 · check your inbox</p>
+                            <h2 className={styles.sectionHeading}>Pick how you want to get ready before we go live</h2>
+                            <p className={styles.sectionLead}>
+                                Your confirmation email is waiting with the join link, calendar invite, and prep checklist. Forward it to
+                                the people who need to be in the room—then choose the path that fits your style.
+                            </p>
+
+                            <div className={styles.confirmationGrid}>
+                                <div className={styles.confirmationItem}>
+                                    <span className={styles.confirmationIcon}>📧</span>
+                                    <h3>Email package</h3>
+                                    <p className={styles.confirmationCopy}>
+                                        Subject line: <em>“Enterprise AI Webinar – You’re confirmed.”</em> It includes the live link, replay
+                                        access, and the readiness toolkit.
+                                    </p>
+                                </div>
+                                <div className={styles.confirmationItem}>
+                                    <span className={styles.confirmationIcon}>📅</span>
+                                    <h3>Calendar invite</h3>
+                                    <p className={styles.confirmationCopy}>
+                                        {getWebinarDateTime()} — add it now so you get the automatic reminders and can loop in stakeholders
+                                        with one click.
+                                    </p>
+                                </div>
+                                <div className={styles.confirmationItem}>
+                                    <span className={styles.confirmationIcon}>🎯</span>
+                                    <h3>4-week deployment roadmap</h3>
+                                    <p className={styles.confirmationCopy}>
+                                        The note links to our live demo outline and the KPI worksheet you’ll use during the session.
+                                    </p>
+                                </div>
+                            </div>
+
+                            <div className={styles.confirmationProTip}>
+                                <span className={styles.confirmationProTipIcon}>💡</span>
+                                <div>
+                                    <strong>Pro tip:</strong> Add the calendar invite now, then jump to “Tailor the workshop” so we know
+                                    which workflow or metric to prioritize for your team.
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function PrepResources() {
+    const video = webinarConfig.introVideo
+    const videoReady = Boolean(video?.url && !video.url.includes('TODO_REPLACE'))
+
+    return (
+        <section className={styles.videoSection} id='prep'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--10 col--offset-1'>
+                        <div className={styles.videoCard}>
+                            <div className={styles.videoHeader}>
+                                <span className={styles.bonusBadge}>Prep in 5 minutes</span>
+                                <h2>Preview the workshop & grab your starter kit</h2>
+                                <p>
+                                    Bradley recorded a quick walkthrough of what to bring, which metrics to benchmark, and how to brief
+                                    stakeholders so you ship outcomes the Monday after.
+                                </p>
+                                <ul className={styles.videoTakeaways}>
+                                    <li>👥 Who to invite so approvals happen fast</li>
+                                    <li>📊 The 3 metrics he’ll ask you to benchmark during the live build</li>
+                                    <li>⚙️ How to prep your data sources for the 4-week deployment sprint</li>
+                                </ul>
+                            </div>
+                            {videoReady ? (
+                                <div className={styles.videoEmbed}>
+                                    <iframe
+                                        src={video?.url}
+                                        title='Webinar orientation video'
+                                        loading='lazy'
+                                        frameBorder='0'
+                                        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
+                                        allowFullScreen
+                                    />
+                                </div>
+                            ) : (
+                                <div className={styles.videoPlaceholder}>
+                                    <strong>Orientation video coming soon.</strong> We’ll email you as soon as the recording is live.
+                                </div>
+                            )}
+                            {video?.caption && <p className={styles.videoCaption}>{video.caption}</p>}
+                            <div className={styles.videoResources}>
+                                <div className={styles.bonusGrid}>
+                                    <div className={styles.bonusCard}>
+                                        <span className={styles.bonusIcon}>🧭</span>
+                                        <h3>Readiness Checklist</h3>
+                                        <p>Hand it to IT, data, and compliance so provisioning happens before Thursday.</p>
+                                        <div className={styles.bonusMeta}>Includes SOC 2 & privacy prompts</div>
+                                    </div>
+                                    <div className={styles.bonusCard}>
+                                        <span className={styles.bonusIcon}>📈</span>
+                                        <h3>Executive Briefing Deck</h3>
+                                        <p>Forward-ready slides with ROI benchmarks and the exact 4-week rollout sequence.</p>
+                                        <div className={styles.bonusMeta}>Perfect for leadership updates</div>
+                                    </div>
+                                    <div className={styles.bonusCard}>
+                                        <span className={styles.bonusIcon}>🎥</span>
+                                        <h3>Replay & Highlight Reel</h3>
+                                        <p>Full session plus a 7-minute recap delivered Sunday morning for anyone who can’t join live.</p>
+                                        <div className={styles.bonusMeta}>Share with busy stakeholders</div>
+                                    </div>
+                                </div>
+                                <p className={styles.videoFootnote}>Submit the form below and we’ll email the bundle automatically.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function ProgressiveProfileForm() {
+    const [formState, setFormState] = useState({
+        email: '',
+        firstName: '',
+        company: '',
+        jobTitle: '',
+        biggestChallenge: '',
+        wantsCall: false,
+        timezone: ''
+    })
+    const [status, setStatus] = useState<'idle' | 'saving' | 'success' | 'error'>('idle')
+    const [error, setError] = useState<string | null>(null)
+
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return
+        }
+
+        try {
+            const storedEmail =
+                window.localStorage.getItem('webinar_registration_confirmed_email') ||
+                window.localStorage.getItem('webinar_registration_email')
+
+            if (storedEmail) {
+                setFormState((prev) => ({ ...prev, email: storedEmail }))
+            }
+
+            const storedProfile = window.localStorage.getItem('webinar_registration_profile')
+            if (storedProfile) {
+                const parsed = JSON.parse(storedProfile)
+                setFormState((prev) => ({
+                    ...prev,
+                    firstName: parsed.firstName || prev.firstName,
+                    company: parsed.company || prev.company,
+                    jobTitle: parsed.jobTitle || prev.jobTitle,
+                    biggestChallenge: parsed.biggestChallenge || prev.biggestChallenge,
+                    wantsCall: Boolean(parsed.wantsCall || false),
+                    timezone: parsed.timezone || prev.timezone
+                }))
+            }
+
+            const tz = Intl.DateTimeFormat().resolvedOptions().timeZone
+            if (tz) {
+                setFormState((prev) => ({ ...prev, timezone: tz }))
+            }
+        } catch (storageError) {
+            console.warn('Unable to hydrate saved profile data', storageError)
+        }
+    }, [])
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value, type, checked } = event.target
+
+        if (status === 'error') {
+            setStatus('idle')
+            setError(null)
+        }
+
+        setFormState((prev) => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value
+        }))
+    }
+
+    const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+        event.preventDefault()
+
+        if (!formState.email) {
+            setStatus('error')
+            setError('Please confirm your email so we can attach these details to your registration.')
+            return
+        }
+
+        setStatus('saving')
+        setError(null)
+        trackingService.trackFormInteraction('start', 'webinar-follow-up-form')
+
+        try {
+            if (!marketingConfig.mailerLite.enabled || !marketingConfig.mailerLite.webformId) {
+                console.warn('MailerLite configuration missing. Ensure NEXT_PUBLIC_MAILERLITE_WEBFORM_ID is set.')
+                setStatus('error')
+                setError('Registration system is being updated. Please try again later or email hello@theanswer.ai.')
+                return
+            }
+
+            const result = await mailerLiteService.subscribe({
+                email: formState.email,
+                name: formState.firstName,
+                fields: {
+                    company: formState.company,
+                    job_title: formState.jobTitle,
+                    primary_use_case: formState.biggestChallenge,
+                    wants_call: formState.wantsCall,
+                    timezone: formState.timezone,
+                    utm_source: 'webinar-thank-you',
+                    utm_medium: 'progressive-profile',
+                    utm_campaign: 'webinar-enterprise-ai',
+                    registration_stage: 'thank-you-follow-up'
+                }
+            })
+
+            if (!result.success) {
+                throw new Error(result.message || 'Follow-up submission failed')
+            }
+
+            if (typeof window !== 'undefined') {
+                window.localStorage.setItem(
+                    'webinar_registration_profile',
+                    JSON.stringify({
+                        firstName: formState.firstName,
+                        company: formState.company,
+                        jobTitle: formState.jobTitle,
+                        biggestChallenge: formState.biggestChallenge,
+                        wantsCall: formState.wantsCall,
+                        timezone: formState.timezone
+                    })
+                )
+            }
+
+            setStatus('success')
+            trackingService.trackFormInteraction('complete', 'webinar-follow-up-form')
+        } catch (submissionError) {
+            console.error('Follow-up submission failed', submissionError)
+            setStatus('error')
+            setError('Something went wrong saving your details. Please try again or email hello@theanswer.ai.')
+        }
+    }
+
+    return (
+        <section className={styles.progressiveSection} id='attendee-prep'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--8 col--offset-2'>
+                        <div className={styles.progressiveCard}>
+                            <span className={styles.bonusBadge}>Optional prep</span>
+                            <h2>Shape Saturday around your KPIs</h2>
+                            <p>
+                                Choose your path: spend two minutes with the AI coach or drop the details below so Bradley can tailor the
+                                live walkthrough to your stack.
+                            </p>
+
+                            <div className={styles.progressiveChoice}>
+                                <div className={styles.progressiveChoiceColumn}>
+                                    <h3>Prefer typing?</h3>
+                                    <p className={styles.progressiveChoiceCopy}>
+                                        Tell us the workflow, metric, or stakeholder you want solved. We’ll queue it for the live demo and
+                                        send the follow-up deck tuned to your answers.
+                                    </p>
+                                </div>
+                                <div className={clsx(styles.progressiveChoiceColumn, styles.progressiveVoiceColumn)}>
+                                    <h3>Prefer chatting?</h3>
+                                    <p className={styles.progressiveChoiceCopy}>
+                                        Launch the AnswerAgent voice assessment to share the same context conversationally. We’ll log the
+                                        highlights and email you a recap for easy forwarding.
+                                    </p>
+                                    <ElevenLabsInlineWidget
+                                        agentId={ELEVEN_LABS_AGENT_ID}
+                                        text='Voice my priorities instead'
+                                        variant='outline'
+                                        showStatus={false}
+                                        buttonClassName={styles.progressiveVoiceButton}
+                                        wrapperClassName={styles.progressiveVoiceButtonWrap}
+                                        onConversationStart={trackVoiceStart('progressive_voice_widget')}
+                                        onConversationEnd={trackVoiceEnd('progressive_voice_widget')}
+                                    />
+                                </div>
+                            </div>
+
+                            <form className={styles.progressiveForm} onSubmit={handleSubmit}>
+                                <div className={styles.formGrid}>
+                                    <label className={styles.formField}>
+                                        <span>Email (so we can match your registration)</span>
+                                        <input
+                                            type='email'
+                                            name='email'
+                                            value={formState.email}
+                                            onChange={handleChange}
+                                            placeholder='you@company.com'
+                                            required
+                                        />
+                                    </label>
+                                    <label className={styles.formField}>
+                                        <span>First name</span>
+                                        <input
+                                            type='text'
+                                            name='firstName'
+                                            value={formState.firstName}
+                                            onChange={handleChange}
+                                            placeholder='Optional'
+                                        />
+                                    </label>
+                                    <label className={styles.formField}>
+                                        <span>Company</span>
+                                        <input
+                                            type='text'
+                                            name='company'
+                                            value={formState.company}
+                                            onChange={handleChange}
+                                            placeholder='Optional'
+                                        />
+                                    </label>
+                                    <label className={styles.formField}>
+                                        <span>Role / title</span>
+                                        <input
+                                            type='text'
+                                            name='jobTitle'
+                                            value={formState.jobTitle}
+                                            onChange={handleChange}
+                                            placeholder='Optional'
+                                        />
+                                    </label>
+                                </div>
+
+                                <label className={clsx(styles.formField, styles.formFieldFull)}>
+                                    <span>What’s the #1 workflow or metric you want solved?</span>
+                                    <textarea
+                                        name='biggestChallenge'
+                                        value={formState.biggestChallenge}
+                                        onChange={handleChange}
+                                        rows={3}
+                                        placeholder='Optional, but it helps us bring the right playbook.'
+                                    />
+                                </label>
+
+                                <label className={clsx(styles.formField, styles.formCheckbox)}>
+                                    <input type='checkbox' name='wantsCall' checked={formState.wantsCall} onChange={handleChange} />
+                                    <span>I’m up for a quick human follow-up after the webinar (we’ll send scheduling options).</span>
+                                </label>
+
+                                {error && <div className={styles.formError}>{error}</div>}
+                                {status === 'success' && (
+                                    <div className={styles.formSuccess}>✅ Got it! We’ll tailor the workshop follow-ups to your goals.</div>
+                                )}
+
+                                <button type='submit' className={styles.formSubmit} disabled={status === 'saving'}>
+                                    {status === 'saving' ? 'Saving...' : 'Save my details'}
+                                </button>
+                            </form>
+
+                            <div className={styles.progressiveProof}>
+                                <span>⭐️</span>
+                                <p>
+                                    Last month’s attendees who used the form or voice coach were 3× more likely to book a pilot follow-up
+                                    because the team had their roadmap ready.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function WhatToExpect() {
+    return (
+        <section className={styles.featuresSection} id='what-to-expect'>
+            <div className='container'>
+                <h2 className='text--center'>What to Expect on Saturday</h2>
+                <p className='text--center' style={{ marginBottom: '3rem', fontSize: '1.2rem', opacity: 0.9 }}>
+                    A 60-minute working session that shows you exactly how teams like IAS, Palatine Capital, and Moonstruck Medical shipped
+                    governed AI agents in four weeks.
+                </p>
+
+                <div className='row'>
+                    <div className='col col--6'>
+                        <div className={clsx(styles.featureCard, styles.stepCard)}>
+                            <div className={styles.stepNumber}>1</div>
+                            <h3>Live Platform Demo</h3>
+                            <p>
+                                Watch Bradley Taylor rebuild actual AnswerAgent workflows using attendee submissions. See how six
+                                disconnected tools collapse into one governed assistant in under 15 minutes.
+                            </p>
+                            <div className={styles.appFeatures}>
+                                <span>🔴 Live, not pre-recorded</span>
+                                <span>💼 Metrics surfaced from your submissions</span>
+                                <span>⚡ Interactive Q&A</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col col--6'>
+                        <div className={clsx(styles.featureCard, styles.stepCard)}>
+                            <div className={styles.stepNumber}>2</div>
+                            <h3>Proven Case Studies</h3>
+                            <p>
+                                Deep dive into how Palatine Capital saved 120 hours a month, how IAS launched in four weeks, and how
+                                Moonstruck unified nine reps—complete with dashboards, compliance notes, and stakeholder scripts.
+                            </p>
+                            <div className={styles.appFeatures}>
+                                <span>📊 Real ROI numbers</span>
+                                <span>⏱️ Deployment timelines</span>
+                                <span>✅ Measurable outcomes</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='row' style={{ marginTop: '2rem' }}>
+                    <div className='col col--6'>
+                        <div className={clsx(styles.featureCard, styles.stepCard)}>
+                            <div className={styles.stepNumber}>3</div>
+                            <h3>Framework Walkthrough</h3>
+                            <p>
+                                Get the exact four-week methodology used by IAS and other enterprise clients with week-by-week deliverables,
+                                sample Jira boards, and governance checkpoints.
+                            </p>
+                            <div className={styles.appFeatures}>
+                                <span>📋 Weekly deliverables</span>
+                                <span>🎯 Success criteria</span>
+                                <span>⚡ Implementation tips</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className='col col--6'>
+                        <div className={clsx(styles.featureCard, styles.stepCard)}>
+                            <div className={styles.stepNumber}>4</div>
+                            <h3>90-Day Pilot Program</h3>
+                            <p>
+                                Decide if the risk-free pilot program is a match. We’ll cover pricing guardrails, data residency, and how we
+                                handle exec reviews for Fortune 500 clients.
+                            </p>
+                            <div className={styles.appFeatures}>
+                                <span>🔒 No vendor lock-in</span>
+                                <span>📈 Measurable ROI</span>
+                                <span>🎯 90-day timeline</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={styles.expectationVoiceNote}>
+                    <span>🤖</span>
+                    <p>
+                        Want your scenario featured? Share it via the form or the voice coach before Friday and we’ll weave it into the live
+                        demo.
+                    </p>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function FitCallCTA() {
+    const schedulingUrl = 'https://cal.com/answerai/enterprise-ai-fit-call?duration=15'
+
+    return (
+        <section className={styles.fitCallSection} id='fit-call'>
+            <div className='container'>
+                <div className={styles.fitCallGrid}>
+                    <div className={styles.fitCallContent}>
+                        <span className={styles.bonusBadge}>High-intent next step</span>
+                        <h2>Reserve your pilot review slot</h2>
+                        <p>
+                            We open just ten 15-minute fit calls the week after the webinar. Bring your stack, procurement realities, and
+                            desired ROI—they’re designed to confirm if the 90-day pilot is a match.
+                        </p>
+                        <ul className={styles.fitCallList}>
+                            <li>✅ We map your fastest measurable win</li>
+                            <li>✅ Security & compliance checklist walkthrough</li>
+                            <li>✅ Pilot timeline aligned to your stakeholders</li>
+                        </ul>
+                        <a
+                            className={styles.fitCallButton}
+                            href={schedulingUrl}
+                            target='_blank'
+                            rel='noreferrer'
+                            onClick={() =>
+                                trackingService.trackEvent({
+                                    event: 'fit_call_clicked',
+                                    eventCategory: 'conversion',
+                                    eventLabel: 'thank-you-fit-call'
+                                })
+                            }
+                        >
+                            Book my 15-minute fit call
+                        </a>
+                        <p className={styles.fitCallScarcity}>
+                            These calls historically fill within 36 hours—profile submissions from this page get first review.
+                        </p>
+                    </div>
+
+                    <div className={styles.fitCallVoicePanel}>
+                        <div className={styles.fitCallVoiceCard}>
+                            <h3>Already shared your goals?</h3>
+                            <p>
+                                Once your form or voice notes are in, the team reviews them during the workshop and follows up if the pilot
+                                looks like a fit. Keep an eye on your inbox the week after.
+                            </p>
+                            <p className={styles.fitCallVoiceHint}>Need to add more detail? Hop back to the prep section above.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function SocialSharing() {
+    const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle')
+    const [copiedLabel, setCopiedLabel] = useState<string>('')
+    const webinarUrl =
+        typeof window !== 'undefined' ? `${window.location.origin}/webinar-enterprise-ai` : 'https://theanswer.ai/webinar-enterprise-ai'
+    const shareText =
+        'Just booked AnswerAI’s “Deploy AI Agents in 4 Weeks” workshop. Live build, governance checklist, and playbooks from IAS & Palatine. Join me:'
+    const opsMessage = `Hey team — I locked in our seat for AnswerAI's Enterprise AI workshop (${getLocalWebinarDateTime()}). It shows the exact 4-week rollout we want. Grab a spot here: ${webinarUrl}\n\nPS: Add your workflow so they cover it live: ${webinarUrl}#attendee-prep`
+    const execMessage = `Flagging an Enterprise AI session (${getLocalWebinarDateTime()}) that walks through the 4-week deployment model we’ve been evaluating. Includes ROI benchmarks + compliance templates. Register: ${webinarUrl}`
+
+    const shareLinks = {
+        linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(webinarUrl)}&title=${encodeURIComponent(
+            shareText
+        )}`,
+        twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(webinarUrl)}`,
+        email: `mailto:?subject=${encodeURIComponent('Enterprise AI Webinar - You Should Join!')}&body=${encodeURIComponent(
+            `${shareText}\n\nRegister here: ${webinarUrl}`
+        )}`
+    }
+
+    const handleCopyMessage = async (text: string, label: string) => {
+        if (typeof navigator === 'undefined' || !navigator.clipboard) {
+            setCopyState('error')
+            return
+        }
+
+        try {
+            await navigator.clipboard.writeText(text)
+            setCopyState('copied')
+            setCopiedLabel(label)
+            trackingService.trackEvent({
+                event: 'share_snippet_copied',
+                eventCategory: 'sharing',
+                eventLabel: label
+            })
+            setTimeout(() => setCopyState('idle'), 3000)
+        } catch (err) {
+            console.warn('Unable to copy share snippet', err)
+            setCopyState('error')
+        }
+    }
+
+    const copyLabel = copyState === 'copied' ? `Copied ${copiedLabel}!` : copyState === 'error' ? 'Copy failed' : 'Copy snippet'
+
+    const personaSnippets = [
+        {
+            label: 'Ops / Enablement Slack note',
+            text: opsMessage
+        },
+        {
+            label: 'Executive forward email',
+            text: execMessage
+        }
+    ]
+
+    return (
+        <section className={styles.featuresSection} id='share'>
+            <div className='container'>
+                <div className='row'>
+                    <div className='col col--8 col--offset-2'>
+                        <div className={clsx(styles.featureCard, styles.commandment)} style={{ textAlign: 'center' }}>
+                            <div className={styles.comingSoonIcon}>📢</div>
+                            <h2>Invite Your Team</h2>
+                            <p style={{ marginBottom: '2rem' }}>
+                                Perfect for CTOs, operations, and enablement leaders. Copy the snippet below for Slack/Teams or share via
+                                your favorite channel.
+                            </p>
+
+                            <div className={styles.shareActions}>
+                                <a
+                                    href={shareLinks.linkedin}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    className={clsx(styles.ctaButton, styles.ctaSecondary)}
+                                    onClick={() => trackingService.trackExternalLinkClick(shareLinks.linkedin)}
+                                >
+                                    Share on LinkedIn
+                                </a>
+
+                                <a
+                                    href={shareLinks.twitter}
+                                    target='_blank'
+                                    rel='noopener noreferrer'
+                                    className={clsx(styles.ctaButton, styles.ctaSecondary)}
+                                    onClick={() => trackingService.trackExternalLinkClick(shareLinks.twitter)}
+                                >
+                                    Post on X
+                                </a>
+
+                                <a
+                                    href={shareLinks.email}
+                                    className={clsx(styles.ctaButton, styles.ctaSecondary)}
+                                    onClick={() =>
+                                        trackingService.trackEvent({
+                                            event: 'email_share',
+                                            eventCategory: 'sharing',
+                                            eventLabel: 'webinar-email-colleagues'
+                                        })
+                                    }
+                                >
+                                    Email colleagues
+                                </a>
+                            </div>
+
+                            <div className={styles.shareSnippetsGrid}>
+                                {personaSnippets.map((snippet) => (
+                                    <div key={snippet.label} className={styles.shareSnippet}>
+                                        <label className={styles.shareSnippetLabel}>{snippet.label}</label>
+                                        <textarea value={snippet.text} readOnly aria-label={snippet.label} />
+                                        <button
+                                            type='button'
+                                            onClick={() => handleCopyMessage(snippet.text, snippet.label)}
+                                            className={styles.copyButton}
+                                        >
+                                            {copyLabel}
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+function FinalAssurance() {
+    return (
+        <section className={styles.finalAssuranceSection}>
+            <div className='container'>
+                <div className={styles.finalAssuranceCard}>
+                    <div className={styles.finalAssuranceCopy}>
+                        <h2>Share as much (or as little) as you like—your data stays with us</h2>
+                        <p>
+                            Everything you submit—whether typed or voiced—is used only to personalize Saturday and the optional pilot
+                            review. No cold calls, no surprise sequences.
+                        </p>
+                        <ul className={styles.finalAssuranceList}>
+                            <li>🔒 Secure ElevenLabs session with end-to-end encryption</li>
+                            <li>🧾 Transcript and highlights emailed only to you (or teammates you specify)</li>
+                            <li>📬 Opt out anytime—every follow-up email includes a one-click preference link</li>
+                        </ul>
+                        <div className={styles.finalAssuranceFaqs}>
+                            <div>
+                                <h3>Is the voice call required?</h3>
+                                <p>Nope. The form and the call capture the same details—use whichever gets you answers faster.</p>
+                            </div>
+                            <div>
+                                <h3>Can I do both?</h3>
+                                <p>
+                                    Absolutely. Many teams voice their goals first, then jot quick notes in the form so leadership sees
+                                    everything in writing.
+                                </p>
+                            </div>
+                            <div>
+                                <h3>What if I need a human?</h3>
+                                <p>Check the “human follow-up” box in the form and we’ll reach out once the workshop wraps.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className={styles.finalAssuranceAction}>
+                        <div className={styles.finalAssuranceWidget}>
+                            <span className={styles.bonusBadge}>Your roadmap</span>
+                            <h3>Need to add more context?</h3>
+                            <p>
+                                Head back to the prep section any time to update your notes or launch the voice coach. That keeps the team
+                                aligned to your goals.
+                            </p>
+                            <a href='#attendee-prep' className={styles.finalAssuranceButton}>
+                                Update my workshop goals
+                            </a>
+                            <p className={styles.finalAssuranceCaption}>
+                                Questions before then? Reply to the confirmation email—we read every note.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default function WebinarThankYou(): JSX.Element {
+    // Initialize page tracking
+    useEffect(() => {
+        trackingService.trackPageView('/webinar-thank-you', 'Webinar Registration Confirmed')
+
+        // Track successful conversion landing
+        trackingService.trackEvent({
+            event: 'thank_you_page_view',
+            eventCategory: 'conversion',
+            eventLabel: 'webinar-registration-confirmed',
+            value: 1
+        })
+    }, [])
+
+    return (
+        <div data-theme='dark'>
+            <Layout
+                title='Registration Confirmed - Enterprise AI Webinar'
+                description="You're registered for Saturday's enterprise AI webinar. Check your email for the webinar link, calendar invitation, and bonus Enterprise AI Readiness Checklist."
+            >
+                <ThankYouHero />
+                <main>
+                    <ConfirmationDetails />
+                    <PrepResources />
+                    <ProgressiveProfileForm />
+                    <WhatToExpect />
+                    <FitCallCTA />
+                    <SocialSharing />
+                    <FinalAssurance />
+                </main>
+                <WebinarLegalFooter />
+            </Layout>
+        </div>
+    )
+}
diff --git a/packages/docs/src/services/mailerLiteService.ts b/packages/docs/src/services/mailerLiteService.ts
new file mode 100644
index 00000000000..2bc9499ad7a
--- /dev/null
+++ b/packages/docs/src/services/mailerLiteService.ts
@@ -0,0 +1,108 @@
+import { marketingConfig } from '@site/src/config/marketingConfig'
+
+type Primitive = string | number | boolean
+
+export interface MailerLiteSubscribeOptions {
+    email: string
+    name?: string
+    fields?: Record<string, Primitive | undefined | null>
+    groups?: string[]
+    resubscribe?: boolean
+}
+
+export interface MailerLiteSubscribeResult {
+    success: boolean
+    message?: string
+    alreadySubscribed?: boolean
+    data?: Record<string, unknown>
+}
+
+class MailerLiteService {
+    private readonly enabled: boolean
+
+    constructor() {
+        this.enabled = marketingConfig.mailerLite.enabled
+    }
+
+    private buildPayload(options: MailerLiteSubscribeOptions) {
+        const payload: Record<string, unknown> = {
+            email: options.email,
+            fields: {}
+        }
+
+        if (options.name) {
+            payload.name = options.name
+        }
+
+        if (options.groups && options.groups.length > 0) {
+            payload.groups = options.groups
+        }
+
+        if (typeof options.resubscribe === 'boolean') {
+            payload.resubscribe = options.resubscribe
+        }
+
+        if (options.fields) {
+            const filteredEntries = Object.entries(options.fields).filter(
+                ([, value]) => value !== undefined && value !== null && value !== ''
+            )
+            if (filteredEntries.length > 0) {
+                payload.fields = Object.fromEntries(
+                    filteredEntries.map(([key, value]) => [key, typeof value === 'boolean' ? (value ? 'true' : 'false') : value])
+                )
+            }
+        }
+
+        return payload
+    }
+
+    async subscribe(options: MailerLiteSubscribeOptions): Promise<MailerLiteSubscribeResult> {
+        if (!this.enabled) {
+            return {
+                success: false,
+                message: 'Subscription service is temporarily unavailable.'
+            }
+        }
+
+        if (typeof window === 'undefined') {
+            return {
+                success: false,
+                message: 'Subscription is only available in the browser.'
+            }
+        }
+
+        try {
+            const response = await fetch('/api/mailerlite-subscribe', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(this.buildPayload(options))
+            })
+
+            const data = await response.json()
+
+            if (!response.ok || !data.success) {
+                return {
+                    success: false,
+                    message: data.message || 'Unable to save your details. Please try again.'
+                }
+            }
+
+            return {
+                success: true,
+                message: data.message || 'Details saved successfully!',
+                alreadySubscribed: data.alreadySubscribed,
+                data: data.data
+            }
+        } catch (error) {
+            console.error('MailerLite subscribe error', error)
+            return {
+                success: false,
+                message: 'Network error. Please try again in a moment.'
+            }
+        }
+    }
+}
+
+export const mailerLiteService = new MailerLiteService()
diff --git a/packages/docs/src/services/trackingService.ts b/packages/docs/src/services/trackingService.ts
new file mode 100644
index 00000000000..73c4c05e0f7
--- /dev/null
+++ b/packages/docs/src/services/trackingService.ts
@@ -0,0 +1,368 @@
+import { marketingConfig } from '@site/src/config/marketingConfig'
+
+interface TrackingEvent {
+    event: string
+    eventCategory?: string
+    eventLabel?: string
+    value?: number
+    customParameters?: Record<string, any>
+}
+
+interface ConversionData {
+    email?: string
+    firstName?: string
+    lastName?: string
+    company?: string
+    jobTitle?: string
+    leadScore?: number
+    value?: number
+}
+
+export class TrackingService {
+    private initialized = false
+
+    constructor() {
+        if (typeof window !== 'undefined') {
+            this.initialize()
+        }
+    }
+
+    // Initialize all tracking services
+    private initialize(): void {
+        if (this.initialized) return
+
+        this.initializeGoogleAnalytics()
+        this.initializeLinkedInPixel()
+        this.initializeFacebookPixel()
+
+        this.initialized = true
+        console.log('Tracking services initialized')
+    }
+
+    // Google Analytics 4 setup
+    private initializeGoogleAnalytics(): void {
+        const gaId = marketingConfig.tracking.googleAnalyticsId
+        if (!gaId) return
+
+        try {
+            // Load gtag script
+            const gtagScript = document.createElement('script')
+            gtagScript.async = true
+            gtagScript.src = `https://www.googletagmanager.com/gtag/js?id=${gaId}`
+            document.head.appendChild(gtagScript)
+
+            // Initialize gtag
+            window.dataLayer = window.dataLayer || []
+            const gtag = (...args: any[]) => {
+                window.dataLayer.push(args)
+            }
+            window.gtag = gtag
+
+            gtag('js', new Date())
+            gtag('config', gaId, {
+                send_page_view: true,
+                custom_map: {
+                    custom_parameter_1: 'lead_score',
+                    custom_parameter_2: 'company_size'
+                }
+            })
+
+            console.log('Google Analytics initialized:', gaId)
+        } catch (error) {
+            console.error('Google Analytics initialization failed:', error)
+        }
+    }
+
+    // LinkedIn Insight Tag setup
+    private initializeLinkedInPixel(): void {
+        const linkedInPixel = marketingConfig.tracking.linkedInPixel
+        if (!linkedInPixel) return
+
+        try {
+            // Load LinkedIn Insight Tag
+            const linkedInScript = document.createElement('script')
+            linkedInScript.type = 'text/javascript'
+            linkedInScript.innerHTML = `
+        _linkedin_partner_id = "${linkedInPixel}";
+        window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+        window._linkedin_data_partner_ids.push(_linkedin_partner_id);
+      `
+            document.head.appendChild(linkedInScript)
+
+            // Load LinkedIn tracking script
+            const linkedInTrackingScript = document.createElement('script')
+            linkedInTrackingScript.type = 'text/javascript'
+            linkedInTrackingScript.async = true
+            linkedInTrackingScript.src = 'https://snap.licdn.com/li.lms-analytics/insight.min.js'
+            document.head.appendChild(linkedInTrackingScript)
+
+            // Initialize lintrk function
+            window.lintrk =
+                window.lintrk ||
+                function (...args: any[]) {
+                    ;(window.lintrk.q = window.lintrk.q || []).push(args)
+                }
+
+            console.log('LinkedIn Pixel initialized:', linkedInPixel)
+        } catch (error) {
+            console.error('LinkedIn Pixel initialization failed:', error)
+        }
+    }
+
+    // Facebook Pixel setup
+    private initializeFacebookPixel(): void {
+        const facebookPixel = marketingConfig.tracking.facebookPixel
+        if (!facebookPixel) return
+
+        try {
+            // Facebook Pixel Code
+            window.fbq =
+                window.fbq ||
+                function (...args: any[]) {
+                    ;(window.fbq.q = window.fbq.q || []).push(args)
+                }
+            window._fbq = window.fbq
+            window.fbq.push = window.fbq
+            window.fbq.loaded = true
+            window.fbq.version = '2.0'
+            window.fbq.queue = []
+
+            const facebookScript = document.createElement('script')
+            facebookScript.async = true
+            facebookScript.src = 'https://connect.facebook.net/en_US/fbevents.js'
+            document.head.appendChild(facebookScript)
+
+            window.fbq('init', facebookPixel)
+            window.fbq('track', 'PageView')
+
+            console.log('Facebook Pixel initialized:', facebookPixel)
+        } catch (error) {
+            console.error('Facebook Pixel initialization failed:', error)
+        }
+    }
+
+    // Track custom events
+    trackEvent(event: TrackingEvent): void {
+        const { event: eventName, eventCategory, eventLabel, value, customParameters } = event
+
+        // Google Analytics 4 event tracking
+        if (window.gtag) {
+            window.gtag('event', eventName, {
+                event_category: eventCategory,
+                event_label: eventLabel,
+                value: value,
+                ...customParameters
+            })
+        }
+
+        // LinkedIn conversion tracking
+        if (window.lintrk && eventName === 'conversion') {
+            window.lintrk('track', {
+                conversion_id: eventLabel || 'webinar_registration'
+            })
+        }
+
+        // Facebook conversion tracking
+        if (window.fbq && eventName === 'conversion') {
+            window.fbq('track', 'Lead', {
+                content_name: eventLabel,
+                value: value,
+                currency: 'USD'
+            })
+        }
+
+        console.log('Event tracked:', eventName, { eventCategory, eventLabel, value })
+    }
+
+    // Track webinar registration conversion
+    trackWebinarRegistration(data: ConversionData): void {
+        const eventData = {
+            event: 'webinar_registration',
+            eventCategory: 'engagement',
+            eventLabel: 'enterprise-ai-webinar',
+            value: 1,
+            customParameters: {
+                lead_score: data.leadScore,
+                company: data.company,
+                job_title: data.jobTitle
+            }
+        }
+
+        this.trackEvent(eventData)
+
+        // Enhanced conversion tracking for Google Ads
+        if (window.gtag) {
+            window.gtag('event', 'conversion', {
+                send_to: 'AW-CONVERSION_ID/CONVERSION_LABEL', // Replace with actual conversion ID
+                value: data.value || 100, // Estimated lead value
+                currency: 'USD',
+                transaction_id: `webinar_${Date.now()}`,
+                user_data: {
+                    email_address: data.email,
+                    first_name: data.firstName,
+                    last_name: data.lastName,
+                    job_title: data.jobTitle,
+                    company: data.company
+                }
+            })
+        }
+    }
+
+    // Track page views
+    trackPageView(pagePath: string, pageTitle?: string): void {
+        if (window.gtag) {
+            window.gtag('event', 'page_view', {
+                page_location: window.location.href,
+                page_path: pagePath,
+                page_title: pageTitle || document.title
+            })
+        }
+
+        if (window.fbq) {
+            window.fbq('track', 'PageView')
+        }
+
+        console.log('Page view tracked:', pagePath)
+    }
+
+    // Track form interactions
+    trackFormInteraction(action: 'start' | 'complete' | 'abandon', formName: string): void {
+        this.trackEvent({
+            event: `form_${action}`,
+            eventCategory: 'form_interaction',
+            eventLabel: formName,
+            value: action === 'complete' ? 1 : 0
+        })
+    }
+
+    // Track content engagement
+    trackContentEngagement(contentType: string, contentName: string, engagementTime?: number): void {
+        this.trackEvent({
+            event: 'content_engagement',
+            eventCategory: 'engagement',
+            eventLabel: `${contentType}:${contentName}`,
+            value: engagementTime,
+            customParameters: {
+                content_type: contentType,
+                content_name: contentName
+            }
+        })
+    }
+
+    // Track video interactions
+    trackVideoInteraction(action: 'play' | 'pause' | 'complete', videoName: string, progress?: number): void {
+        this.trackEvent({
+            event: `video_${action}`,
+            eventCategory: 'video',
+            eventLabel: videoName,
+            value: progress,
+            customParameters: {
+                video_name: videoName,
+                video_progress: progress
+            }
+        })
+    }
+
+    // Track scroll depth
+    trackScrollDepth(depth: number): void {
+        this.trackEvent({
+            event: 'scroll_depth',
+            eventCategory: 'engagement',
+            eventLabel: `${depth}%`,
+            value: depth
+        })
+    }
+
+    // Get UTM parameters from URL
+    getUtmParameters(): Record<string, string> {
+        if (typeof window === 'undefined') return {}
+
+        const urlParams = new URLSearchParams(window.location.search)
+        return {
+            utm_source: urlParams.get('utm_source') || '',
+            utm_medium: urlParams.get('utm_medium') || '',
+            utm_campaign: urlParams.get('utm_campaign') || '',
+            utm_term: urlParams.get('utm_term') || '',
+            utm_content: urlParams.get('utm_content') || ''
+        }
+    }
+
+    // Store UTM parameters in session storage for attribution
+    storeUtmParameters(): void {
+        if (typeof window === 'undefined') return
+
+        const utmParams = this.getUtmParameters()
+        const hasUtmParams = Object.values(utmParams).some((value) => value !== '')
+
+        if (hasUtmParams) {
+            sessionStorage.setItem('webinar_utm_params', JSON.stringify(utmParams))
+            console.log('UTM parameters stored:', utmParams)
+        }
+    }
+
+    // Get stored UTM parameters
+    getStoredUtmParameters(): Record<string, string> {
+        if (typeof window === 'undefined') return {}
+
+        const storedParams = sessionStorage.getItem('webinar_utm_params')
+        return storedParams ? JSON.parse(storedParams) : {}
+    }
+
+    // Track external link clicks
+    trackExternalLinkClick(url: string): void {
+        this.trackEvent({
+            event: 'click',
+            eventCategory: 'external_link',
+            eventLabel: url,
+            customParameters: {
+                outbound: true,
+                link_url: url
+            }
+        })
+    }
+
+    // Track file downloads
+    trackFileDownload(fileName: string, fileType: string): void {
+        this.trackEvent({
+            event: 'file_download',
+            eventCategory: 'download',
+            eventLabel: fileName,
+            customParameters: {
+                file_name: fileName,
+                file_type: fileType
+            }
+        })
+    }
+
+    // Initialize scroll tracking
+    initializeScrollTracking(): void {
+        if (typeof window === 'undefined') return
+
+        let scrollThresholds = [25, 50, 75, 100]
+        let firedThresholds: number[] = []
+
+        const handleScroll = () => {
+            const scrollTop = window.pageYOffset
+            const documentHeight = document.documentElement.scrollHeight - window.innerHeight
+            const scrollPercent = Math.round((scrollTop / documentHeight) * 100)
+
+            scrollThresholds.forEach((threshold) => {
+                if (scrollPercent >= threshold && !firedThresholds.includes(threshold)) {
+                    this.trackScrollDepth(threshold)
+                    firedThresholds.push(threshold)
+                }
+            })
+        }
+
+        window.addEventListener('scroll', handleScroll, { passive: true })
+    }
+}
+
+// Export singleton instance
+export const trackingService = new TrackingService()
+
+// Initialize tracking when the service is imported
+if (typeof window !== 'undefined') {
+    trackingService.storeUtmParameters()
+    trackingService.initializeScrollTracking()
+}
diff --git a/packages/docs/src/types/tracking.d.ts b/packages/docs/src/types/tracking.d.ts
new file mode 100644
index 00000000000..4bf086ccbf5
--- /dev/null
+++ b/packages/docs/src/types/tracking.d.ts
@@ -0,0 +1,33 @@
+// Global tracking script declarations
+declare global {
+    interface Window {
+        // Google Analytics 4
+        gtag?: (...args: any[]) => void
+        dataLayer?: any[]
+
+        // LinkedIn Insight Tag
+        lintrk?: {
+            (...args: any[]): void
+            q?: any[]
+        }
+        _linkedin_partner_id?: string
+        _linkedin_data_partner_ids?: string[]
+
+        // Facebook Pixel
+        fbq?: {
+            (...args: any[]): void
+            push?: any
+            loaded?: boolean
+            version?: string
+            queue?: any[]
+            q?: any[]
+        }
+        _fbq?: any
+
+        // Hotjar
+        hj?: (...args: any[]) => void
+        hjBootstrap?: any
+    }
+}
+
+export {}
diff --git a/packages/embed b/packages/embed
index 8581eff48a5..d155b893cce 160000
--- a/packages/embed
+++ b/packages/embed
@@ -1 +1 @@
-Subproject commit 8581eff48a557ebc142554beebcbf0883351a2c1
+Subproject commit d155b893cce12f39cfac596eca59480459b1344d
diff --git a/packages/server/src/aai-utils/billing/stripe/StripeProvider.ts b/packages/server/src/aai-utils/billing/stripe/StripeProvider.ts
index fcc7b5d8703..c3491657b12 100644
--- a/packages/server/src/aai-utils/billing/stripe/StripeProvider.ts
+++ b/packages/server/src/aai-utils/billing/stripe/StripeProvider.ts
@@ -298,11 +298,6 @@ export class StripeProvider {
         try {
             log.info('Syncing usage to Stripe', { count: creditsData.length })
 
-            // Validate batch size
-            if (creditsData.length > BILLING_CONFIG.VALIDATION.MAX_BATCH_SIZE) {
-                throw new Error(`Batch size ${creditsData.length} exceeds maximum of ${BILLING_CONFIG.VALIDATION.MAX_BATCH_SIZE}`)
-            }
-
             // Parallel fetch meters and prepare events
             const [meters] = await Promise.all([this.stripeClient.billing.meters.list()])
             const metersMap = new Map(meters.data.map((meter) => [meter.display_name || meter.id, meter.id]))
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 689e5e22635..4a5b7c3d5b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1341,7 +1341,7 @@ importers:
                 specifier: ^0.3.0
                 version: 0.3.0(@types/dom-mediacapture-record@1.0.22)(react@18.3.1)
             '@mdx-js/react':
-                specifier: ^3.1.1
+                specifier: ^3.1.0
                 version: 3.1.1(@types/react@18.2.15)(react@18.3.1)
             clsx:
                 specifier: ^2.1.1
@@ -1352,6 +1352,9 @@ importers:
             docusaurus-theme-openapi-docs:
                 specifier: ^4.5.1
                 version: 4.5.1(7hx3uma4ab4bnmacr57fqyh43e)
+            dotenv:
+                specifier: ^16.6.1
+                version: 16.6.1
             js-yaml:
                 specifier: ^4.1.0
                 version: 4.1.0
@@ -1387,7 +1390,7 @@ importers:
     packages/embed:
         dependencies:
             '@babel/core':
-                specifier: ^7.28.4
+                specifier: ^7.28.0
                 version: 7.28.4
             '@microsoft/fetch-event-source':
                 specifier: ^2.0.1
@@ -1408,8 +1411,8 @@ importers:
                 specifier: ^3.0.3
                 version: 3.0.3
             dotenv:
-                specifier: ^17.2.2
-                version: 17.2.2
+                specifier: ^16.6.1
+                version: 16.6.1
             express:
                 specifier: '>=4.19.2'
                 version: 5.1.0
@@ -1430,10 +1433,10 @@ importers:
                 version: 3.6.2
             solid-element:
                 specifier: 1.7.0
-                version: 1.7.0(solid-js@1.9.9)
+                version: 1.7.0(solid-js@1.9.4)
             solid-js:
-                specifier: 1.9.9
-                version: 1.9.9
+                specifier: 1.9.4
+                version: 1.9.4
             zod:
                 specifier: ^3.25.76
                 version: 3.25.76
@@ -1490,13 +1493,13 @@ importers:
                 specifier: ^8.57.1
                 version: 8.57.1
             eslint-config-next:
-                specifier: ^14.2.32
-                version: 14.2.32(eslint@8.57.1)(typescript@5.0.3)
+                specifier: 13.2.4
+                version: 13.2.4(eslint@8.57.1)(typescript@5.0.3)
             eslint-config-prettier:
                 specifier: ^9.1.2
                 version: 9.1.2(eslint@8.57.1)
             eslint-plugin-prettier:
-                specifier: ^5.5.4
+                specifier: ^5.5.3
                 version: 5.5.4(@types/eslint@9.6.1)(eslint-config-prettier@9.1.2(eslint@8.57.1))(eslint@8.57.1)(prettier@3.6.2)
             eslint-plugin-react:
                 specifier: ^7.37.5
@@ -1523,13 +1526,13 @@ importers:
                 specifier: 4.0.2
                 version: 4.0.2(postcss@8.5.6)(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@18.15.11)(typescript@5.0.3))
             rollup-plugin-serve:
-                specifier: 3.0.0
-                version: 3.0.0
+                specifier: 2.0.2
+                version: 2.0.2
             rollup-plugin-typescript-paths:
-                specifier: 1.5.0
-                version: 1.5.0(typescript@5.0.3)
+                specifier: 1.4.0
+                version: 1.4.0(typescript@5.0.3)
             tailwindcss:
-                specifier: ^3.4.17
+                specifier: ^3.3.1
                 version: 3.4.17(ts-node@10.9.2(@swc/core@1.13.5(@swc/helpers@0.5.17))(@types/node@18.15.11)(typescript@5.0.3))
             typescript:
                 specifier: 5.0.3
@@ -6174,6 +6177,9 @@ packages:
     '@next/env@14.2.32':
         resolution: { integrity: sha512-n9mQdigI6iZ/DF6pCTwMKeWgF2e8lg7qgt5M7HXMLtyhZYMnf/u905M18sSpPmHL9MKp9JHo56C6jrD2EvWxng== }
 
+    '@next/eslint-plugin-next@13.2.4':
+        resolution: { integrity: sha512-ck1lI+7r1mMJpqLNa3LJ5pxCfOB1lfJncKmRJeJxcJqcngaFwylreLP7da6Rrjr6u2gVRTfmnkSkjc80IiQCwQ== }
+
     '@next/eslint-plugin-next@14.2.32':
         resolution: { integrity: sha512-tyZMX8g4cWg/uPW4NxiJK13t62Pab47SKGJGVZJa6YtFwtfrXovH4j1n9tdpRdXW03PGQBugYEVGM7OhWfytdA== }
 
@@ -12003,6 +12009,15 @@ packages:
         engines: { node: '>=6.0' }
         hasBin: true
 
+    eslint-config-next@13.2.4:
+        resolution: { integrity: sha512-lunIBhsoeqw6/Lfkd6zPt25w1bn0znLA/JCL+au1HoEpSb4/PpsOYsYtgV/q+YPsoKIOzFyU5xnb04iZnXjUvg== }
+        peerDependencies:
+            eslint: ^7.23.0 || ^8.0.0
+            typescript: '>=3.3.1'
+        peerDependenciesMeta:
+            typescript:
+                optional: true
+
     eslint-config-next@14.2.32:
         resolution: { integrity: sha512-mP/NmYtDBsKlKIOBnH+CW+pYeyR3wBhE+26DAqQ0/aRtEBeTEjgY2wAFUugUELkTLmrX6PpuMSSTpOhz7j9kdQ== }
         peerDependencies:
@@ -13066,6 +13081,10 @@ packages:
         resolution: { integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== }
         deprecated: Glob versions prior to v9 are no longer supported
 
+    glob@7.1.7:
+        resolution: { integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ== }
+        deprecated: Glob versions prior to v9 are no longer supported
+
     glob@7.2.3:
         resolution: { integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q== }
         deprecated: Glob versions prior to v9 are no longer supported
@@ -18854,6 +18873,9 @@ packages:
         peerDependencies:
             postcss: '>=8.4.31'
 
+    rollup-plugin-serve@2.0.2:
+        resolution: { integrity: sha512-ALqyTbPhlf7FZ5RzlbDvMYvbKuCHWginJkTo6dMsbgji/a78IbsXox+pC83HENdkTRz8OXrTj+aShp3+3ratpg== }
+
     rollup-plugin-serve@3.0.0:
         resolution: { integrity: sha512-DjVRhbwC0OgP1Q1sj8Lvx12ee60UTZM767kkjT61sYKHw/wLpANAw3VZN5ZMa5NlvO8bYpfTaqiUrW+icAjXFg== }
 
@@ -18868,11 +18890,6 @@ packages:
         peerDependencies:
             typescript: '>=3.4'
 
-    rollup-plugin-typescript-paths@1.5.0:
-        resolution: { integrity: sha512-zly2aiGNjYJNq5YUi6eyGrQnCYUQ8b5czOtHZIGriwG9U3Ba2F9hlSklafXCdsNulK/IlNmE0Kzj0h+fVV32pA== }
-        peerDependencies:
-            typescript: '>=3.4'
-
     rollup-pluginutils@2.8.2:
         resolution: { integrity: sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== }
 
@@ -19366,8 +19383,8 @@ packages:
         peerDependencies:
             solid-js: ^1.7.0
 
-    solid-js@1.9.9:
-        resolution: { integrity: sha512-A0ZBPJQldAeGCTW0YRYJmt7RCeh5rbFfPZ2aOttgYnctHE7HgKeHCBB/PVc2P7eOfmNXqMFFFoYYdm3S4dcbkA== }
+    solid-js@1.9.4:
+        resolution: { integrity: sha512-ipQl8FJ31bFUoBNScDQTG3BjN6+9Rg+Q+f10bUbnO6EOTTf5NGerJeHc7wyu5I4RMHEl/WwZwUmy/PTRgxxZ8g== }
 
     sort-css-media-queries@2.2.0:
         resolution: { integrity: sha512-0xtkGhWCC9MGt/EzgnvbbbKhqWjl1+/rncmhTh5qCpbYguXh6S/qwePfv/JQ8jePXXmqingylxoC49pCkSPIbA== }
@@ -28154,6 +28171,10 @@ snapshots:
 
     '@next/env@14.2.32': {}
 
+    '@next/eslint-plugin-next@13.2.4':
+        dependencies:
+            glob: 7.1.7
+
     '@next/eslint-plugin-next@14.2.32':
         dependencies:
             glob: 10.3.10
@@ -35440,6 +35461,25 @@ snapshots:
         optionalDependencies:
             source-map: 0.6.1
 
+    eslint-config-next@13.2.4(eslint@8.57.1)(typescript@5.0.3):
+        dependencies:
+            '@next/eslint-plugin-next': 13.2.4
+            '@rushstack/eslint-patch': 1.12.0
+            '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.0.3)
+            eslint: 8.57.1
+            eslint-import-resolver-node: 0.3.9
+            eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
+            eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.0.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+            eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
+            eslint-plugin-react: 7.37.5(eslint@8.57.1)
+            eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
+        optionalDependencies:
+            typescript: 5.0.3
+        transitivePeerDependencies:
+            - eslint-import-resolver-webpack
+            - eslint-plugin-import-x
+            - supports-color
+
     eslint-config-next@14.2.32(eslint@7.32.0)(typescript@5.5.4):
         dependencies:
             '@next/eslint-plugin-next': 14.2.32
@@ -35460,26 +35500,6 @@ snapshots:
             - eslint-plugin-import-x
             - supports-color
 
-    eslint-config-next@14.2.32(eslint@8.57.1)(typescript@5.0.3):
-        dependencies:
-            '@next/eslint-plugin-next': 14.2.32
-            '@rushstack/eslint-patch': 1.12.0
-            '@typescript-eslint/eslint-plugin': 5.62.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.0.3))(eslint@8.57.1)(typescript@5.0.3)
-            '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.0.3)
-            eslint: 8.57.1
-            eslint-import-resolver-node: 0.3.9
-            eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
-            eslint-plugin-import: 2.32.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.0.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
-            eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
-            eslint-plugin-react: 7.37.5(eslint@8.57.1)
-            eslint-plugin-react-hooks: 4.6.2(eslint@8.57.1)
-        optionalDependencies:
-            typescript: 5.0.3
-        transitivePeerDependencies:
-            - eslint-import-resolver-webpack
-            - eslint-plugin-import-x
-            - supports-color
-
     eslint-config-prettier@8.10.2(eslint@7.32.0):
         dependencies:
             eslint: 7.32.0
@@ -37019,6 +37039,15 @@ snapshots:
             once: 1.4.0
             path-is-absolute: 1.0.1
 
+    glob@7.1.7:
+        dependencies:
+            fs.realpath: 1.0.0
+            inflight: 1.0.6
+            inherits: 2.0.4
+            minimatch: 3.1.2
+            once: 1.4.0
+            path-is-absolute: 1.0.1
+
     glob@7.2.3:
         dependencies:
             fs.realpath: 1.0.0
@@ -44615,6 +44644,11 @@ snapshots:
         transitivePeerDependencies:
             - ts-node
 
+    rollup-plugin-serve@2.0.2:
+        dependencies:
+            mime: 4.0.7
+            opener: 1.5.2
+
     rollup-plugin-serve@3.0.0:
         dependencies:
             mime: 4.0.7
@@ -44628,13 +44662,13 @@ snapshots:
             serialize-javascript: 4.0.0
             terser: 5.44.0
 
-    rollup-plugin-typescript-paths@1.4.0(typescript@5.5.4):
+    rollup-plugin-typescript-paths@1.4.0(typescript@5.0.3):
         dependencies:
-            typescript: 5.5.4
+            typescript: 5.0.3
 
-    rollup-plugin-typescript-paths@1.5.0(typescript@5.0.3):
+    rollup-plugin-typescript-paths@1.4.0(typescript@5.5.4):
         dependencies:
-            typescript: 5.0.3
+            typescript: 5.5.4
 
     rollup-pluginutils@2.8.2:
         dependencies:
@@ -45271,12 +45305,12 @@ snapshots:
             ip-address: 10.0.1
             smart-buffer: 4.2.0
 
-    solid-element@1.7.0(solid-js@1.9.9):
+    solid-element@1.7.0(solid-js@1.9.4):
         dependencies:
             component-register: 0.8.8
-            solid-js: 1.9.9
+            solid-js: 1.9.4
 
-    solid-js@1.9.9:
+    solid-js@1.9.4:
         dependencies:
             csstype: 3.1.3
             seroval: 1.3.2