:root {
  color-scheme: light only;
}

html,
body,
input,
button {
  color-scheme: light only;
}

.hero {
  min-height: 650px;
  color: var(--ink);
  background: linear-gradient(105deg, #f8fbff 0%, #edf6ff 56%, #dceeff 100%);
}

.hero::after {
  border-color: rgba(25, 103, 242, .07);
}

.hero .eyebrow {
  color: #087ca8;
}

.hero-copy {
  color: #46566a;
}

.quote-card {
  border: 1px solid #d7e0e9;
  box-shadow: 0 16px 42px rgba(5, 31, 61, .13);
}

.quote-card,
.zip-row input {
  background: #fff;
  color: var(--ink);
}

.zip-row input::placeholder {
  color: #7a8491;
  opacity: 1;
}

@media (max-width: 850px) {
  .site-header {
    background: #fff;
  }

  .header-call {
    border-radius: 999px;
    padding: 10px 14px;
    font-size: .86rem;
  }

  .header-call span {
    display: inline;
  }

  .header-call svg {
    width: 17px;
  }

  .hero-content {
    padding: 34px 20px 178px;
  }

  .hero h1 {
    max-width: 600px;
    font-size: clamp(2.25rem, 10vw, 3.4rem);
    line-height: 1.02;
  }

  .hero-copy {
    margin: 16px 0 20px;
    line-height: 1.5;
  }

  .quote-card {
    padding: 16px;
    border-radius: 16px;
  }

  .quote-card label {
    margin-bottom: 8px;
  }

  .zip-row input {
    min-height: 54px;
    padding: 13px 15px;
  }

  .zip-row button {
    min-height: 54px;
    padding: 13px 16px;
  }

  .location {
    padding-top: 11px;
  }

  .form-note {
    margin-top: 7px;
  }

  .van-frame img {
    height: 138px;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: 12px;
  }

  .menu {
    width: 32px;
  }

  .brand {
    font-size: 17px;
  }

  .header-call {
    padding: 9px 11px;
    font-size: .74rem;
    gap: 6px;
  }

  .hero-content {
    padding-top: 28px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero .eyebrow {
    font-size: .74rem;
    margin-bottom: 9px;
  }

  .hero-copy {
    font-size: .96rem;
  }

  .form-note {
    font-size: .75rem;
  }
}