/* ============================================================
   LeadFormSection — "Ready to talk?" 2-step lead capture form
   ============================================================ */

/* ---- Calendly inline widget container ---- */
.lead-calendly {
  position:  relative;
  min-width: 320px;
  height:    700px;
  width:     100%;
}

/* Custom preloader — centered, sits behind the widget */
.lead-calendly__preloader {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         0;
}

.lead-calendly__spinner {
  width:         36px;
  height:        36px;
  border:        2.5px solid var(--border);
  border-top-color: var(--foreground);
  border-radius: var(--radius-full);
  animation:     lead-spin 0.7s linear infinite;
}

@keyframes lead-spin {
  to { transform: rotate(360deg); }
}

/* Calendly widget fills the container on top of the preloader */
.lead-calendly__widget {
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* Suppress Calendly's own spinner — we show ours instead */
.lead-calendly__widget .calendly-spinner {
  display: none !important;
}

/* ---- Outer section ---- */
.lead-form-section {
  position:    relative;
  padding:     8rem 0;
  background:  linear-gradient(
                 180deg,
                 rgba(229, 223, 213, 0.5) 0%,
                 rgba(222, 215, 204, 0.5) 100%
               ),
               var(--background);
  font-family: var(--font-family-default);
  width:       100%;
  box-sizing:  border-box;
  overflow:    hidden;
}

/* Desktop only: tablet (≤991) and mobile already sit at 96 / 64 below. */
@media (min-width: 992px) {
  .lead-form-section[data-spacing="compact"] {
    padding-block: 6rem;   /* 96px */
  }
}

.lead-form-section[data-bg="background"] {
  background: var(--background);
}

.lead-form-section[data-bg="secondary"] {
  background: var(--secondary);
}

.lead-form-section[data-variant="with-social-proof"] {
  --lead-proof-overlay-color: var(--secondary);
  padding-top: 4rem;
}

.lead-form-section[data-variant="with-social-proof"][data-bg="background"] {
  --lead-proof-overlay-color: var(--background);
}

.lead-form-section__inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   2rem;
}


/* ============================================================
   Left: copy
   ============================================================ */

.lead-form-section__copy {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;
  padding-right:  4rem;
}

.lead-form-section[data-heading-level="1"] .lead-form-section__copy {
  gap: 3rem;
}

.lead-form-section__heading {
  margin:      0;
  font-size:   2.25rem;
  font-weight: var(--font-weight-bold);
  line-height: 2.5rem;
  color:       var(--foreground);
}

.lead-form-section[data-heading-level="1"] .lead-form-section__heading {
  font-size:   3rem;
  line-height: 3rem;
}

.lead-form-section__body {
  margin:      0;
  font-size:   1.25rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.75rem;
  color:       var(--foreground);
}


/* ============================================================
   Blue card variant — copy left, lead form in a cream card right,
   both inside one noise-textured blue banner card.
   Figma VX9tmGCEcVnJ7Fo9Fk8gee · section 6327:6754 · card 6327:6790
   ============================================================ */

.lead-form-section__blue-card {
  position:              relative;
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding:               var(--spacing-3);   /* 12px */
  border-radius:         var(--radius-lg);   /* 24px */
  background:            var(--color-brand-blue-500);
  overflow:              hidden;
}

/* Noise texture on top of the blue — same treatment as AirTrialSection */
.lead-form-section__blue-card::before {
  content:           '';
  position:          absolute;
  inset:             0;
  border-radius:     var(--radius-lg);
  background-image:  url("https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/6a10ffdb2b90b09311ca7952_the-noise.svg");
  background-repeat: repeat;
  background-size:   200px 200px;
  mix-blend-mode:    screen;
  opacity:           0.5;
  pointer-events:    none;
}

/* Copy spans columns 1–2 */
.lead-form-section__blue-copy {
  position:        relative;
  grid-column:     span 2;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  gap:             0;
  padding:         var(--spacing-4) 3rem 2.5rem;   /* 16px 48px 40px */
  min-width:       0;
}

