/* huum marketing navigation.
   One stylesheet for every page, so the bar cannot drift page to page. The
   behaviour lives in site.js; everything here is the look, the layout and the
   motion. Colours come from the theme tokens in each page's head, so light
   and dark are handled without a second palette. */

/* The site sets no global box model, and the drawer's full-width buttons
   carry padding and a border; without this they overflow the phone. */
.nav,
.nav *,
.nav *::before,
.nav *::after {
  box-sizing: border-box;
}

/* The two rows that have to line up with the page do not take it.
   Every other section on the site is 1180px of content inside 40px of
   gutter, measured the old way; with border-box the same numbers gave the
   bar 1100px and set the wordmark 40px inside the headline under it. */
.nav__inner,
.nav__panel-inner {
  box-sizing: content-box;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-family: Archivo, Helvetica, sans-serif;
}

.nav__bar {
  position: relative;
  z-index: 3;
  background: var(--bg);
}

.nav__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gut, 40px);
  min-height: var(--hdrH, 74px);
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav__logo {
  flex: 0 0 auto;
  display: block;
  margin-right: 14px;
}

.nav__logo img {
  height: var(--logoH, 26px);
  width: auto;
  display: block;
  filter: var(--logoInv, none);
}

.nav__logo:hover {
  text-decoration: none;
}

/* ---- the row of links and the actions beside them ---------------------- */

.nav__drawer {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 var(--navFs, 13.5px) / 1 Archivo, sans-serif;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 9px 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease;
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--text);
  background: var(--surface2);
  text-decoration: none;
}

/* The page you are on, marked by data-nav-current on the header. */
.nav[data-nav-current='platform'] [data-nav-key='platform'],
.nav[data-nav-current='map'] [data-nav-key='map'],
.nav[data-nav-current='pricing'] [data-nav-key='pricing'],
.nav[data-nav-current='faqs'] [data-nav-key='faqs'] {
  color: var(--text);
  font-weight: 500;
}

.nav__chev {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform .22s ease;
}

.nav__link[aria-expanded='true'] {
  color: var(--text);
  background: var(--surface2);
}

.nav__link[aria-expanded='true'] .nav__chev {
  transform: rotate(180deg);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 4px;
}

.nav__divider {
  width: 1px;
  height: 22px;
  background: var(--line);
  flex: 0 0 auto;
  margin: 0 4px;
}

.nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color .18s ease, border-color .18s ease;
}

.nav__icon-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 600 13px/1 Archivo, sans-serif;
  background: var(--inv-bg);
  color: var(--inv-text);
  border: 1px solid var(--inv-bg);
  border-radius: 7px;
  padding: var(--ctaPad, 11px 16px);
  white-space: nowrap;
  transition: opacity .18s ease;
}

.nav__cta:hover {
  opacity: .88;
  text-decoration: none;
  color: var(--inv-text);
}

.nav__cta--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.nav__cta--ghost:hover {
  color: var(--text);
  border-color: var(--muted);
  opacity: 1;
}

.nav__cta-icon {
  width: 15px;
  height: 15px;
  margin-right: -3px;
}

/* ---- the burger and the mobile back button ----------------------------- */

.nav__burger,
.nav__back,
.nav__bar-cta {
  display: none;
}

.nav__burger {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.nav__burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 1.5px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
}

.nav__burger span:nth-child(1) { top: 13px; }
.nav__burger span:nth-child(2) { top: 18px; }
.nav__burger span:nth-child(3) { top: 23px; }

.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ---- the mega panel ---------------------------------------------------- */

.nav__mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  height: 0;
  overflow: hidden;
  transition: height .35s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

.nav[data-nav-open='true'] .nav__mega {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow);
}

/* Panels are stacked so one can cross-fade over the other while the box
   morphs to the height of whichever is now in front. */
.nav__mega-clip {
  position: relative;
}

.nav__panel {
  position: absolute;
  inset: 0 0 auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(var(--nav-shift, 0px));
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.nav__panel[data-nav-panel-state='active'] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  /* No visibility here on purpose: it flips at once on the way in, so the
     links are focusable immediately, while the rule above still holds the
     panel visible for the length of the fade on the way out. */
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}

