/* Polished interaction layer kept separate from the compact base stylesheet. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.hero,
.hero-grid,
.hero-visual,
.preview-window,
.preview-content,
.security-grid,
.security-art,
.plans-grid {
    min-width: 0;
    max-width: 100%;
}

@supports (overflow: clip) {
    html,
    body {
        overflow-x: clip;
    }
}

.plan {
    transform: translateY(0) scale(1);
    transform-origin: center bottom;
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

.plan:hover,
.plan:focus-within {
    z-index: 2;
    transform: translateY(-9px) scale(1.012);
    border-color: rgba(53, 235, 166, 0.42);
    background: #0a2030;
    box-shadow:
        0 24px 58px rgba(0, 0, 0, 0.30),
        0 10px 35px rgba(28, 218, 151, 0.10);
}

.plan.featured:hover,
.plan.featured:focus-within {
    border-color: rgba(53, 235, 166, 0.90);
    box-shadow:
        0 27px 65px rgba(0, 0, 0, 0.32),
        0 14px 42px rgba(26, 199, 137, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .plan {
        transition: none;
    }

    .plan:hover,
    .plan:focus-within {
        transform: none;
    }
}

@media (max-width: 760px) {
    .hero-visual {
        width: 100%;
    }

    .floating-safe {
        left: 4px;
    }

    .floating-devices {
        right: 4px;
    }

    .plan:hover,
    .plan:focus-within {
        transform: translateY(-6px);
    }
}