@charset "UTF-8";
/* ============================================================
   Styles for /contact-sales (ContactSalesFlow.astro)

   Extracted from the inline <style is:global> block in
   src/components/ContactSalesFlow.astro to keep the bundle off
   every page. Compiled standalone to:
     public/wp-styles/contact-sales-flow.css
   and loaded conditionally via the `includeContactSalesFlow`
   prop on Layout.astro (mirrors the includeSlick pattern).

   NOT @imported into style-new.scss on purpose.

   Compile:
     npx sass public/wp-styles/scss-new/contact-sales-flow.scss \
       public/wp-styles/contact-sales-flow.css --no-source-map
   ============================================================ */
/* ── Layout ─────────────────────────────────────────────── */
.demo-qual-modal {
  padding: 0;
  border: none;
  border-radius: 20px;
  width: min(960px, 100vw - 32px);
  max-width: 960px;
  height: min(800px, 100vh - 32px);
  min-height: 800px;
  max-height: calc(100vh - 32px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 64px rgba(0, 0, 0, 0.2);
  font-family: "Gilroy", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #171717;
  overflow: hidden;
  flex-direction: row;
}
.demo-qual-modal[open] {
  display: flex;
}
.demo-qual-modal::backdrop {
  background: rgba(10, 14, 28, 0.6);
  backdrop-filter: blur(2px);
}
.demo-qual-modal[open] {
  animation: demo-qual-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes demo-qual-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ── Close button ────────────────────────────────────────── */
.demo-qual-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  color: #171717;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.demo-qual-modal__close:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* When aside hidden, close button switches to dark */
.demo-qual-modal[data-full-step] .demo-qual-modal__close {
  background: #f5f5f5;
  color: #171717;
}
.demo-qual-modal[data-full-step] .demo-qual-modal__close:hover {
  background: #e8e8e8;
}
.demo-qual-modal[data-full-step] {
  max-height: calc(100vh - 32px);
}

/* ── Logo ────────────────────────────────────────────────── */
.demo-qual-modal__logo {
  /* Invert the dark logo to white on the navy panel */
  filter: brightness(0) invert(1);
  display: block;
}

/* ── Right content panel ─────────────────────────────────── */
.demo-qual-modal__content {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

/* ── Nav row (Back + progress dots) ──────────────────────── */
.demo-qual-modal__nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.demo-qual-modal__nav-row[hidden] {
  display: none;
}
.demo-qual-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 8px;
  margin-left: -8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #71717a;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.demo-qual-modal__back:hover {
  color: #2C64E3;
  background: rgba(44, 100, 227, 0.06);
}
.demo-qual-modal__back[hidden] {
  display: none;
}
.demo-qual-modal {
  /* Inline Back link rendered under the Submit button on the details
     step — duplicates the top-nav Back so it's reachable without
     scrolling up after a long form fill. Mirrors the
     `.demo-qual-modal--alt .demo-qual-modal__back` style contract. */
}
.demo-qual-modal__back-link {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(23, 23, 23, 0.55);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  transition: color 180ms ease;
}
.demo-qual-modal__back-link:hover {
  color: #171717;
}
@media (max-width: 640px) {
  .demo-qual-modal__back-link {
    margin-top: 0;
  }
}

/* ── Step progress dots ──────────────────────────────────── */
.demo-qual-modal__progress {
  display: flex;
  gap: 6px;
  padding: 0;
}
.demo-qual-modal__progress[hidden] {
  display: none;
}
.demo-qual-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e4e4e7;
  transition: background 0.2s, width 0.2s, border-radius 0.2s;
}
.demo-qual-modal__dot[data-active] {
  background: #2C64E3;
  width: 24px;
  border-radius: 50px;
}

/* ── Steps ───────────────────────────────────────────────── */
.demo-qual-modal__step {
  padding: 28px 40px 40px;
}

/* Email + details + outcome steps: center the content group vertically inside
   the 800px modal so we don't strand fields/CTAs at the top of a near-empty
   column. The trust-panel aside is full height regardless. */
[data-step=email],
[data-step=details],
[data-step=recommendation],
[data-step=sales_async] {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-step=recommendation],
[data-step=sales_async] {
  text-align: center;
}

/* Scale up email + details so the form earns its space inside the 800px column.
   Cap the form width so it stays optically tight even though the column is 708px wide. */
[data-step=email],
[data-step=details] {
  align-items: center;
}

[data-step=email] > *,
[data-step=details] > * {
  width: 100%;
  max-width: 440px;
}

[data-step=email] .demo-qual-modal__title,
[data-step=details] .demo-qual-modal__title {
  font-size: 30px;
  margin-bottom: 8px;
}

[data-step=email] .demo-qual-modal__subtitle,
[data-step=details] .demo-qual-modal__subtitle {
  font-size: 15px;
  margin-bottom: 28px;
}

[data-step=email] .demo-qual-modal__form,
[data-step=details] .demo-qual-modal__form {
  gap: 18px;
}

[data-step=email] .demo-qual-modal__field input,
[data-step=details] .demo-qual-modal__field input,
[data-step=email] .demo-qual-modal__select,
[data-step=details] .demo-qual-modal__select {
  height: 54px;
  font-size: 15px;
  padding: 0 16px;
}

[data-step=details] .demo-qual-modal__select {
  padding-right: 38px;
}

[data-step=email] .demo-qual-modal__submit,
[data-step=details] .demo-qual-modal__submit {
  height: 54px;
  font-size: 16px;
  margin-top: 8px;
}

.demo-qual-modal__select {
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #e4e4e7;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #171717;
  background: #fafafa;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23737373' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.demo-qual-modal__select:focus {
  outline: none;
  border-color: rgba(44, 100, 227, 0.12);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(44, 100, 227, 0.12);
}
.demo-qual-modal__select[aria-invalid=true] {
  border-color: #eb7777;
  background-color: #fff5f5;
}
.demo-qual-modal__step[hidden] {
  display: none;
}

/* Full-width steps: aside + progress hidden */
.demo-qual-modal__step--full {
  padding: 28px 32px 20px;
}
.demo-qual-modal__step--loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  gap: 20px;
  padding: 48px 40px;
}

