/* Vehicle Pass brand landing page V3 — richer visual system. */
#top .vp-brand-v3 {
  --vp-brand-navy: #212d55;
  --vp-brand-navy-deep: #172345;
  --vp-brand-blue: #0072ff;
  --vp-brand-blue-dark: #007fd4;
  --vp-brand-ink: #405073;
  --vp-brand-line: #d9e5f1;
  --vp-brand-pale: #eef5fb;
  --vp-brand-white: #fff;
  position: relative;
  overflow: hidden;
}

#top .vp-brand-v3 .container {
  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;
}

#top .vp-brand-v3-section .content {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

#top .vp-brand-v3-title {
  margin: 0 0 26px !important;
  padding: 0 !important;
}

#top .vp-brand-v3-title .av-special-heading-tag,
#top .vp-brand-v3-title h1,
#top .vp-brand-v3-title h2,
#top .vp-brand-v3-title h3 {
  margin: 0 !important;
  color: var(--vp-brand-navy) !important;
  font-family: inherit;
  font-size: clamp(38px, 4vw, 42px) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
}

#top .vp-brand-v3-copy,
#top .vp-brand-v3-copy p,
#top .vp-brand-v3-copy .avia_textblock {
  color: var(--vp-brand-ink) !important;
  font-family: inherit;
  font-size: 17px !important;
  line-height: 1.72 !important;
  font-weight: 400 !important;
}

#top .vp-brand-v3-copy p {
  margin: 0 0 16px !important;
}

/* HERO */
#top .vp-brand-v3-hero {
  min-height: 720px !important;
  background-color: #eaf2f9 !important;
  background-position: center center !important;
  background-size: cover !important;
}

#top .vp-brand-v3-hero::after {
  content: attr(data-vp-brand-wordmark);
  position: absolute;
  right: max(20px, calc((100vw - 1180px) / 2));
  bottom: 52px;
  z-index: 1;
  display: block !important;
  color: rgba(33,45,85,.28) !important;
  font-family: inherit;
  font-size: clamp(110px, 15vw, 230px);
  line-height: .8;
  font-weight: 900;
  letter-spacing: -.06em;
  pointer-events: none;
}

#top .vp-brand-v3-hero[data-vp-brand-long-wordmark]::after {
  font-size: clamp(72px, 10vw, 150px);
}

#top .vp-brand-v3-hero .content {
  position: relative;
  z-index: 2;
  padding-top: 44px !important;
  padding-bottom: 52px !important;
}

#top .vp-brand-v3-hero .vp-brand-form {
  position: relative;
  z-index: 2;
  width: min(100%, 675px) !important;
}

#top .vp-brand-v3-hero .vp-display-title {
  max-width: 650px !important;
  margin-bottom: 18px !important;
  color: var(--vp-brand-navy) !important;
  font-size: clamp(42px, 4.5vw, 42px) !important;
  line-height: .98 !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
}

#top .vp-brand-v3-hero .vp-body-copy {
  max-width: 600px !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}

#top .vp-brand-v3-hero .vp-home-vin-card {
  --vp-form-row-width: 624px;
}

/* BENEFIT CARDS */
#top .vp-brand-v3-benefits {
  z-index: 3;
  overflow: visible;
  background: #f4f6fa !important;
}

#top .vp-brand-v3-benefits .content {
  padding-top: 82px !important;
  padding-bottom: 58px !important;
}

#top .vp-brand-v3-benefit {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 230px;
  margin: 0 !important;
  padding: 64px 34px 30px !important;
  border: 1px solid #dfe3ee !important;
  border-radius: 5px !important;
  background: #f8f8fd !important;
  box-shadow: none !important;
  text-align: center !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

#top .vp-brand-v3-benefit:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(33,45,85,.08) !important;
}

#top .vp-brand-v3-benefit .iconbox_icon {
  position: absolute !important;
  top: -20px !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--vp-brand-navy, #212d55) !important;
  box-shadow: none !important;
  font-size: 17px !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
}

