:root{--navy:#171c24;--ink:#222833;--blue:#605fa6;--muted:#727885;--line:#e5e6ea}header{background:linear-gradient(115deg,#252b34eb,#1b2029d9)!important;border-color:#ffffff26!important;box-shadow:0 12px 30px #0002!important}.hero{background:#11151d}.primary,.button{background:#605fa6!important;box-shadow:none!important}.hero .copy h1 span{color:#babad8!important}.copy .eyebrow{color:#acacbf!important}.hero .scene{mask-image:linear-gradient(180deg,transparent 0%,black 25%)}.hero .shade{background:linear-gradient(90deg,#11151d9c 0%,#11151d20 45%,transparent 65%)}.smoke{display:none}.smoke-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}.caption{display:none}.bottom{z-index:4}.benefit>span{background:#ededf5!important;color:#605fa6!important}.section-heading h2>span,.eyebrow span,.rule{background:#605fa6!important}.product-copy>a,.references .section-heading>a,.reference-card svg{color:#605fa6!important}.finder,footer{background:#191f28!important}.product-image{background:#f4f5f6!important}.about{background:#f5f5f7!important}.about-photo{background-image:linear-gradient(90deg,#f5f5f7,transparent 25%),url('assets/hero-main.png')!important}.catalog .section-heading>a,.eyebrow{color:#505363!important}.utility .docs-button{background:#605fa621!important;border-color:#605fa64d!important}.footer-grid h3,.finder h2{color:#fff}.nav>a:after{background:#9696c4!important}.product-card:hover{box-shadow:0 12px 28px #1d212a12!important}.about h2,.references h2,.catalog h2{color:#222833!important}@media(prefers-reduced-motion:reduce){.smoke-canvas{opacity:.5}}
/* Keep the wide hero image edge-to-edge without a left letterbox. */
@media(min-width:681px){
  .hero{min-height:max(720px,50vw);max-height:none}
  .hero .scene{width:100%;height:auto;max-width:none;object-fit:initial;object-position:initial;bottom:0}
}
/* Desktop product composition stays below the floating header. */
@media(min-width:681px){
 .hero .scene{left:auto;right:0;bottom:0;width:100%;height:calc(100% - 190px);object-fit:contain;object-position:right bottom;mask-image:linear-gradient(90deg,transparent 0%,black 18%);}
}
@media(min-width:681px){.hero .scene{mask-image:linear-gradient(90deg,transparent,black 30%),linear-gradient(180deg,transparent,black 12%);mask-composite:intersect}}
/* Mobile hero: keep the product group below the copy rather than cropping it behind the text. */
@media(max-width:680px){
 .hero{height:850px;min-height:850px;max-height:none}
 .hero .copy{top:195px;left:7%;max-width:86%}
 .hero .scene{left:auto;right:0;top:auto;bottom:65px;width:180%;max-width:none;height:360px;object-fit:contain;object-position:right bottom;mask-image:linear-gradient(180deg,transparent 0%,black 12%);z-index:-3}
 .hero .shade{background:linear-gradient(180deg,#11151d 0%,#11151d 44%,transparent 55%,transparent 90%,#11151d 100%)}
 .hero .bottom{bottom:20px}
}
@media(max-width:680px){body .hero{height:850px;min-height:850px;max-height:none}.hero .scene{mask-image:linear-gradient(180deg,transparent 0%,transparent 12%,black 38%)} }
/* Blend the mobile product floor into the hero and align the category captions. */
@media(max-width:680px){
 .hero .scene{bottom:48px;mask-image:linear-gradient(180deg,transparent 0%,transparent 12%,#000 38%,#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 12%,#000 38%,#000 76%,transparent 100%)}
 .hero .bottom{left:7%;right:7%;bottom:18px;display:block}
 .hero .bottom>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;align-items:start}
 .hero .bottom>div>span{font-size:10px;line-height:1.5;font-weight:600;text-align:center;color:#e2e5eb;border:0;padding:0;overflow-wrap:normal}
}