/* ==========================================================================
   Form split
   Figma "Have questions?" (3112:88970), 1440 frame on the lilac gradient
   (.bg-lilac-gradient), 64px top / 80px bottom: a 472px text column (38px
   headline, 20px/24px paragraphs 21px apart, 50px below it) beside a 666px
   white card (12px radius, 40px padding) holding the HubSpot form: 14px
   medium labels 8px above 44px inputs (1px border, 4px radius; Ink 60 in
   Figma, lightened to Ink 30 on request, Ink 60 on hover),
   fields 28px apart, first and last name side by side 16px apart, a
   120px textarea, the consent checkbox, the reCAPTCHA badge centred and a
   40px cyan Submit button.

   The form is HubSpot's legacy markup, styled by .hs-form-theme in
   css/_components.css (shared with the calculator and the compliance
   check). HubSpot injects per-form CSS at
   (0,3,1), e.g. `.hs-form-<id>_<instance> fieldset.form-columns-1
   .hs-input { width: 95% }`, `fieldset.form-columns-2 .hs-form-field
   { width: 50% }` and a 500px cap on fieldsets. It is inlined after the
   theme CSS, so it wins ties: every rule that competes with it must be
   more specific than (0,3,1), not equal (hence the `.hs-form` in the
   field rules below).

   Side by side from 960px of module width; under that the text comes
   first and the card takes the full width.

   A headline tagged H1 (the form is the page's top section, as on the
   health check page) is set a level under the hero size: 56px (H2; 64px
   was too big for a long headline, Chris's review), 48px at 1023px and
   below, 38px at 767px and below.

   Optional illustration (left_illustration): Figma 3170:103622, 370px,
   rotated -6.03deg, blurred, under the text column: its centre 131px in
   from the text's left edge and 94px above the module's bottom, so the
   bubbles sit whole inside the section (91px into the 80px bottom
   padding is transparent margin of the image; _dnd.css clips the section).
   Hidden once stacked, where the card covers it.
   ========================================================================== */

.form-split {
  container: form-split / inline-size;
  position: relative;
  width: 100%;
}

.form-split__layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl, 48px);
}

.form-split__text {
  display: flex;
  flex: 0 1 472px;
  flex-direction: column;
  gap: 50px;
  min-width: 0;
  padding-top: 10px; /* Figma: the headline starts 10px below the card */
}

.form-split--no-form .form-split__text {
  flex-basis: 784px;
  padding-top: 0;
}

.form-split .form-split__headline {
  color: var(--fg);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.76px;
}

.form-split--h1 .form-split__headline {
  font-size: var(--font-size-h2, 56px);
  letter-spacing: var(--letter-spacing-h2, -1.12px);
}

.form-split .form-split__description {
  color: var(--fg);
  line-height: 24px;
}

.form-split .form-split__description p {
  margin: 0 0 21px;
}

.form-split .form-split__description :last-child {
  margin-bottom: 0;
}

.form-split__card {
  flex: 0 1 666px;
  min-width: 0;
  padding: var(--space-lg, 40px);
  border-radius: var(--radius-panel, 12px);
  background-color: var(--color-neutral-00, #ffffff);
  color: var(--fg);
}

/* Illustration: decorative, behind the content, cropped by the section
   -------------------------------------------------------------------------- */
.form-split__art {
  position: absolute;
  z-index: 0;
  bottom: -91px;
  left: -54px;
  width: 370px;
  height: auto;
  rotate: -6.03deg;
  filter: blur(4.67px);
  pointer-events: none;
}

/* Parallax: the art starts 60px above its design position and settles
   into it as the section crosses the viewport (reached as the section
   leaves under the header). It never passes the design position: the
   bubbles end only 23px above the section's clipped edge. Browsers without
   scroll timelines, and reduced motion, keep it still at the design
   position. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .form-split {
      view-timeline: --form-split block;
      view-timeline-inset: var(--header-height, 86px) 0px;
    }

    .form-split__art {
      animation: form-split-drift linear both;
      animation-timeline: --form-split;
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes form-split-drift {
  from {
    translate: 0 -60px;
  }

  to {
    translate: 0 0;
  }
}

/* HubSpot form: the card carries .hs-form-theme, whose legacy and new
   editor form styles live in css/_components.css
   -------------------------------------------------------------------------- */

/* Stacked: text first, the card full width
   -------------------------------------------------------------------------- */
@container form-split (max-width: 959px) {
  .form-split__art {
    display: none;
  }

  .form-split__layout {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xl, 48px);
  }

  .form-split__text {
    flex: none;
    gap: var(--space-md, 32px);
    max-width: 640px;
    padding-top: 0;
  }

  .form-split__card {
    flex: none;
  }
}

/* Narrow card: names one per row */
@container form-split (max-width: 479px) {
  .form-split .form-split__card fieldset.form-columns-2,
  .form-split .form-split__card fieldset.form-columns-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023px) {
  .form-split--h1 .form-split__headline {
    font-size: var(--font-size-h3, 48px);
    letter-spacing: var(--letter-spacing-h3, -0.96px);
  }
}

@media (max-width: 767px) {
  .form-split--h1 .form-split__headline {
    font-size: 38px;
    letter-spacing: -0.76px;
  }

  /* Stacked: 32px between the text and the form (48px above 767px) */
  .form-split__layout {
    gap: var(--space-md, 32px);
  }

  .form-split .form-split__description {
    font-size: var(--font-size-md, 18px);
    line-height: 1.25;
  }

  .form-split__card {
    padding: var(--space-sm, 24px);
  }
}