/* ── Step enter animation ────────────────────────────────── */
.demo-qual-modal__step.is-entering {
  animation: step-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ── Typography ──────────────────────────────────────────── */
.demo-qual-modal__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  color: #0f1c47;
  /* Defensive: legacy global styles in style-new.css target `span`
     with their own font/color, which leaks into inline spans used
     for JS-injected text (e.g. [data-async-thanks]). Force inherit
     so the span looks identical to the surrounding heading. */
}
.demo-qual-modal__title span {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.demo-qual-modal__subtitle {
  font-size: 14px;
  color: #737373;
  margin: 0 0 24px;
}

/* ── Form ────────────────────────────────────────────────── */
.demo-qual-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-qual-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.demo-qual-modal__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.demo-qual-modal__label {
  font-size: 12px;
  font-weight: 600;
  color: #404040;
  letter-spacing: 0.01em;
}
.demo-qual-modal__field input {
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #e4e4e7;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #171717;
  background: #fafafa;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.demo-qual-modal__field input::placeholder {
  color: #a1a1aa;
}
.demo-qual-modal__field input:focus {
  outline: none;
  border-color: rgba(44, 100, 227, 0.12);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(44, 100, 227, 0.12);
}
.demo-qual-modal__field input[aria-invalid=true], .demo-qual-modal__field select[aria-invalid=true], .demo-qual-modal__select[aria-invalid=true] {
  border-color: #eb7777;
  background: #fff5f5;
}
.demo-qual-modal__field input[aria-invalid=true]:focus, .demo-qual-modal__field select[aria-invalid=true]:focus, .demo-qual-modal__select[aria-invalid=true]:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.demo-qual-modal__error {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #d92020;
  font-weight: 500;
}
.demo-qual-modal__error[hidden] {
  display: none;
}
.demo-qual-modal {
  /* Honeypot — invisible to users, harvested by spam bots. Must stay in
     the DOM (display:none would tell bots to skip it) but render outside
     the viewport with no interactive surface. */
}
.demo-qual-modal__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Submit button + rec-cta link share one set of styles ─── */
.demo-qual-modal__submit, .demo-qual-modal__rec-cta {
  height: 48px;
  border: none;
  border-radius: 50px;
  background: #2C64E3;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.demo-qual-modal__submit:hover, .demo-qual-modal__rec-cta:hover {
  background: #1f4fc0;
}
.demo-qual-modal__submit:active, .demo-qual-modal__rec-cta:active {
  transform: scale(0.98);
}
.demo-qual-modal__submit[disabled], .demo-qual-modal__rec-cta[disabled] {
  opacity: 0.6;
  cursor: wait;
}

/* ── Use-case card grid ──────────────────────────────────── */
.demo-qual-modal__card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.demo-qual-modal__card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e4e4e7;
  border-radius: 12px;
  cursor: pointer;
  background: #fafafa;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}
.demo-qual-modal__card:hover {
  border-color: #a3a3a3;
  background: #fff;
}
.demo-qual-modal__card input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.demo-qual-modal__card-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #171717;
}
.demo-qual-modal__card:has(input:checked) .demo-qual-modal__card-icon {
  color: #2C64E3;
}
.demo-qual-modal__card-text {
  font-size: 14px;
  font-weight: 500;
  color: #171717;
}
.demo-qual-modal__card:has(input:checked) {
  border-color: #2C64E3;
  background: rgba(44, 100, 227, 0.06);
}
.demo-qual-modal__card:has(input:checked) .demo-qual-modal__card-text {
  color: #2C64E3;
}
.demo-qual-modal__card--span2 {
  grid-column: span 2;
}

/* ── Volume radio options ────────────────────────────────── */
.demo-qual-modal__radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.demo-qual-modal__radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid #e4e4e7;
  border-radius: 12px;
  cursor: pointer;
  background: #fafafa;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  user-select: none;
}
.demo-qual-modal__radio:hover {
  border-color: #a3a3a3;
  background: #fff;
}
.demo-qual-modal__radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.demo-qual-modal__radio-text {
  font-size: 14px;
  font-weight: 500;
  color: #171717;
  flex: 1;
}
.demo-qual-modal__radio-tag {
  font-size: 11px;
  font-weight: 600;
  color: #737373;
  background: #f4f4f5;
  border-radius: 50px;
  padding: 3px 10px;
  letter-spacing: 0.01em;
}
.demo-qual-modal__radio:has(input:checked) {
  border-color: #2C64E3;
  background: rgba(44, 100, 227, 0.04);
}
.demo-qual-modal__radio:has(input:checked) .demo-qual-modal__radio-tag {
  background: #fff;
  color: #2C64E3;
}

/* ── Scheduler ───────────────────────────────────────────── */
/* Scheduler step: iframe fills modal edge-to-edge, only Zoom scrolls */
[data-step=scheduler].demo-qual-modal__step {
  padding: 0;
  overflow: hidden;
  max-height: none;
  flex-direction: column;
  flex: 1;
}

[data-step=scheduler].demo-qual-modal__step:not([hidden]) {
  display: flex;
}

[data-step=scheduler] .demo-qual-modal__title,
[data-step=scheduler] .demo-qual-modal__subtitle {
  padding: 0 28px;
}

[data-step=scheduler] .demo-qual-modal__title {
  padding-top: 28px;
}

.demo-qual-modal__scheduler {
  position: relative;
  flex: 1;
  min-height: 800px;
  overflow: hidden;
}
.demo-qual-modal__scheduler iframe {
  width: 100%;
  height: 100%;
  min-height: 800px;
  border: none;
  display: none;
}
.demo-qual-modal__scheduler iframe.is-loaded {
  display: block;
}

/* ── Spinner ─────────────────────────────────────────────── */
.demo-qual-modal__spinner {
  width: 28px;
  height: 28px;
  margin: 48px auto 12px;
  border: 2.5px solid #e4e4e7;
  border-top-color: #2C64E3;
  border-radius: 50%;
  animation: demo-qual-spin 0.75s linear infinite;
}
.demo-qual-modal__spinner--lg {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-width: 3px;
}
.demo-qual-modal__scheduler-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.demo-qual-modal__scheduler-loading-text {
  margin: 0 0 16px;
  font-size: clamp(10px, 0.97vw, 17px);
  color: #71717a;
  text-align: center;
}
@media (max-width: 640px) {
  .demo-qual-modal__scheduler-loading-text {
    font-size: 18px;
  }
}

@keyframes demo-qual-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ── Progress bar (loading step) ────────────────────────── */
.demo-qual-modal__loading-msg {
  font-size: clamp(10px, 0.97vw, 17px);
  color: #71717a;
  margin-bottom: 16px;
  text-align: center;
}
@media (max-width: 640px) {
  .demo-qual-modal__loading-msg {
    font-size: 3.73vw;
  }
}
.demo-qual-modal__progress-track {
  width: 240px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 99px;
  overflow: hidden;
}
.demo-qual-modal__progress-bar {
  height: 100%;
  width: 0%;
  background: #2C64E3;
  border-radius: 99px;
}

