:root {
  --navy: #1c355e;
  --navy2: #142a4d;
  --gold: #c99a3c;
  --gold2: #e2bc69;
  --coral: #e8482f;
}

.official-mark {
  width: 46px;
  height: 42px;
  object-fit: contain;
}

.nav {
  box-shadow: 0 8px 30px rgb(28 53 94 / 7%);
}

.brand-copy b {
  font-size: 13px;
}

.hero h1,
.value-banner h2,
.section-intro h2,
.host h2,
.community h2,
.origin h2,
.offer h2,
.final-cta h2 {
  letter-spacing: -.045em;
}

.hero h1 em {
  text-decoration: underline;
  text-decoration-color: rgb(201 154 60 / 42%);
  text-decoration-thickness: 7px;
  text-underline-offset: 5px;
}

.impact {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

.feature-grid article {
  border-top: 3px solid transparent;
}

.feature-grid article:hover {
  border-top-color: var(--gold);
}

.offer-title {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: center;
}

.offer-title > div {
  display: flex;
  flex-direction: column;
}

.offer-official-logo {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 3px;
}

footer {
  grid-template-columns: 140px 1fr;
  background: #1c355e;
  border-top: 1px solid rgb(255 255 255 / 12%);
}

.footer-official-logo {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

footer p {
  color: #fff;
  font-weight: 700;
  line-height: 1.8;
}

.legal {
  color: #b8c5d9;
}

@media (max-width: 600px) {
  .official-mark {
    width: 38px;
    height: 35px;
  }

  .brand-copy b {
    font-size: 10px;
  }

  .hero h1 em {
    text-decoration-thickness: 4px;
  }

  .offer-title {
    grid-template-columns: 62px 1fr;
  }

  .offer-official-logo {
    width: 62px;
    height: 62px;
  }

  footer {
    grid-template-columns: 105px 1fr;
  }

  .footer-official-logo {
    width: 105px;
    height: 105px;
  }

  footer .legal {
    grid-column: 1 / -1;
  }
}