/* Pairing is an illustrated guide: these surfaces never request Bluetooth,
   camera or photo permissions. The real app artwork keeps its own scale. */
.pairing-section{scroll-margin-top:0;padding:64px max(28px,5.2vw) 44px;min-height:min(900px,100svh);transition:opacity .45s,visibility .45s}
body[data-night=true] .pairing-section{opacity:0;visibility:hidden;pointer-events:none}
.pairing-intro{max-width:1420px;margin:0 auto 12px}
.pairing-intro h2{margin:0;color:#eff1f0;font-weight:400;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.04em;line-height:1.18}
.pairing-intro p:not(.section-kicker){margin:12px 0 0;color:#969e9a;font-size:12px;line-height:1.7;max-width:540px}
#pairing-guide{list-style:none;max-width:1420px;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pairing-step{position:relative;min-width:0;margin:0;padding:0;display:grid;grid-template-rows:auto 1fr;align-content:start;--pair-progress:0}
.pairing-stage{position:relative;width:100%;aspect-ratio:.83;overflow:hidden;isolation:isolate;pointer-events:none;contain:layout paint;--pair-stage-aspect:.83}
.pairing-step .pairing-stage{opacity:.43;transition:opacity .3s ease}
.pairing-step .pairing-copy-current{opacity:.82;transition:opacity .3s ease}
.pairing-step[data-active=true] .pairing-stage,.pairing-step[data-active=true] .pairing-copy-current{opacity:1}
.pairing-step-number{position:relative;display:inline-flex;align-items:center;min-height:23px;padding-right:8px}
.pairing-step-number::before{content:'';position:absolute;left:-7px;top:8px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:4px solid currentColor;opacity:0}
.pairing-step-number::after{content:' / 04';color:inherit;opacity:.55;white-space:pre}
.pairing-step[data-active=true] .pairing-step-number{color:#ecfff1}
.pairing-step[data-active=true] .pairing-step-number::before{opacity:1}
.pairing-copy::before,.pairing-copy::after{content:'';position:absolute;left:8px;right:8px;top:0;height:1px;background:#deffea17;transform-origin:left center}
.pairing-copy::after{background:#d9ffe7b8;transform:scaleX(var(--pair-progress));opacity:0}
.pairing-step[data-active=true] .pairing-copy::after{opacity:1}
.pairing-copy{position:relative;padding:10px 8px 0;min-width:0;max-width:100%;align-self:start}
.pairing-copy>span:first-child,.pairing-step-number{color:#a6b2ac;font-size:10px;letter-spacing:.13em;font-variant-numeric:tabular-nums}
.pairing-copy h3{margin:9px 0 9px;color:#e0e8e3;font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.01em}
.pairing-copy p{margin:0;color:#8f9a94;font-size:11px;line-height:1.9;overflow-wrap:anywhere}
html[lang=ko] .pairing-copy p{word-break:keep-all;overflow-wrap:break-word}
#pairing-toggle{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;min-width:44px;padding:11px 14px;border:1px solid #bcd5c025;border-radius:22px;background:#ffffff03;color:#acb9b0;font:inherit;font-size:10px;cursor:pointer;white-space:nowrap;flex:none}
#pairing-toggle svg{width:11px;height:11px;flex:none}
#pairing-toggle{display:flex;width:max-content;margin:24px auto 0}
#pairing-toggle svg{stroke:currentColor;stroke-width:1.2;fill:none}
#pairing-toggle .pairing-icon-play{fill:currentColor;stroke:none}
#pairing-toggle .pairing-icon-play,#pairing-toggle[data-playing=false] .pairing-icon-pause{display:none}
#pairing-toggle[data-playing=false] .pairing-icon-play{display:block}
.pairing-copy-slot{display:grid}
.pairing-copy-current,.pairing-copy-reserve{grid-area:1/1;min-width:0}
.pairing-copy-reserve{visibility:hidden;pointer-events:none;user-select:none}
.pairing-copy-reserve strong{display:block;margin:9px 0;color:#e0e8e3;font-size:15px;font-weight:400;line-height:1.5;letter-spacing:.01em}
.pairing-copy-reserve[lang=ko] p{word-break:keep-all;overflow-wrap:break-word}
#pairing-toggle:hover{border-color:#d9f7e158;color:#ecfff0}
#pairing-toggle:focus-visible{outline:2px solid #c6e3cf;outline-offset:4px}
.pairing-stage .pair-back>svg,.pairing-stage .pair-finger>svg{display:block;width:100%;height:100%;overflow:visible}
.pair-back{position:absolute;left:22%;top:9%;width:56%;aspect-ratio:66/120;z-index:1;--white:0}
.pair-back-body{stroke:rgba(221,235,226,.67);stroke-width:.25;fill:url(#pair-back-fill)}
.pair-back-shell{fill:#0a0f0c;stroke:#c6d5cc;stroke-opacity:.62;stroke-width:.24}
.pair-back-edge{stroke:#becdc5;stroke-opacity:.28;stroke-width:.13;fill:none}
.pair-back-glow{position:absolute;inset:0;border-radius:6.4%;border:1px solid #effff8;opacity:var(--white);box-shadow:0 0 7px #effff8c2,0 0 21px #d5fff554,inset 0 0 14px #dbfff34d;pointer-events:none}
.pair-back-glow::before{content:'';position:absolute;left:14%;right:14%;top:-10%;height:20%;background:radial-gradient(ellipse at 50% 65%,#eaffff4a,transparent 70%);filter:blur(5px)}
.pair-back-qr{opacity:.93}
.pair-hold-ring{stroke:#effff8;stroke-width:.55;stroke-linecap:round;fill:none;transform:rotate(-90deg);transform-origin:15.468px 112.845px;opacity:var(--hold-alpha,0)}
.pair-finger{position:absolute;width:60.714%;aspect-ratio:40/46;left:9.7757%;top:91.5327%;color:#d5dfd8;opacity:0;transform-origin:22.5% 6.5217%;z-index:4;filter:drop-shadow(0 3px 4px #0009)}
.pair-finger svg{fill:#16221b;stroke:currentColor;stroke-width:.7;stroke-linecap:round;stroke-linejoin:round}
.pair-hold-count{position:absolute;top:91%;left:46%;font:400 11px/1.2 ui-sans-serif,system-ui,sans-serif;color:#edf9f0;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;z-index:5}
.pair-phone{position:absolute;left:24%;top:3%;width:52%;aspect-ratio:1080/2040;border:1px solid #a5b4ab68;border-radius:9%/4.8%;padding:3.3% 1.6%;background:linear-gradient(145deg,#b9c4bd0c,#030705 22%,#17221a 99%);box-shadow:inset 1px 0 0 #d2e2d126,4px 9px 15px #0007;overflow:hidden;z-index:2}
.pair-phone::before{content:'';position:absolute;top:1.5%;left:40%;width:20%;height:.65%;border-radius:4px;background:#a4b4a938;z-index:6}
.pair-phone::after{content:'';position:absolute;bottom:1.5%;left:37%;width:26%;height:.55%;border-radius:4px;background:#d8e8db8c;z-index:6}
.pair-phone-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#000;border-radius:4.5%/2.6%;isolation:isolate}
.pair-phone-home,.pair-phone-scanner,.pair-phone-launch{position:absolute;inset:0;overflow:hidden}
.pair-phone-home>img.pair-case-art,.pair-app-rainbow{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.pair-app-rainbow{z-index:2}
.pair-app-device{position:absolute;left:9.3%;top:4.1%;width:4.4%;height:3.4%;border:1px solid #c7d1cb;border-radius:1px;box-shadow:inset 0 0 0 1px #000;z-index:4}
.pair-app-device::after{content:'';position:absolute;left:12%;right:12%;top:12%;bottom:13%;border:1px solid #9caaa1;opacity:.65}
.pair-app-battery{position:absolute;left:80.09%;top:4.1%;width:14.81%;height:5.99%;object-fit:contain;z-index:4}
.pair-app-qr{position:absolute;left:46.76%;top:68.9%;width:6.67%;height:3.75%;object-fit:fill;z-index:4}
.pair-app-hint{position:absolute;left:29.26%;top:86.93%;width:41.94%;height:6.56%;object-fit:fill;z-index:4}
.pair-app-arrow{position:absolute;left:41%;top:79%;width:12%;height:8%;z-index:4;fill:none;stroke:#9bd4ff;stroke-width:2;filter:drop-shadow(0 0 3px #3b7bff)}
.pair-app-lighting{position:absolute;left:22.22%;top:80.47%;width:77.78%;height:9.9%;object-fit:fill;z-index:4}
.pair-phone-launch{display:grid;place-items:center;background:#020503;z-index:5}
.pair-phone-launch img{width:34%;height:auto;border-radius:22%}
.pair-phone-scanner{background:#010303;z-index:6}
.pair-scan-close,.pair-scan-help{position:absolute;top:4.16%;width:7.04%;height:3.96%;object-fit:contain;z-index:4}
.pair-scan-close{left:5.37%}.pair-scan-help{right:5.37%}
.pair-scan-flash,.pair-scan-album{position:absolute;bottom:3.85%;width:8.89%;height:5%;object-fit:contain;z-index:4}
.pair-scan-flash{left:11.11%}.pair-scan-album{right:11.11%}
.pair-scan-power{position:absolute;left:12.04%;top:84.58%;width:75.93%;height:4.48%;object-fit:contain;z-index:4}
.pair-scan-line{position:absolute;left:13.43%;top:28.13%;width:73.15%;height:.47%;background:linear-gradient(90deg,transparent,#78ec00 18%,#b1ff12 50%,#78ec00 82%,transparent);box-shadow:0 0 4px #61da0060;z-index:3}
.pair-tap{position:absolute;left:50.1%;top:70.8%;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #f1fff4;border-radius:50%;background:#e8ffee1c;opacity:0;z-index:7}
.pair-scan-target{position:absolute;left:var(--pair-target-left);top:var(--pair-target-top);width:var(--pair-target-width);height:auto;aspect-ratio:66/120;opacity:.85;z-index:1}
.pair-scan-target .pair-back{inset:0;width:100%;height:100%}
.pair-scan-check{position:absolute;left:35%;top:45%;width:30%;aspect-ratio:1;border-radius:50%;border:1px solid #7ee0a26b;background:#102a1de8;display:grid;place-items:center;color:#a4ffc9;font-size:clamp(12px,2.4vw,24px);z-index:5;opacity:0}
.pair-product-front{position:absolute;left:5%;top:21%;width:40%;aspect-ratio:66/120;z-index:3;isolation:isolate}
.pair-product-art{position:absolute;left:-32.57%;top:-29.98%;width:165.14%;height:163.54%;pointer-events:none}
.pair-product-art>img,.pair-product-art>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.pair-product-art>canvas{z-index:2}
.pair-product-art>img,.pair-case-art{clip-path:inset(17.5% 18.8% 19.7% 18.8%)}
.pair-product-sheen{position:absolute;inset:14% 1% 10%;border-radius:1%;background:linear-gradient(112deg,#dceaff06,transparent 39%,#ffffff03 65%,transparent);box-shadow:inset 1px 0 0 #f4fffb20,inset -1px 0 0 #f4fffb14;z-index:3;pointer-events:none}
.pair-composition{position:absolute;left:50%;top:3%;height:94%;width:min(94%,calc(94% * .83 / var(--pair-stage-aspect)));transform:translateX(-50%)}
.pair-composition .pair-phone{left:var(--pair-phone-left);top:var(--pair-phone-top);width:var(--pair-phone-width);padding:0;border:0;transform:none;box-shadow:inset 0 0 0 1px #a5b4ab68,inset -2px 0 0 #f0fff02b,inset 1px 0 0 #d2e2d126,4px 9px 15px #0007;z-index:2}
.pair-composition .pair-phone-screen{position:absolute;left:var(--pair-screen-left);top:var(--pair-screen-top);width:var(--pair-screen-width);height:var(--pair-screen-height);aspect-ratio:9/16}
.pair-composition>.pair-back{left:var(--pair-card-left);top:var(--pair-card-top);width:var(--pair-card-width)}
.pair-device{position:absolute;left:var(--pair-card-left);top:var(--pair-card-top);width:var(--pair-card-width);aspect-ratio:66/120;transform:none;z-index:1}
.pair-device::before{content:'';position:absolute;inset:0;border:1px solid #b7d2bf28;border-radius:6.4%;background:linear-gradient(90deg,#728a7a10,transparent 5%,transparent 95%,#bed8c523)}
.pair-device>.pair-back,.pair-device>.pair-product-front{inset:0;width:100%;height:100%}
.pairing-stage[data-graphics=fallback] .pair-product-sheen{box-shadow:0 0 18px #7cafff25,inset 0 0 12px #86ffd52b}
.pairing-stage[data-graphics=fallback] .pair-product-art::after,.pairing-stage[data-graphics=fallback] .pair-phone-home::after{content:'';position:absolute;left:25.5%;right:25.5%;top:28.3%;bottom:27.4%;border:2px solid #b2eadc;border-image:conic-gradient(#69fff0,#5681ff,#ff80dc,#ffc074,#73ffa5,#69fff0) 1;filter:drop-shadow(0 0 5px #a9f5e488);z-index:3;pointer-events:none}
.pairing-stage[data-graphics=fallback] .pair-product-art::before,.pairing-stage[data-graphics=fallback] .pair-phone-home::before{content:'';position:absolute;left:32%;right:32%;top:9%;height:15%;background:radial-gradient(ellipse at 50% 80%,#8effdc66,transparent 70%);filter:blur(3px);z-index:3;pointer-events:none}
@media(min-width:1600px){.pairing-stage{aspect-ratio:.86;--pair-stage-aspect:.86}.pairing-section{padding-top:75px}.pairing-copy h3,.pairing-copy-reserve strong{font-size:16px}.pairing-copy p{font-size:12px}}
@media(min-width:801px) and (max-width:1099px){#pairing-guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 38px;max-width:850px}.pairing-stage{aspect-ratio:1.14;--pair-stage-aspect:1.14;max-width:350px;margin:auto}.pair-back{top:4%;width:43%;left:28.5%}.pair-phone{width:42%;left:29%;top:0}.pairing-copy{padding-top:4px}}
@media(max-width:800px){.pairing-section{min-height:0;padding:50px 22px 34px}.pairing-intro{margin-bottom:24px}.pairing-intro h2{font-size:28px}.pairing-intro p:not(.section-kicker){font-size:11px;max-width:310px}#pairing-guide{display:grid;grid-template-columns:1fr;gap:20px;max-width:560px}.pairing-step{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);grid-template-rows:auto;gap:20px;align-items:center}.pairing-stage{aspect-ratio:.83}.pairing-copy{padding:0;align-self:center}.pairing-copy h3,.pairing-copy-reserve strong{font-size:14px;margin:8px 0}.pairing-copy p{font-size:11px;line-height:1.85}.pairing-copy>span:first-child{font-size:10px}.pairing-intro h2{max-width:300px}}
@media(max-width:374px){.pairing-section{padding-left:16px;padding-right:16px}.pairing-step{gap:13px;grid-template-columns:minmax(0,1.04fr) minmax(0,.9fr)}.pairing-copy h3,.pairing-copy-reserve strong{font-size:13px}.pairing-copy p{font-size:10.5px;line-height:1.8}.pairing-intro h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){.pairing-section,#pairing-toggle,.pairing-stage *{transition:none!important;animation:none!important}}

/* V37: the front device uses the approved common CAD crop. */
.pair-device,.pair-product-front,.pair-scan-target,.pair-back{aspect-ratio:68.6/120.3778159}
.pair-product-art{left:-33.0769230769%;top:-32.4123176366%;width:166.1538461538%;height:168.3315599646%}
.pair-product-art>img,.pair-case-art{clip-path:none}