/* ── Self-serve recommendation step ─────────────────────── */
.demo-qual-modal__rec-check {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 4px;
}
.demo-qual-modal__rec-body {
  font-size: 23px;
  line-height: 135%;
  color: #3c3c43;
  opacity: 0.7;
  margin: 0 0 30px;
}
@media (max-width: 640px) {
  .demo-qual-modal__rec-body {
    font-size: 4.53vw;
    line-height: 127%;
    margin: 0 0 clamp(28px, 3.5vh, 48px);
  }
}
.demo-qual-modal {
  /* "What to expect" bulleted list with checkmark icons.
     Block is centered horizontally (auto margins + max-width),
     but text inside is left-aligned for bullet readability. */
}
.demo-qual-modal__rec-expect {
  list-style: none;
  margin: 0 auto 30px;
  padding: 0;
  max-width: 480px;
  text-align: left;
}
.demo-qual-modal__rec-expect li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: clamp(15px, 1.18vw, 19px);
  line-height: 1.4;
  color: #3c3c43;
}
.demo-qual-modal__rec-expect li:last-child {
  margin-bottom: 0;
}
.demo-qual-modal__rec-expect li span {
  font-size: 23px;
}
.demo-qual-modal__rec-expect svg {
  flex-shrink: 0;
  margin-top: 2px;
}
@media (max-width: 640px) {
  .demo-qual-modal__rec-expect {
    margin: 0 0 24px;
    max-width: none;
  }
  .demo-qual-modal__rec-expect li {
    font-size: 4vw;
    line-height: 1.35;
  }
}
.demo-qual-modal {
  /* Desktop-only line break inside __rec-body (sales_async screen).
     Hidden on mobile so the sentence flows on one wrapped line instead
     of forcing an awkward early break. */
}
@media (max-width: 640px) {
  .demo-qual-modal__br--desktop {
    display: none;
  }
}
.demo-qual-modal {
  /* Primary + secondary CTA pair on outcome screens. Stacked vertically
     on both desktop and mobile. */
}
.demo-qual-modal__rec-ctas {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .demo-qual-modal__rec-ctas {
    align-items: stretch;
    gap: 10px;
  }
}
.demo-qual-modal__rec-secondary {
  margin-top: 14px;
  font-size: clamp(10px, 0.97vw, 17px);
  color: #7d7d85;
  text-align: center;
}
@media (max-width: 640px) {
  .demo-qual-modal__rec-secondary {
    font-size: 3.73vw;
    line-height: 165%;
  }
}
.demo-qual-modal__rec-secondary a {
  color: #2C64E3;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.demo-qual-modal__rec-secondary a:hover {
  color: #1f4fc0;
}
.demo-qual-modal {
  /* Mobile-only line break after "Not what you're looking for?" on the
     recommendation outcome screen — pushes the Log In / Get Help links
     to their own line for readability. Hidden on desktop where the
     single-line layout fits comfortably. */
}
.demo-qual-modal__rec-secondary-br {
  display: none;
}
@media (max-width: 640px) {
  .demo-qual-modal__rec-secondary-br {
    display: inline;
  }
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .demo-qual-modal {
    flex-direction: column;
    border-radius: 16px;
    max-height: 90vh;
    width: calc(100% - 32px);
    max-width: 100%;
    margin: auto;
  }
  .demo-qual-modal__close {
    background: rgba(0, 0, 0, 0.06);
    color: #171717;
  }
  .demo-qual-modal__close:hover {
    background: rgba(0, 0, 0, 0.1);
  }
  .demo-qual-modal__step {
    padding: 16px 24px 32px;
  }
  .demo-qual-modal__step--full {
    padding: 32px 20px 24px;
  }
  .demo-qual-modal__title {
    font-size: 20px;
  }
  .demo-qual-modal__row {
    grid-template-columns: 1fr;
    gap: 5.33vw;
  }
  /* Alt UI mobile — tighten content/step padding so details step
     fits without overflow scrollbar (which causes asymmetric centering).
     Top-align (vs desktop's center) because the quote forehead and brands
     chin are hidden on mobile, so center-align would strand all the slack
     above the headline as empty "forehead" space. */
  .demo-qual-modal--alt .demo-qual-modal__content {
    padding: 24px 20px 16px;
    justify-content: flex-start;
  }
  .demo-qual-modal--alt .demo-qual-modal__step {
    padding: 0;
  }
  .demo-qual-modal--alt [data-step=details] .demo-qual-modal__subtitle {
    margin-bottom: 20px;
  }
  .demo-qual-modal--alt .demo-qual-modal__form {
    gap: 18px;
  }
}
/* ============================================================
   Active UI (default since 43bd2c0) — editorial / minimal layout.
   Locked-size 1040x820 modal, blue brand strip header, centered
   single-column form with hairline progress, list-style pickers
   for use_case + volume, white quote forehead + brands chin.

   Class is .demo-qual-modal--alt (always applied in markup);
   these rules layer over the base .demo-qual-modal rules above
   via !important. The base rules below the layout overrides still
   provide: placeholder color, error states, disabled state, custom
   radio ::before circle, step enter animation, spinner, progress
   bar, recommendation step typography, [data-full-step] close.
   ============================================================ */
.demo-qual-modal--alt {
  width: min(1040px, 100vw - 32px);
  max-width: 1040px;
  height: min(820px, 100dvh - 48px);
  max-height: calc(100dvh - 48px);
  min-height: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 80px -32px rgba(23, 23, 23, 0.28), 0 1px 0 rgba(23, 23, 23, 0.04);
  overflow: hidden;
}
.demo-qual-modal--alt[open] {
  flex-direction: column;
}
.demo-qual-modal--alt::backdrop {
  background: rgba(23, 23, 23, 0.42);
  backdrop-filter: blur(2px);
}

/* Scheduler step: fill remaining height inside fixed-size modal */
.demo-qual-modal--alt [data-step=scheduler].demo-qual-modal__step {
  padding: 0;
  width: 100%;
  align-items: stretch !important;
}
.demo-qual-modal--alt .demo-qual-modal__scheduler {
  min-height: 0 !important;
  height: 100%;
  width: 100%;
  flex: 1 1 auto;
}
.demo-qual-modal--alt .demo-qual-modal__scheduler iframe {
  min-height: 0;
  height: 100%;
  width: 100%;
}

/* Scheduler step: full-bleed content area */
.demo-qual-modal--alt:has([data-step=scheduler]:not([hidden])) .demo-qual-modal__content {
  padding: 0;
  justify-content: stretch;
}

/* Equalise __content height across use_case + volume + details so the
   card doesn't visually jump as the user advances. The clamp matches the
   typical natural height of the details step (the "normal" reference). */
