/* ============================================================
   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;
}

.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-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-sm);
  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 only when the form's `smsConsent` prop is on, so existing
   lead forms are visually unchanged. 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 below it drops to
   match, and ONLY on forms that show the checkbox: carriers want the consent
   disclosure "clear and conspicuous", and consent text set smaller than the
   ordinary legal text beside it reads as deliberate de-emphasis. Scoped to
   .lead-form--sms-consent so every already-live lead form keeps its 14px. */
.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 */
}

.lead-form--sms-consent .lead-form__legal {
  font-size:   var(--font-size-xs);
  line-height: 1.125rem;
}


/* ============================================================
   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--sms-consent .lead-form__fields,
    .lead-form--sms-consent .lead-form__step,
    .lead-form--sms-consent .lead-form__step--active {
      transition: none;
    }
  }

  /* Step swap — MOBILE ONLY, consent-enabled forms 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--sms-consent {
    --lead-step-fade: 120ms;   /* one half of the swap; the whole thing is 2x this */
  }

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

  .lead-form--sms-consent .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, consent-enabled forms only.

     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--sms-consent .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--sms-consent .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 */
}