/*
 * Site navigation — exact match to https://x.ai/ header
 * Structure: logo | muted links | outline CTA + solid CTA | mobile menu
 */

/* Brand font — loaded here so every page with site-nav gets the same face */
@font-face {
    font-family: universalSans;
    src: url(/fonts/UniversalSans_Text_400.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: universalSans;
    src: url(https://x.ai/_next/static/media/UniversalSans_Text_550-s.p.0v0vvoupxwn1c.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: universalSans;
    src: url(https://x.ai/_next/static/media/UniversalSans_Text_550-s.p.0v0vvoupxwn1c.woff2) format("woff2");
    font-weight: 550;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "universalSans Fallback";
    src: local(Arial);
    ascent-override: 89.92%;
    descent-override: 22.73%;
    line-gap-override: 0%;
    size-adjust: 105.67%;
}

:root {
    --nav-rem: 8px;
    --nav-circle-size: calc(5 * var(--nav-rem));
    --nav-logo-square-size-ratio: 0.2307692308;
    --nav-logo-stack-gap-ratio: 0.0673076923;
    --site-header-h: 64px;
    --site-header-height: var(--site-header-h);
    --root-header-item-height: var(--site-header-h);
    --library-sticky-top: var(--site-header-height);
    /* Flush under the solid nav border (no +1px gap for a second hairline) */
    --library-filters-top: var(--site-header-height);
    --color-white: 0 0% 100%;
    --background: var(--color-white);
    --site-header-bg: hsl(var(--background) / 0.85);
    --site-header-blur: 12px;
    /* x.ai nav breakpoint (custom "nav:" media) */
    --site-nav-bp: 1024px;
    /* Single brand face for the whole site (UI, headlines, body) */
    --font-universal-sans: "universalSans", "universalSans Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-site-nav-brand: var(--font-universal-sans);
}

body {
    font-family: var(--font-universal-sans);
}

.site-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: auto;
    min-height: var(--site-header-height);
    box-sizing: border-box;
    background: var(--site-header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(var(--site-header-blur));
    backdrop-filter: saturate(180%) blur(var(--site-header-blur));
    font-size: 16px;
    display: block;
}

/*
 * x.ai container: mx-auto w-full px-4 lg:px-6 xl:max-w-7xl relative
 * Equal left/right inset so logo and right actions align with page content.
 */
.site-header__inner {
    position: relative;
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
    padding-inline: var(--stripe-content-margin, 1rem);
    box-sizing: border-box;
}

/* Standalone pages (no stripe rail): apply x.ai max width */
body:not(:has(.stripe-shell)) .site-header__inner {
    padding-inline: 1rem;
}

@media (min-width: 1024px) {
    body:not(:has(.stripe-shell)) .site-header__inner {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 1280px) {
    body:not(:has(.stripe-shell)) .site-header__inner {
        max-width: 80rem; /* xl:max-w-7xl */
    }
}

/*
 * x.ai bottom edge:
 *   class="bg-border/50 pointer-events-none absolute inset-x-0 bottom-0 h-px"
 *   style="opacity: 0;" at page top; fades in on scroll
 * Solid 1px — never a dashed stripe guide.
 */
.site-header__border {
    pointer-events: none;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    z-index: 3;
    background-color: hsl(var(--border, var(--color-dove, 222 19% 86%)) / 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.site-header.is-scrolled .site-header__border,
.site-header__border.is-visible {
    opacity: 1;
}

/* x.ai: nav.flex items-center justify-between gap-4 py-4 nav:h-16 */
.site-nav {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: var(--site-header-height);
    padding-block: 1rem; /* py-4 */
    box-sizing: border-box;
    background: transparent;
    font-family: var(--font-universal-sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    color: hsl(var(--primary, 0 0% 4%));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1024px) {
    .site-nav {
        height: 4rem; /* nav:h-16 */
        padding-block: 0;
    }
}

/* Inner row used on pages that still wrap content in ._main_oj95i_54 */
._main_oj95i_54 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: inherit;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: inherit;
    color: inherit;
    position: relative;
    z-index: 1;
}

._main_oj95i_54 > a,
.site-nav > a.site-nav-logo,
a._logoLink_oj95i_34 {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}

.site-nav-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo-mark {
    --logo-size: var(--nav-circle-size);
    --logo-square: calc(var(--logo-size) * var(--nav-logo-square-size-ratio));
    --logo-stack-gap: calc(var(--logo-size) * var(--nav-logo-stack-gap-ratio));
    --logo-border-pad: calc(var(--logo-size) * 0.05);
    position: relative;
    width: var(--logo-square);
    height: calc(var(--logo-square) * 3 + var(--logo-stack-gap) * 2);
    flex-shrink: 0;
    overflow: visible;
    box-sizing: content-box;
    padding: var(--logo-border-pad);
    border: 1.5px solid #000;
    border-radius: 0;
}

.site-logo-scale {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-logo-scale .stack {
    display: flex;
    flex-direction: column;
    gap: var(--logo-stack-gap);
    align-items: center;
}

.site-logo-scale .square {
    width: calc(var(--logo-size) * 0.2307692308);
    height: calc(var(--logo-size) * 0.2307692308);
    border-radius: calc(var(--logo-size) * 0.0230769231);
    flex-shrink: 0;
}

.site-logo-scale .green { background-color: #22c55e; }
.site-logo-scale .red { background-color: #ef4444; }
.site-logo-scale .blue { background-color: #3b82f6; }

/*
 * Brand wordmark — identical on every page (do not override per-page).
 * 16px / 500 / Universal Sans / -0.02em tracking
 */
.site-nav-brand {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    font-family: var(--font-site-nav-brand);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: hsl(var(--primary, 0 0% 4%));
}

/* ── Center / grow links (x.ai: ml-6 hidden flex-grow nav:block) ── */
.site-nav-links,
._buttonGroup_oj95i_143 {
    display: none;
    position: relative;
    flex-grow: 1;
    margin-left: 1.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .site-nav-links,
    ._buttonGroup_oj95i_143 {
        display: flex;
    }
}

.site-nav-links ul,
._buttonGroup_oj95i_143 {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* gap-1 */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* When _buttonGroup holds both links and actions, keep actions on the right */
._buttonGroup_oj95i_143 {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.25rem;
}

._buttonGroup_oj95i_143 .site-nav-actions {
    margin-left: auto;
}

/*
 * x.ai link:
 * text-primary/50 hover:text-primary flex items-center gap-1 px-3 py-1.5
 * text-sm font-medium transition-colors
 */
.site-nav-link,
._underlineOnHover_oj95i_156 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem; /* py-1.5 px-3 */
    font-family: inherit;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: normal;
    white-space: nowrap;
    text-decoration: none;
    color: hsl(var(--primary, 0 0% 4%) / 0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-font-smoothing: antialiased;
}

.site-nav-link:link,
.site-nav-link:visited,
._underlineOnHover_oj95i_156:link,
._underlineOnHover_oj95i_156:visited {
    color: hsl(var(--primary, 0 0% 4%) / 0.5);
    text-decoration: none;
}

/* Full black on hover (must follow :link/:visited so it wins) */
.site-nav-link:hover,
.site-nav-link:link:hover,
.site-nav-link:visited:hover,
.site-nav-link:focus-visible,
._underlineOnHover_oj95i_156:hover,
._underlineOnHover_oj95i_156:link:hover,
._underlineOnHover_oj95i_156:visited:hover,
._underlineOnHover_oj95i_156:focus-visible {
    color: #000;
    text-decoration: none;
    outline: none;
}

/* No Neuralink underline-on-hover */
.site-nav-link:after,
._underlineOnHover_oj95i_156:after {
    display: none;
    content: none;
}

.site-nav-link__chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

/* ── Right actions (text links + CTAs pin to the right) ── */
.site-nav-actions {
    display: inline-flex;
    align-items: center;
    /* Uniform 12px between every control (links, Video Library, cart) */
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: auto;
}

/* Desktop-only text links when placed in the right action cluster */
.site-nav-link--desktop {
    display: none;
}

@media (min-width: 1024px) {
    .site-nav-link--desktop {
        display: flex;
    }
}

/* Links in the action row: keep hit area, tighter padding so visual gaps match buttons */
.site-nav-actions .site-nav-link {
    padding-inline: 0.5rem; /* 8px — with 12px gap ≈ even rhythm next to pills */
}

/* Cart matches outline pill footprint so spacing reads evenly */
.site-nav-actions .site-nav-cart {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    box-sizing: border-box;
}

/*
 * x.ai outline button (Contact Sales):
 * rounded-full ring-1 ring-primary/15 transparent hover:bg-primary/5 text-primary
 * px-4 py-2 text-sm font-medium
 */
.site-nav-btn,
.site-nav ._button_2k6ek_16,
._button_2k6ek_16 {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border: 0;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    letter-spacing: normal;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    /* outline variant defaults (Contact Sales) */
    background: transparent;
    color: hsl(var(--primary, 0 0% 4%));
    box-shadow: 0 0 0 1px hsl(var(--primary, 0 0% 4%) / 0.15);
}

.site-nav-btn:hover,
.site-nav ._button_2k6ek_16:hover,
._button_2k6ek_16:hover {
    background: hsl(var(--primary, 0 0% 4%) / 0.05);
    color: hsl(var(--primary, 0 0% 4%));
    text-decoration: none;
}

.site-nav-btn:focus-visible,
._button_2k6ek_16:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* x.ai solid primary (Try for free) */
.site-nav-btn--primary {
    background: hsl(var(--primary, 0 0% 4%));
    color: hsl(var(--background, 0 0% 100%));
    box-shadow: none;
}

.site-nav-btn--primary:hover {
    background: hsl(var(--primary, 0 0% 4%));
    color: hsl(var(--background, 0 0% 100%));
    filter: brightness(0.9);
}

/* Outline stays outline on hover (already set) */
.site-nav-btn--outline:hover {
    filter: none;
}

/* Desktop: show outline CTAs in nav row */
@media (min-width: 1024px) {
    .site-nav-btn--desktop,
    .site-nav ._button_2k6ek_16,
    ._button_2k6ek_16 {
        display: inline-flex;
    }
}

@media (max-width: 1023px) {
    .site-nav-btn--desktop,
    .site-nav ._button_2k6ek_16,
    ._button_2k6ek_16 {
        display: none;
    }
}

._button_2k6ek_16 .navigation-button-measure {
    display: inline-block;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

._button_2k6ek_16 .navigation-item__sign-in__mask {
    display: none !important;
}

._button_1l7i9_1:link,
._button_1l7i9_1:visited {
    color: inherit;
}

._button_1l7i9_1:hover {
    color: inherit;
}

/* Hide legacy Neuralink link visibility rules — use site-nav-links media query */
@media screen and (max-width: 1023px) {
    ._buttonGroup_oj95i_143 ._underlineOnHover_oj95i_156 {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    ._buttonGroup_oj95i_143 ._underlineOnHover_oj95i_156 {
        display: flex;
    }
}

/* Cart icon */
.site-nav-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.5rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    color: hsl(var(--primary, 0 0% 4%));
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
    box-shadow: 0 0 0 1px hsl(var(--primary, 0 0% 4%) / 0.15);
}

.site-nav-cart:hover {
    background: hsl(var(--primary, 0 0% 4%) / 0.05);
}

.site-nav-cart svg {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-nav-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    border-radius: 9999px;
}

.site-mobile-menu-signout {
    color: #fff;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: 1.125rem;
    cursor: pointer;
    padding: 0;
}

/*
 * x.ai mobile menu button:
 * rounded-full ring-1 ring-primary/15 aspect-square visible nav:hidden
 */
.site-nav-toggle {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: hsl(var(--primary, 0 0% 4%));
    box-shadow: 0 0 0 1px hsl(var(--primary, 0 0% 4%) / 0.15);
    cursor: pointer;
    z-index: 1001;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.site-nav-toggle:hover {
    background: hsl(var(--primary, 0 0% 4%) / 0.05);
}

.site-nav-toggle:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* 3-line drawer icon (x.ai) via spans */
.site-nav-toggle span {
    position: absolute;
    left: 50%;
    width: 1rem;
    height: 1.5px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transform: translateX(-50%);
}

.site-nav-toggle span:nth-child(1) {
    top: calc(50% - 5px);
    transform: translateX(-50%) translateY(-50%);
}

.site-nav-toggle span:nth-child(2) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.site-nav-toggle span:nth-child(3) {
    top: calc(50% + 5px);
    transform: translateX(-50%) translateY(-50%);
}

/* 2-span fallback (existing markup uses 2 spans) */
.site-nav-toggle span:first-child:nth-last-child(2) {
    top: calc(50% - 3.5px);
    transform: translateX(-50%) translateY(-50%);
}

.site-nav-toggle span:last-child:nth-child(2) {
    top: calc(50% + 3.5px);
    transform: translateX(-50%) translateY(-50%);
}

.site-nav-toggle.is-open {
    color: #fff;
    box-shadow: 0 0 0 1px hsl(0 0% 100% / 0.2);
    background: transparent;
}

.site-nav-toggle.is-open span:first-child {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.site-nav-toggle.is-open span:last-child {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

.site-nav-toggle.is-open span:nth-child(2):not(:last-child) {
    opacity: 0;
}

@media (min-width: 1024px) {
    .site-nav-toggle {
        display: none;
    }
}

/* Mobile full-screen menu */
.site-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    background: #000;
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 1rem;
    overflow: hidden;
}

.site-mobile-menu.is-open {
    right: 0;
}

.site-mobile-menu-logo {
    position: absolute;
    top: 1.25rem;
    left: 1rem;
    margin: 0;
    padding: 0;
    font-family: var(--font-site-nav-brand);
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    font-synthesis: none;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    -webkit-font-smoothing: antialiased;
    color: #fff;
}

.site-mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    text-align: center;
}

.site-mobile-menu li {
    margin: 20px 0;
    font-size: 1.125rem;
}

.site-mobile-menu a {
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-weight: 500;
    transition: opacity 0.15s ease;
}

.site-mobile-menu a:hover {
    opacity: 0.7;
}

@media (min-width: 1024px) {
    .site-mobile-menu {
        display: none;
    }
}