/* ==========================================================================
   FLUENT BCI - CENTRALIZED DESIGN TOKENS (SINGLE SOURCE OF TRUTH)
   Controls all colors, fonts, font sizes, spacing, radii, shadows, and motion
   across the entire website. Loaded globally before all other stylesheets.
   ========================================================================== */

/* Official Inter v4.1 ss03 round curly quotation marks & apostrophes (SIL OFL 1.1).
   Google Fonts strips OpenType `ss03` from its Inter subset, leaving straight
   wedge ticks by default; this 1.8 KB variable subset restores round 66/99 marks
   site-wide while preserving Inter's exact vertical metrics and variable weights. */
@font-face {
    font-family: 'Inter Round Quotes';
    src: url('../fonts/InterRoundQuotes-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+2018-2019, U+201C-201D;
}

/* Self-hosted primary typography subsets (SIL OFL 1.1) — zero third-party font connections */
@font-face {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/Epilogue-Variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Epilogue';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('../fonts/Epilogue-Variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/Inter-Variable-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/Inter-Variable-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Raleway-Bold-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Raleway-Bold-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ======================================================================
       1. TYPOGRAPHY FAMILIES, FLUID SCALE, WEIGHTS & RHYTHM
       ====================================================================== */
    --font-heading: 'Epilogue', sans-serif;
    --font-body: 'Inter Round Quotes', 'Inter', sans-serif;
    --font-brand: 'Raleway', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;
    --font-ds: var(--font-body);

    /* Fluid Product Type Scale (rem + vw for WCAG 1.4.4 zoom scaling) */
    --type-hero: clamp(2.5rem, 1.5rem + 3.5vw, 4rem);
    --type-hero-subhead: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);
    --type-page-hero-lead: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
    --type-headline: clamp(2rem, 1.25rem + 2.8vw, 3.5rem);
    --type-headline-secondary: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);
    --type-subhead: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
    --type-lead-copy: clamp(1.0625rem, 0.98rem + 0.28vw, 1.1875rem);
    --type-body: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
    --type-availability: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
    --type-card-headline: clamp(1.3125rem, 1.05rem + 0.9vw, 1.75rem);
    --type-card-title-sm: clamp(1.1875rem, 1.08rem + 0.35vw, 1.375rem);
    --type-card-subhead: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
    --type-price-figure: clamp(2.125rem, 1.5rem + 2.2vw, 3rem);
    --type-panel-copy: clamp(1.25rem, 1.02rem + 0.8vw, 1.625rem);
    --type-scroll-callout: clamp(1.3125rem, 1.1rem + 0.7vw, 1.625rem);
    --type-quote: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
    --type-triptych-quote: clamp(1.75rem, 1.25rem + 1.8vw, 2.625rem);
    --type-triptych-author: clamp(1rem, 0.88rem + 0.45vw, 1.25rem);
    --type-quiz-question: clamp(1.375rem, 1.15rem + 0.85vw, 1.75rem);
    --type-subnav-title-mobile: clamp(0.9375rem, 0.7rem + 1.2vw, 1.125rem);
    --type-eyebrow: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
    --type-caption: 13px;
    --type-micro: 12px;
    --type-badge: 12px;

    /* Standard Type Sizes */
    --text-hero-xl: 80px;
    --text-step-num: 64px;
    --text-display: 56px;
    --text-h1: 48px;
    --text-h2: 44px;
    --text-h2-alt: 42px;
    --text-h3: 36px;
    --text-h3-sm: 34px;
    --text-title: 32px;
    --text-title-sm: 30px;
    --text-h4: 28px;
    --text-stat: 26px;
    --text-lead: 24px;
    --text-xl: 22px;
    --text-lg: 20px;
    --text-md: 18px;
    --text-sub: 17px;
    --text-base: 16px;
    --text-btn: 15px;
    --text-sm: 14px;
    --text-xs: 12px;

    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.08;
    --leading-snug: 1.2;
    --leading-subhead: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --leading-prose: 1.8;
    --reel-row-h: 3.2em;
    --reel-row-h-sm: 2.4em;

    /* Letter Spacing */
    --tracking-brand: 0;
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-snug: -0.015em;
    --tracking-subtle: -0.01em;
    --tracking-normal: 0;
    --tracking-slight: 0.01em;
    --tracking-badge: 0.04em;
    --tracking-caps: 0.06em;
    --tracking-wide: 0.06em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.1em;

    /* ======================================================================
       2. COLOR PALETTE & SURFACE TOKENS
       ====================================================================== */
    /* Fluent Brand Identity & Data Visualization Accents */
    --fluent-blue: #4285f5;
    --fluent-green: #34a754;
    --fluent-yellow: #fbbc04;
    --fluent-yellow-text: #d4a000;
    --fluent-orange: #d97757;
    --fluent-orange-hover: #c46447;

    /* Base & Brand RGB Channels (for alpha compositing) */
    --rgb-black: 0, 0, 0;
    --rgb-white: 255, 255, 255;
    --fluent-blue-rgb: 66, 133, 245;
    --fluent-green-rgb: 52, 167, 84;
    --fluent-yellow-rgb: 251, 188, 4;
    --fluent-orange-rgb: 217, 119, 87;

    /* Unified Product Surfaces */
    --ds-bg-white: #ffffff;
    --ds-bg-light: #f5f5f7;
    --ds-bg-dark: #000000;
    --ds-bg-titanium: #0c0d0e;
    --ds-bg-card: #161617;
    --ds-bg-gray-box: var(--ds-bg-light);
    --ds-surface-hover: #e5e5ea;
    --ds-avatar-bg: var(--ds-surface-hover);
    --ds-card-hover-bg: var(--ds-bg-white);
    --ds-border-control: #d2d2d7;
    --ds-control-fill: rgba(118, 118, 128, 0.12);
    --ds-control-fill-hover: rgba(118, 118, 128, 0.2);
    --ds-glass-light: rgba(var(--rgb-white), 0.78);
    --ds-glass-dark: rgba(var(--fluent-bg-rgb), 0.78);
    --ds-glass-menu: rgba(var(--rgb-white), 0.96);
    --ds-glass-mobile: rgba(var(--rgb-white), 0.98);

    /* Unified Typography Colors (5-Token Hierarchy) */
    --ds-text-dark: #1d1d1f;
    --ds-text-secondary-dark: #3a3a3c;
    --ds-text-muted-dark: #6e6e73;
    --ds-text-light: #f5f5f7;
    --ds-text-muted-light: #86868b;
    --ds-text-eyebrow-dark: var(--ds-text-secondary-dark);

    /* Unified Interactive & Semantic Accents */
    --ds-blue: #0071e3;
    --ds-blue-rgb: 0, 113, 227;
    --ds-blue-hover: #0077ed;
    --ds-blue-accent: #2997ff;
    --ds-blue-chip-end: #47a1ff;
    --ds-blue-tint: rgba(var(--ds-blue-rgb), 0.08);
    --ds-blue-surface: #f0f7ff;

    /* Legacy Cyan Aliased to Interactive Blue for Unified Links */
    --fluent-cyan: var(--ds-blue);
    --fluent-cyan-hover: var(--ds-blue-hover);
    --fluent-cyan-rgb: var(--ds-blue-rgb);

    --ds-green: #34c759;
    --ds-green-rgb: 52, 199, 89;
    --ds-green-pop-start: #1db954;
    --ds-green-dark: #248a3d;
    --ds-green-dark-rgb: 36, 138, 61;
    --ds-green-badge-bg: #e8f5e9;
    --ds-green-badge-text: var(--ds-green-dark);

    --ds-orange: #ff6b35;
    --ds-orange-end: #ff9500;
    --ds-orange-rgb: 255, 107, 53;

    --ds-purple: #6c5ce7;
    --ds-purple-rgb: 108, 92, 231;
    --ds-purple-accent: #7c5dfa;
    --ds-purple-surface-end: #f6f3ff;
    --ds-purple-tint: rgba(var(--ds-purple-rgb), 0.1);
    --ds-purple-tint-soft: rgba(var(--ds-purple-rgb), 0.08);
    --ds-purple-surface: linear-gradient(135deg, var(--ds-bg-white) 0%, var(--ds-purple-surface-end) 100%);

    /* Shared Gradients */
    --gradient-brand-heading: linear-gradient(90deg, var(--fluent-blue), var(--fluent-green), var(--fluent-yellow));
    --gradient-pop-blue: linear-gradient(135deg, var(--ds-blue) 0%, var(--ds-blue-accent) 100%);
    --gradient-pop-green: linear-gradient(135deg, var(--ds-green-pop-start) 0%, var(--ds-green) 100%);
    --gradient-pop-orange: linear-gradient(135deg, var(--ds-orange) 0%, var(--ds-orange-end) 100%);
    --gradient-light-bento: linear-gradient(180deg, var(--ds-bg-white) 0%, var(--ds-bg-light) 100%);

    /* SVG Illustration, Diagram & Carousel Overlay Colors */
    --svg-icon-slate: #5e5d6c;
    --svg-icon-slate-light: #686776;
    --svg-icon-slate-dark: #52515f;
    --svg-plat-neutral: #8e8e93;
    --svg-mic-bar-1: #b48bbd;
    --svg-mic-bar-2: #957dad;
    --svg-mic-bar-3: #8294c4;
    --svg-mic-bar-4: #9bb1d8;

    --ribbon-mic-start: #dbe6ff;
    --ribbon-mic-mid: #c5d5ff;
    --ribbon-mic-end: #f28b94;
    --ribbon-context-start: #ffd8cc;
    --ribbon-context-mid: #ffcab8;
    --ribbon-context-end: #fbd784;
    --ribbon-profile-start: #d4eaff;
    --ribbon-profile-mid: #bce0ff;
    --ribbon-profile-end: #9be7d4;
    --ribbon-expr-start: #d4e0ff;
    --ribbon-expr-mid: #c5cef9;
    --ribbon-expr-end: #d49ef6;
    --ribbon-out-1: #d6a5f8;
    --ribbon-out-2: #bfe7ec;
    --ribbon-out-3: #e5f4f5;

    --carousel-tone-fill: rgba(163, 222, 186, 0.28);
    --carousel-tone-stroke: rgba(155, 219, 186, 0.88);
    --carousel-tone-ripple: rgba(200, 245, 220, 0.9);
    --carousel-tone-ring-fill: rgba(36, 56, 62, 0.52);
    --carousel-humour-fill: rgba(156, 178, 227, 0.34);
    --carousel-humour-stroke: rgba(168, 194, 242, 0.88);
    --carousel-humour-ripple: rgba(205, 220, 255, 0.9);
    --carousel-humour-ring-fill: rgba(36, 50, 72, 0.52);
    --carousel-ring-stroke: #f5f9fc;

    /* ======================================================================
       2B. CENTRALIZED BUTTON TOKENS (ALL SITE-WIDE CTAS & CONTROLS)
       ====================================================================== */
    /* Primary CTA Pill Buttons (.ds-btn--primary, .fluent-btn, .scroll-learn-more, .contact-button, .popout-btn--primary) */
    --btn-primary-bg: var(--ds-blue);
    --btn-primary-bg-hover: var(--ds-blue-hover);
    --btn-primary-text: var(--ds-bg-white);
    --btn-primary-shadow: 0 8px 20px rgba(var(--ds-blue-rgb), 0.25);
    --btn-primary-radius: var(--radius-pill);

    /* Secondary Outline Pill Buttons on Light Surfaces (.ds-btn--secondary) */
    --btn-secondary-bg: transparent;
    --btn-secondary-text: var(--ds-blue);
    --btn-secondary-border: var(--ds-blue);
    --btn-secondary-bg-hover: var(--ds-blue);
    --btn-secondary-text-hover: var(--ds-bg-white);

    /* Secondary Translucent Pill Buttons on Dark Surfaces (.theme-dark .ds-btn--secondary, .popout-btn--secondary) */
    --btn-secondary-dark-bg: rgba(var(--rgb-white), 0.07);
    --btn-secondary-dark-text: var(--ds-bg-white);
    --btn-secondary-dark-border: rgba(var(--rgb-white), 0.35);
    --btn-secondary-dark-bg-hover: rgba(var(--rgb-white), 0.15);
    --btn-secondary-dark-border-hover: rgba(var(--rgb-white), 0.5);

    /* Neutral Utility / Dismiss / Filter Buttons (.filter-btn, .fluent-modal-dismiss-btn, .carousel-arrow) */
    --btn-neutral-bg: transparent;
    --btn-neutral-text: var(--ds-text-secondary-dark);
    --btn-neutral-border: var(--ds-border-control);
    --btn-neutral-bg-hover: var(--ds-surface-hover);
    --btn-neutral-text-hover: var(--ds-text-dark);
    --btn-neutral-border-hover: var(--ds-text-muted-light);

    /* ======================================================================
       2C. CENTRALIZED SCROLLING ANIMATION & CANVAS TOKENS
       ====================================================================== */
    /* 1. Shared Sticky Scroll Stage (inscribe.php & speech-decoding.php) */
    --scroll-stage-bg: var(--ds-bg-light);
    --scroll-stage-text: var(--ds-text-dark);
    --inscribe-sequence-bg: var(--ds-bg-white);

    /* 2. Home Page — Hero 3D Electrode Heatmap (js/fluent-bci-animation.js) */
    --heatmap-hue-start: 217;
    --heatmap-hue-end: 43;
    --heatmap-sat: 90;
    --heatmap-light-start: 61;
    --heatmap-light-end: 50;

    /* 3. Home Page — Scrolling Terminal Typing Animation (js/terminal-animation.js & css/front-page.css) */
    --scroll-terminal-bg: var(--ds-bg-titanium);
    --scroll-terminal-text: var(--ds-text-light);
    --scroll-terminal-accent: var(--fluent-blue);
    --scroll-terminal-cursor: var(--ds-text-light);
    --scroll-terminal-glow: rgba(var(--rgb-white), 0.4);
    --scroll-terminal-cursor-glow: rgba(var(--rgb-white), 0.8);

    /* 3B. Home Page — Shiny Glass Typing Pill (css/front-page.css) */
    --glass-pill-bg: linear-gradient(180deg, rgba(var(--rgb-white), 0.22) 0%, rgba(var(--rgb-white), 0.08) 46%, rgba(var(--rgb-white), 0.04) 100%);
    --glass-pill-sheen: linear-gradient(135deg, rgba(var(--rgb-white), 0.34) 0%, rgba(var(--rgb-white), 0.06) 38%, transparent 58%);
    --glass-pill-border: rgba(var(--rgb-white), 0.32);
    --glass-pill-shadow: inset 0 1px 1px rgba(var(--rgb-white), 0.55), inset 0 -1px 2px rgba(var(--rgb-white), 0.1), 0 10px 28px rgba(var(--rgb-black), 0.72), 0 0 22px rgba(var(--ds-blue-rgb), 0.18);

    /* 4. Neural Interface — Risk-Reliability Dilemma Scroll Canvas (js/scroll-video-interface.js) */
    --rrr-arc-solution: var(--fluent-blue);
    --rrr-arc-warning: var(--fluent-orange);
    --rrr-track: var(--ds-surface-hover);
    --rrr-text-main: var(--ds-text-dark);
    --rrr-text-sub: var(--ds-text-muted-dark);
    --rrr-halo-outline: var(--ds-bg-white);

    /* 5. Speech Decoding — QR Code / Electrode Scroll Canvas (js/qr-code-animation.js) */
    --qr-hue-low: 240;
    --qr-hue-mid: 120;
    --qr-hue-high: 0;
    --qr-sat: 100;
    --qr-light: 50;
    --qr-dark-color: var(--ds-bg-dark);
    --qr-light-color: var(--ds-bg-white);
    --qr-grid-stroke: rgba(var(--rgb-black), 0.5);

    /* 6. Speech Decoding — AI Scaffold Phoneme Reels (js/ai-scaffold-animation.js & css/speech-decoding.css) */
    --scaffold-phoneme-accent: var(--fluent-blue);
    --scaffold-phoneme-underline: rgba(var(--ds-blue-rgb), 0.4);
    --scaffold-reel-bg: var(--ds-bg-white);
    --scaffold-reel-border: var(--ds-border-light);
    --scaffold-reel-window-bg: rgba(var(--ds-blue-rgb), 0.06);
    --scaffold-reel-window-border: rgba(var(--ds-blue-rgb), 0.2);
    --scaffold-reel-text: var(--ds-text-dark);
    --scaffold-reel-locked: var(--fluent-green);
    --scaffold-reel-error: var(--fluent-orange);

    /* 7. Speech Decoding — Static "hello" Phoneme Stage Card (css/speech-decoding.css) */
    --phoneme-card-max-w: 440px;
    --phoneme-card-pad-y: clamp(8px, 1.5vh, 16px);
    --phoneme-card-pad-x: clamp(16px, 2.2vw, 28px);
    --phoneme-title-size: clamp(1.65rem, 3.4vh, var(--type-headline-secondary));
    --phoneme-title-mb: clamp(10px, 1.8vh, 20px);
    --phoneme-title-pb: clamp(8px, 1.4vh, 14px);
    --phoneme-item-mb: clamp(6px, 1.2vh, 12px);
    --phoneme-item-py: clamp(2px, 0.4vh, 4px);
    --phoneme-col-symbol: 88px;
    --phoneme-col-symbol-sm: 56px;
    --phoneme-symbol-size: clamp(1.125rem, 2.2vh, var(--type-card-headline));
    --phoneme-desc-size: clamp(0.9375rem, 1.85vh, var(--type-subhead));

    /* Legacy Surface & Text Aliases (Mapped to Unified Design System Hierarchy) */
    --fluent-bg: var(--ds-bg-titanium);
    --fluent-bg-rgb: 12, 13, 14;
    --fluent-bg-deep: var(--ds-bg-dark);
    --fluent-bg-deep-rgb: 0, 0, 0;
    --fluent-bg-light: var(--ds-bg-light);
    --fluent-surface-white: var(--ds-bg-white);
    --fluent-surface-subtle: var(--ds-bg-light);
    --fluent-surface-hover-light: var(--ds-surface-hover);
    --fluent-surface-card-alt: var(--ds-bg-light);
    --fluent-glass: rgba(var(--fluent-bg-rgb), 0.95);

    --fluent-text-main: var(--ds-text-light);
    --fluent-text-dark: var(--ds-text-dark);
    --fluent-text-dark-rgb: 29, 29, 31;
    --fluent-text-charcoal: var(--ds-text-dark);
    --fluent-text-slate: var(--ds-text-secondary-dark);
    --fluent-text-btn-neutral: var(--ds-text-secondary-dark);
    --fluent-text-body: var(--ds-text-muted-dark);
    --fluent-text-subtle: var(--ds-text-muted-dark);
    --fluent-text-icon: var(--ds-text-muted-dark);
    --fluent-text-dim: var(--ds-text-muted-light);
    --fluent-text-faint: var(--ds-text-muted-light);
    --fluent-text-placeholder: var(--ds-text-muted-light);
    --fluent-text-muted: var(--ds-text-muted-light);
    --fluent-text-muted-dark: var(--ds-text-muted-dark);

    /* Borders, Dividers & Form Controls (Mapped to Unified Design System Borders) */
    --fluent-border-subtle: var(--ds-border-light);
    --fluent-border-faint: var(--ds-border-light);
    --fluent-border-hairline: var(--ds-border-light);
    --fluent-border-divider: var(--ds-border-light);
    --fluent-border-card: var(--ds-border-light);
    --fluent-border-input: var(--ds-border-control);
    --fluent-border-btn: var(--ds-border-control);
    --fluent-border-btn-hover: var(--ds-text-muted-light);
    --fluent-canvas-track: var(--ds-surface-hover);

    /* Status & Third-Party Brand Colors */
    --fluent-error: #d32f2f;
    --fluent-error-border: #e53935;
    --fluent-error-rgb: 229, 57, 53;
    --fluent-linkedin: #0a66c2;
    --fluent-linkedin-rgb: 10, 102, 194;
    --fluent-substack: #ff6719;
    --fluent-substack-rgb: 255, 103, 25;

    /* ======================================================================
       3. LAYOUT, SPACING & NAVIGATION OFFSETS
       ====================================================================== */
    --fluent-header-h: 48px;
    --fluent-legacy-header-offset: calc(80px + max(0px, env(safe-area-inset-top, 0px) - 14px));
    --fluent-subnav-h: var(--fluent-legacy-header-offset);
    --fluent-total-sticky-h: var(--fluent-subnav-h);
    --fluent-scroll-margin: calc(var(--fluent-subnav-h) + 20px);

    --fluent-page-hero-min-h: clamp(500px, 66vh, 660px);
    --fluent-page-hero-pt: calc(var(--fluent-legacy-header-offset) + clamp(140px, 19vh, 210px));
    --fluent-page-hero-pb: clamp(80px, 11vh, 128px);

    --fluent-hero-first-pt: calc(var(--fluent-legacy-header-offset) + clamp(28px, 4vh, 48px));
    --fluent-context-hero-pt: calc(var(--fluent-legacy-header-offset) + clamp(48px, 6.5vh, 76px));
    --fluent-hero-pt: clamp(44px, 6vh, 64px);
    --ds-home-unit-gap: 12px;
    --fluent-section-spacing: clamp(44px, 6vh, 68px);
    --fluent-section-spacing-lg: clamp(52px, 7vh, 76px);
    --fluent-section-pad-y: clamp(56px, 7.5vh, 80px);
    --fluent-section-pad-md: clamp(48px, 6.5vh, 72px);

    /* Centralized Sticky Scroll Section & Stage Header Spacing */
    --fluent-chapter-header-mb: clamp(28px, 3.8vh, 44px);
    --fluent-sticky-section-pt: clamp(52px, 6.5vh, 84px);
    --fluent-sticky-section-pb: clamp(64px, 8.5vh, 104px);
    --fluent-sticky-header-pt: clamp(28px, 3.8vh, 48px);
    --fluent-sticky-header-pb: clamp(14px, 2vh, 22px);
    --fluent-sticky-stage-pb: clamp(20px, 2.8vh, 36px);
    --fluent-sticky-header-offset: clamp(196px, 24vh, 244px);
    --fluent-sticky-stage-mobile-h: clamp(250px, 42svh, 380px);
    --fluent-sticky-card-mobile-h: clamp(236px, 40svh, 364px);

    /* Container & Component Max-Widths */
    --container-max-modal: 580px;
    --container-max-xs: 680px;
    --container-max-prose: 780px;
    --container-max-narrow: 800px;
    --container-max-sm: 820px;
    --container-max-form: 860px;
    --container-max-headline: 900px;
    --container-max-pricing: 920px;
    --container-max-media: 960px;
    --editorial-video-max-w: 640px;
    --container-max-diagram: 1040px;
    --container-max-md: 1060px;
    --container-max-content: 1100px;
    --container-max-platform: 1120px;
    --container-max-lg: 1160px;
    --container-max-subnav: 1200px;
    --container-max-bento: 1260px;
    --container-max-xl: 1400px;
    --container-max-wide: 1440px;
    --container-gutter: 5%;

    --ipad-stage-max-w: 684px;
    --ipad-mover-max-w: 600px;
    --ipad-bezel: clamp(10px, 2vw, 22px);
    --ipad-screen-radius: clamp(8px, 1.4vw, 16px);
    --ipad-outer-radius: calc(var(--ipad-screen-radius) + var(--ipad-bezel));
    --ipad-chassis-gradient: linear-gradient(145deg, #48484d 0%, #242427 45%, #141416 100%);
    --ipad-edge-gradient: linear-gradient(180deg, #3a3a40 0%, #1d1d20 55%, #0e0e10 100%);
    --ipad-bezel-surface: #070708;
    --ipad-btn-gradient-h: linear-gradient(90deg, #3a3a3f, #1f1f23);
    --ipad-btn-gradient-v: linear-gradient(180deg, #3a3a3f, #1f1f23);
    --ipad-lens-gradient: radial-gradient(circle at 35% 35%, #25334a 0%, #0d131d 55%, #050507 100%);
    --ipad-ground-shadow: radial-gradient(ellipse at center, rgba(var(--rgb-black), 0.42) 0%, rgba(var(--rgb-black), 0.16) 55%, rgba(var(--rgb-black), 0) 78%);
    --ipad-sky-reflection: linear-gradient(165deg, rgba(var(--rgb-white), 0.34) 0%, rgba(220, 236, 255, 0.16) 38%, rgba(var(--rgb-white), 0.03) 68%, rgba(var(--rgb-white), 0) 100%);
    --mask-fade-horizontal: linear-gradient(90deg, transparent, var(--fluent-surface-white) 8%, var(--fluent-surface-white) 92%, transparent);
    --mask-fade-vertical-reel: linear-gradient(to bottom, transparent 0%, rgba(var(--rgb-black), 0.25) 30%, var(--ds-bg-dark) 45%, var(--ds-bg-dark) 55%, rgba(var(--rgb-black), 0.25) 70%, transparent 100%);

    /* Centralized Component Spacing & Icon Sizing Tokens */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    --space-2xl: 28px;
    --space-3xl: 36px;
    --icon-box-sm: 36px;
    --icon-box-md: 44px;
    --icon-box-lg: 52px;
    --icon-glyph-xs: 18px;
    --icon-glyph-sm: 20px;
    --icon-glyph-md: 24px;
    --vb-waveform-h: 72px;
    --vb-step-svg-h: clamp(180px, 19vw, 220px);
    --vb-eeg-flow-h: clamp(190px, 24vh, 224px);

    /* ======================================================================
       4. BORDERS, RADII, SHADOWS, MOTION & Z-INDEX
       ====================================================================== */
    --ds-border-light: rgba(var(--rgb-black), 0.08);
    --ds-border-dark: rgba(var(--rgb-white), 0.12);
    --ds-border-dashed-light: rgba(var(--rgb-black), 0.16);
    --ds-border-dashed-dark: rgba(var(--rgb-white), 0.16);

    /* Border Radii */
    --radius-pill: 980px;
    --radius-xl: 32px;
    --radius-carousel-media: clamp(14px, 2.2vw, 26px);
    --radius-bento: 24px;
    --radius-cloud: 22px;
    --radius-card: 20px;
    --radius-box: 18px;
    --radius-lg: 16px;
    --radius-popout: 14px;
    --radius-md: 12px;
    --radius-social: 10px;
    --radius-sm: 8px;
    --radius-input: 6px;
    --radius-xs: 4px;
    --radius-hairline: 2px;

    /* Elevation Shadows */
    --shadow-card: 0 4px 20px rgba(var(--rgb-black), 0.04);
    --shadow-card-hover: 0 12px 28px rgba(var(--rgb-black), 0.05);
    --shadow-hero-media: 0 20px 48px rgba(var(--rgb-black), 0.08);
    --shadow-featured: 0 16px 40px rgba(var(--ds-blue-rgb), 0.1);
    --shadow-dropdown: 0 12px 28px rgba(var(--rgb-black), 0.1);
    --shadow-modal: 0 24px 60px rgba(var(--rgb-black), 0.25);

    /* Accessibility & Focus Ring Tokens */
    --focus-ring-color: var(--ds-blue);
    --focus-ring-width: 2px;
    --focus-ring-offset: 3px;
    --focus-ring-shadow: 0 0 0 3.5px rgba(var(--ds-blue-rgb), 0.28);

    /* Motion & Transitions */
    --ease-ds: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.25, 1, 0.5, 1);

    /* Z-Index Layers */
    --z-behind: 0;
    --z-base: 1;
    --z-elevated: 2;
    --z-overlay: 3;
    --z-controls: 4;
    --z-stage-header: 5;
    --z-scroll-text: 10;
    --z-scroll-overlay: 20;
    --z-sticky-filter: 50;
    --z-mobile-menu: 99;
    --z-global-header: 1001;
    --z-legacy-header: 9999;
    --z-hamburger: 10000;
    --z-modal: 99999;
    --z-loader: var(--z-modal);
}

/* ==========================================================================
   5. CENTRALIZED RESPONSIVE TOKEN OVERRIDES (TABLET & MOBILE)
   Single place to tune header offsets, section vertical rhythm, and sticky
   stage proportions across all tablet (<= 900px) and mobile (<= 699px) views.
   ========================================================================== */
@media (max-width: 900px) {
    :root {
        --fluent-page-hero-min-h: clamp(380px, 50vh, 480px);
        --fluent-page-hero-pt: calc(var(--fluent-legacy-header-offset) + clamp(72px, 10vh, 112px));
        --fluent-page-hero-pb: clamp(56px, 8vh, 88px);
        --fluent-section-pad-y: clamp(44px, 6vh, 64px);
        --fluent-section-pad-md: clamp(40px, 5.5vh, 56px);
        --fluent-section-spacing: clamp(40px, 5.5vh, 60px);
        --fluent-section-spacing-lg: clamp(44px, 6vh, 64px);
        --phoneme-title-size: clamp(1.25rem, 2.8dvh, var(--text-title));
        --phoneme-title-mb: clamp(6px, 1.2dvh, 12px);
        --phoneme-title-pb: clamp(5px, 1dvh, 9px);
        --phoneme-item-mb: clamp(4px, 0.85dvh, 8px);
        --phoneme-symbol-size: clamp(1rem, 2.1dvh, var(--text-xl));
        --phoneme-desc-size: clamp(0.875rem, 1.8dvh, var(--text-btn));
    }
}

@media (max-width: 699px) {
    :root {
        --fluent-legacy-header-offset: calc(72px + max(0px, env(safe-area-inset-top, 0px) - 13px));
        --fluent-page-hero-min-h: clamp(320px, 44vh, 400px);
        --fluent-page-hero-pt: calc(var(--fluent-legacy-header-offset) + clamp(56px, 8vh, 84px));
        --fluent-page-hero-pb: clamp(48px, 6.5vh, 72px);
        --fluent-section-pad-y: clamp(36px, 5vh, 52px);
        --fluent-section-pad-md: clamp(32px, 4.5vh, 48px);
        --fluent-section-spacing: clamp(36px, 5vh, 48px);
        --fluent-section-spacing-lg: clamp(40px, 5.5vh, 56px);
        --vb-step-svg-h: clamp(148px, 38vw, 176px);
    }
}