/* Section 02 has one Street Light-based composition on every product overview. */
#main .product-benefits{background:#fff;scroll-margin-top:90px}
#main .product-benefits .hb-section-heading{display:block;margin-bottom:38px}
#main .product-benefits .hb-section-heading h2{font-size:clamp(30px,3vw,44px);line-height:1.08;font-weight:300;letter-spacing:-.035em;margin:0 0 18px}
#main .product-benefits .hb-section-heading>p{max-width:1000px;font:400 15px/1.85 Anuphan,sans-serif}
#main .product-benefits .hb-engineering{display:grid;grid-template-columns:1fr 1.05fr;gap:7%;align-items:center;margin-top:42px}
#main .product-benefits .hb-engineering-art{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-start;gap:20px;min-height:490px;padding:32px;background:#f4f5f4;border-radius:18px;overflow:hidden}
#main .product-benefits .hb-engineering-art:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--lime),var(--green));opacity:0;transition:opacity .8s var(--ease)}
#main .product-benefits .hb-engineering-art .hb-kicker{color:#314126;font-size:10px}
#main .product-benefits .hb-feature-stage{position:relative;width:100%;height:350px;margin:auto 0}
#main .product-benefits .hb-feature-image{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:contain;opacity:0;transform:scale(calc(var(--feature-scale,1) * .92));transition:opacity .5s var(--ease),transform .95s var(--ease)}
#main .product-benefits .hb-feature-image.is-current{opacity:1}
#main .product-benefits .hb-engineering-art:hover:before,#main .product-benefits .hb-engineering:has(.hb-feature:hover) .hb-engineering-art:before,#main .product-benefits .hb-engineering:has(.hb-feature:focus-visible) .hb-engineering-art:before{opacity:1}
#main .product-benefits .hb-engineering-art:hover .hb-feature-image,#main .product-benefits .hb-engineering:has(.hb-feature:hover) .hb-feature-image,#main .product-benefits .hb-engineering:has(.hb-feature:focus-visible) .hb-feature-image{transform:scale(calc(var(--feature-scale,1) * 1.025))}
#main .product-benefits .hb-engineering-copy>.hb-feature{display:flex;gap:20px;border-top:1px solid #d8dfd8;padding:20px 0;cursor:default}
#main .product-benefits .hb-engineering-copy>.hb-feature:first-child{border-top:0;padding-top:0}
#main .product-benefits .hb-feature>span{font:400 11px/1.5 Outfit,Anuphan,sans-serif;color:#78857a;padding-top:5px}
#main .product-benefits .hb-feature h4{font:500 17px/1.6 Anuphan,sans-serif;margin:0 0 7px}
#main .product-benefits .hb-feature p{font:400 14px/1.85 Anuphan,sans-serif;color:#536068;margin:0}
#main .product-benefits .hb-feature:focus-visible{outline:2px solid var(--brand-accent);outline-offset:6px}
@media(max-width:1100px){#main .product-benefits .hb-engineering{gap:35px}#main .product-benefits .hb-engineering-art{min-height:420px;padding:24px}#main .product-benefits .hb-feature-stage{height:290px}}
@media(max-width:800px){#main .product-benefits .hb-engineering{grid-template-columns:1fr}#main .product-benefits .hb-engineering-art{min-height:360px}#main .product-benefits .hb-feature-stage{height:270px}#main .product-benefits .hb-section-heading h2{font-size:38px}}
@media(max-width:600px){#main .product-benefits .hb-engineering{margin-top:30px}}
@media(max-width:480px){#main .product-benefits .hb-engineering-art{min-height:310px;padding:20px}#main .product-benefits .hb-feature-stage{height:230px}#main .product-benefits .hb-engineering-copy>.hb-feature{gap:13px}}
@media(prefers-reduced-motion:reduce){#main .product-benefits .hb-engineering-art:before,#main .product-benefits .hb-feature-image{transition:none}}