/* Hairline + vertical rails — parity with home / test nav (body.marketing-nav-frame). */

html:has(body.marketing-nav-frame),
html:has(body.marketing-nav-frame) body {
    scrollbar-gutter: stable;
    overflow-x: hidden;
    max-width: 100%;
}

@supports (overflow: clip) {
    html:has(body.marketing-nav-frame),
    html:has(body.marketing-nav-frame) body {
        overflow-x: clip;
    }
}

/* Don't constrain fixed/absolute elements */

body.marketing-nav-frame .home-nav-rail,
body.marketing-nav-frame .truffl-rail-dot {
    max-width: unset;
}

body.marketing-nav-frame {
    --home-nav-hairline-thickness: 1px;
    /* Trait léger — évite l’effet « barre épaisse » ; les rails verticaux suffisent aux jonctions. */
    --home-nav-hairline-color: rgba(107, 85, 196, 0.14);
    --home-layout-vw: 100vw;
    --home-nav-frame-inset: 0.15rem;
    --home-nav-frame-pull-in: clamp(0.12rem, 0.45vw, 0.32rem);
    --home-nav-rail-left: calc( var(--home-nav-frame-inset) + env(safe-area-inset-left, 0px) + var(--home-nav-frame-pull-in));
    --home-nav-rail-right: calc( var(--home-nav-frame-inset) + env(safe-area-inset-right, 0px) + var(--home-nav-frame-pull-in));
    --home-hero-rail-left: var(--home-nav-rail-left);
    --home-hero-rail-right: var(--home-nav-rail-right);
}

@supports (width: 1dvw) {
    body.marketing-nav-frame {
        --home-layout-vw: 100dvw;
    }
}

/* Mobile — rails symétriques (BullGPT px-2), contenu aligné sur les traits. */

@media (max-width: 1023px) {
    body.marketing-nav-frame {
        --home-nav-frame-inset: 0.5rem;
        --home-nav-frame-pull-in: 0;
        --home-nav-rail-left: calc(env(safe-area-inset-left, 0px) + var(--home-nav-frame-inset));
        --home-nav-rail-right: calc(env(safe-area-inset-right, 0px) + var(--home-nav-frame-inset));
        --home-hero-rail-left: var(--home-nav-rail-left);
        --home-hero-rail-right: var(--home-nav-rail-right);
    }
}

@media (min-width: 1024px) {
    body.marketing-nav-frame {
        --home-nav-frame-inset: 0.35rem;
        --home-nav-frame-pull-in: clamp(0.2rem, 0.55vw, 0.45rem);
        --home-nav-rail-left: calc( var(--home-nav-frame-inset) + env(safe-area-inset-left, 0px) + var(--home-nav-frame-pull-in));
        --home-nav-rail-right: calc( var(--home-nav-frame-inset) + env(safe-area-inset-right, 0px) + var(--home-nav-frame-pull-in));
        --home-hero-rail-left: var(--home-nav-rail-left);
        --home-hero-rail-right: var(--home-nav-rail-right);
    }
}

body.marketing-nav-frame .nav-shell {
    position: relative;
    z-index: 2;
}

/* Trait sous la nav : largeur explicite = viewport layout − deux rails — même axe que les verticaux, pas de débordement. */

body.marketing-nav-frame .nav-lower-rule {
    box-sizing: border-box;
    display: block;
    height: var(--home-nav-hairline-thickness);
    min-height: 0;
    margin: 0;
    margin-left: var(--home-nav-rail-left);
    margin-right: var(--home-nav-rail-right);
    border: 0;
    background: var(--home-nav-hairline-color);
    width: auto;
    max-width: calc(100% - var(--home-nav-rail-left) - var(--home-nav-rail-right));
    position: relative;
    z-index: 1;
}

/* Pas de pattes ::before/::after : elles doublaient visuellement le rail vertical (effet « coin épais » / bug d’alignement). */

/* Rails verticaux : fixed viewport — hors de ``.nav-root`` en HTML : ``backdrop-filter``
   sur ``.nav-root--scrolled`` crée un bloc de contenance et clipperait les fixed enfants
   à la hauteur de la barre. Sous la nav (z-index 50), au-dessus du contenu. */

body.marketing-nav-frame .home-nav-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--home-nav-hairline-thickness);
    min-width: 0;
    max-width: var(--home-nav-hairline-thickness);
    height: auto;
    pointer-events: none;
    z-index: 49;
    box-shadow: none;
    background: var(--home-nav-hairline-color);
}

body.marketing-nav-frame .home-nav-rail--left {
    left: var(--home-nav-rail-left);
}

body.marketing-nav-frame .home-nav-rail--right {
    right: var(--home-nav-rail-right);
}

/* ── Intersection squares — injected via JS (truffl-rail-dot class) ── */

/* position:absolute + document coords = squares stay anchored on mobile scroll */

.truffl-rail-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #6B55C4;
    pointer-events: none;
    z-index: 100;
    transform: translate(-2px, -2px);
}

/* Skip link — visible on keyboard focus only */

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10001;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    background: #fafafa;
    color: #0a0a0f;
    font: 600 0.875rem/1.25 var(--font, Inter, ui-sans-serif, system-ui, sans-serif);
    text-decoration: none;
    box-shadow: 0 0 0 2px #218afd;
    transform: translateY(calc(-100% - 1rem));
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: none;
}