.lead-form-section__blue-text {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);   /* 24px */
  /* Narrower than the column it sits in — this is what produces the design's
     two-line heading. At 48px the heading measures 578px up to "…clients" and
     631px once "to" joins it, so the measure has to land between them. */
  max-width:      620px;
}

/* Both pairs sit above the shared type scale — this banner heading is the
   largest type on the page, bigger than `.hp-heading`'s 36/40, and the body
   is a step up from `.hp-body`'s 20/28. Sizes derived from the Figma frame by
   matching rendered ink width, line-heights from the measured line pitch
   (52px heading, 32px body). Not tokenised: no other component uses them. */
.lead-form-section__blue-heading {
  margin:      0;
  font-size:   3rem;                  /* 48px */
  font-weight: var(--font-weight-bold);
  line-height: 3.25rem;               /* 52px */
  color:       var(--accent);
}

.lead-form-section__blue-body {
  margin:      0;
  font-size:   var(--font-size-2xl);  /* 24px */
  line-height: var(--line-height-2xl);/* 32px */
  color:       var(--accent);
}

/* Form card is column 3 — it hugs its content instead of stretching.
   `.lead-form` already ships the exact cream-card chrome the design calls
   for (--secondary bg, 0.5px --border, 12px radius, 24px block padding),
   so nothing here re-declares it — that would double the border/padding. */
.lead-form-section[data-variant="blue-card"] .lead-form {
  position:   relative;
  align-self: start;
  min-width:  0;
}


/* ============================================================
   With Social Proof variant
   ============================================================ */

.lead-form-section__social-inner {
  display:        flex;
  flex-direction: column;
  gap:            4rem;
}

/* Outer box: separates the text block from the badges */
.lead-form-section__social-copy {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;
  max-width:      64rem;
  width:          100%;
}

/* Inner box: heading + body copy as one unit */
.lead-form-section__social-text {
  display:        flex;
  flex-direction: column;
  gap:            2rem;
}

.lead-form-section__social-body {
  color:       var(--foreground);
  font-size:   var(--font-size-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);
  margin:      0;
  max-width:   40rem;
}

.lead-form-section__badges {
  max-width: 30rem;
}

@media (max-width: 520px) {
  .lead-form-section__badges {
    margin-left:  -2rem;
    margin-right: -2rem;
  }
}


.lead-form-section__social-content {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:                   1rem;
  align-items:           stretch;
  isolation:             isolate;
}

.lead-form-section[data-variant="with-social-proof"] .lead-form {
  align-self:    stretch;
  border-radius: var(--radius-lg);
  height:        100%;
  position:      relative;
  z-index:       2;
}

.lead-social-proof {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
  height:         100%;
  min-width:      0;
  position:       relative;
  z-index:        1;
}

.lead-proof-slider {
  --lead-proof-gap: 16px;
  --lead-proof-mobile-card-inset: 32px;
  --lead-proof-overlay-width: max(5rem, calc((100vw - 1024px) / 2));
  --lead-proof-transition-duration: 320ms;
  flex:       1 1 auto;
  min-height: 16.75rem;
  min-width:  0;
  overflow:   visible;
  position:   relative;
  z-index:    0;
}

.lead-proof-slider__stage {
  height:   100%;
  overflow: visible;
  position: relative;
  width:    100%;
}

.lead-proof-slider__track {
  cursor:     default;
  display:    flex;
  gap:        var(--lead-proof-gap);
  height:     100%;
  touch-action: pan-y;
  transition: margin-left var(--lead-proof-transition-duration) ease;
  user-select: none;
  width:      100%;
}

.lead-proof-slider--mobile .lead-proof-slider__track {
  cursor: grab;
}

.lead-proof-slider--mobile .lead-proof-slider__track:active {
  cursor: grabbing;
}

.lead-proof-slider__track--resetting {
  transition: none;
}

