@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap";:root{--color-accent: hsl(61, 70%, 52%);--color-error: hsl(4, 69%, 50%);--color-neutral-0: hsl(0, 0%, 100%);--color-neutral-100: hsl(202, 86%, 94%);--color-neutral-300: hsl(203, 41%, 72%);--color-neutral-500: hsl(200, 26%, 54%);--color-neutral-700: hsl(200, 24%, 40%);--color-neutral-900: hsl(202, 55%, 16%);--font-jakarta: "Plus Jakarta Sans", sans-serif;--medium: 500;--spacing: .4rem}*,:after,:before{box-sizing:border-box;margin:0;padding:0;border:0 solid}html{font-size:62.5%}h1,h2,h3{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}img{display:block;max-width:100%;height:auto}button,input{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}::placeholder{opacity:1}:-moz-ui-invalid{box-shadow:none}button{appearance:button}@media screen and (min-width: 64rem){html{height:100%}}body{font-family:var(--font-jakarta);font-weight:var(--medium);background-color:var(--color-neutral-100);color:var(--color-neutral-300);line-height:1.5;font-size:1.6rem}@media screen and (min-width: 48rem){body{padding:calc(var(--spacing) * 10)}}@media screen and (min-width: 64rem){body{display:flex;flex-direction:column;justify-content:center;min-height:100%;gap:calc(var(--spacing) * 4)}}h2{font-weight:700;line-height:1.25;font-size:2.4rem}@media screen and (min-width: 64rem){main{display:flex;justify-content:center}}article{background-color:var(--color-neutral-0);overflow:hidden}@media screen and (min-width: 48rem){article{border-radius:calc(var(--spacing) * 6)}}@media screen and (min-width: 64rem){article{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:100.8rem}}section{background-color:var(--color-neutral-900)}input[type=text],input[type=radio]{appearance:none;cursor:pointer}input[type=text]:focus,input[type=radio]:focus{outline:none}button{cursor:pointer}footer{text-align:center;color:var(--color-neutral-700)}footer a{color:var(--color-accent);text-decoration:underline}footer a:hover{color:var(--color-neutral-900)}form{display:flex;flex-direction:column;gap:calc(var(--spacing) * 6);padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 8)}@media screen and (min-width: 48rem){form{padding:calc(var(--spacing) * 10);gap:calc(var(--spacing) * 10)}}form header{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2);align-items:start}@media screen and (min-width: 48rem){form header{flex-direction:row;justify-content:space-between;align-items:center}}form header button{color:var(--color-neutral-700);text-decoration:underline;font-weight:var(--medium)}form header button:hover{color:var(--color-neutral-900)}form h2{color:var(--color-neutral-900)}.form-fields-container{display:flex;flex-direction:column;gap:calc(var(--spacing) * 6)}.middle-field-container{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}@media screen and (min-width: 48rem){.middle-field-container{flex-direction:row;gap:calc(var(--spacing) * 6)}}.text-input_label{color:var(--color-neutral-700);cursor:pointer;display:flex;flex-direction:column;gap:calc(var(--spacing) * 3)}.text-input_label:hover .text-input_container{border-color:var(--color-neutral-900)}.text-input_label:active .text-input_container{border-color:var(--color-accent)}.text-input_label:focus-within .text-input_container{border-color:var(--color-accent)}.text-input_label:focus-within .text-input_span{background-color:var(--color-accent);color:var(--color-neutral-900)}.text-input_container{border:.1rem solid var(--color-neutral-500);border-radius:var(--spacing);overflow:hidden;display:flex}.text-input_container:hover{border-color:var(--color-neutral-900)}.text-input_span{font-size:1.8rem;line-height:1.25;font-weight:700;background-color:var(--color-neutral-100);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3)}.text-input_number{font-size:1.8rem;line-height:1.25;font-weight:700;color:var(--color-neutral-900);flex:1 1 0;min-width:0;padding-inline:calc(var(--spacing) * 4)}.middle-field-container .text-input_label{flex:1 1 0;min-width:0}.middle-field-container .text-input_span{order:1}.radio-container{display:grid;gap:calc(var(--spacing) * 3)}.radio-container p{color:var(--color-neutral-700)}input[type=radio]{border:.1rem solid var(--color-neutral-700);border-radius:100%;width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5);overflow:hidden;display:grid;place-content:center}input[type=radio]:checked{border-color:var(--color-accent)}input[type=radio]:checked:after{content:"";width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);background-color:var(--color-accent);border-radius:100%}.radio-label{border:.1rem solid var(--color-neutral-500);border-radius:var(--spacing);overflow:hidden;display:grid;grid-template-columns:1em 1fr;gap:calc(var(--spacing) * 4);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);align-items:center;font-size:1.8rem;font-weight:700;color:var(--color-neutral-900);line-height:1.25}.radio-label:hover,.radio-label:active{border-color:var(--color-accent)}.radio-label:focus-within,.radio-label:has(:checked){border-color:var(--color-accent);background-color:#d7da2f26}.submit-btn{display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing) * 3);background-color:var(--color-accent);border-radius:999rem;color:var(--color-neutral-900);font-size:1.8rem;line-height:1.25;font-weight:700;padding-inline:calc(var(--spacing) * 10);height:5.6rem}.submit-btn:hover{background-color:#d7da2f80}.submit-btn:focus{outline:.2rem solid var(--color-neutral-900)}@media screen and (min-width: 48rem){.submit-btn{align-self:start}}.results-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding-inline:calc(var(--spacing) * 6);padding-block:calc(var(--spacing) * 8)}@media screen and (min-width: 48rem){.results-container{padding:calc(var(--spacing) * 10)}}@media screen and (min-width: 64rem){.results-container{border-bottom-left-radius:calc(var(--spacing) * 20)}}.results-container h2{font-size:2.4rem;line-height:1.25;font-weight:700;color:var(--color-neutral-0)}.results-empty{display:flex;flex-direction:column;gap:calc(var(--spacing) * 4);align-items:center;text-align:center}.results-full{display:flex;flex-direction:column;gap:calc(var(--spacing) * 4)}.results-full div{background-color:#00000040;border-radius:calc(var(--spacing) * 2);border-top:.4rem solid var(--color-accent);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 6);margin-top:calc(var(--spacing) * 2);display:flex;flex-direction:column;gap:calc(var(--spacing) * 4)}.results-full div p{display:flex;flex-direction:column;gap:calc(var(--spacing) * 2)}.results-full hr{height:.1rem;background-color:#9abed540}[data-monthly-repayments]{color:var(--color-accent);font-size:4rem;line-height:auto;font-weight:700}@media screen and (min-width: 48rem){[data-monthly-repayments]{font-size:5.6rem;line-height:1.25}}[data-full-repayments]{color:var(--color-neutral-0);font-weight:700;font-size:2.4rem;line-height:1.25}.hidden{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;border:none}.error-message{color:var(--color-error)!important;font-size:1.4rem;line-height:1.5;font-weight:var(--medium)}.text-input_label.error .text-input_container{border-color:var(--color-error)}.text-input_label.error .text-input_span{background-color:var(--color-error);color:var(--color-neutral-0)}.active{border-color:var(--color-accent);background-color:#d7da2f26}