/* ===================================================================
   CUTTING-EDGE WHITEPAPER COMPONENTS - AI & TECH THEME
   ===================================================================

   A sophisticated, mobile-first component library for professional
   whitepapers. Designed with a high-tech, clean aesthetic perfect
   for AI, technology, and data-focused content.

   - Theme: Professional Light Theme
   - Brand Color: Pink Accent (#de347f)
   - Core Principles: Clarity, Consistency, Modern Aesthetics
   ================================================================= */

/* ===== CORE DESIGN SYSTEM (COLOR PALETTE) ===== */

:root {
    /* Text Colors */
    --wp-primary-dark: #0f172a;
    /* slate-900 */
    --wp-body-text: #374151;
    /* gray-700 */
    --wp-secondary-gray: #6b7280;
    /* gray-500/600 */
    --wp-border-color: #e5e7eb;
    --wp-text-white: #ffffff;
    --wp-text-white-subtle: rgba(255, 255, 255, 0.85);

    /* Accent System */
    --wp-accent-primary: #de347f;
    --wp-accent-secondary: #ff5d74;
    --wp-accent-gradient: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));

    /* Background System */
    --wp-background-white: #ffffff;
    --wp-background-light: #f8f9fa;
    --wp-background-soft-pink: #fff5f8;
    --wp-background-soft-blue: #f8f9ff;
    --wp-background-highlight-gradient: linear-gradient(135deg, var(--wp-background-soft-blue), var(--wp-background-soft-pink));
    --wp-background-dark-gradient: linear-gradient(135deg, #2d1e4a, #1a1a2e, #0f0f23);

    /* Border System */
    --wp-border-color: #e9ecef;

    /* Shadow System */
    --wp-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.04);
    --wp-shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.05);
    --wp-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.08);
    --wp-text-shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.3);

    /* Spacing & Radius */
    --wp-spacing-2: 0.5rem;
    --wp-spacing-3: 0.75rem;
    --wp-spacing-4: 1rem;
    --wp-spacing-6: 1.5rem;
    --wp-spacing-5: 1.25rem;
    --wp-spacing-8: 2rem;
    --wp-spacing-10: 2.5rem;
    --wp-spacing-12: 3rem;
    --wp-radius-md: 12px;
    --wp-radius-lg: 16px;
    --wp-radius-xl: 20px;
    --wp-radius-full: 9999px;

    /* Transitions */
    --wp-transition-fast: 0.2s ease-in-out;
    --wp-transition-base: 0.3s ease-in-out;



    /* More spacious padding and subtle background for the main card */
    --wp-card-padding: 3rem;
    --wp-metric-bg: var(--wp-background-white);
    --wp-metric-label-color: var(--wp-secondary-gray);

    /* Apple-style soft shadow: low opacity, wide spread, no harsh edges */
    --wp-shadow-soft-float: 0 10px 30px rgba(0, 0, 0, 0.08);
    --wp-shadow-metric-float: 0 2px 10px rgba(0, 0, 0, 0.04);

    /* (Existing variables kept here for context) */
    --wp-radius-soft: 20px;
    /* Using a high radius for the card edges */

    --wp-shadow-hover-lift: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Pronounced lift on hover */
    --wp-border-hover-accent: 1px solid rgba(222, 52, 127, 0.4);
    /* Subtle color border on hover */
    --wp-radius-xl-soft: 24px;
    /* Slightly larger radius for the main card */
    --wp-shadow-float-subtle: 0 10px 30px rgba(0, 0, 0, 0.05);
    --wp-before-bg: var(--wp-background-light);
    /* Light gray/blue for 'Before' state */
    --wp-after-bg: var(--wp-background-soft-blue);
    /* Subtle blue/pink for 'After' success state */
    --wp-before-text: var(--wp-secondary-gray);
    --wp-after-text: var(--wp-body-text);
    --wp-analysis-bg: var(--wp-background-white);
    --wp-icon-color: var(--wp-accent-primary);
    --wp-separator-color: var(--wp-border-color);
}

/* ===== BASE TYPOGRAPHY & HEADINGS ===== */
/* Base page styling */
body {
    background-color: var(--wp-background-white);
    color: var(--wp-body-text);
    line-height: 1.6;
}

section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
}

/* ===== RESPONSIVE FONT SIZE CLASSES (from original template) ===== */
.fs-11 {
    font-size: 0.6875rem !important;
}

.fs-12 {
    font-size: 0.75rem !important;
}

.fs-13 {
    font-size: 0.8125rem !important;
}

.fs-14 {
    font-size: 0.875rem !important;
}

.fs-15 {
    font-size: 0.9375rem !important;
}

.fs-16 {
    font-size: 1rem !important;
}

.fs-18 {
    font-size: 1.125rem !important;
}

.fs-20 {
    font-size: 1.25rem !important;
}

.fs-22 {
    font-size: 1.375rem !important;
}

.fs-24 {
    font-size: 1.5rem !important;
}

.fs-26 {
    font-size: 1.625rem !important;
}

.fs-28 {
    font-size: 1.75rem !important;
}

.fs-32 {
    font-size: 2rem !important;
}

.fs-36 {
    font-size: 2.25rem !important;
}

.fs-45 {
    font-size: 2.8125rem !important;
}

.fs-50 {
    font-size: 3.125rem !important;
}

.fs-60 {
    font-size: 3.75rem !important;
}

/* ===== ADVANCED ANIMATION & INTERACTION CLASSES ===== */
/* Animation classes for scroll-triggered effects */
[data-anime] {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

[data-anime].anime-complete {
    opacity: 1;
    transform: translateY(0);
}

p.lead {
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--wp-primary-dark);
    /* Slightly darker than standard body text */
    margin-bottom: var(--wp-spacing-8);
}

