/* Purpose: keep every launch page on one stable, premium navigation system. */
:root {
  --mai-header-height: 92px;
  --mai-header-mobile-height: 80px;
  --mai-header-cyan: #25c9ee;
  --mai-header-gold: #d3b36a;
}

.mai-global-header,
.mai-global-header * {
  box-sizing: border-box;
}

.mai-global-header {
  position: sticky;
  top: 0;
  z-index: 10000;
  height: var(--mai-header-height);
  color: #f7fbff;
  background: rgba(2, 6, 9, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  font-family: inherit;
}

.mai-global-header__shell {
  position: relative;
  z-index: 3;
  width: min(1440px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

.mai-global-header__brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: 195px;
  text-decoration: none;
}

.mai-global-header__brand img {
  display: block;
  width: 100%;
  height: auto;
}

.mai-global-header__context {
  flex: 0 0 auto;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, .14);
  color: rgba(224, 234, 241, .56);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.35;
  text-transform: uppercase;
}

.mai-global-header__desktop {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.mai-global-header__desktop > a,
.mai-global-header__desktop summary {
  min-height: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  color: rgba(238, 245, 249, .74);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.mai-global-header__desktop > a:hover,
.mai-global-header__desktop > a[aria-current="page"],
.mai-global-header__desktop details[open] > summary,
.mai-global-header__desktop summary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .045);
}

.mai-global-header details { position: relative; }
.mai-global-header summary { list-style: none; }
.mai-global-header summary::-webkit-details-marker { display: none; }

.mai-global-header__chevron {
  color: var(--mai-header-cyan);
  font-size: 13px;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}

.mai-global-header details[open] > summary .mai-global-header__chevron {
  transform: rotate(180deg) translateY(1px);
}

.mai-global-header__cta {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 160ms ease, background 160ms ease;
}

.mai-global-header__cta:hover {
  border-color: var(--mai-header-cyan);
  background: rgba(37, 201, 238, .08);
}

.mai-global-header__mega {
  position: fixed;
  z-index: 4;
  top: var(--mai-header-height);
  left: 50%;
  width: min(1360px, calc(100vw - 48px));
  max-height: calc(100vh - var(--mai-header-height) - 24px);
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  overflow: auto;
  transform: translateX(-50%);
  color: #f7fbff;
  background: rgba(2, 6, 9, .985);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .58);
}

.mai-global-header__mega-intro {
  min-height: 470px;
  padding: 46px 42px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(155deg, rgba(37, 201, 238, .085), transparent 58%);
}

.mai-global-header__eyebrow,
.mai-global-header__product span {
  color: var(--mai-header-cyan);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mai-global-header__mega-intro strong {
  margin: 24px 0 18px;
  font-size: clamp(30px, 2.5vw, 42px);
  letter-spacing: -.045em;
  line-height: 1;
}

.mai-global-header__mega-intro > span {
  color: rgba(225, 235, 241, .66);
  font-size: 15px;
  line-height: 1.7;
}

.mai-global-header__mega-intro a {
  margin-top: auto;
  color: #fff;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.mai-global-header__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mai-global-header__product {
  min-height: 157px;
  padding: 30px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(255, 255, 255, .1);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease;
}

.mai-global-header__product:nth-child(2n) { border-right: 0; }
.mai-global-header__product:nth-last-child(-n + 2) { border-bottom: 0; }
.mai-global-header__product:hover { background: rgba(37, 201, 238, .07); }
.mai-global-header__product--apps:hover { background: rgba(211, 179, 106, .08); }
.mai-global-header__product--apps span { color: var(--mai-header-gold); }

.mai-global-header__product strong {
  margin: 11px 0 8px;
  font-size: 22px;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.mai-global-header__product small {
  color: rgba(225, 235, 241, .62);
  font-size: 13px;
  line-height: 1.5;
}

.mai-global-header__company-panel {
  position: absolute;
  z-index: 4;
  top: 68px;
  right: 0;
  width: 340px;
  padding: 10px;
  background: rgba(2, 6, 9, .985);
  border: 1px solid rgba(255, 255, 255, .15);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .54);
}

.mai-global-header__company-panel a {
  padding: 18px 20px;
  display: block;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.mai-global-header__company-panel a:last-child { border-bottom: 0; }
.mai-global-header__company-panel a:hover { background: rgba(37, 201, 238, .065); }
.mai-global-header__company-panel strong { display: block; font-size: 15px; }
.mai-global-header__company-panel span { display: block; margin-top: 5px; color: rgba(225, 235, 241, .58); font-size: 12px; }

.mai-global-header__scrim {
  position: fixed;
  z-index: 1;
  top: var(--mai-header-height);
  right: 0;
  bottom: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, .46);
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease;
}

.mai-global-header.has-open-menu .mai-global-header__scrim {
  visibility: visible;
  opacity: 1;
}

.mai-global-header__toggle,
.mai-global-header__mobile { display: none; }

.mai-global-header a:focus-visible,
.mai-global-header summary:focus-visible,
.mai-global-header button:focus-visible {
  outline: 2px solid var(--mai-header-cyan);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .mai-global-header__context { display: none; }
  .mai-global-header__shell { gap: 18px; }
  .mai-global-header__desktop > a,
  .mai-global-header__desktop summary { padding-inline: 11px; }
}

@media (max-width: 960px) {
  .mai-global-header { height: var(--mai-header-mobile-height); }
  .mai-global-header__shell { width: min(100% - 34px, 1440px); }
  .mai-global-header__brand { width: 178px; }
  .mai-global-header__desktop,
  .mai-global-header__cta { display: none; }

  .mai-global-header__toggle {
    width: 46px;
    height: 46px;
    margin-left: auto;
    padding: 0;
    display: grid;
    place-content: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    background: transparent;
  }

  .mai-global-header__toggle span {
    width: 19px;
    height: 1px;
    display: block;
    background: currentColor;
    transition: transform 160ms ease;
  }

  .mai-global-header.is-mobile-open .mai-global-header__toggle span:first-child { transform: translateY(4px) rotate(45deg); }
  .mai-global-header.is-mobile-open .mai-global-header__toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .mai-global-header__mobile {
    /* The header's backdrop filter creates a containing block, so an explicit viewport height keeps the drawer full-screen. */
    position: absolute;
    z-index: 4;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(100dvh - var(--mai-header-mobile-height));
    padding: 18px 22px 40px;
    display: none;
    overflow-y: auto;
    color: #f7fbff;
    background: #020609;
  }

  .mai-global-header.is-mobile-open .mai-global-header__mobile { display: block; }

  .mai-global-header__mobile > a,
  .mai-global-header__mobile summary {
    width: 100%;
    min-height: 60px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -.01em;
    text-decoration: none;
    text-transform: none;
  }

  .mai-global-header__mobile-products {
    padding: 10px 0 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mai-global-header__mobile-products a {
    min-height: 68px;
    padding: 14px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    color: rgba(238, 245, 249, .8);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
  }

  .mai-global-header__mobile-cta {
    margin-top: 24px;
    justify-content: center !important;
    border: 1px solid rgba(37, 201, 238, .65) !important;
    background: rgba(37, 201, 238, .08);
    font-size: 12px !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 480px) {
  .mai-global-header__brand { width: 164px; }
  .mai-global-header__mobile-products { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mai-global-header *,
  .mai-global-header *::before,
  .mai-global-header *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
