@import"https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap";:root{--clr-marine-blue: hsl(213, 96%, 18%);--clr-purplish-blue: hsl(243, 100%, 62%);--clr-pastel-blue: hsl(228, 100%, 84%);--clr-light-blue: hsl(206, 94%, 87%);--clr-strawberry-red: hsl(354, 84%, 57%)}:root{--clr-cool-gray: #9699ab;--clr-light-gray: #d6d9e6;--clr-magnolia: #f0f6ff;--clr-alabaster: #fafbff;--clr-black: hsl(0, 0%, 0%);--clr-white: hsl(0, 0%, 100%)}:root{--ff-primary: "Ubuntu", sans-serif}:root{--max-width: 1440px;--padding: 1rem;--global-radius: .75rem;--transition: .4s;--shadow: 0 5px 15px rgba(0, 0, 0, .1);--shadow-hover: 0 5px 15px rgba(0, 0, 0, .2);--btn-padding: .5em 1.5em;--btn-border: 1px solid var(--clr-cool-gray);--btn-border-radius: calc(var(--global-radius) / 2);--btn-shadow: 0 5px 15px rgba(0, 0, 0, .1);--btn-small: .875rem;--btn-medium: 1rem;--btn-large: 1.125rem;--input-padding: .75em;--default-border: 2px solid var(--clr-light-gray);--default-border-radius: calc(var(--global-radius) / 2);--input-shadow: 0 5px 15px rgba(0, 0, 0, .1);--input-font-size: 1rem;--input-font-weight: 700;--input-focus-border: 1px solid var(--clr-purplish-blue);--input-error-border: 1px solid var(--clr-strawberry-red);--input-success-border: 1px solid var(--clr-pastel-blue);--input-placeholder-color: var(--clr-cool-gray);--input-error-color: var(--clr-strawberry-red);--input-success-color: var(--clr-pastel-blue);--input-icon-color: var(--clr-cool-gray);--input-icon-hover-color: var(--clr-purplish-blue);--input-icon-focus-color: var(--clr-purplish-blue);--input-icon-error-color: var(--clr-strawberry-red);--input-icon-success-color: var(--clr-pastel-blue);--input-icon-disabled-color: var(--clr-cool-gray);--input-icon-disabled-hover-color: var(--clr-cool-gray);--input-icon-disabled-focus-color: var(--clr-cool-gray);--input-icon-disabled-error-color: var(--clr-cool-gray);--input-icon-disabled-success-color: var(--clr-cool-gray);--input-icon-size: 1.5rem;--input-icon-margin: 0 .5rem 0 0;--input-icon-disabled-opacity: .5;--input-label-color: var(--clr-marine-blue);--input-label-font-size: .875rem;--input-label-font-weight: 500;--input-label-margin: 0 0 .5rem 0;--input-label-error-color: var(--clr-strawberry-red);--input-message-color: var(--clr-cool-gray);--input-message-font-size: .875rem;--input-message-font-weight: 500;--input-message-margin: .25rem 0 0 0;--input-message-error-color: var(--clr-strawberry-red);--input-message-success-color: var(--clr-pastel-blue);--transition-delay: .2s;--transition-default: all cubic-bezier(.36, .53, .33, 1.01) var(--transition-delay);--round-border-radius: 50%}*,*:before,*:after{box-sizing:border-box;margin:0;font-weight:400}html{font-size:16px}body{display:flex;place-items:start;min-height:100vh;color:var(--clr-black);background:var(--clr-magnolia);font-family:var(--ff-primary);font-size:16px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all .25s ease-in}@media screen and (min-width: 60em){body{place-items:center}}#multiStepFormApp{display:block;margin:0 auto;position:relative;padding:var(--padding);transition:all .25s ease-in}@media screen and (max-width: 40em){#multiStepFormApp{width:100%;height:100vh}}.hidden{display:none}.not-visible{visibility:hidden;opacity:0}.visibile{visibility:visible;opacity:1}.slide-up-enter-active,.slide-leave-active{transition:all .25s ease-in;transition-delay:.25s}.slide-up-enter-from{opacity:0;position:absolute;translate:0 1rem}.slide-up-enter-to,.slide-up-leave-from{opacity:1;translate:0 0}.slide-up-leave-to{opacity:0;translate:0 1rem}h1,h2,h3,h4,h5,h6{font-family:var(--ff-primary);font-weight:700;margin-bottom:.5rem}h2{font-size:2.25rem;color:var(--clr-marine-blue)}h3{font-style:italic}.subtitle{color:var(--clr-cool-gray)}a{text-decoration:none;color:var(--clr-marine-blue);transition:.4s}.button{display:flex;flex-flow:row nowrap;justify-items:center;align-items:center;color:var(--clr-marine-blue);padding:var(--btn-padding);border-radius:var(--btn-border-radius);border:var(--btn-border);font-weight:500;cursor:pointer;transition:var(--transition-default);position:relative;font-size:var(--btn-small)}.button--small{font-size:var(--btn-small)}.button--medium{font-size:var(--btn-medium)}.button--large{font-size:var(--btn-large)}.button *{transition:all .25s ease-in}.button .button__text{display:inline-block}.button--primary{background:var(--clr-marine-blue);color:var(--clr-white)}.button--primary:not(.button.button--simple):hover{background:var(--clr-purplish-blue);box-shadow:var(--btn-shadow)}.button--primary.has-icon:hover .button__text{transform:translate(-.5rem)}.button.button--disabled{background:var(--clr-cool-gray);pointer-events:none;cursor:default}.button.button--disabled:hover{background:var(--clr-cool-gray)!important}.button:hover .icon.left{translate:0 .1rem;visibility:visible;opacity:1}.button:hover .icon.right{translate:-.45rem .1rem;visibility:visible;opacity:1;right:0}.button .icon{translate:1rem .1rem;opacity:0;visibility:hidden;transition:all .25s ease-in}.button .icon svg{width:1.25rem}.button .icon.right{translate:-1rem .1rem}.button .icon.left{margin-right:.1rem}.button .icon.right{position:absolute;right:1rem;top:.2rem;transform:rotate(180deg)}.button--clear{background:none;border:1px solid transparent;font-weight:700;padding-left:0;padding-right:0;margin-left:-1rem;color:var(--clr-cool-gray)}.button--clear .button__text{font-weight:inherit}.button--clear .icon{display:inline-block;translate:1rem .1rem;opacity:0;visibility:hidden;transition:all .25s ease-in;margin-right:.1rem}.button--clear .icon svg{width:1.25rem}.button--clear:not(.button.button--simple):hover{background:none;color:var(--clr-purplish-blue);margin-left:0}.button--simple:active,.button--simple:hover,.button--simple.active{color:var(--clr-marine-blue)}@media (hover: hover){a:hover{background-color:var(--clr-purplish-blue)}}.multi-step-form{display:grid;grid-template-columns:1fr 2fr;gap:1rem;background:var(--clr-white);padding:1rem;width:100%;height:auto;margin:0 auto;border-radius:var(--global-radius);box-shadow:var(--shadow);border:1px solid var(--clr-cool-gray)}@media screen and (min-width: 60em){.multi-step-form{width:55.25rem;height:35.5rem}}.form-navigation{display:grid;gap:1.5rem;justify-items:start;width:100%;height:100%;position:relative}.form-navigation .form-navigation__bg{background-image:url(./bg-sidebar-desktop-e6d2744a.svg);background-size:contain;background-repeat:no-repeat;display:block;width:100%;height:100%;content:"";position:absolute;bottom:0;left:0;z-index:0}.form-navigation ul{display:grid;align-content:start;gap:1rem;width:100%;height:auto;list-style:none;margin:0;padding:1.5rem;border-radius:.5rem;color:var(--clr-white);z-index:1;position:relative}.form-navigation ul li:hover .step-number :after{translate:0 calc(-200% - 2px)}@supports selector(:has(ul)){.form-navigation ul li:has(+:hover) .step-number span{color:var(--clr-white)}.form-navigation ul li:has(+:hover) .step-number:after{translate:0 calc(200% - 2px)}}.form-navigation ul li .step-button{display:none;flex-flow:row nowrap;justify-content:flex-start;align-items:center;padding:.5rem;color:inherit;background:none;border:none;outline:none;text-align:left;cursor:pointer}.form-navigation ul li .step-button:hover .step-number,.form-navigation ul li .step-button:active .step-number,.form-navigation ul li .step-button.active .step-number{color:var(--clr-purplish-blue)}.form-navigation ul li .step-button:hover .step-number:after,.form-navigation ul li .step-button:active .step-number:after,.form-navigation ul li .step-button.active .step-number:after{display:block;scale:1;opacity:1}.form-navigation ul li .step-button:hover .step-label,.form-navigation ul li .step-button:active .step-label,.form-navigation ul li .step-button.active .step-label{transform:translate(.4rem)}.form-navigation ul li .step-button.active .step-number:after{opacity:1}@media screen and (min-width: 40em){.form-navigation ul li .step-button{display:flex}}@media screen and (max-width: 40em){.form-navigation ul li .step-button .step-label{display:none}}.form-navigation ul li .step-button .step-number{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;--step-number-size: 2.125rem;width:var(--step-number-size);height:var(--step-number-size);--round-border-radius: 50%;border-radius:var(--round-border-radius);background:none;color:var(--clr-purplish-blue);font-size:.875rem;font-weight:700;text-align:center;line-height:2.125rem;border:2px solid var(--clr-white);color:var(--clr-white);margin-right:1rem;position:relative}.form-navigation ul li .step-button .step-number span{position:inherit;z-index:1;font-weight:700}.form-navigation ul li .step-button .step-number:after{display:block;transition:translate .25s,opacity .55s;opacity:0;width:var(--step-number-size);height:var(--step-number-size);position:absolute;z-index:0;content:"";background:var(--clr-light-blue);border-radius:var(--round-border-radius);border:2px solid var(--clr-white)}.form-navigation ul li .step-button .step-label{text-transform:uppercase;transition:var(--transition-default);overflow:hidden;position:relative}.form-navigation ul li .step-button .step-label .eyebrow{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;color:var(--clr-pastel-blue);font-size:.875rem;position:relative;overflow:hidden}.form-navigation ul li .step-button .step-label .title{display:flex;flex-flow:row nowrap;justify-content:flex-start;align-items:center;font-weight:700}.form-navigation ul li .step-button .step-label .active-identifier{font-size:.5rem;padding-left:.5rem;transform:translateY(-.1rem)}.clicked{animation:bounce .2s ease-in-out infinite;animation-iteration-count:1}@keyframes bounce{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.multi-step-form-body{display:flex;flex-flow:column nowrap;gap:1rem;width:100%;height:100%;position:relative;padding:2rem 5rem 1rem 2rem;overflow-x:hidden}@media screen and (min-width: 60em){.multi-step-form-body{padding:3rem 4rem 2rem 3rem}}.multi-step-form-body header{margin-bottom:.5rem}.form-action{display:flex;justify-content:space-between;margin-top:auto}.form-action button{justify-self:flex-end}.form-page-wrapper{display:block;position:relative;width:100%;overflow:hidden}.form-page{display:flex;flex-flow:column nowrap;gap:1rem;align-items:start;background:var(--clr-white);width:100%;height:100%;padding:var(--padding) 0}.form-page .form__group{display:grid;gap:0;width:100%;height:auto;position:relative}.form-page .form__group label{display:flex;flex-flow:row nowrap;justify-content:space-between;margin:var(--input-label-margin);font-weight:var(--input-label-font-weight);color:var(--input-label-color)}.form-page .form__group label span{font-weight:inherit;color:inherit}.form-page .form__group label .error-message{color:var(--input-label-error-color)}.form-page .form__group input[type=text],.form-page .form__group input[type=email],.form-page .form__group input[type=tel]{font-size:var(--input-font-size);padding:var(--input-padding);border-radius:var(--default-border-radius);border:var(--default-border);width:100%;color:var(--clr-cool-gray);background:var(--clr-white);transition:var(--transition-default);outline:none;font-weight:var(--input-font-weight)}.form-page .form__group input[type=text]:focus,.form-page .form__group input[type=text]:active,.form-page .form__group input[type=text]:hover,.form-page .form__group input[type=email]:focus,.form-page .form__group input[type=email]:active,.form-page .form__group input[type=email]:hover,.form-page .form__group input[type=tel]:focus,.form-page .form__group input[type=tel]:active,.form-page .form__group input[type=tel]:hover{border-color:var(--clr-purplish-blue)}.form-page .form__group input[type=text].error,.form-page .form__group input[type=email].error,.form-page .form__group input[type=tel].error{border-color:var(--clr-strawberry-red)}.plans{display:grid;width:100%;position:relative;grid-template-columns:1fr 1fr 1fr;gap:1rem;justify-items:center;padding-left:2px;padding-right:2px}.plans .plans__plan-box{display:flex;flex-flow:column nowrap;justify-content:space-between;align-items:baseline;padding:1rem;border:2px solid transparent;transition:var(--transition-default);cursor:pointer;width:100%;background:transparent;text-align:left;position:relative;overflow:hidden}.plans .plans__plan-box *{z-index:1}.plans .plans__plan-box .plan-name{position:relative;transition:all .25s ease}.plans .plans__plan-box .plan-name.plan-name--move-up{transform:translateY(-1rem)}.plans .plans__plan-box h2{font-size:1.25rem}.plans .plans__plan-box .icon{margin-bottom:2rem}.plans .plans__plan-box:after,.plans .plans__plan-box:before{display:block;width:100%;height:100%;content:"";position:absolute;top:0;left:0;z-index:0;border-radius:var(--default-border-radius);transition:var(--transition-default)}.plans .plans__plan-box:before{border:var(--default-border)}.plans .plans__plan-box:hover{border:2px solid transparent}.plans .plans__plan-box:hover:after,.plans .plans__plan-box.active:after{border:var(--default-border);border-color:var(--clr-purplish-blue);background:var(--clr-alabaster);visibility:visible;opacity:1}.plans .plans__plan-box:hover+.plans__plan-box:after{translate:-100%;visibility:visible;opacity:1}.plans .plans__plan-box:has(+:hover):after{translate:100%}.plans .plans__plan-box .plan-price{font-size:1rem;font-weight:500;color:var(--clr-cool-gray)}.plans .plans__plan-box .plan-promotion{font-size:.875em;margin-top:.75em;display:block;position:absolute;bottom:1rem}.billing-frequency-controller{display:flex;flex-flow:row nowrap;justify-content:center;align-items:center;box-sizing:border-box;width:100%;position:relative;gap:1rem;padding:.5rem 1rem;background:var(--clr-alabaster);border-radius:var(--default-border-radius);margin-top:1rem}.billing-frequency-controller .button{margin:0}.frequency-switch{display:flex;position:relative;margin:0 1rem;padding:.125rem;outline:none;border:none;background:none}.frequency-switch__toggle{display:flex;align-items:center;background:var(--clr-marine-blue);width:3rem;height:1.5rem;border-radius:1rem;padding:.25rem;transition:var(--transition-default);cursor:pointer}.frequency-switch__toggle:after{display:block;width:1rem;height:1rem;border-radius:50%;background:var(--clr-white);content:"";margin:0;padding:0;transition:var(--transition-default)}.frequency-switch__toggle--monthly:after{transform:translate(0)}.frequency-switch__toggle--yearly:after{transform:translate(1.5rem)}.price-fade-enter-active,.price-fade-leave-active{transition:opacity .5s}.price-fade-enter,.price-fade-leave-to{opacity:0}.add-ons{display:grid;gap:1rem;width:100%}.checkbox-container{display:flex;flex-flow:row nowrap;justify-content:flex-start;gap:1rem;align-items:center;border:var(--default-border);padding:1rem;border-radius:var(--default-border-radius);cursor:pointer;transition:var(--transition-default)}.checkbox-container:hover,.checkbox-container.active{border-color:var(--clr-purplish-blue);background:var(--clr-alabaster)}.checkbox-container input[type=checkbox]{width:1.125rem;height:1.125rem;border-radius:var(--default-border-radius)}.checkbox-container input[type=checkbox]:focus,.checkbox-container input[type=checkbox]:hover,.checkbox-container input[type=checkbox]:active{outline:2px solid var(--clr-purplish-blue);outline-offset:2px;border-radius:var(--default-border-radius)}.add-ons__checkbox-label{line-height:1em}.add-ons__price{font-size:.875rem;font-weight:500;color:var(--clr-purplish-blue);margin-left:auto;text-align:right}.form-summary{display:grid;gap:1rem}.form-summary .form-summary__plan-option h2{font-size:1.125rem}.form-summary .form-summary__plan-option .form-summary__plan-option__value{font-weight:700}.form-summary .form-summary__plan-option .change-plan{color:var(--clr-cool-gray);text-decoration:underline}.click-disabled{pointer-events:none!important;cursor:default!important}