.version-two #main .p30-how{background:#061424;color:#f6f9ff;position:relative;padding:36px 0 88px}.version-two #main .how-stage{width:calc(100% - 112px);max-width:1320px;margin:0 auto;position:relative}.version-two #main .how-copy-card{width:100%;margin:0 auto;text-align:center}.version-two #main .p30-page .how-copy-card h2,.version-two #main .p30-page .how-copy-card h3{font:700 clamp(32px,3.1vw,48px)/1.07 Gilroy,sans-serif;letter-spacing:-.03em;text-wrap:balance;color:#f6f9ff;margin:0}.version-two #main .how-copy-card h3 span{color:#a9ccff}.version-two #main .p30-page .how-copy-card p{font-size:16px;line-height:1.65;color:#bfd0e3;max-width:46ch;margin:18px 0 0;text-wrap:pretty}.version-two #main .p30-page .how-copy-card p.how-original-note{font-size:12px;line-height:1.55;margin-top:12px;color:#a9ccff}.version-two #main .how-diagram{position:relative;width:100%;height:500px;margin:0 auto;isolation:isolate;pointer-events:none}.version-two #main .how-connections{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible}.version-two #main .how-line-base,.version-two #main .how-line-fill{fill:none;stroke-linecap:round;stroke-width:2;stroke-dasharray:1 9}.version-two #main .how-line-base{stroke:#29425a}.version-two #main .how-line-fill{stroke:#a9ccff;stroke-width:2}.version-two #main .how-signal{fill:#eaf5ff;opacity:0}.version-two #main .how-wire--control .how-line-base,.version-two #main .how-wire--control .how-line-fill{stroke-dasharray:none;stroke-width:1.4}.version-two #main .how-wire--control .how-line-fill{stroke:#80a5cb;opacity:.65}.version-two #main .p30-page .how-part{position:absolute;top:0;left:0;margin:0;z-index:1;width:1px;transform-origin:0 0}.version-two #main .how-sprite{position:relative;overflow:hidden;width:100%}.version-two #main .p30-page .how-sprite img{position:absolute;max-width:none;height:auto;display:block}.version-two #main .how-box-body{position:relative;aspect-ratio:840/628;isolation:isolate}.version-two #main .how-box-core{position:absolute;inset:0 0 auto}.version-two #main .how-socket{position:absolute}.version-two #main .how-lid{position:absolute;left:0;top:13.1%;width:100%;transform-origin:center;z-index:4}.version-two #main .how-screw{position:absolute;width:2.6%;z-index:2;opacity:0;transform-origin:50% 50%;filter:drop-shadow(0 2px 2px #00000066)}.version-two #main .how-screw.has-error{visibility:hidden}.version-two #main .how-board-facts{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;opacity:0}.version-two #main .how-board-fact{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 10px;max-width:calc(100% - 24px);border:1px solid #567086;border-radius:10px;background:#0c2235;color:#f6f9ff;font-size:12px;font-weight:600;line-height:1.3;text-align:left}.version-two #main .how-board-fact--nl{left:0;top:33%;transform:translate(-50%)}.version-two #main .how-board-fact--exclusive{right:0;top:66%;transform:translate(50%)}.version-two #main .how-board-fact:after{content:"";position:absolute;width:1px;height:9px;background:#a9ccff}.version-two #main .how-board-fact--nl:after{right:18px;top:100%}.version-two #main .how-board-fact--exclusive:after{left:18px;bottom:100%}.version-two #main .how-board-fact>svg{flex:none;width:17px;height:17px;fill:none;stroke:#a9ccff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.version-two #main .how-board-fact>svg.how-board-flag{height:12px;stroke:none}.version-two #main .p30-page .how-part figcaption{font-size:12px;line-height:1.35;text-align:center;color:#bfd0e3;margin:7px -14px 0;padding:0;background:none;white-space:normal}.version-two #main .p30-page .how-part--box figcaption{display:none}.version-two #main .how-monitor{position:relative}.version-two #main .how-display{position:absolute;left:11.8%;top:12.3%;width:77%;aspect-ratio:1280/480;background:#080d15;overflow:hidden}.version-two #main .how-display>img,.version-two #main .how-carplay,.version-two #main .how-carplay>svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;display:block}.version-two #main .how-carplay{opacity:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.version-two #main .how-diagram.is-connected .how-carplay{opacity:1}.version-two #main .how-diagram.is-connected .how-nbt,.version-two #main .how-part.has-error .how-sprite,.version-two #main .how-part.has-error .how-display,.version-two #main .how-part.has-error .how-board-facts{visibility:hidden}.version-two #main .p30-page .how-part.has-error figcaption{display:block;color:#f6f9ff}.version-two #main .p30-how.is-scroll{padding-top:0}.version-two #main .is-scroll .how-story{height:calc(var(--how-height) + var(--how-travel) + 48px)}.version-two #main .is-scroll .how-sticky{position:sticky;top:var(--how-top)}.version-two #main .is-scroll .how-stage{height:var(--how-height)}.version-two #main .is-scroll .how-copy{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none}.version-two #main .is-scroll .how-copy-card{position:absolute;opacity:0;pointer-events:none}.version-two #main .is-scroll .how-copy-card.is-active{pointer-events:auto}.version-two #main .is-scroll .how-stage>.how-diagram{position:absolute;top:0;right:0;bottom:0;left:0;height:100%}.version-two #main .is-scroll [data-how-copy="0"],.version-two #main .is-scroll [data-how-copy="1"],.version-two #main .is-measuring [data-how-copy="0"],.version-two #main .is-measuring [data-how-copy="1"]{left:0;top:50%;transform:translateY(-50%);width:35%;text-align:left}.version-two #main .is-scroll [data-how-copy="2"],.version-two #main .is-measuring [data-how-copy="2"]{left:10%;top:0;width:80%;text-align:center}.version-two #main .p30-how.is-scroll [data-how-copy="2"]{top:var(--how-connection-copy-top,0px)}.version-two #main .p30-page [data-how-copy="2"] p{max-width:76ch;margin-left:auto;margin-right:auto}.version-two #main .is-scroll [data-how-copy="3"],.version-two #main .is-measuring [data-how-copy="3"]{left:0;bottom:24px;width:28%;text-align:left}.version-two #main .p30-page [data-how-copy="3"] h3{font-size:clamp(26px,2.25vw,34px)}.version-two #main .p30-page [data-how-copy="3"] p{font-size:14px;line-height:1.55}.version-two #main .p30-page [data-how-copy="3"] p.how-original-note{font-size:11px}.version-two #main .is-scroll [data-how-copy="4"],.version-two #main .is-measuring [data-how-copy="4"]{left:0;top:50%;transform:translateY(-50%);width:47%;text-align:left}.version-two #main .p30-page [data-how-copy="4"] h3{font-size:clamp(30px,2.8vw,43px)}.version-two #main .is-static .how-copy{display:flex;flex-direction:column;gap:72px}.version-two #main .is-static .how-copy-card{position:relative;max-width:760px}.version-two #main .is-static .how-copy-card p{margin-left:auto;margin-right:auto}.version-two #main .is-static .how-stage>.how-diagram{display:none}.version-two #main .is-static .how-diagram--still{margin:20px auto 0;max-width:100%}.version-two #main .is-static .how-board-fact--nl{left:6%;top:16%;transform:translateY(-50%)}.version-two #main .is-static .how-board-fact--exclusive{right:6%;top:auto;bottom:10%;transform:translateY(50%)}.version-two #main .is-static .how-finale-copy>.how-diagram--still{margin:0 auto 20px}.version-two #main .p30-how.is-measuring .how-copy-card{position:absolute;opacity:0;height:auto}.version-two #main .p30-how.is-measuring .how-diagram--still{display:none}.version-two #main .p30-page .how-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;list-style:none;margin:28px 0;padding:0;text-align:left}.version-two #main .how-specs li{display:flex;align-items:flex-start;gap:10px;min-width:0}.version-two #main .how-specs li>svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:#a9ccff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}.version-two #main .how-specs strong{font-size:15px;line-height:1.4;display:block;font-weight:600}.version-two #main .how-specs span{display:block;font-size:13px;line-height:1.5;color:#bfd0e3;margin-top:3px}.version-two #main .how-order{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;border-top:1px solid #bdd1e328;text-align:left}.version-two #main .how-order>div>span,.version-two #main .how-order small{display:block;font-size:13px;line-height:1.6;color:#bfd0e3}.version-two #main .how-order small{font-size:12px}.version-two #main .how-order strong{display:block;margin-top:8px;font:700 36px/1 Gilroy,sans-serif;color:#f6f9ff;white-space:nowrap}.version-two #main .p30-page .how-order .p30-button{gap:20px;flex:none;white-space:nowrap}.version-two #main .how-order svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.version-two #main .p30-how ::selection{background:#a9ccff;color:#061424}.version-two #main .p30-how button:focus-visible{outline:3px solid #a9ccff;outline-offset:5px}@media(max-width:1100px)and (min-width:901px){.version-two #main .how-stage{width:calc(100% - 72px)}.version-two #main .p30-page .how-copy-card h2,.version-two #main .p30-page .how-copy-card h3{font-size:34px}.version-two #main .p30-page [data-how-copy="3"] h3{font-size:27px}.version-two #main .p30-page [data-how-copy="4"] h3{font-size:31px}.version-two #main .how-specs strong{font-size:13px}.version-two #main .how-specs span{font-size:12px}.version-two #main .p30-page .how-order .p30-button{padding-inline:16px;font-size:13px;gap:12px}}@media(max-width:900px){.version-two #main .p30-how{padding:24px 0 64px}.version-two #main .how-stage{width:calc(100% - 32px);max-width:620px}.version-two #main .is-scroll .how-copy-card,.version-two #main .p30-how.is-measuring .how-copy-card{left:0;top:0;bottom:auto;transform:none;width:100%;text-align:left}.version-two #main .is-scroll [data-how-copy="4"],.version-two #main .p30-how.is-measuring [data-how-copy="4"]{top:auto;bottom:0}.version-two #main .p30-page .how-copy-card h2,.version-two #main .p30-page .how-copy-card h3{font-size:clamp(28px,6.8vw,38px);line-height:1.08}.version-two #main .p30-page [data-how-copy="3"] h3,.version-two #main .p30-page [data-how-copy="4"] h3{font-size:clamp(26px,6.4vw,34px)}.version-two #main .p30-page .how-copy-card p{font-size:14px;line-height:1.55;margin-top:12px;max-width:44ch}.version-two #main .p30-page .how-copy-card p.how-original-note{font-size:11px;line-height:1.5;margin-top:8px;max-width:48ch}.version-two #main .p30-page [data-how-copy="2"] p{margin-left:0;margin-right:0}.version-two #main .p30-page .how-part figcaption{font-size:11px;margin:6px -8px 0}.version-two #main .how-board-fact{font-size:11px;gap:6px;padding:6px 8px}.version-two #main .how-board-fact--nl{left:6%;top:16%;transform:translateY(-50%)}.version-two #main .how-board-fact--exclusive{right:6%;top:auto;bottom:10%;transform:translateY(50%)}.version-two #main .is-static .how-copy{gap:48px}.version-two #main .p30-page .how-specs{margin:18px 0;gap:14px 10px}.version-two #main .how-specs li{gap:8px}.version-two #main .how-specs li>svg{width:20px;height:20px;flex-basis:20px}.version-two #main .how-specs strong{font-size:13px}.version-two #main .how-specs span{font-size:11px;margin-top:2px}.version-two #main .how-order{gap:12px;padding-top:16px}.version-two #main .how-order>div>span{font-size:12px}.version-two #main .how-order small{font-size:11px}.version-two #main .how-order strong{font-size:29px}.version-two #main .p30-page .how-order .p30-button{padding-inline:18px;gap:12px;font-size:13px}}@media(max-width:360px){.version-two #main .how-order{gap:10px}.version-two #main .how-order>div>span{max-width:16ch}.version-two #main .how-order small{max-width:16ch}.version-two #main .p30-page .how-order .p30-button{padding-inline:12px;gap:8px}}@media(prefers-reduced-motion:reduce){.version-two #main .p30-how *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/*# sourceMappingURL=/cdn/shop/t/7/assets/co-alfa-product-f30-how.css.map */