#top .vp-brand-v3-benefit .iconbox_content,
#top .vp-brand-v3-benefit.iconbox_top .iconbox_content {
  flex: 1 1 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#top .vp-brand-v3-benefit .iconbox_content_title {
  margin: 0 0 22px !important;
  color: var(--vp-brand-navy, #212d55) !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

#top .vp-brand-v3-benefit .iconbox_content_container,
#top .vp-brand-v3-benefit .iconbox_content_container p {
  color: var(--vp-brand-ink, #405073) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

/* CONTENT + CONTRASTING CHECKLIST PANEL */
#top .vp-brand-v3-split-left {
  padding-right: 54px !important;
}

#top .vp-brand-v3-checklist {
  padding: 36px 38px 26px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, var(--vp-brand-navy), var(--vp-brand-navy-deep)) !important;
  box-shadow: 0 20px 48px rgba(23,35,69,.18) !important;
}

#top .vp-brand-v3-checklist .avia-icon-list-container {
  margin: 0 !important;
}

#top .vp-brand-v3-checklist .avia-icon-list li {
  min-height: 55px !important;
  padding-bottom: 18px !important;
}

#top .vp-brand-v3-checklist .iconlist_icon {
  color: #fff !important;
  background: var(--vp-brand-blue) !important;
  box-shadow: 0 6px 16px rgba(0,166,254,.25);
}

#top .vp-brand-v3-checklist .iconlist_title,
#top .vp-brand-v3-checklist .iconlist_content,
#top .vp-brand-v3-checklist .iconlist_content p,
#top .vp-brand-v3-checklist .avia-icon-list li,
#top .vp-brand-v3-checklist .avia-icon-list li p {
  color: #fff !important;
}

#top .vp-brand-v3-checklist .iconlist_title {
  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

#top .vp-brand-v3-checklist .iconlist-timeline {
  border-color: rgba(255,255,255,.18) !important;
}

/* USE CASES */
#top .vp-brand-v3-use-section {
  background:
    radial-gradient(circle at 88% 15%, rgba(0,166,254,.09), transparent 28%),
    #eef5fb !important;
}

#top .vp-brand-v3-use-grid {
  margin-top: 40px !important;
}

#top .vp-brand-v3-use-card {
  position: relative;
  padding: 38px 34px !important;
  border: 1px solid #dfe9f3 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 14px 38px rgba(33,45,85,.07) !important;
  overflow: hidden;
}

#top .vp-brand-v3-use-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 110px;
  height: 110px;
  border: 22px solid rgba(0,166,254,.07);
  border-radius: 50%;
}

#top .vp-brand-v3-number,
#top .vp-brand-v3-number p {
  margin: 0 0 44px !important;
  color: var(--vp-brand-blue) !important;
  font-size: 42px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
}

#top .vp-brand-v3-card-title {
  margin-bottom: 16px !important;
}

#top .vp-brand-v3-card-title .av-special-heading-tag,
#top .vp-brand-v3-card-title h3 {
  color: var(--vp-brand-navy) !important;
  font-size: 25px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

/* FACT / DECODER */
#top .vp-brand-v3-fact {
  padding: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--vp-brand-navy) !important;
  box-shadow: 0 20px 48px rgba(23,35,69,.18) !important;
}


#top .vp-brand-v3-fact .vp-brand-v3-copy,
#top .vp-brand-v3-fact .vp-brand-v3-copy p,
#top .vp-brand-v3-fact .avia_textblock {
  color: #dbe8f7 !important;
}

/* STEPS */
#top .vp-brand-v3-steps {
  background:
    radial-gradient(circle at 85% 20%, rgba(0,166,254,.18), transparent 32%),
    linear-gradient(135deg, #212d55 0%, #172345 100%) !important;
}

#top .vp-brand-v3-steps .vp-brand-v3-title .av-special-heading-tag,
#top .vp-brand-v3-steps .vp-brand-v3-title h2,
#top .vp-brand-v3-steps .vp-brand-v3-copy,
#top .vp-brand-v3-steps .vp-brand-v3-copy p {
  color: #fff !important;
}

#top .vp-brand-v3-step {
  position: relative !important;
  display: block !important;
  min-height: 230px !important;
  margin-top: 20px !important;
  padding: 34px 30px 34px 104px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  backdrop-filter: blur(4px);
}

#top .vp-brand-v3-step .avia_textblock:first-child {
  margin: 0 !important;
}

#top .vp-brand-v3-step-number {
  position: absolute !important;
  top: 34px !important;
  left: 30px !important;
  z-index: 3;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  border: 2px solid var(--vp-brand-blue) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: rgba(0,166,254,.12) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#top .vp-brand-v3-step-title {
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
}

#top .vp-brand-v3-step > .vp-brand-v3-copy {
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

