.device-phone,
.device-laptop {
    position: relative;
    margin-inline: auto;
    max-width: 100%;
}

.device-screen {
    overflow: hidden;
    background: var(--bs-body-bg);
}

.device-phone {
    width: 250px;
    padding: 0.6rem;
    border-radius: 2.2rem;
    background: #16181d;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28);
}
.device-phone::before {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    height: 1.1rem;
    border-radius: 0.75rem;
    background: #16181d;
    z-index: 2;
}
.device-phone .device-screen {
    border-radius: 1.7rem;
    aspect-ratio: 9 / 18;

    padding: 2.2rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
}

.device-phone--hero .device-screen {
    padding: 0;
}
.device-phone--hero .device-screen > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.device-laptop {
    width: 100%;
    padding: 0.55rem;
    border-radius: 0.7rem;
    background: #16181d;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.24);
    margin-bottom: 1rem;
}

.device-laptop .device-screen {
    border-radius: 0.35rem;
    padding: 0.9rem;
    height: 23rem;
    display: flex;
    flex-direction: column;
}
.device-laptop::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.7rem;
    height: 0.7rem;
    border-radius: 0 0 0.6rem 0.6rem;
    background: linear-gradient(#23262d, #16181d);
}

/* Every element between .device-screen and a canvas must be a growing,
   shrinkable flex column -- one plain div breaks the chain and the canvas
   overflows the frame. Put .device-fill on any wrapper dropped into a screen. */
.device-fill,
.device-laptop .device-screen .analysis-graph-card,
.device-laptop .device-screen .analysis-graph-body,
.device-laptop .device-screen .landing-chart {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;   /* without this a flex item won't shrink below its content */
}

.device-laptop .device-screen .analysis-graph-body {
    height: auto;
    padding: 0;
}
.device-laptop .device-screen .analysis-graph-canvas {
    flex: 1 1 auto;
    min-height: 0;
}

.landing-chart {
    position: relative;
    width: 100%;
}

.landing-chart-caption {
    flex: 0 0 auto;
    line-height: 1.35;
}

.landing-section {
    padding-block: 3rem;
}
.landing-section + .landing-section {
    border-top: 1px solid var(--bs-border-color);
}

.reveal .reveal-item {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 0.7, 0.3, 1),
                transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
    will-change: opacity, transform;
}
.reveal .reveal-item--copy { transform: translate3d(-2.5rem, 0, 0); }
.reveal .reveal-item--frame { transform: translate3d(2.5rem, 0, 0) scale(0.96); }
.reveal .flex-lg-row-reverse .reveal-item--copy { transform: translate3d(2.5rem, 0, 0); }
.reveal .flex-lg-row-reverse .reveal-item--frame { transform: translate3d(-2.5rem, 0, 0) scale(0.96); }

.reveal.is-visible .reveal-item {
    opacity: 1;
    transform: none;
}

.reveal.is-visible .reveal-item--frame { transition-delay: 140ms; }

.reveal.is-static .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .reveal .reveal-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 991.98px) {
    .reveal .reveal-item--copy,
    .reveal .reveal-item--frame,
    .reveal .flex-lg-row-reverse .reveal-item--copy,
    .reveal .flex-lg-row-reverse .reveal-item--frame {
        transform: translate3d(0, 1.5rem, 0);
    }
}

@media (max-width: 991.98px) {
    .device-phone { width: 228px; }
}

@media (max-width: 767.98px) {
    .device-phone { width: 216px; }
    .device-laptop { padding: 0.4rem; }

    .device-laptop .device-screen {
        padding: 0.6rem;
        height: auto;
        aspect-ratio: 16 / 11;
    }
    .landing-section { padding-block: 2.25rem; }
}