.auth-brand-identity img {
  width: 150px;
  height: 54px;
}

.auth-brand-identity strong {
  display: none;
}

.auth-mascot img {
  max-width: 290px;
}

.brand img {
  width: 190px;
  height: 80px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 1px 0 #ffffffcc) drop-shadow(0 5px 8px #132c3d2b);
}

.sidebar {
  background:
    linear-gradient(112deg, #ffffff8f 0 7%, #ffffff00 18% 72%, #ffffff5c 83%, #ffffff00 94%),
    repeating-linear-gradient(90deg, #ffffff08 0 1px, #2a37400a 1px 3px),
    linear-gradient(145deg, #eef1f3 0%, #a8b0b6 23%, #f8fafb 48%, #8d969d 73%, #d9dee1 100%);
  border-right: 1px solid #6f7a82;
  color: #102c40;
  box-shadow: inset -1px 0 #ffffff99, 8px 0 24px #0d2b4017;
}

.sidebar nav > p,
.sidebar .mode-switcher {
  color: #374c5b;
}

.sidebar .nav-link,
.sidebar .side-menu-button {
  color: #203a4c;
  text-shadow: 0 1px #ffffffa8;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active,
.sidebar .side-menu-button:hover,
.sidebar .side-menu-button[aria-expanded="true"] {
  background: #ffffff70;
  color: #071f31;
}

.sidebar .nav-link.active {
  box-shadow: inset 3px 0 #0d2b40, inset 0 1px #ffffffa8;
}

.sidebar .nav-coming-soon small {
  color: #526675;
}

.sidebar .side-menu-button,
.sidebar .usage-menu-button,
.sidebar .mode-switcher select {
  border-color: #5d6b7547;
  background: #ffffff5c;
  color: #102c40;
  box-shadow: inset 0 1px #ffffffb8;
}

.site-brand img {
  width: 176px;
  height: 58px;
}

.phone-bar img {
  width: 110px;
  height: 58px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 1px 0 #ffffffcc) drop-shadow(0 4px 7px #132c3d26);
}

.final-cta img {
  width: 190px;
  height: 95px;
}

footer .site-brand img {
  padding: 4px 7px;
  border-radius: 10px;
  background: #fff8e8;
}

@media (max-width: 760px) {
  .nav-brand-row .brand {
    width: 102px;
    flex-basis: 102px;
  }

  .nav-brand-row .brand img {
    width: 112px;
    height: 56px;
    left: -5px;
  }
}

@media (max-width: 430px) {
  .nav-brand-row .brand {
    width: 86px;
    flex-basis: 86px;
  }

  .nav-brand-row .brand img {
    width: 96px;
    height: 48px;
    left: -5px;
  }
}

@media (max-width: 680px) {
  .auth-brand-identity img {
    width: 132px;
    height: 42px;
  }

  .auth-mascot img {
    max-width: 250px;
    max-height: 150px;
  }
}

@media (max-width: 560px) {
  .site-brand img {
    width: 145px;
    height: 48px;
  }
}