/* React integration and local-route overrides for the funnel theme. */

.hw-funnel {
  min-width: 320px;
  overflow-x: hidden;
  background: #fff;
  color: #000;
}

.hw-funnel .header__logo {
  display: block;
}

.hw-funnel .header__back-button {
  background: transparent;
}

.hw-funnel .swiper-wrapper {
  display: block;
  height: auto !important;
  transform: none !important;
}

.hw-funnel .hero {
  isolation: isolate;
}

.hw-funnel .step--zip .btn--primary {
  max-width: 200px;
}

.hw-funnel .swiper-slide {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
}

.hw-funnel .step {
  animation: hw-step-in 180ms ease-out;
}

@keyframes hw-step-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hw-funnel .btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.hw-funnel .progress-bar__fill {
  min-width: 0;
  transition: width 220ms ease;
}

.hw-funnel .progress-bar__percentage {
  white-space: nowrap;
}

.hw-funnel .banner--location .icon-stroke-pin {
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  width: 16px;
}

.hw-funnel .radio__custom-icon {
  display: block;
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.hw-funnel .hw-inline-question {
  border-top: 1px solid #dcdcdc;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.hw-funnel .hw-inline-question legend {
  font-size: 1.1rem;
}

.hw-funnel .step__subtitle {
  color: #767475;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
}

.hw-funnel .zip-control__button {
  border: 0;
}

.hw-funnel .step__secure-text {
  align-items: center;
  color: #767475;
  display: flex;
  font-size: 0.75rem;
  justify-content: center;
  line-height: 1.3;
  margin: 0.25rem auto 0;
  text-align: center;
}

.hw-funnel .step__secure-text::before {
  content: "\1f512";
  font-size: 0.7rem;
  margin-right: 0.35rem;
}

.hw-funnel .tcpa {
  margin-bottom: 0;
}

.hw-funnel .tcpa a {
  color: #6e6e6e;
}

.hw-funnel .hw-plus {
  display: inline-block;
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 0.7;
  margin-right: 0.8rem;
  vertical-align: middle;
}

.hw-funnel .information.is-expanded .expand-collapse__content {
  display: block;
}

.hw-funnel .expand-collapse__icon {
  align-items: center;
  display: inline-flex;
  font-size: 1.75rem;
  font-weight: 400;
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 24px;
}

.hw-reference-footer {
  background: #f6f5f1;
  border-top: 1px solid #dcdcdc;
  color: #545253;
  font-family: Roboto, sans-serif;
  padding: 2rem 0;
}

.hw-reference-footer__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
}

.hw-reference-footer__logo {
  height: 31px;
  width: 265px;
}

.hw-reference-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  justify-content: center;
}

.hw-reference-footer a {
  color: #545253;
  font-size: 0.8125rem;
  text-decoration: underline;
}

.hw-reference-footer p {
  flex-basis: 100%;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

/* Result route */
.hw-result-page {
  align-items: center;
  background: #f6f5f1;
  display: flex;
  font-family: Roboto, sans-serif;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.hw-result-card {
  background: #fff;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.16);
  max-width: 620px;
  padding: 2.5rem;
  text-align: center;
  width: 100%;
}

.hw-result-logo {
  height: 36px;
  margin: 0 auto 2rem;
  width: 300px;
}

.hw-result-check {
  align-items: center;
  background: #195bb7;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 2rem;
  height: 72px;
  justify-content: center;
  margin: 0 auto 1.5rem;
  width: 72px;
}

.hw-result-card h1 {
  color: #434142;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.hw-result-card p {
  color: #545253;
  font-size: 1rem;
  line-height: 1.55;
  margin: 1rem auto 0;
  max-width: 500px;
}

.hw-result-card .btn {
  display: block;
  margin: 2rem auto 0;
  max-width: 280px;
}

@media (max-width: 767.98px) {
  .hw-funnel .hero__background {
    min-height: 100%;
  }

  .hw-funnel .hero__wrapper {
    width: 100%;
  }

  .hw-funnel .hero__content {
    width: 100%;
  }

  .hw-funnel .form {
    min-height: 430px;
  }

  .hw-funnel .step__content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hw-funnel .checkbox--group label {
    margin-bottom: 0.75rem;
  }

  .hw-funnel .hw-inline-question {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .hw-reference-footer__inner {
    flex-direction: column;
  }

  .hw-reference-footer__logo {
    height: 28px;
    width: 238px;
  }

  .hw-result-card {
    padding: 2rem 1.25rem;
  }
}

@media (min-width: 768px) {
  .hw-funnel .swiper--form {
    min-height: 385px;
  }

  .form-in-progress .hw-funnel .swiper--form {
    min-height: 470px;
  }

  .hw-funnel .form .step__content {
    min-height: 385px;
  }

  .form-in-progress .hw-funnel .form .step__content {
    min-height: 450px;
  }

  .hw-funnel .hw-inline-question .radio__button {
    display: inline-block;
    margin-right: 0.75rem;
    width: calc(50% - 0.5rem);
  }
}

/* --- Neutral content slots ------------------------------------------------
   Two slots that previously held third-party imagery. Sizes and positions
   match the images they replaced so the header and the partner grid keep
   their original layout.                                                    */

/* Header badge slot. .header__badge in funnel.css still supplies the box
   (30x82.5, 44x120 on md+); this rule only styles the text inside it, since
   the slot now holds a <span> instead of an <svg>. */
.hw-trust-badge {
  align-items: center;
  color: #4a4a4a;
  display: flex;
  font-size: 0.6875rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

/* Partner list items: previously 140px-wide images, now text. The width is
   kept so the grid and line wrapping match the previous layout. */
.hw-partner-claim {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 500;
  justify-content: center;
  line-height: 1.3;
  min-height: 54px;
  text-align: center;
  width: 140px;
}

@media (min-width: 768px) {
  .hw-trust-badge {
    font-size: 0.8125rem;
  }

  .hw-partner-claim {
    font-size: 1rem;
  }
}

/* --- Handoff overlay -------------------------------------------------------
   Waiting screen shown after submit while the results link is being prepared.
   Mirrors the shape of the advertiser's own redirect overlay so the funnel
   feels unchanged, without carrying any of its branding.
   See docs/home-window-handoff-2026-08-13.md.                               */

.hw-handoff {
  align-items: flex-start;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  padding: 4rem 1rem 2rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.hw-handoff__card {
  max-width: 420px;
  text-align: center;
  width: 100%;
}

.hw-handoff__icon {
  align-items: center;
  background: #f2f2f2;
  border-radius: 50%;
  color: #1f6fe0;
  display: flex;
  height: 116px;
  justify-content: center;
  margin: 0 auto 2rem;
  width: 116px;
}

.hw-handoff__title {
  color: #1a1a1a;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.hw-handoff__text {
  color: #4a4a4a;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0 0 2rem;
}

.hw-handoff__bar {
  background: #ececec;
  border-radius: 2px;
  height: 4px;
  margin: 0 auto 1rem;
  max-width: 260px;
  overflow: hidden;
}

.hw-handoff__bar span {
  animation: hwHandoffBar 1.4s ease-in-out infinite;
  background: #1f6fe0;
  display: block;
  height: 100%;
  width: 40%;
}

@keyframes hwHandoffBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.hw-handoff__note {
  color: #767475;
  font-size: 0.875rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hw-handoff__bar span { animation: none; width: 100%; }
}