/* Mobile companion layout for the Lightning Spend site. */
html,
body {
  max-width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: auto;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: block;
  width: 8px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #c3c6d7;
  border-radius: 8px;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

@media (max-width: 639px) {
  body {
    min-width: 0;
  }

  header .h-20,
  header .h-20.max-w-7xl {
    height: 4rem !important;
  }

  main.pt-20 {
    padding-top: 4rem !important;
  }

  header .w-8.h-8 {
    display: none;
  }

  header .h-8,
  header .h-9 {
    height: 1.75rem !important;
  }

  .px-gutter-mobile {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .font-headline-xl,
  .text-headline-xl {
    font-size: 2rem !important;
    line-height: 2.45rem !important;
    letter-spacing: 0 !important;
  }

  .font-headline-lg,
  .text-headline-lg {
    font-size: 1.75rem !important;
    line-height: 2.2rem !important;
    letter-spacing: 0 !important;
  }

  .font-headline-md,
  .text-headline-md {
    font-size: 1.25rem !important;
    line-height: 1.7rem !important;
  }

  .font-body-lg,
  .text-body-lg {
    font-size: 1rem !important;
    line-height: 1.65rem !important;
  }

  #solutions {
    padding-top: 2rem !important;
    padding-bottom: 2.5rem !important;
  }

  #solutions .inline-flex.items-center.gap-space-xs {
    width: 100%;
    justify-content: center;
  }

  #solutions > .grid,
  #solutions .grid {
    gap: 1.5rem !important;
  }

  #solutions .pt-space-md.flex.items-center {
    flex-wrap: wrap;
    gap: 0.75rem !important;
  }

  .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .overflow-x-auto {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  table {
    min-width: 38rem;
  }

  .flex.flex-wrap.items-center.justify-center.gap-space-sm,
  .flex.flex-wrap.items-center.gap-space-sm {
    align-items: stretch;
  }

  .flex.flex-wrap.items-center.justify-center.gap-space-sm > a,
  .flex.flex-wrap.items-center.gap-space-sm > a {
    width: 100%;
    justify-content: center;
  }

  .fixed.bottom-6.right-6 {
    right: 1rem !important;
    bottom: 1rem !important;
  }

  #support-menu {
    width: min(15rem, calc(100vw - 2rem));
    min-width: 0 !important;
  }

  #support-btn {
    height: 2.75rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  footer .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  footer .grid {
    gap: 1.5rem !important;
  }

  footer .mt-space-2xl {
    margin-top: 2rem !important;
  }

  .rounded-2xl {
    border-radius: 0.875rem;
  }
}