/* =============================================================================
   CALL TO ACTION
   ============================================================================= */

/* -----------------------------------------------------------------------------
   BUTTON
----------------------------------------------------------------------------- */

.waitlist-button{

    width:min(420px,90%);

    height:72px;

    border:none;

    border-radius:10px;

    background:var(--gold);

    box-shadow:0 12px 30px rgba(0,0,0,.28);

    color:var(--ink);

    font-family:var(--font-body);

    font-size:1.25rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    cursor:pointer;

    transition:
        transform var(--speed-fast),
        background var(--speed-fast),
        color var(--speed-fast);

}


/* -----------------------------------------------------------------------------
   HOVER
----------------------------------------------------------------------------- */

.waitlist-button:hover{

    transform:translateY(-2px);

}


/* -----------------------------------------------------------------------------
   ACTIVE
----------------------------------------------------------------------------- */

.waitlist-button:active{

    transform:translateY(0);

}


/* -----------------------------------------------------------------------------
   FOCUS
----------------------------------------------------------------------------- */

.waitlist-button:focus-visible{

    outline:3px solid var(--paper);

    outline-offset:4px;

}


/* -----------------------------------------------------------------------------
   DESKTOP
----------------------------------------------------------------------------- */

@media (min-width:769px){

    .cta{

        padding:2rem 0 3rem;

    }

}


/* -----------------------------------------------------------------------------
   MOBILE
----------------------------------------------------------------------------- */

@media (max-width:768px){

    .cta{

        padding:1.5rem 1rem 2rem;

    }

    .waitlist-button{

        width:100%;

        max-width:420px;

        font-size:1rem;

        letter-spacing:.15em;

    }

}

@media (max-width:768px){

    .mobile-cta {

    display:flex;

    justify-content:center;

    padding:0.5rem 1rem 2.5rem;

    background:var(--ink);

}


    .mobile-cta .waitlist-button {

        width:100%;

        max-width:420px;

        height:72px;

        border-radius:10px;

    }

}