/* How-to page only: a full-container video window and the shared setup demo. */
.how-main{padding-top:30px;padding-bottom:44px}.how-intro{text-align:center;margin:0 0 26px}.how-intro .eyebrow{margin-top:7px}.how-intro h1{font-size:clamp(34px,4vw,53px);font-style:italic;margin:10px 0 14px;line-height:1.12}.how-intro>p:last-child{font-size:19px;color:#d5e4ec;line-height:1.5}.how-window{border:1px solid #30d9ff;border-radius:14px;overflow:hidden;box-shadow:0 0 26px #00b8ff30,inset 0 0 12px #00b8ff30;background:#00121e;width:100%}.how-window-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(100deg,#062d40,#001520);padding:14px 20px;border-bottom:1px solid #2585a0}.how-window-bar img{width:285px;max-width:44%;height:auto}.how-window-title{color:#94d6e8;font-size:11px;letter-spacing:1.5px}.how-window-lights{display:flex;gap:7px}.how-window-lights i{width:7px;height:7px;border:1px solid #2ca1c5;border-radius:50%}.how-window-lights i:last-child{background:#1bc7ed;box-shadow:0 0 8px #00bfff}.how-film-stage{position:relative;aspect-ratio:16/9;background:#000c15}.how-film-stage video{display:block;width:100%;height:100%;object-fit:contain}.how-film-stage video[hidden]{display:none}.how-film-placeholder{width:100%;height:100%;position:relative;display:grid;place-items:center;isolation:isolate}.how-film-placeholder[hidden]{display:none}.how-film-placeholder>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.38;filter:blur(1px);z-index:-2}.how-film-placeholder:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#001420aa,#00142055);z-index:-1}.how-film-message{text-align:center;padding:25px;text-shadow:0 3px 8px #000}.how-play-symbol{display:grid;place-items:center;margin:0 auto 20px;padding-left:6px;border:2px solid #4ce0ff;border-radius:50%;color:#75e8ff;font-size:62px;width:98px;height:98px;box-shadow:0 0 24px #00bfff66;background:#001b2aaa}.how-film-message h2{font-size:clamp(25px,3vw,43px);font-style:italic;margin:10px 0}.how-film-message p{font-size:19px;color:#d2e6ee}.how-film-label{color:#72d8eb;letter-spacing:2px;font-size:10px}.how-window-bottom{display:flex;justify-content:space-between;gap:15px;padding:13px 20px;font-size:12px;color:#a3c8d8;border-top:1px solid #1c6178;background:#021a28}.how-window-bottom b{color:#16d8e8;margin-right:8px}.how-flow{margin:40px 0 45px;text-align:center}.how-flow>h2{font-size:clamp(30px,3vw,43px);font-style:italic;margin:0 0 12px}.how-subtitle{font-size:18px;color:#c8d9e2;margin:0 0 24px}.how-actions{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.how-actions li{border:1px solid #207c9a;border-radius:10px;padding:19px;background:linear-gradient(145deg,#032536,#00121f);position:relative}.how-actions li:not(:last-child):after{content:'›';position:absolute;right:-22px;top:45%;font-size:38px;color:#29d7ff;text-shadow:0 0 10px #00bfff;line-height:20px}.how-icon{display:block;color:#54dcff;font-size:44px;line-height:1;height:48px;text-shadow:0 0 12px #00aaff80}.how-actions h3{font-size:24px;margin:10px 0;color:#ffb500}.how-actions p{font-size:16px;line-height:1.5;margin:0;color:#d4e3ec}.how-demo{padding-top:8px}.how-demo h2{font-size:clamp(28px,3vw,41px)}.how-demo h2:before,.how-demo h2:after{width:8%;margin:0 15px}.how-demo .steps{margin-top:42px}.how-demo>p{font-size:18px}.how-page .ready{margin:25px 0 35px;font-size:27px}.how-download{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:25px 30px}.how-download h2{font-style:italic;font-size:31px;margin:0 0 10px}.how-download p{margin:0;line-height:1.5}.how-page nav a[aria-current=page]{color:#6be4ff}.how-page nav a[aria-current=page]:after{content:'';display:block;border-bottom:1px solid #22caff;margin-top:5px}
@media(max-width:800px){.how-window-title{font-size:9px;letter-spacing:1px}.how-window-bar{gap:10px;padding:12px}.how-actions{gap:14px}.how-actions li{padding:15px 10px}.how-actions li:not(:last-child):after{right:-16px;font-size:28px}.how-actions p{font-size:14px}.how-download{padding:22px}.how-download .button{font-size:14px}.how-page .ready{font-size:23px}}
@media(max-width:650px){.how-main{padding-top:20px}.how-intro>p:last-child{font-size:16px}.how-window{border-radius:9px}.how-window-bar img{max-width:65%;width:230px}.how-window-title{display:none}.how-film-message{padding:12px}.how-play-symbol{font-size:32px;width:55px;height:55px;margin-bottom:8px}.how-film-message h2{font-size:23px;margin:5px 0}.how-film-message p{font-size:14px;margin:8px 0}.how-film-label{font-size:8px;letter-spacing:1px}.how-window-bottom{font-size:10px;padding:10px;gap:8px}.how-flow{margin:30px 0}.how-subtitle{font-size:16px}.how-actions{grid-template-columns:1fr 1fr;gap:13px}.how-actions li:not(:last-child):after{display:none}.how-actions p{font-size:15px}.how-demo h2:before,.how-demo h2:after{display:none}.how-demo>p{font-size:16px}.how-page .ready{font-size:21px}.how-download{flex-direction:column;align-items:flex-start;padding:20px}.how-download .button{width:100%}.how-download h2{font-size:28px}}

/* Centred, keyboard-accessible play overlay; native player controls remain available. */
.how-film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:108px;height:108px;padding:0;border:2px solid #6fe7ff;border-radius:50%;background:linear-gradient(145deg,#08384de8,#001622ed);box-shadow:0 0 28px #00bcff80,inset 0 0 20px #00cfff26;transition:background .2s,box-shadow .2s;cursor:pointer}.how-film-play[hidden]{display:none}.how-film-play svg{width:65px;height:65px;fill:#ffb512;filter:drop-shadow(0 0 7px #ff9d0066)}.how-film-play:hover{background:#0a4258;box-shadow:0 0 38px #00cfffaa}.how-film-play:focus-visible{outline:3px solid #fff;outline-offset:6px}.how-play-status{position:absolute;bottom:60px;left:12%;right:12%;text-align:center;font-size:14px;color:#fff;background:#00131ee8;border-radius:5px;padding:8px;z-index:3}.how-play-status:empty{display:none}@media(max-width:650px){.how-film-play{width:76px;height:76px}.how-film-play svg{width:47px;height:47px}.how-play-status{font-size:12px;bottom:42px}}@media(prefers-reduced-motion:reduce){.how-film-play{transition:none}}
