/* An original product viewer: one object, one focused explanation at a time. */
.closer{overflow:hidden;padding:158px max(38px,calc((100vw - 1244px)/2)) 170px;background:#101010;color:#f5f5f7}.closer-heading{max-width:770px}.closer-heading h2{margin:16px 0 22px;font-size:clamp(50px,5.8vw,86px);line-height:1.04;letter-spacing:-.085em}.closer-heading h2 em{font-style:normal;color:#a5a5aa}.closer-heading>p:last-child{max-width:590px;margin:0;color:#b9bec5;font-size:18px;line-height:1.8}.closer-shell{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);min-height:720px;margin-top:60px;border:1px solid #2d2d30;border-radius:40px;background:#000;overflow:hidden}.closer-stage{position:relative;display:grid;place-items:center;min-height:720px;isolation:isolate;overflow:hidden;background:radial-gradient(circle at 52% 43%,#13394a 0,transparent 26%),radial-gradient(circle at 80% 81%,#0c77a441,transparent 28%),#050607}.closer-stage:before{content:"";position:absolute;z-index:-2;inset:0;background:linear-gradient(#73f2e513 1px,transparent 1px),linear-gradient(90deg,#73f2e513 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(circle at center,#000,transparent 73%)}.closer-stage:after{content:"";position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,#0000005c,transparent 25% 75%,#00000052);pointer-events:none}.viewer-product{position:absolute;z-index:1;width:min(84%,660px);height:86%;object-fit:contain;filter:drop-shadow(0 34px 38px #000c);transition:opacity .65s ease,transform .85s cubic-bezier(.2,.8,.2,1),filter .65s ease}.viewer-product-main{opacity:1;transform:scale(1)}.viewer-product-finish{width:min(77%,560px);height:88%;opacity:0;transform:translateY(25px) scale(.94);mix-blend-mode:screen}.viewer-orbit{position:absolute;z-index:0;left:50%;top:50%;border:1px solid #71f2e545;border-radius:50%;transform:translate(-50%,-50%) rotate(-23deg);transition:border-color .55s ease,transform .8s ease}.orbit-a{width:74%;height:60%}.orbit-b{width:55%;height:82%;border-color:#4d9fff35;transform:translate(-50%,-50%) rotate(32deg)}.viewer-hotspot{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;color:#d8ffff;font-size:12px;letter-spacing:.04em;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}.viewer-hotspot i{width:9px;height:9px;border:2px solid #dffffb;border-radius:50%;background:#55eadb;box-shadow:0 0 0 7px #4ee6d22b,0 0 22px #55e9db}.hotspot-sensing{top:28%;right:10%}.hotspot-quality{bottom:22%;left:10%}.hotspot-privacy{bottom:13%;right:12%}.viewer-stage-label{position:absolute;z-index:4;bottom:35px;left:38px;display:flex;align-items:center;gap:10px;margin:0;color:#d5d7dc;font-size:15px}.viewer-stage-label b{color:#73eee1;font-size:12px;letter-spacing:1.3px}.closer-shell[data-viewer-feature="sensing"] .hotspot-sensing,.closer-shell[data-viewer-feature="quality"] .hotspot-quality,.closer-shell[data-viewer-feature="privacy"] .hotspot-privacy{opacity:1;transform:none}.closer-shell[data-viewer-feature="quality"] .viewer-product-main{transform:scale(1.08) translateY(2%);filter:drop-shadow(0 34px 50px #0ae3df45)}.closer-shell[data-viewer-feature="privacy"] .viewer-product-main{transform:scale(.98) translateX(-3%)}.closer-shell[data-viewer-feature="privacy"] .orbit-a{border-color:#8a98ff8a;transform:translate(-50%,-50%) rotate(52deg) scale(1.1)}.closer-shell[data-viewer-feature="finish"] .viewer-product-main{opacity:0;transform:translateY(-25px) scale(.92)}.closer-shell[data-viewer-feature="finish"] .viewer-product-finish{opacity:1;transform:none;mix-blend-mode:screen}.closer-shell[data-viewer-feature="finish"] .viewer-orbit{border-color:#f0d1b872}.closer-panel{position:relative;z-index:5;padding:47px 34px;background:linear-gradient(145deg,#1b1b1d,#111113 72%);box-shadow:-26px 0 70px #0008}.closer-panel-kicker{margin:0 0 20px;color:#9d9da1;font-size:11px;font-weight:650;letter-spacing:1.4px}.viewer-options{display:grid;gap:8px}.viewer-options button{display:grid;grid-template-columns:28px 1fr 20px;gap:10px;align-items:start;width:100%;padding:17px 15px;border:1px solid transparent;border-radius:17px;background:transparent;color:#f5f5f7;text-align:left;cursor:pointer;transition:background .3s ease,border-color .3s ease,transform .3s ease}.viewer-options button:hover{background:#ffffff0b}.viewer-options button.is-active{border-color:#ffffff2b;background:#ffffff12}.viewer-options button b{padding-top:2px;color:#8beee4;font-size:11px;font-weight:650}.viewer-options button span{font-size:16px;font-weight:650;letter-spacing:-.02em}.viewer-options button small{display:block;margin-top:5px;color:#a8acb2;font-size:12px;font-weight:400;line-height:1.5}.viewer-options button i{font-size:19px;font-style:normal;font-weight:300;transition:transform .3s ease}.viewer-options button.is-active i{transform:rotate(45deg)}.viewer-detail{margin:24px 15px 0;padding:21px 0 0;border-top:1px solid #ffffff20}.viewer-detail strong{font-size:19px;letter-spacing:-.03em}.viewer-detail p{margin:10px 0 0;color:#c4c6ca;font-size:14px;line-height:1.72}.viewer-options button:focus-visible,.flow-steps button:focus-visible{outline:2px solid #7eecff;outline-offset:3px}

/* The existing scene becomes a step-controlled pipeline, not just three floating cards. */
.flow-console{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:25px;padding:20px 24px;border:1px solid #8beae435;border-radius:20px;background:#ffffff08}.flow-reading{display:grid;gap:5px}.flow-reading span{color:#7ee9de;font-size:11px;font-weight:650;letter-spacing:1.2px}.flow-reading strong{color:#f2ffff;font-size:18px;letter-spacing:-.02em}.flow-reading small{color:#b7d2da;font-size:13px}.flow-steps{display:flex;gap:8px}.flow-steps button{display:inline-flex;align-items:center;gap:8px;padding:11px 13px;border:1px solid #a6e6e52c;border-radius:999px;background:#071d2d;color:#c6e0e4;cursor:pointer;transition:background .28s ease,color .28s ease,border-color .28s ease}.flow-steps button b{color:#75e6dc;font-size:11px}.flow-steps button span{font-size:13px}.flow-steps button.is-active{border-color:#7df2e6;background:#12605c;color:#f2fffd}.demo-stage[data-flow-stage="edge"] .demo-edge,.demo-stage[data-flow-stage="cloud"] .demo-cloud,.demo-stage[data-flow-stage="app"] .demo-app{border-color:#9cfff3;box-shadow:inset 0 0 0 1px #a5fff44d,0 0 42px #3fe6d44d,0 18px 45px #0000004d}.demo-stage[data-flow-stage="edge"] .route-up,.demo-stage[data-flow-stage="cloud"] .route-up,.demo-stage[data-flow-stage="cloud"] .route-down,.demo-stage[data-flow-stage="app"] .route-line{opacity:1;filter:drop-shadow(0 0 7px #54eee2)}

@media(max-width:900px){.closer{padding:108px 24px}.closer-shell{grid-template-columns:1fr;min-height:0}.closer-stage{min-height:560px}.closer-panel{padding:31px 23px}.viewer-options{grid-template-columns:1fr 1fr}.viewer-options button{padding:15px 11px}.viewer-options button small{font-size:11px}.flow-console{align-items:flex-start;flex-direction:column}.flow-reading small{max-width:570px}.flow-steps{width:100%}.flow-steps button{flex:1;justify-content:center}}
@media(max-width:560px){.closer{padding:82px 0 95px}.closer-heading{padding:0 20px}.closer-heading h2{font-size:45px}.closer-heading>p:last-child{font-size:16px}.closer-shell{margin-top:39px;border-radius:0}.closer-stage{min-height:510px}.viewer-product{width:106%;height:78%}.viewer-hotspot{font-size:10px}.hotspot-sensing{right:4%}.hotspot-quality{left:6%}.hotspot-privacy{right:5%}.viewer-stage-label{bottom:23px;left:23px}.viewer-options{grid-template-columns:1fr}.viewer-options button{grid-template-columns:26px 1fr 18px;padding:14px 12px}.flow-console{padding:18px 15px;border-radius:16px}.flow-reading strong{font-size:16px}.flow-reading small{font-size:12px}.flow-steps button{padding:10px 8px}.flow-steps button span{font-size:12px}}
@media(prefers-reduced-motion:reduce){.viewer-product,.viewer-orbit,.viewer-hotspot,.viewer-options button{transition:none}}