/* Shared, restrained motion for the public landing pages. */
:where(main section[id], body > section[id]) {
    scroll-margin-top: calc(96px + var(--dx-safe-top, 0px));
}

/* A wide screenshot must shrink with its column instead of widening the page. */
:where(main, body) img {
    max-inline-size: 100%;
}

:where([class*="-img-mockup-wrapper"], [class*="-real-screen"], .feat-split-media) {
    min-inline-size: 0;
    max-inline-size: 100%;
}

:where([class*="-img-mockup-card"], [class*="-real-screen"]) > img {
    display: block;
    max-inline-size: 100%;
}

@media (min-width: 769px) {
    html { scrollbar-gutter: stable; }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* Same-origin feature-page navigation gets a short native crossfade where
       the browser supports cross-document view transitions. */
    @view-transition { navigation: auto; }

    ::view-transition-old(root) {
        animation: 150ms ease-in both dx-page-leave;
    }

    ::view-transition-new(root) {
        animation: 240ms ease-out both dx-page-enter;
    }

    @keyframes dx-page-leave {
        to { opacity: 0; }
    }

    @keyframes dx-page-enter {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* JavaScript only marks content that begins below the viewport. */
    .dx-scroll-reveal {
        opacity: 0;
        translate: 0 16px;
        transition: opacity 580ms ease, translate 580ms var(--dx-ease-out, ease-out);
    }

    .dx-scroll-reveal.dx-reveal-in {
        opacity: 1;
        translate: 0 0;
    }

    /* Large product screenshots fade in without moving their fitted frames. */
    .dx-scroll-reveal.dx-reveal-media { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dx-scroll-reveal,
    .dx-scroll-reveal.dx-reveal-in {
        opacity: 1 !important;
        translate: none !important;
    }
}