.container {
  width: min(calc(100% - (2 * var(--content-gutter))), var(--container-width));
  margin-inline: auto;
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-7);
}

.section-muted {
  background: var(--color-surface);
}

.section-heading {
  max-width: 46rem;
  margin-bottom: var(--space-5);
}

.header-inner,
.hero-grid,
.split-layout,
.footer-grid {
  display: grid;
  gap: var(--space-5);
}

.header-inner {
  min-height: 4.75rem;
  grid-template-columns: minmax(max-content, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
}

.site-nav {
  justify-self: end;
}

.site-nav ul,
.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-2), 1.5vw, var(--space-4));
}

.site-nav a:not(.button) {
  display: inline-block;
  padding-block: var(--space-2);
  text-decoration: none;
}

.site-nav .button {
  min-height: 2.5rem;
  padding-inline: var(--space-4);
}

.hero-grid,
.split-layout {
  grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
  align-items: center;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-block: var(--space-5);
}

.button-group-centered {
  justify-content: center;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-left: 1.25rem;
}

.card-grid,
.process-grid,
.benefit-grid {
  display: grid;
  gap: var(--space-4);
}

.card-grid-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-left: 1.25rem;
}

.footer-grid {
  grid-template-columns: minmax(16rem, 2fr) repeat(2, minmax(10rem, 1fr));
  gap: clamp(var(--space-5), 6vw, var(--space-7));
}

@media (max-width: 62rem) {
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
    padding: 0 var(--content-gutter) var(--space-4);
    border-bottom: 0.0625rem solid var(--color-border);
    background: var(--color-bg);
    box-shadow: var(--shadow-header);
  }

  .js .site-nav:not([data-open="true"]) {
    display: none;
  }

  .site-nav ul {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-1);
    max-width: var(--container-width);
    margin-inline: auto;
  }

  .site-nav a {
    width: 100%;
  }


  .site-nav a:not(.button) {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
  }

  .site-nav a:not(.button):hover {
    background: var(--color-surface);
  }

  .card-grid-six,
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 44rem) {
  .section {
    padding-block: var(--space-6);
  }

  .hero-grid,
  .split-layout,
  .card-grid-six,
  .card-grid-three,
  .process-grid,
  .benefit-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .button-group .button {
    width: 100%;
  }
}

@media (min-width: 62.001rem) {
  body:has(.site-nav[data-open="true"]) {
    overflow: visible;
  }
}