#top .vp-brand-v3-step-title .av-special-heading-tag,
#top .vp-brand-v3-step-title h3 {
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* FAQ */
#top .vp-brand-v3-faq-section {
  background: #fff !important;
}

#top .vp-brand-v3-faq .toggler {
  min-height: 70px !important;
  margin-bottom: 10px !important;
  padding: 21px 58px 21px 32px !important;
  border: 1px solid #dce7f2 !important;
  border-radius: 8px !important;
  color: var(--vp-brand-navy) !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(33,45,85,.045);
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

#top .vp-brand-v3-faq .toggler:hover,
#top .vp-brand-v3-faq .toggler.activeTitle {
  border-color: rgba(0,166,254,.45) !important;
  background: #f2f9ff !important;
}

#top .vp-brand-v3-faq .toggle_icon {
  right: 22px !important;
  color: var(--vp-brand-blue) !important;
}

#top .vp-brand-v3-faq .toggle_content {
  margin: -10px 0 10px !important;
  padding: 24px 26px 28px !important;
  border: 1px solid #dce7f2 !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  color: var(--vp-brand-ink) !important;
  background: #fff !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* FINAL CTA */
#top .vp-brand-v3-final {
  background:
    linear-gradient(105deg, rgba(0,166,254,.09), transparent 46%),
    #eaf3fb !important;
}

#top .vp-brand-v3-final .content {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

#top .vp-brand-v3-final-button {
  text-align: right;
}

#top .vp-brand-v3-final-button .avia-button {
  min-width: 290px !important;
  padding: 20px 30px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: linear-gradient(180deg, #18baff 0%, #008ee6 100%) !important;
  box-shadow: 0 14px 30px rgba(0,166,254,.28) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

#top .vp-brand-v3-final-button .avia-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(0,166,254,.34) !important;
}

/* VIN LOCATION */
#top .vp-brand-v3-vin-location {
  background:
    radial-gradient(circle at 92% 8%, rgba(0,166,254,.12), transparent 30%),
    #eef5fb !important;
}

#top .vp-brand-v3-vin-location-intro {
  max-width: 760px;
  margin-bottom: 24px !important;
}

#top .vp-brand-v3-location-card {
  position: relative !important;
  min-height: 355px !important;
  margin-top: 30px !important;
  padding: 34px 28px 30px !important;
  border: 1px solid #dce7f2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 14px 38px rgba(33,45,85,.07) !important;
  overflow: hidden;
}

#top .vp-brand-v3-location-card::after {
  content: "VIN";
  position: absolute;
  right: -8px;
  bottom: -12px;
  color: rgba(0,166,254,.055);
  font-size: 72px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.08em;
  pointer-events: none;
}

#top .vp-brand-v3-location-number,
#top .vp-brand-v3-location-number p {
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 54px !important;
  margin: 0 0 30px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(145deg, #18b8ff, #007ed5) !important;
  box-shadow: 0 9px 22px rgba(0,166,254,.24);
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

#top .vp-brand-v3-location-title {
  margin: 0 0 15px !important;
}

#top .vp-brand-v3-location-title .av-special-heading-tag,
#top .vp-brand-v3-location-title h3 {
  color: var(--vp-brand-navy) !important;
  font-size: 23px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
}

#top .vp-brand-v3-location-copy,
#top .vp-brand-v3-location-copy p,
#top .vp-brand-v3-location-copy .avia_textblock {
  position: relative;
  z-index: 2;
  color: var(--vp-brand-ink) !important;
  font-size: 16px !important;
  line-height: 1.68 !important;
}

#top .vp-brand-v3-vin-check-note {
  position: relative !important;
  margin-top: 34px !important;
  padding: 32px 38px 32px 104px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #212d55, #172345) !important;
  box-shadow: 0 18px 42px rgba(23,35,69,.16) !important;
}

#top .vp-brand-v3-vin-check-note-icon {
  position: absolute !important;
  top: 30px !important;
  left: 32px !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: var(--vp-brand-blue) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

#top .vp-brand-v3-vin-check-note-title {
  margin: 0 0 8px !important;
}

#top .vp-brand-v3-vin-check-note-title .av-special-heading-tag,
#top .vp-brand-v3-vin-check-note-title h3 {
  color: #fff !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
}

#top .vp-brand-v3-vin-check-note-copy,
#top .vp-brand-v3-vin-check-note-copy p {
  margin: 0 !important;
  color: #dbe8f7 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

