/* Keep the landing hero balanced on desktop while stacking cleanly on mobile. */
@media (min-width: 1024px) {
  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child {
    grid-template-columns: minmax(390px, .82fr) minmax(560px, 1.18fr) !important;
    gap: 34px !important;
    padding-top: 54px !important;
    padding-bottom: 42px !important;
  }

  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child > div:first-child {
    max-width: 540px;
  }

  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child > #how-preview {
    width: 100%;
    max-width: 720px;
    justify-self: end;
    align-self: center;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    padding-top: 42px !important;
  }
}

@media (max-width: 767px) {
  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    padding-top: 32px !important;
    padding-bottom: 28px !important;
  }

  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child > div:first-child {
    width: 100%;
  }

  section.bg-gradient-to-br h1 {
    font-size: clamp(34px, 10.5vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.35px !important;
  }

  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child > #how-preview {
    width: 100%;
    max-width: none;
    order: 2;
  }

  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child > div:first-child {
    order: 1;
  }
}

@media (max-width: 430px) {
  section.bg-gradient-to-br > div.mx-auto.grid.max-w-\[1400px\]:first-child {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  section.bg-gradient-to-br .mt-6.flex.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  section.bg-gradient-to-br .mt-6.flex.gap-3 button {
    width: 100%;
    justify-content: center;
  }

  section.bg-gradient-to-br .mt-6.flex.gap-6 {
    flex-wrap: wrap;
    gap: 8px 14px !important;
  }
}