html {
  font-family: var(--font-sans);
  background: var(--surface-page);
}

body {
  color: var(--text-primary);
}

h1,
h2,
h3,
h4,
button,
input {
  letter-spacing: 0 !important;
}

button,
a {
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.brand-hero-title {
  font-family: var(--font-sans);
  font-size: 96px !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

.brand-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-widest) !important;
  text-transform: uppercase;
}

.brand-copy {
  font-family: var(--font-sans) !important;
}

[style*="font-serif"] {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
}

@media (max-width: 900px) {
  header > div {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    justify-items: center;
  }

  header > div > div {
    justify-content: center !important;
    flex-wrap: wrap;
  }

  section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  [style*="gridTemplateColumns"],
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  h1 {
    font-size: 46px !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: 34px !important;
    line-height: 1.12 !important;
  }

  .brand-hero-title {
    font-size: 56px !important;
  }
}