/* TalentMatched.com ROI Calculator Styles - Media Queries */
/* media.css - All media queries and responsive styles */

/* High DPI / Retina display support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .currency-flag[data-currency="gbp"] {
        background-image: url('/wp-content/themes/bb-theme-child/flags/gbp@2x.svg');
    }
    
    .currency-flag[data-currency="usd"] {
        background-image: url('/wp-content/themes/bb-theme-child/flags/usd@2x.svg');
    }
    
    .currency-flag[data-currency="eur"] {
        background-image: url('/wp-content/themes/bb-theme-child/flags/eur@2x.svg');
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .tooltip {
        display: none;
    }
    
    .mobile-help-text {
        display: block;
    }
}

@media (hover: hover) and (pointer: fine) {
    .mobile-help-text {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .currency-select-custom,
    .currency-option,
    .input-field,
    .selector-tab,
    .mode-btn {
        border-width: 3px !important;
    }
    
    .calculate-btn {
        border: 3px solid #000 !important;
    }
    
    /* PHASE 1: Enhanced contrast for validation feedback */
    .market-validation-feedback,
    .benchmark-feedback {
        border-width: 2px !important;
    }
}

/* UPDATED: Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .calculate-btn:hover,
    .selector-tab:hover,
    .mode-btn:hover {
        transform: none !important;
    }
    
    /* PHASE 1: Disable animations for validation feedback */
    .market-validation-feedback,
    .benchmark-feedback,
    .field-guidance {
        animation: none !important;
        transition: none !important;
    }
    
    /* PHASE 2: Disable mode transition animations */
    .input-group.mode-transition-in,
    .input-group.mode-transition-out {
        animation: none !important;
    }
    
    /* PHASE 3: Disable alternative input animations */
    .alternative-input-container,
    .alternative-calculation-feedback {
        animation: none !important;
        transition: none !important;
    }
    
    .toggle-indicator {
        transition: none;
    }
    
    .assumptions-content,
    .calculations-content {
        transition: none;
    }
}