/* Professional gradient text effects - Leveraging global CSS */
.heading-gradient {
    background: linear-gradient(135deg, var(--wp-primary-dark) 0%, var(--wp-accent-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Enhanced modern heading gradient - Compatible with global styles */
.modern-heading-gradient {
    background-image: linear-gradient(166deg, #2b2d3a 0%, #393b48 40%, #4b4d5b 60%, #f04b64 80%, #f35a77 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    display: inline-block;
}

@media (max-width: 767px) {
    .modern-heading-gradient {
        background-image: linear-gradient(132deg, #2b2d3a 0%, #393b48 40%, #4b4d5b 60%, #f04b64 80%, #f35a77 100%);
    }
}

.text-gradient-purple-blue {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Professional gradient container integration */
.whitepaper-hero-section {
    position: relative;
    overflow: hidden;
}

.whitepaper-hero-section .professional-gradient-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Enhanced section backgrounds using global gradient system */
.whitepaper-section-enhanced {
    position: relative;
    background: linear-gradient(to bottom, #f2f0ee 0%, #f6f4f9 100%);
}

.whitepaper-section-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 30%, rgba(244, 88, 136, 0.08) 0%, rgba(31, 33, 42, 0) 70%),
        radial-gradient(circle at 80% 80%, rgba(143, 118, 245, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.whitepaper-section-enhanced>* {
    position: relative;
    z-index: 1;
}

/* Advanced spacing utilities */
.ls-1px {
    letter-spacing: 1px !important;
}

.ls-minus-1px {
    letter-spacing: -0.01em !important;
}

.ls-minus-05px {
    letter-spacing: -0.005em !important;
}

/* Professional badge styling */
.wp-hero-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--wp-spacing-sm) var(--wp-spacing-lg);
    border-radius: var(--wp-radius-full);
    font-size: var(--wp-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Enhanced Drop cap styling */
.first-letter {
    font-size: 3.5rem;
    font-weight: 700;
    float: left;
    line-height: 1;
    margin-right: 0.5rem;
    margin-top: 0.2rem;
    color: var(--wp-accent-primary);
    font-family: var(--bs-font-sans-serif);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure drop cap works with different font families */
.alt-font.first-letter {
    font-family: var(--bs-font-sans-serif);
}

/* Drop cap container styling */
.text-dark-gray .first-letter {
    color: var(--wp-accent-primary) !important;
}

/* Responsive drop cap sizing */
@media (max-width: 768px) {
    .first-letter {
        font-size: 2.5rem;
        margin-right: 0.3rem;
        margin-top: 0.1rem;
    }
}

/* ===== GLOBAL CSS INTEGRATION ENHANCEMENTS ===== */
/* Enhanced component styling that works with global CSS */

/* Professional card styling using global color system */
.whitepaper-card-enhanced {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.whitepaper-card-enhanced:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 8px 24px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Enhanced metric cards using global styling patterns */
.whitepaper-metric-enhanced {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.whitepaper-metric-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(244, 88, 136, 0.03) 0%, rgba(143, 118, 245, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.whitepaper-metric-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

.whitepaper-metric-enhanced:hover::before {
    opacity: 1;
}

/* Enhanced table styling using global patterns */
.whitepaper-table-enhanced {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.whitepaper-table-enhanced th {
    background: linear-gradient(135deg, #2b2d3a 0%, #393b48 100%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.875rem;
}

.whitepaper-table-enhanced td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
}

.whitepaper-table-enhanced tr:hover td {
    background: rgba(244, 88, 136, 0.05);
}

/* ===== STYLE.MIN.CSS INTEGRATION ===== */
/* Leveraging the comprehensive style.min.css system */

/* Enhanced text gradients from style.min.css */
.whitepaper-title-gradient {
    background: linear-gradient(135deg, var(--base-color) 0%, #667eea 50%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.whitepaper-subtitle-gradient {
    background: linear-gradient(135deg, var(--medium-gray) 0%, var(--base-color) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

/* Professional button integration */
.whitepaper-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: var(--base-color);
    color: var(--white);
}

.whitepaper-btn:hover {
    background: var(--dark-slate-blue);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(41, 70, 243, 0.3);
}

.whitepaper-btn.btn-outline {
    background: transparent;
    color: var(--base-color);
    border-color: var(--base-color);
}

.whitepaper-btn.btn-outline:hover {
    background: var(--base-color);
    color: var(--white);
}

/* Advanced layout classes integration */
.whitepaper-section-overlap {
    margin-top: -50px;
    position: relative;
    z-index: 2;
}

.whitepaper-content-overflow {
    overflow-x: hidden;
    overflow-y: auto;
}

/* Enhanced typography using global font system */
.whitepaper-heading-alt {
    font-family: var(--alt-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.whitepaper-text-primary {
    font-family: var(--primary-font);
    line-height: 1.6;
    color: var(--medium-gray);
}

/* Professional spacing using global system */
.whitepaper-spacing-xl {
    padding: 110px 0;
}

.whitepaper-spacing-lg {
    padding: 70px 0;
}

.whitepaper-spacing-md {
    padding: 50px 0;
}

/* Enhanced component styling with global colors */
.whitepaper-highlight-box {
    background: linear-gradient(135deg, var(--solitude-blue) 0%, var(--light-majorelle-blue) 100%);
    border-left: 4px solid var(--base-color);
    padding: 24px;
    border-radius: 8px;
    margin: 24px 0;
}

.whitepaper-metric-card {
    background: var(--white);
    border: 1px solid var(--extra-medium-gray);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.whitepaper-metric-card:hover {
    border-color: var(--base-color);
    box-shadow: 0 8px 24px rgba(41, 70, 243, 0.1);
    transform: translateY(-2px);
}

.whitepaper-metric-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--base-color);
    line-height: 1;
    margin-bottom: 8px;
}

.whitepaper-metric-label {
    font-size: 14px;
    color: var(--medium-gray);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced button styling using global patterns */
.whitepaper-btn-enhanced {
    background: linear-gradient(135deg, #e958a1 0%, #ff5d74 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 16px rgba(233, 88, 161, 0.3);
    position: relative;
    overflow: hidden;
}

.whitepaper-btn-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    transition: all 0.6s ease;
}

.whitepaper-btn-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 88, 161, 0.4);
}

.whitepaper-btn-enhanced:hover::before {
    left: 100%;
}

/* Enhanced quote block using global styling */
.whitepaper-quote-enhanced {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 255, 0.8) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.whitepaper-quote-enhanced::before {
    content: '"';
    font-size: 4rem;
    color: #e958a1;
    opacity: 0.3;
    position: absolute;
    top: 15px;
    left: 30px;
    font-family: serif;
    line-height: 1;
}

.whitepaper-quote-enhanced blockquote {
    font-style: italic;
    color: #2c2e3c;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    line-height: 1.6;
}

.whitepaper-quote-enhanced cite {
    color: #797a8c;
    font-size: 0.875rem;
    font-weight: 500;
    font-style: normal;
}

/* Responsive font sizes */
@media (min-width: 576px) {
    .sm-fs-16 {
        font-size: 1rem !important;
    }

    .sm-fs-18 {
        font-size: 1.125rem !important;
    }

    .sm-fs-20 {
        font-size: 1.25rem !important;
    }

    .sm-fs-22 {
        font-size: 1.375rem !important;
    }

    .sm-fs-24 {
        font-size: 1.5rem !important;
    }

    .sm-fs-32 {
        font-size: 2rem !important;
    }

    .sm-fs-45 {
        font-size: 2.8125rem !important;
    }

    .sm-fs-60 {
        font-size: 3.75rem !important;
    }
}

@media (min-width: 768px) {
    .md-fs-18 {
        font-size: 1.125rem !important;
    }

    .md-fs-20 {
        font-size: 1.25rem !important;
    }

    .md-fs-22 {
        font-size: 1.375rem !important;
    }

    .md-fs-26 {
        font-size: 1.625rem !important;
    }

    .md-fs-36 {
        font-size: 2.25rem !important;
    }

    .md-fs-60 {
        font-size: 3.75rem !important;
    }
}

@media (min-width: 992px) {
    .lg-fs-18 {
        font-size: 1.125rem !important;
    }

    .lg-fs-20 {
        font-size: 1.25rem !important;
    }

    .lg-fs-22 {
        font-size: 1.375rem !important;
    }

    .lg-fs-26 {
        font-size: 1.625rem !important;
    }

    .lg-fs-36 {
        font-size: 2.25rem !important;
    }

    .lg-fs-60 {
        font-size: 3.75rem !important;
    }
}

@media (max-width: 575px) {
    .xs-fs-15 {
        font-size: 0.9375rem !important;
    }

    .xs-fs-16 {
        font-size: 1rem !important;
    }

    .xs-fs-18 {
        font-size: 1.125rem !important;
    }

    .xs-fs-22 {
        font-size: 1.375rem !important;
    }

    .xs-fs-28 {
        font-size: 1.75rem !important;
    }

    .xs-fs-45 {
        font-size: 2.8125rem !important;
    }
}

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    z-index: 1002;
    transition: width 0.1s ease;
}

/* Smart Floating TOC - Mobile-First */
.floating-toc {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 16px 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    max-height: 70vh;
    overflow-y: auto;
    min-width: 200px;
}

/* Enhanced TOC item styling for better readability */
.floating-toc-item {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    text-decoration: none;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    min-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.floating-toc-item:hover {
    background: linear-gradient(135deg, #f8f9ff 0%, #fff5f8 100%);
    color: #667eea;
    transform: translateX(-2px);
}

.floating-toc-item.active {
    background: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    color: white;
    font-weight: 600;
}

.floating-toc-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    border-radius: 2px;
}

/* Different styling for different heading levels */
.floating-toc-item[data-level="1"] {
    font-weight: 700;
    font-size: 14px;
    color: var(--wp-primary-dark);
}

.floating-toc-item[data-level="2"] {
    font-weight: 600;
    font-size: 13px;
    padding-left: 16px;
}

.floating-toc-item[data-level="3"] {
    font-weight: 500;
    font-size: 12px;
    padding-left: 24px;
    color: var(--wp-secondary-gray);
}

.floating-toc-item[data-level="4"] {
    font-weight: 400;
    font-size: 11px;
    padding-left: 32px;
    color: var(--wp-secondary-gray);
}

.floating-toc.visible {
    opacity: 1;
    visibility: visible;
}

.floating-toc-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
    background: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    color: white;
    border: none;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(222, 52, 127, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
}

.floating-toc-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(222, 52, 127, 0.4);
}

/* Duplicate TOC styles removed - using enhanced styles above */

.whitepaper-header {
    background: var(--wp-background-highlight-gradient);
    padding: 4rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--wp-border-color);
}

.whitepaper-title {
    color: var(--wp-primary-dark);
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.whitepaper-subtitle {
    color: var(--wp-secondary-gray);
    font-size: 1.25rem;
    font-weight: 400;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}



@media (min-width: 768px) {}

/* Ensure all AI components stay within container bounds */


/* Content wrapper for proper structure */
.whitepaper-content-wrapper {
    width: 100%;
    max-width: 100%;
}




/* Ensure proper spacing for the first and last sections */
.whitepaper-content-wrapper>.wp-section:first-child {
    margin-top: 0;
}

.whitepaper-content-wrapper>.wp-section:last-child {
    margin-bottom: 0;
}

/* ===== TYPOGRAPHY RULES FOR AI CONTENT ===== */
.main-ai-content h1 {
    color: var(--wp-primary-dark);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 2.5rem);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.main-ai-content h2 {
    color: var(--wp-primary-dark);
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: 0.75rem;
    margin-top: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.main-ai-content h3 {
    color: var(--wp-primary-dark);
    font-weight: 600;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin-bottom: 0.5rem;
    margin-top: 0;
    line-height: 1.4;
}

.main-ai-content h4 {
    color: var(--wp-primary-dark);
    font-weight: 600;
    font-size: var(--wp-text-lg);
    margin-bottom: 0.5rem;
    margin-top: 0;
    line-height: 1.4;
}

.main-ai-content h5,
.main-ai-content h6 {}

/* Apply responsive classes to headings when they have them */
.main-ai-content h1.fs-50 {
    font-size: 3.125rem !important;
}

.main-ai-content h1.md-fs-60 {
    font-size: 3.75rem !important;
}

.main-ai-content h1.sm-fs-60 {
    font-size: 3.75rem !important;
}

.main-ai-content h1.xs-fs-45 {
    font-size: 2.8125rem !important;
}

.main-ai-content h2.fs-32 {
    font-size: 2rem !important;
}

.main-ai-content h2.md-fs-36 {
    font-size: 2.25rem !important;
}

.main-ai-content h2.sm-fs-32 {
    font-size: 2rem !important;
}

.main-ai-content h2.xs-fs-28 {
    font-size: 1.75rem !important;
}

.main-ai-content h3.fs-24 {
    font-size: 1.5rem !important;
}

.main-ai-content h3.md-fs-26 {
    font-size: 1.625rem !important;
}

.main-ai-content h3.sm-fs-24 {
    font-size: 1.5rem !important;
}

.main-ai-content h3.xs-fs-22 {
    font-size: 1.375rem !important;
}

.main-ai-content h4.fs-18 {
    font-size: 1.125rem !important;
}

.main-ai-content h4.md-fs-20 {
    font-size: 1.25rem !important;
}

.main-ai-content h4.sm-fs-18 {
    font-size: 1.125rem !important;
}

.main-ai-content h4.xs-fs-16 {
    font-size: 1rem !important;
}

.wp-heading-2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin: var(--wp-spacing-10) 0 var(--wp-spacing-4) 0;
    padding-bottom: var(--wp-spacing-3);
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-heading-4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-bottom: var(--wp-spacing-3);
}

.wp-text-large {
    font-size: 1.125rem;
    color: var(--wp-body-text);
}

.wp-heading-5 {
    font-size: 1.0625rem;
    /* 17px */
    font-weight: 700;
    color: var(--wp-primary-dark);
    margin-top: var(--wp-spacing-4);
    margin-bottom: var(--wp-spacing-2);
    line-height: 1.5;
}

.wp-heading-6 {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 700;
    color: var(--wp-secondary-gray);
    /* Muted to distinguish from body */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--wp-spacing-4);
    margin-bottom: var(--wp-spacing-2);
    line-height: 1.4;
}

/* ===== METRIC & STATISTIC CARDS ===== */

/* ===================================================================
   CUTTING-EDGE METRIC CARD (Data Insight Capsule)
   =================================================================== */

.wp-metric-card {
    background: var(--wp-background-white);
    border: 1px solid #e2e8f0;
    /* Slate-200 */
    border-radius: 12px;
    padding: 2rem;
    text-align: left;
    /* Switch to left alignment for professional look */
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease-out;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    /* Subtle baseline shadow */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

/* Remove old top gradient, replace with subtle top border accent if needed, 
   but for "Big Tech" look, a clean border is often better. 
   Let's use a very subtle top accent to maintain brand identity but cleaner. */
.wp-metric-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 4px;
    background: var(--wp-accent-primary);
    border-radius: 12px 12px 0 0;
    opacity: 0;
    /* Hidden by default, shown on hover for interaction */
    transition: opacity 0.2s ease;
}

/* Hover Effects: Professional lift */
.wp-metric-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05);
    /* Tailwind-like shadow */
    border-color: #cbd5e1;
    /* Slate-300 */
}

.wp-metric-card:hover::before {
    opacity: 1;
    /* Reveal accent on hover */
}

/* 1. METRIC TITLE (Context) */
.wp-metric-card .metric-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    /* Slate-500 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* 2. METRIC VALUE (Data) */
.wp-metric-card .metric-value {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
    color: #0f172a;
    /* Slate-900 */
    letter-spacing: -0.04em;
    font-feature-settings: "tnum";
}

/* 3. METRIC FOOTER (Description) */
.wp-metric-card .metric-footer {
    font-size: 0.9375rem;
    font-weight: 400;
    color: #334155;
    /* Slate-700 */
    line-height: 1.6;
    margin-top: auto;
    border-top: 1px solid #f1f5f9;
    /* Slate-100 */
    padding-top: 1rem;
}

/* Remove old centered divider line */
.wp-metric-card .metric-footer::after {
    display: none;
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-metric-card {
        padding: var(--wp-spacing-6);
        border-radius: var(--wp-radius-lg);
    }

    .wp-metric-card .metric-value {
        font-size: 3rem;
        /* Smaller but still impactful on mobile */
    }

    .wp-metric-card .metric-title {
        font-size: 0.85rem;
        margin-bottom: var(--wp-spacing-2);
    }
}

/* ===== HIGHLIGHT & CALLOUT BOXES ===== */
.wp-highlight-box {
    background: var(--wp-background-highlight-gradient);
    border-left: 4px solid var(--wp-accent-primary);
    border-radius: 0 var(--wp-radius-lg) var(--wp-radius-lg) 0;
    padding: var(--wp-spacing-6);
    margin: var(--wp-spacing-8) 0;
    box-shadow: var(--wp-shadow-light);
    position: relative;
}

.wp-highlight-box .highlight-label {
    color: var(--wp-accent-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--wp-spacing-2);
    display: block;
}

.wp-highlight-box .highlight-text {
    font-size: 1.125rem;
    color: var(--wp-primary-dark);
    line-height: 1.6;
    margin: 0;
}

/* ===== PROFESSIONAL DATA TABLES ===== */
.wp-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-light);
    margin: var(--wp-spacing-8) 0;
    max-width: 100%;
}

/* Ensure all table containers are responsive */
.wp-table-container,
.wp-feature-comparison {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Force all tables to be responsive */
.wp-professional-table,
.wp-data-table,
.wp-comparison-matrix {
    min-width: 600px;
    /* Minimum width for readability */
    max-width: 100%;
}

.wp-professional-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.wp-professional-table .table-title {
    background: var(--wp-background-light);
    color: var(--wp-primary-dark);
    padding: var(--wp-spacing-4) var(--wp-spacing-6);
    font-size: 1.25rem;
    font-weight: 600;
    text-align: left;
}

.wp-professional-table thead th {
    background: var(--wp-background-white);
    color: var(--wp-secondary-gray);
    padding: var(--wp-spacing-4) var(--wp-spacing-6);
    font-weight: 600;
    font-size: 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--wp-border-color);
    white-space: nowrap;
}

.wp-professional-table tbody td {
    padding: var(--wp-spacing-4) var(--wp-spacing-6);
    border-bottom: 1px solid var(--wp-border-color);
    color: var(--wp-body-text);
    font-size: 0.95rem;
    transition: background-color var(--wp-transition-fast);
}

.wp-professional-table tbody tr:last-child td {
    border-bottom: none;
}

.wp-professional-table tbody tr:hover td {
    background-color: var(--wp-background-soft-blue);
}


/* Webkit Scrollbar Styling for Tables */
.wp-table-container::-webkit-scrollbar,
.wp-feature-comparison::-webkit-scrollbar,
.wp-table-responsive::-webkit-scrollbar {
    height: 6px;
    background-color: var(--wp-background-light);
}

.wp-table-container::-webkit-scrollbar-thumb,
.wp-feature-comparison::-webkit-scrollbar-thumb,
.wp-table-responsive::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    /* Subtle gray */
    border-radius: 4px;
    transition: background-color 0.3s;
}

.wp-table-container:hover::-webkit-scrollbar-thumb,
.wp-feature-comparison:hover::-webkit-scrollbar-thumb,
.wp-table-responsive:hover::-webkit-scrollbar-thumb {
    background-color: var(--wp-accent-primary);
    /* Turns pink on hover */
}

/* ===== CASE STUDY CARDS ===== */
/* ===================================================================
   CUTTING-EDGE CASE STUDY CARD (Success Story Dashboard)
   =================================================================== */

.wp-case-study {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-xl);
    /* 20px */
    /* Apple-style soft diffusion shadow */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    margin: var(--wp-spacing-10) 0;
    overflow: hidden;
    /* Keeps children inside rounded corners */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

/* Top Accent Line (Brand Identity) */
.wp-case-study::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    opacity: 0;
    /* Hidden by default, shown on hover */
    transition: opacity 0.3s ease;
}

.wp-case-study:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-color: rgba(222, 52, 127, 0.2);
}

.wp-case-study:hover::before {
    opacity: 1;
}

/* 1. HEADER: Title & Badge */
.wp-case-study .case-header {
    padding: var(--wp-spacing-8) var(--wp-spacing-8) var(--wp-spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--wp-spacing-4);
    background: var(--wp-background-white);
}

.wp-case-study .case-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wp-primary-dark);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.wp-case-study .case-industry {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp-accent-primary);
    background: rgba(222, 52, 127, 0.06);
    padding: 6px 14px;
    border-radius: 50px;
    white-space: nowrap;
    border: 1px solid rgba(222, 52, 127, 0.1);
}

/* 2. CONTENT: Narrative Text */
.wp-case-study .case-content {
    padding: 0 var(--wp-spacing-8) var(--wp-spacing-8);
    color: var(--wp-body-text);
    font-size: 1.05rem;
    line-height: 1.7;
}

.wp-case-study .case-content p {
    margin-bottom: 0;
    /* Remove bottom margin if last child */
}

/* 3. RESULTS DASHBOARD (Footer) */
.wp-case-study .case-results {
    background: var(--wp-background-soft-blue);
    /* Subtle contrast bg */
    border-top: 1px solid var(--wp-border-color);
    padding: var(--wp-spacing-6) var(--wp-spacing-8);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--wp-spacing-6);
    position: relative;
}

/* Result Items */
.wp-case-study .result-item {
    display: flex;
    flex-direction: column;
    /* Add visual separator lines between items on desktop */
    position: relative;
}

/* Vertical divider line between results (Desktop only) */
@media (min-width: 769px) {
    .wp-case-study .result-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -1rem;
        /* Position in the gap */
        top: 10%;
        bottom: 10%;
        width: 1px;
        background: rgba(0, 0, 0, 0.05);
    }
}

.wp-case-study .result-number {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 4px;
    /* Cutting-edge Gradient Text */
    background: linear-gradient(135deg, var(--wp-primary-dark) 0%, var(--wp-accent-primary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-feature-settings: "tnum";
    /* Tabular numbers for alignment */
}

.wp-case-study .result-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wp-secondary-gray);
    line-height: 1.4;
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-case-study {
        border-radius: var(--wp-radius-lg);
        margin: var(--wp-spacing-8) 0;
    }

    .wp-case-study .case-header {
        flex-direction: column;
        padding: var(--wp-spacing-6);
    }

    .wp-case-study .case-industry {
        align-self: flex-start;
        margin-bottom: var(--wp-spacing-2);
        order: -1;
        /* Move badge above title on mobile for context */
    }

    .wp-case-study .case-title {
        font-size: 1.35rem;
    }

    .wp-case-study .case-content {
        padding: 0 var(--wp-spacing-6) var(--wp-spacing-6);
        font-size: 1rem;
    }

    .wp-case-study .case-results {
        grid-template-columns: 1fr 1fr;
        /* 2x2 grid on mobile */
        gap: var(--wp-spacing-6) var(--wp-spacing-4);
        padding: var(--wp-spacing-6);
    }

    .wp-case-study .result-number {
        font-size: 1.75rem;
    }
}

/* ===== SOPHISTICATED TIMELINE STEPS ===== */
/* ===================================================================
   CUTTING-EDGE TIMELINE STEPS (Process Flow UI)
   =================================================================== */

.wp-timeline-step {
    position: relative;
    padding-left: 3.5rem;
    /* Space for the visual timeline on left */
    padding-bottom: 3rem;
    /* Space between steps */
    /* Create a stacking context for the hover lift */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Remove bottom padding for the very last step */
.wp-timeline-step:last-child {
    padding-bottom: 0;
}

/* 1. THE CONNECTING LINE (Gradient Flow) */
.wp-timeline-step::before {
    content: '';
    position: absolute;
    left: 14px;
    /* Centered with the marker */
    top: 30px;
    /* Starts below the marker */
    bottom: -10px;
    /* Connects to next step */
    width: 2px;
    /* Brand gradient fading to transparent */
    background: linear-gradient(180deg, var(--wp-accent-primary) 0%, rgba(222, 52, 127, 0.1) 100%);
    z-index: 0;
}

/* Hide line on the very last step to finish the flow cleanly */
.wp-timeline-step:last-child::before {
    display: none;
}

/* 2. THE MARKER (Pulse Dot) */
.wp-timeline-step::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    background: var(--wp-background-white);
    border: 4px solid var(--wp-accent-primary);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(222, 52, 127, 0.15);
    /* Glow ring */
    transition: all 0.3s ease;
}

/* Hover Effect: Marker Glows */
.wp-timeline-step:hover::after {
    background: var(--wp-accent-primary);
    box-shadow: 0 0 0 6px rgba(222, 52, 127, 0.25);
    transform: scale(1.1);
}

/* 3. STEP NUMBER / EYEBROW (The "Phase 1" text) */
.wp-timeline-step .timeline-step-number {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wp-accent-primary);
    background: rgba(222, 52, 127, 0.08);
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(222, 52, 127, 0.1);
}

/* 4. STEP TITLE (H4) */
.wp-timeline-step .wp-heading-4 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wp-primary-dark);
    margin-top: 0;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

