#sfo-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 7000;
    pointer-events: none;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;

    /* Default (smallest devices) */
    background-image: url('https://parkcopilot.com/wp-content/uploads/2025/09/20-9-uhd-portrait.png');
}

/* 4:3 tablets (iPad, etc.) */
@media screen and (min-width: 768px) {
    #sfo-overlay {
        background-image: url('https://parkcopilot.com/wp-content/uploads/2025/09/4-3-uhd-landscape.png');
    }
}

/* 3:2 laptops / Chromebooks */
@media screen and (min-width: 1280px) {
    #sfo-overlay {
        background-image: url('https://parkcopilot.com/wp-content/uploads/2025/09/3-2-uhd-landscape.png');
    }
}

/* 16:10 MacBooks / widescreen laptops */
@media screen and (min-width: 1440px) {
    #sfo-overlay {
        background-image: url('https://parkcopilot.com/wp-content/uploads/2025/09/16-9-uhd-landscape.png');
    }
}

/* 16:9 desktops / most monitors */
@media screen and (min-width: 1600px) {
    #sfo-overlay {
        background-image: url('https://parkcopilot.com/wp-content/uploads/2025/09/16-9-uhd-landscape.png');
    }
}