@media screen and (max-width: 767px) {
    /* Onboarding header logic - specific to page if needed */
    .neo-compare-page .neo-audit-onboarding {
        display: none !important;
    }

    /* Mobile Context Header Styles */
    .mobile-context-header {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0.5rem 0 0 0 !important;
        padding: 0 !important;
    }

    .mobile-context-header h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
        margin-bottom: 0.75rem !important;
        font-weight: 800;
        color: #fff;
    }

    .mobile-context-header h1 span {
        color: var(--gold) !important;
    }

    .mobile-context-header p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: var(--text-dim);
        max-width: 100%;
        margin: 0 auto 0.5rem auto !important;
        text-align: center !important;
    }

    /* Mobile Top Placeholder (Guidance Pill) */
    .mobile-top-placeholder {
        display: block !important;
        margin-top: 1.25rem !important;
        margin-bottom: 0.25rem !important;
        width: 100%;
    }

    .neo-placeholder-summary {
        padding: 1.25rem !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px dashed rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        position: relative !important;
        width: 100% !important;
        backdrop-filter: blur(10px);
    }

    .neo-placeholder-summary p {
        color: var(--text-dim) !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        margin: 0 !important;
        line-height: 1.6 !important;
        position: relative;
        z-index: 2;
    }

    .mobile-top-placeholder .neo-placeholder-summary::after {
        content: '';
        position: absolute;
        inset: -1px;
        background: linear-gradient(135deg, var(--primary), transparent, var(--primary));
        border-radius: 12px;
        z-index: 1;
        opacity: 0.15;
        animation: placeholder-glow-move 4s linear infinite;
    }

    @keyframes placeholder-glow-move {
        0% { filter: blur(10px) opacity(0.1); }
        50% { filter: blur(15px) opacity(0.3); }
        100% { filter: blur(10px) opacity(0.1); }
    }

    /* Footer Descriptions (Inside left column) */
    .mobile-footer-description {
        display: block !important;
        margin-top: 1.5rem;
        padding-bottom: 0.5rem !important;
    }

    .mobile-footer-description p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        color: var(--text-dim);
        text-align: justify !important;
        margin-bottom: 0.75rem !important;
    }

    /* Layout Order */
    .neo-template-panel, .neo-input-panel { order: 2; }
    .mobile-footer-description { order: 3; }
    .neo-results-panel { order: 4; margin-top: 0 !important; }

    /* Dynamic Summary Banner (Verdict/Onboarding) */
    .neo-summary-banner {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Hide the redundant bottom placeholder on mobile until cards are generated */
    #compare-placeholder .neo-placeholder-summary {
        display: none !important;
    }

    /* Forms & Inputs */
    .neo-field { 
        margin-bottom: 1.5rem !important; 
        overflow: visible !important;
    }

    .neo-field.mb-0 {
        margin-bottom: 0 !important;
    }
    
    .neo-field > label, 
    .sc-field-group > label {
        display: flex !important;
        align-items: center;
        font-size: 0.8rem !important;
        font-weight: 800 !important;
        margin-bottom: 0.6rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        line-height: 1.4 !important;
    }

    .neo-help-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 18px !important;
        height: 18px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        color: #94a3b8 !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        cursor: pointer !important;
        margin-left: 8px !important;
        transition: all 0.2s !important;
        vertical-align: middle !important;
        position: relative !important;
    }

    .neo-help-btn:hover {
        background: var(--primary) !important;
        color: #0f172a !important;
        border-color: var(--primary) !important;
    }

    .mobile-context-header .neo-help-btn,
    .neo-compare-page .neo-onboarding-header h3 .neo-help-btn {
        display: none !important;
    }

    input:not([type="checkbox"]), select {
        width: 100% !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border-radius: 8px !important;
        padding: 0.6rem 0.9rem !important; /* Matched to desktop */
        font-family: 'Outfit', sans-serif !important;
        font-weight: 500 !important;
        font-size: 0.75rem !important; /* Matched to desktop */
        appearance: none !important;
        -webkit-appearance: none !important;
        transition: all 0.2s ease !important;
    }

    input:focus, select:focus {
        border-color: var(--primary) !important;
        background: rgba(0, 0, 0, 0.6) !important;
        box-shadow: 0 0 20px rgba(255, 204, 51, 0.15) !important;
        outline: none !important;
    }

    /* Panels Visual Style */
    .neo-compare-page .neo-template-panel, 
    .neo-compare-page .neo-input-panel {
        background: linear-gradient(135deg, 
            rgba(10, 14, 23, 0.85) 0%, 
            rgba(15, 20, 31, 0.8) 40%, 
            rgba(10, 14, 23, 0.85) 100%) !important;
        background-size: 200% 200% !important;
        animation: watery-shift 10s ease-in-out infinite !important;
        backdrop-filter: blur(40px) saturate(220%) !important;
        -webkit-backdrop-filter: blur(40px) saturate(220%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        padding: 0.85rem 1rem 0.75rem 1rem !important; /* Shrunk top and bottom */
        box-shadow: 
            inset 0 1.5px 0.5px rgba(255, 255, 255, 0.3),
            inset 0 -1.5px 0.5px rgba(0, 0, 0, 0.5),
            0 15px 45px rgba(0, 0, 0, 0.6) !important;
        margin-bottom: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .neo-compare-page .budget-input-group {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Comparison Filter (Multiselect) - Style Sync with Custom Dropdown */
    .neo-multiselect { 
        width: 100% !important; 
        position: relative !important;
        margin-bottom: 0.5rem !important;
    }

    .multiselect-toggle { 
        width: 100% !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 0.6rem 0.9rem !important; /* Matched to desktop */
        font-size: 0.75rem !important; /* Matched to desktop */
        min-height: 38px !important; /* Matched to desktop */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    .multiselect-toggle.open {
        border-color: var(--primary) !important;
        box-shadow: 0 0 15px rgba(255, 204, 51, 0.1) !important;
    }

    .multiselect-toggle.open .select-arrow {
        transform: rotate(-135deg) !important;
        margin-bottom: -3px !important;
        border-color: var(--primary) !important;
        opacity: 1 !important;
    }

    .multiselect-content { 
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        right: 0 !important;
        background: #0a0612 !important;
        border: 1px solid rgba(255, 204, 51, 0.3) !important;
        border-radius: 12px !important;
        z-index: 2000 !important;
        display: none !important; /* Managed by .active class */
        padding: 0.5rem !important;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.9) !important;
        overflow: visible !important;
    }

    .multiselect-content.active {
        display: block !important;
        animation: dropdownFadeIn 0.2s ease-out !important;
    }

    .multiselect-actions {
        display: flex !important;
        gap: 0.55rem !important;
        margin-bottom: 0.55rem !important;
        padding-bottom: 0.55rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .multiselect-action-btn {
        flex: 1 !important;
        min-height: 34px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 204, 51, 0.35) !important;
        background: rgba(255, 204, 51, 0.08) !important;
        color: var(--primary) !important;
        font-size: 0.72rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    .multiselect-action-btn.danger {
        border-color: rgba(255, 77, 77, 0.35) !important;
        background: rgba(255, 77, 77, 0.08) !important;
        color: #ff7a7a !important;
    }

    /* Filter Items Within Multiselect */
    .check-item {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
    }

    .check-item-main {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .check-item-title {
        min-width: 0 !important;
    }

    .check-item:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .check-item input[type="checkbox"] {
        appearance: checkbox !important;
        -webkit-appearance: checkbox !important;
        width: 18px !important;
        height: 18px !important;
        accent-color: var(--primary) !important;
        margin: 0 !important;
    }

    .check-item span {
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }

    .check-item input:checked + span {
        color: #fff !important;
        font-weight: 700 !important;
    }

    .check-item-help {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        border: 1px solid rgba(255, 204, 51, 0.35) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.72) !important;
        font-size: 0.65rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    .check-item-help[data-tooltip]::after {
        left: auto !important;
        right: calc(100% + 10px) !important;
        bottom: 50% !important;
        transform: translateY(50%) translateX(8px) !important;
    }

    .check-item-help[data-tooltip]::before {
        left: auto !important;
        right: calc(100% - 2px) !important;
        bottom: 50% !important;
        transform: translateY(50%) translateX(8px) !important;
        border-color: transparent transparent transparent rgba(15, 23, 42, 0.95) !important;
    }

    .check-item-help[data-tooltip]:hover::after,
    .check-item-help[data-tooltip]:hover::before {
        transform: translateY(50%) translateX(0) !important;
    }

    /* Scenario List Mobile */
    .compare-scenario-entry { 
        margin-bottom: 0.75rem !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }

    .sc-header { 
        padding: 1rem !important; 
        background: rgba(255, 255, 255, 0.03) !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
        user-select: none !important;
    }

    .sc-header-left {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .sc-chevron {
        font-size: 0.6rem !important;
        color: var(--text-dim) !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease !important;
        transform: rotate(90deg) !important;
    }

    .sc-title { 
        font-size: 0.85rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        text-transform: uppercase !important;
        color: var(--primary) !important;
    }

    .sc-body { 
        padding: 1.25rem 1rem !important; 
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .sc-row {
        display: flex !important;
        flex-direction: column !important; /* Force stack on mobile */
        gap: 1.25rem !important;
        width: 100% !important;
    }

    .sc-field-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
    }

    /* Scenario Removal & Clear All */
    .remove-row-btn.compare-remove-scenario {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
        background: rgba(255, 77, 77, 0.1) !important;
        border-color: rgba(255, 77, 77, 0.2) !important;
    }

    .compare-set-heading {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    .compare-set-actions {
        display: flex !important;
        justify-content: flex-end !important;
        margin-top: 0.7rem !important;
        margin-bottom: 0.8rem !important;
    }

    .compare-set-clear-btn {
        background: rgba(255, 77, 77, 0.1) !important;
        border: 1px solid rgba(255, 77, 77, 0.2) !important;
        padding: 4px 10px !important;
        border-radius: 6px !important;
        font-size: 0.65rem !important;
        color: #ff7a7a !important;
    }

    /* Add Scenario Button Sync */
    .add-row-btn#add-scenario-btn {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 2px dashed var(--primary) !important;
        color: var(--primary) !important;
        padding: 1rem !important;
        margin-top: 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 12px !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1em !important;
    }

    /* Dropdown/Multiselect Z-index correction */
    .neo-template-panel { z-index: 150 !important; }
    .neo-input-panel { z-index: 140 !important; }
    
    /* 1. Custom Dropdown Styling (For Scenarios Select) */
    .neo-custom-dropdown {
        position: relative !important;
        width: 100% !important;
    }

    .preset-panel-toolbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.85rem !important;
        padding-bottom: 0.8rem !important;
        margin-bottom: 0.95rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .preset-panel-title {
        margin: 0 !important;
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-weight: 850 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
    }

    .preset-status-toggle {
        transform: scale(0.85) !important;
        transform-origin: right center !important;
    }

    .dropdown-trigger {
        width: 100% !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        padding: 0.6rem 0.9rem !important; /* Matched to desktop */
        font-size: 0.75rem !important; /* Matched to desktop */
        min-height: 38px !important; /* Matched to desktop */
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        cursor: pointer !important;
    }

    .dropdown-options {
        position: absolute !important;
        top: calc(100% + 5px) !important;
        left: 0 !important;
        right: 0 !important;
        background: #0a0612 !important;
        border: 1px solid rgba(255, 204, 51, 0.3) !important;
        border-radius: 8px !important;
        z-index: 2000 !important;
        display: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        max-height: 230px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 204, 51, 0.78) rgba(255, 255, 255, 0.04) !important;
    }

    .dropdown-options::-webkit-scrollbar {
        width: 8px !important;
    }

    .dropdown-options::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.04) !important;
        border-radius: 999px !important;
    }

    .dropdown-options::-webkit-scrollbar-thumb {
        background: rgba(255, 204, 51, 0.78) !important;
        border-radius: 999px !important;
    }

    .dropdown-section-label {
        color: var(--gold) !important;
        padding: 0.55rem 1rem 0.25rem !important;
    }

    .neo-custom-dropdown.open .dropdown-options {
        display: block !important;
    }

    .dropdown-item {
        padding: 0.75rem 1rem 0.75rem 1.45rem !important;
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
    }

    .dropdown-item:active, .dropdown-item.active {
        background: var(--primary) !important;
        color: #1a0b2e !important;
        font-weight: 700 !important;
    }

    .dropdown-search-shell {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        padding: 0.55rem !important;
        background: #0a0612 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .dropdown-search-input {
        width: 100% !important;
        min-height: 36px !important;
        padding: 0.55rem 0.8rem !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(255, 255, 255, 0.04) !important;
        color: #fff !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
    }

    .dropdown-search-empty {
        display: none !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        padding: 0.7rem 1rem 0.9rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-size: 0.75rem !important;
        text-align: center !important;
    }

    .dropdown-options.is-search-empty .dropdown-search-empty {
        display: flex !important;
    }

    .select-arrow {
        flex-shrink: 0 !important;
        width: 6px !important;
        height: 6px !important;
        border-right: 2px solid #fff !important;
        border-bottom: 2px solid #fff !important;
        transform: rotate(45deg) !important;
        margin-bottom: 3px !important;
        opacity: 0.5 !important;
    }

    .neo-custom-dropdown.open .select-arrow {
        transform: rotate(-135deg) !important;
        margin-bottom: -3px !important;
        border-color: var(--primary) !important;
        opacity: 1 !important;
    }

    .neo-multiselect .multiselect-content { z-index: 1000 !important; }

    .neo-compare-page .neo-divider {
        color: rgba(255, 255, 255, 0.5) !important;
        font-weight: 800;
        margin-top: 0 !important; /* Neutralized extra top gap */
        margin-bottom: 0.8rem !important;
        font-size: 0.7rem !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 0.4rem;
    }

    .sc-chevron {
        font-family: monospace !important;
        display: inline-block;
        transition: transform 0.2s ease;
    }

    /* Override title to prevent overflow in sc-header */
    .sc-title {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

    /* Results Grid - Column Layout */
    .neo-summary-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    .neo-summary-card {
        width: 100% !important;
        margin-bottom: 0 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        backdrop-filter: blur(20px) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 12px !important;
        padding: 1.25rem 1rem !important;
        position: relative !important;
        overflow: hidden !important;
        transition: all 0.3s ease !important;
    }

    /* Rotating Border Animation for Cards */
    .neo-summary-card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 12px;
        padding: 2px;
        background: conic-gradient(from var(--border-angle, 0deg),
                transparent 70%,
                var(--primary, rgba(255, 204, 51, 0.4)) 85%,
                #fff 95%,
                var(--primary, rgba(255, 204, 51, 0.4)) 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        animation: rotate-border 4s linear infinite;
        pointer-events: none;
        z-index: 10;
        opacity: 1;
    }

    @property --border-angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    @keyframes rotate-border {
        to { --border-angle: 360deg; }
    }

    @keyframes watery-shift {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }
}