/* 5. STEP DESCRIPTION */
.wp-timeline-step .step-description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--wp-secondary-gray);
    margin-bottom: 1.5rem;
}

/* 6. CHECKLIST (Mini Cards Layout) */
.wp-timeline-step .wp-list-check {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wp-timeline-step .wp-list-check li {
    position: relative;
    background: var(--wp-background-light);
    /* Subtle card bg */
    padding: 12px 16px 12px 40px;
    /* Space for icon */
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wp-body-text);
    transition: background 0.2s ease;
    border: 1px solid transparent;
}

/* Hover effect on individual list items */
.wp-timeline-step .wp-list-check li:hover {
    background: var(--wp-background-white);
    border-color: var(--wp-border-color);
    box-shadow: var(--wp-shadow-light);
}



/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-timeline-step {
        padding-left: 2.5rem;
        /* Less padding on mobile */
        padding-bottom: 2.5rem;
    }

    .wp-timeline-step::before {
        left: 9px;
        /* Adjust line alignment */
    }

    .wp-timeline-step::after {
        left: 0;
        /* Adjust marker alignment */
    }

    .wp-timeline-step .timeline-step-number {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .wp-timeline-step .wp-heading-4 {
        font-size: 1.2rem;
    }
}

/* ===== TESTIMONIAL / QUOTE BLOCKS ===== */

.wp-testimonial,
.wp-quote-block {
    position: relative;
    background: linear-gradient(135deg, var(--wp-background-white) 0%, #f9fafb 100%);
    border: 1px solid var(--wp-border-color);
    /* Clean, sharp radius for professional look */
    border-radius: var(--wp-radius-lg);
    /* Extra left padding to accommodate the accent and watermark */
    padding: var(--wp-spacing-8) var(--wp-spacing-8) var(--wp-spacing-8) var(--wp-spacing-10);
    margin: var(--wp-spacing-10) 0;
    overflow: hidden;
    box-shadow: var(--wp-shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-testimonial:hover,
.wp-quote-block:hover {
    box-shadow: var(--wp-shadow-medium);
    transform: translateY(-2px);
    /* Subtle lift */
}

/* 1. THE ACCENT SPINE (Brand Identity) */
.wp-testimonial::before,
.wp-quote-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    /* Vertical gradient spine */
    background: linear-gradient(180deg, var(--wp-accent-primary), var(--wp-accent-secondary));
}

/* 2. THE WATERMARK (Artistic Flair) */
.wp-testimonial::after,
.wp-quote-block::after {
    content: '“';
    position: absolute;
    top: -15px;
    left: 20px;
    /* Positioned relative to spine */
    font-family: "Georgia", "Times New Roman", serif;
    /* Classic Serif for the mark */
    font-size: 8rem;
    line-height: 1;
    color: var(--wp-accent-primary);
    opacity: 0.08;
    /* Very subtle */
    pointer-events: none;
    z-index: 0;
}

/* 3. THE QUOTE TEXT (Voice) */
.wp-testimonial .quote-text,
.wp-quote-block .wp-quote-text {
    position: relative;
    z-index: 1;
    /* Serif font provides authority and separates voice from body text */
    font-family: "Georgia", "Cambria", "Times New Roman", serif;
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--wp-primary-dark);
    margin-bottom: var(--wp-spacing-6);
}

/* 4. THE AUTHOR (Attribution) */
.wp-testimonial .quote-author,
.wp-quote-block .wp-quote-author {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    font-family: var(--bs-font-sans-serif);
    /* Back to sans-serif for data */
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wp-primary-dark);
    letter-spacing: 0.02em;
}

/* Attribution Dash */
.wp-testimonial .quote-author::before,
.wp-quote-block .wp-quote-author::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: var(--wp-accent-primary);
    margin-right: 12px;
    opacity: 0.6;
}

/* Optional: If the author line contains a comma (Name, Role), make the role lighter */
/* Note: This requires the HTML to span the role, but this CSS trick handles text nicely */
.wp-testimonial .quote-author,
.wp-quote-block .wp-quote-author {
    color: var(--wp-body-text);
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {

    .wp-testimonial,
    .wp-quote-block {
        padding: var(--wp-spacing-6) var(--wp-spacing-6) var(--wp-spacing-6) var(--wp-spacing-8);
    }

    .wp-testimonial::after,
    .wp-quote-block::after {
        font-size: 6rem;
        top: -5px;
        left: 15px;
    }

    .wp-testimonial .quote-text,
    .wp-quote-block .wp-quote-text {
        font-size: 1.15rem;
    }
}

/* ===== HIGH-IMPACT CTA & ROI BLOCK ===== */
/* ===================================================================
   CUTTING-EDGE ROI CALCULATOR (Value Engine Dashboard)
   =================================================================== */

.wp-roi-calculator {
    /* Deep "Midnight" Gradient for Tech Feel */
    background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: var(--wp-radius-xl);
    /* 24px */
    padding: var(--wp-spacing-10) var(--wp-spacing-8);
    margin: var(--wp-spacing-12) 0;
    position: relative;
    overflow: hidden;
    /* Subtle glow border */
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    isolation: isolate;
}

/* Ambient Background Glow Effect */
.wp-roi-calculator::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(222, 52, 127, 0.15) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* 1. HEADER TYPOGRAPHY */
.wp-roi-calculator .roi-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--wp-spacing-4);
    letter-spacing: -0.02em;
}

