/* 2026-10-10: non-invasive refinements over original Pages styles. */
.hero{min-height:93svh;display:flex;align-items:center;justify-content:center;padding-top:130px;padding-bottom:115px}
.hero .container{display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-secondary{margin:16px auto 0;display:flex;justify-content:center}
.hero .hero-how-button{min-width:204px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.24);color:#fff;animation:none;box-shadow:none;font-weight:800}
.hero .hero-how-button:hover{background:#ffffff13;border-color:var(--neon-cyan);box-shadow:0 0 26px #00f0ff13}
.hero .hero-how-button span{font-size:18px;color:var(--neon-cyan)}
/* Right-side information panel, accessible native dialog */
.how-drawer{position:fixed;inset:0 0 0 auto;margin:0;padding:0;width:min(495px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;background:linear-gradient(160deg,#101522,#0b0d15 70%);color:#fff;box-shadow:-32px 0 90px #0009;overflow:hidden}
.how-drawer[open]{animation:howEnter .45s cubic-bezier(.2,.75,.25,1) both}
.how-drawer::backdrop{background:#010207bb;backdrop-filter:blur(9px)}
@keyframes howEnter{from{opacity:.65;transform:translateX(95%)}to{opacity:1;transform:translateX(0)}}
.how-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.how-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:22px 28px;border-bottom:1px solid var(--glass-border);flex-shrink:0}
.how-drawer-head .ib-kicker{margin:0}
.how-close{width:46px;height:46px;display:grid;place-items:center;border:1px solid #ffffff29;border-radius:50%;font-size:25px}
.how-close:hover{border-color:var(--neon-cyan)}
.how-drawer-content{padding:34px 30px;overflow-y:auto;flex:1;overscroll-behavior:contain}
.how-eyebrow{font-size:11px;letter-spacing:.16em;color:var(--neon-cyan);margin-bottom:16px}
.how-drawer-content h2{font-size:clamp(29px,5vw,42px);line-height:1.12;letter-spacing:-.055em;margin-bottom:20px}
.how-drawer-content>p:not(.how-eyebrow){font-size:14px;line-height:1.8;color:var(--text-muted);margin-bottom:34px}
.how-drawer-content>p strong{color:#fff}
.how-rule{display:flex;align-items:flex-start;gap:19px;padding:17px 0;border-top:1px solid #ffffff18}
.how-rule>span{font-size:11px;color:var(--neon-cyan);min-width:24px;margin-top:3px}
.how-rule strong{font-size:14px}
.how-rule p{font-size:12px;color:var(--text-muted);margin-top:6px;line-height:1.7}
.how-drawer-footer{border-top:1px solid var(--glass-border);padding:18px 30px max(20px,env(safe-area-inset-bottom));display:flex;gap:12px;flex-direction:column;flex-shrink:0;background:#0d101a}
.how-drawer-footer .ib-btn{min-height:54px;width:100%;border-radius:14px}
.how-drawer-footer small{font-size:10px;color:var(--text-muted);text-align:center}
/* Color selector: tactile swatches with high-contrast active ring */
.product-variants{align-items:end}
.color-picker{grid-column:1/-1;min-width:0;border:0;padding:3px 0 0;margin:0}
.color-picker legend{font-size:12px;color:var(--text-muted);padding:0;margin-bottom:13px}
.color-picker legend strong{color:white;font-weight:800}
.color-swatch-list{display:flex;flex-wrap:wrap;gap:11px;align-items:center;min-height:56px}
.color-swatch{position:relative;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff42;background:#ffffff05;display:grid;place-items:center;padding:0;transition:border-color .2s,box-shadow .2s,transform .2s}
.color-swatch span{width:31px;height:31px;display:block;border-radius:50%;background:var(--swatch-color);border:1px solid #ffffff45;box-shadow:inset 0 0 5px #0003}
.color-swatch:hover{transform:translateY(-2px)}
.color-swatch[aria-pressed="true"]{border:2px solid var(--neon-cyan);box-shadow:0 0 0 3px #00f0ff20,0 0 20px #00f0ff18}
.color-swatch[aria-pressed="true"]::after{content:"✓";font-size:11px;font-weight:800;position:absolute;bottom:-6px;right:-4px;color:#08121b;background:var(--neon-cyan);border-radius:50%;height:18px;width:18px;display:grid;place-items:center}
.color-guide{font-size:11px;line-height:1.5;color:var(--text-muted);display:block;margin-top:13px}
.product-stage-video{cursor:pointer;position:relative;display:grid;place-items:center;background:#07080f;overflow:hidden}
.product-stage-video>img{width:100%;height:100%;max-height:100%;object-fit:contain!important}
.video-play-badge{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);z-index:2;white-space:normal;min-width:180px;max-width:90%;font-size:12px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #ffffff55;border-radius:999px;padding:12px 16px;background:#101019ea;box-shadow:0 5px 22px #0009}
.video-play-badge span{display:grid;place-items:center;background:#bd00ff;border-radius:50%;height:30px;width:30px;flex-shrink:0;font-size:12px}
.video-lightbox{position:fixed;margin:auto;inset:0;padding:0;border:0;background:#07080e;max-width:100vw;width:100vw;max-height:100dvh;height:100dvh;color:#fff;overflow:hidden}
.video-lightbox::backdrop{background:#030307ec}
.video-lightbox-shell{height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:64px 15px max(24px,env(safe-area-inset-bottom))}
.video-lightbox video{display:block;width:min(92vw,530px);height:min(77dvh,780px);max-height:100%;object-fit:contain;aspect-ratio:auto;background:#000;border-radius:12px}
.video-lightbox-shell>button{position:absolute;top:max(12px,env(safe-area-inset-top));right:20px;width:48px;height:48px;border:1px solid #ffffff55;border-radius:50%;background:#ffffff14;font-size:28px;z-index:3}
.video-lightbox-shell>p{font-size:11px;color:#bec0cd;text-align:center}
@media(max-width:991px){.hero{min-height:calc(100svh - 40px);padding:70px 0 110px}.hero .hero-how-button{min-width:190px}}
@media(max-width:600px){.hero{min-height:calc(100svh - 20px);padding:50px 0 124px}.hero-secondary{margin-top:14px}.hero .hero-how-button{min-height:50px;min-width:190px}.how-drawer{width:100vw}.how-drawer-head{padding:13px 18px}.how-drawer-content{padding:24px 22px}.how-drawer-content h2{font-size:34px}.how-rule{padding:15px 0}.how-drawer-footer{padding:14px 20px max(19px,env(safe-area-inset-bottom))}.color-swatch{width:45px;height:45px}.video-lightbox-shell{padding:60px 8px max(17px,env(safe-area-inset-bottom))}.video-lightbox video{height:min(76dvh,750px);width:98vw;border-radius:5px}}
@media(prefers-reduced-motion:reduce){.how-drawer[open]{animation:none}.color-swatch:hover{transform:none}}