a.logo-link {height: 28px;}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: .4px;}

.brand .logo {
    width: 178px;
    height: 28px;
    background: url(../images/nav-logo.svg);
    background-repeat: no-repeat;
    display: inline-block;
    background-position: center;}

    .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;}

    header.app-header {
    top: 0;
    z-index: 50;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px 0 19px;
    background: radial-gradient(ellipse farthest-corner at 0 0, #2e2e2e 0%, #000 100%);}

    header.app-header .hamburger {
    margin-left: auto;}

    .hamburger {
    appearance: none;
    border: 0;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #35c79c;
    background: radial-gradient(circle, rgba(10, 38, 30, 1) 0%, rgba(10, 38, 30, 0) 87%);}

    nav.utility {
    position: absolute;
    right: 8px;
    top: calc(56px + 8px);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    min-width: 200px;
    padding: 14px 12px;
    display: none;
    z-index: 25;
    font-family: 'transducer';
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    width: calc(100% - 16px);
    height: 100%;
    background: radial-gradient(circle at 100% 0%, #212121 0%, rgba(0, 0, 0, 0) 44%), radial-gradient(circle at 50% 100%, #202b29 0%, #171717 60%, #181818 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%;
    background-position: 100% 0%, 50% 100%;}

    header.app-header .nav-auth {
    display: none;
}
nav.utility a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 6px;
    color: #3ec59e;
    text-decoration: none;
}
nav.utility a:hover{background: #0000006e; color: #75ffd7;}

.kebab {
    display: grid;
    gap: 3px;
}

.kebab span {
    display: block;
    width: 23px;
    height: 3px;
    background: rgb(37 184 140);
    border-radius: .5px;
}

nav.utility.open {
    display: block;
}

element.style {
    width: max-content;
    /* overflow-wrap: break-word; */
    width: max-content;
}
.aux-btn {
    display: inline-block;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: .75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #11d9bb;
    cursor: pointer;
    background: linear-gradient(180deg, #0f2f2c 0%, #101516 100%) padding-box, linear-gradient(12deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, 0)) padding-box, linear-gradient(90deg, #008565 0%, #05ffc9 50%, #008565 100%) border-box;
    background-clip: padding-box, padding-box, border-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .5);
    width: max-content;
}
.aux-btn:hover {    background: #3ac49d;
    color: black;
    border: 1px solid #39c59d;
    box-shadow: none;}

footer {    margin: 0 auto;
    font-size: 13px;
    font-weight: 100;
    color: #949494;
    padding: 11px; z-index: 51; text-align: center;}
a.textlink {color: #03d17d; text-decoration: none;}
a.textlink:hover {text-decoration: underline;}
body {font-family: neue-haas-unica, sans-serif;
    letter-spacing: 0px;}

    .btn.primary.green {
    background: #30efa1;
    color: #000;
    border: 0;
    border-radius: 3px;
    font-family: "transducer", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    padding: 13px 18px;
    display: inline-block;
    width: min(420px, 79%);}

    .btn.primary.green.medium {
    text-align: center;
    width: 100%;}

    section#coachpicker .btn.primary.green.medium {
    margin: 9px 0px 4px;}
    

@media (min-width: 768px) {
    header.app-header .nav-auth {
        display: block;
    }
        nav.utility {
        position: static !important;
        right: auto !important;
        top: auto !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        display: flex !important;
        align-items: center;
        gap: 22px;
        padding: 0;
        justify-content: center;
    }
    nav.utility a {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #3bc49d;
        font-size:13px;
        text-decoration: none;
    }
    header.app-header .hamburger {
        display: none;
    }
}
@media (min-width: 768px) {
    nav.utility a:last-child {
        display: none;
    }
        nav.utility a:first-child {
        display: none;
    }
}