@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
}

input, button, textarea, select, optgroup {
  font-family: inherit;
}

header {
  background: url("../assets/images/bg-sidebar-mobile.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 2rem 0 6rem 0;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}
header .step-subcontainer .step-circle {
  display: grid;
  place-content: center;
  border: 1px solid hsl(217deg, 100%, 97%);
  color: hsl(217deg, 100%, 97%);
  font-weight: 500;
  border-radius: 50%;
  width: 2.344rem;
  height: 2.344rem;
}
header .step-subcontainer .step-circle.active {
  background: hsl(206deg, 94%, 87%);
  border: 1px solid hsl(206deg, 94%, 87%);
  color: hsl(213deg, 96%, 18%);
}
header .step-subcontainer .step-info {
  display: none;
}

@media screen and (min-width: 768px) {
  header {
    flex-direction: column;
    padding: 2rem 5rem 0 1.5rem;
    justify-content: flex-start;
    border-radius: 0.5rem;
    background: url("../assets/images/bg-sidebar-desktop.svg");
    background-repeat: no-repeat;
    background-size: cover;
  }
  header .step-subcontainer {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  header .step-subcontainer .step-info {
    display: grid;
    text-transform: uppercase;
    color: hsl(217deg, 100%, 97%);
    font-size: 0.875rem;
  }
  header .step-subcontainer .step-info span {
    font-weight: 700;
    letter-spacing: 0.08rem;
  }
}
.main-subcontainer, .form-step-final {
  background: hsl(0deg, 0%, 100%);
  border-radius: 0.5rem;
  padding: 1.5rem 1.25rem;
  margin: -4rem 1rem 10rem 1rem;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.main-subcontainer .text-container, .form-step-final .text-container {
  margin-bottom: 1.5rem;
}
.main-subcontainer .text-container h1, .form-step-final .text-container h1 {
  color: hsl(213deg, 96%, 18%);
  font-size: 1.5rem;
}
.main-subcontainer .text-container p, .form-step-final .text-container p {
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset, .form-step-final fieldset {
  border: none;
}
.main-subcontainer fieldset .form-step-1, .form-step-final fieldset .form-step-1 {
  font-size: 0.75rem;
}
.main-subcontainer fieldset .form-step-1 .label-error-container, .form-step-final fieldset .form-step-1 .label-error-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.125rem;
  color: hsl(213deg, 96%, 18%);
}
.main-subcontainer fieldset .form-step-1 .label-error-container .error, .form-step-final fieldset .form-step-1 .label-error-container .error {
  justify-self: end;
  color: hsl(354deg, 84%, 57%);
  font-weight: 500;
  text-align: end;
}
.main-subcontainer fieldset .form-step-1 .label-error-container .error.error:empty, .form-step-final fieldset .form-step-1 .label-error-container .error.error:empty {
  display: none;
}
.main-subcontainer fieldset .form-step-1 #name-input, .form-step-final fieldset .form-step-1 #name-input, .main-subcontainer fieldset .form-step-1 #email-input, .form-step-final fieldset .form-step-1 #email-input, .main-subcontainer fieldset .form-step-1 #tel-input, .form-step-final fieldset .form-step-1 #tel-input {
  width: 100%;
  padding: 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(229deg, 24%, 87%);
  color: hsl(213deg, 96%, 18%);
  font-weight: 500;
}
.main-subcontainer fieldset .form-step-1 #name-input#name-input:focus, .form-step-final fieldset .form-step-1 #name-input#name-input:focus, .main-subcontainer fieldset .form-step-1 #name-input#email-input:focus, .main-subcontainer fieldset .form-step-1 #name-input#tel-input:focus, .main-subcontainer fieldset .form-step-1 #name-input#name-input:active, .form-step-final fieldset .form-step-1 #name-input#name-input:active, .main-subcontainer fieldset .form-step-1 #name-input#email-input:active, .main-subcontainer fieldset .form-step-1 #name-input#tel-input:active, .main-subcontainer fieldset .form-step-1 #email-input#name-input:focus, .main-subcontainer fieldset .form-step-1 #email-input#email-input:focus, .form-step-final fieldset .form-step-1 #email-input#email-input:focus, .main-subcontainer fieldset .form-step-1 #email-input#tel-input:focus, .main-subcontainer fieldset .form-step-1 #email-input#name-input:active, .main-subcontainer fieldset .form-step-1 #email-input#email-input:active, .form-step-final fieldset .form-step-1 #email-input#email-input:active, .main-subcontainer fieldset .form-step-1 #email-input#tel-input:active, .main-subcontainer fieldset .form-step-1 #tel-input#name-input:focus, .main-subcontainer fieldset .form-step-1 #tel-input#email-input:focus, .main-subcontainer fieldset .form-step-1 #tel-input#tel-input:focus, .form-step-final fieldset .form-step-1 #tel-input#tel-input:focus, .main-subcontainer fieldset .form-step-1 #tel-input#name-input:active, .main-subcontainer fieldset .form-step-1 #tel-input#email-input:active, .main-subcontainer fieldset .form-step-1 #tel-input#tel-input:active, .form-step-final fieldset .form-step-1 #tel-input#tel-input:active {
  outline: 1px solid hsl(243deg, 100%, 62%);
  border: 1px solid hsl(243deg, 100%, 62%);
}
.main-subcontainer fieldset .form-step-1 #name-input::-moz-placeholder, .form-step-final fieldset .form-step-1 #name-input::-moz-placeholder, .main-subcontainer fieldset .form-step-1 #email-input::-moz-placeholder, .form-step-final fieldset .form-step-1 #email-input::-moz-placeholder, .main-subcontainer fieldset .form-step-1 #tel-input::-moz-placeholder, .form-step-final fieldset .form-step-1 #tel-input::-moz-placeholder {
  font-weight: 500;
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-1 #name-input:-ms-input-placeholder, .form-step-final fieldset .form-step-1 #name-input:-ms-input-placeholder, .main-subcontainer fieldset .form-step-1 #email-input:-ms-input-placeholder, .form-step-final fieldset .form-step-1 #email-input:-ms-input-placeholder, .main-subcontainer fieldset .form-step-1 #tel-input:-ms-input-placeholder, .form-step-final fieldset .form-step-1 #tel-input:-ms-input-placeholder {
  font-weight: 500;
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-1 #name-input::placeholder, .form-step-final fieldset .form-step-1 #name-input::placeholder, .main-subcontainer fieldset .form-step-1 #email-input::placeholder, .form-step-final fieldset .form-step-1 #email-input::placeholder, .main-subcontainer fieldset .form-step-1 #tel-input::placeholder, .form-step-final fieldset .form-step-1 #tel-input::placeholder {
  font-weight: 500;
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-1 #name-input:not(:last-child), .form-step-final fieldset .form-step-1 #name-input:not(:last-child), .main-subcontainer fieldset .form-step-1 #email-input:not(:last-child), .form-step-final fieldset .form-step-1 #email-input:not(:last-child), .main-subcontainer fieldset .form-step-1 #tel-input:not(:last-child), .form-step-final fieldset .form-step-1 #tel-input:not(:last-child) {
  margin-bottom: 1rem;
}
.main-subcontainer fieldset .form-step-1 #name-input.error-input, .form-step-final fieldset .form-step-1 #name-input.error-input, .main-subcontainer fieldset .form-step-1 #name-input.error-input:focus, .main-subcontainer fieldset .form-step-1 #name-input.error-input:active, .main-subcontainer fieldset .form-step-1 #email-input.error-input, .form-step-final fieldset .form-step-1 #email-input.error-input, .main-subcontainer fieldset .form-step-1 #email-input.error-input:focus, .main-subcontainer fieldset .form-step-1 #email-input.error-input:active, .main-subcontainer fieldset .form-step-1 #tel-input.error-input, .form-step-final fieldset .form-step-1 #tel-input.error-input, .main-subcontainer fieldset .form-step-1 #tel-input.error-input:focus, .main-subcontainer fieldset .form-step-1 #tel-input.error-input:active {
  outline: 1px solid hsl(354deg, 84%, 57%) !important;
  border: 1px solid hsl(354deg, 84%, 57%) !important;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner, .form-step-final fieldset .form-step-2 .fs2-inner {
  display: grid;
  gap: 0.75rem;
  border: none;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label, .form-step-final fieldset .form-step-2 .fs2-inner label {
  position: relative;
  border: 1px solid hsl(229deg, 24%, 87%);
  border-radius: 0.375rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: hsl(0deg, 0%, 100%);
  transition: border 0.1s;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label:focus-within, .form-step-final fieldset .form-step-2 .fs2-inner label:focus-within {
  border: 1px solid hsl(243deg, 100%, 62%);
  background: hsl(217deg, 100%, 97%);
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label:hover, .form-step-final fieldset .form-step-2 .fs2-inner label:hover {
  border: 1px solid hsl(243deg, 100%, 62%) !important;
  transition: border 0.1s;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label input, .form-step-final fieldset .form-step-2 .fs2-inner label input {
  position: absolute;
  border: none;
  background: none;
  opacity: 0;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label div, .form-step-final fieldset .form-step-2 .fs2-inner label div {
  display: grid;
  gap: 0.125rem;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label div .plan-title, .form-step-final fieldset .form-step-2 .fs2-inner label div .plan-title {
  color: hsl(213deg, 96%, 18%);
  font-weight: 500;
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label div .fee, .form-step-final fieldset .form-step-2 .fs2-inner label div .fee {
  font-size: 0.875rem;
  display: flex;
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-2 .fs2-inner label div .free, .form-step-final fieldset .form-step-2 .fs2-inner label div .free {
  font-size: 0.875rem;
  color: hsl(213deg, 96%, 18%);
  display: none;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper {
  border-radius: 0.375rem;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: hsl(217deg, 100%, 97%);
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 1rem;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper span, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper span {
  font-size: 0.875rem;
  font-weight: 500;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper span.monthly, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper span.monthly {
  color: hsl(213deg, 96%, 18%);
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper span.yearly, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper span.yearly {
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .sr-only, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .sr-only {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .switch, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .switch {
  position: relative;
  display: inline-block;
  width: 2.375rem;
  height: 1.175rem;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .switch input, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .slider, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: hsl(213deg, 96%, 18%);
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .slider:before, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .slider:before {
  position: absolute;
  content: "";
  height: 0.8rem;
  width: 0.8rem;
  left: 0.2rem;
  bottom: 0.19rem;
  background-color: white;
  transition: 0.4s;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper input:checked + .slider:before, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper input:checked + .slider:before {
  transform: translateX(1.175rem);
  bottom: 0.1775rem;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .slider.round, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .slider.round {
  border-radius: 1rem;
}
.main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper .slider.round:before, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper .slider.round:before {
  border-radius: 50%;
}
.main-subcontainer fieldset .form-step-3, .form-step-final fieldset .form-step-3 {
  display: grid;
  gap: 0.75rem;
}
.main-subcontainer fieldset .form-step-3 label, .form-step-final fieldset .form-step-3 label {
  padding: 1rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(229deg, 24%, 87%);
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  display: grid;
  grid-template-columns: 18px 1fr 60px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.main-subcontainer fieldset .form-step-3 label input, .form-step-final fieldset .form-step-3 label input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}
.main-subcontainer fieldset .form-step-3 label input:checked + .checkmark, .form-step-final fieldset .form-step-3 label input:checked + .checkmark {
  background: hsl(243deg, 100%, 62%);
  border: 1px solid hsl(243deg, 100%, 62%);
}
.main-subcontainer fieldset .form-step-3 label input:checked + .checkmark.checkmark::before, .form-step-final fieldset .form-step-3 label input:checked + .checkmark.checkmark::before {
  display: flex;
  content: "";
  height: 100%;
  background: url("../assets/images/icon-checkmark.svg") no-repeat center;
}
.main-subcontainer fieldset .form-step-3 label .checkmark, .form-step-final fieldset .form-step-3 label .checkmark {
  position: relative;
  border-radius: 0.25rem;
  border: 1px solid hsl(229deg, 24%, 87%);
  width: 1.125rem;
  height: 1.125rem;
}
.main-subcontainer fieldset .form-step-3 label div, .form-step-final fieldset .form-step-3 label div {
  display: grid;
}
.main-subcontainer fieldset .form-step-3 label div .addon, .form-step-final fieldset .form-step-3 label div .addon {
  color: hsl(213deg, 96%, 18%);
  font-weight: 500;
  font-size: 1rem;
}
.main-subcontainer fieldset .form-step-3 label div .addon-desc, .form-step-final fieldset .form-step-3 label div .addon-desc {
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-3 label .fee, .form-step-final fieldset .form-step-3 label .fee {
  color: hsl(243deg, 100%, 62%);
  justify-self: end;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container, .form-step-final fieldset .form-step-4 .plan-addons-container {
  background: hsl(217deg, 100%, 97%);
  border-radius: 0.5rem;
  padding: 1rem;
  display: grid;
  gap: 1.25rem;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container, .form-step-final fieldset .form-step-4 .plan-addons-container .addon-price-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container.plan-price-container {
  border-bottom: 1px solid hsl(229deg, 24%, 87%);
  padding-bottom: 1.25rem;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container p, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container p, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container.plan-price-container p {
  color: hsl(213deg, 96%, 18%);
  font-weight: 500;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container .switch span, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container .switch span, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container.plan-price-container .switch span {
  color: hsl(225deg, 11%, 49%);
  box-shadow: inset 0 3px white, inset 0 -1px 0 hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container .switch input, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container .switch input, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container.plan-price-container .switch input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container .fee, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container.plan-price-container .fee, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container.plan-price-container .fee {
  color: hsl(213deg, 96%, 18%);
  font-weight: 700;
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container p, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container p, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container p, .form-step-final fieldset .form-step-4 .plan-addons-container .addon-price-container p {
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container .fee, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container .fee, .main-subcontainer fieldset .form-step-4 .plan-addons-container .addon-price-container .fee, .form-step-final fieldset .form-step-4 .plan-addons-container .addon-price-container .fee {
  justify-self: end;
  color: hsl(213deg, 96%, 18%);
}
.main-subcontainer fieldset .form-step-4 .total-price-container, .form-step-final fieldset .form-step-4 .total-price-container {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  padding: 1rem 1rem 0 1rem;
}
.main-subcontainer fieldset .form-step-4 .total-price-container p, .form-step-final fieldset .form-step-4 .total-price-container p {
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .form-step-4 .total-price-container .fee, .form-step-final fieldset .form-step-4 .total-price-container .fee {
  justify-self: end;
  color: hsl(243deg, 100%, 62%);
  font-weight: 700;
  font-size: 1.125rem;
}
.main-subcontainer fieldset .btn-container, .form-step-final fieldset .btn-container {
  background: hsl(0deg, 0%, 100%);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 1rem;
  display: flex;
  justify-content: space-between;
}
.main-subcontainer fieldset .btn-container .btn-back, .form-step-final fieldset .btn-container .btn-back {
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: none;
  color: hsl(225deg, 11%, 49%);
}
.main-subcontainer fieldset .btn-container .btn-next, .form-step-final fieldset .btn-container .btn-next {
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: hsl(213deg, 96%, 18%);
  color: hsl(217deg, 100%, 97%);
  margin-left: auto;
  order: 1;
}
.main-subcontainer fieldset .btn-container .btn-submit, .form-step-final fieldset .btn-container .btn-submit {
  border: none;
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: hsl(243deg, 100%, 62%);
  color: hsl(217deg, 100%, 97%);
  display: none;
  order: 1;
}

.form-step-final {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3.75rem 1.25rem;
}
.form-step-final img {
  width: 4rem;
  margin-bottom: 1rem;
}
.form-step-final h2 {
  color: hsl(213deg, 96%, 18%);
}
.form-step-final p {
  color: hsl(225deg, 11%, 49%);
  max-width: 420px;
}

@media screen and (min-width: 768px) {
  body {
    display: grid;
    place-content: center;
    min-height: 100vh;
  }
  .header-main-container {
    display: flex;
    padding: 1rem;
    background: hsl(0deg, 0%, 100%);
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 0.5rem;
  }
  .main-subcontainer, .form-step-final {
    margin: unset;
    box-shadow: unset;
    padding: 1.625rem calc(5vw - 1rem) 0 5vw;
  }
  .main-subcontainer .text-container, .form-step-final .text-container {
    margin-bottom: 3rem;
  }
  .main-subcontainer .text-container h1, .form-step-final .text-container h1 {
    font-size: 1.875rem;
  }
  .main-subcontainer fieldset, .form-step-final fieldset {
    width: 26.25rem;
    display: flex;
    flex-direction: column;
    height: 33.5rem;
  }
  .main-subcontainer fieldset .form-step-1, .form-step-final fieldset .form-step-1 {
    font-size: 0.875rem;
  }
  .main-subcontainer fieldset .form-step-1 #name-input, .form-step-final fieldset .form-step-1 #name-input, .main-subcontainer fieldset .form-step-1 #email-input, .form-step-final fieldset .form-step-1 #email-input, .main-subcontainer fieldset .form-step-1 #tel-input, .form-step-final fieldset .form-step-1 #tel-input {
    border-radius: 0.5rem;
    padding: 0.75rem;
    font-size: inherit;
  }
  .main-subcontainer fieldset .form-step-1 #name-input:not(:last-child), .form-step-final fieldset .form-step-1 #name-input:not(:last-child), .main-subcontainer fieldset .form-step-1 #email-input:not(:last-child), .form-step-final fieldset .form-step-1 #email-input:not(:last-child), .main-subcontainer fieldset .form-step-1 #tel-input:not(:last-child), .form-step-final fieldset .form-step-1 #tel-input:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  .main-subcontainer fieldset .form-step-2 .fs2-inner, .form-step-final fieldset .form-step-2 .fs2-inner {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .main-subcontainer fieldset .form-step-2 .fs2-inner label, .form-step-final fieldset .form-step-2 .fs2-inner label {
    flex-direction: column;
    gap: 2rem;
    cursor: pointer;
  }
  .main-subcontainer fieldset .form-step-2 .fs2-inner label:focus-within, .form-step-final fieldset .form-step-2 .fs2-inner label:focus-within {
    outline: 1px solid hsl(243deg, 100%, 62%);
    outline-offset: 4px;
  }
  .main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper {
    margin: 2rem 0 0 0;
    padding-right: 1.5rem;
    gap: 1.5rem;
  }
  .main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper label:focus-within .slider, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper label:focus-within .slider, .main-subcontainer fieldset .form-step-2 .monthly-yearly-wrapper label:hover .slider, .form-step-final fieldset .form-step-2 .monthly-yearly-wrapper label:hover .slider {
    outline: 1px solid hsl(213deg, 96%, 18%);
    outline-offset: 4px;
  }
  .main-subcontainer fieldset .form-step-3, .form-step-final fieldset .form-step-3 {
    gap: 1rem;
  }
  .main-subcontainer fieldset .form-step-3 label:hover, .form-step-final fieldset .form-step-3 label:hover {
    border: 1px solid hsl(243deg, 100%, 62%) !important;
  }
  .main-subcontainer fieldset .form-step-3 label:focus-within, .form-step-final fieldset .form-step-3 label:focus-within {
    outline: 1px solid hsl(243deg, 100%, 62%);
    outline-offset: 4px;
  }
  .main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container .switch:focus-within, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container .switch:focus-within {
    outline: 1px solid hsl(243deg, 100%, 62%);
    outline-offset: 4px;
    border-radius: 0.375rem;
  }
  .main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container .switch:focus-within span, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container .switch:focus-within span {
    color: hsl(243deg, 100%, 62%);
  }
  .main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container .switch span, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container .switch span {
    transition: 0.1s;
  }
  .main-subcontainer fieldset .form-step-4 .plan-addons-container .plan-price-container .switch span:hover, .form-step-final fieldset .form-step-4 .plan-addons-container .plan-price-container .switch span:hover {
    color: hsl(243deg, 100%, 62%);
    cursor: pointer;
    box-shadow: inset 0 3px white, inset 0 -1px 0 hsl(243deg, 100%, 62%);
    transition: 0.1s;
  }
  .main-subcontainer fieldset .btn-container, .form-step-final fieldset .btn-container {
    position: unset;
    padding: 0;
    margin-top: auto;
  }
  .main-subcontainer fieldset .btn-container button, .form-step-final fieldset .btn-container button, .main-subcontainer fieldset .btn-container input, .form-step-final fieldset .btn-container input {
    cursor: pointer;
  }
  .main-subcontainer fieldset .btn-container button:focus-visible, .form-step-final fieldset .btn-container button:focus-visible, .main-subcontainer fieldset .btn-container input:focus-visible, .form-step-final fieldset .btn-container input:focus-visible {
    outline-offset: 3px;
  }
  .main-subcontainer fieldset .btn-container .btn-back, .form-step-final fieldset .btn-container .btn-back {
    transition: color 0.1s;
  }
  .main-subcontainer fieldset .btn-container .btn-back:hover, .form-step-final fieldset .btn-container .btn-back:hover, .main-subcontainer fieldset .btn-container .btn-back:focus-visible, .form-step-final fieldset .btn-container .btn-back:focus-visible {
    color: hsl(213deg, 96%, 18%);
    transition: color 0.1s;
  }
  .main-subcontainer fieldset .btn-container .btn-next, .form-step-final fieldset .btn-container .btn-next, .main-subcontainer fieldset .btn-container .btn-submit, .form-step-final fieldset .btn-container .btn-submit {
    transition: background 0.1s;
  }
  .main-subcontainer fieldset .btn-container .btn-next:hover, .form-step-final fieldset .btn-container .btn-next:hover, .main-subcontainer fieldset .btn-container .btn-next:focus-visible, .form-step-final fieldset .btn-container .btn-next:focus-visible, .main-subcontainer fieldset .btn-container .btn-submit:hover, .form-step-final fieldset .btn-container .btn-submit:hover, .main-subcontainer fieldset .btn-container .btn-submit:focus-visible, .form-step-final fieldset .btn-container .btn-submit:focus-visible {
    background: #033e86;
    transition: 0.1s;
  }
  .main-subcontainer fieldset .btn-container .btn-next.btn-submit:hover, .main-subcontainer fieldset .btn-container .btn-next.btn-submit:focus-visible, .main-subcontainer fieldset .btn-container .btn-submit.btn-submit:hover, .form-step-final fieldset .btn-container .btn-submit.btn-submit:hover, .main-subcontainer fieldset .btn-container .btn-submit.btn-submit:focus-visible, .form-step-final fieldset .btn-container .btn-submit.btn-submit:focus-visible {
    background: #716aff;
    transition: 0.1s;
  }
  .form-step-final {
    padding: clamp(7.5vw, 12.5vw, 9rem) calc(5vw - 1rem) clamp(7.5vw, 12.5vw, 9rem) 5vw;
    gap: 1rem;
  }
  .form-step-final img {
    width: 5rem;
  }
  .form-step-final h2 {
    font-size: 2rem;
  }
}
body {
  font-family: Ubuntu, "sans-serif";
  background: hsl(217deg, 100%, 97%);
}/*# sourceMappingURL=style.css.map */