.lead-proof-slider .lead-proof-slide {
  flex:   0 0 var(--lead-proof-slide-width, 100%);
  height: 100%;
  opacity: 1;
  transition: opacity var(--lead-proof-transition-duration) ease;
  width:  var(--lead-proof-slide-width, 100%);
}

.lead-proof-slider .lead-proof-slide--exiting {
  opacity: 0;
}

.lead-proof-slider__overlay {
  align-items:     center;
  display:         flex;
  justify-content: flex-end;
  padding-right:   2rem;
  box-sizing:      border-box;
  position:       absolute;
  top:            0;
  bottom:         0;
  left:           100%;
  width:          var(--lead-proof-overlay-width);
  background:     linear-gradient(to right, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 60%);
  pointer-events: none;
  z-index:        2;
}

.lead-proof-slider__overlay--left {
  display: none;
}

.lead-proof-slider__nav {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           2.5rem;
  height:          2.5rem;
  padding:         0;
  color:           var(--primary);
  background:      var(--background);
  border:          1px solid var(--primary);
  border-radius:   var(--radius-full);
  cursor:          pointer;
  pointer-events:  auto;
  transform:       translateX(0);
  transition:      border-color 120ms ease,
                   color 120ms ease,
                   opacity 200ms ease,
                   transform 200ms ease;
}

.lead-proof-slider__nav:hover {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

.lead-proof-slider__nav svg {
  width:  1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .lead-proof-slider__track {
    transition: none;
  }
}


.sr-only {
  clip:        rect(0 0 0 0);
  clip-path:   inset(50%);
  height:      1px;
  overflow:    hidden;
  position:    absolute;
  white-space: nowrap;
  width:       1px;
}


/* ============================================================
   Right: form card
   ============================================================ */

.lead-form {
  display:        flex;
  flex-direction: column;
  gap:            0;
  background:     var(--secondary);
  border:         0.5px solid var(--border);
  border-radius:  12px;
  overflow:       hidden;
  padding:        1.5rem 0;
}

/* Both long/short variants are always in the DOM (never conditionally
   rendered) so a future A/B test tool can toggle visibility itself —
   `data-form-variant` on `.lead-form` only picks the default-visible one. */
.lead-form__variant {
  display:        none;
  flex:           1 1 auto;
  flex-direction: column;
  gap:            0;
  min-height:     0;
}

.lead-form[data-form-variant="long"] .lead-form__variant--long,
.lead-form[data-form-variant="short"] .lead-form__variant--short {
  display: flex;
}

/* Step label */
.lead-form__step-label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       rgba(40, 40, 37, 0.4);
  padding:     0 1.75rem;
}

/* Fields container — grid so both steps occupy the same cell */
.lead-form__fields {
  display:  grid;
  padding:  1.5rem 1.5rem 0;
  position: relative;   /* anchor for the out-of-flow inactive step at ≤479px */
}

/* Both steps stack in cell 1/1; inactive step is invisible but still occupies space */
.lead-form__step {
  grid-column:    1;
  grid-row:       1;
  display:        flex;
  flex-direction: column;
  gap:            1.5rem;
  visibility:     hidden;
  pointer-events: none;
}

.lead-form__step--active {
  visibility:     visible;
  pointer-events: auto;
}

/* Side-by-side row (first/last name) */
.lead-form__row {
  display: flex;
  gap:     0.75rem;
}

.lead-form__row .lead-field {
  flex: 1;
}

/* Footer */
.lead-form__footer {
  display:         flex;
  justify-content: flex-end;
  margin-top:      auto;
  padding:         1.5rem 1.5rem 0;
}

.lead-form__footer--split {
  justify-content: space-between;
}


/* ============================================================
   Form field
   ============================================================ */

