@font-face {
    font-family: 'Unbounded';
    src: url('/assets/fonts/Unbounded-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Onest';
    src: url('/assets/fonts/Inter_24pt-Regular.ttf') format('truetype');
    font-weight: 400 500;
    font-display: swap;
}

:root {
    --home-ink: #092044;
    --home-accent: #ff6333;
    --home-surface: rgba(247, 247, 248, .94);
    --home-backdrop: #d9d8ff;
    --home-card-radius: 40px;
}

.access-page {
    min-height: 1092px;
    overflow: auto;
    background: #fff;
    color: var(--home-ink);
    font-family: 'Onest', sans-serif;
}

.brand-logo {
    width: min(466.66px, 72vw);
    height: auto;
    margin-top: 132px;
}

.access-stage {
    width: min(1328px, calc(100% - 32px));
    min-height: 682px;
    margin-top: 45px;
    padding: 101px 32px 78px;
}

.access-stage > .row {
    --bs-gutter-x: 32px;
}

.access-card-wrap {
    max-width: 618px;
}

.access-illustration {
    display: block;
    height: 167px;
    width: auto;
    margin: -10px 25px -94px auto;
    transform: rotate(5.87deg);
    z-index: 9;
}

.access-card-wrap:nth-child(2) .access-illustration {
    height: 176px;
    margin-right: 17px;
    margin-bottom: -103px;
    transform: rotate(9.68deg);
}

.access-card {
    min-height: 380px;
    padding: 92px 40px 40px;
    border: 0;
    border-radius: var(--home-card-radius);
    background: var(--home-surface);
    backdrop-filter: blur(10px);
}

.access-title {
    margin-bottom: 23px;
    font-family: 'Unbounded', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.6px;
}

.access-copy {

    min-height: 64px;
    margin-bottom: 32px;
    font-size: 18px;
    line-height: 24px;
}

.btn-access {
    --bs-btn-bg: var(--home-accent);
    --bs-btn-border-color: var(--home-accent);
    --bs-btn-hover-bg: #ea5125;
    --bs-btn-hover-border-color: #ea5125;
    --bs-btn-active-bg: #d9471e;
    --bs-btn-active-border-color: #d9471e;
    padding: 15px 24px;
    border-radius: 16px;
    color: #fff;
    font-family: 'Onest', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

@media (max-width: 991.98px) {
    .access-page {
        min-height: 100vh;
    }

    .brand-logo {
        margin-top: 64px;
    }

    .access-stage {
        margin-top: 42px;
        padding: 54px 24px 72px;
        border-radius: 80px;
        transform: none;
    }

    .access-stage > .row {
        transform: none;
    }
}

@media (max-width: 575.98px) {
    .brand-logo {
        width: min(330px, 78vw);
        margin-top: 45px;
    }

    .access-stage {
        width: calc(100% - 20px);
        margin-top: 34px;
        padding: 35px 12px 50px;

    }

    .access-illustration {
        height: 125px;
        margin-bottom: -72px;
    }

    .access-card-wrap:nth-child(2) .access-illustration {
        height: 128px;
    }

    .access-card {
        min-height: 350px;
        padding: 75px 25px 25px;
        border-radius: 30px;
    }

    .access-title {
        font-size: 25px;
    }

    .access-copy {
        font-size: 16px;
    }
}