/* Reusable native-dialog modal system. */
.modal {
  width: min(calc(100% - 2rem), 72rem);
  max-width: none;
  max-height: min(calc(100dvh - 2rem), 52rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(16, 23, 34, .12);
  border-radius: 1.15rem;
  background: #f7f9fb;
  color: #101722;
  box-shadow: 0 2rem 6rem rgba(9, 12, 16, .28);
}

.modal::backdrop {
  background: rgba(9, 12, 16, .48);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__surface {
  position: relative;
  max-height: inherit;
  padding: clamp(1.5rem, 3vw, 2.75rem);
  overflow: auto;
}

.modal__close {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #101722;
}

.modal__close:hover {
  background: rgba(16, 23, 34, .06);
}

.modal__close:focus-visible,
.how-it-works-carousel__arrow:focus-visible,
.how-it-works-carousel__dots button:focus-visible,
.how-it-works-modal__dismiss:focus-visible {
  outline: 3px solid rgba(63, 126, 232, .34);
  outline-offset: 3px;
}

.how-it-works-modal__header {
  max-width: 42rem;
  margin: 0 auto clamp(1.35rem, 2.5vw, 2rem);
  padding: 0 2.5rem;
  text-align: center;
}

.how-it-works-modal__eyebrow,
.how-it-works-step__number {
  margin: 0;
  color: #7a8494;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
}

.how-it-works-modal__header h2 {
  margin: .35rem 0 .55rem;
  font-family: Gazpacho, Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 4.2vw, 4.1rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .95;
}

.how-it-works-modal__header > p:last-child {
  margin: 0;
  color: #647084;
  font-size: 1rem;
  line-height: 1.45;
  text-align: center;
}

.how-it-works-carousel__viewport {
  overflow: visible;
}

.how-it-works-carousel__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}

.how-it-works-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2rem;
  border: 1px solid rgba(16, 23, 34, .11);
  border-radius: .8rem;
  background: rgba(255, 255, 255, .58);
  text-align: center;
}

.how-it-works-step__icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  margin-bottom: .65rem;
  border-radius: 50%;
  background: #eee8f1;
}

.how-it-works-step__icon--map {
  background: #e5edf8;
}

.how-it-works-step__icon--translate {
  background: #f0e8ee;
}

.how-it-works-step__icon img {
  width: 1.45rem;
  height: 1.45rem;
  opacity: .72;
}

.how-it-works-step__number {
  margin-bottom: .2rem;
}

.how-it-works-step h3 {
  margin: 0 0 .5rem;
  font-family: Gazpacho, Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1;
}

.how-it-works-step > p:last-of-type {
  min-height: 5.8em;
  margin: 0;
  color: #5f6b7d;
  font-size: .88rem;
  line-height: 1.45;
  text-align: center;
}

.how-it-works-step__preview {
  width: 100%;
  margin: auto 0 0;
  padding-top: 1rem;
}

.how-it-works-step__preview img {
  width: 100%;
  aspect-ratio: 8 / 5;
  display: block;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(16, 23, 34, .12);
  border-radius: .55rem;
  background: #f7f9fb;
  box-shadow: 0 .55rem 1.4rem rgba(16, 23, 34, .08);
}

.how-it-works-step__preview figcaption {
  margin-top: .55rem;
  color: #7a8494;
  font-size: .75rem;
  letter-spacing: .02em;
  text-align: center;
}

.how-it-works-carousel__controls {
  display: none;
}

.how-it-works-modal__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  margin-top: 1.4rem;
}

.how-it-works-modal__footer .button {
  min-width: min(100%, 17rem);
}

.how-it-works-modal__dismiss {
  padding: .35rem .7rem;
  border: 0;
  background: transparent;
  color: #647084;
  font: inherit;
  font-size: .88rem;
  font-weight: 400;
}

.how-it-works-modal__dismiss:hover {
  color: #101722;
}

@media (max-width: 720px) {
  .modal {
    width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: 1rem;
  }

  .modal__surface {
    padding: 1.25rem 1rem 1.4rem;
  }

  .modal__close {
    top: .65rem;
    right: .65rem;
  }

  .how-it-works-modal__header {
    margin-bottom: 1rem;
    padding: 0 2rem;
  }

  .how-it-works-modal__header h2 {
    font-size: clamp(2.3rem, 12vw, 3.25rem);
  }

  .how-it-works-modal__header > p:last-child {
    font-size: .9rem;
  }

  .how-it-works-carousel__viewport {
    margin-inline: -.25rem;
    padding-inline: .25rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .how-it-works-carousel__viewport::-webkit-scrollbar {
    display: none;
  }

  .how-it-works-carousel__track {
    display: flex;
    gap: .75rem;
  }

  .how-it-works-step {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 1rem;
  }

  .how-it-works-step > p:last-of-type {
    min-height: 0;
    max-width: 28rem;
  }

  .how-it-works-step__preview {
    max-width: 25rem;
  }

  .how-it-works-carousel__controls {
    display: grid;
    grid-template-columns: 2.5rem 1fr 2.5rem;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
  }

  .how-it-works-carousel__arrow {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(16, 23, 34, .14);
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
  }

  .how-it-works-carousel__arrow:disabled {
    opacity: .35;
    cursor: default;
  }

  .how-it-works-carousel__dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
  }

  .how-it-works-carousel__dots button {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(74, 31, 81, .22);
    transition: width 160ms ease, background-color 160ms ease;
  }

  .how-it-works-carousel__dots button[aria-current="true"] {
    width: 1.4rem;
    background: #4a1f51;
  }

  .how-it-works-modal__footer {
    margin-top: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works-carousel__viewport {
    scroll-behavior: auto;
  }
}