:root {
  --ls-home-nav-height: 74px;
}

/*
 * Keep the complete homepage hero inside the first viewport. The navbar is
 * fixed, so its height is reserved inside the hero instead of letting the
 * first badge sit underneath it.
 */
[aria-label="Love Solutions hero"] {
  height: 100svh;
  min-height: 100svh !important;
  max-height: 100svh;
}

[aria-label="Love Solutions hero"] > .relative.z-10.flex {
  box-sizing: border-box;
  height: 100%;
  min-height: 0 !important;
  padding-top: calc(var(--ls-home-nav-height) + 10px) !important;
  padding-bottom: 10px !important;
}

[aria-label="Love Solutions hero"] .max-w-3xl {
  box-sizing: border-box;
  max-height: 100%;
  overflow: visible !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

/* The animated line must wrap instead of being clipped at the card edge. */
[aria-label="Love Solutions hero"] .text-lg.font-semibold.leading-snug,
[aria-label="Love Solutions hero"] .text-lg.font-semibold.leading-snug > div {
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  [aria-label="Love Solutions hero"] .max-w-3xl img {
    width: min(320px, 42vw) !important;
    max-width: 320px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .mt-8 {
    margin-top: 1.25rem !important;
  }
}

/*
 * Laptop browser viewports commonly leave only 700–850px after tabs and the
 * address bar. Tighten only vertical rhythm; content and actions stay intact.
 */
@media (min-width: 768px) and (max-height: 900px) {
  :root {
    --ls-home-nav-height: 66px;
  }

  [aria-label="Love Solutions hero"] > .relative.z-10.flex {
    align-items: flex-start !important;
    padding-top: calc(var(--ls-home-nav-height) + 8px) !important;
    padding-bottom: 8px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl {
    margin-top: auto;
    margin-bottom: auto;
    padding: 10px 42px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl img {
    width: min(270px, 36vw) !important;
    max-width: 270px !important;
    margin-top: 10px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .mt-4 {
    margin-top: 8px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .mt-5,
  [aria-label="Love Solutions hero"] .max-w-3xl .mt-6 {
    margin-top: 10px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .mt-8,
  [aria-label="Love Solutions hero"] .max-w-3xl .mt-10 {
    margin-top: 12px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .h-10 {
    height: 26px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .min-h-14 {
    min-height: 52px !important;
  }
}

@media (min-width: 768px) and (max-height: 740px) {
  [aria-label="Love Solutions hero"] .max-w-3xl {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl img {
    width: min(220px, 32vw) !important;
    max-width: 220px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl .mt-4,
  [aria-label="Love Solutions hero"] .max-w-3xl .mt-5,
  [aria-label="Love Solutions hero"] .max-w-3xl .mt-6,
  [aria-label="Love Solutions hero"] .max-w-3xl .mt-8,
  [aria-label="Love Solutions hero"] .max-w-3xl .mt-10 {
    margin-top: 7px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --ls-home-nav-height: 64px;
  }

  [aria-label="Love Solutions hero"] {
    height: auto;
    max-height: none;
    min-height: 100svh !important;
    overflow-x: hidden;
    overflow-y: visible;
  }

  [aria-label="Love Solutions hero"] > .relative.z-10.flex {
    min-height: 100svh !important;
    height: auto;
    padding-top: calc(var(--ls-home-nav-height) + 10px) !important;
    padding-bottom: 18px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl {
    max-height: none;
    padding: 12px 16px 16px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl > .relative.z-10 > :last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl > .relative.z-10 > :last-child > * {
    min-height: 64px !important;
    padding: 7px 4px !important;
    gap: 4px !important;
  }

  [aria-label="Love Solutions hero"] .max-w-3xl > .relative.z-10 > :last-child p {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}