/**
 * Product screenshots — scroll with main content (not fixed).
 * Wash + shots live in .marketing-screens-zone only; footer stays clean below.
 */
.marketing-screens-zone {
    position: relative;
    isolation: isolate;
}

.marketing-screens-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

/* Atmospheric wash over hero/cards only (no heavy fade at zone bottom) */
.marketing-screens-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 38%, rgba(245, 245, 240, 0.08) 0%, rgba(245, 245, 240, 0.46) 72%),
        linear-gradient(165deg, rgba(245, 245, 240, 0.58) 0%, rgba(245, 245, 240, 0.22) 50%, transparent 88%);
}

.marketing-screens-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    z-index: 4;
    background: linear-gradient(
        to bottom,
        rgba(245, 245, 240, 0.16) 0%,
        transparent 100%
    );
    pointer-events: none;
}

.marketing-screen {
    position: absolute;
    z-index: 2;
    border-radius: 2px;
    overflow: hidden;
}

.marketing-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(34%) sepia(10%) contrast(0.92) brightness(1.05) saturate(0.76);
    mix-blend-mode: multiply;
    opacity: 0.62;
}

/* sc1 — upper left (fluid: scales between phone and ultrawide) */
.marketing-screen--1 {
    top: -1%;
    left: -2%;
    width: clamp(300px, 36vw, 640px);
    aspect-ratio: 16 / 10;
    transform: rotate(-4.5deg);
    -webkit-mask-image: radial-gradient(
        ellipse 78% 72% at 52% 46%,
        #000 18%,
        rgba(0, 0, 0, 0.55) 48%,
        transparent 74%
    );
    mask-image: radial-gradient(
        ellipse 78% 72% at 52% 46%,
        #000 18%,
        rgba(0, 0, 0, 0.55) 48%,
        transparent 74%
    );
}

.marketing-screen--2 {
    top: 14%;
    right: -4%;
    width: clamp(320px, 38vw, 680px);
    aspect-ratio: 16 / 10;
    transform: rotate(3.5deg);
    -webkit-mask-image: radial-gradient(
        ellipse 70% 80% at 42% 50%,
        #000 15%,
        rgba(0, 0, 0, 0.5) 45%,
        transparent 78%
    );
    mask-image: radial-gradient(
        ellipse 70% 80% at 42% 50%,
        #000 15%,
        rgba(0, 0, 0, 0.5) 45%,
        transparent 78%
    );
}

.marketing-screen--2 img {
    opacity: 0.58;
}

/* sc3 — bottom left, below Browse */
.marketing-screen--3 {
    top: clamp(260px, 32vh, 350px);
    bottom: auto;
    left: 0;
    width: clamp(200px, 24vw, 440px);
    aspect-ratio: 16 / 10;
    transform: rotate(-2.5deg);
    -webkit-mask-image: radial-gradient(
        ellipse 85% 68% at 55% 52%,
        #000 14%,
        rgba(0, 0, 0, 0.48) 44%,
        transparent 78%
    );
    mask-image: radial-gradient(
        ellipse 85% 68% at 55% 52%,
        #000 14%,
        rgba(0, 0, 0, 0.48) 44%,
        transparent 78%
    );
}

.marketing-screen::after {
    content: '';
    position: absolute;
    inset: -2%;
    pointer-events: none;
    background: radial-gradient(
        ellipse 95% 90% at 50% 50%,
        transparent 38%,
        rgba(245, 245, 240, 0.28) 72%,
        rgba(245, 245, 240, 0.82) 100%
    );
}

.marketing-screens-zone .landing-wrap,
.marketing-screens-zone .about-wrap {
    position: relative;
    z-index: 1;
}

body.marketing-screens-page .main-content {
    position: relative;
    z-index: 1;
}

body.marketing-screens-page .hero-section,
body.marketing-screens-page .features-grid .feature-card {
    position: relative;
}

body.marketing-screens-page .feature-card {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Footer sits below zone — solid, no wash bleed */
body.marketing-screens-page .unified-footer {
    position: relative;
    z-index: 5;
    background: var(--bg-light, #ffffff);
}

/* Large desktops — screenshots read larger without dominating */
@media (min-width: 1440px) {
    .marketing-screen--1 {
        width: clamp(380px, 34vw, 760px);
        left: -3%;
    }
    .marketing-screen--2 {
        width: clamp(400px, 36vw, 800px);
        right: -5%;
        top: 12%;
    }
    .marketing-screen--3 {
        width: clamp(240px, 22vw, 520px);
        top: clamp(280px, 30vh, 380px);
    }
}

@media (min-width: 1920px) {
    .marketing-screen--1 {
        width: clamp(440px, 32vw, 880px);
    }
    .marketing-screen--2 {
        width: clamp(460px, 34vw, 920px);
    }
    .marketing-screen--3 {
        width: clamp(280px, 20vw, 580px);
    }
}

@media (max-width: 1024px) {
    .marketing-screen--1 {
        width: clamp(220px, 40vw, 400px);
        left: -5%;
        top: 0;
    }
    .marketing-screen--2 {
        width: clamp(230px, 42vw, 420px);
        right: -6%;
        top: 15%;
    }
    .marketing-screen--3 {
        width: clamp(160px, 28vw, 280px);
        top: clamp(240px, 30vh, 320px);
        left: -3%;
    }
}

@media (max-width: 768px) {
    body.marketing-screens-page .main-content,
    body.marketing-screens-page .main-content.with-sidebar,
    body.marketing-screens-page .main-content.sidebar-collapsed {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: calc(16px + env(safe-area-inset-left, 0)) !important;
        padding-right: calc(16px + env(safe-area-inset-right, 0)) !important;
        box-sizing: border-box !important;
    }

    .marketing-screens-zone .about-wrap,
    .marketing-screens-zone .landing-wrap {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .marketing-screen--1 {
        width: clamp(130px, 36vw, 200px);
        left: -4%;
        top: 0;
    }
    .marketing-screen--2 {
        width: clamp(120px, 34vw, 190px);
        right: -5%;
        top: 10%;
    }
    .marketing-screen--2 img {
        opacity: 0.52;
    }
    .marketing-screen--3 {
        width: clamp(100px, 26vw, 160px);
        top: clamp(200px, 26vh, 280px);
        left: -3%;
    }
}

@media (max-width: 480px) {
    .marketing-screen--1 {
        width: clamp(110px, 32vw, 170px);
        left: -3%;
    }
    .marketing-screen--2 {
        width: clamp(105px, 30vw, 165px);
        right: -4%;
        top: 8%;
    }
    .marketing-screen--3 {
        width: clamp(90px, 24vw, 140px);
        top: clamp(180px, 24vh, 260px);
        left: -2%;
    }
    .marketing-screen img {
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-screen--1 { transform: rotate(-4.5deg); }
    .marketing-screen--2 { transform: rotate(3.5deg); }
    .marketing-screen--3 { transform: rotate(-2.5deg); }
}