html,
body,
#root {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100% !important;
}
body > #root,
body .app-shell {
  margin-top: 0 !important;
  padding-top: 0 !important;
  position: relative !important;
  top: 0 !important;
}

body .brand {
  width: clamp(440px, 34vw, 620px) !important;
  min-width: clamp(440px, 34vw, 620px) !important;
  height: 112px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 4 !important;
}
body .brand > * { display: none !important; }
body .brand > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  flex-shrink: 0 !important;
  image-rendering: auto !important;
  filter: drop-shadow(0 5px 14px rgba(0, 0, 0, .28));
}

/* Legal/About pages use a lighter top bar but must share the exact approved mark. */
body .launch-brand {
  width: 270px !important;
  min-width: 270px !important;
  height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  position: relative !important;
}
body .launch-brand > *:not(img) {
  display: none !important;
}
body .launch-brand > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  flex-shrink: 0 !important;
  image-rendering: auto !important;
}

body .footer .brand {
  width: 330px !important;
  min-width: 330px !important;
  height: 72px !important;
}
body .footer .brand > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
  filter: none;
}

body .header {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 136px !important;
  min-height: 136px !important;
  background: #0c1a27 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 10px 30px rgba(4, 17, 29, .22);
  overflow: hidden !important;
  isolation: isolate;
}
body .header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(66, 184, 239, 0),
    rgba(66, 184, 239, .42) 50%,
    rgba(66, 184, 239, 0)
  );
}
body .header > .mdp-header-photo {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 44% !important;
  image-rendering: auto !important;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.025);
  z-index: 0 !important;
  pointer-events: none !important;
}
body .header > .mdp-header-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      90deg,
      rgba(12, 26, 39, .96) 0%,
      rgba(12, 26, 39, .84) 17%,
      rgba(12, 26, 39, .58) 39%,
      rgba(12, 26, 39, .25) 64%,
      rgba(12, 26, 39, .54) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 17, 27, .13) 0%,
      rgba(6, 17, 27, .16) 38%,
      rgba(6, 17, 27, .56) 100%
    ),
    radial-gradient(
      circle at 62% 38%,
      rgba(40, 157, 215, .10),
      transparent 38%
    ) !important;
}
body .header .header-inner {
  position: relative !important;
  z-index: 3 !important;
  height: 100% !important;
  padding: 0 clamp(28px, 4vw, 76px) !important;
  gap: clamp(24px, 2.4vw, 38px) !important;
}

body .header .desktop-nav {
  height: auto !important;
  gap: 4px !important;
  padding: 7px 8px !important;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(4, 17, 29, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 8px 24px rgba(0, 0, 0, .12);
  backdrop-filter: blur(7px) saturate(115%);
  -webkit-backdrop-filter: blur(7px) saturate(115%);
}
body .header .desktop-nav a {
  height: auto !important;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 9px;
  color: rgba(255, 255, 255, .94) !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .70);
  transition:
    color .16s ease,
    background-color .16s ease,
    transform .16s ease;
}
body .header .desktop-nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .09);
  transform: translateY(-1px);
}
body .header .desktop-nav a.active {
  color: #fff !important;
  background: rgba(15, 139, 204, .20);
}
body .header .desktop-nav a.active::after {
  left: 13px !important;
  right: 13px !important;
  bottom: 3px !important;
  height: 2px !important;
  border-radius: 999px;
  background: #43c3f5 !important;
  box-shadow: 0 0 10px rgba(67, 195, 245, .52);
}

body .header .header-actions {
  margin-left: 10px !important;
}
body .header .icon-button {
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(4, 17, 29, .28) !important;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 8px 22px rgba(0, 0, 0, .14);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition:
    background-color .16s ease,
    border-color .16s ease,
    transform .16s ease;
}
body .header .icon-button:hover {
  color: #fff !important;
  background: rgba(16, 143, 207, .28) !important;
  border-color: rgba(86, 203, 248, .44);
  transform: translateY(-1px);
}

@media (max-width: 1380px) {
  body .brand {
    width: 480px !important;
    min-width: 480px !important;
    height: 104px !important;
  }
}

@media (max-width: 1180px) {
  body .brand {
    width: 390px !important;
    min-width: 390px !important;
    height: 92px !important;
  }
  body .header .header-inner {
    padding: 0 28px !important;
    gap: 22px !important;
  }
  body .header .desktop-nav a {
    padding: 0 10px;
    font-size: 12.5px !important;
  }
  body .header .header-actions {
    margin-left: 4px !important;
  }
}

@media (max-width: 1040px) {
  body .header {
    height: 122px !important;
    min-height: 122px !important;
  }
  body .brand {
    width: 340px !important;
    min-width: 340px !important;
    height: 82px !important;
  }
  body .header > .mdp-header-photo {
    object-position: 62% center !important;
  }
}

@media (max-width: 820px) {
  body .brand,
  body .footer .brand {
    width: 280px !important;
    min-width: 280px !important;
    height: 70px !important;
  }
  body .launch-brand {
    width: 230px !important;
    min-width: 230px !important;
    height: 48px !important;
  }
  body .header {
    height: 104px !important;
    min-height: 104px !important;
  }
  body .header .header-inner {
    padding: 0 20px !important;
  }
  body .header > .mdp-header-photo {
    object-position: 69% center !important;
  }
  body .header > .mdp-header-overlay {
    background:
      linear-gradient(90deg, rgba(12, 26, 39, .94), rgba(12, 26, 39, .45) 68%, rgba(12, 26, 39, .65)),
      linear-gradient(180deg, rgba(6, 17, 27, .14), rgba(6, 17, 27, .60)) !important;
  }
  body .header .icon-button {
    width: 44px !important;
    height: 44px !important;
  }
}

@media (max-width: 560px) {
  body .brand {
    width: min(330px, calc(100vw - 78px)) !important;
    min-width: 0 !important;
    height: 68px !important;
  }
  body .footer .brand {
    width: min(300px, 100%) !important;
    min-width: 0 !important;
    height: 64px !important;
  }
  body .launch-brand {
    width: min(220px, calc(100vw - 150px)) !important;
    min-width: 0 !important;
    height: 44px !important;
  }
  body .header {
    height: 94px !important;
    min-height: 94px !important;
  }
  body .header .header-inner {
    padding: 0 16px !important;
  }
  body .header > .mdp-header-photo {
    object-position: 76% center !important;
  }
  body .header .icon-button {
    width: 42px !important;
    height: 42px !important;
  }
}