/* ════════════════════════
   NAV — shared across every page
   Markup: components/nav.html, injected by loadNav() in script.js
   Depends on page-level tokens: --side, --text, --bg, --sans,
   --btn-h, --radius-btn, --ease-out
════════════════════════ */

:root {
    --nav-h: 86px;
    /* How far the blur field extends below the nav row. This sets where the
       field ENDS — shorten it to keep the blur clear of content below. */
    --nav-ramp: 34px;
    --nav-blur-h: calc(var(--nav-h) + var(--nav-ramp));

    /* Where the falloff BEGINS. Full blur holds down to this depth, then
       tapers to nothing at the bottom of the field. Starting it inside the
       nav row (rather than at its bottom edge) buys a ramp roughly 2.5x
       longer without making the field any taller — a 12px blur needs far
       more than --nav-ramp alone to dissolve, and dissolving it faster is
       what reads as a hard edge across content scrolling underneath. */
    --nav-blur-hold: calc(var(--nav-h) * 0.7);
    --nav-blur-span: calc(var(--nav-h) * 0.3 + var(--nav-ramp));
}

/* Placeholder holds the nav's height until the component lands, so
   injecting it never shifts the page. */
#nav-container {
    min-height: var(--nav-h);
}

/* No-JS fallback. Lives inside #nav-container, so it renders only when
   scripting is off and vanishes with the placeholder when the real nav is
   injected. Static rather than sticky — the placeholder is too short to be
   a sticky containing block — and it drops the hamburger, which needs JS. */
.nav-fallback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    min-height: var(--nav-h);
    padding: 12px var(--side);
    background: var(--bg);
}

.nav-fallback-logo img {
    height: 32px;
    width: auto;
    display: block;
}

.nav-fallback-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.nav-fallback-links a {
    font-size: 15px;
    font-weight: 400;
    color: var(--text);
    padding: 6px 10px;
    border-radius: 8px;
}

.nav-fallback-links a:hover {
    background: rgba(0,0,0,0.05);
}

@media (max-width: 820px) {
    .nav-fallback { gap: 6px 16px; padding: 10px var(--side); }
    .nav-fallback-links { gap: 2px 10px; }
    .nav-fallback-links a { font-size: 14px; padding: 6px 8px; }
}

.nav-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Progressive blur: six stacked layers, each one doubling the radius of
   the one below and stopping a little higher up. The blur ramps off
   instead of ending on a single hard mask edge. */
.nav-blur-glass {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-blur-h);
    pointer-events: none;
    z-index: -1;
}

.nav-blur-glass span {
    position: absolute;
    inset: 0;
}

.nav-blur-glass span:nth-child(1) {
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + var(--nav-blur-span)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + var(--nav-blur-span)));
}

.nav-blur-glass span:nth-child(2) {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.94 * var(--nav-blur-span)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.94 * var(--nav-blur-span)));
}

.nav-blur-glass span:nth-child(3) {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.87 * var(--nav-blur-span)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.87 * var(--nav-blur-span)));
}

.nav-blur-glass span:nth-child(4) {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.78 * var(--nav-blur-span)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.78 * var(--nav-blur-span)));
}

.nav-blur-glass span:nth-child(5) {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.68 * var(--nav-blur-span)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.68 * var(--nav-blur-span)));
}

.nav-blur-glass span:nth-child(6) {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.55 * var(--nav-blur-span)));
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--nav-blur-hold), transparent calc(var(--nav-blur-hold) + 0.55 * var(--nav-blur-span)));
}