.nav__panel-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px var(--gut, 40px) 38px;
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid var(--line);
}

.nav__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 26px;
  border-right: 1px solid var(--line);
}

.nav__col:first-child { padding-left: 0; }
.nav__col:last-child { border-right: 0; padding-right: 0; }

/* Each column drifts in behind the one before it. */
.nav__panel[data-nav-panel-state='active'] .nav__col,
.nav__panel[data-nav-panel-state='active'] .nav__card {
  animation: nav-fade-in .34s cubic-bezier(.2, .7, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
}

@keyframes nav-fade-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

.nav__col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 Archivo, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 10px;
  margin-bottom: 2px;
}

.nav__badge {
  font: 600 9px/1 Archivo, sans-serif;
  letter-spacing: .08em;
  background: var(--inv-bg);
  color: var(--inv-text);
  border-radius: 3px;
  padding: 4px 6px;
}

.nav__col-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 8px;
  padding: 9px 10px;
  transition: background-color .16s ease;
}

.nav__tile:hover {
  background: var(--surface2);
  text-decoration: none;
}

.nav__tile-title {
  font: 600 14.5px/1.3 Archivo, sans-serif;
  letter-spacing: -.02em;
  color: var(--text);
}

.nav__tile-desc {
  font: 400 12.5px/1.45 Archivo, sans-serif;
  color: var(--muted);
}

/* ---- the promoted card at the end of a panel --------------------------- */

.nav__col--feature {
  flex: 0 0 300px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  border-right: 0;
  margin: -34px calc(var(--gut, 40px) * -1) -38px 0;
  padding: 34px var(--gut, 40px) 38px 26px;
  justify-content: flex-start;
}

/* The card fills the column so the button can sit on its bottom line, level
   with the last tile of the tallest list beside it. */
.nav__card {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 7px;
  align-items: stretch;
}

.nav__card:hover { text-decoration: none; }

/* Matches .nav__col-label, so all four columns start on one baseline. */
.nav__card-eyebrow {
  font: 500 11px/1 Archivo, sans-serif;
  letter-spacing: .14em;
  color: var(--faint);
  margin-bottom: 9px;
}

.nav__card-title {
  font: 700 19px/1.25 Archivo, sans-serif;
  letter-spacing: -.03em;
  color: var(--text);
}

.nav__card-desc {
  font: 400 13px/1.6 Archivo, sans-serif;
  color: var(--muted);
}

.nav__card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font: 600 13.5px/1 Archivo, sans-serif;
  background: var(--inv-bg);
  color: var(--inv-text);
  border-radius: 8px;
  padding: 13px 15px;
  margin-top: auto;
  transition: opacity .16s ease;
}

.nav__card:hover .nav__card-cta { opacity: .88; }

.nav__card-cta svg { width: 15px; height: 15px; transition: transform .2s ease; }
.nav__card:hover .nav__card-cta svg { transform: translateX(3px); }

/* ---- the backdrop behind an open menu ---------------------------------- */

.nav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(8, 9, 10, .34);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}

.nav[data-nav-open='true'] .nav__backdrop {
  opacity: 1;
  visibility: visible;
}

/* Too narrow for a fourth column, so the card lies down as a strip along the
   foot of the panel rather than disappearing with the only call to action. */