.contact-sales-flow:has([data-step=use_case]:not([hidden])) .demo-qual-modal__content,
.contact-sales-flow:has([data-step=volume]:not([hidden])) .demo-qual-modal__content,
.contact-sales-flow:has([data-step=details]:not([hidden])) .demo-qual-modal__content {
  min-height: clamp(440px, 56vh, 600px);
}

/* On use_case + volume, top-align the visible step inside __content so the
   heading sits at the same Y across both (otherwise centering inside an
   equal-height container would still drag the heading up/down depending
   on each step's natural content height). details keeps its centered
   form layout. */
.demo-qual-modal--alt:has([data-step=use_case]:not([hidden])) .demo-qual-modal__content,
.demo-qual-modal--alt:has([data-step=volume]:not([hidden])) .demo-qual-modal__content {
  justify-content: flex-start;
}

.demo-qual-modal--alt {
  /* Nav row (with Back button) sits at order:999 — natural placement
     is right after the step content. Previously had `margin-top: auto`
     to anchor it at the bottom, but on the short volume step (4 radios)
     that left the button stranded too far below the options. */
}
.demo-qual-modal--alt [data-step=use_case] .demo-qual-modal__title {
  margin-bottom: 16px;
}
.demo-qual-modal--alt {
  /* Details step has no Back button — once the user reaches the
     contact form they've committed to the flow; backtracking would
     lose use_case + volume context. */
}
.demo-qual-modal--alt:has([data-step=details]:not([hidden])) .demo-qual-modal__back {
  display: none;
}

/* Logo styling for alt UI */
.demo-qual-modal--alt .demo-qual-modal__logo {
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 1;
}