.wp-roi-calculator .wp-text-white-subtle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: var(--wp-spacing-10);
}

/* 2. METRICS GRID */
.wp-roi-calculator .roi-metrics {
    display: grid;
    /* Auto-fit ensures it looks good with 2, 3, or 4 items */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--wp-spacing-6);
    position: relative;
    z-index: 2;
}

/* 3. METRIC CARDS (Glassmorphism) */
.wp-roi-calculator .roi-metric {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-8) var(--wp-spacing-4);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Light Up */
.wp-roi-calculator .roi-metric:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Top Accent Line on Hover */
.wp-roi-calculator .roi-metric::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wp-roi-calculator .roi-metric:hover::after {
    opacity: 1;
}

/* 4. METRIC VALUES (The Hero Numbers) */
.wp-roi-calculator .roi-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--wp-spacing-3);
    /* Neon Gradient Text */
    background: linear-gradient(135deg, #ffffff 0%, #ffb6c1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback color */
    color: #fff;
    letter-spacing: -0.02em;
}

/* 5. METRIC LABELS */
.wp-roi-calculator .roi-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-roi-calculator {
        padding: var(--wp-spacing-8) var(--wp-spacing-6);
        border-radius: var(--wp-radius-lg);
        margin: var(--wp-spacing-8) 0;
    }

    .wp-roi-calculator .roi-title {
        font-size: 1.5rem;
        margin-bottom: var(--wp-spacing-3);
    }

    .wp-roi-calculator .wp-text-white-subtle {
        font-size: 1rem;
        margin-bottom: var(--wp-spacing-8);
    }

    /* Switch to 2-column grid on mobile for compactness */
    .wp-roi-calculator .roi-metrics {
        grid-template-columns: 1fr 1fr;
        gap: var(--wp-spacing-4);
    }

    .wp-roi-calculator .roi-metric {
        padding: var(--wp-spacing-6) var(--wp-spacing-2);
    }

    .wp-roi-calculator .roi-value {
        font-size: 2rem;
        /* Smaller size for mobile grid */
        margin-bottom: var(--wp-spacing-2);
    }

    .wp-roi-calculator .roi-label {
        font-size: 0.7rem;
    }
}

/* Extra small screens: Stack them */
@media (max-width: 380px) {
    .wp-roi-calculator .roi-metrics {
        grid-template-columns: 1fr;
    }
}

/* ===== COMPARISON TABLES ===== */
.wp-feature-comparison {
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    overflow: hidden;
    margin: var(--wp-spacing-8) 0;
    box-shadow: var(--wp-shadow-light);
}

.wp-feature-comparison .comparison-column {
    padding: var(--wp-spacing-6);
    height: 100%;
}

.wp-feature-comparison .comparison-column:first-child {
    border-right: 1px solid var(--wp-border-color);
    background-color: var(--wp-background-white);
}

.wp-feature-comparison .comparison-column:last-child {
    background-color: var(--wp-background-soft-blue);
}

.wp-feature-comparison .column-title {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: var(--wp-spacing-4);
}

.wp-feature-comparison .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-feature-comparison .feature-item {
    display: flex;
    gap: var(--wp-spacing-3);
    align-items: flex-start;
    margin-bottom: var(--wp-spacing-3);
}

.wp-feature-comparison .feature-icon {
    font-weight: 700;
    margin-top: 4px;
}

.wp-feature-comparison .feature-icon.positive {
    color: var(--wp-accent-primary);
}

.wp-feature-comparison .feature-icon.negative {
    color: var(--wp-secondary-gray);
}

.wp-feature-comparison .feature-content {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ===== BEFORE & AFTER CARDS (Cutting-Edge Light Theme) ===== */
/* ===================================================================
   CUTTING-EDGE BEFORE/AFTER CARD (Transformation Matrix)
   =================================================================== */

.wp-before-after-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-xl);
    overflow: hidden;
    /* Ensures content stays inside radius */
    margin: var(--wp-spacing-10) 0;
    box-shadow: var(--wp-shadow-light);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.wp-before-after-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp-shadow-medium);
}

/* 1. HEADER (The Topic) */
.wp-before-after-card .card-header {
    background: var(--wp-background-white);
    padding: var(--wp-spacing-6) var(--wp-spacing-8);
    border-bottom: 1px solid var(--wp-border-color);
    text-align: center;
}

.wp-before-after-card .card-header h6 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--wp-primary-dark);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 2. BODY (The Grid) */
.wp-before-after-card .card-body {
    display: grid;
    /* Desktop: 50/50 split */
    grid-template-columns: 1fr 1fr;
    padding: 0;
    position: relative;
}

/* 3. BEFORE SECTION (The "Problem" State) */
.wp-before-after-card .wp-before-section {
    background: #f9fafb;
    /* Muted Gray Background */
    padding: var(--wp-spacing-8);
    border-right: 1px solid var(--wp-border-color);
    /* Divider */
    position: relative;
    color: var(--wp-secondary-gray);
    /* Muted Text */
}

.wp-before-after-card .wp-before-section h6 {
    font-size: 0.875rem;
    font-weight: 700;
    color: #9ca3af;
    /* Very muted title */
    text-transform: uppercase;
    margin-bottom: var(--wp-spacing-4);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "Before" Icon indicator */
.wp-before-after-card .wp-before-section h6::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #cbd5e1;
    /* Gray dot */
    border-radius: 50%;
}

/* 4. AFTER SECTION (The "Solution" State) */
.wp-before-after-card .wp-after-section {
    background: var(--wp-background-white);
    padding: var(--wp-spacing-8);
    position: relative;
    color: var(--wp-primary-dark);
    /* Sharp, dark text */
    display: flex;
    flex-direction: column;
}

/* Top Gradient Line for After Section */
.wp-before-after-card .wp-after-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--wp-accent-gradient);
}

.wp-before-after-card .wp-after-section h6 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wp-accent-primary);
    /* Branded Title */
    text-transform: uppercase;
    margin-bottom: var(--wp-spacing-4);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* "After" Icon indicator */
.wp-before-after-card .wp-after-section h6::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: var(--wp-accent-primary);
    /* Brand dot */
    border-radius: 50%;
}

/* 5. THE CONTENT TEXT */
.wp-before-after-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* 6. THE IMPROVEMENT BADGE (The Result) */
.wp-before-after-card .wp-improvement {
    margin-top: auto;
    /* Pushes to bottom */
    display: inline-block;
    background: rgba(222, 52, 127, 0.08);
    color: var(--wp-accent-primary);
    font-weight: 700;
    font-size: 1rem;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(222, 52, 127, 0.15);
    align-self: flex-start;
    /* Align left */
    margin-top: var(--wp-spacing-6);
}

/* 7. DIRECTIONAL ARROW (Desktop Only) */
@media (min-width: 769px) {
    .wp-before-after-card .card-body::after {
        content: '→';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 32px;
        background: var(--wp-background-white);
        border: 1px solid var(--wp-border-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--wp-accent-primary);
        font-weight: bold;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-before-after-card .card-body {
        grid-template-columns: 1fr;
        /* Stack vertically */
    }

    .wp-before-after-card .wp-before-section {
        border-right: none;
        border-bottom: 1px solid var(--wp-border-color);
    }

    /* Arrow points down on mobile */
    .wp-before-after-card .card-body::after {
        content: '↓';
        /* Down arrow */
        top: auto;
        bottom: -16px;
        /* Position between grids */
        left: 50%;
        transform: translateX(-50%);
        /* Logic handled by stacking, but positioning an icon between stacked divs can be tricky.
           Simplest mobile approach is often to hide the arrow or just let the border handle separation.
           Let's hide the absolute arrow and rely on the border. */
        display: none;
    }
}

/* ===== ACTION ITEM LISTS ===== */
.wp-action-item {
    display: flex;
    gap: var(--wp-spacing-4);
    align-items: flex-start;
    padding: var(--wp-spacing-4);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-md);
    margin-bottom: var(--wp-spacing-3);
}

.wp-action-priority {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--wp-radius-full);
    white-space: nowrap;
}

.wp-action-priority.high {
    background-color: var(--wp-background-soft-pink);
    color: var(--wp-accent-primary);
    border: 1px solid var(--wp-accent-primary);
}

.wp-action-priority.medium {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
}

.wp-action-priority.low {
    background-color: var(--wp-background-light);
    color: var(--wp-secondary-gray);
    border: 1px solid var(--wp-border-color);
}

/* ===== (NEW) DATA VISUALIZATION CONTAINER ===== */
.wp-data-visualization {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-6);
    margin: var(--wp-spacing-8) 0;
    box-shadow: var(--wp-shadow-light);
}

.wp-data-visualization .viz-header {
    border-bottom: 1px solid var(--wp-border-color);
    padding-bottom: var(--wp-spacing-4);
    margin-bottom: var(--wp-spacing-4);
}

.wp-data-visualization .viz-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.wp-data-visualization .viz-subtitle {
    font-size: 0.9rem;
    color: var(--wp-secondary-gray);
    margin: 0;
}

.wp-data-visualization .viz-placeholder {
    min-height: 300px;
    background: repeating-linear-gradient(45deg, var(--wp-background-light), var(--wp-background-light) 10px, var(--wp-background-soft-blue) 10px, var(--wp-background-soft-blue) 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp-secondary-gray);
    font-style: italic;
    border-radius: var(--wp-radius-md);
}

.wp-data-visualization .svg-placeholder-block {
    background: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-family: monospace;
    position: relative;
}

/* Hide the admin button on the frontend website */
.wp-data-visualization .btn-generate-chart {
    display: none !important;
}

/* ADMIN-ONLY STYLES (These apply only inside the editor) */
#flexibleContentEditor .btn-generate-chart {
    display: inline-block !important;
    margin-top: 15px;
    background: #6366f1;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    z-index: 10;
}

/* ===== (NEW) AUTHOR BIO CARD ===== */
.wp-author-bio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wp-spacing-4);
    background: var(--wp-background-light);
    padding: var(--wp-spacing-8);
    border-radius: var(--wp-radius-lg);
    margin: var(--wp-spacing-8) 0;
}

.wp-author-bio .author-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--wp-background-white);
    box-shadow: var(--wp-shadow-medium);
}

.wp-author-bio .author-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.wp-author-bio .author-title {
    color: var(--wp-accent-primary);
    font-weight: 500;
    margin-top: -12px;
}

.wp-author-bio .author-description {
    max-width: 600px;
    color: var(--wp-secondary-gray);
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .wp-author-bio {
        flex-direction: row;
        text-align: left;
        gap: var(--wp-spacing-6);
    }
}

/* ===== (NEW) GLOSSARY / DEFINITIONS LIST ===== */
.wp-glossary dt {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-top: var(--wp-spacing-4);
}

.wp-glossary dd {
    margin-left: var(--wp-spacing-6);
    padding-left: var(--wp-spacing-4);
    border-left: 2px solid var(--wp-border-color);
    color: var(--wp-secondary-gray);
    margin-bottom: var(--wp-spacing-4);
}

/* ===== RESPONSIVE UTILITIES & GRID ===== */
.wp-grid-2,
.wp-grid-md-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp-spacing-4);
}

@media (min-width: 576px) {
    .wp-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .wp-grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--wp-spacing-6);
    }
}

.wp-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--wp-spacing-6);
}

.wp-mb-6 {
    margin-bottom: var(--wp-spacing-6);
}

.wp-mb-md-8 {
    margin-bottom: var(--wp-spacing-8);
}

.wp-my-6 {
    margin-top: var(--wp-spacing-6);
    margin-bottom: var(--wp-spacing-6);
}

.wp-my-md-8 {
    margin-top: var(--wp-spacing-8);
    margin-bottom: var(--wp-spacing-8);
}




/* ===== LIST COMPONENTS (NEW & EXPANDED) ===== */

/* Minimalist Unordered List */
.wp-list-clean {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-list-clean li {
    position: relative;
    padding-left: var(--wp-spacing-6);
    margin-bottom: var(--wp-spacing-3);
}

.wp-list-clean li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 5px;
    background: var(--wp-accent-primary);
    border-radius: 50%;
}

