.vision-menu {
  width: min(450px, calc(100vw - 18px)) !important;
  max-width: 450px !important;
  padding-left: 2.1rem !important;
  padding-right: 2.1rem !important;
}

.vision-menu > p {
  margin-bottom: 1rem !important;
}

.vision-menu > a:not(.vision-menu-flagship):not(.vision-menu-join) {
  padding: .78rem 0 !important;
}

.vision-menu a.vision-menu-flagship {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100% !important;
  margin: .72rem 0 !important;
  padding: .76rem .86rem .8rem !important;
  border: 1px solid var(--wm-orange) !important;
  border-radius: 7px;
  background: #fffaf1 !important;
  color: var(--wm-deep) !important;
  text-align: left !important;
  box-shadow: 0 3px 9px #052a5f12;
}

.vision-menu a.vision-menu-flagship span {
  display: block;
  margin: 0 0 .28rem !important;
  color: var(--wm-orange) !important;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}

.vision-menu a.vision-menu-flagship strong {
  display: block;
  max-width: 100%;
  color: var(--wm-deep);
  font-size: clamp(.82rem, 3.7vw, 1.06rem);
  font-weight: 900;
  line-height: 1.12;
  white-space: nowrap;
}

.vision-menu a.vision-menu-flagship:hover,
.vision-menu a.vision-menu-flagship:focus-visible {
  border-color: var(--wm-orange) !important;
  background: #fff1dc !important;
  color: var(--wm-deep) !important;
  transform: translateY(-1px);
}

.vision-menu a.vision-menu-join {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin: .82rem 0 0 !important;
  padding: .86rem 1rem !important;
  border: 1px solid var(--wm-blue) !important;
  border-radius: 7px;
  background: var(--wm-blue) !important;
  color: #fff !important;
  font-size: 1.12rem;
  font-weight: 900;
  box-shadow: 0 5px 13px #052a5f2b;
}

.vision-menu a.vision-menu-join span {
  color: var(--wm-gold) !important;
  font-size: 1.18rem;
}

.vision-menu a.vision-menu-join:hover,
.vision-menu a.vision-menu-join:focus-visible {
  border-color: var(--wm-deep) !important;
  background: var(--wm-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

@media (max-width: 850px) {
  .vision-menu {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .vision-menu a.vision-menu-flagship {
    padding: .62rem .76rem .66rem !important;
  }

  .vision-menu > a:not(.vision-menu-flagship):not(.vision-menu-join) {
    padding: .7rem 0 !important;
  }
}

@media (max-height: 650px) {
  .vision-menu > p {
    margin-bottom: .3rem !important;
  }

  .vision-menu > a:not(.vision-menu-flagship):not(.vision-menu-join) {
    padding: .36rem 0 !important;
  }

  .vision-menu a.vision-menu-flagship {
    margin: .25rem 0 !important;
    padding: .48rem .7rem .52rem !important;
  }

  .vision-menu a.vision-menu-join {
    margin-top: .32rem !important;
    padding: .53rem .72rem !important;
    font-size: 1rem;
  }
}

@media (max-height: 520px) {
  .vision-menu > p {
    margin-bottom: .18rem !important;
  }

  .vision-menu > a:not(.vision-menu-flagship):not(.vision-menu-join) {
    padding: .26rem 0 !important;
  }

  .vision-menu a.vision-menu-flagship {
    padding: .38rem .62rem .42rem !important;
  }

  .vision-menu a.vision-menu-flagship span {
    margin-bottom: .18rem !important;
    font-size: .51rem;
  }

  .vision-menu a.vision-menu-join {
    padding: .4rem .62rem !important;
    font-size: .94rem;
  }
}