.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 56px;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(112.84deg, #1F50FE -88.75%, #FF5821 1.31%, #002BC5 101.15%);
}

.header {
  padding-top: 62px;
}

.logo {
  width: 144px;
  height: 40px;
}

.main {
  padding-bottom: 62px;
}

.title {
  padding: 0 26px;
  font: 800 80px/109px "Open Sans", "sans-serif";
  letter-spacing: 0.04em;
  color: #fff;
}

.question__content {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 56px;
}
.form__input {
  padding: 16px;
  border: 1px solid #fff;
  border-radius: 6px;
  font: 600 16px/24px "Open Sans", "sans-serif";
  letter-spacing: 0.5px;
  color: #fff;
}
.form__input::-moz-placeholder {
  color: #fff;
  opacity: 0.5;
}
.form__input::placeholder {
  color: #fff;
  opacity: 0.5;
}
.form__label {
  display: flex;
  align-items: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
  padding-left: 5px;
}
.form__label-active .form__check {
  background-color: #fff;
}
.form__check {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}
.form__radio {
  display: none;
}
.form__option {
  font: 600 16px/24px "Open Sans", "sans-serif";
  letter-spacing: 0.5px;
  color: #fff;
}

.question {
  display: none;
  flex-direction: column;
  row-gap: 56px;
  width: 480px;
}
.question-active {
  display: flex;
}
.question__title {
  font: 800 24px/33px "Open Sans", "sans-serif";
  letter-spacing: 0.04em;
  color: #fff;
}

.next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 308px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 10px;
  border-radius: 8px;
  background-color: #fff;
  font: 600 14px/20px "Open Sans", "sans-serif";
  letter-spacing: 0.1px;
}

.send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 308px;
  margin: 0 auto;
  margin-top: 40px;
  padding: 10px;
  border-radius: 8px;
  background-color: #fff;
  font: 600 14px/20px "Open Sans", "sans-serif";
  letter-spacing: 0.1px;
}

.view {
  align-items: center;
}

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(25, 25, 25, 0.8);
  z-index: 100;
}
.modal-active {
  display: flex;
}
.modal__wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 312px;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: #fff;
}
.modal__title {
  margin-bottom: 18px;
  font: 700 16px/22px "Open Sans", "sans-serif";
  letter-spacing: 0.04em;
  color: #191919;
}
.modal__text {
  font: 600 12px/16px "Open Sans", "sans-serif";
  letter-spacing: 0.04em;
  color: #191919;
}
.modal__number {
  font-weight: 800;
}
.modal__btn {
  margin-left: auto;
  padding: 10px 24px;
  border-radius: 8px;
  background-color: #1F50FE;
  font: 600 14px/22px "Open Sans", "sans-serif";
  letter-spacing: 0.1px;
  color: #fff;
}

@media (max-width: 767px) {
  .body {
    background: linear-gradient(167.99deg, #FF5821 0%, #002BC5 100%);
  }
  .header {
    padding-top: 58px;
  }
  .main {
    padding-bottom: 58px;
  }
  .title {
    font-size: 40px;
    line-height: 54px;
  }
  .question {
    width: 308px;
  }
}/*# sourceMappingURL=style.css.map */
.subtitle {
  max-width: 480px;
  text-align: center;
  font: 600 16px/24px "Open Sans", "sans-serif";
  letter-spacing: 0.5px;
  color: #fff;
  opacity: 0.9;
  margin-top: -16px;
}

.consent {
  display: flex;
  align-items: flex-start;
  column-gap: 8px;
  margin-top: 8px;
  color: #fff;
  font: 400 12px/18px "Open Sans", "sans-serif";
  letter-spacing: 0.2px;
  opacity: 0.9;
}

.consent__checkbox {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: 1px solid #fff;
  border-radius: 3px;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
  position: relative;
}
.consent__checkbox:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.consent__text a {
  color: #fff;
  text-decoration: underline;
}
.consent__text a:hover {
  text-decoration: none;
}
