/* =========================================================================
   HERO HORIZON — the wide arc under the analysis form.
   The source PNG sits on a black background, so it is blended with screen
   to drop that black onto the page instead of showing as a rectangle.
   ========================================================================= */

/* The page is exactly one screen tall: the header takes what it needs and the
   hero takes the rest, so the arc is always visible without scrolling. Using
   the layout rather than a hard-coded header height keeps it exact. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.hero {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding-bottom: clamp(140px, 22vh, 260px);
}

.hero-horizon {
  /* Pinned to the bottom of the hero, spanning the full viewport width.
     Its height is capped so the arc never crowds the form on a short
     screen — the image is cropped inside this window rather than scaled. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: clamp(150px, 27vh, 320px);
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
}

.hero-subtitle .hero-line {
  display: block;
}

.hero-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 16px;
  color: #abc9fa;
}

.hero-stars svg {
  display: block;
  width: 22px;
  height: 22px;
}

.hero-star-middle {
  filter: drop-shadow(0 3px 7px rgba(171, 201, 250, 0.65));
}

.hero-horizon img {
  display: block;
  width: 100%;
  height: 100%;
  /* The PNG opens with an empty black band (about 18% of its height); the
     crop starts just below it, so the window shows the lit rim downwards. */
  object-fit: cover;
  object-position: center 26%;
  mix-blend-mode: screen;
  opacity: 0.92;
}

@media (max-width: 720px) {
  /* Phone typography: the desktop display sizes produce four huge lines and
     push the page past one screen, so the whole block steps down. */
  .hero {
    padding-top: 0;
    padding-bottom: clamp(130px, 24vh, 200px);
  }

  .hero:has(#lead-form) {
    width: calc(100% - 16px);
    padding-top: 36px;
  }

  h1 {
    font-size: clamp(32px, 9.4vw, 50px);
    letter-spacing: -1.6px;
    line-height: 1.08;
  }

  .hero-subtitle {
    max-width: none;
    margin: 14px auto 18px;
    font-size: 14.5px;
    line-height: 1.45;
  }

  .analyze-form {
    padding: 14px;
  }

  .input-wrap input {
    height: 40px;
    padding: 0 12px 0 36px;
    font-size: 16px;
  }

  .input-icon {
    left: 11px;
  }

  .input-icon svg {
    width: 16px;
    height: 16px;
  }

  .form-note {
    font-size: 11.5px;
  }

  .hero-horizon {
    height: clamp(130px, 22vh, 230px);
  }
}

/* A short viewport (a phone held sideways, a small laptop window) has the
   width for the desktop display type but not the height: the whole hero steps
   down so the form stays above the fold. */
@media (max-height: 580px) {
  h1 {
    font-size: clamp(26px, 5.4vw, 40px);
    letter-spacing: -1.4px;
    line-height: 1.08;
  }

  .hero-subtitle {
    margin: 14px auto 18px;
    font-size: 14px;
  }

  .hero {
    padding-top: 0;
    padding-bottom: clamp(68px, 24vh, 140px);
  }

  .hero:has(#lead-form) {
    padding-top: 0;
  }

  .analyze-form {
    padding: 12px;
  }

  .form-note {
    font-size: 11px;
  }

  .hero-horizon {
    height: clamp(62px, 20vh, 150px);
  }
}