.public-plan,
.plan-card {
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1),
        box-shadow 240ms ease, border-color 240ms ease;
    transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
    .public-plan:hover,
    .plan-card:hover {
        transform: translateY(-7px) scale(1.008);
        border-color: #ed6c1b99;
        box-shadow: 0 20px 40px #0005, 0 0 28px #ed6c1b15,
            inset 0 1px 0 #ed6c1b33;
    }
}

.public-plan:focus-within,
.plan-card:focus-within {
    border-color: #ed6c1b;
    box-shadow: 0 12px 30px #0004, 0 0 0 2px #ed6c1b22;
}

.public-plan:active:not(:has(input:focus, select:focus)),
.plan-card:active:not(:has(input:focus, select:focus)) {
    transform: translateY(-2px) scale(.992);
    transition-duration: 100ms;
    border-color: #ed6c1b;
    box-shadow: 0 6px 18px #0005, 0 0 24px #ed6c1b22;
}

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

    .public-plan:hover,
    .plan-card:hover,
    .public-plan:active,
    .plan-card:active {
        transform: none;
    }
}