@supports selector(html:has(body.kyon-login-page)) {
    html:has(body.kyon-login-page) {
        scroll-snap-type: y proximity;
    }
}

body.kyon-login-page {
    scroll-snap-type: y proximity;
}

body.kyon-login-page .kyon-login-hero,
body.kyon-login-page .kyon-below-login {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

body.kyon-login-page .kyon-below-login {
    scroll-margin-top: 0;
}

@media screen and (min-width: 1025px) {
    @supports selector(html:has(body.kyon-login-page)) {
        html:has(body.kyon-login-page) {
            scroll-snap-type: y mandatory;
        }
    }

    body.kyon-login-page {
        scroll-snap-type: y mandatory;
    }

    body.kyon-login-page .kyon-login-hero,
    body.kyon-login-page .kyon-below-login {
        scroll-snap-stop: always;
    }

    body.kyon-login-page > .kyon-renewal-footer {
        scroll-snap-align: end;
        scroll-snap-stop: always;
    }
}

body.kyon-login-page .kyon-scroll-cue {
    background: transparent;
    border: 0;
    color: inherit;
    display: block;
    font: inherit;
    padding: 0;
    text-decoration: none;
    transform: translateX(-50%);
    -webkit-tap-highlight-color: transparent;
}

body.kyon-login-page .kyon-scroll-cue-motion {
    animation: kyon-login-scroll-pulse 2s ease-out infinite;
    display: block;
    height: 28px;
    opacity: .5;
    position: relative;
    width: 28px;
}

body.kyon-login-page .kyon-scroll-cue-motion::before {
    border-bottom: 3px solid rgba(255, 255, 255, .85);
    border-right: 3px solid rgba(255, 255, 255, .85);
    content: "";
    display: block;
    height: 28px;
    transform: rotate(45deg);
    width: 28px;
}

body.kyon-login-page .kyon-scroll-cue:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .92);
    outline-offset: 8px;
}

@keyframes kyon-login-scroll-pulse {
    0% {
        opacity: .5;
    }

    50% {
        opacity: 1;
        transform: translateY(10px);
    }

    100% {
        opacity: .5;
    }
}

@media (prefers-reduced-motion: reduce) {
    @supports selector(html:has(body.kyon-login-page)) {
        html:has(body.kyon-login-page) {
            scroll-behavior: auto;
        }
    }

    body.kyon-login-page {
        scroll-behavior: auto;
    }

    body.kyon-login-page .kyon-scroll-cue-motion {
        animation: none;
        opacity: 1;
    }
}

@media (max-width: 1024px) {
    body.kyon-login-page .kyon-scroll-cue {
        display: none;
    }
}