.comfort-automation{background:#e9eee9;padding-block:clamp(40px,4vw,64px);scroll-margin-top:24px} .comfort-automation .heat-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:clamp(30px,4vw,72px);align-items:center;max-width:1600px;margin:auto}
.comfort-automation .heat-eyebrow{color:#236a4d;margin-bottom:20px}
.comfort-automation h2{font-size:clamp(34px,3.5vw,56px);max-width:580px;margin-bottom:22px} .comfort-automation .heat-lead{font-size:18px;color:#4a5d52;margin:0;max-width:540px} .comfort-automation .heat-intervals{margin-top:28px;border-top:1px solid #b9c9bd} .comfort-automation .heat-intervals p{font-size:15px;display:grid;grid-template-columns:30px 1fr;column-gap:10px;margin:16px 0} .comfort-automation .heat-intervals p>span{grid-row:1/3;color:#23744f;font-size:25px;line-height:1.4} .comfort-automation .heat-intervals strong{grid-column:2;font-weight:600} .comfort-automation .heat-figure{margin:0;min-width:0} .comfort-automation .heat-panel{background:radial-gradient(ellipse at 70% 50%,#173e30,#09291f 75%);color:#f1f5ee;border:1px solid #325344;border-radius:18px;padding:26px;box-shadow:0 20px 50px #173a2415} .comfort-automation .heat-panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;border-bottom:1px solid #426050;padding-bottom:18px;color:#c1d2c6} .comfort-automation .heat-set{white-space:nowrap} .comfort-automation .heat-set strong{color:#fff;font-size:20px;margin-left:8px} .comfort-automation .heat-instruments{display:grid;grid-template-columns:minmax(130px,.75fr) minmax(0,1.4fr);gap:24px;padding:22px 0 16px} .comfort-automation .heat-label{font-size:13px;color:#bccfc1;display:block} .comfort-automation .heat-reading{display:flex;align-items:baseline;gap:8px;margin:4px 0 18px;font-variant-numeric:tabular-nums;white-space:nowrap} .comfort-automation .heat-reading strong{font-size:clamp(44px,4.1vw,64px);letter-spacing:-.05em;font-weight:500;line-height:1.1} .comfort-automation .heat-reading>span{font-size:22px;color:#c1d2c6} .comfort-automation .heat-scale{height:132px;position:relative;width:145px;margin-top:12px} .comfort-automation .heat-tube{position:absolute;left:3px;top:0;bottom:0;width:14px;border-radius:10px;background:#29483a;outline:1px solid #6a8472;outline-offset:3px;overflow:hidden} .comfort-automation .heat-tube>div{position:absolute;bottom:0;width:100%;background:linear-gradient(#efc582,#a77a3d);border-radius:8px} .comfort-automation .heat-band{position:absolute;top:25%;height:37.5%;width:100%;background:#9ebd9a14;border-top:1px dashed #d6dbb5;border-bottom:1px dashed #789784} .comfort-automation .heat-tick{position:absolute;left:29px;font-size:12px;transform:translateY(-50%);color:#b7cbbc;white-space:nowrap} .comfort-automation .heat-tick--top{top:0} .comfort-automation .heat-tick--set{top:25%;color:#f2e5bd} .comfort-automation .heat-tick--low{top:62.5%} .comfort-automation .heat-tick--bottom{top:100%} .comfort-automation .heat-power-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;margin-bottom:18px} .comfort-automation .heat-power-heading strong{font-size:13px;font-weight:500;color:#edca92} .comfort-automation .heat-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .comfort-automation .heat-stage{display:flex;flex-direction:column;align-items:center;border:1px solid #52715e;border-radius:9px;background:#b1c6ac08;padding:16px 4px;color:#b4c6b8;transition:background .4s,border-color .4s,box-shadow .4s} .comfort-automation .heat-stage svg{width:52px;height:84px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;margin-bottom:14px} .comfort-automation .heat-stage strong{font-size:13px;font-weight:600;white-space:nowrap} .comfort-automation .heat-stage>span{font-size:11px;white-space:nowrap;margin-top:8px} .comfort-automation .heat-stage[data-on=true]{color:#f2ca8a;background:#d7a45419;border-color:#b98e50;box-shadow:inset 0 0 24px #ebb55812,0 0 18px #ebb5580a} .comfort-automation .heat-stage[data-next-off=true]{outline:2px solid #f5d6a4;outline-offset:3px}
.comfort-automation .heat-band-note{font-size:12px;line-height:1.6;color:#bdccbe;margin:15px 0 0} .comfort-automation .heat-timing{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 16px;border-top:1px solid #426050;padding-top:14px;min-height:59px;font-size:14px;color:#d9e4d8} .comfort-automation .heat-timing strong{font-size:26px;line-height:1.2;font-weight:500;font-variant-numeric:tabular-nums;min-width:65px;text-align:right;color:#f2ca8a} .comfort-automation .heat-progress{grid-column:1/-1;height:2px;background:#426050} .comfort-automation .heat-progress>div{height:100%;background:#e5b873}
.comfort-automation .heat-status{font-size:16px;line-height:1.5;min-height:3em;margin:16px 0 12px;max-width:490px} .comfort-automation .heat-footer{border-top:1px solid #426050;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:14px} .comfort-automation .heat-footer>span{font-size:11px;color:#b5c9b9;max-width:260px} .comfort-automation .heat-footer button{font:inherit;font-size:13px;color:#f4f3e9;background:#ffffff08;border:1px solid #64806b;border-radius:6px;min-height:44px;min-width:105px;padding:8px 12px;cursor:pointer} .comfort-automation .heat-footer button:hover{background:#ffffff15} .comfort-automation .heat-footer button:focus-visible{outline:2px solid #f2ca8a;outline-offset:4px} .comfort-automation .heat-figure figcaption{font-size:12px;line-height:1.6;color:#526459;margin:12px 4px 0} .comfort-automation .heat-static{display:none}
@container kelet (max-width:1000px){ .comfort-automation .heat-layout{grid-template-columns:1fr;max-width:700px} .comfort-automation .heat-copy{max-width:620px} .comfort-automation .heat-intervals{display:flex;gap:24px}.comfort-automation h2{max-width:620px} .comfort-automation .heat-reading strong{font-size:60px}}
@container kelet (max-width:520px){.comfort-automation{padding:40px 5%} .comfort-automation .heat-panel{padding:20px 16px;border-radius:14px} .comfort-automation .heat-panel-top{font-size:12px;gap:10px} .comfort-automation .heat-set strong{font-size:18px;margin-left:4px} .comfort-automation .heat-instruments{grid-template-columns:1fr;gap:26px} .comfort-automation .heat-temperature{display:grid;grid-template-columns:1fr 135px;column-gap:14px;align-items:center} .comfort-automation .heat-temperature>.heat-label{grid-column:1;font-size:13px} .comfort-automation .heat-reading{grid-column:1;margin:0} .comfort-automation .heat-reading strong{font-size:52px} .comfort-automation .heat-scale{grid-column:2;grid-row:1/3;width:130px;height:116px;margin:5px 0} .comfort-automation .heat-stage{padding:12px 4px} .comfort-automation .heat-stage svg{height:65px;margin-bottom:10px} .comfort-automation .heat-stage>span{font-size:12px} .comfort-automation .heat-intervals{display:block;margin-top:22px} .comfort-automation .heat-lead{font-size:17px} .comfort-automation .heat-timing{font-size:13px} .comfort-automation .heat-footer>span{max-width:170px} .comfort-automation .heat-status{min-height:4.5em!important}}
@media(prefers-reduced-motion:reduce){ .comfort-automation .heat-stage{transition:none} .comfort-automation .heat-static{display:block;padding-left:20px;color:#d3e1d4;font-size:14px;line-height:1.65} .comfort-automation .heat-static li+li{margin-top:8px} .comfort-automation .heat-timing{display:none}}
/* Keep the scale rules clear of their labels. */
 .comfort-automation .heat-tick--set,.comfort-automation .heat-tick--low{background:#123326;padding-inline:3px;left:26px} .comfort-automation .heat-stage>span{font-size:12px}
@container kelet (min-width:1001px) and (max-height:850px){.comfort-automation{padding-block:32px} .comfort-automation .heat-panel{padding-block:22px} .comfort-automation .heat-instruments{padding-block:18px 12px} .comfort-automation .heat-status{margin-block:12px 8px!important}} .comfort-automation .heat-instruments>div{min-width:0}
@container kelet (max-width:360px){ .comfort-automation .heat-temperature{grid-template-columns:minmax(0,1fr) 108px;column-gap:10px} .comfort-automation .heat-scale{width:108px} .comfort-automation .heat-reading{gap:5px} .comfort-automation .heat-reading strong{font-size:44px} .comfort-automation .heat-reading>span{font-size:18px} .comfort-automation .heat-tick{font-size:11px} .comfort-automation .heat-stage strong{font-size:12px} .comfort-automation .heat-stage>span{font-size:11px} .comfort-automation .heat-power-heading{gap:8px} .comfort-automation .heat-panel-top{font-size:11px}}

.comfort-automation{padding-inline:5%;color:#202c27;margin:0 auto}
.comfort-automation h2{line-height:1.12;letter-spacing:-.035em;font-weight:600}
.comfort-automation p{line-height:1.65}
.comfort-automation .heat-eyebrow{font-size:12px;letter-spacing:.13em;font-weight:700}
.comfort-automation h2{margin:0 0 22px}
.comfort-automation .heat-eyebrow{margin:0 0 20px}
.comfort-automation__silent { margin-top:24px;max-width:540px; }
.comfort-automation__silent h3 { margin:0 0 8px;font-size:20px;line-height:1.4;font-weight:600;color:#236a4d; }
.comfort-automation__silent p { margin:0;font-size:15px;color:#4a5d52; }