/* how-cutaway-2026-10.css: "Clean air in. Stale air out." cutaway, shared by / and /how-it-works/.
   Ported from the mela "How it works" screen. Every selector is scoped to .hiw.
   Layout modes (CSS decides, JS only follows):
   >= 900px wide: one 1920x590 strip; < 900px: two rows of 1034 drawing units each
   (x 40-1074: outside, balcony, living room; x 1060-2094: bedrooms, stale air out);
   < 520px: small in-diagram labels hidden, numbered badges enlarged to match the cards, and the
   optional carbon panel hidden (without its label it would read as a fourth standard stage). */
.hiw{--hiw-navy:#163454;--hiw-ink:#2E3F50;--hiw-green:#94C23C;--hiw-gink:#4F7415;--hiw-card:#F5F8FA;--hiw-line:#E3ECF2;--hiw-f:var(--font,'Inter',system-ui,-apple-system,sans-serif);--hiw-fd:var(--font-display,'Outfit','Inter',system-ui,sans-serif)}
.hiw.t-sky{--hiw-card:#fff}
.hiw-head{text-align:center}
.hiw-h{margin:0;font:800 clamp(34px,5vw,72px)/1.04 var(--hiw-fd);letter-spacing:-.035em;color:var(--hiw-navy);text-wrap:balance}
.hiw-mk{display:inline-block;background:var(--hiw-green);color:var(--hiw-navy);border-radius:.1em;padding:0 .14em .04em;line-height:1.04}
.hiw-nw{display:inline-block;white-space:nowrap}
@media (max-width:699.98px){.hiw-h .hiw-nw{display:block}}  /* same two lines in any font: no shift when Outfit swaps in */
.hiw-kick{margin:18px auto 0;max-width:none;font:600 clamp(16px,1.4vw,20px)/1.4 var(--hiw-f);color:var(--hiw-gink);text-wrap:balance}
.hiw-in{max-width:1440px;margin:clamp(28px,4vw,48px) auto 0;padding:0 var(--gut,16px)}
.hiw-fig{margin:0;background:#fff;border:1px solid var(--hiw-line);border-radius:clamp(18px,2.2vw,28px);overflow:hidden;padding:clamp(6px,1.2vw,18px) 0}
.hiw-scene{position:relative;margin:0 auto}
.hiw-pane{position:relative;height:0;padding-bottom:30.7292%;overflow:hidden}
.hiw-pane>svg,.hiw-pane>canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.hiw-pb{display:none}
/* in-diagram type (SVG user units: a 1920-wide drawing) */
.hiw-zl{font:700 30px var(--hiw-f);fill:var(--hiw-ink)}
.hiw-t{font:700 26px var(--hiw-f);fill:var(--hiw-navy);paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}
.hiw-tb{font:700 27px var(--hiw-f);fill:var(--hiw-navy);paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}
.hiw-ts{font:600 26px var(--hiw-f);fill:var(--hiw-gink);paint-order:stroke;stroke:#fff;stroke-width:7px;stroke-linejoin:round}
.hiw-ring{opacity:0}
.hiw-ring rect{fill:rgba(148,194,60,.07);stroke:var(--hiw-green);stroke-width:5}
.hiw-bdg{transform-box:fill-box;transform-origin:center;transform:scale(var(--hiw-bk,1));transition:transform .3s}
.hiw-bdg circle{fill:var(--hiw-navy);stroke:#fff;stroke-width:5}
.hiw-bdg text{font:800 28px var(--hiw-fd);fill:#fff}
.hiw-anim .hiw-bdg.on{transform:scale(calc(var(--hiw-bk,1) * 1.18))}
.hiw-anim .hiw-bdg.on circle{fill:var(--hiw-green)}
.hiw-anim .hiw-bdg.on text{fill:var(--hiw-navy)}
/* the four steps: real HTML, never part of the scaled drawing */
.hiw-steps{list-style:none;margin:clamp(16px,2vw,24px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.hiw-step{position:relative;background:var(--hiw-card);border:2px solid var(--hiw-line);border-radius:18px;padding:14px 16px 16px;overflow:hidden;transition:background-color .3s,border-color .3s}
.hiw-anim .hiw-step.is-on{background:#E8F5D4;border-color:var(--hiw-green)}
.hiw-sh{display:flex;align-items:center;gap:12px}
.hiw-n{flex:none;width:36px;height:36px;border-radius:50%;background:var(--hiw-navy);color:#fff;font:800 19px/36px var(--hiw-fd);text-align:center;transition:background-color .3s,color .3s}
.hiw-anim .hiw-step.is-on .hiw-n{background:var(--hiw-green);color:var(--hiw-navy)}
.hiw-st{margin:0;font:800 clamp(19px,1.6vw,23px)/1.15 var(--hiw-fd);letter-spacing:-.02em;color:var(--hiw-navy)}
.hiw-sd{margin:6px 0 0 48px;font:500 16px/1.45 var(--hiw-f);color:var(--hiw-ink)}
.hiw-bar{display:none;position:absolute;left:0;bottom:0;width:100%;height:5px;background:var(--hiw-green);transform-origin:0 50%;transform:scaleX(0)}
.hiw-anim .hiw-bar{display:block}
@media (min-width:600px){
  .hiw-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .hiw-step{padding:18px 20px 20px;border-radius:20px}
  .hiw-sd{margin:10px 0 0;font-size:16.5px}
}
@media (min-width:1200px){
  .hiw-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
}
/* 900-1199: same strip, a touch larger in-diagram type */
@media (min-width:900px) and (max-width:1199.98px){
  .hiw-t,.hiw-ts{font-size:30px}.hiw-tb{font-size:31px}.hiw-zl{font-size:33px}
}
/* < 900: two rows (the JS uses the same crops: A_X 40, B_X 1060, width 1034) */
@media (max-width:899.98px){
  .hiw-scene{max-width:640px}
  .hiw-pane{padding-bottom:57.0600%}
  .hiw-pa>svg{width:185.6867%;left:-3.8685%}
  .hiw-pb{display:block;margin-top:clamp(4px,1.4vw,10px)}
  .hiw-b0{transform:translate(46px,0)}
  .hiw-zl0{transform:translate(13px,0)}
}
/* phones: keep the drawing, drop the small labels (the cards carry them), enlarge the 1-4 badges */
@media (max-width:519.98px){
  .hiw{--hiw-bk:1.55}
  .hiw-lbl,.hiw-cb{display:none}
  .hiw-zl{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  .hiw-bdg,.hiw-step,.hiw-n{transition:none}
}