:root{--brown:#985900;--ink:#17202a;--blue:#167da8}
*{box-sizing:border-box}
body{margin:0;background:#f4f1eb;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
main{max-width:1120px;margin:auto;padding:0 18px 60px}
.hero{text-align:center;padding:28px 4px 24px}
.hero img{display:block;width:min(360px,80vw);height:auto;margin:0 auto 18px}
.hero>span,.intro>span,.recommend>span{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:800;color:var(--brown)}
h1{font-size:clamp(30px,7vw,52px);line-height:1.03;margin:16px auto 12px;max-width:800px}
.hero p{font-size:18px;line-height:1.5;color:#52606b;max-width:680px;margin:auto}
.panel{background:#fff;border-radius:24px;box-shadow:0 8px 30px #47351d14}
.form{max-width:720px;margin:auto;padding:clamp(20px,5vw,38px);display:grid;gap:22px}
label{display:grid;gap:9px}
input,select{width:100%;min-height:56px;border:1.5px solid #aab3ba;border-radius:12px;background:#fff;padding:0 14px;font-size:17px;color:var(--ink)}
input:focus,select:focus{outline:3px solid #d9edf6;border-color:var(--blue)}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:700;margin-bottom:10px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choices button{min-height:54px;border:1.5px solid #aab3ba;border-radius:12px;background:#fff;font-weight:700;font-size:16px}
.choices button.active{border-color:var(--brown);background:#fff2dc;color:#754500;box-shadow:inset 0 0 0 1px var(--brown)}
.two,.metrics{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.unit{display:flex}
.unit input{border-radius:12px 0 0 12px}
.unit i{display:grid;place-items:center;background:#edf0f2;padding:0 14px;border:1.5px solid #aab3ba;border-left:0;border-radius:0 12px 12px 0;font-style:normal;font-weight:bold}
.calculate,.cta{display:grid;place-items:center;min-height:60px;border:0;border-radius:14px;background:var(--brown);color:#fff;font-size:18px;font-weight:800;padding:12px 18px;box-shadow:0 5px 0 #6f4100;text-decoration:none}
.calculate:disabled{background:#999;box-shadow:none}
.status{text-align:center;min-height:20px;font-weight:700;color:#52606b}
.error{color:#b42318!important}
.results{margin-top:52px;scroll-margin-top:16px}
.intro{text-align:center}
.intro h2{font-size:clamp(25px,6vw,38px);margin:8px}
.intro p{color:#657079}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0}
.cards article{border-radius:18px;padding:17px;display:flex;flex-direction:column;min-height:205px;border:2px solid}
.cards strong{font-size:50px;line-height:1;margin:14px 0 5px}
.cards small{margin-top:8px}
.cards em{margin-top:auto;padding-top:12px;font-style:normal;font-weight:bold}
.none{background:#fff0ef;border-color:#d64b43!important}
.inside{background:#fff6e7;border-color:#dc8a1d!important}
.film{background:#eaf6fb;border-color:#167da8!important}
.film_inside{background:#eff0ff;border-color:#4d5fc1!important}
.chart,.recommend{padding:24px;margin-top:18px}
.chart h2{margin-bottom:4px}
.chart>p{margin-top:0;color:#68737b}
.chartScroll{overflow-x:auto}
.chart svg{display:block;width:100%;min-width:760px}
.gridline{stroke:#dde2e5;stroke-width:1}
.comfort{stroke:#737b84;stroke-dasharray:7 5}
.chart text{font-size:12px;fill:#63707b}
.chart .comfortText{font-weight:bold}
.date{text-anchor:middle}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-weight:bold;font-size:14px}
.legend span:before{content:"";display:inline-block;width:18px;height:5px;border-radius:4px;margin-right:6px;vertical-align:middle}
.none-dot:before{background:#d64b43}
.inside-dot:before{background:#dc8a1d}
.film-dot:before{background:#167da8}
.combo-dot:before{background:#4d5fc1}
.recommend{border:3px solid #d49a43}
.recommend h2{font-size:32px;margin:7px 0 18px}
.metrics p{background:#fffaf2;border-radius:14px;padding:16px;margin:0;display:grid;gap:4px}
.metrics strong{font-size:25px}
.recommend .cta{margin-top:18px}
.method{max-width:800px;margin:20px auto;background:#fff;border-radius:14px;padding:16px 20px;color:#56616a}
.method summary{font-weight:bold;cursor:pointer}
.method p{line-height:1.5}
@media(max-width:780px){.cards{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){main{padding:0 12px 40px}
.hero{padding-top:20px}
.form{border-radius:18px;padding:18px}
.two,.metrics,.cards{grid-template-columns:1fr}
.cards article{min-height:146px;padding:17px}
.cards strong{font-size:44px;margin:8px 0}
.cards em{padding-top:5px}
.chart{padding:18px 12px}
.chartScroll{margin:0 -12px;padding:0 12px}
.legend{font-size:13px}
.recommend{padding:21px}
.choices button{font-size:15px}
.hero p{font-size:16px}
}
.impact{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.impact article{background:#fff;border:2px solid #167da8;border-radius:20px;padding:21px;display:grid;gap:8px;box-shadow:0 8px 25px #163d5012}
.impact span{font-weight:700}
.impact strong{font-size:clamp(30px,5vw,45px);line-height:1;color:#096d98}
.impact small{font-size:14px;color:#52606b}
.comparisonTitle{text-align:center;margin:38px 0 12px}
.cards{margin:18px 0 24px}
.cards article{min-height:225px}
.cards strong{font-size:42px}
@media(max-width:900px){.impact{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.impact{grid-template-columns:1fr}}
@media(max-width:620px){.cards article{min-height:165px}.cards strong{font-size:38px}}
.bars{padding:26px 28px;margin:24px auto;display:grid;gap:18px;max-width:980px}
.barRow{display:grid;grid-template-columns:minmax(250px,1.55fr) minmax(240px,3fr) minmax(132px,auto);grid-template-areas:"label track value";gap:14px;align-items:center;padding:4px 0;background:transparent!important;border:0!important}
.barRow>b{grid-area:label;font-size:16px}
.solutionOptions{display:grid;gap:4px;line-height:1.25}
.solutionOptions>span{font-size:17px}
.solutionOptions>a{display:block;width:fit-content;color:inherit;font-size:13px;font-weight:700;text-decoration-color:#985900;text-decoration-thickness:1.5px;text-underline-offset:3px}
.solutionOptions>a:hover{color:var(--brown)}
.resultLink{color:inherit;text-decoration-color:#167da8;text-decoration-thickness:1.5px;text-underline-offset:3px}
.resultLink:hover{color:#075e83}
.resultLink:focus-visible,.solutionOptions>a:focus-visible{outline:3px solid #d9edf6;outline-offset:3px;border-radius:3px}
.barTrack{grid-area:track;height:28px;border-radius:8px;background:#edf0f2;overflow:hidden}
.barTrack span{display:block;height:100%;min-width:0;border-radius:8px;background:#d64b43}
.barRow.inside .barTrack span{background:#dc8a1d}
.barRow.film .barTrack span{background:#167da8}
.barRow.film_inside .barTrack span{background:#4d5fc1}
.barRow.solution .barTrack span{background:#19945f}
.barValue{grid-area:value;display:flex;flex-direction:column;justify-content:center;align-self:stretch;min-width:132px}
.barValue>strong{font-size:27px;line-height:1;white-space:nowrap}
.barValue>small{margin-top:4px;color:#52606b;white-space:nowrap}
.solution-dot:before{background:#19945f}
.resultCta{max-width:820px;margin:20px auto}
@media(max-width:620px){.bars{padding:18px 14px}.barRow{grid-template-columns:1fr auto;grid-template-areas:"label value" "track track";gap:7px 12px}.barRow>b{font-size:15px}.barRow.solution{grid-template-areas:"label label" "track value"}.solutionOptions>a{font-size:12px}.barTrack{height:24px}.barValue{min-width:0;align-self:center}.barValue>strong{font-size:24px}.barValue>small{font-size:13px;white-space:normal}.chart h2{font-size:21px}}