/* Osmo Mega Navigation — the site nav at every width (burger menu below 991px) */

[data-menu-wrap] {
  --nav-height: 4em;
}

/* Anchor the resource's em system to the demo's 16px base (site body is larger) */
.mega-nav {
  font-size: 16px;
}


.mega-nav {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* The bar itself is full-bleed and flush with the top edge at every width.
   Only its contents sit on the ladder, so the logo and the links still line
   up with the page columns underneath. */
.mega-nav__bar {
  z-index: 3;
  background-color: var(--color-neutral-100, #fff);
  border-bottom: 1px solid transparent;
  border-radius: 0;
  width: 100%;
  position: relative;
}

.mega-nav__container {
  height: var(--nav-height);
  /* The site's container ladder: 1080, and 1321 from the 1471 step. The nav
     contents, the dropdown, .pp-container, the paper grid and the docs column
     all use these two numbers, so every edge on the page lines up. */
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
  align-items: center;
  /* No inline padding on desktop: the logo and the links start on the ladder
     edge itself, so they sit on the same line as the content below. The burger
     layout puts it back at 991px. */
  padding: 1em 0;
  display: flex;
}

.mega-nav__bar-start {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.mega-nav__bar-logo {
  flex: none;
  width: auto;
  /* Headroom for the taller mark. The img's width/height attributes (140x49)
     do not match the asset, which renders ~66px wide at 2.5em. */
  max-width: 11em;
  margin-right: 1em;
  display: flex;
  align-items: center;
}

.mega-nav__bar-logo-img {
  display: block;
  height: 3em;
  width: auto;
  object-fit: contain;
}

.mega-nav__bar-list {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-list.is--actions {
  margin-left: auto;
}

.mega-nav__bar-link {
  color: var(--color-neutral-800, #201d1d);
  background-color: transparent;
  border: none;
  border-radius: 0.25em;
  justify-content: flex-start;
  align-items: center;
  padding: 0.375em 0.625em;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  font: inherit;
}

.mega-nav__bar-link-label {
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.2;
}

.mega-nav__bar-link-icon {
  width: 1.25em;
  flex: none;
}

.mega-nav__bar-end {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  justify-content: flex-end;
  align-items: center;
  display: none;
  margin-left: auto;
}

.mega-nav__bar-cta {
  color: #f2f2f2;
  background-color: #6840ff;
  border-radius: 0.25em;
  justify-content: center;
  align-items: center;
  padding: 0.375em 0.625em;
  text-decoration: none;
  display: flex;
}

.mega-nav__bar-cta.is--secondary {
  color: #6840ff;
  background-color: transparent;
  border: 1px solid #6840ff;
}

.mega-nav__bar-inner {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__burger {
  grid-column-gap: 0.2em;
  grid-row-gap: 0.2em;
  background-color: transparent;
  border: none;
  border-radius: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  /* Bare lines, no chip behind them: the width is the icon's own width so it
     sits flush against the container edge. The height stays 2.5em because it
     costs nothing visually and keeps the tap target usable. */
  width: 1.25em;
  height: 2.5em;
  padding: 0;
  display: flex;
  cursor: pointer;
}

.mega-nav__burger-line {
  z-index: 1;
  background-color: var(--color-neutral-800, #201d1d);
  border-radius: 0.125em;
  flex: none;
  width: 1.25em;
  height: 0.125em;
  padding: 0;
  display: block;
  position: relative;
}

.mega-nav__back {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -0.625em;
}

.mega-nav__backdrop {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  background-color: #00000040;
  position: fixed;
  inset: 0%;
}

.mega-nav__dropdown-wrapper {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.mega-nav__dropdown-container {
  position: relative;
  overflow: hidden;
}

.mega-nav__dropdown-bg {
  will-change: transform;
  background-color: var(--color-neutral-100, #fff);
  border-bottom-right-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
  position: absolute;
  inset: 0;
}

.mega-nav__dropdown-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

.mega-nav__dropdown-inner {
  display: flex;
}

.mega-nav__panel-col {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  border-right: 1px solid #0000001a;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2.5em 1.5em;
  display: flex;
}

.mega-nav__panel-col:last-of-type {
  border: none;
}

.mega-nav__panel-col.is--colored {
  background-color: #f7f5ff;
}

.mega-nav__panel-label {
  text-transform: uppercase;
  padding-left: 1em;
  font-family: "Haffer Mono", Arial, sans-serif;
  font-size: 0.75em;
  line-height: 1;
  color: var(--color-neutral-500, #817f7f);
}

.mega-nav__panel-list {
  grid-column-gap: 0;
  grid-row-gap: 0;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.mega-nav__panel-link {
  color: var(--color-neutral-800, #201d1d);
  border-radius: 0.25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.625em 0.75em;
  text-decoration: none;
  display: flex;
  gap: 0.15em;
}

.mega-nav__panel-link-text {
  font-weight: 500;
}

.mega-nav__panel-link-desc {
  opacity: 0.6;
  font-size: 0.875em;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mega-nav__lang-row {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.75em 0;
  border-bottom: 1px solid #0000001a;
  width: 100%;
}

.mega-nav__lang-link {
  color: var(--color-neutral-800, #201d1d);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.55;
}

.mega-nav__lang-link.is--active {
  opacity: 1;
}

.mega-nav__lang-sep {
  opacity: 0.4;
}

/* The 1471 step of the ladder, shared with .pp-container and the docs column. */
@media screen and (min-width: 1471px) {
  .mega-nav__container,
  .mega-nav__dropdown-wrapper {
    max-width: 1321px;
  }
}

@media screen and (max-width: 991px) {
  /* Details hover column is desktop-only */
  [data-nav-hover-info] {
    display: none;
  }

  .mega-nav__bar {
    border-bottom: 1px solid #0000001a;
  }

  .mega-nav__container {
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  .mega-nav__bar-start {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-list {
    grid-column-gap: 0;
    grid-row-gap: 0;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  .mega-nav__bar-list.is--actions {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
    margin-left: 0;
    margin-top: auto;
    width: 100%;
  }

  .mega-nav__bar-link {
    border-bottom: 1px solid #0000001a;
    border-radius: 0;
    width: 100%;
    padding: 0.75em 0;
    font-size: 1.25em;
  }

  .mega-nav__bar-link.is--dropdown {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-link.is--back {
    border-bottom-style: none;
    font-size: 1em;
  }

  .mega-nav__bar-link-label {
    font-size: 1.25em;
  }

  .mega-nav__bar-link-icon {
    width: 1.5em;
  }

  .mega-nav__bar-link-icon.is--dropdown {
    transform: rotate(-90deg);
  }

  .mega-nav__bar-end {
    display: flex;
  }

  .mega-nav__bar-cta {
    padding: 1em 0.75em 1em 1em;
    width: 100%;
    justify-content: center;
  }

  .mega-nav__bar-inner {
    opacity: 0;
    bottom: 0%;
    left: 0%;
    right: 0%;
    top: var(--nav-height);
    visibility: hidden;
    background-color: var(--color-neutral-100, #fff);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.5em;
    position: fixed;
    overflow: auto;
    z-index: 3;
    pointer-events: none;
  }

  [data-menu-open="true"] .mega-nav__bar-inner {
    pointer-events: auto;
  }

  .mega-nav__backdrop {
    display: none;
  }

  .mega-nav__dropdown-wrapper {
    z-index: 4;
    bottom: 0;
    top: var(--nav-height);
    position: fixed;
    /* parent stays none; open panels set pointer-events:auto so they receive taps */
    pointer-events: none;
  }

  .mega-nav__dropdown-container {
    height: 100%;
    overflow: auto;
  }

  .mega-nav__dropdown-bg {
    display: none;
  }

  .mega-nav__dropdown-panel {
    background-color: var(--color-neutral-100, #fff);
    bottom: 0;
    overflow: auto;
  }

  .mega-nav__dropdown-inner {
    flex-flow: column;
  }

  .mega-nav__panel-col {
    border-bottom: 1px solid #0000001a;
    border-right-style: none;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .mega-nav__panel-label {
    width: 100%;
  }

  .mega-nav__bar-action {
    flex: 1;
  }
}

@media screen and (max-width: 479px) {
  .mega-nav__bar-link-label {
    font-size: 1em;
  }

  .mega-nav__bar-link-icon {
    width: 1.375em;
  }
}

/* Right-panel hover info + SplitText mask lines */
.mega-nav__info {
  flex-flow: column;
  justify-content: flex-start;
  gap: 1.25em;
  min-height: 16em;
}

.mega-nav__info-copy {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.mega-nav__info-title,
.mega-nav__info-body {
  margin: 0;
}

.mega-nav__info-title {
  font-size: 1.35em;
  font-weight: 500;
  line-height: 1.25;
  color: var(--shade-content, #1e2328);
}

.mega-nav__info-body {
  font-size: 0.9em;
  font-weight: 400;
  line-height: 1.45;
  color: var(--shade-muted, rgb(30 35 40 / 0.65));
}

.mega-nav__info-title .line,
.mega-nav__info-body .line {
  padding-bottom: 0.05em;
}

.mega-nav__info-cta {
  margin-top: auto;
  color: var(--shade-content, #1e2328);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375em;
}

.mega-nav__info-cta:hover {
  opacity: 0.75;
}

[data-split="heading"] {
  -webkit-text-rendering: optimizeSpeed;
  text-rendering: optimizeSpeed;
  font-kerning: none;
}

/* ---- Desktop SiteNav panel morph (Osmo content) ---- */
.nav-mega-panels {
  width: 100%;
  border-radius: 1em;
  overflow: hidden;
  background-color: var(--color-neutral-100, #fff);
  color: var(--color-neutral-800, #201d1d);
  position: relative;
}

.nav-mega-panels__container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.nav-mega-panels__panel.mega-nav__dropdown-panel {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background-color: transparent;
}

.nav-mega-panels .mega-nav__dropdown-inner {
  display: flex;
  width: 100%;
}

.nav-mega-panels .mega-nav__panel-col {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  border-right: 1px solid #0000001a;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2em 1.5em;
  display: flex;
  min-width: 0;
}

.nav-mega-panels .mega-nav__panel-col:last-of-type {
  border-right: none;
}

.nav-mega-panels .mega-nav__panel-col.is--colored {
  background-color: #f7f5ff;
}

.nav-mega-panels .mega-nav__panel-col.is--colored.has--card {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.nav-mega-panels .mega-nav__panel-label {
  text-transform: uppercase;
  padding-left: 1em;
  font-family: "Haffer Mono", Arial, sans-serif;
  font-size: 0.75em;
  line-height: 1;
  color: var(--color-neutral-500, #817f7f);
}

.nav-mega-panels .mega-nav__panel-list {
  flex-flow: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav-mega-panels .mega-nav__panel-link {
  color: var(--color-neutral-800, #201d1d);
  border-radius: 0.25em;
  flex-flow: column;
  padding: 0.625em 0.75em;
  text-decoration: none;
  display: flex;
  gap: 0.15em;
}

.nav-mega-panels .mega-nav__panel-link-text {
  font-weight: 500;
}

.nav-mega-panels .mega-nav__panel-link-desc {
  opacity: 0.6;
  font-size: 0.875em;
}

.mega-nav__card {
  background-color: #fff;
  border-radius: 0.5em;
  flex-flow: column;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.mega-nav__card-visual {
  width: 100%;
  height: 12em;
  position: relative;
}

.mega-nav__card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mega-nav__card-content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  padding: 1.5em;
  display: flex;
}

.mega-nav__card-text {
  flex-flow: column;
  display: flex;
  gap: 0.125em;
}

.mega-nav__card-cta {
  color: #f2f2f2;
  background-color: #6840ff;
  border-radius: 0.25em;
  justify-content: center;
  align-items: center;
  padding: 0.375em 0.625em;
  text-decoration: none;
  display: inline-flex;
  width: fit-content;
}

.mega-nav__card-cta-label {
  font-size: 0.9375em;
  font-weight: 500;
}

.mega-nav__card-cta-icon {
  width: 1.25em;
}

@media screen and (max-width: 991px) {
  .nav-mega-panels {
    display: none;
  }
}