.demo-qual-modal--alt .demo-qual-modal__content {
  order: 1;
  flex: 1 1 auto;
  width: 100%;
  padding: 32px clamp(32px, 5vw, 56px) 24px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  overflow-y: auto;
}
.demo-qual-modal--alt .demo-qual-modal__step:not([hidden]) {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.demo-qual-modal--alt .demo-qual-modal__step[hidden] {
  display: none !important;
}

/* Override base [data-step="email|details|..."] { flex:1; justify-content:center }
   so the nav-row sits directly above the step title on every step. The parent
   .demo-qual-modal__content already centers its children vertically; letting
   a step grow with flex:1 defeats that and strands the back button at the top. */
.demo-qual-modal--alt [data-step=email],
.demo-qual-modal--alt [data-step=details],
.demo-qual-modal--alt [data-step=recommendation],
.demo-qual-modal--alt [data-step=sales_async] {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* Nav row contains Back button + progress dots. Progress dots are hidden
   in --alt mode (rule below), so visually only Back shows here. Pushed to
   end of the content panel via order so Back sits under the form. */
.demo-qual-modal--alt .demo-qual-modal__nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(11px, 1.11vw, 19px);
  margin-bottom: 0;
  gap: 16px;
  min-height: 0;
  order: 999;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt .demo-qual-modal__nav-row {
    margin-top: 5.33vw;
  }
}
.demo-qual-modal--alt .demo-qual-modal__progress {
  display: none;
}
.demo-qual-modal--alt .demo-qual-modal__dot {
  display: none;
}
.demo-qual-modal--alt .demo-qual-modal__back {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(23, 23, 23, 0.55);
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 180ms ease;
}
.demo-qual-modal--alt .demo-qual-modal__back:hover {
  color: #171717;
}
.demo-qual-modal--alt .demo-qual-modal__back[hidden] {
  display: none;
}

/* Close — minimal hairline, sits in blue header */
.demo-qual-modal--alt .demo-qual-modal__close {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
}
.demo-qual-modal--alt .demo-qual-modal__close:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Display headline — oversized, balanced */
.demo-qual-modal--alt .demo-qual-modal__title {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #171717;
  margin: 0 auto 16px;
  text-wrap: balance;
  max-width: 28ch;
  text-align: center;
}
.demo-qual-modal--alt .demo-qual-modal__subtitle {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: rgba(23, 23, 23, 0.55);
  margin: 0 auto 32px;
  max-width: 42ch;
  text-align: center;
}
.demo-qual-modal--alt [data-step=email] .demo-qual-modal__subtitle {
  display: none;
}

/* Form spacing */
.demo-qual-modal--alt .demo-qual-modal__form {
  gap: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* Details step has 2-col rows — give form more breathing room so it
   balances visually with the wider headline */
.demo-qual-modal--alt [data-step=details] > .demo-qual-modal__form,
.demo-qual-modal--alt [data-step=details] > * {
  max-width: 600px;
}
.demo-qual-modal--alt {
  /* Headline "How can we reach you?" must stay on one line.
     Lift the 28ch cap and zero the auto side-margins so the title
     can use the full details-step column width. */
}
.demo-qual-modal--alt [data-step=details] .demo-qual-modal__title {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.demo-qual-modal--alt .demo-qual-modal__row {
  width: 100%;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt .demo-qual-modal__row {
    gap: 3.33vw;
  }
}
.demo-qual-modal--alt .demo-qual-modal__submit {
  align-self: center;
}
.demo-qual-modal--alt .demo-qual-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
}
.demo-qual-modal--alt .demo-qual-modal__label {
  font-size: clamp(8px, 0.83vw, 15px);
  font-weight: 500;
  color: #404040;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt .demo-qual-modal__label {
    font-size: 3.2vw;
  }
}
.demo-qual-modal--alt .demo-qual-modal__field input,
.demo-qual-modal--alt .demo-qual-modal__field select {
  height: 56px;
  padding: 0 18px;
  background: #fafafa;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #171717;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.demo-qual-modal--alt .demo-qual-modal__field input:focus,
.demo-qual-modal--alt .demo-qual-modal__field select:focus {
  outline: none;
  background: #fff;
  border-color: rgba(44, 100, 227, 0.12);
  box-shadow: 0 0 0 4px rgba(44, 100, 227, 0.12);
}

/* Submit — Truv brand pill */
.demo-qual-modal--alt .demo-qual-modal__submit,
.demo-qual-modal--alt .demo-qual-modal__rec-cta {
  height: 56px;
  padding: 0 28px;
  background: #2C64E3;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: center;
  min-width: 180px;
  text-decoration: none;
  transition: background 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}
.demo-qual-modal--alt .demo-qual-modal__submit:hover,
.demo-qual-modal--alt .demo-qual-modal__rec-cta:hover {
  background: #1a4dc2;
  box-shadow: 0 8px 20px -8px rgba(44, 100, 227, 0.45);
}
.demo-qual-modal--alt .demo-qual-modal__submit:active,
.demo-qual-modal--alt .demo-qual-modal__rec-cta:active {
  transform: translateY(1px);
}
.demo-qual-modal--alt {
  /* Secondary CTA — outline variant for the "Watch a Demo" button
     sitting under the primary signup CTA on the outcome screens. */
}
.demo-qual-modal--alt .demo-qual-modal__rec-cta--secondary {
  background: rgba(255, 255, 255, 0.57);
  color: #2C64E3;
  border: 1px solid rgba(95, 124, 190, 0.3803921569);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.demo-qual-modal--alt .demo-qual-modal__rec-cta--secondary:hover {
  background: rgb(255, 255, 255);
  color: #1f4fc0;
  box-shadow: none;
}

/* Use-case picker + Volume radios — mirror .hsfc-RadioFieldGroup__Options>div>.hsfc-FieldLabel
   from form.scss:996 (bordered card with hover state). Icons & text styling left untouched. */
.demo-qual-modal--alt .demo-qual-modal__card-grid,
.demo-qual-modal--alt .demo-qual-modal__radio-group {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.49vw, 7px);
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  text-align: left;
}
.demo-qual-modal--alt .demo-qual-modal__card,
.demo-qual-modal--alt .demo-qual-modal__radio {
  height: clamp(35px, 3.48vw, 61px);
  padding: clamp(12px, 1.18vw, 20px);
  border: 1px solid rgba(191, 197, 211, 0.52);
  border-radius: clamp(6px, 0.63vw, 11px);
  background: rgba(255, 255, 255, 0.6784313725);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  gap: clamp(7px, 0.7vw, 12px);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.demo-qual-modal--alt .demo-qual-modal__card:hover,
.demo-qual-modal--alt .demo-qual-modal__radio:hover {
  border-color: #2563eb;
  background-color: rgba(242, 246, 255, 0.83);
}
.demo-qual-modal--alt {
  /* Wrapper and inline SVG share $iconSz so the icon fills the slot.
     SVG inherits color via stroke="currentColor" → switches to $blue on
     hover/checked. */
}
.demo-qual-modal--alt .demo-qual-modal__card-icon {
  width: clamp(14px, 1.39vw, 24px);
  height: clamp(14px, 1.39vw, 24px);
  background: transparent;
  border: none;
  color: #171717;
  flex: 0 0 clamp(14px, 1.39vw, 24px);
}
.demo-qual-modal--alt .demo-qual-modal__card-icon svg {
  width: clamp(14px, 1.39vw, 24px);
  height: clamp(14px, 1.39vw, 24px);
  display: block;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt .demo-qual-modal__card-icon {
    width: 5.33vw;
    height: 5.33vw;
    flex: 0 0 5.33vw;
  }
  .demo-qual-modal--alt .demo-qual-modal__card-icon svg {
    width: 5.33vw;
    height: 5.33vw;
  }
}
.demo-qual-modal--alt {
  /* Label text — mirrors .hsfc-FieldLabel `span span` from form.scss:1016
     (same mainFontNew mixin as inputs/submit). */
}
.demo-qual-modal--alt .demo-qual-modal__card-text,
.demo-qual-modal--alt .demo-qual-modal__radio-text {
  font-family: "Gilroy", sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 135%;
  letter-spacing: 0;
  color: #171717;
  flex: 1;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt .demo-qual-modal__card-text,
  .demo-qual-modal--alt .demo-qual-modal__radio-text {
    font-size: 4vw;
    line-height: 115%;
  }
}
.demo-qual-modal--alt .demo-qual-modal__radio-tag {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2C64E3;
  background: #EFF3FE;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 500;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.demo-qual-modal--alt .demo-qual-modal__radio:hover .demo-qual-modal__radio-tag {
  background: #fff;
}

@media (max-width: 640px) {
  .demo-qual-modal--alt .demo-qual-modal__card-grid,
  .demo-qual-modal--alt .demo-qual-modal__radio-group {
    gap: 1.67vw;
  }
  .demo-qual-modal--alt .demo-qual-modal__card,
  .demo-qual-modal--alt .demo-qual-modal__radio {
    height: 13.3vw;
    padding: 0 4.5vw;
    border-radius: 2.69vw;
    gap: 2.67vw;
  }
}
/* ── Page-level overrides for inline placement ───────────── */
/* Inline page-level overrides — neutralize dialog box-shadow centering and
   lock the card into its page container. The shared .demo-qual-modal +
   .demo-qual-modal--alt rules earlier in this file provide the layout
   treatment; these layer on top to make it sit on the page rather than
   float above it as a popup. */
/* ── Page-level layout: form first, no hero banner ──────────────
   Cream page bg, form sits at the top of content area (just below
   the global SiteHeader), quote rotator + brands marquee flow
   beneath. No card chrome — feels like a continuation of the home
   page rather than a popped-up modal stuck inline. */
/* Lock /contact-sales to a single, no-scroll viewport. The body class
   comes from contact-sales.astro and clamps html/body so nothing
   outside the section can scroll either. Section flex-columns the
   form / quote / brands so they share the available height. */
/* Lock the page to one viewport: header on top, BrandsMarquee chin on bottom,
   ContactSalesFlow centered in the middle. No scroll. */
html:has(body.contact-sales-fit) {
  overflow: hidden;
  height: 100dvh;
}

/* On the scheduler step the Zoom iframe needs every available pixel of
   vertical space — otherwise Zoom's own UI (calendar + slots + cookie
   banner + timezone) overflows and renders an internal scrollbar.
   Collapse the brands track and hide the marquee so the modal's 1fr
   row absorbs all the height the chin used to occupy. */
body.contact-sales-fit:has([data-step=scheduler]:not([hidden])) {
  grid-template-rows: auto 1fr;
}
body.contact-sales-fit:has([data-step=scheduler]:not([hidden])) > .truv-brands {
  display: none;
}

/* Grid (not flex) so the brands row has an *explicit* track height that
   doesn't depend on image-load state. With min-height + flex the form
   re-centers as brand <img>s paint (some entries in BrandsMarquee have
   no width/height attrs → row grows from ~0 to ~30px, redistributing
   the 1fr middle track). Fixed track height = no CLS. The brands row's
   overflow: hidden clips anything that exceeds the reserved space.
   The no-scroll lock only makes sense on wide + tall viewports — on
   narrow/short screens the form content needs more room than the 1fr
   row can give (e.g. 7 use_case cards stack vertically on mobile), and
   the lock would clip them. Drop the lock there and let the page scroll. */
body.contact-sales-fit {
  overflow: hidden;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr clamp(157px, 15.62vw, 273px);
}
@media (max-width: 640px) {
  body.contact-sales-fit {
    grid-template-rows: auto 1fr calc(28vw + 17px);
  }
}

/* Short or narrow viewports — drop the page-height lock so content can
   scroll naturally instead of being clipped by `overflow: hidden`. */
@media (max-width: 768px), (max-height: 760px) {
  html:has(body.contact-sales-fit) {
    overflow: visible;
    height: auto;
  }
  body.contact-sales-fit {
    overflow: visible;
    height: auto;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    grid-template-rows: none;
  }
}
/* Outcome screens (sales_async / recommendation) render the ReviewCarousel
   below the brands marquee — that content exceeds 100dvh, so drop the
   page-height lock and let the page scroll naturally. */
html:has(body.contact-sales-fit [data-step=sales_async]:not([hidden])),
html:has(body.contact-sales-fit [data-step=recommendation]:not([hidden])) {
  overflow: visible;
  height: auto;
}

body.contact-sales-fit:has([data-step=sales_async]:not([hidden])),
body.contact-sales-fit:has([data-step=recommendation]:not([hidden])) {
  overflow: visible;
  height: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  grid-template-rows: none;
}

body.contact-sales-fit > .truv-brands {
  overflow: hidden;
  min-height: 0;
}

body.contact-sales-fit > .contact-sales-flow {
  overflow: hidden;
  min-height: 0;
}

/* Sign Up in the page header — keep it as a plain text link on mobile too.
   Override navigation.scss (≤992px) which turns it into a full-width pill button. */
@media (max-width: 992px) {
  .truv-navigation-one-logo .truv-nav-btns .nav-link-login {
    background: transparent;
    height: auto;
    max-height: none;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    width: auto;
    min-width: auto;
    max-width: none;
    order: 0;
  }
}

.contact-sales-flow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

/* Customer review carousel — only surfaces on the post-submit outcome
   screens (sales_async / recommendation). Hidden on the earlier steps
   so it doesn't compete with the qualification form for attention. */
.contact-sales-flow__reviews {
  display: none;
}

body:has(.contact-sales-flow [data-step=sales_async]:not([hidden])) .contact-sales-flow__reviews,
body:has(.contact-sales-flow [data-step=recommendation]:not([hidden])) .contact-sales-flow__reviews {
  display: block;
}

.demo-qual-modal--inline {
  position: static;
  inset: auto;
  /* Mirrors .truv-wrapper constraints (legacy.scss:28514) so the
     form-card sits in the same gutter as the rest of the site
     content — full-bleed white page around it, gray card inside. */
  margin: 0 auto;
  padding-left: clamp(56px, 5.55vw, 97px);
  padding-right: clamp(56px, 5.55vw, 97px);
  max-width: clamp(1008px, 100vw, 1750px);
  display: flex;
  flex-direction: column;
  animation: none;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
@media (max-width: 640px) {
  .demo-qual-modal--inline {
    padding-left: 5.33vw;
    padding-right: 5.33vw;
    max-width: 100%;
  }
}

/* Per-step in-form title is now the page's first content beat. */
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__title {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  color: #171717;
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__subtitle {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(23, 23, 23, 0.7);
  max-width: 52ch;
  margin: 0 auto 32px;
  text-align: center;
}

/* Content sits on cream, centered, no inner card. Padded down from
   the top so the form has air without needing a banner. */
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__content {
  background: transparent;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 48px);
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__step {
  padding: 0;
}

/* Scheduler step: needs height, restore a card-ish shell so the iframe
   has room to breathe without making the whole page tall. */
.demo-qual-modal--inline:has([data-step=scheduler]:not([hidden])) .demo-qual-modal__content {
  max-width: 100%;
  min-height: min(720px, 100dvh - 240px);
}

/* ── /contact-sales spacing + chrome fixes ───────────────────
   Inline page mode runs on the cream site bg, so the modal's
   transparent-bordered cream-on-cream inputs go invisible and the
   30px quote dwarfs the 40px headline. Force visible field chrome,
   smaller secondary quote, tighter vertical rhythm. */
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field input,
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select {
  background: rgba(255, 255, 255, 0.6784313725);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(23, 23, 23, 0.14);
  box-shadow: 0 1px 0 rgba(23, 23, 23, 0.02);
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field input:hover,
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select:hover {
  border-color: rgba(23, 23, 23, 0.28);
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field input:focus,
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select:focus {
  border-color: rgba(44, 100, 227, 0.12);
  box-shadow: 0 0 0 4px rgba(44, 100, 227, 0.12);
}

/* Single-viewport mode: form fills available space above the quote
   footer, quote + brands stay on a fixed-height chin. No scroll.
   Tightened to match prod /contact-sales card density. */
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__content {
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(70px, 6.94vw, 121px) clamp(20px, 4vw, 40px) clamp(40px, 6vh, 80px);
  gap: 0;
}

/* 2-column wrapper between modal--inline (truv-wrapper gutter) and the
   form panel. Left intro panel (static across all steps) + right content
   panel (form/step transitions). Stacks on mobile.
   No background/radius here — gradient lives on .demo-qual-modal__content
   (see rule below) so only the form side is "card-ified". */
.contact-sales-flow__card {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 768px) {
  .contact-sales-flow__card {
    flex-direction: column;
  }
}

/* Gradient + animated card around the form panel only (right column).
   Mirrors the mortgage-lending hero gradient (solution-themes.scss:191)
   + its `homeHeroFlow` keyframes (helpers.scss:1143 — keyframes are
   global so they resolve even in this standalone compiled file).
   Higher specificity (3 classes) to win over the prior alt.--inline
   `__content { background: transparent }` rule. */
.contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__content {
  background: linear-gradient(145deg, #fff 0%, #EFF3FE 35%, #DEE7FF 65%, #AFC3F0 90%, #6F92E8 100%);
  background-size: 250% 250%;
  border-radius: clamp(21px, 2.15vw, 36px);
  overflow: hidden;
  min-height: clamp(455px, 45.14vw, 790px);
}
@media (prefers-reduced-motion: no-preference) {
  .contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__content {
    animation: homeHeroFlow 4s ease-in-out infinite alternate;
  }
}
@media (max-width: 640px) {
  .contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__content {
    min-height: auto;
  }
}

/* Strip the gradient card chrome on the scheduler step — the Zoom iframe
   needs the bare frame, the rounded corners + bg gradient + animation
   only fight with the embedded UI. */
.contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline:has([data-step=scheduler]:not([hidden])) .demo-qual-modal__content {
  background: none;
  border-radius: 0;
  overflow: visible;
  animation: none;
}

/* Outcome panels after submit (loading / recommendation / sales_async) —
   short content (icon + headline + body + CTA). Lock to a fixed
   min-height + narrower max-width so the card geometry is identical
   across all three screens and doesn't visually jump between transitions. */
.contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline:has([data-step=loading]:not([hidden])) .demo-qual-modal__content,
.contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline:has([data-step=recommendation]:not([hidden])) .demo-qual-modal__content,
.contact-sales-flow .demo-qual-modal--alt.demo-qual-modal--inline:has([data-step=sales_async]:not([hidden])) .demo-qual-modal__content {
  min-height: 580px;
  max-width: 800px;
}

/* After the details form is submitted the flow shows an outcome step
   (loading → scheduler / recommendation / sales_async). On those screens
   the static "What brings you to Truv?" intro is no longer needed —
   collapse it so the outcome panel uses the full card width. */
.contact-sales-flow__card:has([data-step=loading]:not([hidden])) .contact-sales-flow__intro,
.contact-sales-flow__card:has([data-step=scheduler]:not([hidden])) .contact-sales-flow__intro,
.contact-sales-flow__card:has([data-step=recommendation]:not([hidden])) .contact-sales-flow__intro,
.contact-sales-flow__card:has([data-step=sales_async]:not([hidden])) .contact-sales-flow__intro {
  display: none;
}

/* Mobile + details step — hide intro so the long form doesn't get pushed
   way down the screen (intro normally stacks above the form on mobile). */
@media (max-width: 768px) {
  .contact-sales-flow__card:has([data-step=details]:not([hidden])) .contact-sales-flow__intro {
    display: none;
  }
}
.contact-sales-flow__intro {
  flex: 0 0 44%;
  padding: clamp(40px, 4vw, 80px) clamp(32px, 3.5vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #171717;
  min-width: 0;
}
@media (max-width: 768px) {
  .contact-sales-flow__intro {
    flex: 0 0 auto;
    padding: 5.33vw 0 8vw;
    text-align: center;
    align-items: center;
  }
}
.contact-sales-flow__intro {
  /* Hero-style label "Get a Demo" — `.truv-label.sol-label` rule lives in
     main.min.css (solution-themes.scss:57) and applies its pill chrome.
     It expects a --lbl-mr custom prop inherited from .truv-mscr — set
     one here so the bottom margin to the title is sized like on
     SolutionHero. */
  --lbl-mr: clamp(12px, 1vw, 20px);
}
.contact-sales-flow__intro .truv-label.sol-label {
  margin: 0 0 var(--lbl-mr);
  background-color: #eaf0fe;
}
.contact-sales-flow__intro .truv-label.sol-label > span,
.contact-sales-flow__intro .truv-label.sol-label span {
  color: #2C64E3 !important;
}

.contact-sales-flow__intro-title {
  font-size: clamp(40px, 4.03vw, 70px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  color: #171717;
}
@media (max-width: 640px) {
  .contact-sales-flow__intro-title {
    font-size: 7.47vw;
    letter-spacing: -0.56px;
  }
}

@media (max-width: 640px) {
  .contact-sales-flow__intro-title-break,
  .contact-sales-flow__intro-subtitle-break {
    display: none;
  }
}

/* Title swap — on the details step, show "Almost done!" instead of the
   default "What brings you to Truv?". Adds a soft fade-in so it doesn't
   pop in abruptly. */
.contact-sales-flow__card:has([data-step=details]:not([hidden])) [data-intro-default] {
  display: none;
}

.contact-sales-flow__card:not(:has([data-step=details]:not([hidden]))) [data-intro-details] {
  display: none;
}

.contact-sales-flow__card:has([data-step=details]:not([hidden])) .contact-sales-flow__intro-title[data-intro-details] {
  animation: introTitleFadeIn 0.4s ease-out;
}

@keyframes introTitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Mirrors .truv-mscr-content__sub-title span on /solutions/mortgage-lending
   (main-screen.scss:125-155). Parent gets opacity:0.6, span carries the
   typography. */
.contact-sales-flow__intro-subtitle {
  font-family: "Gilroy", sans-serif;
  font-size: clamp(14px, 1.39vw, 24px);
  line-height: 135%;
  letter-spacing: 0.01vw;
  font-weight: 500;
  color: #3C3C43;
  opacity: 0.6;
  margin: 0;
  max-width: 88vw;
}
@media (max-width: 640px) {
  .contact-sales-flow__intro-subtitle {
    font-size: 4.53vw;
    line-height: 127%;
    letter-spacing: 0;
  }
}

/* Prod parity: large display title, wide centered card. */
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__title {
  font-size: clamp(22px, 2.22vw, 38px);
  line-height: 110%;
  margin: 0 auto clamp(21px, 2.15vw, 36px);
  text-align: center;
  font-weight: 500;
  letter-spacing: 0;
  /* `showStep()` programmatically focuses the heading on every
     step transition (for SR users to hear the new step). The
     heading isn't a real keyboard target — it has tabindex="-1"
     and isn't reached by Tab — so we hide the outline on every
     focus state to avoid the stray black ring some browsers
     draw after the JS .focus() call. */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__title:focus, .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__title:focus-visible {
  outline: none;
  box-shadow: none;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__title {
    font-size: 5.87vw;
    line-height: 115%;
    letter-spacing: -0.56px;
    margin-bottom: 5.33vw;
  }
}
.demo-qual-modal--alt.demo-qual-modal--inline {
  /* Page h1 ("Schedule Demo") uses the same styles as h2 step titles
     (.demo-qual-modal__title rule above) — only kept the selector
     hook in case future overrides are needed. */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__subtitle {
  display: none;
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__form {
  width: 100%;
  max-width: 770px;
  margin: 0 auto;
}

/* Hide the redundant "Work email" label — placeholder + title carry the meaning. */
.demo-qual-modal--alt.demo-qual-modal--inline [data-step=email] .demo-qual-modal__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field {
  margin: 0;
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__form {
  gap: 16px;
  /* .agree-title has its own margin-top (form--old-css--.scss:3074)
     which is the desired spacing from the Continue button — cancel
     the form's flex gap for this row only so the gap doesn't stack
     on top of the existing margin. */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__form > .agree-title {
  margin-top: calc(-16px + clamp(7px, 0.69vw, 12px));
}
@media (max-width: 640px) {
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__form {
    gap: 5.33vw;
  }
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__form > .agree-title {
    margin-top: calc(-1 * 5.33vw + 2.67vw);
  }
}
.demo-qual-modal--alt.demo-qual-modal--inline {
  /* Inputs/selects — typography & sizing mirror .hsfc-FormWrapper .hsfc-Form .hsfc-TextInput
     (form.scss:894). Background + border kept as page-level chrome.
     Height comes from $hghtInput token (top of file). */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field input,
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select {
  height: clamp(35px, 3.48vw, 61px);
  margin: 0;
  padding: 0 clamp(12px, 1.18vw, 20px);
  border-radius: clamp(6px, 0.63vw, 11px);
  border: 1px solid rgba(23, 23, 23, 0.15);
  background: #fff;
  color: #171717;
  font-family: "Gilroy", sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 135%;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}
.demo-qual-modal--alt.demo-qual-modal--inline {
  /* Greyed-out placeholder text when no option is picked yet.
     Works via `required` + empty <option value=""> → :invalid until
     user selects a real value. Picked options revert to $text. */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select:invalid {
  color: rgba(23, 23, 23, 0.55);
}
.demo-qual-modal--alt.demo-qual-modal--inline {
  /* Select dropdown indicator — mirrors .hsfc-DropdownInput__Caret
     (form.scss:1314). Same bot.svg, --crt-sz size, --padInput offset.
     Sits AFTER the shorthand-`background` rule so the bg-image isn't reset. */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("../images/elements/bot.svg");
  background-repeat: no-repeat;
  background-position: right clamp(12px, 1.18vw, 20px) center;
  background-size: clamp(7px, 0.7vw, 12px);
  padding-right: calc(clamp(12px, 1.18vw, 20px) * 2 + clamp(7px, 0.7vw, 12px));
}
@media (max-width: 640px) {
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select {
    background-position: right 4.5vw center;
    background-size: 2.67vw;
    padding-right: 11.67vw;
  }
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__submit,
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__rec-cta {
  width: 100%;
  height: clamp(39px, 3.89vw, 68px);
  margin: 0;
  border-radius: 50px;
  font-family: "Gilroy", sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 500;
  line-height: 100%;
  letter-spacing: 0;
}
.demo-qual-modal--alt.demo-qual-modal--inline {
  /* CTAs inside __rec-ctas — fixed 480px width on desktop, capped
     to container width via max-width:100% so they shrink in narrow
     cards. Mobile falls through to width:100% below. */
}
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__rec-ctas .demo-qual-modal__rec-cta {
  width: 480px;
  max-width: 100%;
}
@media (max-width: 640px) {
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__rec-ctas .demo-qual-modal__rec-cta {
    width: 100%;
  }
}

/* Scheduler step on /contact-sales: iframe must fill the entire 1fr grid
   row, but the height-chain breaks if anything between the row and the
   iframe is `height: auto`. Force flex-grow on every ancestor down to the
   iframe so the chain is unbroken from .contact-sales-flow to iframe.
   The brands marquee is already hidden on this step (rule above) so the
   1fr row gets the full viewport-minus-header height. */
.contact-sales-flow:has([data-step=scheduler]:not([hidden])) {
  /* Default centers the modal vertically — for scheduler we want stretch
     so modal--inline can grow to fill all available height. */
  justify-content: stretch;
}

.contact-sales-flow .demo-qual-modal--inline:has([data-step=scheduler]:not([hidden])) {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.demo-qual-modal--alt.demo-qual-modal--inline:has([data-step=scheduler]:not([hidden])) .demo-qual-modal__content {
  flex: 1 1 auto;
  min-height: 0;
  /* Zero padding so the iframe sits edge-to-edge — every reclaimed
     pixel reduces Zoom's chance of needing its internal scrollbar. */
  padding: 0;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.demo-qual-modal--alt.demo-qual-modal--inline [data-step=scheduler].demo-qual-modal__step {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  width: 100%;
}
.demo-qual-modal--alt.demo-qual-modal--inline [data-step=scheduler] .demo-qual-modal__scheduler {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  position: relative;
  /* overflow:hidden here would clip the iframe's natural border —
     iframe itself enforces no scroll via height:100%. */
}
.demo-qual-modal--alt.demo-qual-modal--inline [data-step=scheduler] .demo-qual-modal__scheduler iframe {
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
}

/* Make modal fill the locked flow container so we can push brands to
   bottom and center content vertically above it. */
.contact-sales-flow .demo-qual-modal--inline {
  display: flex;
  flex-direction: column;
}

/* Scheduler iframe: don't gate display on the load event — the iframe
   must be in the layout for `load` to fire reliably across browsers.
   Hide via opacity instead so it always renders + listens. */
.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__scheduler iframe,
.demo-qual-modal--alt .demo-qual-modal__scheduler iframe {
  display: block;
  opacity: 0;
  transition: opacity 200ms ease;
}

.demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__scheduler iframe.is-loaded,
.demo-qual-modal--alt .demo-qual-modal__scheduler iframe.is-loaded {
  opacity: 1;
}

@media (max-width: 640px) {
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__content {
    padding: 40px 20px 24px;
  }
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__submit,
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__rec-cta {
    height: 12.8vw;
    border-radius: 13.33vw;
    font-size: 4vw;
    line-height: 115%;
  }
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field input,
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select {
    height: 13.3vw;
    padding: 0 4.5vw;
    border-radius: 2.69vw;
    font-size: 4vw;
    line-height: 115%;
  }
  .demo-qual-modal--alt.demo-qual-modal--inline .demo-qual-modal__field select {
    padding-right: 11vw;
  }
  /* Mobile + scheduler step: kill the 20px horizontal padding so the
     iframe gets the full viewport width — otherwise Zoom's UI doesn't
     fit and Zoom renders its own horizontal scrollbar inside the iframe. */
  .demo-qual-modal--alt.demo-qual-modal--inline:has([data-step=scheduler]:not([hidden])) .demo-qual-modal__content {
    padding: 0;
  }
  /* Mobile scheduler iframe — must be tall enough to fit Zoom's tallest
     internal step (time-slot picker + booking form), otherwise Zoom
     renders its own internal scrollbar on top of the page scroll, giving
     the user a double-scroll feel. 1200px clears all observed Zoom layouts
     across viewport widths 320–500px. Page scroll on mobile is intact
     (body overflow lock is dropped above), so the iframe extends beyond
     the fold and the user scrolls the page — never the iframe. */
  .demo-qual-modal--alt.demo-qual-modal--inline [data-step=scheduler] .demo-qual-modal__scheduler {
    width: 100%;
    height: auto;
    min-height: 1200px;
    overflow: visible;
    flex: 0 0 auto;
  }
  .demo-qual-modal--alt.demo-qual-modal--inline [data-step=scheduler] .demo-qual-modal__scheduler iframe {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 1200px;
    transform: none;
  }
}