/* Prevent horizontal scroll caused by lead forms on narrow screens */

html,
body {
  overflow-x: clip;
}

form {
  max-width: 100%;
  min-width: 0;
}

form > .grid.grid-cols-2 {
  min-width: 0;
}

form > .grid.grid-cols-2 > div {
  min-width: 0;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="password"] {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

form .phone-field {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

form .phone-field .iti {
  display: block;
  width: 100%;
  max-width: 100%;
}

form .phone-field .iti input {
  width: 100%;
  box-sizing: border-box;
}

#hero-form,
.form-card-outer {
  min-width: 0;
  max-width: 100%;
}

.form-turnstile {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Turnstile is 300px wide; scale down on mobile and compensate layout box */
@media (max-width: 639px) {
  .form-turnstile .cf-turnstile {
    --turnstile-scale: min(1, calc((100vw - 7rem) / 300));
    transform: scale(var(--turnstile-scale));
    transform-origin: left top;
    width: 300px !important;
    margin-right: calc(300px * (var(--turnstile-scale) - 1));
    margin-bottom: calc(65px * (var(--turnstile-scale) - 1));
  }
}

@media (max-width: 479px) {
  form > .grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  .form-card-outer {
    padding: 1rem;
  }

  .form-card-outer > .rounded-xl {
    padding: 1rem;
  }

  section.bg-gradient-to-br .grid > * {
    min-width: 0;
  }
}