.lead-field {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.lead-field-group {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.lead-field--conditional {
  max-height:     0;
  opacity:        0;
  overflow:       hidden;
  transform:      translateY(-2px);
  pointer-events: none;
  transition:
    max-height 180ms ease-out,
    opacity 120ms ease-out,
    transform 160ms ease-out;
}

.lead-field--conditional-visible {
  max-height:     88px;
  opacity:        1;
  transform:      translateY(0);
  pointer-events: auto;
}

.lead-field--conditional__inner {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding-top:    1.5rem;
}

.lead-field__label {
  margin:      0;
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.lead-field__required {
  color: var(--primary);
}

/* Shared input base */
.lead-field__input,
.lead-field__select {
  width:         100%;
  height:        36px;
  padding:       4px 12px;
  background:    var(--background);
  border:        0.5px solid var(--input, var(--border));
  border-radius: 8px;
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-regular);
  line-height:   var(--line-height-sm);
  color:         var(--foreground);
  box-shadow:    0 1px 3px 0 rgba(0, 0, 0, 0.05);
  box-sizing:    border-box;
  outline:       none;
  transition:    border-color 150ms ease;
}

.lead-field__input::placeholder {
  color: var(--muted-foreground);
}

.lead-field__input:focus,
.lead-field__select:focus {
  border-color: var(--foreground);
}

.lead-field__input--error {
  border-color: var(--destructive);
}

.lead-field__error {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--destructive);
}

/* Select */
.lead-field__select-wrap {
  position: relative;
}

.lead-field__select {
  appearance:    none;
  cursor:        pointer;
  padding-right: 2.25rem;
}

.lead-field__select:invalid,
.lead-field__select option[value=""] {
  color: var(--muted-foreground);
}

.lead-field__select-icon {
  position:       absolute;
  right:          10px;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--muted-foreground);
  display:        flex;
  align-items:    center;
}



/* ============================================================
   Radio group
   ============================================================ */

.lead-radio-group {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  padding-top:    4px;
}

.lead-radio {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  cursor:      pointer;
}

/* Hide native radio */
.lead-radio__input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

/* Custom dot */
.lead-radio__dot {
  flex-shrink:   0;
  width:         16px;
  height:        16px;
  margin-top:    2px;   /* optical alignment with label text */
  border-radius: var(--radius-full);
  border:        1.5px solid var(--border);
  background:    var(--background);
  box-shadow:    0 1px 3px rgba(26, 26, 24, 0.05);
  box-sizing:    border-box;
  transition:    border-color 150ms ease, background 150ms ease;
}

.lead-radio__dot--checked {
  background: var(--primary);
  box-shadow: inset 0 0 0 3px var(--background);
}

.lead-radio__input:focus-visible + .lead-radio__dot {
  outline:        2px solid var(--foreground);
  outline-offset: 2px;
}

.lead-radio__text {
  display:        flex;
  flex-direction: column;
  gap:            0;
  flex:           1;
  min-width:      0;
}

.lead-radio__label {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-sm);
  color:       var(--foreground);
}

.lead-radio__desc {
  font-size:   var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  color:       var(--muted-foreground);
}


/* ============================================================
   Legal text
   ============================================================ */

.lead-form__legal {
  margin:      0;
  font-size:   var(--font-size-xs);   /* matches the consent text above it — see .lead-form__legal-group */
  font-weight: var(--font-weight-regular);
  line-height: 1.125rem;
  color:       var(--muted-foreground);
  text-align:  center;
}

.lead-form__legal-link {
  color:                 inherit;
  text-decoration:       underline;
  text-underline-offset: 2px;
  transition:            color 150ms ease;
}

.lead-form__legal-link:hover {
  color: var(--foreground);
}


/* ============================================================
   SMS consent checkbox (A2P 10DLC)

   Rendered on every lead form. Control styling mirrors
   .lead-radio above (same 16px box, border, focus ring) — square with
   a checkmark instead of round with a dot.
   ============================================================ */

.lead-consent {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  cursor:      pointer;
}

