@charset "UTF-8";

/* This file uses "CSS nesting", which is a relatively new feature, but industry standard (I checked the "caniuse" website). 
	We started implementing this on our PY26 changes. VS Code supports it, just not VS.
	So for now, if you see CSS "errors", check on VSCode to see if they are spurious. */

body {
  margin-top: 20px;
}

.hero {
  padding-top: 40px;
  padding-bottom: 40px;
  background: var(--white);

  picture img {
    border-radius: 20px;
  }
}

.hero h1 {
  margin: 0;
  padding: 0 0 20px 0;
  color: var(--dark-blue);
  font-size: 62px;
  font-weight: 600;
  font-style: normal;
  line-height: 66px;
  text-align: left;
}

.hero h1 em {
  color: var(--primary-color);
  font-style: normal;
}

.hero img {
  max-height: 450px;
}

.zipContainer {
  display: block;
  width: fit-content;
}

.zipContainer .input-group {
  padding: 4px;
  background: var(--white);
  border: 1px solid #D6D6D6;
  border-radius: 12px;
}

.textfield {
  padding: 6px 8px;
  color: var(--dark-gray);
  font-size: 16px;
  font-family: var(--primary-font);
  line-height: 32px;
  letter-spacing: -0.2px;
  font-weight: 400;
  background: var(--white);
  border: none;

  &::placeholder, &:focus {
    color: var(--dark-gray);
  }
}

/* Remove the blue background/highlight on autofill */
input:-webkit-autofill,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  background-color: transparent !important;
}

/* Remove the blue outline/glow when the input is clicked */
input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove default styles from input so it looks "merged" */
.zipContainer .input-group input {
  border: none;
  outline: none;
  flex-grow: 1;
}

/* The magic part: focus ring surrounds the entire container */
.zipContainer .input-group:focus-within {
  border-color: #91b6f8;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
  outline: 1px solid #91b6f8;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-left: calc(var(--bs-border-width) * 0);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.message {
  display: inline-flex;
  margin: 0;
  padding: 0;
  color: #DE4F5C;
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}

.check-list {
  list-style: none;
  margin: 0 0 30px 0;
  padding: 0;
  font-family: "Gilroy", sans-serif;
  font-size: 1em;
  font-weight: 600;
}

  .check-list li {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-right: 20px;
  }

  .check-list li:nth-child(3) {
    padding-right: 0;
  }

  .check-list i {
    color: var(--primary-color);
    font-size: 16px;
  }

input {
  vertical-align: middle;
}

@media (max-width:1399px) {
  .hero h1 {
    margin: 0;
    padding: 0 0 20px 0;
    color: var(--dark-blue);
    font-size: 58px;
    font-weight: 600;
    font-style: normal;
    line-height: 62px;
    text-align: left;
  }
}

@media (min-width:991px) and (max-width:1199px) {
  .hero h1 {
    font-size: 48px;
    line-height: 52px;
  }
}

@media (min-width:768px) and (max-width:1024px) {
  body {
    margin-top: 0;
  }

  .hero p {
    text-align: center;
  }

  .hero img {
    padding-top: 40px;
  }
}

@media (min-width:768px) and (max-width:991px) {
  .hero h1 {
    text-align: center;
  }

  .zipContainer {
    margin: 0 auto;
  }
}

@media screen and (max-width:767px) {
  body {
    margin-top: 0;
  }

  .hero h1 {
    font-size: 40px;
    line-height: 44px;
    text-align: center;
  }

  .hero p {
    text-align: center;
  }

  .hero img {
    max-height: 300px;
  }

  .zipContainer {
    display: block;
    margin: 0 auto 30px auto;
  }

  .check-list {
    font-size: .875em;
    text-align: center;
  }
}

@media (min-width:439px) and (max-width:639px) {
}

@media (min-width:320px) and (max-width:439px) {
  .zipContainer {
    display: block;
    margin: 0 auto 30px auto;
    width: 100%;
  }
}

@media screen and (max-width: 375px) {
  .hero h1 {
    font-size: 36px;
    line-height: 42px;
    text-align: center;
  }
}

@media screen and (max-width: 320px) {
  .zipContainer {
    display: block;
    margin: 0 auto;
    padding: 1px;
    width: 100%;
  }
}