/* Tint layer: eased alpha ramp (more stops = no banding seam) */
.nav-blur {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-blur-h);
    pointer-events: none;
    z-index: -1;
    background-image: linear-gradient(
        to bottom in oklab,
        color-mix(in oklab, var(--bg) 88%, transparent) 0,
        color-mix(in oklab, var(--bg) 86%, transparent) calc(var(--nav-blur-hold) * 0.6),
        color-mix(in oklab, var(--bg) 78%, transparent) var(--nav-blur-hold),
        color-mix(in oklab, var(--bg) 58%, transparent) calc(var(--nav-blur-hold) + 0.28 * var(--nav-blur-span)),
        color-mix(in oklab, var(--bg) 34%, transparent) calc(var(--nav-blur-hold) + 0.52 * var(--nav-blur-span)),
        color-mix(in oklab, var(--bg) 14%, transparent) calc(var(--nav-blur-hold) + 0.72 * var(--nav-blur-span)),
        color-mix(in oklab, var(--bg) 4%, transparent) calc(var(--nav-blur-hold) + 0.88 * var(--nav-blur-span)),
        transparent calc(var(--nav-blur-hold) + var(--nav-blur-span))
    );
}

nav {
    position: relative;
    z-index: 1;
    width: 100%;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--side);
}

@media (prefers-reduced-transparency: reduce) {
    .nav-blur-glass { display: none; }
    .nav-blur {
        background-image: none;
        background: var(--bg);
        height: var(--nav-h);
    }
}

.nav-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-logo img {
    height: 32px;
    width: auto;
    display: block;
}

/* Beta tag beside logo — same style as pricing eyebrow pill */
.nav-beta {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 2px 8px;
    background: #fcfcfc;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    font-family: var(--sans);
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.04),
        inset 0 0.85px 0.5px 0 rgba(255,255,255,1),
        0 1px 2px 0 rgba(0,0,0,0.09),
        0 0 0 1px rgba(0,0,0,0.06);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-links a {
    font-size: 16px;
    font-weight: 400;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}

.nav-links a:hover,
.nav-links a.active { background: rgba(0,0,0,0.05); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    background: var(--text);
    color: #fdfdfd;
    font-size: 14px;
    font-weight: 500;
    padding: 0 14px;
    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;
    font-family: var(--sans);
    text-decoration: none;
    box-shadow: 0 0 1px rgba(0,0,0,0.35), -3px 3px 7px rgba(0,0,0,0.04),
                inset 2px 0 12px white, inset 0 0 0 1px white;
    transition: opacity 0.15s, transform 160ms var(--ease-out);
}

.nav-cta:hover { opacity: 0.85; }
.nav-cta:active { transform: scale(0.97); }

/* Mobile nav */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.2s var(--ease-out), opacity 0.2s;
}

/* Mobile dropdown: hidden on desktop, shown via @media (max-width: 820px) */
.mobile-menu { display: none; }

.mobile-menu-btn.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
    :root { --nav-h: 64px; --nav-ramp: 30px; }

    .nav-links, .nav-cta { display: none; }
    .mobile-menu-btn { display: block; }

    /* Mobile dropdown popover */
    .mobile-menu {
        display: block;
        position: absolute;
        top: calc(100% + 8px);
        right: var(--side);
        z-index: 0;
        min-width: 208px;
        max-height: calc(100dvh - 96px);
        padding: 4px;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: rgba(0,0,0,0.023) 0px 18px 28px 0px,
                    rgba(0,0,0,0.015) 0px 40px 56px 0px,
                    rgba(0,0,0,0.007) 0px 72px 96px 0px,
                    rgba(0,0,0,0.10) 0px 0px 0px 0.5px;
        transform-origin: top right;
        transform: scale(0.95);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s 150ms;
    }
    .mobile-menu.open {
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0s 0s;
    }

    .mobile-menu .menu-link {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 32px;
        padding: 4px 10px;
        font-family: var(--sans);
        font-size: 14px;
        font-weight: 500;
        text-align: left;
        color: var(--text);
        background: none;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 150ms ease;
    }
    .mobile-menu .menu-link:hover,
    .mobile-menu .menu-link.active { background: rgba(15,15,15,0.05); }

    @media (prefers-reduced-motion: reduce) {
        .mobile-menu, .mobile-menu.open { transition: none; }
        .mobile-menu { opacity: 0; transform: scale(1); }
        .mobile-menu.open { opacity: 1; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta:active { transform: none; }
    .mobile-menu-btn span { transition: none; }
}