/* Hide native checkbox — the visible control is .lead-consent__box */
.lead-consent__input {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.lead-consent__box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           16px;
  height:          16px;
  margin-top:      2px;   /* optical alignment with label text */
  border-radius:   4px;   /* no token at this size — --radius-sm (8px) reads as a squircle on a 16px box */
  border:          1.5px solid var(--border);
  background:      var(--background);
  box-shadow:      0 1px 3px rgba(26, 26, 24, 0.05);
  box-sizing:      border-box;
  color:           var(--primary-foreground);
  transition:      border-color 150ms ease, background 150ms ease;
}

.lead-consent__box--checked {
  background:   var(--primary);
  border-color: var(--primary);
}

.lead-consent__input:focus-visible + .lead-consent__box {
  outline:        2px solid var(--foreground);
  outline-offset: 2px;
}

.lead-consent__text {
  flex:        1;
  min-width:   0;
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.125rem;   /* 18px — --line-height-sm (20px) is loose at 12px */
  color:       var(--muted-foreground);
}

/* Consent copy is four lines of carrier-mandated text, so it's set at 12px to
   keep it from dominating the form. The general legal line beside it is set to
   match (see .lead-form__legal): carriers want the consent disclosure "clear
   and conspicuous", and consent text set smaller than the ordinary legal text
   next to it reads as deliberate de-emphasis. */
.lead-form__legal-group {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;   /* half the 1.5rem step gap — one fine-print cluster, not two blocks */
}


/* ============================================================
   Footer buttons
   ============================================================ */

/* Back — secondary pill */
.lead-form__back {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1.5rem 0.625rem 1rem;
  background:      transparent;
  border:          1px solid var(--primary);
  border-radius:   var(--radius-full);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--primary);
  cursor:          pointer;
  transition:      border-color 120ms ease, color 120ms ease;
}

.lead-form__back:hover {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

/* Next — secondary pill */
.lead-form__next {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.625rem 1rem 0.625rem 1.5rem;
  background:      transparent;
  border:          1px solid var(--primary);
  border-radius:   var(--radius-full);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  color:           var(--primary);
  cursor:          pointer;
  transition:      border-color 120ms ease, color 120ms ease;
}

.lead-form__next:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
}

.lead-form__next:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* Submit wrapper + error */
.lead-form__submit-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0.5rem;
}

.lead-form__submit-error {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xs);
  color:       var(--destructive);
}

/* Submit — primary pill */
.lead-form__submit {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.625rem 1rem 0.625rem 1.5rem;
  background:    var(--primary);
  border:        none;
  border-radius: var(--radius-full);
  font-family:   var(--font-family-default);
  font-size:     var(--font-size-sm);
  font-weight:   var(--font-weight-medium);
  line-height:   var(--line-height-sm);
  color:         var(--primary-foreground);
  cursor:        pointer;
}

.lead-form__submit:not(:disabled) {
  transition: opacity 150ms ease;
}

.lead-form__submit:hover:not(:disabled) {
  opacity: 0.88;
}

.lead-form__submit:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .lead-form-section {
    padding: 6rem 0;
  }

  .lead-form-section[data-variant="with-social-proof"] {
    padding-top: 2rem;
  }

  .lead-form-section__inner {
    grid-template-columns: 1fr;
  }

  .lead-form-section__social-inner {
    gap: 3rem;
  }

  .lead-form-section__social-copy {
    gap: 2rem;
  }

  .lead-form-section__social-content {
    grid-template-columns: 1fr;
  }

  .lead-form-section__copy {
    padding-right: 0;
    gap:           2rem;
  }

  .lead-form {
    margin-left: -1rem;
    width:       calc(100% + 2rem);
  }

  .lead-form-section[data-variant="with-social-proof"] .lead-form,
  .lead-form-section[data-variant="blue-card"] .lead-form {
    margin-left: 0;
    width:       100%;
  }

  /* Blue card stacks: copy above the form card */
  .lead-form-section__blue-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .lead-form-section__blue-copy {
    grid-column: span 1;
    padding:     var(--spacing-6) var(--spacing-6) var(--spacing-8);   /* 24 / 24 / 32 */
  }

  /* Once stacked, 48px is far too big for the narrower column — step both
     pairs down to the shared scale's `.hp-heading` / `.hp-body`. */
  .lead-form-section__blue-heading {
    font-size:   2.25rem;   /* 36px */
    line-height: 2.5rem;    /* 40px */
  }

  .lead-form-section__blue-body {
    font-size:   var(--font-size-xl);     /* 20px */
    line-height: var(--line-height-xl);   /* 28px */
  }

  .lead-proof-slider__overlay--left {
    background:      linear-gradient(to left, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 60%);
    display:         flex;
    justify-content: flex-start;
    left:            auto;
    padding-left:    2rem;
    padding-right:   0;
    right:           100%;
  }
}


