/*
 * The floating nav (light, or dark over a black hero: .nav.dark), its two
 * dropdowns, the mobile sheet and the black footer with the language links.
 */
@layer marketing {
    .mk {
        & .nav {
            position: fixed;
            z-index: 50;
            top: calc(14px + env(safe-area-inset-top, 0px));
            left: var(--gl);
            right: var(--gr);
            max-width: 1160px;
            margin: 0 auto;
            background: rgb(255 255 255 / 0.78);
            backdrop-filter: blur(18px) saturate(1.4);
            border: 1px solid rgb(14 17 23 / 0.08);
            border-radius: 16px;
            box-shadow: 0 12px 32px -18px rgb(14 17 23 / 0.22);
            transition:
                top 0.5s var(--out),
                max-width 0.6s var(--out),
                background 0.3s,
                box-shadow 0.3s,
                border-color 0.3s;
        }
        & .nav.scrolled {
            top: calc(10px + env(safe-area-inset-top, 0px));
            max-width: 1000px;
            background: rgb(255 255 255 / 0.9);
            box-shadow: 0 18px 44px -20px rgb(14 17 23 / 0.3);
        }
        & .nav .wrap {
            display: flex;
            align-items: center;
            gap: 24px;
            height: 58px;
            max-width: none;
            padding: 0 9px 0 18px;
        }
        & .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: -0.03em;
            text-decoration: none;
            transition: color 0.3s;
        }
        & .logo i {
            position: relative;
            width: 18px;
            height: 18px;
            border-radius: 5px;
            background: var(--text);
        }
        & .logo i::after {
            content: "";
            position: absolute;
            left: 4px;
            right: 4px;
            bottom: 4px;
            height: 3px;
            border-radius: 2px;
            background: #fff;
        }
        & .menu {
            display: flex;
            gap: 4px;
            align-items: center;
        }
        & .menu > a,
        & .menu > .dd > button {
            background: none;
            border: 0;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 15px;
            color: var(--muted);
            text-decoration: none;
            cursor: pointer;
            transition:
                color 0.2s,
                background 0.2s;
        }
        & .menu > a:hover,
        & .menu > .dd > button:hover,
        & .menu > a.on,
        & .menu > .dd.on > button {
            color: var(--text);
        }
        & .menu > a.on,
        & .menu > .dd.on > button {
            background: var(--bg-2);
        }
        & .dd {
            position: relative;
        }
        & .dd > button::after {
            content: "";
            display: inline-block;
            width: 6px;
            height: 6px;
            margin-left: 8px;
            border-right: 1.5px solid;
            border-bottom: 1.5px solid;
            transform: translateY(-3px) rotate(45deg);
        }
        & .dd-panel {
            position: absolute;
            top: calc(100% + 8px);
            left: -8px;
            width: 380px;
            padding: 8px;
            display: grid;
            gap: 2px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 14px;
            box-shadow: 0 24px 60px -24px rgb(14 17 23 / 0.25);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-6px);
            transition:
                opacity 0.2s,
                transform 0.3s var(--out),
                visibility 0.2s;
        }
        & .dd.open .dd-panel {
            opacity: 1;
            visibility: visible;
            transform: none;
        }
        & .dd-panel a {
            display: grid;
            gap: 2px;
            padding: 12px 14px;
            border-radius: 10px;
            text-decoration: none;
            color: var(--text);
        }
        & .dd-panel a:hover {
            background: var(--bg-2);
        }
        & .dd-panel b {
            font-weight: 500;
            font-size: 15px;
        }
        & .dd-panel span {
            font-size: 13px;
            color: var(--muted);
        }
        /* the menus with a preview: as wide as the nav, the list left, the hovered item's photo filling the rest */
        & .dd:has(.dd-wide) {
            position: static;
        }
        & .dd-wide {
            left: 0;
            right: 0;
            width: auto;
            grid-template-columns: 300px minmax(0, 1fr);
            grid-template-rows: 420px;
            gap: 10px;
            padding: 10px;
            border-radius: 18px;
        }
        & .dd-list {
            display: grid;
            gap: 2px;
            grid-auto-rows: 1fr;
        }
        & .dd-list a {
            grid-template-columns: 1fr auto;
            align-content: center;
            align-items: center;
            padding-block: 8px;
        }
        & .dd-list a > * {
            grid-column: 1;
        }
        & .dd-list a::after {
            content: "→";
            grid-column: 2;
            grid-row: 1 / span 2;
            color: var(--faint);
            opacity: 0;
            transform: translateX(-4px);
            transition:
                opacity 0.2s,
                transform 0.3s var(--out);
        }
        & .dd-list a.on {
            background: var(--bg-2);
        }
        & .dd-list a.on::after {
            opacity: 1;
            transform: none;
            color: var(--text);
        }
        & .dd-prev {
            position: relative;
            min-height: 100%;
            border-radius: 12px;
            overflow: hidden;
            background: #0d0d0d;
        }
        & .dd-prev img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transform: scale(1.03);
            transition:
                opacity 0.45s,
                transform 0.9s var(--out);
        }
        & .dd-prev img.on {
            opacity: 1;
            transform: none;
        }
        & .nav-end {
            margin-left: auto;
            display: flex;
            gap: 8px;
            align-items: center;
        }
        & .nav-end .btn {
            height: 38px;
            padding: 0 14px;
            font-size: 14px;
        }
        & .burger {
            display: none;
            position: relative;
            width: 40px;
            height: 40px;
            border: 0;
            background: none;
            cursor: pointer;
            border-radius: 8px;
        }
        & .burger i,
        & .burger i::before,
        & .burger i::after {
            position: absolute;
            left: 11px;
            width: 18px;
            height: 1.5px;
            background: var(--text);
            transition: transform 0.3s var(--out);
        }
        & .burger i {
            top: 19px;
        }
        & .burger i::before,
        & .burger i::after {
            content: "";
            left: 0;
        }
        & .burger i::before {
            top: -6px;
        }
        & .burger i::after {
            top: 6px;
        }
        & .sheet {
            display: none;
        }

        /* over a black hero */
        & .nav.dark {
            background: rgb(0 0 0 / 0.7);
            border-color: rgb(255 255 255 / 0.1);
            box-shadow: 0 12px 32px -18px rgb(0 0 0 / 0.6);
        }
        & .nav.dark .logo,
        & .nav.dark .menu > a,
        & .nav.dark .menu > .dd > button {
            color: #f3ede6;
        }
        & .nav.dark .menu > a.on,
        & .nav.dark .menu > .dd.on > button {
            background: rgb(255 255 255 / 0.1);
        }
        & .nav.dark .logo i {
            background: #f3ede6;
        }
        & .nav.dark .logo i::after {
            background: #100d0b;
        }
        & .nav.dark .btn-line {
            color: #f3ede6;
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
        }
        & .nav.dark .btn-dark {
            background: #fff;
            color: #0a0a0a;
        }
        & .nav.dark .burger i,
        & .nav.dark .burger i::before,
        & .nav.dark .burger i::after {
            background: #f3ede6;
        }

        /* footer */
        & .footer {
            padding-block: 64px 40px;
            font-size: 14px;
            color: var(--muted);
            background: #000;
        }
        & .fgrid {
            display: grid;
            grid-template-columns: 1.5fr repeat(3, 1fr);
            gap: 32px;
        }
        & .fgrid h2 {
            margin: 0 0 14px;
            font: 500 12px / 1 var(--f-mono);
            letter-spacing: 0;
            color: rgb(243 237 230 / 0.45);
        }
        & .fgrid ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 10px;
        }
        & .fgrid a,
        & .fgrid button {
            text-decoration: none;
            background: none;
            border: 0;
            padding: 0;
            cursor: pointer;
            color: inherit;
        }
        & .fgrid a:hover,
        & .fgrid button:hover {
            color: #fff;
        }
        & .fgrid .logo {
            color: #f3ede6;
            margin-bottom: 12px;
        }
        & .fgrid .logo i {
            background: #f3ede6;
        }
        & .fgrid .logo i::after {
            background: #100d0b;
        }
        & .fgrid p {
            max-width: 32ch;
        }
        & .fbase {
            margin-top: 48px;
            padding-top: 20px;
            border-top: 1px solid rgb(255 255 255 / 0.08);
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            color: rgb(243 237 230 / 0.45);
        }
        & .fbase a {
            color: inherit;
        }
        & .langs {
            display: flex;
            gap: 4px;
        }
        & .langs a {
            padding: 2px 8px;
            border-radius: 6px;
            text-decoration: none;
        }
        & .langs a.on,
        & .langs a:hover {
            color: #fff;
            background: rgb(255 255 255 / 0.08);
        }
    }

    @media (max-width: 940px) {
        .mk {
            & .menu,
            & .nav-end .login {
                display: none;
            }
            & .burger {
                display: block;
            }
            & .sheet {
                display: block;
                position: fixed;
                z-index: 49;
                top: calc(82px + env(safe-area-inset-top, 0px));
                left: var(--gl);
                right: var(--gr);
                max-height: calc(100vh - 100px);
                overflow: auto;
                padding: 16px var(--gr) 24px var(--gl);
                border-radius: 16px;
                border: 1px solid var(--line);
                background: #fff;
                box-shadow: 0 30px 60px -30px rgb(14 17 23 / 0.35);
                opacity: 0;
                visibility: hidden;
                transition:
                    opacity 0.25s,
                    visibility 0.25s;
            }
            & .sheet.open {
                opacity: 1;
                visibility: visible;
            }
            & .sheet a {
                display: block;
                padding: 14px 4px;
                border-bottom: 1px solid var(--line);
                text-decoration: none;
                font-size: 18px;
            }
            & .sheet small {
                display: block;
                padding: 18px 4px 4px;
                font: 500 12px / 1 var(--f-mono);
                color: var(--faint);
            }
        }
    }

    /* the smallest phones: logo, start button and menu still fit in the bar */
    @media (max-width: 380px) {
        .mk .nav .wrap {
            gap: 10px;
            padding: 0 4px 0 14px;
        }
        .mk .nav-end {
            gap: 2px;
        }
        .mk .nav-end .btn {
            padding: 0 12px;
            font-size: 13px;
        }
    }

    @media (max-width: 760px) {
        .mk .fgrid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .mk .fgrid > div:first-child {
            grid-column: 1 / -1;
        }
    }
}