/* Checkmark List for Benefits/Features */
.wp-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-list-check li {
    position: relative;
    padding-left: var(--wp-spacing-8);
    margin-bottom: var(--wp-spacing-4);
}

.wp-list-check li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--wp-accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Professional Numbered List */
.wp-list-numbered {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: wp-counter;
}

.wp-list-numbered li {
    position: relative;
    padding-left: var(--wp-spacing-12);
    margin-bottom: var(--wp-spacing-4);
    counter-increment: wp-counter;
}

.wp-list-numbered li::before {
    content: counter(wp-counter);
    position: absolute;
    left: 0;
    top: -2px;
    width: 36px;
    height: 36px;
    background: var(--wp-background-light);
    color: var(--wp-accent-primary);
    border: 1px solid var(--wp-border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

/* High-Impact Feature List */
.wp-list-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--wp-spacing-4);
}

.wp-list-features li {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-4);
    transition: var(--wp-transition-base);
}

.wp-list-features li:hover {
    border-color: var(--wp-accent-primary);
    box-shadow: var(--wp-shadow-light);
    transform: translateY(-2px);
}

/* Inline List for Tags */
.wp-list-inline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp-spacing-3);
}

.wp-list-inline li {
    background: var(--wp-background-light);
    color: var(--wp-secondary-gray);
    padding: var(--wp-spacing-2) var(--wp-spacing-4);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ===== SOPHISTICATED ACTION CARDS ===== */
/* ===================================================================
   CUTTING-EDGE ACTION CARD (Strategic Directive)
   =================================================================== */
/* ===================================================================
   CUTTING-EDGE ACTION CARD (The "Executive Briefing" Concept)
   =================================================================== */

.wp-action-card {
    display: flex;
    flex-direction: column;
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    /* 16px */
    padding: var(--wp-spacing-6);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
    /* Ensures equal height in grids */
    position: relative;
    overflow: hidden;
}

/* Hover State: Clean Lift & Focus */
.wp-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: rgba(222, 52, 127, 0.3);
}

/* 1. THE "SIGNAL BOX" (Icon Container) */
/* This creates the square box for the icon */
.wp-action-card::before {
    content: '↗';
    /* "Growth/Next Step" Arrow */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--wp-background-light);
    /* Subtle gray initially */
    color: var(--wp-secondary-gray);
    border-radius: 12px;
    /* Soft square */
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--wp-spacing-6);
    transition: all 0.3s ease;
    /* Aligning flex item if container changes */
    align-self: flex-start;
}

/* Hover State for Icon: Brand Color Activation */
.wp-action-card:hover::before {
    background: var(--wp-accent-primary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(222, 52, 127, 0.25);
}

/* 2. TITLE (The Strategic Imperative) */
.wp-action-card .action-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wp-primary-dark);
    line-height: 1.3;
    margin-bottom: var(--wp-spacing-3);
    letter-spacing: -0.015em;
    /* Ensure title doesn't overlap if we add absolute elements later */
    position: relative;
    z-index: 1;
}

/* 3. DESCRIPTION (The Rationale) */
.wp-action-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--wp-secondary-gray);
    /* Softer than body text for hierarchy */
    margin: 0;
    flex-grow: 1;
    /* Pushes content to fill space if needed */
}

/* 4. (Optional) DECORATIVE CORNER ACCENT */
/* Adds a very subtle tech-feel line at the top right */
.wp-action-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent var(--wp-background-light) transparent transparent;
    transition: border-color 0.3s ease;
}

.wp-action-card:hover::after {
    border-right-color: rgba(222, 52, 127, 0.05);
    /* Turns faint pink on hover */
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-action-card {
        display: grid;
        /* Column 1: Icon Width | Column 2: Content */
        grid-template-columns: 48px 1fr;
        /* Row 1: Title | Row 2: Description */
        grid-template-rows: min-content 1fr;
        column-gap: var(--wp-spacing-4);
        /* Space between Icon and Text */
        row-gap: 4px;
        /* Space between Title and Description */
        padding: var(--wp-spacing-6);
        align-items: start;
        height: auto;
        /* Allow card to grow naturally */
    }

    /* 1. ICON POSITION (Top Left) */
    .wp-action-card::before {
        grid-column: 1;
        grid-row: 1;
        /* Sit in the top-left corner */
        margin-bottom: 0;
        /* Reset desktop margin */
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    /* 2. TITLE POSITION (Top Right) */
    .wp-action-card .action-title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        /* Center vertically relative to the icon height for a balanced look */
        align-self: center;
        font-size: 1.1rem;
        line-height: 1.2;
    }

    /* 3. DESCRIPTION POSITION (Bottom Right) */
    .wp-action-card p {
        grid-column: 2;
        /* Stays aligned under the title */
        grid-row: 2;
        margin: 0;
        font-size: 0.95rem;
        color: var(--wp-secondary-gray);
        line-height: 1.5;
        padding-top: 4px;
    }

    /* Hide the decorative corner accent on mobile to save space */
    .wp-action-card::after {
        display: none;
    }
}


/* Methodology Card */
.wp-methodology-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-xl);
    padding: var(--wp-spacing-8);
    box-shadow: var(--wp-shadow-light);
}

.wp-methodology-card .methodology-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--wp-spacing-6);
    padding-bottom: var(--wp-spacing-3);
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-methodology-card .methodology-steps {
    display: grid;
    gap: var(--wp-spacing-6);
}

.wp-methodology-card .methodology-step {
    display: flex;
    align-items: flex-start;
    gap: var(--wp-spacing-4);
}

.wp-methodology-card .methodology-step-number {
    background: var(--wp-accent-gradient);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.wp-methodology-card .step-content .step-title {
    font-weight: 600;
    margin-bottom: var(--wp-spacing-2);
}

.wp-methodology-card .step-content .step-description {
    color: var(--wp-secondary-gray);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* ===== ACCESSIBILITY ===== */
*:focus-visible {
    outline: 2px solid var(--wp-accent-primary);
    outline-offset: 2px;
}



/* ===== UTILITY & RESPONSIVE GRID CLASSES ===== */
/* Base (Mobile) - All grids are single column by default */
.wp-grid-2,
.wp-grid-3,
.wp-grid-auto {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

/* Medium screens and up (Tablets - 768px) */
@media (min-width: 768px) {
    .wp-grid-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .wp-grid-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .wp-grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 0.75rem;
    }
}

/* Margin utilities */
/* Minimal spacing utilities to avoid conflicts with Bootstrap */
.wp-mb-4 {
    margin-bottom: 0.5rem;
}

.wp-mb-6 {
    margin-bottom: 0.75rem;
}

.wp-mb-8 {
    margin-bottom: 1rem;
}

.wp-my-8 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Additional spacing utilities from original template */
.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-6 {
    margin-bottom: 2.5rem !important;
}

.mb-10px {
    margin-bottom: 10px !important;
}

.mb-15px {
    margin-bottom: 15px !important;
}

.mb-20px {
    margin-bottom: 20px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

/* Typography utilities from original template */
.alt-font {
    font-family: inherit;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.ls-minus-1px {
    letter-spacing: -0.01em !important;
}

.ls-minus-05px {
    letter-spacing: -0.005em !important;
}

.text-dark-gray {
    color: var(--wp-primary-dark) !important;
}

.text-muted {
    color: var(--wp-secondary-gray) !important;
}

/* Responsive Margin Utilities */
@media (min-width: 768px) {
    .wp-mb-md-8 {
        margin-bottom: 1rem;
    }
}

/* ===== ACCESSIBILITY ===== */
*:focus-visible {
    outline: 2px solid var(--wp-accent-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==== Professional polish: typography, colors, and accessibility tweaks (overrides) ==== */


/* Apply consistent font and slightly taller line-height for readability */


/* Heading and hero text sizing (responsive, less jumpy) */
.whitepaper-title {
    font-size: clamp(2rem, 4vw, 3rem);
}

.whitepaper-subtitle {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.wp-heading-2 {
    font-size: 1.875rem;
    line-height: 1.3;
}


/* Table readability improvements */
.wp-professional-table thead th {
    color: var(--wp-primary-dark);
    font-weight: 600;
}

.wp-professional-table tbody td {
    font-size: 1rem;
}

/* Limit earlier generic check-list styling to the timeline to avoid conflicts */
.wp-timeline-step .wp-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-timeline-step .wp-list-check li {
    position: relative;
    padding-left: var(--wp-spacing-6);
    margin-bottom: var(--wp-spacing-2);
    line-height: 1.6;
}

/* Utility: subtle white text used within dark sections */
.wp-text-white-subtle {
    color: var(--wp-text-white-subtle);
}


/* Timeline checklist override: remove large pink badges inside roadmap */
.wp-timeline-step .wp-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-timeline-step .wp-list-check li {
    position: relative;
    padding-left: 2.25rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.wp-timeline-step .wp-list-check li::before {
    content: '✓';
    position: absolute;
    left: 0.5rem;
    top: 1rem;
    width: auto;
    height: auto;
    background: none;
    /* cancel badge */
    color: var(--wp-accent-primary);
    border-radius: 0;
    display: inline;
    font-size: 1rem;
    font-weight: 700;
}


/* Author bio: professional card styling */
.wp-author-bio {
    display: grid;
    grid-template-columns: 1fr;
    /* mobile */
    align-items: center;
    text-align: center;
    gap: var(--wp-spacing-4);
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-light);
    padding: var(--wp-spacing-6);
}

.wp-author-bio .author-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.wp-author-bio .author-name {
    font-size: 1.25rem;
    margin: 0 0 2px 0;
}

.wp-author-bio .author-title {
    color: var(--wp-secondary-gray);
    font-weight: 500;
    margin: 0 0 var(--wp-spacing-2) 0;
}

.wp-author-bio .author-description {
    color: var(--wp-body-text);
    font-size: 0.98rem;
    max-width: 60ch;
    margin: 0 auto;
}

@media (min-width: 576px) {
    .wp-author-bio {
        grid-template-columns: 100px 1fr;
        text-align: left;
        gap: var(--wp-spacing-6);
    }

    .wp-author-bio .author-description {
        margin: 0;
    }
}


/* Minimal theme adjustments */
/* Minimal checklist (global) */
.wp-list-check {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-list-check li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .6rem;
}

.wp-list-check li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: .25rem;
    color: var(--wp-accent-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Minimal numbered list */
.wp-list-numbered {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: wp-counter;
}

.wp-list-numbered li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .6rem;
    counter-increment: wp-counter;
}

.wp-list-numbered li::before {
    content: counter(wp-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wp-secondary-gray);
    font-weight: 600;
}

/* Minimal highlight box */
.wp-highlight-box {
    background: var(--wp-background-light);
    border-left: none;
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    box-shadow: none;
}

.wp-highlight-box .highlight-label {
    color: var(--wp-secondary-gray);
    letter-spacing: .3px;
}

.wp-highlight-box .highlight-text {
    color: var(--wp-body-text);
    font-size: 1.05rem;
}

/* Minimal ROI block */
.wp-roi-calculator {
    background: #0f172a;
    /* deep slate */
    padding: var(--wp-spacing-8);
}

.wp-roi-calculator .roi-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.wp-roi-calculator .roi-metric {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
}

.wp-roi-calculator .roi-value {
    font-size: 2rem;
}

/* Minimal case study numbers */
.wp-case-study .result-number {
    color: var(--wp-primary-dark);
    font-weight: 700;
}

.wp-case-study .result-label {
    color: var(--wp-secondary-gray);
}


/* Hard reset: ensure minimal bullets and numbers everywhere */
.wp-list-check li::before {
    /* reset old badge props */
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    display: inline;
    content: '✓';
    top: .25rem;
    left: 0;
    position: absolute;
    line-height: 1;
    font-size: .95rem;
    color: var(--wp-accent-primary);
    font-weight: 700;
}

.wp-list-numbered li::before {
    /* reset old badge props */
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    display: inline;
    content: counter(wp-counter) '.';
    top: 0;
    left: 0;
    position: absolute;
    line-height: 1;
    font-size: .95rem;
    color: var(--wp-secondary-gray);
    font-weight: 600;
}


/* Minimal methodology card & steps */
.wp-methodology-card {
    background: #fff;
    border: 1px solid var(--wp-border-color);
    border-radius: 12px;
    box-shadow: none;
    padding: var(--wp-spacing-6);
}

.wp-methodology-card .methodology-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-methodology-card .methodology-steps {
    display: grid;
    gap: 1rem;
}

.wp-methodology-card .methodology-step {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: start;
    gap: var(--wp-spacing-4);
    padding: .25rem 0;
}

.wp-methodology-card .methodology-step .methodology-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: var(--wp-secondary-gray);
    border: 1px solid var(--wp-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .85rem;
}

.wp-methodology-card .step-content .step-title {
    font-weight: 600;
    margin: 0 0 .25rem;
    font-size: 1.05rem;
}

.wp-methodology-card .step-content .step-description {
    color: var(--wp-secondary-gray);
    font-size: .95rem;
    margin: 0;
}

/* Action card content styling */
.wp-action-card .wp-list-clean li::before {
    width: 6px;
    height: 6px;
    background: var(--wp-secondary-gray);
}


/* === Brand palette alignment (do not gray-out everything) === */


/* Use brand gradient again for ROI/CTA */
.wp-roi-calculator {
    background: var(--wp-background-dark-gradient);
}

/* Highlight box: minimal but with brand label */
.wp-highlight-box .highlight-label {
    color: var(--wp-accent-primary);
}

/* ===== MISSING COMPONENT STYLES ===== */

/* wp-stat-card (AI generated component) */
.wp-stat-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-6);
    text-align: center;
    box-shadow: var(--wp-shadow-light);
}

.wp-stat-card .wp-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--wp-accent-primary);
    margin-bottom: var(--wp-spacing-2);
}

.wp-stat-card .wp-stat-label {
    font-size: 0.875rem;
    color: var(--wp-secondary-gray);
    font-weight: 500;
}

.wp-stat-card .wp-stat-context {
    font-size: 0.75rem;
    color: var(--wp-text-muted);
    margin-top: var(--wp-spacing-2);
}

/* wp-quote-block (AI generated component) */
/* .wp-quote-block {
    background: var(--wp-background-soft-pink);
    border-left: 4px solid var(--wp-accent-primary);
    border-radius: 0 var(--wp-radius-lg) var(--wp-radius-lg) 0;
    padding: var(--wp-spacing-6);
    margin: var(--wp-spacing-6) 0;
}

.wp-quote-block .wp-quote-text {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--wp-body-text);
    margin-bottom: var(--wp-spacing-4);
}

.wp-quote-block .wp-quote-author {
    font-weight: 600;
    color: var(--wp-primary-dark);
    font-size: 0.875rem;
} */

/* wp-key-insight (AI generated component - alias of wp-highlight-box) */
.wp-key-insight {
    background: var(--wp-background-highlight-gradient);
    border-left: 4px solid var(--wp-accent-primary);
    border-radius: 0 var(--wp-radius-lg) var(--wp-radius-lg) 0;
    padding: var(--wp-spacing-6);
    margin: var(--wp-spacing-6) 0;
}

.wp-key-insight .wp-insight-label {
    font-weight: 600;
    color: var(--wp-accent-primary);
    margin-bottom: var(--wp-spacing-2);
}

.wp-key-insight .wp-insight-text {
    color: var(--wp-body-text);
    font-size: 1.05rem;
}

/* wp-case-study-card (AI generated component) */
.wp-case-study-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-xl);
    padding: var(--wp-spacing-8);
    margin: var(--wp-spacing-8) 0;
    box-shadow: var(--wp-shadow-light);
}

.wp-case-study-card .wp-case-study-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--wp-spacing-6);
    padding-bottom: var(--wp-spacing-4);
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-case-study-card .wp-case-study-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
}