/* ============================================================
   Mobile (≤767px)
   ============================================================ */

@media (max-width: 767px) {
  .lead-form-section {
    padding: 4rem 0;
  }

  .lead-form-section[data-variant="with-social-proof"] {
    padding: 2rem 0 5rem;
  }

  .lead-form-section__heading {
    font-size:   1.875rem;
    line-height: 2.25rem;
  }

  .lead-form-section[data-heading-level="1"] .lead-form-section__heading {
    font-size:   2.25rem;
    line-height: 2.5rem;
  }

  .lead-form-section[data-heading-level="1"] .lead-form-section__copy {
    gap: 2.25rem;
  }

  .lead-form-section__body {
    font-size:   1.125rem;
    line-height: 1.75rem;
  }

  .lead-form-section__social-text {
    gap: 1.5rem;
  }

  .lead-form-section__blue-copy {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-6);   /* 16 / 16 / 24 */
  }

  .lead-form-section__blue-heading {
    font-size:   1.875rem;  /* 30px */
    line-height: 2.25rem;   /* 36px */
  }

  .lead-form-section__blue-body {
    font-size:   var(--font-size-lg);     /* 18px */
    line-height: var(--line-height-lg);   /* 28px */
  }

  .lead-form-section__social-body {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .lead-proof-slider {
    --lead-proof-mobile-card-width: calc(100% - var(--lead-proof-mobile-card-inset));
    --lead-proof-overlay-width: calc((100vw - var(--lead-proof-mobile-card-width)) / 2);
    min-height: 18rem;
  }

  .lead-proof-slider__stage {
    margin: 0 auto;
    width:  var(--lead-proof-mobile-card-width);
  }

  .lead-proof-slider__overlay {
    background:    linear-gradient(to right, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 50%);
    justify-content: center;
    left:          auto;
    padding-right: 0;
    right:         calc((100vw - 100%) / -2);
  }

  .lead-proof-slider__overlay--left {
    background:   linear-gradient(to left, transparent 0%, var(--lead-proof-overlay-color, var(--background)) 50%);
    justify-content: center;
    left:         calc((100vw - 100%) / -2);
    padding-left: 0;
    right:        auto;
  }

  .lead-proof-slider__nav {
    width:  2rem;
    height: 2rem;
  }
}


/* ============================================================
   Portrait mobile (≤479px)
   ============================================================ */

