/* ============================================================ header v7
   the client area, the sliding highlight, the current page. Linked on every page by
   tools/build.py (the homepage inlines its own copy of nav.css). */
.nv-portal{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 14px;border-radius:999px;
  font-size:15px;font-weight:800;color:var(--ink,#0A1128);text-decoration:none;white-space:nowrap;
  background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(10,17,40,.12),0 1px 2px rgba(10,17,40,.05);
  transition:background .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1)}
.nv-portal svg{width:20px;height:20px;flex:none}
.nv-portal:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(10,17,40,.28),0 8px 20px -12px rgba(10,17,40,.35)}
.nv-portal:active{transform:scale(.97)}
.nv-portal:focus-visible,.nv-portal-m:focus-visible,.nv-sh-portal:focus-visible{outline:2px solid #F2761B;outline-offset:3px}
@media (max-width:1180px){.nv-portal{width:48px;padding:0;justify-content:center}.nv-portal span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

.nv-portal-m{display:none;width:44px;height:44px;border-radius:14px;align-items:center;justify-content:center;color:var(--ink,#0A1128);
  background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(10,17,40,.12);text-decoration:none}
.nv-portal-m svg{width:21px;height:21px}
@media (max-width:1020px){.nv-portal-m{display:inline-flex;margin-inline-start:auto}.nv-portal-m + .nv-burger{margin-inline-start:8px}}

/* the highlight: one pill that glides to whatever the pointer or focus is on */
.nv-nav{position:relative}
.nv-ind{position:absolute;top:50%;left:0;height:40px;width:0;margin-top:-20px;border-radius:12px;pointer-events:none;z-index:0;
  background:rgba(10,17,40,.06);opacity:0;
  transition:transform .28s cubic-bezier(.22,1,.36,1),width .28s cubic-bezier(.22,1,.36,1),opacity .18s ease-out}
.nv-ind.on{opacity:1}
.nv-nav .nv-item{position:relative;z-index:1}
/* the current page: a short ember line under its name */
.nv-nav .nv-item[aria-current="page"]{color:var(--ink,#0A1128)}
.nv-nav .nv-item[aria-current="page"]::after{content:"";position:absolute;inset-inline:30%;bottom:4px;height:2px;border-radius:2px;background:#F2761B}

/* the drawer's first row: the way back in for existing clients */
.nv-sh-portal{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;
  border-radius:18px;text-decoration:none;color:#fff;background:linear-gradient(180deg,#141C36,#0A1128);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 30px -18px rgba(10,17,40,.7)}
.nv-sh-portal .nv-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1)}
.nv-sh-portal .nv-ic svg{width:22px;height:22px}
.nv-sh-portal b{display:block;font-size:16px;font-weight:800}
.nv-sh-portal em{display:block;font-style:normal;font-size:13px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-sh-portal > i svg{width:18px;height:18px;opacity:.7}
@media (prefers-reduced-motion:reduce){.nv-ind{transition:none}}

/* phones: the six solution tiles keep their names on one line */
@media (max-width:430px){.nv-sh-sol a span:last-child{white-space:nowrap;font-size:14px;letter-spacing:-.01em}}


.nv-nav .nv-item{white-space:nowrap}

/* ---------- "more" pane: a place for pages (blog, guides, tools). One <li> per page; see menu_patch.py ---------- */
.nv-more{margin:12px 4px 0;padding:12px 0 2px;border-top:1px solid rgba(10,17,40,.08)}
.nv-more .nv-mega-k{margin:0 14px 6px}
.nv-more ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px}
.nv-more a,.nv-more .nv-soon{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:10px;align-items:center;min-height:52px;padding:6px 10px;border-radius:14px;color:var(--ink);transition:background-color .2s cubic-bezier(.25,1,.5,1)}
.nv-more svg{grid-row:1 / 3;width:34px;height:34px;padding:8px;box-sizing:border-box;border-radius:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:rgba(10,17,40,.62);background:linear-gradient(180deg,#FFFFFF,#F3EFE8);box-shadow:inset 0 0 0 1px rgba(10,17,40,.07);transition:color .2s ease,background .2s ease}
.nv-more b{align-self:end;font-size:14px;font-weight:800;letter-spacing:-.01em;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-more em{align-self:start;font-style:normal;font-size:12px;line-height:1.4;color:var(--nx-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-more a:hover{background:rgba(255,255,255,.75)}
.nv-more a:hover svg{color:#fff;background:linear-gradient(180deg,#131C3D,#0A1128)}
.nv-more a:hover b{color:#B8500A}
.nv-more a:focus-visible{outline:2px solid #E2670F;outline-offset:2px}
.nv-more .nv-soon{cursor:default}
.nv-more .nv-soon b{color:rgba(10,17,40,.62)}
/* with the list under them, the four tiles do not need to be tall */
.nv-pane[data-pane="svc"] .nv-tile{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"gl t no" "gl d no";column-gap:14px;row-gap:0;align-items:center;padding:14px 16px}
.nv-pane[data-pane="svc"] .nv-tile b{align-self:end}
.nv-pane[data-pane="svc"] .nv-tile > span{align-self:start}
.nv-pane[data-pane="svc"] .nv-tile .nv-no{align-self:start}
.nv-pane[data-pane="svc"] .nv-grid{flex:none;grid-auto-rows:auto}
.nv-sh-svc .nv-sh-soon{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.6);border:1px dashed rgba(10,17,40,.14);color:var(--ink)}
.nv-sh-svc .nv-sh-soon > span:last-child{display:grid;gap:2px}
.nv-sh-svc .nv-sh-soon em{font-style:normal}
@media (max-width:1180px){.nv-more ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.nv-more a,.nv-more svg{transition:none}}