@layer components{
    .mobile.site-header:has([aria-controls="mobile-menu"]:not([aria-expanded="true"])) #mobile-menu {
      display: none;
    }
    .site-header__nav{
        max-width: 76rem;
        margin: 0 auto;
        padding: 1.5rem 2rem;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1rem;
    }

    .site-header__left{
        display:flex;
        align-items:center;
        gap: .75rem;
        list-style:none;
    }

    .site-header__logo-link{
        display:inline-flex;
        border-radius: 9999px;
    }

    .site-header__logo{
        border-radius:0;
        display:block;
    }

    .main-navigation{
        display:flex;
        list-style:none;
        gap:.5rem;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
    }

    .login-and-signup{
        justify-self:end;
        display:flex;
        list-style:none;
        gap:1rem;
        align-items:center;
    }

    .login-and-signup > *{
        white-space: nowrap;
    }

    @media (width <= 1024px){
        header.desktop{ display:none; }
    }

    header.mobile .site-header__nav{
        display:flex;
        justify-content:space-between;
        padding:1.5rem;
    }

    header.mobile .site-header__nav--mobile{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 1rem;
    }

    .site-header__mobile-left{
        display:flex;
        align-items:center;
        gap: .75rem;
    }

    .site-header__mobile-right{
        display:flex;
        align-items:center;
        gap: .75rem;
    }

    @media (width > 1024px){
        header.mobile{ display:none; }
    }

    .site-header__menu-button{
        appearance:none;
        border:0;
        background:transparent;
        border-radius:.5rem;
        cursor:pointer;
    }

    .chevron{
        height: 1.5em;
        width: 1.5em;
        vertical-align: middle;
    }

    .button{
        display:inline-flex;
        align-items:center;
        gap:.25rem;
        border-width:2px;
        border-style:solid;
        border-radius: 1lh;
        font-size:.875rem;
        line-height:1.25rem;
        padding:.35rem 1.5rem;
        text-decoration:none;
        border-color: var(--color-elk-blue-500);
        color: var(--color-elk-blue-500);
        background: transparent;
        cursor:pointer;
    }

    .button:hover{
        border-color: var(--color-elk-blue-700);
        background-color: var(--color-elk-blue-700);
        color:#fff;
    }

    .primary.button{
        border-color: var(--color-elk-blue-500);
        background-color: var(--color-elk-blue-500);
        color:#fff;
    }

    .primary.button:hover{
        border-color: var(--color-elk-blue-700);
        background-color: var(--color-elk-blue-700);
    }

    .main-navigation .menu.button{
        border-radius: 1lh;
        padding: 0 .75rem;
        font-weight:600;
        line-height:1.5rem;
        border-width: 0;
        background: transparent;
        color: var(--color-base-900);
    }

    .main-navigation .menu.button:hover{
        background: var(--color-elk-blue-500);
        color: var(--color-base-50);
    }

    .is-hidden{ display:none; }

    .lang-menu{ position:relative; }
    .lang-menu__btn{
        border:0;
        background:transparent;
        padding: .25rem .5rem;
        border-radius: 9999px;
        display:inline-flex;
        align-items:center;
        gap:.35rem;
        color: var(--color-base-900);
    }
    .lang-menu__btn:hover{
        background: var(--color-elk-blue-50);
        cursor: pointer;
    }
    .lang-menu__flag{ width: 24px; height: 24px; border-radius:0; display:block; }

    .dropdown{
        position:absolute;
        top: calc(100% + .75rem);
        left: 0;
        width: 11rem;
        background:#fff;
        border-radius: .5rem;
        box-shadow: 0 12px 30px rgba(0,0,0,.12);
        overflow:hidden;
        z-index: 50;
    }
    .dropdown__item{
        background: none;
        border: none;
        width: 91%;
        display:flex;
        align-items:center;
        gap:.5rem;
        padding: .5rem;
        margin: .5rem;
        border-radius: .375rem;
        font: inherit;
        font-size: .875rem;
        color: var(--color-base-900);
        cursor: pointer;
    }
    .dropdown__item:hover{ background: var(--color-elk-blue-100); }
    .dropdown__flag{ width: 24px; height: 24px; border-radius:0; }

    .site-header__dropdown{ position:relative; }

    .mega{
        position:absolute;
        top: calc(100% + .75rem);
        left: 50%;
        transform: translateX(-50%);
        background:#fff;
        border-radius: .5rem;
        box-shadow: 0 14px 40px rgba(0,0,0,.12);
        border: 1px solid rgba(0,0,0,.06);
        padding: 1rem;
        z-index: 60;
        width: min(56rem, calc(100vw - 2rem));
    }

    .mega-two{
        position:absolute;
        top: calc(100% + .75rem);
        left: 50%;
        transform: translateX(-50%);
        background:#fff;
        border-radius: .5rem;
        box-shadow: 0 14px 40px rgba(0,0,0,.12);
        border: 1px solid rgba(0,0,0,.06);
        padding: 1rem;
        z-index: 60;
        width: min(38rem, calc(100vw - 2rem));
    }


    .mega__grid{
        display:grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .mega__grid--two{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width > 1024px) {

        .mega__col {
            position: relative;
        }

        .mega__col:not(:first-child) {
            border-left: 1px solid rgba(0, 0, 0, .08);
            padding-left: 1.5rem; /* matches your grid gap */
        }

    }

    .mega__title{
        margin: 0 0 .5rem 0;
        padding: 0 0 .5rem .75rem;
        font-size: .875rem;
        font-weight: 700;
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .mega__list{
        list-style:none;
        padding: 0;
        margin: 0;
    }

    .mega__item{
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .75rem;
        border-radius: .5rem;
        color: var(--color-base-900);
    }
    .mega__item:hover{ background: var(--color-elk-blue-100); }

    .mega__item-icon{
        width: 2rem;
        height: 2rem;
        flex-shrink: 0;
    }
    .mega__item-text{
        flex: 1;
    }

    .mega__item-title{
        display:block;
        text-transform: uppercase;
        font-size: .75rem;
        font-weight: 700;
        color: var(--color-elk-blue-900);
        letter-spacing: .02em;
    }

    .mega__item-desc{
        display:block;
        margin-top: .25rem;
        font-size: .75rem;
        line-height: 1.35;
    }

    .mega__item.customer-stories{
        background-color: var(--color-elk-green-100);
    }

    .mega__item.customer-stories .mega__item-title{
        color: var(--color-elk-green-900);
    }

    .mega--mobile{
        position:static;
        transform:none;
        width:auto;
        box-shadow:none;
        border: 0;
        padding: .5rem 0 0 0;
        background: transparent;
    }

    .mobile-menu{
        padding: .75rem 1rem 1rem 1rem;
        border-top: 1px solid rgba(0,0,0,.08);
    }

    .mobile-menu__links{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-direction:column;
        gap: .5rem;
    }

    .mobile-menu__link{
        display:block;
        padding: .5rem .75rem;
        border-radius: 9999px;
        font-size: .875rem;
        font-weight: 700;
        color: var(--color-base-900);
    }

    .mobile-menu__link:hover{
        background: var(--color-elk-blue-500);
        color: var(--color-base-50);
    }

    .mobile-menu__toggle{
        justify-content:space-between;
        border:0;
        background:transparent;
        padding: .5rem .75rem;
        border-radius: 9999px;
        font-size: .875rem;
        font-weight: 700;
        color: var(--color-base-900);
        display: flex;
        cursor: pointer;
    }

    .mega--mobile .mega__grid {
        grid-template-columns: 1fr;
    }

    .mobile-menu__toggle:hover{
        background: var(--color-elk-blue-500);
        color: var(--color-base-50);
    }

    .mobile-menu__auth{
        display:flex;
        flex-direction: column;
        gap: .75rem;
        padding-top: 1rem;
    }

    .mobile-menu__auth .button{
        justify-content: center;
        padding: .5rem .5rem;
        border-radius: 9999px;
    }
}