@media only screen and (max-width: 989px) {
  #top .vp-brand-v3-location-card {
    min-height: 390px !important;
  }
}

@media only screen and (max-width: 767px) {
  #top .vp-brand-v3-location-card {
    min-height: 0 !important;
    margin-top: 18px !important;
  }

  #top .vp-brand-v3-vin-check-note {
    padding: 94px 26px 28px !important;
  }

  #top .vp-brand-v3-vin-check-note-icon {
    top: 26px !important;
    left: 26px !important;
  }
}

@media only screen and (max-width: 989px) {
  #top .vp-brand-v3-section .content {
    padding-top: 68px !important;
    padding-bottom: 68px !important;
  }

  #top .vp-brand-v3-hero {
    min-height: 760px !important;
    background-position: 70% bottom !important;
  }

  #top .vp-brand-v3-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(234,242,249,.98) 0%, rgba(234,242,249,.9) 56%, rgba(234,242,249,.12) 100%);
  }

  #top .vp-brand-v3-hero.vp-home-money-back-host > .vp-money-back-card {
    position: relative;
    z-index: 2;
  }

  @media only screen and (max-width: 767px) {
    #top .vp-brand-v3-hero::before {
      opacity: 0.8;
    }
  }

  #top .vp-brand-v3-split-left {
    padding-right: 0 !important;
  }

  #top .vp-brand-v3-benefit,
  #top .vp-brand-v3-use-card {
    min-height: 0 !important;
  }
}

@media only screen and (max-width: 767px) {
  #top .vp-brand-v3 .container {
    width: calc(100% - 32px) !important;
  }

  #top .vp-brand-v3-section .content {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  #top .vp-brand-v3-title .av-special-heading-tag,
  #top .vp-brand-v3-title h2 {
    font-size: 34px !important;
  }

  #top .vp-brand-v3-hero {
    min-height: 0 !important;
    background-position: 70% bottom !important;
  }

  #top .vp-brand-v3-hero::after {
    right: 16px;
    bottom: 22px;
    display: block !important;
    color: rgba(33,45,85,.2) !important;
    font-size: clamp(66px, 20vw, 110px) !important;
  }

  @media only screen and (max-width: 767px) {
    #top .vp-brand-v3-hero::after {
      display: none;
    }
  }

  #top .vp-brand-v3-hero .content {
    padding-top: 38px !important;
  }

  #top .vp-brand-v3-hero .vp-display-title {
    font-size: 40px !important;
  }

  #top .vp-brand-v3-benefit,
  #top .vp-brand-v3-use-card,
  #top .vp-brand-v3-step {
    margin-bottom: 22px !important;
  }

  #top .vp-brand-v3-benefits .content {
    padding-top: 76px !important;
  }

  #top .vp-brand-v3-benefits .vp-brand-v3-benefit {
    margin-bottom: 66px !important;
  }

  #top .vp-brand-v3-checklist,
  #top .vp-brand-v3-fact {
    padding: 30px 24px !important;
  }

  #top .vp-brand-v3-step {
    padding: 26px 24px 26px 88px !important;
  }

  #top .vp-brand-v3-step-number {
    top: 26px !important;
    left: 24px !important;
    width: 48px !important;
    height: 48px !important;
  }

  #top .vp-brand-v3-final-button {
    margin-top: 26px !important;
    text-align: left;
  }

  #top .vp-brand-v3-final-button .avia-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Global button color */
:root {
  --vp-button-blue: #0072ff;
  --vp-button-blue-hover: #0062d9;
}

#top .vp-brand-v3-final-button .avia-button,
#top .vp-audi-v3-final-button .avia-button,
#top .vp-brand-v3-final-button .avia-button:visited,
#top .vp-audi-v3-final-button .avia-button:visited {
  background: var(--vp-button-blue) !important;
  background-color: var(--vp-button-blue) !important;
  border-color: var(--vp-button-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(0, 114, 255, 0.28) !important;
}

#top .vp-brand-v3-final-button .avia-button:hover,
#top .vp-brand-v3-final-button .avia-button:focus,
#top .vp-audi-v3-final-button .avia-button:hover,
#top .vp-audi-v3-final-button .avia-button:focus {
  background: var(--vp-button-blue-hover) !important;
  background-color: var(--vp-button-blue-hover) !important;
  border-color: var(--vp-button-blue-hover) !important;
  color: #ffffff !important;
}