.why-hero{padding-top:145px;padding-bottom:52px}
.why-hero h1{max-width:1050px}
.why-hero h1 em{max-width:100%}
.why-hero .lead{max-width:790px}
.why-stripe .wrap{justify-content:flex-start;gap:65px}
.why-benefits-intro{max-width:780px;font-size:17px;line-height:1.75;color:#626b72;margin:22px 0 0}
.why-integration{overflow:hidden;scroll-margin-top:88px}
.why-diagram-intro{text-align:center;max-width:760px;margin:0 auto 35px}
.why-diagram-intro h2{max-width:700px;margin-left:auto;margin-right:auto}
.why-diagram-intro>p:not(.eyebrow){max-width:680px;margin-left:auto;margin-right:auto}
.knx-ecosystem{max-width:900px;margin:0 auto}
.knx-stage{background:radial-gradient(ellipse at center,rgba(35,96,125,.12),transparent 68%);min-width:0}
.knx-art{display:block;width:100%;height:auto;overflow:visible}
.knx-art-mobile{display:none}
.knx-signal{animation:knx-signal-travel 5.4s linear infinite;animation-play-state:paused;filter:drop-shadow(0 0 3px rgba(93,205,252,.55))}
.knx-wave{transform-box:fill-box;transform-origin:center;animation:knx-standard-wave 5.4s ease-out infinite;animation-play-state:paused}
.is-running .knx-signal,.is-running .knx-wave{animation-play-state:running}
.knx-function-box{transition:stroke .25s,fill .25s}
.knx-function:hover .knx-function-box{stroke:#70c6ed;fill:#172c39}
.knx-figure-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0 0;color:#91a9b6;font-size:11px;line-height:1.6}
.knx-motion-toggle{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid #385260;border-radius:4px;background:transparent;color:#c1d6e1;font:inherit;cursor:pointer;min-height:34px}
.knx-motion-toggle[hidden]{display:none}
.knx-motion-toggle:hover{border-color:#78ccef;color:#fff}
.knx-motion-toggle:focus-visible{outline:2px solid #78ccef;outline-offset:4px}
.knx-motion-toggle svg{width:12px;height:12px}
.knx-motion-toggle .knx-play-icon{display:none}
.knx-motion-toggle.is-paused .knx-pause-icon{display:none}
.knx-motion-toggle.is-paused .knx-play-icon{display:block}
.why-integration-notes{display:grid;grid-template-columns:1.3fr 1fr;gap:45px;max-width:900px;margin:35px auto 0;padding-top:24px;border-top:1px solid #2a404c}
.why-integration-notes p{color:#b8c5cc;font-size:14px;line-height:1.75;margin:0}
@keyframes knx-signal-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes knx-standard-wave{0%{transform:scale(.82);opacity:0}18%{opacity:.35}100%{transform:scale(1.5);opacity:0}}
@media(max-width:760px){.knx-art-desktop{display:none}.knx-art-mobile{display:block}.knx-stage{max-width:420px;margin:auto}.knx-figure-footer{flex-direction:column;text-align:center;gap:13px}.why-integration-notes{grid-template-columns:1fr;gap:16px;margin-top:25px}.why-diagram-intro{margin-bottom:25px}.why-diagram-intro h2{font-size:clamp(30px,6vw,44px)}}
@media(prefers-reduced-motion:reduce){.knx-signal,.knx-wave{animation:none!important}.knx-signal{stroke-dasharray:none;opacity:.35;filter:none}.knx-wave{opacity:.15}.knx-function-box{transition:none}.knx-motion-toggle{display:none}}
.why-cost{background:#f5f7f8}
.why-cost-intro{max-width:760px;font-size:16px;line-height:1.75;color:#626b72;margin:22px 0 0}
.why-cost-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.why-cost-item{border-top:1px solid #b6c5cd;padding-top:23px}
.why-cost-item h3{font-size:21px;font-weight:450;line-height:1.25;margin:0 0 13px;hyphens:auto;overflow-wrap:break-word}
.why-cost-item p{font-size:14px;line-height:1.7;color:#626b72;margin:0}
.why-cost-note{font-size:12px;color:#626b72;margin:30px 0 0}
@media(max-width:900px){.why-hero{padding-top:120px}.why-stripe .wrap{gap:10px}.why-cost-grid{gap:24px}.why-hero h1{font-size:clamp(40px,7vw,62px)}}
@media(max-width:560px){.why-hero h1{font-size:clamp(36px,9.8vw,50px)}.why-hero h1 em{font-size:inherit}.why-cost-grid{grid-template-columns:1fr}.why-cost-intro{font-size:15px}.why-stripe .wrap{flex-direction:row;flex-wrap:wrap;gap:12px 25px}}