/* 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.25rem;
  --home-nav-frame-pull-in: clamp(0.2rem, 0.6vw, 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);
}

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

@media (min-width: 1024px) {
  body.marketing-nav-frame {
    --home-nav-frame-inset: 0.5rem;
    --home-nav-frame-pull-in: clamp(0.3rem, 0.8vw, 0.6rem);
    --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);
}