body {
  font-family: "Manrope", "Trebuchet MS", sans-serif;
}

h1,
h2,
.brand,
.trust-num,
.service-num,
.step b {
  font-family: "Unbounded", "Arial Narrow", sans-serif;
}

h1,
.title {
  text-wrap: balance;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 9px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.hero-grid > div,
.hero .calc {
  animation: reveal 650ms cubic-bezier(.2, .8, .2, 1) both;
}

.hero .calc {
  animation-delay: 120ms;
}

.brand-mark,
.calc-icon {
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}

.btn,
.service,
.review,
.bank,
.contact-link {
  will-change: transform;
}

.service:hover,
.review:hover,
.bank:hover {
  transform: translateY(-4px);
}

.service,
.review,
.bank {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.service:hover,
.review:hover {
  box-shadow: 0 18px 46px rgb(24 58 43 / 10%);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--lime) 72%, white);
  outline-offset: 3px;
}

.btn:disabled {
  cursor: wait;
  opacity: .7;
  transform: none;
}

.honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.status {
  min-height: 1.45em;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

.status.is-success {
  color: #a8e0bd;
}

.modal .status.is-success {
  color: var(--green);
}

.status.is-error {
  color: #ffb7a8;
}

.modal .status.is-error {
  color: #a33323;
}

.modal-open {
  overflow: hidden;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}