/* ===== Site header, desktop =====
   The dark header (Oct 2026), on every marketing page. build/sync-nav.js writes
   the markup from build/nav.html and links this file last in each <head>, so it
   sits over site.css or the legacy styles.css alike. Everything is inside a
   min-width query; the phone bar and menu are at the end of this file.

   Two treatments, one bar:
   - solid (default): #0E0B1C. For pages whose hero is light, where a
     see-through bar over white reads as a muddy grey band.
   - .nav-glass: 88% opaque with a blur, for pages whose dark hero runs up
     under the bar, so bar and hero read as one surface.

   The logo is the official on-dark wordmark (white to lavender), served from a
   <picture> source at 3x; the JPG stays for phones. */
@media (min-width:769px){
  body > nav{background:#0E0B1C;border-bottom:1px solid rgba(255,255,255,.06)}
  body > nav.nav-glass{background:rgba(14,11,28,.88);border-bottom-color:rgba(255,255,255,.07);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
    transition:transform .3s ease,background-color .25s ease}
  /* Scrolled past the top, the bar is over page content that may be white: solid. */
  body > nav.nav-glass.nav-scrolled{background:#0E0B1C;border-bottom-color:rgba(255,255,255,.06)}

  body > nav .nav-container{max-width:1140px;height:72px;margin:0 auto;padding:0 32px}
  body > nav .logo{display:flex;align-items:center;line-height:1}
  body > nav .logo a{display:flex}
  /* 39px because the export includes the logo's soft shadow: the letters
     themselves are 36px tall. */
  body > nav .logo img{display:block;height:39px;width:auto;margin-left:-2px}

  body > nav .nav-links{gap:30px}
  body > nav .nav-links a{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.72);text-decoration:none}
  body > nav .nav-links a:hover{color:#fff}
  /* The current section: white, semibold and underlined, so it never relies on
     colour alone. */
  body > nav .nav-links a[aria-current]{color:#fff;font-weight:600;text-decoration:underline;
    text-decoration-color:#A99BFF;text-decoration-thickness:2px;text-underline-offset:9px}
  body > nav .nav-links .social-icons{display:none}
  body > nav .nav-links .nav-login-desktop{margin-left:6px;font-weight:600;color:#fff}
  body > nav .nav-links .nav-cta{display:inline-flex;align-items:center;height:40px;margin-left:-8px;
    padding:0 18px;border-radius:11px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;
    font-weight:600;box-shadow:0 4px 18px rgba(118,75,162,.45);
    transition:transform .18s ease,box-shadow .18s ease}
  body > nav .nav-links .nav-cta:hover{color:#fff;transform:translateY(-1px);box-shadow:0 6px 22px rgba(118,75,162,.6)}
  body > nav .nav-links a:focus-visible{outline:2px solid #C4B5FD;outline-offset:4px;border-radius:6px}
}

/* ===== Phones, pages not yet converted: as before =====
   The white bar and side menu. The trial button stays out of their menu.
   Book a Demo keeps the purple it had as an inline style. */
@media (max-width:768px){
  body:not(.hp) > nav:not(.nav-dark-mobile) .nav-links .nav-cta{display:none}
  body > nav .nav-links .nav-demo{color:#667eea;font-weight:600}
}
@media (prefers-reduced-motion:reduce){
  body > nav .nav-links .nav-cta,body > nav.nav-glass{transition:none}
}

/* ===== Phones: the dark bar and drop-down menu =====
   Pages whose header has .nav-dark-mobile (build/sync-nav.js, DARK_MOBILE): the
   homepage since mobile phase 2, and the pages in the menu since 18 Oct 2026.
   Same look as the desktop bar: dark, the on-dark logo, a light Log In.
   The menu drops down full width under the 61px bar: link rows, then the social
   icons and Start Free Trial on one row. Each page's own script still opens and
   closes it (.active on #navLinks and the button; body.menu-open dims the page). */
@media (max-width:768px){
  body > nav.nav-dark-mobile{background:rgba(13,11,24,.94);border-bottom:1px solid rgba(255,255,255,.08);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  body > nav.nav-dark-mobile .nav-container{padding:8px 16px;min-height:60px;box-sizing:border-box}
  body > nav.nav-dark-mobile .logo > a{display:inline-block;padding:11px 0;margin:-11px 0}
  body > nav.nav-dark-mobile .logo img{height:36px!important;width:auto;margin-left:0}
  body > nav.nav-dark-mobile .nav-login-mobile{display:inline-flex!important;align-items:center;min-height:44px;
    color:#fff!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important;border-radius:10px!important}
  body > nav.nav-dark-mobile .hamburger{min-height:44px;min-width:44px;justify-content:center}
  body > nav.nav-dark-mobile .hamburger span{background:#fff}

  body > nav.nav-dark-mobile .nav-links{top:61px;left:0;right:0;width:auto;height:auto;
    max-height:calc(100vh - 61px);max-height:calc(100dvh - 61px);overflow-y:auto;overscroll-behavior:contain;
    grid-template-columns:auto 1fr;align-items:center;gap:0 12px;padding:4px 20px 20px;
    background:#12101F;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 20px 40px rgba(0,0,0,.45);transition:none}
  body > nav.nav-dark-mobile .nav-links.active{display:grid;right:0;animation:nav-menu-drop .2s ease-out}
  body > nav.nav-dark-mobile .nav-links > a:not(.nav-cta):not(.nav-login-desktop){grid-column:1 / -1;
    padding:13px 0;font-size:17px;color:rgba(255,255,255,.88);border-bottom:1px solid rgba(255,255,255,.07)}
  /* The page you are on: white, semibold, underlined, as in the desktop bar. */
  body > nav.nav-dark-mobile .nav-links > a[aria-current]:not(.nav-cta):not(.nav-login-desktop){color:#fff;font-weight:600;
    text-decoration:underline;text-decoration-color:#A99BFF;text-decoration-thickness:2px;text-underline-offset:6px}
  body > nav.nav-dark-mobile .nav-links a.nav-demo{color:#C4B5FD}
  body > nav.nav-dark-mobile .nav-links .social-icons{grid-column:1;width:auto;margin:18px 0 0;gap:10px;justify-content:flex-start}
  body > nav.nav-dark-mobile .nav-links .social-link{background:rgba(167,139,250,.18);color:#DDD6FE}
  body > nav.nav-dark-mobile .nav-links .nav-cta{display:block;grid-column:2;justify-self:end;width:auto;margin:18px 0 0;
    padding:13px 22px;border-radius:12px;text-align:center;font-size:16px;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#667eea,#764ba2)}
  body > nav.nav-dark-mobile .nav-links a:focus-visible{outline:2px solid #C4B5FD;outline-offset:3px;border-radius:6px}
  /* The chat bubble steps out of the way while the menu is open. */
  body.menu-open > nav.nav-dark-mobile ~ #db-chat-bubble{opacity:0;visibility:hidden;pointer-events:none}
  /* Safari paints the page's base colour behind its toolbar past the end of the
     page; the dark footer and dark bar should run to the screen edges. */
  html:has(> body > nav.nav-dark-mobile){background:#12101F}

  /* The old phone bar was 90px, this one 61px. Every page but the homepage (which
     has its own hero spacing) moves up by the difference, so everything under the
     bar sits exactly where it did: the same gap, the same hero background. The
     29px that move above the top were behind the old bar. Browsers without :has()
     just show the page 29px lower. */
  body:not(.hp):has(> nav.nav-dark-mobile){margin-top:-29px}
}
@keyframes nav-menu-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ body > nav.nav-dark-mobile .nav-links.active{animation:none} }