body {
  /* top level variables */
  --page-gutter: 135px;

  /* variable overrides */
  --font-family: "Bricolage Grotesque", sans-serif;
  --logo-font-family: "Outfit", sans-serif;
  --navigation-bottom-padding: 18px;
  --body-line-height: 1.8rem;
  --body-font-size: 1.5rem;
  --cta-button-font-size: 1.25rem;
  --cta-button-padding: 16px 24px;
  --button-background-color: #077acb;
  --button-secondary-background-color: var(--royal-900);
  --navigation-horizontal-padding: var(--page-gutter);

  /* new variables  */
  --hero-gutter: var(--page-gutter);
  --full-page-content-gutter: var(--page-gutter);
  --full-page-content-vertical-spacing: 100px;
  --full-page-section-padding: var(--full-page-content-vertical-spacing)
    var(--full-page-content-gutter) var(--full-page-content-vertical-spacing)
    var(--full-page-content-gutter);
  --h2-font: var(--bold-font-weight) 14px var(--font-family);
  --p-font: 22px/31.6px var(--font-family);
  --ul-font: var(--light-font-weight) 20px var(--font-family);
  --hero-p-font: var(--regular-font-weight) var(--body-font-size)
    var(--font-family);

  background-color: var(--royal-900);
}

.getting-started {
  background-color: var(--royal-900);

  .happy-dev {
    width: 70px;
    height: auto;
  }
}

.new-way {
  --section-background-color: var(--royal-900);
}

.mobile {
  display: none !important;
}

a {
  text-decoration: none;
}

h2 {
  font: var(--h2-font);
  letter-spacing: 0.4px;
  font-size: 32px;
  line-height: normal;
  text-transform: none;
  margin-bottom: 10px !important;
}

p {
  font: var(--p-font);
  color: #d2c7dd;
}

.footer {
  display: flex;
  justify-content: center;
  background-color: var(--page-background);
  padding: var(--footer-padding) 0;
  font-size: 1rem;
}

.footer span {
  color: var(--footer-font-color);
}

@media (width <= 980px) {
  .colomnar-layout {
    display: flex;
    flex-direction: column;
  }

  :root {
    --hero-gutter: 40px;
    --full-page-content-gutter: 40px;
    --full-page-content-vertical-spacing: 40px;
    --body-font-size: 1.25rem;
    --old-way-copy-max-width: 100%;
    --hero-flex-direction: column;
    --navigation-height: 80px;

    .colomnar-layout,
    .full-width-layout {
      --full-page-section-padding: 45px 40px;
    }

    --hero-padding: 45px 40px;
  }

  .navigation__right {
    display: none !important;
  }

  .navigation__left {
    flex-grow: inherit !important;
  }

  .navigation {
    justify-content: center;
  }

  .metrics .banner {
    padding: 30px !important;
  }

  body .colomnar-layout.notifications {
    --benefits-section-gap: 24px;
  }

  .mobile {
    display: block !important;
  }

  .desktop {
    display: none !important;
  }

  .full-width-layout__content {
    flex-direction: column;
    text-align: left;
  }

  section {
    flex-direction: column;
  }

  .colomnar-layout.getting-started section:last-child {
    order: -1;
  }

  .metrics {
    flex-direction: column;
  }

  .metrics .list {
    padding: 37px 25px !important;
  }

  .metrics-grid {
    grid-template: "metrics-top" auto "metrics-bottom-left" auto "metrics-bottom-right" auto / 1fr !important;
    gap: 30px !important;
  }

  .metrics-top ol {
    columns: 1 !important;
  }
}

ol {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}

ol li {
  list-style: inherit;
  margin-bottom: 0;
  line-height: 28px;
  font-size: 20px;
}

.logo-text {
  font-family: var(--logo-font-family);
}