/* TASK 2: Comprehensive Dark Mode Implementation */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --bg-tertiary: #3a3a3a;
        --text-primary: #ffffff;
        --text-secondary: #e2e8f0;
        --text-muted: #a0aec0;
        --border-color: #4a5568;
        --input-bg: #2d3748;
        --card-bg: #2d3748;
        --gold-light: #d4b366;
        --gold-primary: #b49755;
    }
    
    /* Base Elements */
    body {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }
    
    .container {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
    }
    
    /* Calculator Sections */
    .calculator-selector,
    .calculator-section,
    .benefits-section,
    .soft-benefits-section,
    .assumptions-section,
    .detailed-calculations-section,
    .calculator-mode-toggle {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    /* Interactive Elements */
    .selector-tab,
    .mode-btn {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    .selector-tab:hover,
    .mode-btn:hover {
        background-color: var(--bg-tertiary) !important;
    }
    
    /* Form Elements */
    .input-field,
    .industry-select,
    .alternative-select,
    .alternative-input {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    /* Currency Dropdown */
    .currency-select-custom,
    .currency-options {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    .currency-text {
        color: var(--text-primary) !important;
    }
    
    .currency-option {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
    }
    
    .currency-option:hover,
    .currency-option:focus,
    .currency-option.selected {
        background-color: var(--bg-tertiary) !important;
    }
    
    /* Tables */
    .calculation-table {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
    }
    
    .calculation-table th,
    .calculation-table td {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    .calculation-table th {
        background-color: var(--bg-tertiary) !important;
    }
	
	.calculation-table tr:hover:not(.roi-row) {
        background-color: var(--bg-tertiary) !important;
    }
    
    .calculation-table tr.section-header td {
        color: #212a47 !important;
    }
	
	/* Target all tbody rows in assumptions table */
    .assumptions-table tbody td {
        color: #212a47 !important;
    }
	
	.methodology-content h5 {
        color: #212a47 !important;
    }
    
    /* Target li elements in methodology list */
    .methodology-list h5 {
        color: #212a47 !important;
    }
	
	.tab-title,
	.soft-benefit-card p,
	.benefit-card p ,
	.evidence-claim {
		color: #bbb
	}

    /* Content Areas */
    .assumptions-header,
    .calculations-header,
    .assumptions-content,
    .calculations-content,
    .assumptions-grid {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
    }
    
    .assumptions-header:hover,
    .calculations-header:hover {
        background-color: var(--bg-tertiary) !important;
    }
    
    /* Evidence Cards */
    .assumption-group,
    .benefit-card,
    .soft-benefit-card {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    .assumption-group h4,
    .benefit-card h3,
    .soft-benefit-card h3 {
        color: var(--text-primary) !important;
    }
    
    .assumption-group li {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-secondary) !important;
    }
    
    .assumption-group li:hover {
        background-color: var(--bg-primary) !important;
    }
    
    /* Brand Elements */
    .roi-headline,
    .metric-value,
    .benefit-value {
        color: var(--gold-light) !important;
    }
    
    .cta-section h2 {
        color: var(--gold-light) !important;
    }
    
    /* Headings and Labels */
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-primary) !important;
    }
    
    .input-group label,
    .form-group label,
    .guidance-title {
        color: var(--text-primary) !important;
    }
    
    .input-help,
    .metric-label,
    .guidance-content {
        color: var(--text-secondary) !important;
    }
    
    /* Modals and Overlays */
    .modal-content,
    .loading-content {
        background-color: var(--card-bg) !important;
        color: var(--text-primary) !important;
    }
    
    .form-group input {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    .loading-overlay {
        background: rgba(26, 26, 26, 0.95) !important;
    }
    
    .loading-text {
        color: var(--gold-light) !important;
    }
    
    .loading-subtext {
        color: var(--text-secondary) !important;
    }
    
    /* Input Groups and Containers */
    .input-grid,
    .input-group,
    .industry-section,
    .calculate-btn-container,
    .calculate-btn-container-centered,
    .alternative-input-container {
        background-color: var(--card-bg) !important;
    }
    
    .alternative-input-header {
        color: var(--text-primary) !important;
    }
    
    /* Error States */
    .field-error,
    .error-message {
        background-color: #2d1a1a !important;
        border-color: #e53e3e !important;
        color: #feb2b2 !important;
    }
    
    .error-boundary {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
    }
    
    /* Validation Feedback */
    .market-validation-feedback.normal {
        background: #1a2e1a !important;
        color: #9ae6b4 !important;
    }
    
    .market-validation-feedback.warning {
        background: #2d1f0a !important;
        color: #fbb040 !important;
    }
    
    .market-validation-feedback.high {
        background: #2d1a1a !important;
        color: #feb2b2 !important;
    }
    
    .market-validation-feedback.low {
        background: #1a2332 !important;
        color: #90cdf4 !important;
    }
    
    .field-guidance {
        background-color: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }
    
    /* CR-2025-010-REV1: FIXED Dark Mode ROI Section Mobile Scaling */
    @media (max-width: 768px) {
        .roi-headline {
            font-size: 2.4rem !important; /* Scale down for mobile */
        }
        
        .metric-value {
            font-size: 1.4rem !important; /* Scale down for mobile */
        }
        
        .metric-label {
            font-size: 0.7rem !important; /* Scale down for mobile */
        }
        
        /* CR-2025-010-REV1: FIXED Dark Mode Evidence Panels Mobile Scaling */
        .assumptions-header h3,
        .calculations-header h3 {
            font-size: 1.1rem !important; /* Scale down for mobile */
        }
        
        .assumption-group h4 {
            font-size: 0.9rem !important; /* Scale down for mobile */
        }
        
        .assumption-group li {
            font-size: 0.75rem !important; /* Scale down for mobile */
        }
    }
    
    @media (max-width: 480px) {
        .roi-headline {
            font-size: 2rem !important; /* Extra small mobile */
        }
        
        .assumptions-header h3,
        .calculations-header h3 {
            font-size: 1rem !important; /* Extra small mobile */
        }
        
        .assumption-group h4 {
            font-size: 0.85rem !important; /* Extra small mobile */
        }
        
        .assumption-group li {
            font-size: 0.7rem !important; /* Extra small mobile */
        }
    }
    
    /* Dark mode flag support */
    .currency-flag:not([data-currency]),
    .currency-flag[data-currency=""] {
        background-color: #333;
        border-color: #555;
    }
    
    .currency-flag[data-currency]:empty::after {
        color: #ccc;
    }
}

/* UPDATED: Print styles */
@media print {
    .loading-overlay,
    .currency-dropdown,
    .calculate-btn,
    .tooltip,
    .calculator-mode-toggle,
    .alternative-input-toggle,
    .field-help-icon,
    .cta-section,
    .install-btn {
        display: none !important;
    }
    
    .container {
        max-width: none;
        padding: 0;
        margin: 0;
    }
    
    .hero-banner {
        display: none;
    }
    
    .results-section {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    /* PHASE 1: Hide validation feedback in print */
    .market-validation-feedback,
    .benchmark-feedback,
    .field-guidance {
        display: none !important;
    }
    
    /* PHASE 3: Hide alternative inputs in print */
    .alternative-input-container {
        display: none !important;
    }
    
    .results-section,
    .benefits-section,
    .assumptions-content,
    .calculations-content {
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        page-break-inside: avoid;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
    
    .currency-flag {
        background-color: #fff !important;
        border: 1px solid #000 !important;
    }
    
    .currency-flag[data-currency]:empty::after {
        color: #000 !important;
    }
}

/* CR-2025-005: Responsive grid adjustments for card layout */
@media (max-width: 768px) {
    .assumptions-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
        gap: 15px;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .assumptions-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
        gap: 18px;
    }
}

@media (min-width: 1201px) {
    .assumptions-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
        gap: 20px;
    }
}

/* CR-PWA-007: CRITICAL Mobile Viewport and Background Fixes */

/* FIXED: Mobile viewport protection - CR-2025-010-REV1: Scale light mode to match dark mode */
@media (max-width: 428px) {
    body {
        background: #ffffff;
        font-size: 14px; /* REDUCED base font size for better scaling */
    }
    
    .container {
        max-width: calc(100vw - 2rem);
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    /* CR-PWA-007: Hero banner mobile isolation */
    .hero-banner {
        width: 100% !important; /* CRITICAL: Remove viewport calculations */
        margin-left: 0 !important; /* CRITICAL: Remove negative margins */
        margin-right: 0 !important;
        min-height: 40vh;
        background-size: cover;
        background-position: center 30%;
        isolation: isolate; /* CRITICAL: Isolate stacking context */
        margin-bottom: 2rem !important; /* CRITICAL: Add separation */
    }
    
    .hero-content {
        padding: 1rem;
        text-align: center;
        isolation: isolate; /* CRITICAL: Contain within hero */
    }
    
    .hero-text {
        padding-left: 5% !important; /* CRITICAL: Remove viewport calculations */
    }
    
    /* CR-2025-010-REV1: Scale hero text down to match dark mode */
    .hero-text h1 {
        font-size: 1.8rem; /* REDUCED from 2rem to match dark mode scaling */
        line-height: 1.2;
    }
    
    .tagline {
        font-size: 1rem; /* REDUCED from 1.3rem to match dark mode scaling */
    }
    
    .promise {
        font-size: 0.8rem; /* REDUCED from 1rem to match dark mode scaling */
    }
    
    .logo-text {
        font-size: 0.85rem; /* REDUCED from 1rem to match dark mode scaling */
    }
    
    .logo-icon {
        font-size: 1rem; /* REDUCED from 1.2rem to match dark mode scaling */
        padding: 8px; /* REDUCED from 10px to match dark mode scaling */
    }
    
    /* CR-2025-010-REV1: Scale headers down to match dark mode */
    .calculator-header h2 {
        font-size: 1.2rem; /* REDUCED from 1.5rem to match dark mode scaling */
    }
    
    .assumptions-header h3,
    .calculations-header h3 {
        font-size: 1.1rem; /* REDUCED from 1.3rem to match dark mode scaling */
    }
    
    /* CR-2025-010-REV1: Scale ROI section down to match dark mode */
    .roi-headline {
        font-size: 2.2rem; /* REDUCED from 3rem to match dark mode scaling */
    }
    
    .metric-value {
        font-size: 1.4rem; /* REDUCED from 1.6rem for better mobile scaling */
    }
    
    .metric-label {
        font-size: 0.7rem; /* REDUCED from 0.8rem for better mobile scaling */
    }
    
    /* CR-2025-010-REV1: Scale benefit cards down to match dark mode */
    .benefit-value {
        font-size: 1.5rem; /* REDUCED from 1.8rem to match dark mode scaling */
    }
    
    .benefit-card h3 {
        font-size: 0.9rem; /* REDUCED from 1rem to match dark mode scaling */
    }
    
    .soft-benefit-card h3 {
        font-size: 0.85rem; /* REDUCED from 0.95rem to match dark mode scaling */
    }
    
    .soft-benefit-icon {
        font-size: 1.8rem; /* REDUCED from 2rem to match dark mode scaling */
    }
    
    /* CR-2025-010-REV1: Scale evidence panels down to match dark mode */
    .assumption-group h4 {
        font-size: 0.9rem; /* REDUCED from 1rem to match dark mode scaling */
        margin-bottom: 10px; /* REDUCED from 12px to match dark mode scaling */
    }
    
    .assumption-group li {
        font-size: 0.75rem; /* REDUCED from 0.85rem to match dark mode scaling */
        padding: 8px 8px 8px 26px; /* REDUCED padding to match dark mode scaling */
        margin-bottom: 8px; /* REDUCED from 10px to match dark mode scaling */
    }
    
    /* CR-2025-010-REV1: Scale calculate button down to match dark mode */
    .calculate-btn {
        padding: 14px 24px; /* REDUCED from 18px 30px to match dark mode scaling */
        font-size: 1rem; /* REDUCED from 1.3rem to match dark mode scaling */
        min-height: 48px !important; /* REDUCED from 56px to match dark mode scaling */
    }
    
    /* CR-2025-010-REV1: Scale selector tabs down to match dark mode */
    .selector-tab {
        padding: 20px 15px; /* REDUCED padding to match dark mode scaling */
        min-height: 70px !important; /* REDUCED from 80px to match dark mode scaling */
    }
    
    .tab-icon {
        font-size: 2rem; /* REDUCED from 2.5rem to match dark mode scaling */
        margin-bottom: 10px; /* REDUCED from 15px to match dark mode scaling */
    }
    
    .tab-title {
        font-size: 0.9rem; /* REDUCED from 1rem to match dark mode scaling */
    }
    
    .tab-subtitle {
        font-size: 0.75rem; /* REDUCED from 0.85rem to match dark mode scaling */
    }
    
    /* CR-2025-010-REV1: Scale mode buttons down to match dark mode */
    .mode-btn {
        padding: 16px; /* REDUCED from 20px to match dark mode scaling */
    }
    
    .mode-icon {
        font-size: 1.4rem; /* REDUCED from 1.6rem to match dark mode scaling */
    }
    
    .mode-title {
        font-size: 0.85rem; /* REDUCED from 1rem to match dark mode scaling */
    }
    
    .mode-description {
        font-size: 0.7rem; /* REDUCED from 0.8rem to match dark mode scaling */
    }
    
    .input-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        padding: 0;
    }
    
    .currency-dropdown {
        position: relative;
        z-index: 1000;
        width: 100%;
        max-width: 200px;
    }
    
    .currency-select-custom {
        min-height: 44px;
        padding: 8px 12px;
    }
    
    .selector-tabs {
        flex-direction: column;
        gap: 1rem;
    }
    
    .calculator-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .industry-section select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* CR-2025-005: Mobile adjustments for evidence cards */
    .assumptions-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .assumption-group {
        padding: 14px; /* REDUCED from 16px to match dark mode scaling */
        margin-bottom: 8px; /* REDUCED from 10px to match dark mode scaling */
    }
}

/* Mobile 480px breakpoint */
@media (max-width: 480px) {
    /* Extra small mobile adjustments */
    .hero-banner {
        min-height: 450px;
        width: 100% !important; /* CRITICAL: Remove viewport calculations */
        margin-left: 0 !important; /* CRITICAL: Remove negative margins */
        isolation: isolate; /* CRITICAL: Isolate stacking context */
    }
    
    .hero-content {
        padding: 50px 15px;
        isolation: isolate; /* CRITICAL: Contain within hero */
    }
    
    .hero-text {
        padding-top: 10px;
        padding-left: 4% !important; /* CRITICAL: Remove viewport calculations */
        max-width: 95%;
    }
    
    /* CR-2025-010-REV1: Scale extra small mobile to match dark mode */
    .hero-text h1 {
        font-size: 1.8rem; /* REDUCED from 2.2rem to match dark mode scaling */
    }
    
    .tagline {
        font-size: 0.9rem; /* REDUCED from 1.1rem to match dark mode scaling */
    }
    
    .promise {
        font-size: 0.8rem; /* REDUCED from 0.95rem to match dark mode scaling */
    }
    
    .calculator-header {
        text-align: center;
        align-items: center;
    }
    
    .currency-dropdown {
        align-self: center;
        min-width: 240px;
    }
    
    /* CR-2025-010-REV1: Scale calculate button down for extra small mobile */
    .calculate-btn {
        padding: 16px 20px; /* REDUCED from 20px 25px to match dark mode scaling */
        font-size: 1rem; /* REDUCED from 1.4rem to match dark mode scaling */
        min-height: 52px !important; /* REDUCED from 60px to match dark mode scaling */
    }
    
    .selector-tab {
        padding: 20px 12px; /* REDUCED from 25px 15px to match dark mode scaling */
        min-height: 80px !important; /* REDUCED from 90px to match dark mode scaling */
    }
    
    .tab-icon {
        font-size: 2.4rem; /* REDUCED from 3rem to match dark mode scaling */
    }
    
    /* PHASE 2: Extra small mobile mode toggle */
    .calculator-mode-toggle {
        padding: 15px;
    }
    
    .mode-btn {
        padding: 15px 12px; /* REDUCED from 18px 15px to match dark mode scaling */
    }
    
    .mode-icon {
        font-size: 1.2rem; /* REDUCED from 1.4rem to match dark mode scaling */
    }
    
    .mode-title {
        font-size: 0.8rem; /* REDUCED from 0.9rem to match dark mode scaling */
    }
    
    .mode-description {
        font-size: 0.65rem; /* REDUCED from 0.75rem to match dark mode scaling */
    }
    
    .input-field,
    .industry-select,
    .currency-select-custom,
    .currency-option,
    .alternative-select,
    .alternative-input {
        font-size: 16px !important; /* ENFORCED: Prevents zoom on all small screens */
    }
    
    /* PHASE 3: Extra small mobile alternative inputs */
    .alternative-input-toggle {
        font-size: 0.7rem;
        padding: 5px 8px;
    }
    
    .alternative-input-container {
        padding: 12px;
    }
    
    .alternative-input-header {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }
    
    .soft-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    /* CR-2025-010-REV1: Scale ROI headline down for extra small mobile */
    .roi-headline {
        font-size: 2rem; /* REDUCED from 2.5rem to match dark mode scaling */
    }
    
    .calculator-section,
    .benefits-section,
    .soft-benefits-section {
        padding: 20px 15px; /* REDUCED from 25px 20px to match dark mode scaling */
    }
    
    .form-buttons {
        flex-direction: column;
    }
    
    .form-buttons button {
        width: 100%;
    }
    
    /* MODIFIED: Extra small mobile header styling */
    .assumptions-header, .calculations-header {
        padding: 15px;
    }
    
    /* CR-2025-010-REV1: Scale evidence panel headers down for extra small mobile */
    .assumptions-header h3, .calculations-header h3 {
        font-size: 1rem; /* REDUCED from 1.1rem to match dark mode scaling */
    }
    
    .toggle-indicator {
        right: 15px;
    }
    
    .assumptions-content.expanded, .calculations-content.expanded {
        padding: 15px;
    }
    
    /* CR-2025-005: Extra small mobile evidence cards */
    .assumptions-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .assumption-group {
        padding: 12px; /* REDUCED from 14px to match dark mode scaling */
        margin-bottom: 6px; /* REDUCED from 8px to match dark mode scaling */
    }
    
    .assumption-group h4 {
        font-size: 0.85rem; /* REDUCED from 0.95rem to match dark mode scaling */
        margin-bottom: 8px; /* REDUCED from 10px to match dark mode scaling */
    }
    
    .assumption-group li {
        font-size: 0.7rem; /* REDUCED from 0.8rem to match dark mode scaling */
        padding: 6px 6px 6px 24px; /* REDUCED from 8px 8px 8px 28px to match dark mode scaling */
        margin-bottom: 6px; /* REDUCED from 8px to match dark mode scaling */
    }
    
    .tooltiptext {
        width: 250px;
        margin-left: -125px;
        padding: 10px 12px;
    }
    
    .calculation-table {
        font-size: 0.8rem;
    }
    
    .calculation-table th,
    .calculation-table td {
        padding: 8px 10px;
    }
    
    .market-validation-feedback {
        font-size: 0.75rem;
        padding: 0.5rem;
    }
    
    .market-validation-feedback .detail-line {
        font-size: 0.7rem;
    }
    
    .market-icon {
        font-size: 1rem;
        margin-right: 0.5rem;
    }
}

/* Tablet landscape 429px-1024px */
@media (min-width: 429px) and (max-width: 1024px) {
    .container {
        max-width: calc(100vw - 4rem);
        padding: 0 2rem;
    }
    
    .input-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    /* CR-PWA-007: Hero banner tablet isolation */
    .hero-banner {
        min-height: 50vh;
        width: 100% !important; /* CRITICAL: Remove viewport calculations */
        margin-left: 0 !important; /* CRITICAL: Remove negative margins */
        isolation: isolate; /* CRITICAL: Isolate stacking context */
    }
    
    /* CR-2025-010-REV1: Scale hero text for tablet to match dark mode */
    .hero-text h1 {
        font-size: 2.4rem; /* Scaled proportionally for tablet */
    }
    
    .tagline {
        font-size: 1.1rem; /* Scaled proportionally for tablet */
    }
    
    .promise {
        font-size: 0.9rem; /* Scaled proportionally for tablet */
    }
    
    /* CR-2025-010-REV1: Scale ROI section for tablet to match dark mode */
    .roi-headline {
        font-size: 2.6rem; /* Scaled proportionally for tablet */
    }
    
    .metric-value {
        font-size: 1.5rem; /* Scaled proportionally for tablet */
    }
    
    /* CR-2025-005: Tablet adjustments for evidence cards */
    .assumptions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px;
    }
}

/* Desktop 1025px+ */
@media (min-width: 1025px) {
    .container {
        max-width: min(1200px, calc(100vw - 4rem));
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    .results-section {
        max-width: auto;
        margin: 0 auto;
    }
    
    .input-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    /* CR-PWA-007: Hero banner desktop isolation */
    .hero-banner {
        min-height: 60vh;
        background-attachment: fixed;
        width: 100% !important; /* CRITICAL: Remove viewport calculations */
        margin-left: 0 !important; /* CRITICAL: Remove negative margins */
        isolation: isolate; /* CRITICAL: Isolate stacking context */
    }
    
    /* CR-2025-005: Desktop adjustments for evidence cards */
    .assumptions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
}

/* Mobile 768px and below */
@media (max-width: 768px) {
    .container {
        padding: 15px;
        position: relative;
        z-index: 100 !important; /* CRITICAL: Ensure above hero */
    }
    
    /* Mobile hero banner adjustments */
    .hero-banner {
        min-height: 500px;
        width: 100% !important; /* CRITICAL: Remove viewport calculations */
        margin-left: 0 !important; /* CRITICAL: Remove negative margins */
        margin-right: 0 !important;
        isolation: isolate; /* CRITICAL: Isolate stacking context */
        margin-bottom: 2rem !important; /* CRITICAL: Add separation */
    }
    
    .hero-content {
        padding: 60px 20px;
        isolation: isolate; /* CRITICAL: Contain within hero */
    }
    
    .hero-text {
        padding-top: 20px;
        padding-left: 5% !important; /* CRITICAL: Remove viewport calculations */
        max-width: 90%;
    }
    
    /* CR-2025-010-REV1: Scale down for mobile to match dark mode */
    .hero-text h1 {
        font-size: 2.2rem; /* REDUCED from 2.8rem to better match dark mode */
        line-height: 1.1;
    }
    
    .tagline {
        font-size: 1.1rem; /* REDUCED from 1.3rem to better match dark mode */
        margin-bottom: 15px;
    }
    
    .promise {
        font-size: 0.9rem; /* REDUCED from 1rem to better match dark mode */
        max-width: 100%;
    }
    
    .logo-icon {
        padding: 8px; /* REDUCED from 10px to better match dark mode */
        font-size: 1rem; /* REDUCED from 1.2rem to better match dark mode */
    }
    
    .logo-text {
        font-size: 0.9rem; /* REDUCED from 1rem to better match dark mode */
    }
    
    .calculator-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    /* CR-2025-010-REV1: Scale headers down for mobile */
    .calculator-header h2 {
        font-size: 1.2rem; /* REDUCED from 1.5rem to match dark mode */
    }
    
    .currency-dropdown {
        min-width: 200px;
        align-self: stretch;
    }
    
    .currency-select-custom {
        padding: 14px 16px;
        font-size: 16px !important; /* FIXED: Prevents zoom on iOS */
        min-height: 48px !important;
    }
    
    .currency-options {
        font-size: 16px !important;
    }
    
    .currency-option {
        padding: 14px 16px;
        font-size: 16px !important;
        min-height: 48px !important;
    }
    
    .input-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .selector-tabs {
        flex-direction: column;
        gap: 15px;
    }
    
    .selector-tab {
        min-width: 100%;
    }
    
    .calculate-btn-container {
        margin: 30px 0;
    }
    
    .calculate-btn {
        width: 100%;
        justify-content: center;
        padding: 20px;
        font-size: 1.1rem;
        min-height: 60px !important;
    }
    
    .results-section {
        padding: 30px 20px;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .soft-benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* PHASE 2: Mobile mode toggle adjustments */
    .mode-toggle-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .mode-btn {
        min-width: 100%;
    }
    
    /* PHASE 3: Mobile alternative inputs */
    .alternative-input-container {
        padding: 15px;
    }
    
    /* MODIFIED: Mobile header adjustments */
    .assumptions-header, .calculations-header {
        padding: 1rem;
    }
    
    .assumptions-header h3, .calculations-header h3 {
        font-size: 1.2rem;
    }
    
    .tooltiptext {
        width: 280px;
        margin-left: -140px;
        font-size: 0.8rem;
    }
    
    .calculation-table {
        font-size: 0.85rem;
    }
    
    .calculation-table th,
    .calculation-table td {
        padding: 10px 12px;
    }
}

/* Mobile Column Visibility Control */
@media (max-width: 599px) {
    /* Hide Description column (3rd) in calculation tables */
    .calculation-table thead tr th:nth-child(3),
    .calculation-table tbody tr td:nth-child(3),
    .calculation-table tfoot tr td:nth-child(3) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Hide Source/Rationale column (3rd) in assumptions tables */
    .assumptions-table thead tr th:nth-child(3),
    .assumptions-table tbody tr td:nth-child(3),
    .assumptions-table tfoot tr td:nth-child(3) {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Adjust table layout for mobile optimization */
    .calculation-table,
    .assumptions-table {
        table-layout: auto !important;
        width: 100% !important;
    }

    /* Optimize remaining columns for mobile */
    .calculation-table thead tr th:nth-child(1),
    .calculation-table tbody tr td:nth-child(1),
    .assumptions-table thead tr th:nth-child(1),
    .assumptions-table tbody tr td:nth-child(1) {
        width: 60% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .calculation-table thead tr th:nth-child(2),
    .calculation-table tbody tr td:nth-child(2),
    .assumptions-table thead tr th:nth-child(2),
    .assumptions-table tbody tr td:nth-child(2) {
        width: 40% !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* Handle colspan adjustments for section headers */
    .calculation-table .section-header td[colspan="3"],
    .assumptions-table .section-header td[colspan="3"] {
        colspan: 2 !important;
    }

    /* Ensure proper padding for mobile readability */
    .calculation-table th,
    .calculation-table td,
    .assumptions-table th,
    .assumptions-table td {
        padding: 10px 12px !important;
        font-size: 0.85rem !important;
    }

    /* Optional: Add visual indicator for hidden columns */
    .calculation-table::after,
    .assumptions-table::after {
        content: "ℹ️ Detailed descriptions available on desktop view";
        display: block;
        padding: 8px;
        font-size: 0.75rem;
        color: #666;
        text-align: center;
        font-style: italic;
        margin-top: 8px;
    }
}

/* Progressive Enhancement: Tablet Portrait (600px - 768px) */
@media (min-width: 600px) and (max-width: 768px) {
    /* Show all columns but optimize sizing */
    .calculation-table thead tr th:nth-child(1),
    .calculation-table tbody tr td:nth-child(1),
    .assumptions-table thead tr th:nth-child(1),
    .assumptions-table tbody tr td:nth-child(1) {
        width: 35% !important;
    }

    .calculation-table thead tr th:nth-child(2),
    .calculation-table tbody tr td:nth-child(2),
    .assumptions-table thead tr th:nth-child(2),
    .assumptions-table tbody tr td:nth-child(2) {
        width: 25% !important;
    }

    .calculation-table thead tr th:nth-child(3),
    .calculation-table tbody tr td:nth-child(3),
    .assumptions-table thead tr th:nth-child(3),
    .assumptions-table tbody tr td:nth-child(3) {
        width: 40% !important;
        font-size: 0.8rem !important;
    }
}

/* Accessibility Enhancement: Screen Reader Support */
@media (max-width: 599px) {
    .calculation-table thead tr th:nth-child(3)::before,
    .calculation-table tbody tr td:nth-child(3)::before,
    .assumptions-table thead tr th:nth-child(3)::before,
    .assumptions-table tbody tr td:nth-child(3)::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* HubSpot Modal Responsive Styles */

/* Tablet Portrait (768px) */
@media (max-width: 768px) {
    .hubspot-gate-modal .modal-content {
        padding: 30px 20px;
        width: 95%;
        max-height: 95vh;
        margin: 10px;
    }
    
    .hubspot-gate-modal #gate-modal-title {
        font-size: 1.5rem;
    }
    
    .hubspot-gate-modal .modal-subtitle {
        font-size: 1rem;
    }
    
    .hubspot-gate-modal .modal-benefits {
        padding: 15px;
        margin: 20px 0;
    }
    
    .hubspot-gate-modal .benefit-list li {
        font-size: 0.95rem;
    }
    
    #hubspot-form-container .hs-button,
    .fallback-form .submit-button {
        padding: 14px 24px;
        font-size: 1rem;
    }
}

/* Mobile Landscape & Small Tablets */
@media (max-width: 640px) and (orientation: landscape) {
    .hubspot-gate-modal .modal-content {
        max-height: 85vh;
        padding: 20px;
    }
    
    .hubspot-gate-modal #gate-modal-title {
        font-size: 1.3rem;
    }
    
    .hubspot-gate-modal .modal-benefits {
        display: none; /* Hide benefits in landscape to save space */
    }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
    .hubspot-gate-modal .modal-content {
        padding: 25px 15px;
        border-radius: 10px;
    }
    
    .hubspot-gate-modal #gate-modal-title {
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    
    .hubspot-gate-modal .modal-subtitle {
        font-size: 0.95rem;
    }
    
    .hubspot-gate-modal .modal-close {
        top: 10px;
        right: 10px;
        font-size: 24px;
        padding: 8px;
    }
    
    .hubspot-gate-modal .benefit-list li {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
    
    #hubspot-form-container input[type="email"],
    #hubspot-form-container input[type="text"] {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 14px 12px;
    }
}

/* Very Small Mobile (360px) */
@media (max-width: 360px) {
    .hubspot-gate-modal .modal-content {
        padding: 20px 12px;
    }
    
    .hubspot-gate-modal #gate-modal-title {
        font-size: 1.2rem;
    }
    
    .hubspot-gate-modal .checkmark {
        font-size: 1rem;
    }
}

/* Dark Mode Support for Modal */
@media (prefers-color-scheme: dark) {
    .hubspot-gate-modal {
        background: rgba(0, 0, 0, 0.9);
    }
    
    .hubspot-gate-modal .modal-content {
        background: #2a2a2a;
        color: #e0e0e0;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    }
    
    .hubspot-gate-modal #gate-modal-title {
        color: #b49755; /* Gold stands out in dark mode */
    }
    
    .hubspot-gate-modal .modal-subtitle {
        color: #b0b0b0;
    }
    
    .hubspot-gate-modal .modal-benefits {
        background: #1a1a1a;
        border-left-color: #b49755;
    }
    
    .hubspot-gate-modal .benefit-list li {
        color: #d0d0d0;
    }
    
    #hubspot-form-container input[type="email"],
    #hubspot-form-container input[type="text"] {
        background: #3a3a3a;
        border-color: #4a4a4a;
        color: #ffffff;
    }
    
    #hubspot-form-container input:focus {
        border-color: #b49755;
        background: #2a2a2a;
    }
    
    .hubspot-gate-modal .privacy-notice {
        color: #a0a0a0;
    }
    
    .hubspot-gate-modal .modal-close {
        color: #b0b0b0;
    }
    
    .hubspot-gate-modal .modal-close:hover {
        color: #b49755;
    }
    
    .fallback-form .form-control {
        background: #3a3a3a;
        border-color: #4a4a4a;
        color: #ffffff;
    }
    
    .fallback-form .form-control:focus {
        border-color: #b49755;
        background: #2a2a2a;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .hubspot-gate-modal .modal-content {
        border: 3px solid #212a47;
    }
    
    #hubspot-form-container input[type="email"],
    #hubspot-form-container input[type="text"],
    .fallback-form .form-control {
        border-width: 3px;
    }
    
    #hubspot-form-container .hs-button,
    .fallback-form .submit-button {
        border: 3px solid #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .hubspot-gate-modal,
    .hubspot-gate-modal .modal-content {
        animation: none !important;
    }
    
    #hubspot-form-container .hs-button:hover,
    .fallback-form .submit-button:hover {
        transform: none !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    #hubspot-form-container input[type="email"],
    #hubspot-form-container input[type="text"],
    .fallback-form .form-control {
        min-height: 48px;
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    #hubspot-form-container .hs-button,
    .fallback-form .submit-button {
        min-height: 56px;
        padding: 16px 32px;
    }
    
    .hubspot-gate-modal .modal-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Print Media - Hide modal */
@media print {
    .hubspot-gate-modal {
        display: none !important;
    }
}