.wp-case-study-card .wp-case-study-industry {
    background: var(--wp-background-light);
    color: var(--wp-secondary-gray);
    padding: var(--wp-spacing-2) var(--wp-spacing-4);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.wp-case-study-card .wp-case-study-content {
    margin-bottom: var(--wp-spacing-6);
}

.wp-case-study-card .wp-case-study-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--wp-spacing-4);
}

.wp-case-study-card .wp-case-result {
    text-align: center;
    padding: var(--wp-spacing-3);
    background: var(--wp-background-light);
    border-radius: var(--wp-radius-md);
}

.wp-case-study-card .wp-result-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wp-accent-primary);
}

/* wp-recommendation-cards (AI generated component) */
.wp-recommendation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--wp-spacing-6);
    margin: var(--wp-spacing-8) 0;
}

.wp-recommendation-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-6);
    box-shadow: var(--wp-shadow-light);
}

.wp-recommendation-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-bottom: var(--wp-spacing-4);
    padding-bottom: var(--wp-spacing-3);
    border-bottom: 2px solid var(--wp-accent-primary);
}

.wp-recommendation-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-recommendation-card li {
    position: relative;
    padding-left: var(--wp-spacing-6);
    margin-bottom: var(--wp-spacing-3);
}

.wp-recommendation-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wp-accent-primary);
    font-weight: 700;
}

/* ===== SOPHISTICATED FINANCIAL ANALYSIS ===== */
/* ===== SOPHISTICATED FINANCIAL ANALYSIS ===== */
.wp-financial-analysis {
    margin: var(--wp-spacing-12) 0;
    background-color: var(--wp-analysis-bg);
    border-radius: var(--wp-radius-xl);
    padding: var(--wp-spacing-10);
    border: 1px solid var(--wp-border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    color: var(--wp-primary-dark);
}

/* ... (Card Header and H6 styles remain the same) ... */
.wp-financial-card .card-header {
    background: none;
    padding: 0 0 var(--wp-spacing-6) 0;
    border-bottom: 1px solid var(--wp-separator-color);
    margin-bottom: var(--wp-spacing-10);
    position: relative;
}

.wp-financial-card .card-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--wp-accent-gradient);
    border-radius: 3px;
}

.wp-financial-card .card-header h6 {
    font-weight: 700;
    color: var(--wp-primary-dark);
    font-size: 1.625rem;
    letter-spacing: -0.03em;
    margin: 0;
}

.wp-financial-card .card-body {
    padding: 0;
}

.wp-financial-card .row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    align-items: stretch;
}

.wp-financial-card .row>[class*="col-"] {
    padding: 0;
    flex: 1;
    min-width: 200px;
    border-right: 1px solid var(--wp-separator-color);
    min-width: 0;
    /* Important: Prevents content from forcing the column wider than its flex basis */
}

.wp-financial-card .row>[class*="col-"]:last-child {
    border-right: none;
}

.wp-financial-metric {
    text-align: center;
    padding: var(--wp-spacing-6) var(--wp-spacing-4);
    /* Reduced horizontal padding to 1rem (spacing-4) for more space */
    background: none;
    border: none;
    box-shadow: none;
    transition: all var(--wp-transition-base);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wp-financial-card .row>[class*="col-"]:hover {
    background-color: var(--wp-background-soft-pink);
    border-color: rgba(222, 52, 127, 0.3);
}

.wp-financial-metric:hover {
    transform: none;
}

.wp-financial-metric:hover .wp-metric-icon {
    transform: scale(1.1);
    /* Subtle pulse on hover */
}

/* Font Awesome Icon Setup */


.wp-metric-icon {
    font-size: 2rem;
    /* Larger size */
    color: var(--wp-accent-primary);
    /* Pink accent */
    margin-bottom: var(--wp-spacing-3);
    transition: transform 0.3s ease;
}



.wp-metric-value {
    font-size: 3rem;
    /* Reduced from 3.5rem to 3rem to prevent overlap */
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: var(--wp-spacing-2);
    background: var(--wp-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    /* FIX: Set minimum width to 0 to respect column container constraints */
    min-width: 0;
}

.wp-metric-label {
    font-size: 0.9rem;
    color: var(--wp-secondary-gray);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin: 0;
}


/* Responsive adjustments */
@media (max-width: 992px) {

    /* Slight adjustment for medium screens to reduce risk of overlap */
    .wp-financial-metric {
        padding: var(--wp-spacing-6) var(--wp-spacing-3);
    }
}

@media (max-width: 768px) {

    /* Mobile Layout - Stacks vertically and replaces vertical dividers with horizontal ones */
    .wp-financial-analysis {
        padding: var(--wp-spacing-6);
    }

    .wp-financial-card .row {
        flex-direction: column;
        gap: 0;
    }

    .wp-financial-card .row>[class*="col-"] {
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--wp-separator-color);
    }

    .wp-financial-card .row>[class*="col-"]:last-child {
        border-bottom: none;
    }

    .wp-financial-metric {
        padding: var(--wp-spacing-6) var(--wp-spacing-4);
    }

    .wp-metric-value {
        font-size: 2.25rem;
        /* Further reduction on mobile */
        white-space: normal;
        /* Allow wrapping on very small screens for long values */
    }

    .wp-financial-card .row>[class*="col-"]:hover {
        background-color: var(--wp-background-soft-pink);
    }
}

/* wp-table-container (AI generated component) */
.wp-table-container {
    margin: var(--wp-spacing-8) 0;
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    overflow: hidden;
    box-shadow: var(--wp-shadow-light);
}

.wp-table-title {
    background: var(--wp-background-light);
    padding: var(--wp-spacing-4) var(--wp-spacing-6);
    font-weight: 600;
    color: var(--wp-primary-dark);
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-data-table {
    width: 100%;
    border-collapse: collapse;
}

.wp-data-table th,
.wp-data-table td {
    padding: var(--wp-spacing-4) var(--wp-spacing-6);
    text-align: left;
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-data-table th {
    background: var(--wp-background-light);
    font-weight: 600;
    color: var(--wp-primary-dark);
}

.wp-data-table tbody tr:hover {
    background: var(--wp-background-light);
}

/* ===== SOPHISTICATED COMPARISON TABLE ===== */
/* ===================================================================
   UPDATED: CUTTING-EDGE COMPARISON TABLE (Desktop Fixed + Mobile Scroll)
   =================================================================== */

.wp-comparison-table {
    margin: var(--wp-spacing-8) 0;
    position: relative;
    isolation: isolate;
}

.wp-comparison-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-xl);
    box-shadow: var(--wp-shadow-medium);
    overflow: hidden;
    transition: all var(--wp-transition-base);
}

/* Header styling */
.wp-comparison-card .card-header {
    background: var(--wp-background-white);
    padding: var(--wp-spacing-6) var(--wp-spacing-8);
    border-bottom: 1px solid var(--wp-border-color);
}

.wp-comparison-card .card-header h6 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp-primary-dark);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--wp-primary-dark) 0%, #4b5563 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wp-comparison-card .card-body {
    padding: 0;
    width: 100%;
}

/* Matrix Table Styling - Base */
.wp-comparison-matrix {
    width: 100%;
    border-collapse: collapse;
    /* Clean borders */
    margin: 0;
}

/* Header Cells */
.wp-comparison-matrix th {
    text-align: left;
    padding: var(--wp-spacing-6) var(--wp-spacing-8);
    background: var(--wp-background-soft-blue);
    color: var(--wp-secondary-gray);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--wp-border-color);
    vertical-align: bottom;
}

/* Body Cells */
.wp-comparison-matrix td {
    padding: var(--wp-spacing-5) var(--wp-spacing-8);
    color: var(--wp-body-text);
    border-bottom: 1px solid var(--wp-border-color);
    font-size: 0.95rem;
    line-height: 1.5;
    background: var(--wp-background-white);
    vertical-align: middle;
}

/* The Last Column (Winner) Highlight */
.wp-comparison-matrix th:last-child {
    color: var(--wp-accent-primary);
    background: rgba(222, 52, 127, 0.04);
}

.wp-comparison-matrix td:last-child {
    font-weight: 600;
    color: var(--wp-primary-dark);
    background: rgba(222, 52, 127, 0.02);
}

/* ===================================================================
   DESKTOP LAYOUT (Laptop & Up - No Scrollbar)
   =================================================================== */
@media (min-width: 992px) {
    .wp-comparison-card .card-body {
        overflow: visible;
        /* Disable scrollbar */
    }

    .wp-comparison-matrix {
        table-layout: fixed;
        /* Forces table to fit container width exactly */
    }

    .wp-comparison-matrix th,
    .wp-comparison-matrix td {
        white-space: normal;
        /* Allow text to wrap to next line */
        word-wrap: break-word;
        /* Break long words if needed */
    }

    /* First column styling (Feature Name) */
    .wp-comparison-matrix th:first-child,
    .wp-comparison-matrix td:first-child {
        width: 25%;
        /* Give first column specific width */
        border-right: 1px solid var(--wp-border-color);
    }

    /* Other columns auto-distribute */
    .wp-comparison-matrix th:not(:first-child),
    .wp-comparison-matrix td:not(:first-child) {
        text-align: left;
    }
}

/* ===================================================================
   MOBILE/TABLET OPTIMIZATION (Sticky Column & Scroll)
   =================================================================== */
@media (max-width: 991px) {
    .wp-comparison-card .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 5px;
        /* Space for scrollbar */

        /* Scrollbar styling */
        scrollbar-width: thin;
        scrollbar-color: var(--wp-accent-primary) var(--wp-background-light);
    }

    /* Custom Scrollbar for Webkit */
    .wp-comparison-card .card-body::-webkit-scrollbar {
        height: 4px;
    }

    .wp-comparison-card .card-body::-webkit-scrollbar-thumb {
        background-color: var(--wp-accent-primary);
        border-radius: 4px;
    }

    .wp-comparison-matrix {
        min-width: 700px;
        /* Force scrolling on small screens */
        border-collapse: separate;
        /* Required for sticky */
        border-spacing: 0;
    }

    /* Sticky First Column Logic */
    .wp-comparison-matrix th:first-child,
    .wp-comparison-matrix td:first-child {
        position: sticky;
        left: 0;
        z-index: 20;
        background: var(--wp-background-white);
        box-shadow: 4px 0 8px -2px rgba(0, 0, 0, 0.05);
        /* Shadow to indicate scroll */
        border-right: 1px solid var(--wp-border-color);
        min-width: 140px;
        max-width: 160px;
    }

    .wp-comparison-matrix th:first-child {
        background: var(--wp-background-soft-blue);
        z-index: 25;
    }

    .wp-comparison-matrix tr:hover td:first-child {
        background: var(--wp-background-light);
    }
}

/* wp-timeline (AI generated component) - PROFESSIONAL REDESIGN */
.wp-timeline {
    margin: var(--wp-spacing-8) 0;
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-xl);
    box-shadow: var(--wp-shadow-light);
    overflow: hidden;
}

.wp-timeline-card {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.wp-timeline-card .card-header {
    background: var(--wp-background-light);
    padding: var(--wp-spacing-6);
    border-bottom: 1px solid var(--wp-border-color);
    margin: 0;
}

.wp-timeline-card .card-header h6 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
}

.wp-timeline-card .card-body {
    padding: 0;
}

.wp-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--wp-spacing-6);
    padding: var(--wp-spacing-8);
    border-bottom: 1px solid var(--wp-border-color);
    position: relative;
    transition: var(--wp-transition-base);
}

.wp-timeline-item:hover {
    background: var(--wp-background-light);
}

.wp-timeline-item:last-child {
    border-bottom: none;
}

.wp-timeline-marker {
    width: 16px;
    height: 16px;
    background: var(--wp-accent-primary);
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
    border: 3px solid var(--wp-background-white);
    box-shadow: 0 0 0 2px var(--wp-accent-primary);
    position: relative;
    z-index: 2;
}

.wp-timeline-item:not(:last-child) .wp-timeline-marker::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% + var(--wp-spacing-8));
    background: var(--wp-border-color);
    z-index: -1;
}

.wp-timeline-content {
    flex: 1;
    min-width: 0;
}

.wp-timeline-content h6 {
    margin: 0 0 var(--wp-spacing-3) 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
    line-height: 1.4;
}

.wp-timeline-content p {
    margin: 0;
    color: var(--wp-body-text);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* wp-glossary (AI generated component) */
.wp-glossary {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-6);
    margin: var(--wp-spacing-8) 0;
}

.wp-glossary dt {
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-top: var(--wp-spacing-4);
    margin-bottom: var(--wp-spacing-2);
}

.wp-glossary dt:first-child {
    margin-top: 0;
}

.wp-glossary dd {
    margin: 0 0 var(--wp-spacing-4) 0;
    color: var(--wp-body-text);
    padding-left: var(--wp-spacing-4);
    border-left: 2px solid var(--wp-accent-primary);
}

/* Additional component styles */
.wp-hero-badge {
    display: inline-block;
    background: var(--wp-accent-primary);
    color: white;
    padding: var(--wp-spacing-2) var(--wp-spacing-4);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wp-trend-card {
    background: var(--wp-background-white);
    border: 1px solid var(--wp-border-color);
    border-radius: var(--wp-radius-lg);
    padding: var(--wp-spacing-6);
    box-shadow: var(--wp-shadow-light);
}

.wp-trend-card .trend-title {
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-bottom: var(--wp-spacing-3);
}

.wp-trend-card .trend-indicator {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp-accent-primary);
    margin-top: var(--wp-spacing-3);
}

/* ===================================================================
   CUTTING-EDGE CTA SECTION (The Value Portal)
   =================================================================== */

.wp-cta-section {
    position: relative;
    /* Deep, rich gradient - feels like a premium tech product */
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: var(--wp-radius-xl);
    /* 24px */
    padding: var(--wp-spacing-12) var(--wp-spacing-8);
    margin: var(--wp-spacing-12) 0;
    text-align: center;
    overflow: hidden;
    /* Subtle inner light to give edges definition */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    isolation: isolate;
}

/* Ambient Background Spotlight (Draws eye to center) */
.wp-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%, 20%);
    width: 80%;
    height: 100%;
    background: radial-gradient(circle, rgba(222, 52, 127, 0.15) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Decorative Mesh/Grid Pattern (Optional tech feel) */
.wp-cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
    z-index: -1;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

/* 1. THE HEADLINE (The Offer) */
.wp-cta-section .cta-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: var(--wp-spacing-4);
    letter-spacing: -0.02em;
    line-height: 1.2;
    position: relative;
}

/* 2. THE DESCRIPTION (The Value Prop) */
.wp-cta-section .cta-description {
    font-size: 1.15rem;
    line-height: 1.7;
    /* Slightly transparent white for hierarchy */
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto var(--wp-spacing-8) auto;
    max-width: 650px;
    /* Optimal reading width */
    font-weight: 400;
}

/* 3. THE BUTTON (The Action) */
.wp-cta-section .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Brand Gradient */
    background: linear-gradient(90deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 16px 48px;
    border-radius: 50px;
    /* Pill shape */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 4px 20px rgba(222, 52, 127, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

/* Button Shine Effect on Hover */
.wp-cta-section .cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.wp-cta-section .cta-button:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 30px rgba(222, 52, 127, 0.6);
}

.wp-cta-section .cta-button:hover::before {
    left: 100%;
}

/* Button Arrow Icon (Automatic) */
.wp-cta-section .cta-button::after {
    content: '→';
    margin-left: 10px;
    font-weight: 700;
    transition: transform 0.3s ease;
}

.wp-cta-section .cta-button:hover::after {
    transform: translateX(4px);
}

/* ===================================================================
   MOBILE OPTIMIZATION
   =================================================================== */
@media (max-width: 768px) {
    .wp-cta-section {
        padding: var(--wp-spacing-8) var(--wp-spacing-6);
        border-radius: var(--wp-radius-lg);
        margin: var(--wp-spacing-8) 0;
    }

    .wp-cta-section .cta-title {
        font-size: 1.75rem;
        margin-bottom: var(--wp-spacing-3);
    }

    .wp-cta-section .cta-description {
        font-size: 1rem;
        margin-bottom: var(--wp-spacing-6);
    }

    .wp-cta-section .cta-button {
        width: 100%;
        /* Full width button on mobile */
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* ===== PROFESSIONAL ENHANCEMENTS ===== */

/* Grid layout improvements for better spacing */
.wp-grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--wp-spacing-6);
    align-items: stretch;
}

.wp-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--wp-spacing-6);
    align-items: stretch;
}

.wp-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--wp-spacing-6);
    align-items: stretch;
}

/* Section spacing - minimal to avoid conflicts with Bootstrap */
.wp-section {
    margin-bottom: 0;
}

.wp-section:last-child {
    margin-bottom: 0;
}

/* Professional heading improvements */
.wp-heading-2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--wp-primary-dark);
    margin-bottom: 1rem;
    line-height: 1.3;
    position: relative;
    padding-bottom: var(--wp-spacing-3);
}

.wp-heading-2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    border-radius: 2px;
}

.wp-heading-3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Enhanced card hover effects */
.wp-metric-card,
.wp-stat-card,
.wp-action-card,
.wp-case-study,
.wp-case-study-card,
.wp-trend-card {
    transition: var(--wp-transition-base);
}

.wp-metric-card:hover,
.wp-stat-card:hover,
.wp-case-study:hover,
.wp-case-study-card:hover,
.wp-trend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--wp-accent-primary);
}

/* Professional table enhancements */
.wp-table-container,
.wp-comparison-table {
    margin: 1rem 0;
}

.wp-professional-table,
.wp-data-table,
.wp-comparison-matrix {
    font-size: 0.95rem;
}

.wp-professional-table th,
.wp-data-table th,
.wp-comparison-matrix th {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Responsive improvements */
@media (max-width: 768px) {

    .wp-grid-auto,
    .wp-grid-2,
    .wp-grid-3 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .wp-heading-2 {
        font-size: 1.5rem;
    }

    .wp-heading-3 {
        font-size: 1.25rem;
    }

    .wp-section {
        margin-bottom: var(--wp-spacing-8);
    }

    .floating-toc {
        right: 10px;
        left: 10px;
        top: auto;
        bottom: 80px;
        transform: none;
        max-height: 50vh;
        padding: 20px;
    }

    .floating-toc-toggle {
        bottom: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .floating-toc-item {
        min-width: auto;
        padding: 12px 16px;
        font-size: 14px;
    }

    /* Additional mobile constraints for AI content */



    /* Ensure tables don't break layout on mobile */
    .wp-table-container,

    .wp-feature-comparison {
        margin: var(--wp-spacing-md) -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Mobile table scrolling */
    .wp-professional-table,
    .wp-data-table,
    .wp-comparison-matrix {
        min-width: 500px;
        font-size: 0.875rem;
    }

    .wp-professional-table th,
    .wp-data-table th,
    .wp-comparison-matrix th,
    .wp-professional-table td,
    .wp-data-table td,
    .wp-comparison-matrix td {
        padding: 0.5rem 0.75rem;
    }

}



/* Methodology numbers with brand accent ring */
.wp-methodology-card .methodology-step .methodology-step-number {
    background: #fff;
    color: var(--wp-accent-primary);
    border: 1px solid var(--wp-accent-primary);
}

/* Author: keep title in brand accent */
.wp-author-bio .author-title {
    color: var(--wp-accent-primary);
}


/* === Compatibility aliases and section wrappers (to match renderer output) === */
/* Section wrapper inside each <section> for consistent spacing */
.wp-section {
    margin-bottom: 0;
    padding: 0;
}

.wp-section-inner {
    display: block;
}

/* Ensure proper spacing between sections */
.wp-section+.wp-section {
    margin-top: 0;
}

/* Component wrapper spacing - minimal to avoid conflicts */
.wp-section>.wp-metric-card,
.wp-section>.wp-testimonial,
.wp-section>.wp-case-study,
.wp-section>.wp-highlight-box,
.wp-section>.wp-action-card,
.wp-section>.wp-table-container,
.wp-section>.wp-comparison-table,
.wp-section>.wp-timeline,
.wp-section>.wp-data-visualization,
.wp-section>.wp-author-bio,
.wp-section>.wp-glossary {
    margin-bottom: 0.5rem;
}

.wp-section>.wp-metric-card:last-child,
.wp-section>.wp-testimonial:last-child,
.wp-section>.wp-case-study:last-child,
.wp-section>.wp-highlight-box:last-child,
.wp-section>.wp-action-card:last-child,
.wp-section>.wp-table-container:last-child,
.wp-section>.wp-comparison-table:last-child,
.wp-section>.wp-timeline:last-child,
.wp-section>.wp-data-visualization:last-child,
.wp-section>.wp-author-bio:last-child,
.wp-section>.wp-glossary:last-child {
    margin-bottom: 0;
}

/* Legacy heading class aliases -> map to unified heading styles */
.wp-section-title,
.section-header,
.main-header {
    font-size: 1.875rem;
    /* align with .wp-heading-2 */
    line-height: 1.3;
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-bottom: 0.5rem;
}

.subsection-header {
    font-size: 1.125rem;
    /* align with .wp-heading-4 */
    font-weight: 600;
    color: var(--wp-primary-dark);
    margin-bottom: 0.5rem;
}

/* Body text alias */
.whitepaper-text {
    font-size: 1.02rem;
    /* align with .wp-text-body */
    line-height: 1.7;
    color: var(--wp-body-text);
}

/* Content wrapper alias */
.wp-content {
    margin-bottom: 0.5rem;
}

/* List aliases (minimal style) */
.wp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .6rem;
}

.wp-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: .25rem;
    color: var(--wp-accent-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.wp-ordered-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: wp-counter;
}

.wp-ordered-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .6rem;
    counter-increment: wp-counter;
}

.wp-ordered-list li::before {
    content: counter(wp-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--wp-secondary-gray);
    font-weight: 600;
}

/* ===== SMART PLACEHOLDERS (Editor UI) ===== */

.wp-block-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    margin: 24px 0;
    transition: all 0.2s ease;
    position: relative;
}

.wp-block-placeholder:hover {
    border-color: var(--wp-accent-primary);
    background-color: #fff5f8;
}

.wp-placeholder-icon {
    font-size: 2.5rem;
    color: #adb5bd;
    margin-bottom: 16px;
}

.wp-placeholder-label {
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 8px;
}

.wp-placeholder-prompt {
    font-size: 0.85rem;
    color: #9ca3af;
    font-style: italic;
    margin-bottom: 20px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* Button Group inside placeholder */
.wp-placeholder-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-placeholder-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.btn-action-upload {
    background-color: #fff;
    border-color: #dee2e6;
    color: #495057;
}

.btn-action-upload:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

.btn-action-generate {
    background: linear-gradient(135deg, var(--wp-accent-primary), var(--wp-accent-secondary));
    color: #fff;
    border: none;
}

.btn-action-generate:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(222, 52, 127, 0.25);
    color: #fff;
}

/* Hide these buttons on the actual website frontend */

.wp-block-placeholder {
    display: none;
}

.flexible-content-container .wp-block-placeholder {
    display: block;
    /* or whatever it should be */
}

/* ===== IMAGE COMPONENTS ===== */

/* Container for the image */
.wp-image {
    margin: var(--wp-spacing-8) 0;
    position: relative;
    display: block;
    width: 100%;
    text-align: center;
    /* Centers the image if smaller than container */
}

/* The Image Itself */
.wp-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--wp-radius-lg);
    box-shadow: var(--wp-shadow-medium);
    display: inline-block;
    transition: transform 0.3s ease;
    object-fit: cover;
    /* Ensures aspect ratio is preserved */
}

/* Hover effect for interactive feel */
.wp-image img:hover {
    transform: scale(1.01);
    box-shadow: var(--wp-shadow-hover);
}

/* Optional Caption */
.wp-image figcaption {
    margin-top: var(--wp-spacing-3);
    font-size: 0.9rem;
    color: var(--wp-secondary-gray);
    font-style: italic;
    text-align: center;
}

/* Full Width Mode (Optional modifier) */
.wp-image.full-width img {
    width: 100%;
}

/* Floating Images (Desktop only) */
@media (min-width: 992px) {
    .wp-image.float-left {
        float: left;
        margin-right: var(--wp-spacing-6);
        margin-bottom: var(--wp-spacing-4);
        max-width: 50%;
    }

    .wp-image.float-right {
        float: right;
        margin-left: var(--wp-spacing-6);
        margin-bottom: var(--wp-spacing-4);
        max-width: 50%;
    }
}

/* ===================================================================
   MOBILE FONT SIZE IMPROVEMENTS
   ===================================================================
   Comprehensive mobile typography enhancements for better readability
   on small screens. Minimum 16px for body text, larger for headings.
   ================================================================= */

@media (max-width: 768px) {
    /* Base body text - minimum 16px for readability */


    /* Main content paragraphs */
    .main-ai-content p,
    .whitepaper-text,
    .wp-text-body,
    p {
        font-size: 1.125rem !important;
        /* 16px minimum */
        line-height: 1.7 !important;
    }

    @media (max-width: 768px) {
        p.lead {
            font-size: 1.0625rem !important;
            line-height: 1.7;
        }
    }

    /* Headings - responsive scaling */
    .main-ai-content h1,
    .whitepaper-title,
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
        /* 28px - 36px */
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }

    .main-ai-content h2,
    .wp-heading-2,
    h2 {
        font-size: clamp(1.5rem, 4vw, 1.875rem) !important;
        /* 24px - 30px */
        line-height: 1.3 !important;
        margin-bottom: 0.875rem !important;
    }

    .main-ai-content h3,
    .wp-heading-3,
    h3 {
        font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important;
        /* 20px - 24px */
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
    }

    .main-ai-content h4,
    .wp-heading-4,
    h4 {
        font-size: 1.125rem !important;
        /* 18px */
        line-height: 1.4 !important;
    }

    h5 {
        font-size: 1.0625rem !important;
        /* 17px */
    }

    h6 {
        font-size: 1rem !important;
        /* 16px */
    }

    .wp-heading-5 {
        font-size: 1.0625rem !important;
        /* 16px */
        margin-top: var(--wp-spacing-3);
    }

    .wp-heading-6 {
        font-size: 1rem !important;
        /* 13px */
        margin-top: var(--wp-spacing-3);
    }

    /* Component text improvements */
    .wp-metric-card .metric-title {
        font-size: 1.125rem !important;
        /* 18px */
    }

    .wp-metric-card .metric-value {
        font-size: 2.5rem !important;
        /* 40px */
    }

    .wp-metric-card .metric-footer {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    .wp-highlight-box .highlight-text {
        font-size: 1.0625rem !important;
        /* 17px */
    }

    .wp-testimonial .quote-text {
        font-size: 1.125rem !important;
        /* 18px */
        line-height: 1.6 !important;
    }

    .wp-case-study .case-title {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    .wp-case-study .result-number {
        font-size: 1.625rem !important;
        /* 26px */
    }

    .wp-case-study .result-label {
        font-size: 0.875rem !important;
        /* 14px */
    }

    /* Table text */
    .wp-professional-table thead th,
    .wp-data-table thead th,
    .wp-comparison-matrix thead th {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    .wp-professional-table tbody td,
    .wp-data-table tbody td,
    .wp-comparison-matrix tbody td {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    /* Timeline text */
    .wp-timeline-step .step-title {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    .wp-timeline-step .step-description {
        font-size: 1rem !important;
        /* 16px */
    }

    /* List text */
    .wp-list-check li,
    .wp-list-numbered li,
    .wp-list li {
        font-size: 1rem !important;
        /* 16px */
        line-height: 1.6 !important;
    }

    /* Author bio */
    .wp-author-bio .author-name {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    .wp-author-bio .author-description {
        font-size: 1rem !important;
        /* 16px */
    }

    /* ROI Calculator */
    .wp-roi-calculator .roi-title {
        font-size: 1.5rem !important;
        /* 24px */
    }

    .wp-roi-calculator .roi-value {
        font-size: 2rem !important;
        /* 32px */
    }

    .wp-roi-calculator .roi-label {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    /* Financial Analysis */
    .wp-financial-card .card-header h6 {
        font-size: 1.125rem !important;
        /* 18px */
    }

    .wp-metric-value {
        font-size: 2.25rem !important;
        /* 36px */
    }

    .wp-metric-label {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    /* Action Cards */
    .wp-action-card .action-title {
        font-size: 1.125rem !important;
        /* 18px */
    }

    .wp-action-card .action-description {
        font-size: 1rem !important;
        /* 16px */
    }

    /* Data Visualization */
    .wp-data-visualization .viz-title {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    .wp-data-visualization .viz-subtitle {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    /* Trend Cards */
    .wp-trend-card .trend-indicator {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    /* CTA Section */
    .wp-cta-section .cta-title {
        font-size: 1.5rem !important;
        /* 24px */
    }

    .wp-cta-section .cta-description {
        font-size: 1rem !important;
        /* 16px */
    }

    /* Glossary */
    .wp-glossary dt {
        font-size: 1.0625rem !important;
        /* 17px */
    }

    .wp-glossary dd {
        font-size: 1rem !important;
        /* 16px */
    }

    /* Methodology Cards */
    .wp-methodology-card .methodology-title {
        font-size: 1.125rem !important;
        /* 18px */
    }

    .wp-methodology-card .step-content .step-title {
        font-size: 1.0625rem !important;
        /* 17px */
    }

    .wp-methodology-card .step-content .step-description {
        font-size: 1rem !important;
        /* 16px */
    }

    /* Before/After Cards */
    .wp-before-after-card .wp-before-section h6,
    .wp-before-after-card .wp-after-section h6 {
        font-size: 1.125rem !important;
        /* 18px */
    }

    .wp-before-after-card p {
        font-size: 1rem !important;
        /* 16px */
    }

    .wp-before-after-card .wp-improvement {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    /* Comparison Cards */
    .wp-comparison-card .card-header h6 {
        font-size: 1.125rem !important;
        /* 18px */
    }

    /* Feature Comparison */
    .wp-feature-comparison .column-title {
        font-size: 1.1875rem !important;
        /* 19px */
    }

    .wp-feature-comparison .feature-content {
        font-size: 1rem !important;
        /* 16px */
    }

    /* Subtitle */
    .whitepaper-subtitle {
        font-size: clamp(1.0625rem, 2vw, 1.1875rem) !important;
        /* 17px - 19px */
    }
}

/* Add at the very bottom of the file */
@media print {

    /* Hide non-printable elements */
    .floating-toc,
    .floating-toc-toggle,
    .wp-placeholder-actions,
    .btn,
    button,
    .header-actions,
    .status-badge {
        display: none !important;
    }

    /* Reset background colors for ink saving */
    body,
    section,
    .wp-section {
        background: white !important;
        color: black !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Ensure cards have borders instead of shadows */
    .wp-metric-card,
    .wp-case-study,
    .wp-roi-calculator {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        /* Prevent splitting across pages */
        page-break-inside: avoid;
    }

    /* Text adjustments */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li {
        color: #000 !important;
    }

    /* Expand links */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* WordPress-style Floating Link Editor */
.editor-link-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1000;
    width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.editor-link-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.editor-link-tooltip input {
    border: 1px solid #eee;
    background: #f8f9fa;
    padding: 6px 10px;
    border-radius: 4px;
    flex-grow: 1;
    font-size: 14px;
    outline: none;
}

.editor-link-tooltip input:focus {
    background: #fff;
    border-color: var(--wp-accent-primary);
}

.editor-link-tooltip .btn-apply {
    background: transparent;
    border: none;
    color: var(--wp-accent-primary);
    cursor: pointer;
    font-size: 16px;
    padding: 4px 8px;
}

.editor-link-tooltip .btn-close-tooltip {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 16px;
}

/* Arrow pointing up */
.editor-link-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    transform: rotate(45deg);
}

/* Unlink Button Styling */
.editor-link-tooltip .btn-unlink {
    background: transparent;
    border: none;
    border-left: 1px solid #eee;
    /* Separator line */
    color: #6c757d;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    margin-left: 2px;
    transition: color 0.2s;
}

.editor-link-tooltip .btn-unlink:hover {
    color: #dc3545;
    /* Red on hover */
    background-color: #fff5f5;
}