/* ─── shared navigation ──────────────────────────────────────────────────────
   Loaded by BOTH the homepage (templates/home.html, served as a raw file) and
   every page of the marketing site (templates/site/base.html). The two pages
   have separate markup for everything else; the menu is the one component that
   must be identical on both, so it lives here rather than in either stylesheet.

   Only menu-specific selectors belong in this file. The header shell itself -
   .nav, .logo, .mk, .try, .menu-btn, .sheet - is styled by each page, because
   the homepage's versions predate the site and must not change.
   -------------------------------------------------------------------------- */

.nav-list{display:flex;gap:6px;list-style:none;align-items:center;}
.nav-group{position:relative;}

.nav-top{display:inline-flex;align-items:center;gap:.32rem;
  font-family:inherit;font-size:.88rem;color:var(--nav-fg2,#9ca3aa);
  background:transparent;border:0;cursor:pointer;
  padding:.46rem .8rem;border-radius:999px;
  transition:color .22s var(--ease,ease),background .22s var(--ease,ease);}
.nav-top:hover{color:var(--nav-fg,#f7f8fa);}
.nav-top[aria-expanded="true"]{color:var(--nav-fg,#f7f8fa);
  background:rgba(255,255,255,.1);}
.nav-top .chev{width:11px;height:11px;
  transition:transform .28s var(--ease,ease);}
.nav-top[aria-expanded="true"] .chev{transform:rotate(180deg);}

/* Panels ------------------------------------------------------------------
   `hidden` stays the closed state so the menu is inert without JavaScript and
   for assistive technology. Because `hidden` is display:none and cannot be
   transitioned, nav.js removes it one frame before adding .is-open, and waits
   for the transition to finish before putting it back. */
.nav-menu{position:absolute;top:calc(100% + 12px);left:-6px;min-width:236px;
  background:rgba(14,16,20,.97);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:14px 10px 10px;
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top center;
  transition:opacity .19s ease, transform .26s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;}
.nav-menu.is-open{opacity:1;transform:translateY(0) scale(1);}
.nav-menu[hidden]{display:none;}

.nav-menu-head{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  color:#6d747c;padding:0 12px 6px;}
.nav-menu-blurb{font-size:.82rem;color:#8b9199;padding:0 12px 10px;max-width:30ch;}
.nav-menu a{display:block;padding:.5rem .75rem;border-radius:9px;font-size:.9rem;
  color:#d3d8de;text-decoration:none;
  transition:background .2s ease,color .2s ease;}
.nav-menu a:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-menu a[aria-current="page"]{color:rgb(198,227,241);background:rgba(115,181,215,.1);}
.nav-item-label{display:block;}
.nav-item-desc{display:block;font-size:.78rem;color:#868d95;margin-top:1px;}

/* Wide panel with image cards --------------------------------------------
   Anchored to the header and centred rather than to its own nav item: at this
   width it would otherwise run off-screen from a right-hand trigger. */
.nav-menu-wide{position:fixed;top:var(--nav-h,64px);left:50%;
  width:min(1000px,calc(100vw - 40px));
  display:grid;grid-template-columns:1fr auto;gap:34px;
  padding:20px;background:rgba(15,16,18,.98);
  border:1px solid rgba(255,255,255,.11);border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:translateX(-50%) translateY(-8px) scale(.99);}
.nav-menu-wide.is-open{transform:translateX(-50%) translateY(0) scale(1);}

.nav-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.nav-card{position:relative;display:block;border-radius:14px;overflow:hidden;
  aspect-ratio:1/1;background:#17181b;padding:0;}
.nav-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.nav-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 58%);}
.nav-card-label{position:absolute;top:13px;left:15px;z-index:1;
  font-size:1rem;font-weight:500;color:#fff;letter-spacing:-.01em;}
.nav-menu .nav-card:hover{background:#17181b;}
.nav-card:hover img{transform:scale(1.045);}
.nav-card[aria-current="page"]{background:#17181b;
  outline:1.5px solid rgb(198,227,241);outline-offset:-1.5px;}

.nav-cols{display:flex;gap:38px;padding:8px 12px 8px 0;}
.nav-col{display:flex;flex-direction:column;gap:8px;min-width:136px;}
.nav-col-head{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:#7f858c;margin-bottom:3px;}
.nav-menu .nav-cols a{padding:2px 0;border-radius:0;color:#e7e9ec;font-size:.94rem;}
.nav-menu .nav-cols a:hover{background:none;color:#fff;
  text-decoration:underline;text-underline-offset:3px;}
.nav-menu .nav-cols a[aria-current="page"]{background:none;color:#fff;font-weight:500;}

.nav-top:focus-visible,
.nav-menu a:focus-visible{outline:2px solid rgb(198,227,241);outline-offset:2px;}

@media(max-width:1040px){
  .nav-menu-wide{grid-template-columns:1fr;gap:20px;}
  .nav-cols{flex-wrap:wrap;gap:26px;}
}

@media(prefers-reduced-motion:reduce){
  .nav-menu,.nav-card img,.nav-top,.nav-top .chev{transition:none;}
  .nav-menu{transform:none;}
  .nav-menu-wide{transform:translateX(-50%);}
  .nav-menu-wide.is-open{transform:translateX(-50%);}
  .nav-card:hover img{transform:none;}
}

/* The homepage header sits at z-index 60 and styles its own buttons; make the
   panel stack above page content and reset anything inherited. */
.nav-menu{z-index:70;}
.nav-top{-webkit-appearance:none;appearance:none;line-height:1.2;
  letter-spacing:inherit;text-align:left;}

/* Returning users need a way in. The site had no link to /login at all — the
   page existed and nothing pointed at it. Quiet next to the primary CTA:
   signing in is for people who already decided. */
.nav-actions{display:flex;align-items:center;gap:14px;}
.nav-login{font-size:.88rem;color:var(--nav-fg2,#9ca3aa);text-decoration:none;
  white-space:nowrap;transition:color .22s ease;}
.nav-login:hover{color:var(--nav-fg,#f7f8fa);}
body.paper-top .nav-login{color:var(--ink2,#575450);}
body.paper-top .nav-login:hover{color:var(--ink,#14151a);}
@media(max-width:900px){.nav-actions .nav-login{display:none;}}