@media (max-width: 479px) {
  .lead-form-section[data-heading-level="1"] .lead-form-section__heading {
    font-size:   2rem;
    line-height: 2.25rem;
  }

  .lead-form__row {
    flex-direction: column;
  }

  /* Lives here rather than beside the other reduced-motion rule above: the
     transitions it switches off only exist at this width. */
  @media (prefers-reduced-motion: reduce) {
    .lead-form .lead-form__fields,
    .lead-form .lead-form__step,
    .lead-form .lead-form__step--active {
      transition: none;
    }
  }

  /* Step swap — MOBILE ONLY.

     Above 479px the steps swap instantly on `visibility`, exactly as every
     lead form has always done; there is no height change to cover up there,
     so a fade would be motion for its own sake. Everything below exists only
     because the card resizes at this width.

     Sequential, not a cross-fade: the outgoing step fades out, and only then
     does the incoming one fade in — the two are never on screen together.
     Each half is --lead-step-fade; the entering step just delays its fade by
     that same amount, so the pair reads as one quick out-then-in.

     `visibility` can't tween, so it flips at the far end of the fade on the
     way out (keeping the leaving step painted long enough to actually fade)
     and immediately on the way in (so the entering step is paintable while it
     is still at opacity 0). */
  .lead-form {
    --lead-step-fade: 120ms;   /* one half of the swap; the whole thing is 2x this */
  }

  .lead-form .lead-form__step {
    opacity:    0;
    transition: opacity    var(--lead-step-fade) ease,
                visibility 0s linear var(--lead-step-fade);
  }

  .lead-form .lead-form__step--active {
    opacity:    1;
    transition: opacity    var(--lead-step-fade) ease var(--lead-step-fade),
                visibility 0s linear 0s;
  }

  /* Per-step card height on narrow screens.

     At this width .lead-form__row stacks, so step 2 regains the row that
     pairing email+phone reclaimed and would once again out-measure step 1.
     The card is full-width and short here, so letting it resize reads better
     than carrying the gap.

     Above 479px the steps stay locked to one shared height (both in grid cell
     1/1) because the card sits beside page content there and resizing would
     shift it. Do not extend this past this breakpoint.

     Both steps stay stacked in the SAME cell so neither ever moves — the
     outgoing one is taken out of flow, which leaves the cell sized by the
     active step alone. An auto height can't be tweened, so LeadForm sets an
     explicit px height on this element (see the mobile-height effect); the
     transition below is what makes that change ease instead of snap.

     The height waits out the fade-out (delay = one fade) and then moves with
     the fade-in. Starting it immediately makes the two directions behave
     differently: going forward the card only ever grows, so nothing is
     clipped, but going back it shrinks while step 2 is still visible and
     `overflow: hidden` eats its content from the bottom mid-fade — which
     reads as Back being harsher than Next off the same code. Resizing only
     once the old step has gone keeps both directions identical. */
  .lead-form .lead-form__fields {
    overflow:   hidden;
    transition: height var(--lead-step-fade) ease var(--lead-step-fade);
  }

  /* Offsets are 0, not the container's 1.5rem padding: an absolutely
     positioned grid child is laid out against its GRID AREA, which is already
     inside that padding. Using 1.5rem here double-counts it and the outgoing
     step sits 24px down and right of the incoming one — a visible jump mid
     fade, which is the whole thing this is meant to avoid.

     The end lines must be spelled out too. The shared rule above says
     `grid-column: 1`, which sets only the START line and leaves the end
     `auto` — and for an out-of-flow grid child an `auto` line resolves to the
     container's PADDING edge, not the grid area. The box then measures
     342 → 366 the moment it goes absolute, so its inputs visibly jag 24px
     past the card edge for the length of the fade. `1 / 2` pins both edges. */
  .lead-form .lead-form__step:not(.lead-form__step--active) {
    position:    absolute;
    grid-column: 1 / 2;
    grid-row:    1 / 2;
    inset:       0 0 auto 0;
  }

  .lead-form-section__social-inner {
    gap: 2.25rem;
  }

  .lead-proof-slider {
    min-height: 21rem;
  }

  .lead-proof-slide .case-study-card__author-group {
    align-items: flex-start;
  }

  .lead-proof-slide .case-study-card__author-name,
  .lead-proof-slide .case-study-card__author-role {
    white-space: normal;
  }

  .lead-social-proof .ratings-bar--grid-2-col {
    grid-template-columns: 1fr;
  }

  .lead-social-proof .ratings-bar__item {
    flex-direction: row;
    align-items: center;
  }
}


/* ---- Optional CTA pair (`primaryLabel`) -------------------
   The Legal Hub closing section (Figma 865:7500) puts two buttons where the
   body paragraph normally goes. Rendered only when `primaryLabel` is passed, so
   every existing consumer keeps its paragraph and this rule never applies. */
