.ebook_container__mHea9 {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: var(--color_bg_auth0-cta)
}

.ebook_container__mHea9:before {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: url(https://cdn.auth0.com/website/passkeys-playground/assets/cta-mobile.png) no-repeat;
    background-size: cover
}

@media only screen and (min-width: 480px) {
    .ebook_container__mHea9:before {
        background: url(https://cdn.auth0.com/website/passkeys-playground/assets/cta-mobile.png) no-repeat;
        background-size: cover
    }
}

@media only screen and (min-width: 768px) {
    .ebook_container__mHea9:before {
        background: url(/images/auth0-background.svg) no-repeat 100%;
        background-size: cover
    }
}

@media only screen and (min-width: 992px) {
    .ebook_container__mHea9 {
        background: unset
    }

    .ebook_container__mHea9:before {
        background: none
    }

    .ebook_container__mHea9:after {
        display: none;
        background: none
    }
}

.ebook_content__Msqs7 {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-column-gap: 1rem;
    column-gap: 1rem;
    width: calc(100% - 2rem);
    max-width: 1312px;
    margin: 0 auto;
    position: relative;
    padding: 1.5rem 0 14rem;
    isolation: isolate
}

@media only screen and (min-width: 768px) {
    .ebook_content__Msqs7 {
        width: calc(100% - 4rem);
        grid-template-columns:repeat(12, minmax(0, 1fr))
    }
}

@media only screen and (min-width: 1200px) {
    .ebook_content__Msqs7 {
        width: calc(100% - 128px)
    }
}

@media only screen and (min-width: 1400px) {
    .ebook_content__Msqs7 {
        column-gap: 2rem
    }
}

.ebook_content__Msqs7:after {
    position: absolute;
    content: "";
    bottom: -1.5rem;
    right: 0;
    background: url(/images/ebook-image.png) 50% no-repeat;
    background-size: contain;
    width: 100%;
    height: 75%
}

@media only screen and (min-width: 576px) {
    .ebook_content__Msqs7 {
        padding-bottom: 1.5rem;
        column-gap: 6rem
    }

    .ebook_content__Msqs7:after {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        background: url(/images/ebook-image.png) 50% no-repeat;
        background-size: cover;
        height: 100%;
        width: 32%;
        z-index: 10
    }

    .ebook_content__Msqs7 {
        column-gap: 0
    }
}

@media only screen and (min-width: 992px) {
    .ebook_content__Msqs7 {
        background: var(--color_bg_auth0-cta);
        padding: 2rem 2.5rem;
        border-radius: 1rem;
        overflow: hidden
    }

    .ebook_content__Msqs7:before {
        position: absolute;
        bottom: 0;
        right: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-size: contain;
        background: url(/images/auth0-background.svg) no-repeat 100% 100%;
        background-size: cover
    }
}

.ebook_ebookBanner__copy__ww_yi {
    grid-column: 1/span 6;
    display: flex;
    flex-direction: column;
    z-index: 1
}

@media only screen and (min-width: 576px) {
    .ebook_ebookBanner__copy__ww_yi {
        grid-column: 1/span 4
    }
}

@media only screen and (min-width: 768px) {
    .ebook_ebookBanner__copy__ww_yi {
        grid-column: 1/span 8
    }
}

.ebook_ebookBanner__title__fo98D {
    color: var(--color_fg_bold);
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: .05px;
    font-weight: 500
}

.ebook_ebookBanner__description__VuuXS {
    color: var(--color_fg_default);
    font-size: 1rem;
    line-height: 1.25rem;
    margin-top: .5rem
}

.ebook_ebookBanner__link__DwydO {
    margin-top: 1.5rem;
    display: flex;
    padding: .5rem 1rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    align-self: stretch;
    border-radius: .375rem;
    background: linear-gradient(120deg, #191919 -29.78%, #4016a0 11.61%, #3f59e4 100.07%);
    color: #fffefa;
    font-size: .875rem;
    line-height: 1.375rem;
    font-weight: 500;
    letter-spacing: .2px
}

html[lang=ja] .ebook_ebookBanner__link__DwydO {
    line-height: 1.875rem
}

.ebook_ebookBanner__link__DwydO:focus-visible {
    outline: solid 1px var(--color_border_focus);
    outline-offset: .125rem;
    border-radius: .125rem
}

@media only screen and (min-width: 768px) {
    .ebook_ebookBanner__link__DwydO {
        width: -moz-fit-content;
        width: fit-content
    }
}

.ebook_ebookBanner__linkIcon__Klja2 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: .75rem;
    width: .75rem
}

.ebook_ebookBanner__linkIcon__Klja2 svg {
    height: .75rem;
    width: .75rem;
    fill: #fffefa
}

.hero_container__uPOx8 {
    width: 100%;
    position: relative;
    overflow: hidden
}

@media only screen and (min-width: 360px) {
    .hero_container__uPOx8:before {
        background-size: cover
    }
}

@media only screen and (min-width: 992px) {
    .hero_container__uPOx8, body[data-theme=light] .hero_container__uPOx8, body[data-theme=system-light] .hero_container__uPOx8 {
        background-color: unset
    }

    .hero_container__uPOx8:before, body[data-theme=light] .hero_container__uPOx8:before, body[data-theme=system-light] .hero_container__uPOx8:before {
        background: unset
    }

    .hero_container__uPOx8:after {
        display: none;
        background: none
    }
}

.hero_wrapper__ZFkax {
    width: 100%;
    max-width: 1536px;
    border-radius: 0
}

.hero_content__Z8Otn, .hero_wrapper__ZFkax {
    margin: 0 auto;
    justify-content: center;
    overflow: hidden
}

.hero_content__Z8Otn {
    display: flex;
    width: calc(100% - 2rem);
    max-width: 1312px;
    flex-direction: column
}

@media only screen and (min-width: 768px) {
    .hero_content__Z8Otn {
        width: calc(100% - 4rem)
    }
}

@media only screen and (min-width: 1200px) {
    .hero_content__Z8Otn {
        width: calc(100% - 128px)
    }
}

@media only screen and (min-width: 768px) {
    .hero_content__Z8Otn {
        display: grid;
        grid-template-columns:repeat(6, minmax(0, 1fr));
        grid-column-gap: 1rem;
        column-gap: 1rem;
        width: calc(100% - 2rem);
        max-width: 1312px;
        margin: 0 auto
    }
}

@media only screen and (min-width: 768px)and (min-width: 768px) {
    .hero_content__Z8Otn {
        width: calc(100% - 4rem);
        grid-template-columns:repeat(12, minmax(0, 1fr))
    }
}

@media only screen and (min-width: 768px)and (min-width: 1200px) {
    .hero_content__Z8Otn {
        width: calc(100% - 128px)
    }
}

@media only screen and (min-width: 768px)and (min-width: 1400px) {
    .hero_content__Z8Otn {
        column-gap: 2rem
    }
}

.hero_hero__7urzP {
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
    gap: 1rem
}

@media only screen and (min-width: 768px) {
    .hero_hero__7urzP {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns:subgrid;
        grid-gap: 1rem;
        gap: 1rem
    }
}

.hero_hero__title__KiEKv {
    grid-column: 1/-1;
    width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: center;
    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--color_fg_bold);
    font-feature-settings: lining-nums proportional-nums;
    font-variant-numeric: lining-nums proportional-nums;
    padding: .5rem 0;
    text-align: center
}

html[lang=ja] .hero_hero__title__KiEKv {
    line-height: 2.375rem
}

.hero-banner-modal_modal__5xKiy {
    position: relative;
    display: block;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    grid-column: span 6;
    font-size: .875rem;
    line-height: 1.375rem;
    border-radius: .25rem;
    letter-spacing: .21px;
    padding: .875rem;
    height: 100%
}

.hero-banner-modal_modal__5xKiy strong {
    font-weight: 500;
    text-decoration: underline
}

.hero-banner-modal_modal__5xKiy[data-state=closed] {
    height: -moz-fit-content;
    height: fit-content
}

.hero-banner-modal_modal__5xKiy[data-type=info] {
    background-color: var(--color_bg_state_info_subtle);
    color: var(--color_fg_on_state_info_subtle)
}

.hero-banner-modal_modal__5xKiy[data-type=info] .hero-banner-modal_modal__control__On9rs, .hero-banner-modal_modal__5xKiy[data-type=info] strong {
    color: var(--color_fg_on_state_info_subtle)
}

.hero-banner-modal_modal__5xKiy[data-type=warning] {
    background: var(--color_bg_state_caution_subtle);
    color: var(--color_fg_on_state_caution_subtle)
}

.hero-banner-modal_modal__5xKiy[data-type=warning] .hero-banner-modal_modal__control__On9rs, .hero-banner-modal_modal__5xKiy[data-type=warning] strong {
    color: var(--color_fg_on_state_caution_subtle)
}

.hero-banner-modal_modal__control__On9rs {
    position: absolute;
    top: .25rem;
    right: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    height: 1rem;
    width: 1rem
}

.hero-banner-modal_modal__control__On9rs[data-state=open] .hero-banner-modal_modal__controlIcon__ESgrd {
    display: inline-block;
    transform: rotate(45deg)
}

.hero-banner-modal_modal__control__On9rs:focus-visible {
    outline: solid 1px var(--color_border_focus);
    outline-offset: .125rem;
    border-radius: .125rem
}

.hero-banner-modal_modal__text__1bblU {
    grid-column: 1/-1;
    width: 100%;
    gap: 1rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400
}

html[lang=ja] .hero-banner-modal_modal__text__1bblU {
    line-height: 1.75rem
}

.hero-banner-modal_modal__text__1bblU a {
    text-decoration: underline;
    font-weight: 500
}

.hero-banner-modal_modal__text__1bblU a:focus-visible {
    outline: solid 1px var(--color_border_focus);
    outline-offset: .125rem;
    border-radius: .125rem
}

.hero-banner-modal_modal__cta__QKTRw {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

@media only screen and (min-width: 400px) {
    .hero-banner-modal_modal__cta__QKTRw {
        flex-direction: row;
        gap: 1.5rem
    }
}

.hero-banner-modal_modal__ctaLink__p2OwB {
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    align-self: stretch;
    border-radius: .375rem;
    text-decoration: underline;
    font-size: .875rem;
    line-height: 1.375rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: .2px
}

html[lang=ja] .hero-banner-modal_modal__ctaLink__p2OwB {
    line-height: 1.875rem
}

@media only screen and (min-width: 768px) {
    .hero-banner-modal_modal__ctaLink__p2OwB {
        width: -moz-fit-content;
        width: fit-content
    }
}

.hero-banner-modal_modal__ctaLink__p2OwB:focus-visible {
    outline: solid 1px var(--color_border_focus);
    outline-offset: .125rem;
    border-radius: .125rem
}