:root{--ground:#031619;--ink:#eef6f5;--soft:#a9bfbd;--step:#0a2529;--acc:#01bda5;--on-acc:#002a2f}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.1875rem/1.6 'Cabinet Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:760px;margin:0 auto;padding:32px 16px 96px}
a{color:var(--acc)}
.top{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.375rem;text-transform:uppercase;letter-spacing:-.03em;color:var(--ink);text-decoration:none;margin-bottom:56px}
.top img{width:40px;height:40px;background:#fff;border-radius:10px;padding:3px}
h1{font-size:clamp(40px,7vw,64px);letter-spacing:-.04em;line-height:1.05;margin:0 0 12px}
h2{font-size:1.5rem;letter-spacing:-.02em;line-height:1.3;margin:40px 0 8px}
p,li{color:var(--soft)}
strong{color:var(--ink)}
.btn{display:inline-block;background:var(--acc);color:var(--on-acc);font-weight:800;padding:18px 26px;text-decoration:none;margin-top:24px}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
ul{padding-left:1.2em}
.cta{background:var(--step);padding:24px;margin:48px 0 0}
.cta p{color:var(--ink);margin:0}
.cta .btn{margin-top:16px}
.related{margin-top:56px}
.related a{display:block;padding:12px 0;border-bottom:1px solid var(--step);text-decoration:none;color:var(--ink)}
.related a:hover{color:var(--acc)}
.foot{margin-top:56px;font-size:1rem;color:var(--soft)}
.foot a{color:var(--soft);margin-right:16px}
/* calculator */
fieldset{border:0;padding:0;margin:28px 0 0}
legend,.field{font-weight:500;color:var(--ink);display:block;margin-bottom:8px}
.field{margin-top:24px}
.field input{display:block;width:100%;margin-top:8px;font:inherit;color:var(--ink);background:var(--step);border:2px solid transparent;padding:14px 16px}
.field input:focus{border-color:var(--acc);outline:0}
.field input[aria-invalid=true]{border-color:#ff8a6b}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0}
.chips span{display:inline-block;padding:12px 18px;background:var(--step);color:var(--ink)}
.chips input:checked+span{background:var(--acc);color:var(--on-acc);font-weight:800}
.chips input:focus-visible+span{outline:3px solid var(--acc);outline-offset:3px}
.answer{margin-top:32px;border-left:4px solid var(--acc);padding:4px 0 4px 20px}
.answer h2{margin:0 0 8px;color:var(--ink)}
.track{height:10px;background:var(--step);margin-top:16px;overflow:hidden}
.track i{display:block;height:100%;background:var(--acc);transform-origin:left}
.track.over i{background:#ff8a6b}