/* Remote TV screen management landing page: problem → remote change → proof. */
.screen-management-page { --ink:#07142c; --soft:#bed0e8; --paper:#f3f6fb; --gutter:max(24px,7vw,calc((100vw - 1420px)/2)); background:var(--ink); }
.screen-management-page main>section { padding:74px var(--gutter); scroll-margin-top:90px; }
.screen-management-page main img { display:block; max-width:100%; height:auto; }
.screen-management-page main figure { margin:0; }
.screen-management-page h1,.screen-management-page h2,.screen-management-page h3 { text-wrap:balance; }
.screen-management-page h1 { max-width:670px; margin:14px 0 24px; font-size:clamp(46px,5vw,76px); line-height:1.01; letter-spacing:-.06em; }
.screen-management-page h2 { margin:12px 0 20px; font-size:clamp(34px,3.5vw,56px); line-height:1.08; letter-spacing:-.05em; }
.screen-management-page h3 { margin:0 0 10px; font-size:22px; line-height:1.2; letter-spacing:-.025em; }
.screen-management-page p { color:var(--soft); font-size:17px; line-height:1.65; }
.screen-management-page .eyebrow { margin:0; color:#a9a9ff; font-size:11px; line-height:1.6; letter-spacing:.18em; text-transform:uppercase; font-weight:750; }
.screen-management-page .section-heading { max-width:720px; }
.screen-management-page .text-link { display:inline-block; color:#76dbf3; font-weight:700; text-underline-offset:5px; }
.screen-management-page a:focus-visible,.screen-management-page summary:focus-visible { outline:3px solid #65d8ed; outline-offset:5px; }
.screen-management-page .nav { position:fixed; }
.screen-management-page .nav.scrolled { background:#07142bf2; border-color:#8bb5de30; }
.screen-management-page .button { padding:13px 21px; font-size:15px; }
.manage-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:18px; min-height:650px; padding-top:140px!important; padding-bottom:76px!important; overflow:hidden; background:radial-gradient(ellipse at 78% 45%,#17509b5e,transparent 53%),radial-gradient(ellipse at 17% 100%,#5a32ae38,transparent 55%),#040918; }
.manage-hero .lead { max-width:540px; font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin:28px 0 0; }
.screen-management-page .hero-actions .quiet { margin:0; color:#e1edff; font-size:15px; font-weight:650; text-underline-offset:6px; }
.hero-control { position:relative; min-height:400px; isolation:isolate; }
.hero-control::before { content:""; position:absolute; z-index:-1; inset:2% -8%; background:radial-gradient(ellipse,#306dc65a,transparent 67%); }
.hero-control img { position:absolute; }
.hero-control .signal { width:98%; left:0; bottom:9%; z-index:3; opacity:.58; }
.hero-control .hero-tv { width:72%; right:-2%; top:2%; z-index:1; filter:drop-shadow(0 24px 30px #01071580); }
.hero-control .hero-dashboard { width:82%; left:-3%; bottom:2%; z-index:2; filter:drop-shadow(0 22px 26px #01071570); }
.friction { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:74px; color:#122d54; background:linear-gradient(135deg,#f5f8fc,#e8eff9); }
.friction .eyebrow,.content-options .eyebrow,.manage-faq .eyebrow { color:#535bc0; }
.friction p,.content-options p,.manage-faq p { color:#586d89; }
.friction-copy { max-width:540px; }
.friction .text-link,.content-options .text-link { color:#315eaa; }
.friction figure { min-height:355px; overflow:hidden; border-radius:22px; box-shadow:0 24px 46px #132c5626; }
.friction figure img { width:100%; height:100%; object-fit:cover; }
.remote-process { background:radial-gradient(ellipse at 50% 65%,#1e3c6928,transparent 62%),#07142c; }
.process-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:38px; }
.process-grid article { position:relative; min-width:0; padding:0 18px; }
.process-grid article:not(:last-child)::after { content:""; position:absolute; top:18px; left:56px; right:-50px; height:1px; background:linear-gradient(90deg,#6d9fe375,#5fcee350); }
.process-grid b { position:relative; z-index:2; display:grid; place-items:center; width:38px; height:38px; border:1px solid #6d9fe370; border-radius:50%; background:#10213f; color:#a0e1f1; font-size:12px; letter-spacing:.05em; }
.process-grid h3 { margin-top:20px; }
.process-grid p { margin:0; font-size:16px; }
.media-stack,.screen-choice,.process-device { height:180px; margin-top:16px; display:grid; place-items:center; }
.media-stack { position:relative; max-width:290px; margin-inline:auto; }
.media-stack img { position:absolute; filter:drop-shadow(0 14px 18px #01071558); }
.media-stack .media-photo { width:36%; left:3%; top:10%; transform:rotate(-8deg); }
.media-stack .media-poster { width:37%; right:4%; top:8%; transform:rotate(8deg); }
.media-stack .media-video { width:74%; left:13%; bottom:3%; }
.screen-choice img { width:78%; max-width:245px; border:1px solid #b5cbe655; border-radius:9px; box-shadow:0 12px 26px #01071545; }
.remote-tv { position:relative; width:100%; max-width:300px; aspect-ratio:16 / 9; margin-inline:auto; filter:drop-shadow(0 16px 20px #01071560); }
.remote-tv .tv-frame { position:absolute; inset:0; width:100%; max-width:none; }
.remote-tv .tv-screen { position:absolute; inset:0; overflow:hidden; clip-path:polygon(12.25% 19.22%,87.69% 4.11%,88.06% 83.22%,11.69% 79.78%); }
.remote-tv .tv-screen img { position:absolute; max-width:none; }
.remote-tv .tv-screen:not(.photo):not(.poster) img { width:125%; left:-12%; top:-15%; }
.remote-tv .tv-screen.photo img { width:123%; left:-11%; top:-90%; }
.remote-tv .tv-screen.poster img { width:110%; left:-4%; top:-100%; }
.screen-scale { display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:72px; background:#07142c; }
.screen-management-page .screens-visual figure { overflow:hidden; width:94%; margin:auto; border:1px solid #91b5e65c; border-radius:13px; background:#f5f8fd; box-shadow:0 24px 52px #01081650; }
.screens-visual figcaption { padding:11px 16px; background:#122747; color:#d1e5f8; font-size:12px; }
.screens-visual figure img { width:100%; }
.tv-cluster { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:40px auto 0; max-width:94%; }
.tv-cluster::before { content:""; position:absolute; top:-20px; left:17%; right:17%; height:18px; border-top:1px solid #62b9db70; border-inline:1px solid #62b9db70; border-radius:12px 12px 0 0; }
.tv-cluster::after { content:""; position:absolute; top:-36px; left:50%; width:1px; height:34px; background:linear-gradient(#917af2,#61d7e970); }
.tv-cluster .remote-tv { max-width:none; }
.tv-cluster .remote-tv:nth-child(2) { transform:translateY(10px) scale(1.07); }
.content-options { color:#122d54; background:#f3f6fb; }
.options-grid { display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:16px; margin-top:28px; }
.options-grid article { display:flex; flex-direction:column; min-height:270px; overflow:hidden; border:1px solid #d6e2f1; border-radius:20px; background:#fff; }
.options-grid article>h3,.options-grid article>p { padding-inline:22px; }
.options-grid article>h3 { padding-top:22px; font-size:21px; }
.options-grid article>p { margin:0 0 14px; font-size:15px; }
.options-grid article>img { width:90%; margin:auto auto 18px; border:1px solid #dce7f4; border-radius:8px; box-shadow:0 12px 22px #17355d15; }
.option-media { position:relative; min-height:125px; margin:auto 5% 18px; overflow:hidden; border-radius:12px; background:linear-gradient(145deg,#dde9ff,#b8ccf8); }
.option-media img { position:absolute; width:92%; left:4%; bottom:-10%; filter:drop-shadow(0 10px 12px #1937742b); }
.practical { color:#122d54; background:linear-gradient(145deg,#fff,#f4f7fc); }
.practical-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:36px; }
.practical-grid article { position:relative; min-height:330px; overflow:hidden; border-radius:18px; background:#13233e; }
.practical-grid article::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,#07142ce8 100%); }
.practical-grid img { width:100%; height:100%; object-fit:cover; }
.practical-grid div { position:absolute; z-index:1; left:24px; right:24px; bottom:20px; color:#fff; }
.practical-grid h3 { font-size:22px; }
.practical-grid p { margin:0; color:#d8e5f5; font-size:15px; }
.device-note { display:grid; grid-template-columns:.65fr 1.35fr; align-items:center; gap:48px; background:radial-gradient(ellipse at 22% 46%,#234ead45,transparent 55%),radial-gradient(ellipse at 42% 100%,#593cab20,transparent 52%),#07142c; }
.device-stage img { width:100%; max-width:330px; margin:auto; filter:drop-shadow(0 25px 30px #01071570); }
.device-note>div:last-child { max-width:720px; }
.screen-management-page main>.device-note { padding-block:48px; }
.device-note h2 { font-size:clamp(30px,2.7vw,42px); }
.device-note p:last-child { margin-bottom:0; }
.process-device .remote-tv { max-width:320px; }
.screen-management-page .practical-grid img { position:absolute; inset:0; height:100%; }
.manage-faq { display:grid; grid-template-columns:.78fr 1.22fr; gap:64px; align-items:start; color:#122d54; background:#fff; }
.manage-faq h2 { max-width:430px; font-size:clamp(34px,3vw,46px); }
.manage-faq .section-heading>p:last-child { max-width:330px; font-size:16px; }
.manage-faq .faq-list { min-width:0; border-top:1px solid #d9e5f1; }
.manage-faq .faq-list details { border-bottom:1px solid #d9e5f1; }
.manage-faq .faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 4px; color:#183255; font-size:17px; font-weight:730; line-height:1.35; cursor:pointer; list-style:none; }
.manage-faq summary::-webkit-details-marker { display:none; }
.manage-faq summary i { position:relative; display:block; flex:0 0 21px; width:21px; height:21px; border:1px solid #a7c6e3; border-radius:50%; }
.manage-faq summary i::before,.manage-faq summary i::after { content:""; position:absolute; left:50%; top:50%; width:8px; height:1.5px; border-radius:99px; background:#3975b9; transform:translate(-50%,-50%); }
.manage-faq summary i::after { transform:translate(-50%,-50%) rotate(90deg); }
.manage-faq details[open] { background:linear-gradient(90deg,#eaf7ff85,transparent 72%); box-shadow:inset 3px 0 #4bd7ef; }
.manage-faq details[open] summary { padding-left:17px; color:#173c70; }
.manage-faq details[open] summary i { transform:rotate(45deg); }
.manage-faq .faq-answer { padding:0 38px 20px 21px; }
.manage-faq .faq-answer p { margin:0; font-size:15px; }
.manage-final { position:relative; display:flex; align-items:center; min-height:450px; overflow:hidden; background:#040918; }
.screen-management-page .manage-final>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:.85; }
.manage-final::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#050a18f5 5%,#07142ceb 39%,#07142c18 78%); }
.manage-final>div { position:relative; z-index:1; max-width:600px; }
.manage-final .button { margin-top:12px; }
.screen-management-page footer .footer-links { display:flex; flex-wrap:wrap; gap:20px; }
@media (max-width:1050px) { .screen-management-page{--gutter:40px}.manage-hero{min-height:610px}.friction,.screen-scale,.device-note{gap:42px}.process-grid{gap:20px}.process-grid article{padding-inline:10px}.process-grid article:not(:last-child)::after{left:48px;right:-30px}.manage-faq{gap:45px}.practical-grid article{min-height:280px} }
@media (max-width:850px) { .screen-management-page{--gutter:28px}.screen-management-page .nav nav{display:none}.screen-management-page .nav{justify-content:space-between}.screen-management-page main>section{padding-block:62px}.manage-hero{grid-template-columns:1fr;min-height:0;padding-top:116px!important;padding-bottom:60px!important}.hero-control{width:100%;max-width:650px;min-height:0;aspect-ratio:1.8;margin:auto}.hero-control .hero-dashboard{width:75%}.hero-control .hero-tv{width:72%;right:0}.friction,.screen-scale,.device-note,.manage-faq{grid-template-columns:1fr}.friction figure{max-width:650px;width:100%;margin:auto}.process-grid{grid-template-columns:1fr;gap:26px}.process-grid article{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;padding:0 0 0 58px}.process-grid b{position:absolute;left:0;top:0}.process-grid article:not(:last-child)::after{left:18px;right:auto;top:38px;bottom:-26px;width:1px;height:auto}.process-grid h3,.process-grid p{grid-column:1}.media-stack,.screen-choice,.process-device{grid-column:2;grid-row:1/3;align-self:center;height:165px;margin:0}.process-grid h3{margin-top:5px}.options-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.options-grid article>h3,.options-grid article>p{padding-inline:18px}.practical-grid{grid-template-columns:repeat(3,1fr)}.practical-grid article{min-height:260px}.screens-visual,.device-stage{max-width:650px;width:100%;margin:auto}.manage-faq{gap:25px}.manage-faq h2{max-width:560px} }
@media (max-width:560px) { .screen-management-page{--gutter:22px}.screen-management-page main>section{padding-block:52px}.screen-management-page h1{font-size:clamp(38px,10vw,48px)}.screen-management-page h2{font-size:34px}.screen-management-page p{font-size:16px}.screen-management-page .nav{gap:12px;padding-inline:10px}.screen-management-page .nav .brand img{width:110px}.screen-management-page .nav .button{padding:10px 12px;font-size:12px;white-space:nowrap}.manage-hero{padding-top:108px!important;padding-bottom:44px!important}.hero-control{aspect-ratio:1.3}.hero-control .hero-dashboard{width:82%;left:-2%;bottom:0}.hero-control .hero-tv{width:84%;right:0;top:1%}.hero-control .signal{bottom:1%}.friction{gap:28px}.friction figure{min-height:230px}.process-grid{gap:26px;margin-top:28px}.process-grid article{display:block;padding-left:46px}.process-grid b{width:32px;height:32px;font-size:11px}.process-grid article:not(:last-child)::after{left:15px;top:32px}.media-stack,.screen-choice,.process-device{height:135px;margin:0 0 14px}.process-device .remote-tv{max-width:240px}.process-grid h3{margin-top:0;font-size:21px}.process-grid p{margin:0;font-size:16px}.screen-scale{gap:35px}.tv-cluster{gap:5px;margin-top:36px}.options-grid{grid-template-columns:1fr}.options-grid article:first-child{grid-row:auto}.options-grid article{min-height:240px}.practical-grid{grid-template-columns:1fr;gap:18px}.practical-grid article{min-height:270px}.device-note{gap:18px}.device-stage{max-width:250px}.device-note h2{font-size:30px}.manage-faq .faq-list summary{padding-block:17px;font-size:16px;gap:14px}.manage-faq .faq-answer{padding-right:20px}.manage-final{min-height:480px}.screen-management-page .manage-final>img{object-position:65% center}.manage-final::after{background:linear-gradient(180deg,#050a18ed 5%,#07142ccc 50%,#07142c30 100%)}.manage-final>div{align-self:flex-start;padding-top:24px} }
@media (prefers-reduced-motion:no-preference) { .screen-management-page .hero-control .signal{animation:manage-signal 5s ease-in-out 2}.screen-management-page .button{transition:filter .2s,transform .2s}.screen-management-page .button:hover{filter:brightness(1.1);transform:translateY(-2px)}.practical-grid img{transition:transform .45s ease}.practical-grid article:hover img{transform:scale(1.03)}.manage-faq summary i{transition:transform .2s} }
@keyframes manage-signal {50%{opacity:.4;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce) { .screen-management-page *,.screen-management-page *::before,.screen-management-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }