/*
 * Coco Framework - Clean Static Website
 * Pixel-perfect recreation of WordPress design
 * Using exact specifications from DESIGN-SPECS.md
 * Updated: Nov 2025 - Using rem units for accessibility (1rem = 16px base)
 */

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root font size - 100% respects user browser preferences (typically 16px) */
html {
    font-size: 100%;
}

/* Global image styling - sharp corners everywhere */
img, video {
    border-radius: 0 !important; /* Sharp corners on all images and videos */
}

/* CSS Variables - Comprehensive Design System */
/* Note: Using rem for typography and spacing, px for borders/shadows */
:root {
    /* ==================== COLORS ==================== */
    /* Primary Colors */
    --color-white: #ffffff;
    --color-dark-blue: #032d42;
    --color-primary-green: #62d84e;
    --color-dark-gray: #1d1d1d;
    --color-light-gray: #f7f7f7;
    --color-medium-gray: #e0e0e0;
    --color-black: #000;
    --color-light-green: #d4f1d4; /* Lighter green for backgrounds - soft, professional */
    --color-border-gray: #dadad3;
    --color-hover-green: #9fe793;
    --color-off-white: #FBFBF4;
    --color-footer-bg: #e1e1e1; /* Minimum recommended contrast for footer separation */
    /* Semantic Colors */
    --color-background: var(--color-white);
    --color-bg-light: var(--color-light-gray); /* Light gray background for sections */
    --color-text-primary: var(--color-dark-gray);
    --color-text-secondary: var(--color-dark-gray);
    --color-border: var(--color-medium-gray);
    --color-border-light: var(--color-border-gray);

    /* ==================== TYPOGRAPHY ==================== */
    /* Font Family */
    --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes - Responsive Scale using rem (base 16px) */
    --font-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12-13px */
    --font-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.875rem);     /* 13-14px */
    --font-base: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);         /* 14-16px */
    --font-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);           /* 16-18px */
    --font-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);        /* 18-23px */
    --font-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);          /* 20-24px */
    --font-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);          /* 24-32px - Section headings (H2) */
    --font-3xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);        /* 36-56px - Stat numbers */
    --font-4xl: clamp(3rem, 2rem + 5vw, 4.5rem);                /* 48-72px - Hero H1 */
    --font-5xl: clamp(4rem, 3rem + 6vw, 6rem);                  /* 64-96px - Extra large displays */

    /* Additional specific sizes in rem */
    --font-button: 0.875rem;      /* 14px */
    --font-button-lg: 1rem;       /* 16px */
    --font-nav: 1rem;             /* 16px */
    --font-testimonial: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); /* 18-24px */
    --font-feature-desc: clamp(0.875rem, 0.8rem + 0.5vw, 1.1875rem);   /* 14-19px */
    --font-feature-heading: clamp(1.125rem, 1rem + 1vw, 1.8125rem);   /* 18-29px */

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

    /* Line Heights */
    --line-height-tight: 1.0;
    --line-height-snug: 1.2;
    --line-height-normal: 1.35;
    --line-height-relaxed: 1.5;
    --line-height-loose: 1.6;

    /* ==================== SPACING ==================== */
    /* Spacing Scale in rem - Following 4px/8px base grid (base 16px) */
    --space-0: 0;
    --space-4: 0.25rem;    /* 4px */
    --space-8: 0.5rem;     /* 8px */
    --space-12: 0.75rem;   /* 12px */
    --space-16: 1rem;      /* 16px */
    --space-20: 1.25rem;   /* 20px */
    --space-24: 1.5rem;    /* 24px */
    --space-30: 1.875rem;  /* 30px */
    --space-32: 2rem;      /* 32px */
    --space-35: 2.1875rem; /* 35px */
    --space-40: 2.5rem;    /* 40px */
    --space-48: 3rem;      /* 48px */
    --space-50: 3.125rem;  /* 50px */
    --space-60: 3.75rem;   /* 60px */
    --space-64: 4rem;      /* 64px */
    --space-75: 4.6875rem; /* 75px */
    --space-80: 5rem;      /* 80px */
    --space-100: 6.25rem;  /* 100px */

    /* Legacy spacing in rem (maintain backward compatibility) */
    --spacing-25: 1.5625rem;  /* 25px */
    --spacing-30: 1.875rem;   /* 30px */
    --spacing-50: 3.125rem;   /* 50px */
    --spacing-75: 4.6875rem;  /* 75px */
    --spacing-100: 6.25rem;   /* 100px */

    /* Semantic Spacing in rem (8px grid system) */
    /* Using clamp() for fluid spacing - NLRD principle (larger values reduce more on mobile) */
    /* 2025 best practice: Generous desktop spacing (80-120px), compact mobile (32-48px) */
    --padding-section-sm: clamp(2rem, 5vw, 4rem);       /* 32-64px fluid */
    --padding-section-md: clamp(2.5rem, 6vw, 5rem);     /* 40-80px fluid */
    --padding-section-lg: clamp(3rem, 7vw, 6rem);       /* 48-96px fluid */
    --padding-section-xl: clamp(3rem, 8vw, 7.5rem);     /* 48-120px fluid */
    --padding-container: clamp(1.25rem, 5vw, 4.6875rem); /* 20-75px responsive */

    /* Element gaps within sections - fluid with clamp() */
    /* 2025: Generous desktop gaps, compact mobile gaps */
    --element-gap-xs: clamp(0.25rem, 1vw, 0.5rem);      /* 4-8px */
    --element-gap-sm: clamp(0.5rem, 1.5vw, 1rem);       /* 8-16px */
    --element-gap-md: clamp(1rem, 2.5vw, 1.5rem);       /* 16-24px */
    --element-gap-lg: clamp(1.5rem, 3vw, 2.5rem);       /* 24-40px */
    --element-gap-xl: clamp(2rem, 4vw, 3rem);           /* 32-48px */

    /* Typography Vertical Rhythm in rem */
    /* Based on best practices: line-height ÷ 1.5 = paragraph spacing */
    --spacing-paragraph: var(--space-16);       /* 1rem - Standard paragraph spacing */
    --spacing-heading-after: var(--element-gap-md);     /* 16-24px fluid - After heading */
    --spacing-heading-before: var(--space-32);  /* 2rem - Before heading (2× paragraph spacing) */
    --spacing-element: var(--element-gap-lg);   /* 24-32px fluid - Between elements */

    /* ==================== BORDERS ==================== */
    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-base: 2px;
    --border-width-thick: 4px;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 30px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* Specific border radius for components */
    --radius-button: 30px;
    --radius-button-alt: 24px;
    --radius-button-lg: 32px;
    --radius-card: 0; /* Sharp corners by default */

    /* ==================== TRANSITIONS ==================== */
    /* Durations */
    --duration-fast: 0.15s;
    --duration-base: 0.3s;
    --duration-slow: 0.5s;

    /* Easings */
    --ease-in-out: ease-in-out;
    --ease-out: ease-out;
    --ease-in: ease-in;
    --ease-default: ease;

    /* Common Transitions */
    --transition-base: all var(--duration-base) var(--ease-default);
    --transition-colors: background-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default);
    --transition-color: color var(--duration-base) var(--ease-default);

    /* ==================== LAYOUT ==================== */
    /* Container Sizes - px for precise max-widths */
    --container-max: 1440px;
    --content-max: 700px; /* Optimal for 50-75 characters per line (Medium standard) */

    /* Gaps in rem */
    --gap-xs: 0.75rem;   /* 12px */
    --gap-sm: 1rem;      /* 16px */
    --gap-md: 1.5rem;    /* 24px */
    --gap-lg: 2rem;      /* 32px */
    --gap-xl: 2.5rem;    /* 40px */

    /* Min/Max Heights in rem */
    --min-height-card: 15.625rem;   /* 250px */
    --min-height-hero: 25rem;       /* 400px */
    --min-height-image: 18.75rem;   /* 300px */
    --min-height-cta: 31.25rem;     /* 500px */

    /* ==================== Z-INDEX ==================== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;

    /* ==================== SHADOWS (if needed) ==================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

    /* ==================== RESPONSIVE VARIABLES ==================== */
    /* These variables are overridden at mobile breakpoints */

    /* Hero Typography - using rem */
    --hero-h1-size: var(--font-4xl);
    --hero-h1-line-height: 1.1;
    --hero-h1-letter-spacing: -0.02em;
    --hero-subtitle-size: clamp(1.125rem, 1rem + 0.75vw, 1.625rem);  /* 18-26px */
    --hero-description-size: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);  /* 19-22px */
    --hero-text-align: center;
    --hero-cta-align: center;

    /* Section Typography */
    --section-heading-size: var(--font-2xl);
    --section-subtitle-size: var(--font-feature-desc);

    /* Component Typography - using rem */
    --card-heading-size: clamp(1.125rem, 1rem + 0.6vw, 1.4375rem);   /* 18-23px */
    --card-subheading-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);   /* 16-18px */
    --stat-number-size: var(--font-3xl);
    --stat-label-size: var(--font-xl);

    /* Section Spacing - using fluid clamp() values */
    --section-padding-y: var(--space-32);  /* 32px top + 32px bottom = 64px gap between sections */
    --section-gap: var(--element-gap-xl);            /* 32-40px fluid */

    /* Hero Spacing */
    --hero-padding-top: var(--space-64);   /* 64px - balanced with section spacing */
    --hero-padding-bottom: var(--space-32); /* 32px - matches section padding for 64px total gap */
    --hero-content-gap: var(--element-gap-lg);       /* 24-32px fluid */
    --hero-cta-margin: var(--element-gap-xl);        /* 32-40px fluid */
    --hero-image-margin: var(--element-gap-xl);      /* 32-40px fluid */

    /* Grid Layouts - using rem for minmax */
    --grid-columns-cards: repeat(auto-fit, minmax(17.5rem, 1fr));   /* 280px */
    --grid-columns-stats: repeat(auto-fit, minmax(18.75rem, 1fr));  /* 300px */
    --grid-gap-cards: var(--element-gap-lg);         /* 24-32px fluid */
    --grid-gap-stats: var(--element-gap-xl);         /* 32-40px fluid */

    /* Card Sizing */
    --card-padding: var(--spacing-30);
    --card-min-height: var(--min-height-card);
    --card-heading-min-height: 4.5em;

    /* CTA Sizing */
    --cta-width: auto;
    --cta-padding-x: var(--space-40);
    --cta-padding-y: var(--space-16);

    /* Container */
    --container-padding: var(--padding-container);

    /* Touch Targets - rem for accessibility scaling */
    --touch-target-min: 2.75rem;  /* 44px - WCAG minimum */
}

/* ==================== MOBILE BREAKPOINT VARIABLES (768px) ==================== */
@media (max-width: 768px) {
    :root {
        /* Hero Typography - Mobile (using rem) */
        --hero-h1-size: clamp(1.75rem, 8vw, 2.5rem);   /* 28-40px */
        --hero-h1-line-height: 1.15;
        --hero-h1-letter-spacing: -0.01em;
        --hero-subtitle-size: 0.875rem;   /* 14px */
        --hero-description-size: 1rem;    /* 16px */
        --hero-text-align: left;
        --hero-cta-align: flex-start;

        /* Section Typography - Mobile (using rem) */
        --section-heading-size: clamp(1.375rem, 6vw, 1.75rem);  /* 22-28px */
        --section-subtitle-size: 0.9375rem;  /* 15px */

        /* Component Typography - Mobile (using rem) */
        --card-heading-size: 1.125rem;    /* 18px */
        --card-subheading-size: 1rem;     /* 16px */
        --stat-number-size: clamp(2rem, 10vw, 3rem);  /* 32-48px */
        --stat-label-size: 1.125rem;      /* 18px */

        /* Section Spacing - Mobile */
        --section-padding-y: var(--space-24);  /* 24px top + 24px bottom = 48px gap on mobile */
        /* --section-gap inherits fluid clamp() from :root */

        /* Hero Spacing - Mobile (maintaining 2:1 ratio, slightly smaller) */
        --hero-padding-top: var(--space-48);    /* 48px top on mobile */
        --hero-padding-bottom: var(--space-24); /* 24px bottom on mobile */
        --hero-content-gap: var(--element-gap-md);        /* Tighter content gap on mobile */
        --hero-cta-margin: var(--element-gap-lg);         /* Reasonable CTA spacing */
        --hero-image-margin: var(--element-gap-lg);       /* Reasonable image spacing */

        /* Grid Layouts - Mobile */
        --grid-columns-cards: 1fr;
        --grid-columns-stats: 1fr;
        /* Grid gaps inherit fluid clamp() from :root */

        /* Card Sizing - Mobile */
        --card-padding: var(--space-20);
        --card-min-height: auto;
        --card-heading-min-height: auto;

        /* CTA Sizing - Mobile (full width) */
        --cta-width: 100%;
        --cta-padding-x: var(--space-24);
        --cta-padding-y: var(--space-16);

        /* Container - Mobile */
        --container-padding: var(--space-16);

        /* Touch Targets - Mobile (rem for accessibility) */
        --touch-target-min: 3rem;  /* 48px */
    }
}

/* ==================== EXTRA SMALL MOBILE VARIABLES (480px) ==================== */
@media (max-width: 480px) {
    :root {
        /* Hero Typography - Extra Small (using rem) */
        --hero-h1-size: 1.75rem;       /* 28px */
        --hero-subtitle-size: 0.8125rem;  /* 13px */
        --hero-description-size: 0.9375rem;  /* 15px */

        /* Component Typography - Extra Small (using rem) */
        --stat-number-size: 1.75rem;   /* 28px */
        --card-heading-size: 1rem;     /* 16px */
    }
}

body {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    font-weight: var(--font-weight-regular);
}

/* Page-level container - Semantic wrapper for main content */
.page-container {
    /* Semantic wrapper only - constraints handled by .container */
}

/* Container - Controls left/right margins for all content (header, footer, sections) */
.container {
    max-width: var(--container-max); /* 1440px max width */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--padding-container); /* 20-75px responsive */
    padding-right: var(--padding-container); /* 20-75px responsive */
}

/* Container for narrow content (700px) - optimal line length */
.container-constrained {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    /* No padding here - parent .container provides edge padding */
    /* Only use padding when standalone (not nested in .container) */
}

/* Standalone container-constrained needs its own padding */
.container-constrained:not(.container .container-constrained) {
    padding-left: var(--padding-container);
    padding-right: var(--padding-container);
}

/* Material Icons Sharp */
.material-symbols-sharp {
    font-variation-settings:
    'FILL' 0,
    'wght' 100,
    'GRAD' 0,
    'opsz' 48;
}

/* ==================== HEADER ==================== */
.header {
    background: var(--color-white);
    border-bottom: var(--border-width-base) solid var(--color-hover-green);
    padding: var(--space-16) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    display: block;
    height: 39px;
    width: auto;
}

.nav-desktop {
    display: flex;
    gap: var(--gap-lg);
    align-items: center;
}

/* Tablet: reduce nav gap and logo size for tablet resolutions (up to Surface Pro 7) */
@media (min-width: 769px) and (max-width: 1400px) {
    .logo img {
        height: 28px;
    }

    .nav-desktop {
        gap: var(--space-12);
    }

    .nav-desktop a {
        font-size: var(--font-sm);
    }

    .nav-desktop .btn,
    .nav-desktop .btn-demo {
        padding: var(--space-12) var(--space-20);
        font-size: var(--font-sm);
    }
}

.nav-desktop a {
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-nav);
    transition: var(--transition-color);
}

.nav-desktop a:hover {
    color: var(--color-primary-green);
}

/* Ensure buttons in nav maintain bold font-weight */
.nav-desktop .btn-demo,
.nav-desktop .btn {
    font-weight: var(--font-weight-bold);
}

/* Navigation Dropdown Styles */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.nav-dropdown-trigger .material-symbols-sharp {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger .material-symbols-sharp {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    min-width: 220px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 0;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-nav);
}

.nav-dropdown-item:hover {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
}

.nav-dropdown-item .material-symbols-sharp {
    font-size: 28px;
    color: var(--color-text-primary);
    flex-shrink: 0;
    font-weight: 400;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    transition: color 0.2s ease;
}

.nav-dropdown-item:hover .material-symbols-sharp {
    color: var(--color-primary-green);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: var(--color-text-primary);
    padding: 8px;
    z-index: 1001;
}

.mobile-menu-toggle .close-icon {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .menu-icon {
    display: none;
}

.mobile-menu-toggle[aria-expanded="true"] .close-icon {
    display: inline;
}

/* ==================== MOBILE NAVIGATION ==================== */
.nav-mobile {
    display: none; /* Hidden on desktop */
    position: fixed;
    top: 73px; /* Header height + border */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-white);
    z-index: 999;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s;
}

.nav-mobile.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.nav-mobile-content {
    padding: var(--space-24) var(--space-16);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-mobile-link {
    display: block;
    padding: var(--space-16) 0;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--color-medium-gray);
    min-height: 48px;
    display: flex;
    align-items: center;
}

.nav-mobile-link:hover,
.nav-mobile-link:active {
    color: var(--color-primary-green);
}

/* Mobile Dropdown */
.nav-mobile-dropdown {
    border-bottom: 1px solid var(--color-medium-gray);
}

.nav-mobile-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-16) 0;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: none;
    border: none;
    cursor: pointer;
    min-height: 48px;
    text-align: left;
    font-family: inherit;
}

.nav-mobile-dropdown-trigger .material-symbols-sharp {
    font-size: 24px;
    transition: transform 0.2s ease;
}

.nav-mobile-dropdown.is-open .nav-mobile-dropdown-trigger .material-symbols-sharp {
    transform: rotate(180deg);
}

.nav-mobile-dropdown-menu {
    display: none;
    padding-bottom: var(--space-16);
}

.nav-mobile-dropdown.is-open .nav-mobile-dropdown-menu {
    display: block;
}

.nav-mobile-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-16);
    font-size: 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    min-height: 48px;
}

.nav-mobile-dropdown-item:hover,
.nav-mobile-dropdown-item:active {
    background-color: var(--color-light-gray);
}

.nav-mobile-dropdown-item .material-symbols-sharp {
    font-size: 24px;
    color: var(--color-text-primary);
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Mobile CTA */
.nav-mobile-cta {
    padding: var(--space-24) 0;
    margin-top: var(--space-8);
}

.nav-mobile-cta .btn-demo {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--space-16) var(--space-24);
}

/* Body scroll lock when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* Show mobile nav only on mobile */
@media (max-width: 768px) {
    .nav-mobile {
        display: block;
    }
}

/* ==================== BUTTONS ==================== */
/* Consolidated Button Component - Filled Variants */
.btn,
.btn-demo,
.hero-book-demo-btn,
.btn-primary {
    display: inline-block;
    background-color: var(--color-primary-green);
    color: var(--color-text-primary) !important;
    padding: var(--space-16) var(--space-40);
    text-decoration: none;
    font-family: inherit;
    font-size: var(--font-button-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-button);
    border: none;
    transition: var(--transition-base);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    box-shadow: 0 var(--space-4) 14px rgba(98, 216, 78, 0.25);
}

.btn:hover,
.btn-demo:hover,
.hero-book-demo-btn:hover,
.btn-primary:hover {
    background-color: var(--color-hover-green);
    color: var(--color-text-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 var(--space-8) var(--space-20) rgba(98, 216, 78, 0.35);
}

/* Button - Primary variant (green) - default */
.btn--primary {
    background-color: var(--color-primary-green);
}

.btn--primary:hover {
    background-color: var(--color-hover-green);
}

/* Button - White variant */
.btn--white,
.btn-white {
    background-color: var(--color-white);
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-button-alt);
}

.btn--white:hover,
.btn-white:hover {
    background-color: var(--color-medium-gray);
    color: var(--color-text-primary) !important;
}

/* Button - CTA White variant (larger padding) */
.btn--cta,
.btn-cta-white {
    background-color: var(--color-white);
    color: var(--color-text-primary) !important;
    padding: var(--space-16) var(--space-32);
    font-size: var(--font-button-lg);
    border-radius: var(--radius-button-lg);
}

.btn--cta:hover,
.btn-cta-white:hover {
    background-color: var(--color-primary-green);
}

/* Consolidated Button Outline Component */
.btn-outline {
    display: inline-block;
    background: transparent;
    padding: 15px 23px;
    text-decoration: none;
    font-family: inherit;
    font-size: var(--font-button);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-button-alt);
    transition: var(--transition-colors);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

/* Button Outline - Green variant (default) */
.btn-outline,
.btn-outline--green {
    border: var(--border-width-thin) solid var(--color-primary-green);
    color: var(--color-primary-green) !important;
}

.btn-outline:hover,
.btn-outline--green:hover {
    background-color: var(--color-primary-green);
    color: var(--color-text-primary) !important;
}

/* Button Outline - Dark variant */
.btn-outline--dark,
.btn-outline-workflow {
    background-color: var(--color-white);
    border: var(--border-width-thin) solid var(--color-dark-gray);
    color: var(--color-text-primary) !important;
    padding: var(--space-16) var(--space-24);
}

.btn-outline--dark:hover,
.btn-outline-workflow:hover {
    background-color: var(--color-text-primary);
    color: var(--color-white) !important;
}

/* Button Outline - White variant */
.btn-outline--white,
.btn-outline-white {
    background: transparent;
    border: var(--border-width-thin) solid var(--color-white);
    color: var(--color-white) !important;
    padding: var(--space-16) var(--space-24);
}

.btn-outline--white:hover,
.btn-outline-white:hover {
    background-color: var(--color-white);
    color: var(--color-text-primary) !important;
}

/* ==================== HERO SECTION ==================== */
.hero {
    padding: var(--hero-padding-top) 0 var(--hero-padding-bottom);
    text-align: var(--hero-text-align);
    background-color: var(--color-white);
}

.hero .container-constrained {
    max-width: 900px; /* Override default 620px for wider hero content */
}

.hero h1 {
    font-size: var(--hero-h1-size);
    font-weight: var(--font-weight-extrabold);
    line-height: var(--hero-h1-line-height);
    margin-bottom: var(--hero-content-gap);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-primary);
    letter-spacing: var(--hero-h1-letter-spacing);
    text-align: var(--hero-text-align);
}

.hero-subtitle {
    font-size: var(--hero-subtitle-size);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    color: var(--color-dark-gray);
    margin-bottom: var(--space-32);
    margin-top: var(--space-0);
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    text-align: var(--hero-text-align);
}

.hero-description {
    font-size: var(--hero-description-size);
    color: var(--color-text-primary);
    max-width: 900px;
    margin: 0 auto var(--space-40);
    line-height: var(--line-height-loose);
    opacity: 0.9;
    text-align: var(--hero-text-align);
}

.hero-cta {
    margin-bottom: var(--hero-cta-margin);
    text-align: var(--hero-text-align);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: var(--hero-cta-align);
    gap: var(--space-20);
}

/* Hero CTA responsive width */
.hero-cta .btn,
.hero-cta .btn-demo,
.hero-cta .btn-primary {
    width: var(--cta-width);
    padding: var(--cta-padding-y) var(--cta-padding-x);
}

/* Hero Trust Micro-Signals (Research-backed: 42% higher conversion near CTA) */
.hero-trust-micros {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-16);
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: #666;
    opacity: 0.85;
    margin-top: var(--space-24);
}

.trust-micro-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}

.trust-micro-item img {
    opacity: 1;
}

.hero-trust-micros .trust-separator {
    color: #ccc;
    font-weight: var(--font-weight-light);
    opacity: 0.6;
}

@media (max-width: 640px) {
    .hero-trust-micros {
        flex-direction: column;
        gap: var(--space-8);
        font-size: 14px; /* Minimum readable size per mobile best practices */
    }

    .hero-trust-micros .trust-separator {
        display: none;
    }
}

/* Mobile hero alignment - left align all content */
@media (max-width: 768px) {
    /* Container keeps its padding (page edge margins) */
    .hero .container {
        /* Padding preserved from --padding-container */
    }

    /* Container-constrained removes its own padding when nested (parent already has it) */
    .hero .container-constrained {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .hero h1 {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-subtitle {
        margin-left: 0;
        margin-right: 0;
    }

    .hero-description {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    .hero-trust-micros {
        align-items: flex-start;
    }

    .trust-micro-item {
        justify-content: flex-start;
    }
}

.hero-image-wrapper {
    margin-top: var(--hero-image-margin);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    background: transparent;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
}

/* Browser Mockup Styles - Realistic macOS Chrome/Safari style */
.hero-image-wrapper.browser-mockup {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0;
    overflow: hidden;
}

.browser-chrome {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #d1d5db;
    gap: 8px;
}

.browser-dots {
    display: flex;
    gap: 6px;
    padding-left: 4px;
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.browser-dot:first-child {
    background: #ff5f56;
}

.browser-dot:nth-child(2) {
    background: #ffbd2e;
}

.browser-dot:nth-child(3) {
    background: #27c93f;
}

.browser-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.browser-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: default;
}

.browser-nav-btn svg {
    opacity: 1;
}

.browser-address-bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 12px;
    height: 24px;
    max-width: 50%;
    margin: 0 auto;
}

.browser-url {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 12px;
    color: #6b7280;
}

.browser-content {
    background: #ffffff;
    line-height: 0; /* Remove extra space below image */
}

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Responsive browser mockup */
@media (max-width: 768px) {
    .browser-chrome {
        height: 32px;
        padding: 0 10px;
    }

    .browser-dot {
        width: 8px;
        height: 8px;
    }

    .browser-dots {
        gap: 5px;
    }

    .browser-address-bar {
        height: 20px;
        padding: 3px 10px;
    }

    .browser-url {
        font-size: 10px;
    }
}

/* ==================== TRUST BAR ==================== */
.trust-bar {
    padding: var(--space-60) 0;
    background-color: var(--color-white);
}

.trust-bar-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);  /* 40-80px fluid */
    flex-wrap: wrap;
    padding: var(--space-40) var(--space-60);
    background-color: var(--color-light-gray);
    border-radius: 0; /* Sharp corners to match theme */
    border-left: 1px solid #d0d0d0; /* Subtle gray - professional, doesn't compete with CTAs */
    margin: 0 auto;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.trust-icon {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    flex-shrink: 0;
}

.trust-text {
    font-size: var(--font-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-dark-gray);
}

.trust-separator {
    color: var(--color-medium-gray);
    font-weight: var(--font-weight-light);
    font-size: var(--font-lg);
    opacity: 0.5;
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .trust-bar-box {
        flex-direction: column;
        gap: var(--space-20);
        padding: var(--space-32) var(--space-24);
    }

    .trust-separator {
        display: none;
    }
}

/* ==================== BENEFITS SECTION ==================== */
.benefits {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.benefits h2 {
    text-align: left;
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr;  /* Mobile: 1 column */
    gap: var(--grid-gap-stats);
}

/* Tablet: 2 columns for benefits */
@media (min-width: 600px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop: 3 columns for benefits */
@media (min-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.benefit-card {
    text-align: left;
    padding: var(--spacing-25);
}

.benefit-card h3 {
    font-size: var(--stat-number-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 0;
    line-height: 1;
}

.benefit-card h4 {
    font-size: var(--stat-label-size);
    font-weight: var(--font-weight-medium);
    margin: var(--space-12) 0;
    color: var(--color-text-primary);
}

.benefit-card p {
    font-size: var(--font-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* ==================== TRUST & SECURITY COMBINED SECTION ==================== */
.trust-and-security-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

/* Remove gap when trust section is followed by CTA */
.trust-and-security-section + .cta-section {
    padding-top: 0;
}

.trust-and-security-section:has(+ .cta-section) {
    padding-bottom: 0;
}

.trust-and-security-section:has(+ .cta-section) .trust-and-security-box {
    padding-bottom: var(--space-20);
}

.trust-and-security-section + .cta-section .cta-box {
    padding-top: var(--space-20);
}

.trust-and-security-section h2 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    text-align: left;
    color: var(--color-text-primary);
}

.trust-and-security-section .subtitle {
    font-size: var(--section-subtitle-size);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-30);
    text-align: left;
    color: var(--color-text-secondary);
    max-width: var(--content-max);
}

.trust-and-security-box {
    padding: var(--card-padding);
    background-color: var(--color-light-green);
    color: var(--color-text-primary);
}

/* Part 1: Why Trust Coco */
.trust-section-part {
    margin-bottom: var(--space-64); /* 8×8 grid - separate the two parts within blue zone */
}

.trust-section-part:last-child {
    margin-bottom: 0; /* Remove bottom margin from last part to prevent excessive spacing */
}

.cta--left-aligned {
    text-align: left;
}

.cta--left-aligned .container {
    text-align: left;
}

.cta--left-aligned h2 {
    text-align: left !important;
}

.cta--left-aligned p {
    text-align: left !important;
}

.cta--left-aligned .cta-description {
    text-align: left !important;
}

.cta-trust-signal--left {
    text-align: left !important;
}

.trust-section-part h2,
.security-section-part h2 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-16);
    text-align: left;
    color: var(--color-text-primary);
}

.trust-section-part .subtitle,
.security-section-part .subtitle {
    font-size: var(--section-subtitle-size);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-30);
    text-align: left;
    color: var(--color-text-secondary);
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

/* Grid for trust features */
.why-choose-grid {
    display: grid;
    grid-template-columns: var(--grid-columns-cards);
    gap: var(--grid-gap-cards);
}

/* Grid for security features */
.security-trust-grid {
    display: grid;
    grid-template-columns: var(--grid-columns-cards);
    gap: var(--grid-gap-cards);
}

.why-choose-card {
    border: 2px solid var(--color-white);
    padding: var(--spacing-25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.why-choose-card h3 {
    font-size: var(--font-feature-heading); /* Feature headings: 18-29px */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-primary-green);
    margin-bottom: var(--space-16);
}

.why-choose-card p {
    color: var(--color-white);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-24);
}

.why-choose-card .icon {
    width: 96px;
    height: 96px;
    align-self: flex-end;
}

/* ==================== FEATURE VIDEO SECTIONS ==================== */
.feature-video-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.feature-video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--section-gap);
    align-items: start;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--padding-container); /* Match .container padding */
}

.feature-video-text {
    max-width: 820px;
}

.feature-video-text h3 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
}

.feature-video-text p {
    font-size: var(--section-subtitle-size);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-24);
    color: var(--color-text-primary);
}

.feature-video-benefits {
    margin: var(--space-24) 0;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-bottom: var(--space-12);
}

.checkmark-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.benefit-item p {
    font-size: var(--font-feature-desc); /* Feature descriptions: 14-19px */
    margin: 0;
    line-height: var(--line-height-loose);
}

.feature-video-cta {
    margin-top: var(--space-24);
}

/* Feature video CTA responsive width */
.feature-video-cta .btn,
.feature-video-cta .btn-demo {
    width: var(--cta-width);
}

.feature-video-container {
    background: transparent;
    border-radius: 0; /* Sharp corners */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Subtle shadow - modern, professional depth like Stripe/Asana */
    padding: 0;
}

.feature-video-container.browser-mockup {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
}

.feature-video-container video,
.feature-video-container .browser-content video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* Sharp corners */
}

/* Mobile responsive */
@media (max-width: 768px) {
    .feature-video-grid {
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    .feature-video-container {
        padding: var(--space-20);
    }
}

/* ==================== FEATURES SECTION ==================== */
.features {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.features h2 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    text-align: left;
}

.features .subtitle {
    font-size: var(--font-xl);
    margin-bottom: var(--spacing-50);
    text-align: left;
}

.feature-item {
    margin-bottom: var(--spacing-75);
}

.feature-item h3 {
    font-size: var(--font-feature-heading); /* Feature headings: 18-29px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-16);
    text-align: left;
}

.feature-item p {
    margin-bottom: var(--space-24);
    line-height: var(--line-height-normal);
}

.feature-list {
    list-style: none;
    margin-bottom: var(--space-24);
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-bottom: var(--space-12);
}

.feature-list li img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.video-container {
    background-color: var(--color-light-gray);
    border-radius: 0; /* Sharp corners */
    padding: var(--spacing-25);
    margin-bottom: var(--spacing-75);
}

.video-container video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* Sharp corners */
}

/* ==================== GET STARTED SECTION ==================== */
.get-started {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.get-started h2 {
    font-size: var(--font-2xl); /* Section headings: 23-38px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: 0;
    text-align: left;
}

.get-started p {
    font-size: var(--font-xl); /* Subtitle: 20-24px (fixed scaling) */
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-24);
    text-align: left;
}

.get-started-cta {
    text-align: left;
}

.container-constrained {
    max-width: 620px;
    margin: 0 auto;
}

/* ==================== WORKFLOW SECTION ==================== */
.workflow-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.workflow-box {
    background-color: var(--color-primary-green); /* Primary brand green #62d84e */
    padding: var(--spacing-50);
    color: var(--color-white); /* White text for WCAG AA compliance on bright green background */
}

.workflow-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
}

.workflow-text h2 {
    font-size: var(--font-2xl); /* Section headings: 23-38px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    text-align: left;
}

.workflow-text p {
    font-size: var(--font-base); /* Body text: 14-16px */
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-24);
    text-align: left;
}

.workflow-cta {
    text-align: left;
}

.btn-outline-workflow {
    display: inline-block;
    background-color: var(--color-white);
    border: 1px solid var(--color-dark-gray);
    color: var(--color-text-primary) !important;
    padding: var(--space-16) 24px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-button-alt);
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.btn-outline-workflow:hover {
    background-color: var(--color-text-primary);
    color: var(--color-white) !important;
}

.workflow-image {
    min-height: var(--min-height-hero);
    background-color: #f8b4b4; /* Pink/salmon background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .workflow-content {
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    .workflow-image {
        min-height: var(--min-height-image);
    }
}

/* ==================== TESTIMONIALS SECTION ==================== */
.testimonials {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.testimonials-box {
    padding: 0;
    background-color: transparent;
}

.testimonials h2,
.testimonials-box h2 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    text-align: left;
    color: var(--color-text-primary);
}

.testimonials-subtitle {
    font-size: var(--section-subtitle-size);
    color: var(--color-text-secondary);
    text-align: left;
    margin-bottom: var(--spacing-30);
    font-style: normal;
}

.testimonials-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: var(--grid-columns-stats);
    gap: var(--section-gap);
}

.testimonials-list-item {
    padding: 0; /* No padding - aligns with left text */
    background-color: transparent; /* No background - no highlighting */
}

.testimonials-list-item blockquote {
    font-size: var(--font-base); /* Body text: 14-16px - matches other paragraphs */
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-12) 0; /* Space before citation */
    padding: 0;
    border: none;
    font-style: normal;
}

.testimonials-list-item cite {
    display: block;
    font-size: 14px;
    color: var(--color-text-secondary);
    font-style: normal;
    line-height: 1.4;
}

.testimonial-card cite strong {
    font-weight: var(--font-weight-semibold);
    font-style: normal;
}

/* ==================== CTA SECTION ==================== */
.cta {
    padding: var(--section-padding-y) 0; /* Standard section padding */
    background-color: var(--color-white); /* White background */
}

.cta-content {
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
    margin: 0 auto;
    text-align: center;
}

.cta h2 {
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    text-align: center;
    color: var(--color-text-primary);
}

.cta p {
    font-size: var(--font-feature-desc); /* Feature descriptions: 14-19px */
    margin-bottom: var(--space-40);
    text-align: center;
    color: var(--color-text-secondary);
}

.cta-buttons {
    display: flex;
    gap: var(--space-16);
    justify-content: flex-start; /* Left-align buttons */
    align-items: center;
    flex-wrap: wrap;
}

/* ==================== WHO'S USING SECTION ==================== */
.whos-using {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.whos-using h2 {
    font-size: var(--font-2xl); /* Section headings: 23-38px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    text-align: left; /* LEFT aligned */
}

.whos-using .subtitle {
    font-size: var(--font-feature-desc); /* Feature descriptions: 14-19px */
    margin-bottom: var(--spacing-50);
    text-align: left; /* LEFT aligned */
}

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

.whos-using-card {
    display: flex;
    flex-direction: column;
}

.whos-using-card .icon-box {
    width: 76px;
    height: 76px;
    background-color: var(--color-hover-green); /* Light green - matching staging */
    border: 1px solid #9fe793;
    padding: 4px;
    margin-bottom: var(--space-16);
    display: flex;
    align-items: center;
    justify-content: center;
}

.whos-using-card .icon-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.whos-using-card h3 {
    font-size: var(--font-md); /* Card headings: 16-18px */
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-8);
    text-align: left;
}

.whos-using-card p {
    line-height: var(--line-height-normal);
}

/* ==================== FOOTER ==================== */
/* ==================== FOOTER CTA (INTEGRATED) ==================== */
.footer-cta {
    background-color: var(--color-footer-bg);
    padding: var(--section-padding-y) 0 88px; /* 32px top, 88px bottom for footer transition */
}

.footer-cta-content {
    text-align: left; /* Left-aligned per best practices */
}

.footer-cta-content h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-heading-after);
}

.footer-cta-content p {
    font-size: var(--font-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-30);
}

.footer-cta .cta-buttons {
    display: flex;
    gap: var(--gap-md);
    justify-content: flex-start; /* Left-aligned buttons */
    flex-wrap: wrap;
}

/* Dark outline button for footer CTA on gray background */
.footer-cta .btn-outline {
    background: transparent;
    border: var(--border-width-thin) solid var(--color-text-primary);
    color: var(--color-text-primary) !important;
}

.footer-cta .btn-outline:hover {
    background-color: var(--color-text-primary);
    color: var(--color-white) !important;
}

@media (max-width: 768px) {
    .footer-cta-content h2 {
        font-size: var(--font-xl);
    }

    .footer-cta-content p {
        font-size: var(--font-base);
    }

    .footer-cta .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

.footer {
    background-color: var(--color-white); /* White background for top spacing */
    color: var(--color-text-primary);
    padding-top: var(--padding-section-md); /* Match inter-section gap (32px) */
    padding-bottom: 0;
}

.footer-wrapper {
    background-color: var(--color-footer-bg); /* Gray background stretches full width */
    padding: 0 0 var(--space-24); /* No top padding - handled by footer-cta */
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-80);
    margin-bottom: var(--space-40);
}

.footer-brand {
    max-width: 520px;
}

.footer-logo-tagline {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    margin-bottom: var(--space-20);
}

.footer-logo {
    height: 25px;
    width: auto;
    mix-blend-mode: multiply; /* Makes white background transparent/blend with footer */
}

.footer-separator {
    color: var(--color-text-primary);
    font-size: 20px;
    opacity: 0.4; /* Increased for better visibility on gray background */
}

.footer-tagline {
    font-size: 15px; /* Slightly smaller for better hierarchy */
    font-weight: var(--font-weight-semibold); /* More emphasis on brand tagline */
    color: var(--color-text-primary);
    line-height: 1.5;
}

.footer-description {
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
    margin-top: var(--space-16); /* Spacing from tagline */
}

.footer-security {
    font-size: 14px; /* Increased for better readability */
    line-height: 1.5; /* Optimal line height (1.125-1.200 × font size) */
    color: var(--color-text-primary); /* Darker for better contrast */
    margin-bottom: var(--space-12);
    opacity: 0.85; /* Slightly muted while maintaining readability */
}

.footer-contact {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: var(--space-16);
}

.footer-contact a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: var(--gap-xs);
}

.social-icon {
    color: var(--color-text-primary);
    opacity: 0.6;
    transition: opacity var(--duration-base);
}

.social-icon:hover {
    opacity: 1;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--space-48);  /* 3rem = 48px */
}

.footer-column h4 {
    font-size: var(--font-md);  /* 16-18px fluid */
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-16);
    color: var(--color-text-primary);
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: var(--space-12);
}

.footer-column ul li a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 15px; /* Increased for better readability (best practice: 14-16px) */
    line-height: 1.5;
    transition: var(--transition-color);
}

.footer-column ul li a:hover {
    text-decoration: underline; /* Visual feedback on hover - no color change needed */
}

.footer-divider {
    height: 1px;
    background-color: var(--color-text-primary); /* Darker for visibility */
    opacity: 0.3; /* Increased for better visibility - consistent with visual hierarchy */
    margin: var(--space-40) 0 48px; /* Doubled bottom margin from 24px to 48px */
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.footer-legal-links {
    display: flex;
    gap: var(--gap-md);
}

.footer-legal-links a {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    transition: var(--transition-color);
}

.footer-legal-links a:hover {
    text-decoration: underline;
}

.footer-copyright {
    font-size: 13px; /* Increased from 12px for better readability */
    line-height: 1.5;
    color: var(--color-text-primary);
    opacity: 0.75; /* Slightly muted for hierarchy */
}

/* Mobile responsive */
@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .footer-links {
        grid-template-columns: 1fr;
        gap: var(--space-30);
    }

    .footer-legal-links {
        flex-direction: column;
        gap: var(--gap-xs);
    }
}

/* ==================== SHARED HERO GRID LAYOUT ==================== */

/* General Hero 2-Column Grid Layout (used by features and about pages) */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-50);
    max-width: var(--container-max);
    margin: 0 auto;
    align-items: start;
}

.hero-grid-heading {
    grid-column: 1;
}

.hero-grid-heading h1 {
    font-size: var(--font-2xl); /* Section headings: 23-38px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin: 0;
    color: var(--color-text-primary);
    text-align: left;
}

.hero-grid-description {
    grid-column: 2;
    border-top: 2px dashed var(--color-border-gray);
    padding-top: var(--spacing-25);
}

.hero-grid-description p {
    font-size: var(--font-xl); /* Subtitle: 20-24px (fixed scaling) */
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    margin: 0;
    text-align: left;
}

.hero-spacer {
    height: var(--spacing-25);
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-25);
    }

    .hero-grid-heading,
    .hero-grid-description {
        grid-column: 1;
    }
}

/* ==================== FEATURES PAGE ==================== */

/* Features Hero Section */
.features-hero {
    padding: var(--space-64) 0 var(--space-32);
}

/*
   BACKUP: Centered Single-Column Layout (restore if needed)
   =====================================================
   .features-hero-grid {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       max-width: 800px;
       margin: 0 auto;
       gap: var(--space-16);
   }
   .features-hero-heading { width: 100%; }
   .features-hero-heading h1 {
       font-size: clamp(1.75rem, 1.5rem + 2vw, 2.5rem);
       text-align: center;
   }
   .features-hero-description {
       width: 100%;
       max-width: 650px;
   }
   .features-hero-description p { text-align: center; }
   .features-hero-cta { text-align: center; margin-top: var(--space-8); }
   =====================================================
*/

/* Left-Aligned 2-Column Layout (Consistent with page content) */
.features-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-50);
    max-width: var(--container-max);
    margin: 0 auto;
    align-items: start;
}

.features-hero-heading {
    grid-column: 1;
}

.features-hero-heading h1 {
    font-size: clamp(1.75rem, 1.5rem + 2vw, 2.5rem); /* 28px mobile - 40px desktop */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin: 0;
    color: var(--color-text-primary);
    text-align: start;
}

.features-hero-description {
    grid-column: 2;
    border-top: 2px dashed var(--color-border-gray);
    padding-top: var(--spacing-25);
}

.features-hero-description p {
    font-size: var(--font-md); /* 16-18px */
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin: 0;
    text-align: left;
}

.features-hero-cta {
    text-align: left;
    margin-top: var(--space-8);
}

.features-hero-cta .hero-book-demo-btn,
.features-hero-cta .btn-primary,
.features-hero-cta .btn-demo {
    width: var(--cta-width);
    padding: var(--cta-padding-y) var(--cta-padding-x);
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .features-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-25);
    }

    .features-hero-heading,
    .features-hero-description {
        grid-column: 1;
    }
}

/* Feature Cards Section */
.feature-cards-section {
    background-color: var(--color-white);
}

.feature-cards {
    padding: var(--spacing-50);
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.feature-cards h2 {
    font-size: clamp(23px, 1.4375rem + ((1vw - 3.2px) * 1.339), 38px);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-50);
    color: var(--color-white);
    text-align: left;
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-25);
    margin-bottom: var(--spacing-50);
}

.feature-card {
    border: 2px solid var(--color-white);
    padding: var(--spacing-25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-card-content h3 {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.982), 29px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-primary-green);
    margin-bottom: var(--space-16);
}

.feature-card-content p {
    color: var(--color-white);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-24);
}

.feature-card-icon {
    align-self: flex-end;
}

.feature-card-icon img {
    width: 96px;
    height: 96px;
    object-fit: contain; /* Maintain aspect ratio */
}

.feature-cards-cta {
    text-align: left;
}

/* Testimonial Section */
.testimonial {
    padding: var(--spacing-50) 0;
    background-color: var(--color-white);
}

.testimonial-content {
    border: 2px solid var(--color-border-gray);
    padding: var(--spacing-50) var(--spacing-50);
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--gap-xl);
    align-items: center;
}

.testimonial-text {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.982), 29px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
}

.testimonial-author {
    margin-bottom: var(--space-24);
}

.testimonial-author p {
    font-size: 16px;
    line-height: 1.4;
}

.testimonial-author strong {
    font-weight: var(--font-weight-semibold);
}

.testimonial-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Features Showcase Section */
.features-showcase {
    padding: var(--spacing-50) 0;
    background-color: var(--color-bg-light); /* Light gray for alternation */
}

.features-showcase h2 {
    font-size: clamp(23px, 1.4375rem + ((1vw - 3.2px) * 1.339), 38px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    text-align: left;
}

.features-showcase-cta-top {
    margin-bottom: var(--spacing-75);
    text-align: left;
}

.showcase-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: var(--spacing-75);
}

.showcase-text h3 {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.982), 29px); /* has-large-font-size */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-12);
}

.showcase-subtitle {
    font-style: italic;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--space-16);
    color: var(--color-text-primary);
}

.showcase-description {
    line-height: var(--line-height-normal);
    margin-top: var(--spacing-25);
}

.showcase-image {
    min-height: 26em;
}

.showcase-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Support Section */
.support {
    padding: var(--spacing-50) 0;
    background-color: var(--color-white); /* White for alternation */
}

.support h2 {
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    text-align: left;
    color: var(--color-text-primary);
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for first row */
    gap: var(--spacing-25);
    margin-top: var(--spacing-50); /* Add top spacing after shorter h2 margin */
    margin-bottom: var(--spacing-50);
}

/* 4th card spans only 1 column, creating 3+1 layout */
.support-card:nth-child(4) {
    grid-column: 1;
}

/* Mobile: Stack all cards */
@media (max-width: 768px) {
    .support-grid {
        grid-template-columns: 1fr;
    }

    .support-card:nth-child(4) {
        grid-column: 1;
    }
}

.support-card {
    background-color: var(--color-white);
    border: 1px solid #d0d0d0; /* Subtle gray - professional, doesn't compete with CTAs */
    padding: var(--spacing-25);
}

.support-card h3 {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.982), 29px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    min-height: 6rem;
    margin-bottom: var(--space-16);
    padding-top: var(--spacing-20);
    padding-left: var(--spacing-20);
}

.support-card p {
    line-height: var(--line-height-normal);
}

.support-cta {
    text-align: left;
}

/* Features CTA Section */
.features-cta {
    padding: var(--spacing-75) 0;
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.features-cta h2 {
    font-size: clamp(40px, 2.5rem + ((1vw - 3.2px) * 1.786), 56px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    color: var(--color-white);
    text-align: left;
}

.features-cta p {
    font-size: clamp(24px, 1.5rem + ((1vw - 3.2px) * -0.357), 20px);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-40);
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.btn-cta-white {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-text-primary) !important;
    padding: var(--space-16) 32px;
    text-decoration: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-button-lg);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.btn-cta-white:hover {
    background-color: var(--color-primary-green);
}

/* ==================== ABOUT PAGE ==================== */

/* About Hero Section (legacy - about page now uses features-hero) */
.about-hero {
    padding: var(--space-64) 0 var(--space-32);
    background-color: var(--color-white);
}

/* About Hero uses same grid layout but with different h1 font size */
.about-hero .hero-grid-heading h1 {
    font-size: clamp(40px, 2.5rem + ((1vw - 3.2px) * 3.571), 80px); /* xx-large */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}

/* Backward compatibility */
.about-hero h1 {
    font-size: clamp(40px, 2.5rem + ((1vw - 3.2px) * 3.571), 80px); /* xx-large */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-24);
    color: var(--color-text-primary);
    text-align: left;
}

/* When about-hero uses features-hero-heading, match features styling */
.about-hero .features-hero-heading h1 {
    font-size: clamp(2rem, 1rem + 6vw, 4.625rem); /* 32px mobile - 74px desktop */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 0;
    color: var(--color-text-primary);
    text-align: start;
}

/* About Stats Section */
.about-stats {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.about-stats-header {
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

.about-stats h2 {
    text-align: left;
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
}

.about-stat-card {
    background-color: var(--color-light-green); /* Light green background like WordPress */
    padding: var(--spacing-25);
}

.about-stat-card h2 {
    font-size: clamp(48px, 3rem + ((1vw - 3.2px) * 2.143), 72px); /* xx-large */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: var(--space-8);
}

.about-stat-card h3 {
    font-size: clamp(24px, 1.5rem + ((1vw - 3.2px) * -0.357), 20px); /* has-medium-font-size */
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
}

.about-stat-card p {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* About Mission Section */
.about-mission {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.about-mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: start;
}

.about-mission-label {
    font-size: 14px;
    font-style: italic;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-16);
    text-align: left;
}

.about-mission-content h2 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    text-align: left;
    color: var(--color-text-primary);
}

.about-mission-content .subtitle {
    font-size: var(--section-subtitle-size);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-30);
    text-align: left;
    color: var(--color-text-secondary);
    max-width: var(--content-max);
}

.about-mission-content p {
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-16);
    text-align: left;
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

.about-mission-content .ui-features-list li {
    font-size: var(--font-base);
}

.about-mission-list {
    list-style: none;
    margin-bottom: var(--space-24);
    padding-left: 0;
}

.about-mission-list li {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.446), 19px);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-8);
    padding-left: 24px;
    position: relative;
}

.about-mission-list li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--color-text-primary);
}

.about-goals {
    margin-top: var(--space-24);
}

.about-goal-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-bottom: var(--space-16);
}

.about-goal-item img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.about-goal-item p {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.446), 19px);
    line-height: var(--line-height-normal);
    margin: 0;
}

.about-mission-image {
    min-height: 540px;
    background-size: cover;
    background-position: 88% 18%;
    border-radius: 0; /* Sharp corners */
    overflow: hidden;
}

.about-mission-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Sharp corners */
}

/* Border for Founded by section image */
#about-founder .about-mission-image img {
    border: 2px solid #000000;
}

/* Mobile responsive styles for about-mission section */
@media (max-width: 768px) {
    .about-mission-grid {
        grid-template-columns: 1fr;
        gap: var(--space-24);
    }

    .about-mission-content h2 {
        margin-bottom: var(--space-8);
    }

    .about-mission-content .subtitle {
        margin-bottom: var(--space-24);
    }

    .about-mission-content p {
        margin-bottom: var(--space-16);
    }

    .about-mission-image {
        min-height: 280px;
        order: -1; /* Image first on mobile */
    }
}

/* About Features Overview Section */
.about-features-overview {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.about-features-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.about-features-text h2 {
    font-size: clamp(23px, 1.4375rem + ((1vw - 3.2px) * 1.339), 38px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    text-align: left;
}

.about-features-text p {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.446), 19px);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-16);
    text-align: left;
}

.about-features-cta {
    margin-top: var(--space-32);
}

.about-features-cards {
    background-color: var(--color-light-green); /* Light green background like WordPress */
    padding: var(--spacing-25);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.about-feature-mini-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border-gray);
    padding: var(--spacing-25);
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.about-feature-mini-card img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.about-feature-mini-card h3 {
    font-size: clamp(24px, 1.5rem + ((1vw - 3.2px) * -0.357), 20px); /* has-medium-font-size */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-8);
}

.about-feature-mini-card p {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    margin: 0;
}

/* About Competitive Advantage Section */
.about-competitive {
    padding: var(--spacing-50) 0;
    background-color: var(--color-white);
}

.about-competitive h2 {
    font-size: clamp(23px, 1.4375rem + ((1vw - 3.2px) * 1.339), 38px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    text-align: left;
}

/* About Why Choose Coco Section */
.about-why-choose-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.about-why-choose {
    padding: var(--spacing-50);
    background-color: var(--color-dark-blue);
    color: var(--color-white);
}

.about-why-header {
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

.about-why-choose h2 {
    font-size: clamp(23px, 1.4375rem + ((1vw - 3.2px) * 1.339), 38px); /* has-large-font-size */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    text-align: left;
    color: var(--color-white);
}

.about-why-choose .subtitle {
    font-size: var(--font-feature-desc); /* Feature descriptions: 14-19px */
    font-style: italic;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-50);
    text-align: left;
    color: var(--color-white);
}

.about-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-25);
    margin-bottom: var(--spacing-50);
}

.about-inline-cta {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.about-vision {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.about-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: start;
}

.about-vision-content {
    /* Grid column provides natural constraint */
}

.about-vision h2 {
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    text-align: left;
    color: var(--color-text-primary);
}

.about-vision .subtitle {
    font-size: var(--section-subtitle-size);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-30);
    text-align: left;
    color: var(--color-text-secondary);
    max-width: var(--content-max);
}

.about-vision p {
    font-size: var(--font-base);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-16);
    text-align: left;
    max-width: var(--content-max);
}

.about-vision-cta {
    margin-top: var(--space-32);
    text-align: left;
}

.about-vision-image {
    min-height: 400px;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
}

.about-vision-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Mobile responsive styles for about-vision section */
@media (max-width: 768px) {
    .about-vision-grid {
        grid-template-columns: 1fr;
        gap: var(--space-24);
    }

    .about-vision h2 {
        margin-bottom: var(--space-8);
    }

    .about-vision .subtitle {
        margin-bottom: var(--space-24);
    }

    .about-vision p {
        margin-bottom: var(--space-16);
    }

    .about-vision-cta {
        margin-top: var(--space-24);
    }

    .about-vision-image {
        min-height: 280px;
        order: -1; /* Image first on mobile */
    }
}

.about-why-card {
    border: 2px solid var(--color-white);
    padding: var(--spacing-25);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--min-height-image);
}

.about-why-content h3 {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.982), 29px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    color: var(--color-primary-green);
    margin-bottom: var(--space-16);
}

.about-why-content p {
    color: var(--color-white);
    line-height: var(--line-height-normal);
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
}

.about-why-icon {
    align-self: flex-end;
    margin-top: var(--space-24);
}

.about-why-icon img {
    width: 96px;
    height: 96px;
}

.about-why-cta {
    text-align: left;
}

.btn-outline-white {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--color-white);
    color: var(--color-white) !important;
    padding: var(--space-16) 24px;
    text-decoration: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    border-radius: var(--radius-button-alt);
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.btn-outline-white:hover {
    background-color: var(--color-white);
    color: var(--color-text-primary) !important;
}

/* About Partner Section */
.about-partner {
    padding: var(--spacing-30);
    margin-top: var(--spacing-30);
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
    background-color: var(--color-hover-green);
}

.about-partner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-partner-label {
    font-size: clamp(24px, 1.5rem + ((1vw - 3.2px) * -0.357), 20px); /* has-medium-font-size */
    font-style: italic;
    margin-bottom: var(--space-16);
    text-align: left;
}

.about-partner-content h2 {
    font-size: clamp(23px, 1.4375rem + ((1vw - 3.2px) * 1.339), 38px); /* has-large-font-size */
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    text-align: left;
}

.about-partner-content p {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.446), 19px);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-32);
    text-align: left;
}

.about-partner-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
    margin-bottom: var(--space-32);
}

.partner-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
    padding: var(--space-20);
    background-color: #ffffff;
    border-radius: 0;
}

.partner-benefit-icon {
    font-size: 32px;
    color: var(--color-primary);
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.partner-benefit-item p {
    margin: 0;
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-medium);
}

.about-partner-cta {
    text-align: left;
}

.about-partner-image {
    min-height: var(--min-height-hero);
    background-size: cover;
    background-position: 59% 47%;
    border-radius: 0; /* Sharp corners */
    overflow: hidden;
}

.about-partner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Sharp corners */
}

/* ==================== PERSONA FEATURES SECTION ==================== */
.persona-features {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.persona-features h2 {
    text-align: left;
    font-size: var(--section-heading-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
}

.persona-features .subtitle {
    text-align: left;
    font-size: var(--section-subtitle-size);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-30);
    max-width: var(--content-max);
}

.persona-section {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: var(--spacing-50);
    margin-bottom: var(--spacing-50);
}

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

.persona-header {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    margin-bottom: var(--space-24);
}

.persona-header img {
    width: 48px;
    height: 48px;
}

.persona-header h3 {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    margin: 0;
    color: var(--color-text-primary);
}

.persona-intro {
    font-size: 18px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-25);
    line-height: var(--line-height-relaxed);
}

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

.persona-feature-item h4 {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.persona-feature-item p {
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ==================== COMPARISON NAVIGATION ==================== */
.comparison-nav-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.comparison-nav-heading {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    text-align: left;
    color: var(--color-text-primary);
}

.comparison-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.comparison-nav-link {
    display: inline-block;
    padding: var(--space-12) var(--space-20);
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: var(--radius-button);
    text-decoration: none;
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: var(--transition-base);
}

.comparison-nav-link:hover {
    background-color: var(--color-primary-green);
    border-color: var(--color-black);
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .comparison-nav-links {
        flex-direction: column;
        width: 100%;
    }

    .comparison-nav-link {
        text-align: center;
    }
}

/* ==================== COMPARISON SECTION ==================== */
.comparison-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white); /* White section - box will have dark blue */
}

.comparison-section h2 {
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-top: 0; /* Remove any default top margin */
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    text-align: left;
    color: var(--color-text-primary);
}

.comparison-box {
    padding: var(--spacing-50);
    background-color: var(--color-light-green); /* Lighter green - competitive positioning & growth */
    color: var(--color-text-primary);
}

.comparison-header {
    text-align: left;
    margin-bottom: var(--spacing-30);
}

.comparison-header h2 {
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    text-align: left;
    color: var(--color-text-primary); /* Dark text on green background for better contrast */
}

.comparison-header .subtitle {
    font-size: var(--font-feature-desc); /* Feature descriptions: 14-19px */
    font-style: normal;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-30);
    text-align: left;
    color: var(--color-text-secondary); /* Consistent with homepage subtitles */
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing-50);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.95);
    table-layout: fixed;
}

.comparison-table caption.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.comparison-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f5f5f5;
    border-bottom: 2px solid #e0e0e0;
}

.comparison-table thead tr {
    border-bottom: none;
}

.comparison-row {
    border-bottom: 1px solid #e0e0e0;
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

/* Hover state for table rows */
.comparison-table tbody tr:hover {
    background-color: rgba(98, 216, 78, 0.05);
    transition: background-color 0.2s ease;
}

.comparison-header-row {
    background-color: #f5f5f5;
    border-bottom: 2px solid #e0e0e0;
}

/* Column widths */
.comparison-table th:first-child,
.comparison-table td:first-child {
    width: 20%;
}

.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
    width: 40%;
}

.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) {
    width: 40%;
}

.comparison-cell {
    padding: var(--space-20);
    text-align: left;
    vertical-align: top;
    border-right: 1px solid #e0e0e0;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.comparison-cell:last-child {
    border-right: none;
}

.comparison-feature-cell {
    font-weight: var(--font-weight-semibold);
    background-color: #f9f9f9;
    color: var(--color-text-primary);
}

.comparison-chatgpt-cell {
    color: var(--color-text-secondary); /* Grey text for competitor column */
}

.comparison-coco-cell {
    background-color: rgba(98, 216, 78, 0.12); /* Subtle green tint for Coco column */
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.comparison-coco-cell .checkmark {
    color: #16a34a; /* Darker, more vibrant green */
    font-size: 20px;
    font-weight: 700;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
    margin-right: 8px;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

.comparison-chatgpt-cell .not-available {
    color: #9ca3af; /* Light gray for unavailable features */
    font-size: 20px;
    font-weight: 700;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
    vertical-align: middle;
    line-height: 1;
    display: inline-block;
}

.comparison-header-row th {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
    color: var(--color-text-primary);
    vertical-align: middle;
    padding: var(--space-20);
    text-align: left;
}

.comparison-table thead th {
    font-weight: var(--font-weight-bold);
    font-size: 16px;
}

.comparison-cta {
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: var(--space-16);
}

.comparison-cta-text {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary); /* Dark text on green background */
    margin-bottom: var(--space-24);
}

.comparison-cta a {
    text-decoration: none !important;
}

.comparison-cta .btn-primary {
    text-decoration: none !important;
}

/* Ensure no underlines on buttons globally */
.btn-primary,
.btn-outline,
.btn-large,
button,
.comparison-cta a,
.cta-section a,
.final-cta-section a {
    text-decoration: none !important;
}

/* Mobile CTA widths for comparison and FAQ sections */
@media (max-width: 768px) {
    .comparison-cta .btn-outline,
    .comparison-cta .btn-outline--dark,
    .comparison-cta .btn-primary {
        width: 100%;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }

    .faq-cta .btn-outline,
    .faq-cta .btn-outline--dark,
    .faq-cta .btn-primary {
        width: 100%;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }
}

/* Responsive comparison table - Stacked cards layout for mobile */
@media (max-width: 1023px) {
    /* Hide desktop table header */
    .comparison-table thead {
        display: none;
    }

    .comparison-table {
        display: block;
        border: none;
        overflow: visible;
    }

    .comparison-table tbody {
        display: flex;
        flex-direction: column;
        gap: var(--space-20);
    }

    /* Each row becomes a card - matching desktop table border */
    .comparison-table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0;
        overflow: hidden;
        background: var(--color-white);
    }

    /* Reset all cells to full width */
    .comparison-table th,
    .comparison-table td {
        display: block;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border: none;
        border-right: none;
        text-align: left;
        box-sizing: border-box;
    }

    /* Capability header - matching desktop feature cell */
    .comparison-table th.comparison-feature-cell,
    .comparison-table td.comparison-feature-cell {
        order: 1;
        background-color: #f9f9f9 !important;
        color: var(--color-text-primary) !important;
        font-size: var(--font-base);
        font-weight: var(--font-weight-semibold);
        padding: var(--space-16);
        border-bottom: 1px solid #e0e0e0;
    }

    /* Generic AI section - matching desktop chatgpt cell */
    .comparison-table td.comparison-chatgpt-cell {
        order: 2;
        padding: var(--space-16);
        background-color: var(--color-white) !important;
        border-bottom: 1px solid #e0e0e0;
        font-size: var(--font-base);
        line-height: 1.6;
        color: var(--color-text-secondary);
    }

    .comparison-table td.comparison-chatgpt-cell::before {
        content: 'Generic AI';
        display: block;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        margin-bottom: var(--space-8);
        font-size: var(--font-base);
    }

    /* Coco section - matching desktop coco cell with green tint */
    .comparison-table td.comparison-coco-cell {
        order: 3;
        padding: var(--space-16);
        background-color: rgba(98, 216, 78, 0.12) !important;
        font-size: var(--font-base);
        line-height: 1.6;
        color: var(--color-text-primary);
        font-weight: var(--font-weight-medium);
    }

    .comparison-table td.comparison-coco-cell::before {
        content: 'Coco TestAI';
        display: block;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-primary);
        margin-bottom: var(--space-8);
        font-size: var(--font-base);
    }

    /* Keep checkmark icons on mobile */
    .comparison-table td.comparison-coco-cell .checkmark {
        display: inline-block;
    }

    /* Ensure strong text is visible */
    .comparison-table td strong {
        font-weight: var(--font-weight-semibold);
    }

    /* Override desktop last-child border removal - all cards need full border */
    .comparison-table tbody tr:last-child {
        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    }
}

/* ==================== FAQ SECTION ==================== */
/* FAQ Navigation */
.faq-navigation {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.faq-nav-heading {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-24);
    text-align: left;
    color: var(--color-text-primary);
}

.faq-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
}

.faq-nav-link {
    display: inline-block;
    padding: var(--space-12) var(--space-20);
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    border-radius: var(--radius-button);
    text-decoration: none;
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: var(--transition-base);
}

.faq-nav-link:hover {
    background-color: var(--color-primary-green);
    border-color: var(--color-black);
    color: var(--color-text-primary);
}

/* FAQ Top Questions Section */
.faq-section--top {
    background-color: var(--color-light-gray);
}

.faq-section {
    padding: var(--section-padding-y) 0; /* Standard section padding for consistency */
    background-color: var(--color-white);
}

.faq-section h2 {
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-8); /* 8px - tighter spacing before subtitle */
    text-align: left;
    color: var(--color-text-primary);
}

.faq-section .testimonials-subtitle {
    font-size: var(--font-lg); /* 18-23px - larger than questions for proper hierarchy */
    margin-bottom: var(--spacing-30);
}

.faq-section--cta .why-choose-grid {
    margin-top: var(--space-32);
}

.faq-header {
    margin-bottom: var(--space-32);
    text-align: left;
}

.faq-header h2 {
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-16); /* 16px - proper vertical rhythm */
    text-align: left;
    color: var(--color-text-primary);
}

.faq-header .subtitle {
    font-size: var(--font-lg);
    text-align: left;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-32);
}

.faq-section--cta .faq-header .subtitle {
    margin-bottom: 0; /* No extra margin when grid follows */
}

.faq-list {
    margin-bottom: var(--space-40);
}

.faq-item {
    margin-bottom: var(--space-24);
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
    padding-bottom: var(--space-24);
}

.faq-item:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.faq-question {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: 0;
    text-align: left;
    position: relative;
    padding-right: 40px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--color-primary-green);
}

/* Caret icon - Nielsen Norman Group tested best */
.faq-question::after {
    content: '›';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    font-size: 28px;
    font-weight: bold;
    transition: transform 0.3s ease;
    color: var(--color-text-secondary);
}

/* Rotate icon when open */
.faq-item--open .faq-question::after {
    transform: translateY(-50%) rotate(270deg);
}

.faq-item--open .faq-question {
    margin-bottom: var(--space-16);
}

.faq-answer p {
    font-size: var(--font-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: 0;
    text-align: left;
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer ul {
    margin: var(--space-16) 0;
    padding-left: var(--spacing-25);
}

.faq-answer li {
    font-size: var(--font-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
}

.faq-answer a {
    color: var(--color-primary-green);
    text-decoration: underline;
}

.faq-answer a:hover {
    text-decoration: none;
}

/* FAQ Section - Green CTA Container */
.faq-section--green-cta {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.faq-green-box {
    padding: var(--spacing-50);
    background-color: var(--color-light-green);
    color: var(--color-text-primary);
}

.faq-green-box .faq-header {
    text-align: left;
}

.faq-green-box .faq-header h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-16);
    text-align: left;
    color: var(--color-text-primary);
}

.faq-green-box .faq-header .subtitle {
    font-size: var(--font-feature-desc);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-30);
    text-align: left;
    color: var(--color-text-secondary);
}

/* Icon Button - New button type with icon and text */
.btn-icon-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-25);
}

.btn-icon {
    display: flex;
    align-items: center;
    gap: var(--space-20);
    padding: var(--spacing-25);
    background-color: var(--color-white);
    border: 2px solid var(--color-black);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-base);
    text-align: left;
}

.btn-icon:hover {
    border-color: var(--color-black);
    background-color: var(--color-off-white);
    transform: translateY(-2px);
    box-shadow: 0 var(--space-8) var(--space-24) rgba(0, 0, 0, 0.08);
}

.btn-icon__icon {
    flex-shrink: 0;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon__icon .material-symbols-sharp {
    font-size: 48px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    color: var(--color-text-primary);
}

.btn-icon__content {
    flex: 1;
}

.btn-icon__heading {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.536), 23px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.btn-icon__description {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Mobile responsive styles for btn-icon components */
@media (max-width: 768px) {
    .faq-green-box {
        padding: var(--space-24);
    }

    .faq-green-box .faq-header {
        text-align: center;
    }

    .faq-green-box .faq-header h2 {
        text-align: center;
        font-size: var(--font-xl);
    }

    .faq-green-box .faq-header .subtitle {
        text-align: center;
        margin-bottom: var(--space-24);
    }

    .btn-icon-group {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    .btn-icon {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--space-20);
        gap: var(--space-12);
    }

    .btn-icon__icon {
        margin-bottom: var(--space-4);
    }

    .btn-icon__icon .material-symbols-sharp {
        font-size: 36px;
    }

    .btn-icon__content {
        width: 100%;
    }

    .btn-icon__heading {
        font-size: var(--font-lg);
        margin-bottom: var(--space-8);
        text-align: center;
    }

    .btn-icon__description {
        font-size: var(--font-sm);
        text-align: center;
    }
}

.faq-cta {
    text-align: left;
    margin-top: var(--space-32);
}

.faq-cta-text {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-20);
}

.final-cta-button {
    margin-top: var(--space-40);
    text-align: center;
}

.card-feature-link {
    text-decoration: none !important;
    color: inherit;
    display: block;
}

.card-feature-link:hover {
    text-decoration: none !important;
}

.card-feature-link:hover .card-feature {
    background-color: var(--color-light-gray);
    transition: background-color var(--duration-base) var(--ease-default);
}

.card-feature-link h3,
.card-feature-link p,
.card-feature-link .card-feature__heading,
.card-feature-link .card-feature__description {
    text-decoration: none !important;
}

.card-feature {
    transition: background-color var(--duration-base) var(--ease-default);
}

/* ==================== MULTIPLE CTA STYLING ==================== */
.features-showcase-cta-top {
    display: flex;
    gap: var(--space-16);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* ==================== CTA SECTIONS ==================== */
.cta-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

/* When CTA follows trust section, adjust bottom padding */
.trust-and-security-section + .cta-section {
    padding-bottom: var(--padding-section-md);
}

.cta-box {
    padding: var(--spacing-50);
    background-color: var(--color-light-green);
    color: var(--color-text-primary);
}

.cta-box h2,
.cta-box h3 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-16);
    text-align: left;
    color: var(--color-text-primary);
}

.cta-description,
.cta-box p {
    font-size: var(--font-feature-desc);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-30);
    line-height: var(--line-height-relaxed);
    text-align: left;
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

.cta-trust-signal {
    margin-top: var(--space-20);
    margin-bottom: 0; /* Override .cta p margin to prevent extra spacing */
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.8; /* Increased from relaxed for better bullet separation */
    display: block;
}

.cta-trust-signal .checkmark {
    color: #16a34a !important; /* Green checkmark like comparison page */
    font-size: 18px;
    font-weight: 700;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48 !important;
    margin-right: 8px;
    vertical-align: -3px; /* Adjust alignment with text */
    line-height: 1;
    display: inline-block;
}

/* Two-column CTA layout */
.cta-grid {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: var(--gap-xl);
    align-items: center;
}

.cta-content-left {
    text-align: left;
}

.cta-content-left h2 {
    text-align: left;
}

.cta-content-left .cta-description {
    text-align: left;
}

.cta-trust-signals {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.cta-trust-signal--right {
    text-align: left !important;
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cta-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-md);
    }

    .cta-trust-signals {
        justify-content: flex-start;
    }

    /* Mobile CTA widths - full width for better tap targets */
    .cta-box .btn-primary,
    .cta-box .btn-outline,
    .cta-box a.btn-primary,
    .cta-content-left .btn-primary,
    .cta-content-left .btn-outline,
    .trust-section-part .btn-outline,
    .trust-section-part .btn-outline--dark,
    .trust-section-part .btn-primary {
        width: 100%;
        display: block;
        text-align: center;
        box-sizing: border-box;
    }
}

.cta-box .btn-primary {
    margin-top: var(--space-8);
}

.cta-box a,
.cta-box .btn-primary {
    text-decoration: none !important;
}

/* Final CTA Section - More prominent */
.final-cta-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-light-green);
}

.final-cta-box {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-50);
    text-align: center;
    transition: background-color 0.3s ease;
}

.final-cta-box:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.final-cta-box h2 {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-20);
    color: var(--color-text-primary);
}

.final-cta-description {
    font-size: var(--font-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-30);
    line-height: var(--line-height-relaxed);
}

.btn-large {
    padding: var(--space-20) var(--spacing-50);
    font-size: var(--font-xl);
}

.cta-subtext {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-20);
    font-style: italic;
}

.final-cta-box a,
.final-cta-box .btn-primary,
.final-cta-box .btn-large {
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .cta-box,
    .final-cta-box {
        padding: var(--spacing-30);
    }

    .final-cta-box h2 {
        font-size: var(--font-2xl);
    }

    .btn-large {
        padding: var(--space-16) var(--spacing-30);
        font-size: var(--font-lg);
    }
}

/* ==================== NEXT STEPS SECTION ==================== */
.next-steps-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-light-green);
}

.next-steps-header {
    text-align: left;
    margin-bottom: var(--spacing-50);
}

.next-steps-header h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
}

.next-steps-subtitle {
    font-size: var(--font-lg);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-30);
}

.next-step-card {
    background-color: var(--color-white);
    border: 2px solid var(--color-text-primary);
    padding: var(--spacing-30);
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.next-step-heading {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--space-16);
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-text-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.next-step-description {
    font-size: var(--font-base);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    margin-bottom: auto;
    flex-grow: 1;
}

.next-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--spacing-30) 0 var(--space-20) 0;
}

.next-step-icon .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-text-primary);
}

.next-step-card .btn-outline {
    width: fit-content;
    margin: 0 auto;
}

@media (max-width: 968px) {
    .next-steps-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-25);
    }

    .next-step-card {
        min-height: auto;
    }
}

/* ==================== PRODUCT UI SHOWCASE SECTION ==================== */
.product-ui-showcase {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.product-ui-showcase h2 {
    text-align: left;
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    color: var(--color-text-primary);
}

.product-ui-showcase .subtitle {
    text-align: left;
    font-size: 18px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-50);
    max-width: none;
}

.ui-showcase-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-50);
}

.ui-showcase-item {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: var(--spacing-25);
    align-items: start;
}

/* Mobile/Tablet: Video always on top, text below (consistent pattern) */
.ui-showcase-item .ui-showcase-media {
    order: 1;
}

.ui-showcase-item .ui-showcase-text {
    order: 2;
}

/* Desktop: 2-column layout with zigzag (60/40 split - video larger) */
@media (min-width: 1024px) {
    .ui-showcase-item {
        grid-template-columns: 60% 40%;
        gap: var(--spacing-50);
        align-items: start;
    }

    /* Default: media left, text right */
    .ui-showcase-item .ui-showcase-media {
        order: 1;
    }

    .ui-showcase-item .ui-showcase-text {
        order: 2;
    }

    /* Zigzag: Reverse order - text left, media right */
    .ui-showcase-item-reverse {
        grid-template-columns: 40% 60%;
    }

    .ui-showcase-item-reverse .ui-showcase-media {
        order: 2;
    }

    .ui-showcase-item-reverse .ui-showcase-text {
        order: 1;
    }
}

/* Stacked layout: Headline → Video → Bullets (same on all screen sizes) */
.ui-showcase-grid--stacked {
    gap: var(--spacing-100);
}

.ui-showcase-item--stacked {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-25);
    text-align: left;
}

.ui-showcase-item--stacked h3 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.ui-showcase-item--stacked .ui-showcase-media {
    order: unset;
    width: 100%;
}

.ui-showcase-item--stacked .ui-showcase-media.browser-mockup {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 0;
    overflow: hidden;
}

.ui-showcase-item--stacked .ui-showcase-media .browser-content video,
.ui-showcase-item--stacked .ui-showcase-media .browser-content img {
    width: 100%;
    height: auto;
    display: block;
}

.ui-features-list--stacked {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ui-features-list.ui-features-list--stacked li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: var(--font-sm);
    padding: 0 !important;
    margin-bottom: 0;
    position: static;
    background: none;
    border-radius: 0;
}

.ui-features-list.ui-features-list--stacked li::before {
    content: none !important;
    display: none !important;
}

.ui-features-list--stacked li .checkmark {
    color: #16a34a;
    font-size: 18px;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
    flex-shrink: 0;
}

.ui-showcase-image,
.ui-showcase-media {
    border-radius: 0;
    overflow: hidden;
    border: 1px solid #d1d5db;
    background: #ffffff;
}

.ui-showcase-media video {
    display: block;
    width: 100%;
    height: auto;
}

.ui-showcase-image img,
.ui-showcase-media img,
.ui-showcase-media video {
    width: 100%;
    height: auto;
    display: block;
}

.ui-showcase-text h3 {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
    color: var(--color-text-primary);
}

.ui-showcase-text p {
    font-size: 18px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-20);
    max-width: 700px; /* Prevent lines exceeding 75 chars */
}

.ui-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ui-features-list li {
    font-size: inherit; /* Match parent paragraph font size */
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
    padding-left: var(--space-24);
    position: relative;
}

.ui-features-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Icon variant: Material Symbol checkmarks instead of CSS ::before */
.ui-features-list.ui-features-list--icons li {
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.ui-features-list.ui-features-list--icons li::before {
    content: none;
    display: none;
}

.ui-features-list.ui-features-list--icons li .checkmark {
    color: #16a34a;
    font-size: 20px;
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
    flex-shrink: 0;
    line-height: 1.4;
}

/* Note: UI Showcase responsive styles are now mobile-first above */

/* ==================== FEATURE-SPECIFIC TESTIMONIALS ==================== */
.feature-testimonials {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-bg-light);
}

.feature-testimonials h2 {
    text-align: center;
    font-size: clamp(32px, 2rem + ((1vw - 3.2px) * 2.143), 56px);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.feature-testimonials .subtitle {
    text-align: center;
    font-size: 20px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-50);
}

.feature-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-25);
    max-width: 1200px;
    margin: 0 auto;
}

.feature-testimonial-card {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: var(--spacing-25);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.testimonial-quote-icon {
    font-size: 64px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    opacity: 0.2;
    line-height: 1;
    margin-bottom: var(--space-16);
}

.feature-testimonial-card .testimonial-text {
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-24);
    font-style: italic;
}

.testimonial-meta {
    border-top: 1px solid #e0e0e0;
    padding-top: var(--space-16);
}

.testimonial-author {
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

.testimonial-role {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
}

.testimonial-feature {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* ==================== PERSONA CTA CARDS ==================== */
.persona-cta-cards {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white); /* White for alternation */
}

.persona-cta-cards h2 {
    text-align: left;
    font-size: var(--font-2xl); /* Section headings: 24-32px */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after); /* 16px - proper vertical rhythm */
    color: var(--color-text-primary);
}

.persona-cta-cards .subtitle {
    text-align: left;
    font-size: 18px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-50);
}

.persona-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-25);
    max-width: 1200px;
    margin: var(--spacing-50) auto 0 auto; /* Add top spacing after shorter h2 margin */
}

.persona-cta-card {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: var(--spacing-50);
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.persona-cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.persona-cta-icon {
    font-size: 64px;
    color: var(--color-primary);
    margin-bottom: var(--space-20);
}

.persona-icon {
    font-size: 64px !important;
}

.persona-cta-card h3 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-16);
    color: var(--color-text-primary);
}

.persona-cta-card p {
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-20);
}

.persona-cta-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-25) 0;
    text-align: left;
}

.persona-cta-highlights li {
    font-size: 14px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-8);
    padding-left: var(--space-20);
    position: relative;
}

.persona-cta-highlights li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* ==================== PERSONA FEATURES (LARGE GRID) ==================== */
.persona-features-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-30);
    margin-top: 0;
}

.persona-feature-detailed {
    background-color: var(--color-white);
    border-radius: 0;
    padding: var(--spacing-30);
    border: 1px solid #000;
    box-shadow: none;
}

.feature-icon-large {
    font-size: 48px !important;
    color: var(--color-primary);
    margin-bottom: var(--space-16);
    display: block;
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 48;
}

.persona-feature-detailed h3 {
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.persona-feature-detailed p {
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-16);
    max-width: var(--content-max); /* 700px - optimal for 50-75 characters per line */
}

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

.feature-detail-list li {
    font-size: 16px;
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
    padding-left: var(--space-24);
    position: relative;
}

.feature-detail-list li:last-child {
    margin-bottom: 0; /* Remove bottom margin from last item to prevent extra section spacing */
}

.feature-detail-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* ===========================================
   Persona Feature Detailed - Mobile Accordion
   =========================================== */

/* Hide accordion trigger on desktop (show full card) */
.persona-feature__trigger {
    display: none;
}

/* Desktop: Show full content */
.persona-feature__content {
    display: block;
}

/* Mobile: Show accordion pattern */
@media (max-width: 768px) {
    /* Show accordion trigger on mobile */
    .persona-feature__trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: var(--space-16);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        gap: var(--space-12);
    }

    .persona-feature__trigger-icon {
        font-size: 1.75rem;
        color: var(--color-dark-blue);
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        flex-shrink: 0;
    }

    .persona-feature__trigger-title {
        flex: 1;
        font-size: 1rem;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        text-align: left;
    }

    /* Caret icon matching FAQ component */
    .persona-feature__trigger::after {
        content: '›';
        font-size: 28px;
        font-weight: bold;
        color: var(--color-text-secondary);
        transform: rotate(90deg);
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    /* Rotate caret when expanded */
    .persona-feature__trigger[aria-expanded="true"]::after {
        transform: rotate(270deg);
    }

    /* Hide full content by default on mobile */
    .persona-feature__content {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-base) var(--ease-default);
        padding: 0 var(--space-16);
    }

    /* Show content when expanded */
    .persona-feature-detailed--expanded .persona-feature__content {
        max-height: 800px; /* Generous max for animation */
        padding: 0 var(--space-16) var(--space-16);
    }

    /* Hide icon in content on mobile (shown in trigger) */
    .persona-feature__content .feature-icon-large {
        display: none;
    }

    /* Hide h3 in content on mobile (shown in trigger) */
    .persona-feature__content h3 {
        display: none;
    }

    /* Adjust card styling for mobile accordion */
    .persona-feature-detailed {
        padding: 0;
        border-width: 1px;
        margin-bottom: var(--space-8);
    }
}

/* ==================== RESPONSIVE ==================== */
/*
 * Mobile responsive styles are now handled via CSS variable overrides at breakpoints.
 * See :root variable overrides at @media (max-width: 768px) and @media (max-width: 480px)
 * at the top of this file for typography, spacing, and grid changes.
 *
 * This section only contains structural/layout changes that can't be expressed as variables.
 */

@media (max-width: 768px) {
    /* Navigation visibility */
    .nav-desktop {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    /* Footer layout - 2 column links on mobile */
    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-legal-links {
        flex-direction: column;
    }

    /* Features Page Responsive */
    .testimonial-content {
        grid-template-columns: 1fr;
        padding: var(--spacing-25);
    }

    .showcase-item {
        grid-template-columns: 1fr;
        gap: var(--space-30);
        margin-bottom: var(--spacing-50);
    }

    .features-cta {
        min-height: 30vh;
        padding: var(--section-padding-y) 0;
    }

    .feature-cards-grid,
    .support-grid {
        grid-template-columns: 1fr;
    }

    /* About Page Responsive */
    .about-stats-grid {
        grid-template-columns: 1fr;
    }

    .about-mission-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .about-mission-image {
        min-height: var(--min-height-image);
    }

    .about-features-split {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .about-features-cards {
        grid-template-columns: 1fr;
    }

    .about-why-grid {
        grid-template-columns: 1fr;
    }

    .about-partner-grid {
        grid-template-columns: 1fr;
        gap: var(--gap-xl);
    }

    .about-partner-benefits {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }

    .partner-benefit-item {
        padding: var(--space-16);
    }

    .partner-benefit-icon {
        font-size: 28px;
    }

    .partner-benefit-item p {
        font-size: 14px;
    }

    .about-partner-image {
        min-height: var(--min-height-image);
    }

    /* Persona Features Large Grid - Single column on mobile */
    .persona-features-grid-large {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* Persona Feature Detailed Cards - Mobile typography (accordion handles padding) */
    .persona-feature__content p {
        font-size: 14px;
        margin-bottom: var(--space-12);
    }

    .feature-detail-list li {
        font-size: 14px;
        margin-bottom: var(--space-8);
        padding-left: var(--space-20);
    }
}

/* ==================== EXTRA SMALL MOBILE (< 480px) ==================== */
/*
 * Typography and sizing changes are handled via CSS variable overrides.
 * This section only contains structural changes for very small screens.
 */
@media (max-width: 480px) {
    /* Smaller browser mockup on very small screens */
    .browser-chrome {
        height: 28px;
        padding: 0 8px;
    }

    .browser-dot {
        width: 6px;
        height: 6px;
    }

    .browser-address-bar {
        display: none; /* Hide address bar on very small screens */
    }
}

/* ==================== CONSOLIDATED COMPONENTS ==================== */

/* Card - Stat Component */
.card-stat {
    text-align: left;
    padding: 0;
}

.card-stat__number {
    font-size: var(--stat-number-size);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: 0;
    line-height: 1;
}

.card-stat__heading {
    font-size: var(--stat-label-size);
    font-weight: var(--font-weight-medium);
    margin: var(--space-12) 0;
    color: var(--color-text-primary);
}

.card-stat__description {
    font-size: var(--font-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

/* Card - Feature Component */
.card-feature {
    border: 2px solid var(--color-white);
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--card-min-height);
}

.card-feature--light {
    background-color: var(--color-white);
    border-color: #000000; /* Black border for definition on white background */
}

.card-feature--dark {
    background-color: var(--color-white); /* White cards on light green background */
    border-color: #000000; /* Black border for strong definition */
}

.card-feature__content {
    flex: 1;
    text-align: left;
}

.card-feature__header {
    margin-bottom: var(--space-16);
}

.card-feature__heading {
    font-size: var(--card-heading-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-green);
    margin-bottom: 0;
    text-align: left;
    min-height: var(--card-heading-min-height);
    display: flex;
    align-items: flex-start;
}

.card-feature--dark .card-feature__heading {
    color: var(--color-dark-blue); /* Dark blue headings for excellent contrast on white cards */
    font-weight: var(--font-weight-bold); /* Bold for emphasis */
}

.card-feature--light .card-feature__heading {
    color: #000000; /* Black headings for light variant */
    font-weight: var(--font-weight-bold);
}

.card-feature__subheading {
    font-size: var(--card-subheading-size);
    font-weight: var(--font-weight-semibold);
    color: #333333;
    margin-bottom: 0;
    margin-top: var(--space-4);
    text-align: left;
}

.card-feature--dark .card-feature__subheading {
    color: #333333;
}

.card-feature--light .card-feature__subheading {
    color: #000000;
}

.card-feature__description {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    text-align: left;
    margin-top: 0;
}

.card-feature--dark .card-feature__description {
    color: var(--color-text-secondary); /* Dark gray for excellent readability */
}

.card-feature__icon {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: var(--space-20);
}

.card-feature__icon .material-symbols-sharp {
    font-size: 96px;
    color: var(--color-primary-green);
    font-variation-settings:
        'FILL' 1,
        'wght' 200,
        'GRAD' 0,
        'opsz' 48;
}

.card-feature--dark .card-feature__icon .material-symbols-sharp {
    color: #000000; /* Black outline icons for strong contrast */
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 48;
}

.card-feature--light .card-feature__icon .material-symbols-sharp {
    color: #000000; /* Black icons for light variant */
    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' 0,
        'opsz' 48;
}

/* ===========================================
   Card Feature - Mobile Accordion Pattern
   =========================================== */

/* Hide accordion trigger on tablet+ (show full card) */
.card-feature__trigger {
    display: none;
}

/* Hide header icon on desktop (icon shown in bottom right) */
.card-feature__header-icon {
    display: none;
}

/* Mobile + Tablet: Show accordion pattern (below desktop breakpoint) */
@media (max-width: 1023px) {
    /* Show accordion trigger on mobile and tablet */
    .card-feature__trigger {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: var(--space-16);
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
    }

    .card-feature__trigger-content {
        display: flex;
        align-items: flex-start;
        gap: var(--space-12);
        flex: 1;
    }

    .card-feature__trigger-icon {
        font-size: 2rem;
        color: var(--color-dark-blue);
        font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        flex-shrink: 0;
    }

    .card-feature__trigger-text {
        flex: 1;
    }

    .card-feature__trigger .card-feature__heading {
        min-height: auto;
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }

    .card-feature__trigger .card-feature__subheading {
        font-size: var(--card-subheading-size);
        font-weight: var(--font-weight-semibold);
        margin: 0;
        margin-top: var(--space-4);
        color: #333333;
    }

    /* Hide Material Symbols icon, use CSS caret like FAQ */
    .card-feature__expand-icon {
        display: none;
    }

    /* Caret icon matching FAQ component */
    .card-feature__trigger::after {
        content: '›';
        font-size: 28px;
        font-weight: bold;
        color: var(--color-text-secondary);
        transform: rotate(90deg);
        transition: transform 0.3s ease;
        flex-shrink: 0;
        margin-left: var(--space-8);
    }

    /* Rotate caret when expanded */
    .card-feature__trigger[aria-expanded="true"]::after {
        transform: rotate(270deg);
    }

    /* Hide full content by default on mobile */
    .card-feature__content {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--duration-base) var(--ease-default);
        padding: 0 var(--space-16);
    }

    /* Show content when expanded */
    .card-feature--expanded .card-feature__content {
        max-height: 500px; /* Generous max for animation */
        padding: 0 var(--space-16) var(--space-16);
    }

    /* Hide header in content on mobile (shown in trigger) */
    .card-feature__content .card-feature__header {
        display: none;
    }

    /* Hide bottom-right icon on mobile */
    .card-feature__icon {
        display: none;
    }

    /* Adjust card styling for mobile accordion */
    .card-feature {
        padding: 0;
        min-height: auto;
        border-width: 1px;
        margin-bottom: var(--space-8);
    }

    .card-feature__description {
        font-size: 0.9375rem;
        line-height: 1.6;
    }
}

/* Card - Testimonial Component */
.card-testimonial {
    border: 2px solid var(--color-dark-blue);
    padding: var(--spacing-30);
    background-color: var(--color-white); /* White cards on white background - borders provide separation */
}

.card-testimonial__image {
    width: 100%;
    max-width: 200px;
    margin-bottom: var(--space-20);
}

.card-testimonial__quote {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 1.071), 24px);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin-bottom: var(--space-24);
    font-style: normal;
}

.card-testimonial__quote::before {
    content: '"';
}

.card-testimonial__quote::after {
    content: '"';
}

.card-testimonial__author {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    color: var(--color-text-primary);
    margin: 0;
}

.card-testimonial__author strong {
    font-weight: var(--font-weight-semibold);
}

/* Card - Simple Component */
.card-simple {
    padding: var(--spacing-25);
    text-align: left;
}

/* Simple Card - Who's Using variant */
.card-simple--whos-using {
    text-align: left; /* Left-aligned for consistency */
    padding: 0; /* Remove padding - content starts at left edge */
}

.card-simple--whos-using .card-simple__icon-box {
    background-color: var(--color-light-green);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-16); /* Left-aligned, no centering */
}

.card-simple--whos-using .card-simple__icon-box .material-symbols-sharp {
    font-size: 76px;
    font-variation-settings:
        'FILL' 0,
        'wght' 700,
        'GRAD' 0,
        'opsz' 48;
}

.card-simple--whos-using .card-simple__heading {
    font-size: var(--font-lg); /* Card headings: 18-23px */
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-12);
    color: var(--color-text-primary);
}

.card-simple--whos-using .card-simple__description {
    font-size: var(--font-base); /* Body text: 14-16px */
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
    margin-bottom: 0; /* Remove bottom margin for consistent section spacing */
}

/* Simple Card - Support variant */
.card-simple--support {
    background-color: var(--color-white);
    border: 1px solid #d0d0d0; /* Subtle gray - professional, doesn't compete with CTAs */
    padding: var(--spacing-25);
}

.card-simple--support .card-simple__heading {
    font-size: clamp(18px, 1.125rem + ((1vw - 3.2px) * 0.536), 23px);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-12);
    min-height: 60px;
}

.card-simple--support .card-simple__description {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    color: var(--color-text-primary);
    line-height: var(--line-height-relaxed);
}

/* Simple Card - Mini Feature variant (horizontal layout) */
.card-simple--mini-feature {
    background-color: var(--color-white);
    border: 1px solid var(--color-medium-gray);
    padding: var(--space-20);
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.card-simple--mini-feature .card-simple__icon {
    flex-shrink: 0;
}

.card-simple--mini-feature .card-simple__icon .material-symbols-sharp {
    font-size: 60px;
    font-variation-settings:
        'FILL' 1,
        'wght' 100,
        'GRAD' 0,
        'opsz' 48;
}

.card-simple--mini-feature .card-simple__content {
    flex: 1;
}

.card-simple--mini-feature .card-simple__heading {
    font-size: clamp(16px, 1rem + ((1vw - 3.2px) * 0.357), 18px);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-8);
    color: var(--color-text-primary);
}

.card-simple--mini-feature .card-simple__description {
    font-size: clamp(13px, 0.8125rem + ((1vw - 3.2px) * 0.179), 14px);
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* List - Checkmark Component */
.list-checkmark {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-checkmark__item {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-xs);
    margin-bottom: var(--space-12);
}

.list-checkmark__icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.list-checkmark__item span {
    flex: 1;
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    line-height: var(--line-height-relaxed);
}

/* List - Bullet Component */
.list-bullet {
    padding-left: 20px;
}

.list-bullet li {
    font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.357), 16px);
    line-height: var(--line-height-loose);
    margin-bottom: var(--space-12);
    position: relative;
}

.list-bullet li::before {
    content: '•';
    position: absolute;
    left: -20px;
    color: var(--color-primary-green);
    font-weight: bold;
}

/* Grid Component */
.grid {
    display: grid;
    gap: var(--spacing-25);
}

.grid--2-col {
    grid-template-columns: repeat(2, 1fr);
}

.grid--3-col {
    grid-template-columns: repeat(3, 1fr);
}

.grid--4-col {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .grid--2-col,
    .grid--3-col,
    .grid--4-col {
        grid-template-columns: 1fr;
    }
}

/* ==================== WORKFLOW & INTEGRATIONS SECTION - MINIMAL ==================== */
.workflow-integration-section-minimal {
    padding: var(--section-padding-y) 0;
    background-color: #ffffff;
}

.workflow-minimal-content h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
    text-align: left;
}

.workflow-minimal-intro {
    font-size: var(--font-lg);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-50);
    color: var(--color-text-secondary);
    text-align: left;
    max-width: 700px;
}

.minimal-integrations-list {
    margin-top: var(--spacing-50);
}

.minimal-integration-group {
    margin-bottom: var(--spacing-50);
}

.minimal-group-label {
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-20);
}

.minimal-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--spacing-20);
    margin-bottom: var(--spacing-16);
}

.minimal-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-16);
    padding: var(--spacing-30);
    background-color: var(--color-background-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.minimal-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.minimal-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.minimal-item-card:hover .minimal-icon {
    filter: grayscale(0%);
    opacity: 1;
}

/* ===================================
   Request Demo Page - Form Section
   =================================== */

/* Demo Form Section - matches .persona-features pattern */
.demo-form-section {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

/* Grid - matches .about-mission-grid pattern */
.demo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: start;
}

@media (max-width: 968px) {
    .demo-form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-16);
    }

    .demo-form-container {
        margin-top: var(--space-24);
    }
}

/* Left Column - What to Expect */
.demo-expect-content h2 {
    text-align: left;
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-heading-after);
    color: var(--color-text-primary);
}

.demo-expect-content .subtitle {
    text-align: left;
    font-size: var(--font-feature-desc);
    font-style: normal;
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-30);
    line-height: var(--line-height-relaxed);
}

/* Expectation List - matches enterprise page pattern */
.demo-expectation-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-25);
}

.demo-expectation-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-20);
    align-items: start;
}

/* Filled icons for expectation items - larger and filled */
.demo-expect-icon-filled {
    font-size: 36px !important;
    color: var(--color-primary);
    margin-top: 4px; /* Optical alignment: centers icon with heading cap height */
    flex-shrink: 0; /* Prevents icon from shrinking */
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 40;
}

.demo-expectation-text h3 {
    font-size: var(--font-md);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-8);
    color: var(--color-text-primary);
}

.demo-expectation-text p {
    font-size: var(--font-feature-desc);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Right Column - Form Container - matches .persona-feature-detailed */
.demo-form-container {
    background-color: var(--color-white);
    border-radius: 0;
    padding: var(--spacing-40);
    border: none;
    box-shadow: none;
}

.demo-form-container h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-30);
    color: var(--color-text-primary);
}

/* Form Styling */
.demo-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.demo-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.demo-form-group label {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-base);
    color: var(--color-text-primary);
    margin-bottom: 0;
}

.demo-form-group input,
.demo-form-group select {
    padding: 14px 16px;
    border: 1.5px solid #d0d0d0;
    border-radius: 4px;
    font-size: 1rem; /* Fixed 16px - prevents iOS auto-zoom on focus */
    font-family: var(--font-family-base);
    background: white;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.demo-form-group input:focus,
.demo-form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.1);
}

.demo-form-group input:hover:not(:focus),
.demo-form-group select:hover:not(:focus) {
    border-color: #b0b0b0;
}

.demo-form .btn {
    margin-top: var(--space-40);
    margin-bottom: var(--space-8);
}

.demo-form-note {
    text-align: left;
    font-size: var(--font-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin-top: 0;
    margin-bottom: 0;
}

/* Trust micros inside hero description column */
.features-hero-description .hero-trust-micros {
    margin-top: var(--spacing-24);
}

/* Responsive */
@media (max-width: 968px) {
    .demo-form-container {
        padding: var(--spacing-30);
    }
}

@media (max-width: 640px) {
    .demo-form-container {
        padding: var(--spacing-24);
    }
    
    .demo-expectation-list {
        gap: var(--spacing-20);
    }
    
    .demo-expect-icon-filled {
        font-size: 32px !important;
    }
}

/* Video Demo Section Specific Styling */
.video-demo-section {
}

/* CTA Buttons Container */
.cta-buttons {
    display: flex;
    gap: var(--spacing-16);
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media (max-width: 640px) {
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cta-buttons .btn,
    .cta-buttons .btn-outline {
        width: 100%;
    }
}

/* ==================== LEGAL PAGES ==================== */
/* Legal Hero Section */
.legal-hero {
    padding: var(--space-64) 0 var(--space-32);
    background-color: var(--color-white);
    border-bottom: 1px solid #e5e7eb;
}

.legal-hero h1 {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-16);
}

.legal-updated {
    font-size: var(--font-base);
    color: var(--text-muted);
    margin: 0;
}

/* Legal Content Section */
.legal-content {
    padding: var(--section-padding-y) 0;
    background-color: var(--color-white);
}

.legal-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--gap-xl);
    max-width: 1400px;
    margin: 0 auto;
}

/* Table of Contents */
.legal-toc {
    position: sticky;
    top: 100px;
    height: fit-content;
    padding: var(--spacing-32);
    background-color: var(--color-light-gray);
    border: 1px solid #e5e7eb;
}

.legal-toc h2 {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-20);
    padding-top: var(--space-8);
    padding-left: var(--space-12);
    color: var(--color-text-primary);
}

.legal-toc nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.legal-toc nav a {
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--space-12) var(--space-12);
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
    display: block;
}

.legal-toc nav a:hover {
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

/* Main Legal Content */
.legal-main {
    max-width: 900px;
}

.legal-main section {
    margin-bottom: var(--space-48);
}

.legal-main h2 {
    font-size: var(--font-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-20);
    margin-top: var(--space-32);
    line-height: var(--line-height-tight);
}

.legal-main h3 {
    font-size: var(--font-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-16);
    margin-top: var(--space-24);
    line-height: var(--line-height-snug);
}

.legal-main p {
    font-size: var(--font-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-20);
}

.legal-main ul,
.legal-main ol {
    margin-bottom: var(--space-20);
    padding-left: var(--space-24);
}

.legal-main li {
    font-size: var(--font-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-12);
}

.legal-main a {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.legal-main a:hover {
    color: #22c55e;
}

.legal-main strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Responsive Design for Legal Pages */
@media (max-width: 1024px) {
    .legal-wrapper {
        grid-template-columns: 240px 1fr;
        gap: var(--gap-lg);
    }

    .legal-toc {
        padding: var(--spacing-24);
    }
}

@media (max-width: 768px) {
    .legal-wrapper {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .legal-toc {
        position: static;
        margin-bottom: var(--space-32);
    }

    .legal-hero h1 {
        font-size: var(--font-2xl);
    }

    .legal-main h2 {
        font-size: var(--font-xl);
    }

    .legal-main h3 {
        font-size: var(--font-lg);
    }
}

/* ==================== ACCESSIBILITY: REDUCED MOTION ==================== */
/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Pause video autoplay for users who prefer reduced motion */
    video[autoplay] {
        animation: none !important;
    }
}