/* ClarityOS showcase — the theme's own native components:
   .diagram-custom (image-diagram.png + image-core.png + five labeled
   nodes) paired side-by-side with .mask-laptop (realistic laptop photo
   with the dashboard screenshot composited into the screen cutout).
   Both components already ship fully styled in app.css; this file only
   adds the side-by-side pairing layout and the reveal animation hook. */

.lp-clarityos.has-background:before { background: var(--accent-dark); }

.lp-clarityos .clarityos-pair {
    transform: translateY(3.75em);
    opacity: 0;
    transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
    transition-delay: 600ms;
}

.lp-clarityos.has-reveal .clarityos-pair {
    transform: none;
    opacity: 1;
}

.clarityos-pair {
    display: flex;
    align-items: center;
    gap: 3.75em;
    max-width: 75em;
    margin: 0 auto 1.875em;
}

.clarityos-pair .clarityos-diagram,
.clarityos-pair .clarityos-laptop {
    margin-bottom: 0;
}

.clarityos-pair .clarityos-diagram {
    flex: 0 0 38%;
    min-width: 0;
}

.clarityos-pair .clarityos-laptop {
    flex: 1 1 58%;
    min-width: 0;
}

.clarityos-pair .diagram-custom,
.clarityos-pair .mask-laptop {
    width: 100%;
}

@media screen and (max-width: 899px) {
    .clarityos-pair {
        flex-direction: column;
        gap: 2.5em;
    }

    .clarityos-pair .clarityos-laptop {
        order: -1;
        flex: 0 0 auto;
    }

    .clarityos-pair .clarityos-diagram {
        flex: 0 0 auto;
    }

    .clarityos-pair .diagram-custom,
    .clarityos-pair .mask-laptop {
        width: auto;
    }
}