@media (max-width: 1120px) {
  .nav__col { padding: 0 20px; }
  .nav__panel-inner { flex-wrap: wrap; }
  .nav__col:nth-last-child(2) { border-right: 0; padding-right: 0; }

  .nav__col--feature {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    margin: 26px calc(var(--gut, 40px) * -1) -38px;
    /* The extra 10px on the left is the tile padding, so the strip's first
       word sits under the first word of the column above it. */
    padding: 20px var(--gut, 40px) 22px calc(var(--gut, 40px) + 10px);
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .nav__card { flex-direction: row; align-items: center; gap: 22px; }
  .nav__card-eyebrow { display: none; }
  .nav__card-title { flex: 0 0 auto; font-size: 16px; }
  .nav__card-desc { flex: 1 1 auto; }
  .nav__card-cta { flex: 0 0 auto; margin-top: 0; white-space: nowrap; }
}

/* ---- phones and small tablets ------------------------------------------ */

@media (max-width: 900px) {
  .nav__burger { display: block; margin-left: 10px; }

  .nav__bar-cta {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    font: 600 13px/1 Archivo, sans-serif;
    background: var(--inv-bg);
    color: var(--inv-text);
    border-radius: 7px;
    padding: var(--ctaPad, 11px 16px);
    white-space: nowrap;
  }

  .nav__bar-cta:hover { color: var(--inv-text); text-decoration: none; }

  /* One Start free on screen at a time: the drawer has its own, and the
     burger keeps the corner it was in. */
  .nav[data-nav-drawer='true'] .nav__bar-cta { display: none; }
  .nav[data-nav-drawer='true'] .nav__burger { margin-left: auto; }

  .nav__drawer {
    position: fixed;
    top: var(--hdrH, 62px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    padding: 8px var(--gut, 22px) 28px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .26s ease, transform .26s ease, visibility .26s;
  }

  .nav[data-nav-drawer='true'] .nav__drawer {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav__link {
    justify-content: space-between;
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    padding: 17px 2px;
    font-size: 17px;
    color: var(--text);
  }

  .nav__link:hover,
  .nav__link[aria-expanded='true'] { background: none; }

  .nav__link[aria-expanded='true'] .nav__chev { transform: none; }

  .nav__chev {
    width: 17px;
    height: 17px;
    transform: rotate(-90deg);
    color: var(--faint);
  }

  .nav__actions {
    margin-left: 0;
    padding-left: 0;
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
  }

  .nav__divider { display: none; }

  .nav__icon-btn {
    width: auto;
    height: auto;
    grid-column: 1 / -1;
    order: 4;
    gap: 8px;
    padding: 12px;
    font: 500 13px/1 Archivo, sans-serif;
  }

  .nav__icon-btn::after { content: attr(data-label); }

  .nav__actions .nav__link {
    order: 3;
    grid-column: 1 / -1;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 13px;
    font-size: 14px;
  }

  .nav__cta {
    justify-content: center;
    padding: 14px 12px;
    font-size: 14px;
  }

  .nav__cta--ghost { order: 1; }

  /* Panels slide in over the drawer, with the bar's back button to return. */
  .nav__mega {
    position: fixed;
    top: var(--hdrH, 62px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    height: auto;
    overflow-y: auto;
    background: var(--bg);
    box-shadow: none;
    visibility: hidden;
    transition: none;
  }

  .nav[data-nav-open='true'] .nav__mega {
    visibility: visible;
    box-shadow: none;
  }

  .nav__panel {
    position: absolute;
    inset: 0;
    height: max-content;
    transform: translateX(24px);
  }

  .nav__panel-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 6px var(--gut, 22px) 34px;
    border-top: 0;
  }

  .nav__col {
    padding: 20px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav__col:first-child { padding-top: 12px; }
  .nav__col:last-child { border-bottom: 0; }

  .nav__col--feature {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 22px 0 8px;
    border-left: 0;
    border-top: 0;
    background: none;
  }

  .nav__card { flex-direction: column; align-items: stretch; gap: 7px; }
  .nav__card-eyebrow { display: block; margin-bottom: 2px; }
  .nav__card-title { font-size: 19px; }
  .nav__card-cta { margin-top: 4px; }

  .nav__tile { padding: 9px 0; }

  .nav__backdrop { display: none; }

  .nav__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 500 14px/1 Archivo, sans-serif;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 8px 4px;
    margin-left: auto;
    cursor: pointer;
  }

  .nav__back svg { width: 17px; height: 17px; }

  /* The logo makes way for Back while a panel is open. */
  .nav[data-nav-open='true'] .nav__logo { display: none; }
  .nav:not([data-nav-open='true']) .nav__back { display: none; }
  .nav[data-nav-open='true'] .nav__back { margin-left: 0; margin-right: auto; }
}

@media (max-width: 700px) {
  .nav__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nav *,
  .nav__mega,
  .nav__panel,
  .nav__drawer {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
  }
}