.lead-form-section__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--spacing-3);   /* 12px */
}


/* ============================================================
   Variant: closing-panel — the redesign's closing cream panel, TOP half
   (docs/redesign-design-language.md §4). First built as the About page's
   AboutCtaSection (Figma b54Vp5G1JrG0jhDNIxBaxz 7214:10259; now archived); values are its.

   The panel spans this section AND the footer under it, so it is open at the
   bottom: no bottom border or corners, and its --secondary → --background
   gradient stops at --closing-panel-mid, where SiteFooter's `closing-panel`
   variant picks it up. Place the two together.
   ============================================================ */

.lead-form-section[data-variant="closing-panel"] {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  /* Figma's py 128 counts from the panel's outer edge at the top, where the
     16px border sits inside it; the bottom runs on into the footer. */
  padding:        7rem 0 8rem;                  /* 112px / 128px */
  background:     linear-gradient(180deg, var(--secondary) 0%, var(--closing-panel-mid) 100%);
  border:         16px solid var(--background-white);
  border-bottom:  0;
  border-radius:  48px 48px 0 0;                /* no 48px radius token */
}

/* Max 1024, gap 32, both columns `flex: 1 1 0` (496 each at 1024). The
   inline padding is `.container`'s 80 with the 16px border handed back, so
   the heading sits on the same edge as every section above at every width. */
.lead-form-section__panel-row {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-8);                /* 32px */
  width:       100%;
  max-width:   calc(1024px + 128px);
  padding:     0 64px;
  box-sizing:  border-box;
}

/* Heading, then the body 36px below; the text's 432 measure is set on the
   children — padding on a `flex: 1 1 0` column is added to its share. */
.lead-form-section__panel-intro {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;                      /* 36px — no --spacing-9 */
  flex:           1 1 0;
  min-width:      0;
}

.lead-form-section__panel-intro > * {
  max-width: calc(100% - 4rem);                 /* 496 - 32 - 32 = 432 */
}

.lead-form-section__panel-form {
  display:   flex;
  flex:      1 1 0;
  min-width: 0;
}

/* `margin-left: 0`: the stock ≤991 rule bleeds every `.lead-form` 1rem past
   its column, which here pushes the card into the panel's border. */
.lead-form-section[data-variant="closing-panel"] .lead-form {
  width:       100%;
  margin-left: 0;
  /* On the cream panel the card inverts: WHITE, no border, cream inputs.
     Colours only — fields and the Salesforce contract are untouched. */
  background:  var(--card);
  border:      0;
}

.lead-form-section[data-variant="closing-panel"] .lead-field__input,
.lead-form-section[data-variant="closing-panel"] .lead-field__select {
  background: var(--secondary);
}

@media (max-width: 1199px) {
  .lead-form-section[data-variant="closing-panel"] {
    padding: 6rem 0;                            /* 96px */
  }
}

@media (max-width: 991px) {
  .lead-form-section[data-variant="closing-panel"] {
    padding:       5rem 0;                      /* 80px */
    border-radius: 32px 32px 0 0;
  }

  /* Stacked; 44 + the 16px border = 60, `.container`'s tablet edge. */
  .lead-form-section__panel-row {
    flex-direction: column;
    align-items:    stretch;
    gap:            3rem;                       /* 48px */
    padding:        0 44px;
  }

  .lead-form-section__panel-intro > * {
    max-width: none;
  }
}

/* Intro and form on the 2rem mobile edge: 20 + the 12px border. The space
   above the heading is the section's, the space between intro and form the
   row's gap (the About CTA stacked 16 + 16 and 16 + 24 for the same result). */
@media (max-width: 767px) {
  .lead-form-section[data-variant="closing-panel"] {
    padding:       2rem 0 1rem;                 /* 32px / 16px */
    border-width:  12px 12px 0;
    border-radius: 24px 24px 0 0;
  }

  .lead-form-section__panel-row {
    gap:     2.5rem;                            /* 40px */
    padding: 0 20px;
  }
}