*,*:after,*:before{padding:0;margin:0;box-sizing:border-box}body{width:100%;height:100%;background:hsl(217,100%,97%)}#root{width:100%;height:100vh;position:relative}.app{width:100%;height:100dvh;font-family:Ubuntu,sans-serif;display:flex;flex-direction:column}button{font-family:Ubuntu,sans-serif}@media (min-width: 768px){.app{flex-direction:unset;display:grid}}.app-header{background:url(/images/bg-sidebar-mobile.svg);background-position:top;background-repeat:no-repeat;background-size:cover;width:100%;height:170px;display:flex;justify-content:center;align-items:flex-start}.app-header .step-indicators{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:2rem}.app-header .step-indicators .step-indicator{display:flex;align-items:start;justify-content:flex-start}.app-header .step-indicators .step-indicator .step-indicator-btn{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid hsl(0,0%,100%);color:#fff;font-weight:weights(medium);font-size:1rem;background:transparent;cursor:pointer}.app-header .step-indicators .step-indicator .step-indicator-btn.active{background:hsl(206,94%,87%);color:#02295a;border:1px solid hsl(206,94%,87%);font-weight:weights(bolder)}.app-header .step-indicators .step-indicator .step-indicator-label{flex-direction:column;justify-content:flex-start;align-items:flex-start;display:none;gap:2px}.app-header .step-indicators .step-indicator .step-indicator-label span{text-transform:uppercase;color:#9699ab;font-family:Ubuntu,sans-serif;font-size:.825rem}.app-header .step-indicators .step-indicator .step-indicator-label p{display:block;color:#fff;text-transform:uppercase;font-family:Ubuntu,sans-serif;font-weight:weights(bolder)}@media screen and (min-width: 769px){.app-header{background:url(/images/bg-sidebar-desktop.svg);background-position:center;background-repeat:no-repeat;background-size:cover;height:100%;width:100%;max-width:275px;display:flex;justify-content:flex-start;align-items:flex-start;grid-area:sidebar;border-radius:.5rem;padding:2.5rem 2rem}.app-header .step-indicators{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:1.9rem;margin-top:unset}.app-header .step-indicators .step-indicator{display:flex;gap:1rem}.app-header .step-indicators .step-indicator .step-indicator-label{display:flex}}.app-main{flex:1}.step.step-one{background:hsl(0,0%,100%);width:343px;padding:2rem 1.35rem 1.5rem;border-radius:10px;position:absolute;top:100px;left:50%;transform:translate(-50%);box-shadow:0 1rem 10px #0000000d}.step.step-one h1{font-size:1.5rem;padding-bottom:.5rem;color:#02295a}.step.step-one p{font-size:18px;line-height:1.4;color:#9699ab;padding-bottom:20px;font-weight:500}.step.step-one fieldset{border:none}.step.step-one fieldset label{display:block;padding-bottom:13px}.step.step-one fieldset label .input-header{display:flex;justify-content:space-between;align-items:center}.step.step-one fieldset label .input-header span:nth-child(1){font-size:14px;display:block;margin-bottom:.75rem;font-weight:500;letter-spacing:-.4px;color:#02295a}.step.step-one fieldset label .input-header span:nth-child(2){font-size:13px;display:block;margin-bottom:.4rem;font-weight:500;letter-spacing:-.4px;color:#ed3548}.step.step-one fieldset label .input{width:100%;font-size:14px;border:1px solid hsl(229,24%,87%);border-radius:3px;padding:11px 8px 11px 15px;color:#02295a}.step.step-one fieldset label .input::placeholder{font-family:Ubuntu,sans-serif;font-weight:700;color:#9699ab}.step.step-one fieldset label .input:focus{outline:none;border-color:#02295a}.step.step-one fieldset label .input.error{border-color:#ed3548}.step.step-two{background:hsl(0,0%,100%);width:343px;padding:2rem 1.4rem 1.5rem;border-radius:10px;position:relative;top:-70px;left:50%;transform:translate(-50%);box-shadow:0 1rem 10px #0000000d}.step.step-two h1{font-size:1.5rem;padding-bottom:.5rem;color:#02295a}.step.step-two p{font-size:18px;line-height:1.4;color:#9699ab;padding-bottom:20px;font-weight:500}.step.step-two .plans{display:flex;flex-direction:column;justify-content:center;align-items:start;gap:1rem;margin-bottom:1rem}.step.step-two .plans .plan{padding:1rem;display:flex;justify-content:flex-start;align-items:start;gap:1rem;background:transparent;border:1px solid hsl(229,24%,87%);border-radius:.5rem;width:100%;transition:background .2s ease,border .2s ease}.step.step-two .plans .plan.active{background:hsl(231,100%,99%);border:1px solid hsl(213,96%,18%)}.step.step-two .plans .plan:hover{border:1px solid hsl(213,96%,18%);cursor:pointer}.step.step-two .plans .plan .plan-details{display:flex;flex-direction:column;align-items:flex-start}.step.step-two .plans .plan .plan-details .plan-name{font-size:1rem;color:#02295a;margin-bottom:.5rem;font-weight:700}.step.step-two .plans .plan .plan-details .price{font-weight:500;color:#9699ab;margin-bottom:.5rem}.step.step-two .plans .plan .plan-details .free-months{font-weight:500;color:#02295a}.step.step-two .toggle-plan{display:flex;justify-content:center;align-items:center;gap:1rem;background:hsl(231,100%,99%);border-radius:10px;width:100%;padding:.75rem 1rem}.step.step-two .toggle-plan span{font-weight:700;color:#9699ab}.step.step-two .toggle-plan span.active{color:#02295a}.step.step-two .toggle-plan .toggle{width:40px;height:20px;background:hsl(213,96%,18%);border-radius:10px;position:relative;cursor:pointer}.step.step-two .toggle-plan .toggle .toggle-indicator{width:12px;height:12px;background:hsl(0,0%,100%);border-radius:50%;position:absolute;top:4px;left:4px;transition:transform .2s ease}.step.step-two .toggle-plan .toggle .toggle-indicator.active{transform:translate(20px)}.step.step-three{background:hsl(0,0%,100%);width:343px;padding:2rem 1.4rem 1.5rem;border-radius:10px;position:relative;top:-70px;left:50%;transform:translate(-50%);box-shadow:0 1rem 10px #0000000d}.step.step-three h1{font-size:1.5rem;padding-bottom:.5rem;color:#02295a}.step.step-three p{font-size:18px;line-height:1.4;color:#9699ab;padding-bottom:20px;font-weight:500}.step.step-three .add-ons{display:flex;flex-direction:column;justify-content:center;align-items:start;gap:1rem;margin-bottom:1rem}.step.step-three .add-ons .add-on{padding:1rem;display:flex;justify-content:flex-start;align-items:center;gap:.75rem;background:transparent;border:1px solid hsl(229,24%,87%);border-radius:.5rem;width:100%}.step.step-three .add-ons .add-on.active{background:hsl(231,100%,99%);border-color:#02295a}.step.step-three .add-ons .add-on:hover{border-color:#02295a;cursor:pointer}.step.step-three .add-ons .add-on label{width:1rem;height:1rem;border-radius:.25rem;border:1px solid hsl(229,24%,87%);position:relative}.step.step-three .add-ons .add-on label:before{content:"";width:.55rem;height:6px;border-left:2px solid hsl(231,100%,99%);border-bottom:2px solid hsl(231,100%,99%);position:absolute;top:45%;left:50%;transform:translate(-50%,-65%) rotate(-45deg);opacity:0;transition:opacity .2s ease}.step.step-three .add-ons .add-on label.active{border-color:#473dff;background:hsl(243,100%,62%)}.step.step-three .add-ons .add-on label.active:before{opacity:1}.step.step-three .add-ons .add-on input[type=checkbox]{-webkit-appearance:none}.step.step-three .add-ons .add-on input[type=checkbox]:checked+.add-on-details{color:#02295a;border-color:#02295a}.step.step-three .add-ons .add-on-details{display:flex;flex-direction:column;align-items:flex-start}.step.step-three .add-ons .add-on-details .add-on-name{font-size:1rem;color:#02295a;margin-bottom:.25rem;font-weight:700}.step.step-three .add-ons .add-on-details .add-on-description{font-weight:500;color:#9699ab;text-align:left}.step.step-three .add-ons .add-on .add-on-price{font-weight:500;color:#473dff;margin-left:auto}.step.step-four{background:hsl(0,0%,100%);width:343px;padding:2rem 1.5rem 1.5rem 1.4rem;border-radius:10px;position:relative;top:-70px;left:50%;transform:translate(-50%);box-shadow:0 1rem 10px #0000000d}.step.step-four h1{font-size:1.5rem;padding-bottom:.5rem;color:#02295a}.step.step-four p{font-size:1rem;line-height:1.5;color:#9699ab;padding-bottom:20px;font-weight:500}.step.step-four .summary{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;background:hsl(231,100%,99%);padding:1rem;border-radius:.5rem}.step.step-four .summary-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;width:100%;border-bottom:1px solid hsl(229,24%,87%)}.step.step-four .summary-item .plan-details{display:flex;flex-direction:column;justify-content:start;align-items:start;gap:.25rem}.step.step-four .summary-item .plan-details span{display:block}.step.step-four .summary-item .plan-details span:first-child{font-weight:700;color:#02295a}.step.step-four .summary-item .plan-details span:last-child{font-weight:500;color:#9699ab;text-align:right;text-decoration:underline;cursor:pointer}.step.step-four .summary-item .plan-details span:last-child:hover{color:#473dff}.step.step-four .summary-item .plan-price{font-weight:700;color:#02295a;text-align:right;margin-left:auto}.step.step-four .summary .plan-add-ons{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.5rem;width:100%;padding:1rem 0;color:#9699ab}.step.step-four .summary .plan-add-ons .plan-add-on{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.5rem 0}.step.step-four .summary .plan-add-ons .plan-add-on-name{font-weight:400;color:#9699ab}.step.step-four .summary .plan-add-ons .plan-add-on-price{font-weight:500;color:#02295a;margin-left:auto}.step.step-four .total{margin-top:1rem;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 1rem}.step.step-four .total .total-label{font-weight:700;color:#9699ab}.step.step-four .total .total-price{font-weight:700;color:#473dff}.thank-you{display:flex;flex-direction:column;align-items:center;text-align:center;background:hsl(0,0%,100%);width:343px;padding:4rem 1.5rem;border-radius:10px;position:relative;top:-70px;left:50%;transform:translate(-50%);box-shadow:0 1rem 10px #0000000d}.thank-you img{margin-bottom:1rem}.thank-you h1{font-size:1.5rem;color:#02295a;padding-bottom:.5rem}.thank-you p{font-size:1rem;color:#9699ab;line-height:1.5}@media (min-width: 769px){.app{display:grid;grid-template-areas:"sidebar main" "sidebar footer";grid-template-columns:275px 1fr;grid-template-rows:1fr auto;gap:1.5rem;padding:1rem;max-width:940px;margin:0 auto;background-color:#fff;height:auto;min-height:600px;border-radius:1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1rem 10px #0000000d}.app .step,.app .thank-you{position:relative;top:unset;width:100%;grid-area:main;box-shadow:unset;padding:2.5rem 4.5rem 2rem}.app .step h1,.app .thank-you h1{font-size:2rem;padding-bottom:.75rem}.app .step p,.app .thank-you p{font-size:1rem;letter-spacing:-.2px;color:#9699ab;line-height:1.5;padding-bottom:2.25rem}.app .step.step-one fieldset{border:none}.app .step.step-one fieldset label{display:block;padding-bottom:13px}.app .step.step-one fieldset label span{font-size:14px;display:block;margin-bottom:.75rem;font-weight:500;letter-spacing:-.4px;color:#02295a}.app .step.step-one fieldset label input{width:100%;font-size:1rem;border:1px solid hsl(229,24%,87%);border-radius:3px;padding:14px 8px 14px 15px;color:#9699ab;margin-bottom:.4rem}.app .step.step-one fieldset label input::placeholder{font-family:Ubuntu,sans-serif;font-weight:700;color:#9699ab}.app .step.step-one fieldset label input:focus{outline:none;border-color:#02295a}.app .step.step-two .plans{display:flex;flex-direction:row;justify-content:center;align-items:start;gap:.85rem;margin-bottom:1.75rem}.app .step.step-two .plans .plan{padding:1rem .7rem .75rem;display:flex;flex-direction:column;justify-content:flex-start;align-items:start;gap:2.5rem}.app .step.step-two .plans .plan .plan-details{display:flex;flex-direction:column;align-items:flex-start}.app .step.step-two .plans .plan .plan-details .plan-name{font-size:1.125rem;color:#02295a;margin-bottom:.5rem;font-weight:700}.app .step.step-two .plans .plan .plan-details .price{font-weight:500;color:#9699ab;margin-bottom:.5rem}.app .step.step-two .plans .plan .plan-details .free-months{font-weight:500;color:#02295a}.app .step.step-two .toggle-plan{display:flex;justify-content:center;align-items:center;gap:1rem;background:hsl(231,100%,99%);border-radius:10px;width:100%;padding:.75rem 1rem}.app .step.step-two .toggle-plan span{font-weight:700;color:#9699ab}.app .step.step-two .toggle-plan span.active{color:#02295a}.app .step.step-two .toggle-plan .toggle{width:40px;height:20px;background:hsl(213,96%,18%);border-radius:10px;position:relative;cursor:pointer}.app .step.step-two .toggle-plan .toggle .toggle-indicator{width:12px;height:12px;background:hsl(0,0%,100%);border-radius:50%;position:absolute;top:4px;left:4px;transition:transform .2s ease}.app .step.step-two .toggle-plan .toggle .toggle-indicator.active{transform:translate(20px)}.app .step.step-three .add-ons{display:flex;flex-direction:column;justify-content:center;align-items:start;gap:1.125rem;margin-bottom:1rem}.app .step.step-three .add-ons .add-on{padding:1.25rem 1.45rem;display:flex;justify-content:flex-start;align-items:center;gap:1.5rem;background:transparent;border:1px solid hsl(229,24%,87%);border-radius:.35rem;width:100%;max-width:455px}.app .step.step-three .add-ons .add-on.active{background:hsl(231,100%,99%);border-color:#02295a}.app .step.step-three .add-ons .add-on:hover{border-color:#02295a;cursor:pointer}.app .step.step-three .add-ons .add-on label{width:1.25rem;height:1.25rem;border-radius:.25rem;border:1px solid hsl(229,24%,87%);position:relative}.app .step.step-three .add-ons .add-on label:before{content:"";width:.55rem;height:6px;border-left:2px solid hsl(231,100%,99%);border-bottom:2px solid hsl(231,100%,99%);position:absolute;top:45%;left:50%;transform:translate(-50%,-65%) rotate(-45deg);opacity:0;transition:opacity .2s ease}.app .step.step-three .add-ons .add-on label.active{border-color:#473dff;background:hsl(243,100%,62%)}.app .step.step-three .add-ons .add-on label.active:before{opacity:1}.app .step.step-three .add-ons .add-on input[type=checkbox]{-webkit-appearance:none}.app .step.step-three .add-ons .add-on input[type=checkbox]:checked+.add-on-details{color:#02295a;border-color:#02295a}.app .step.step-three .add-ons .add-on-details{display:flex;flex-direction:column;align-items:flex-start}.app .step.step-three .add-ons .add-on-details .add-on-name{font-size:1rem;color:#02295a;margin-bottom:.25rem;font-weight:700}.app .step.step-three .add-ons .add-on-details .add-on-description{font-weight:500;color:#9699ab;text-align:left}.app .step.step-three .add-ons .add-on .add-on-price{font-weight:500;color:#473dff;margin-left:auto}.app .step.step-four .summary{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;background:hsl(231,100%,99%);padding:.75rem 1.75rem;border-radius:.5rem;max-width:455px}.app .step.step-four .summary-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;width:100%;border-bottom:1px solid hsl(229,24%,87%)}.app .step.step-four .summary-item .plan-details{display:flex;flex-direction:column;justify-content:start;align-items:start;gap:.25rem}.app .step.step-four .summary-item .plan-details span{display:block}.app .step.step-four .summary-item .plan-details span:first-child{font-weight:700;color:#02295a}.app .step.step-four .summary-item .plan-details span:last-child{font-weight:500;color:#9699ab;text-align:right;text-decoration:underline;cursor:pointer}.app .step.step-four .summary-item .plan-details span:last-child:hover{color:#473dff}.app .step.step-four .summary-item .plan-price{font-weight:700;color:#02295a;text-align:right;margin-left:auto}.app .step.step-four .summary .plan-add-ons{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:.5rem;width:100%;padding:1rem 0;color:#9699ab}.app .step.step-four .summary .plan-add-ons .plan-add-on{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.5rem 0}.app .step.step-four .summary .plan-add-ons .plan-add-on-name{font-weight:400;color:#9699ab}.app .step.step-four .summary .plan-add-ons .plan-add-on-price{font-weight:500;color:#02295a;margin-left:auto}.app .step.step-four .total{margin-top:1rem;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 2rem}.app .step.step-four .total .total-label{font-weight:700;color:#9699ab}.app .step.step-four .total .total-price{font-weight:700;color:#473dff;font-size:1.25rem}.app .thank-you{width:100%;max-width:600px;margin:auto;padding:4rem 1.5rem}.app .thank-you img{margin-bottom:1rem}}.app-footer{background:hsl(0,0%,100%);padding:1rem 1.15rem;position:relative;display:flex;justify-content:space-between;align-items:center;grid-area:footer}.app-footer .btn{background:hsl(213,96%,18%);color:#d6d9e6;padding:12px 1rem;border:none;border-radius:3px;cursor:pointer;font-size:14px}.app-footer .btn:hover{background:#011e41}.app-footer .btn.go-back{padding:12px 0;background:none;color:#9699ab}.app-footer .btn.go-back:hover{color:#02295a}.app-footer .btn.go-back.disabled{visibility:hidden}.app-footer .btn.next{background:hsl(213,96%,18%);color:#d6d9e6;justify-self:flex-end}.app-footer .btn.next:hover{background:#011e41}.app-footer .btn.next.confirm{background:hsl(243,100%,62%)}.app-footer .btn.next.confirm:hover{background:#7770ff}@media (min-width: 768px){.app-footer{padding:1rem 5rem}.app-footer .btn{padding:1rem 1.5rem;font-size:1rem}}