/* Display Dimmer homepage redesign. Loaded after styles.css. */

:root{
--home-bg:#070808;
--home-band:#0b0d0e;
--home-ink:#f6f8f8;
--home-muted:rgba(246,248,248,.74);
--home-soft:rgba(246,248,248,.56);
--home-line:rgba(255,255,255,.10);
--home-panel:rgba(255,255,255,.045);
--home-panel-strong:rgba(255,255,255,.075);
--home-teal:#8bd7c7;
--home-blue:#1688f8;
--home-amber:#f2c14e;
--topbar-h:76px;
}

html{
scroll-padding-top:96px;
height:auto;
}

body{
background:var(--home-bg);
color:var(--home-ink);
height:auto;
min-height:100%;
overflow-x:hidden;
}

.bg{
background:
linear-gradient(180deg, rgba(16,27,28,.92) 0%, rgba(7,8,8,.96) 34%, #070808 100%),
linear-gradient(135deg, rgba(139,215,199,.10), transparent 34%, rgba(22,136,248,.09));
}

.sticky-stack{
position:fixed;
top:0;
left:0;
right:0;
z-index:60;
pointer-events:none;
}

.sticky-stack .topbar-inner{
pointer-events:auto;
}

.topbar{
padding:0 18px 0;
background:transparent;
border-bottom:0;
backdrop-filter:none;
transition:padding .18s ease;
}

.topbar-inner{
position:relative;
overflow:hidden;
isolation:isolate;
max-width:1240px;
height:64px;
padding:0 16px 0 18px;
border:1px solid rgba(88,167,255,.22);
border-radius:999px;
background:
radial-gradient(circle at 92% 50%, rgba(139,215,199,.16), transparent 22%),
linear-gradient(135deg, rgba(8,25,49,.40), rgba(5,11,21,.40) 54%, rgba(5,24,28,.40));
box-shadow:
0 16px 46px rgba(0,0,0,.20),
0 0 30px rgba(22,136,248,.06),
inset 0 1px 0 rgba(255,255,255,.06);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
transition:
height .18s ease,
max-width .18s ease,
padding .18s ease,
background .18s ease,
box-shadow .18s ease;
}

.topbar-inner::before{
content:"";
position:absolute;
inset:1px;
z-index:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 72%),
radial-gradient(ellipse at 48% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 48%);
opacity:.40;
}

.topbar-inner > *{
position:relative;
z-index:1;
}

.brand{
color:var(--home-ink);
min-width:0;
padding-right:14px;
}

.brand span{
font-weight:700;
white-space:nowrap;
}

.brand::before{
content:"";
flex:0 0 auto;
display:block;
width:32px;
height:32px;
border-radius:9px;
background:url("/assets/display-dimmer-logo-header-64.png") center / 100% 100% no-repeat;
box-shadow:
0 0 0 1px rgba(255,255,255,.14),
0 12px 28px rgba(0,0,0,.36),
0 0 20px rgba(22,136,248,.18);
transition:width .18s ease, height .18s ease, border-radius .18s ease, background-image .18s ease;
}

.brand-logo{
display:none;
}

.nav{
gap:4px;
padding:5px;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:rgba(0,0,0,.16);
}

.nav a{
color:rgba(246,248,248,.70);
padding:8px 12px;
border-radius:999px;
font-weight:650;
transition:background-color .16s ease, color .16s ease, box-shadow .16s ease, padding .18s ease;
}

.nav a:hover{
color:var(--home-ink);
background:rgba(88,167,255,.14);
box-shadow:inset 0 0 0 1px rgba(88,167,255,.20);
text-decoration:none;
}

.nav-store{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:42px;
padding:0 18px 0 15px;
border-radius:999px;
border:1px solid rgba(139,215,199,.30);
color:#fff;
background:
linear-gradient(135deg, rgba(91,183,255,.78), rgba(44,216,217,.66));
box-shadow:
0 14px 30px rgba(22,136,248,.18),
0 0 24px rgba(139,215,199,.12),
inset 0 1px 0 rgba(255,255,255,.20);
font-size:14px;
font-weight:800;
white-space:nowrap;
transition:
min-height .18s ease,
padding .18s ease,
background .16s ease,
box-shadow .16s ease,
transform .16s ease;
}

.nav-ms-logo{
width:20px;
height:20px;
flex:0 0 auto;
filter:drop-shadow(0 0 8px rgba(255,255,255,.16));
transform-origin:center;
transition:width .18s ease, height .18s ease, transform .16s ease-out, filter .16s ease-out;
}

.nav-ms-logo rect{
stroke:rgba(0,18,34,.78);
stroke-width:1.1;
vector-effect:non-scaling-stroke;
}

.nav-ms-logo rect:nth-child(1){ fill:#f25022; }
.nav-ms-logo rect:nth-child(2){ fill:#7fba00; }
.nav-ms-logo rect:nth-child(3){ fill:#00a4ef; }
.nav-ms-logo rect:nth-child(4){ fill:#ffb900; }

.nav-store:hover{
color:#fff;
text-decoration:none;
box-shadow:
0 16px 36px rgba(22,136,248,.24),
0 0 32px rgba(139,215,199,.16),
inset 0 1px 0 rgba(255,255,255,.26);
transform:translateY(-1px);
}

.nav-store:hover .nav-ms-logo,
.nav-store:focus-visible .nav-ms-logo{
transform:rotate(3deg) scale(1.04);
filter:drop-shadow(0 0 7px rgba(255,255,255,.18));
}

.sticky-stack.is-scrolled .topbar{
padding-top:0;
}

.sticky-stack.is-scrolled .topbar-inner{
max-width:1180px;
height:54px;
padding-left:14px;
padding-right:12px;
background:
radial-gradient(circle at 92% 50%, rgba(139,215,199,.14), transparent 22%),
linear-gradient(135deg, rgba(8,25,49,.40), rgba(5,11,21,.40) 54%, rgba(5,24,28,.40));
box-shadow:
0 12px 34px rgba(0,0,0,.18),
0 0 22px rgba(22,136,248,.05),
inset 0 1px 0 rgba(255,255,255,.05);
}

.sticky-stack.is-scrolled .brand-logo{
width:28px;
height:28px;
border-radius:8px;
}
.sticky-stack.is-scrolled .brand::before{
width:28px;
height:28px;
border-radius:8px;
background-image:url("/assets/display-dimmer-logo-header-56.png");
}

.sticky-stack.is-scrolled .nav a{
padding:6px 10px;
}

.sticky-stack.is-scrolled .nav-store{
min-height:36px;
padding-left:15px;
padding-right:15px;
}

.sticky-stack.is-scrolled .nav-ms-logo{
width:18px;
height:18px;
}

.sticky-stack.is-scrolled:has(.topbar-inner:hover) .topbar,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .topbar{
padding-top:0;
}

.sticky-stack.is-scrolled:has(.topbar-inner:hover) .topbar-inner,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .topbar-inner{
max-width:1240px;
height:64px;
padding-left:18px;
padding-right:16px;
background:
radial-gradient(circle at 92% 50%, rgba(139,215,199,.16), transparent 22%),
linear-gradient(135deg, rgba(8,25,49,.40), rgba(5,11,21,.40) 54%, rgba(5,24,28,.40));
box-shadow:
0 16px 46px rgba(0,0,0,.20),
0 0 30px rgba(22,136,248,.06),
inset 0 1px 0 rgba(255,255,255,.06);
}

.sticky-stack.is-scrolled:has(.topbar-inner:hover) .brand-logo,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .brand-logo{
width:34px;
height:34px;
border-radius:10px;
}
.sticky-stack.is-scrolled:has(.topbar-inner:hover) .brand::before,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .brand::before{
width:34px;
height:34px;
border-radius:10px;
background-image:url("/assets/display-dimmer-logo-header-128.png");
}

.sticky-stack.is-scrolled:has(.topbar-inner:hover) .nav a,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .nav a{
padding:8px 12px;
}

.sticky-stack.is-scrolled:has(.topbar-inner:hover) .nav-store,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .nav-store{
min-height:42px;
padding-left:15px;
padding-right:18px;
}

.sticky-stack.is-scrolled:has(.topbar-inner:hover) .nav-ms-logo,
.sticky-stack.is-scrolled:has(.topbar-inner:focus-within) .nav-ms-logo{
width:20px;
height:20px;
}

@media (min-width:721px){
.bg{
display:none;
}

.home-main{
background:var(--home-bg) !important;
}

.hero-modern::before,
.hero-modern::after,
.product-demo-section::before,
.control-path-section::before,
#testimonials.section::before,
#guides.help-support-section::before{
content:none !important;
}

.product-video-frame{
transform:none !important;
backface-visibility:visible !important;
-webkit-backface-visibility:visible !important;
}

.product-demo-main-card .main-window-dark-crop{
filter:none !important;
box-shadow:
-8.5px -8.5px 14.6px rgba(0,0,0,.34),
7px 9px 11px rgba(0,0,0,.30),
2px 4px 6.6px rgba(0,0,0,.20);
}

.proof-icon,
.control-path-icon,
.nav-ms-logo{
filter:none !important;
}

#pro.section,
.control-path-section,
#testimonials.section,
#guides.help-support-section,
.site-footer{
content-visibility:auto;
}

#pro.section{
contain-intrinsic-size:900px;
}

.control-path-section{
contain-intrinsic-size:780px;
}

#testimonials.section{
contain-intrinsic-size:720px;
}

#guides.help-support-section{
contain-intrinsic-size:820px;
}

.site-footer{
contain-intrinsic-size:300px;
}
}

.home-main{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
align-items:center;
background:
linear-gradient(180deg, rgba(7,8,8,.12), rgba(7,8,8,.88) 680px, #070808 100%),
linear-gradient(90deg, rgba(139,215,199,.05), transparent 36%, rgba(22,136,248,.055));
}

.home-main > .section{
width:100%;
max-width:1120px;
padding:76px 22px;
}

.section-head{
max-width:760px;
margin:0 auto 32px;
text-align:center;
}

.section h2{
margin:0 0 12px;
color:var(--home-ink);
font-size:46px;
line-height:1.06;
letter-spacing:0;
}

.section h3{
letter-spacing:0;
}

.section p{
color:var(--home-muted);
font-size:16px;
}

.kicker,
.eyebrow{
color:var(--home-teal);
letter-spacing:0;
}

/* Hero */

.hero-modern{
position:relative;
width:100%;
display:block;
min-height:auto;
padding:118px 22px 62px;
overflow:visible;
isolation:isolate;
background-color:transparent;
background-image:url("/assets/display-dimmer-hero-gradient.png?v=20260518-user-gradient-alpha65");
background-image:image-set(
url("/assets/display-dimmer-hero-gradient.webp?v=20260523-gradient-webp") type("image/webp"),
url("/assets/display-dimmer-hero-gradient.png?v=20260518-user-gradient-alpha65") type("image/png")
);
background-position:center top;
background-size:100% 100%;
background-repeat:no-repeat;
border-bottom:0;
}

.hero-modern::before{
content:"";
position:absolute;
z-index:0;
left:0;
right:0;
bottom:-150px;
height:320px;
pointer-events:none;
background:radial-gradient(ellipse 46% 58% at 50% 0%, rgba(22,136,248,.17), rgba(22,136,248,.07) 38%, transparent 76%);
opacity:.72;
}

.hero-modern::after{
content:"";
position:absolute;
z-index:0;
left:50%;
bottom:-22px;
width:min(1040px, 78vw);
height:140px;
transform:translateX(-50%);
border-radius:0 0 50% 50%;
pointer-events:none;
background:radial-gradient(ellipse at 50% 8%, rgba(61,151,255,.24), rgba(22,136,248,.10) 44%, transparent 72%);
filter:blur(4px);
opacity:.72;
}

.hero-modern-inner{
width:100%;
max-width:1260px;
margin:0 auto;
padding:0;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.hero-modern-copy{
max-width:1120px;
}

.hero-modern .kicker{
display:none;
}

.hero-modern h1{
max-width:1380px;
margin:0 auto 28px;
color:#fff;
font-size:68px;
line-height:1.04;
font-weight:800;
letter-spacing:0;
text-wrap:balance;
text-shadow:0 1px 0 rgba(255,255,255,.07), 0 16px 48px rgba(0,0,0,.36);
}

.hero-modern h1 span{
color:#2f86ff;
text-shadow:0 0 28px rgba(47,134,255,.28);
}

.hero-modern .sub{
max-width:920px;
margin:0 auto;
color:rgba(246,248,248,.76);
font-size:26px;
line-height:1.45;
text-wrap:balance;
}

.hero-modern .seo{
max-width:72ch;
margin:14px auto 0;
color:rgba(246,248,248,.66);
font-size:15px;
}

.hero-modern .cta-row{
justify-content:center;
margin-top:42px;
}

.hero-modern .store-badge,
.featured-store-badge{
min-width:min(760px, 100%);
min-height:150px;
justify-content:center;
gap:32px;
padding:24px 42px;
color:#fff;
border-radius:18px;
border:2px solid rgba(61,151,255,.68);
background:
linear-gradient(135deg, rgba(13,55,98,.66), rgba(3,10,20,.88) 48%, rgba(8,32,60,.74)),
rgba(3,10,20,.86);
box-shadow:
0 0 0 1px rgba(255,255,255,.10) inset,
0 22px 64px rgba(0,0,0,.40),
0 0 34px rgba(22,136,248,.18);
transition:
background .14s ease-out,
border-color .14s ease-out,
box-shadow .14s ease-out;
}

.hero-modern .store-badge:hover,
.featured-store-badge:hover{
filter:none;
transform:none;
border-color:rgba(88,167,255,.78);
background:
linear-gradient(135deg, rgba(16,71,126,.68), rgba(3,10,20,.92) 48%, rgba(10,43,80,.74)),
rgba(3,10,20,.90);
box-shadow:
0 0 0 1px rgba(255,255,255,.14) inset,
0 26px 74px rgba(0,0,0,.46),
0 0 46px rgba(22,136,248,.28);
}

.hero-modern .store-badge{
background:
linear-gradient(135deg, rgba(13,55,98,.56), rgba(3,10,20,.88) 48%, rgba(8,32,60,.62)),
rgba(3,10,20,.86);
box-shadow:
0 0 0 1px rgba(255,255,255,.10) inset,
0 22px 64px rgba(0,0,0,.40),
0 0 26px rgba(22,136,248,.14);
}

.hero-modern .store-badge:hover{
background:
linear-gradient(135deg, rgba(16,71,126,.52), rgba(3,10,20,.92) 48%, rgba(10,43,80,.56)),
rgba(3,10,20,.90);
box-shadow:
0 0 0 1px rgba(255,255,255,.14) inset,
0 26px 74px rgba(0,0,0,.46),
0 0 34px rgba(22,136,248,.21);
}

.hero-modern .store-badge .ms-mark,
.featured-store-badge .ms-mark{
width:94px;
height:94px;
border-radius:14px;
color:#fff;
border:1px solid rgba(88,167,255,.52);
background:linear-gradient(180deg, rgba(22,136,248,.27), rgba(22,136,248,.057));
box-shadow:0 0 22px rgba(22,136,248,.31), inset 0 1px 0 rgba(255,255,255,.16);
transition:box-shadow .16s ease-out, transform .16s ease-out, border-color .16s ease-out;
}

.hero-modern .store-badge .ms-mark{
background:linear-gradient(180deg, rgba(22,136,248,.20), rgba(22,136,248,.048));
box-shadow:0 0 16px rgba(22,136,248,.25), inset 0 1px 0 rgba(255,255,255,.16);
}

.hero-modern .store-badge .ms-logo,
.featured-store-badge .ms-logo{
width:48px;
height:48px;
transform-origin:center;
transition:transform .16s ease-out, filter .16s ease-out;
}

.hero-modern .store-badge:hover .ms-mark,
.featured-store-badge:hover .ms-mark{
transform:scale(1.04);
border-color:rgba(126,192,255,.70);
box-shadow:0 0 26px rgba(22,136,248,.43), inset 0 1px 0 rgba(255,255,255,.20);
}

.hero-modern .store-badge:hover .ms-logo,
.featured-store-badge:hover .ms-logo{
transform:rotate(3deg) scale(1.04);
filter:drop-shadow(0 0 7px rgba(255,255,255,.18));
}

.hero-modern .store-badge .ms-logo rect:nth-child(1),
.featured-store-badge .ms-logo rect:nth-child(1){ fill:#f25022; }
.hero-modern .store-badge .ms-logo rect:nth-child(2),
.featured-store-badge .ms-logo rect:nth-child(2){ fill:#7fba00; }
.hero-modern .store-badge .ms-logo rect:nth-child(3),
.featured-store-badge .ms-logo rect:nth-child(3){ fill:#00a4ef; }
.hero-modern .store-badge .ms-logo rect:nth-child(4),
.featured-store-badge .ms-logo rect:nth-child(4){ fill:#ffb900; }

.hero-modern .store-badge .store-text,
.featured-store-badge .store-text{
align-items:flex-start;
gap:8px;
line-height:1.04;
transform-origin:left center;
transition:transform .16s ease-out;
}

.hero-modern .store-badge:hover .store-text,
.hero-modern .store-badge:focus-visible .store-text,
.featured-store-badge:hover .store-text,
.featured-store-badge:focus-visible .store-text{
transform:scale(1.025);
}

.hero-modern .store-badge .small,
.featured-store-badge .small{
color:#fff;
font-size:36px;
font-weight:800;
opacity:1;
text-shadow:0 0 13px rgba(255,255,255,.15), 0 0 28px rgba(88,167,255,.13);
transition:text-shadow .16s ease-out;
}

.hero-modern .store-badge .big,
.featured-store-badge .big{
color:rgba(246,248,248,.72);
font-size:31px;
font-weight:500;
text-shadow:0 0 12px rgba(255,255,255,.10), 0 0 23px rgba(88,167,255,.10);
transition:text-shadow .16s ease-out, color .16s ease-out;
}

.hero-modern .store-badge:hover .small,
.featured-store-badge:hover .small{
text-shadow:0 0 17px rgba(255,255,255,.30), 0 0 38px rgba(88,167,255,.25);
}

.hero-modern .store-badge:hover .big,
.featured-store-badge:hover .big{
color:rgba(246,248,248,.82);
text-shadow:0 0 15px rgba(255,255,255,.21), 0 0 31px rgba(88,167,255,.21);
}

.hero-modern .store-badge .arrow,
.featured-store-badge .arrow{
display:none;
}

.hero-proof{
display:flex;
justify-content:center;
margin-top:34px;
}

.hero-modern .hero-proof{
flex-direction:column;
align-items:center;
gap:10px;
}

.hero-modern .hero-proof .micro{
margin-top:0;
max-width:min(760px, 100%);
text-align:center;
}

.hero-modern .trust-row{
justify-content:center;
flex-wrap:nowrap;
width:min(936px, 100%);
margin-top:0;
padding:13px 28px;
gap:18px;
color:rgba(246,248,248,.84);
border-radius:999px;
border:1px solid rgba(61,151,255,.54);
background:linear-gradient(180deg, rgba(6,24,45,.72), rgba(4,11,20,.70));
box-shadow:0 16px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
font-size:17px;
white-space:nowrap;
}

.hero-modern .trust-row strong{
color:#2f86ff;
}

.hero-modern .trust-sep{
color:rgba(246,248,248,.54);
opacity:1;
}

.hero-rating-link{
color:inherit;
}

.hero-modern .hero-rating-link{
display:inline;
color:inherit;
font-size:inherit;
}

#display-dimmer{ order:1; }
#app-ui{ order:2; }
#pro{ order:3; }
#features{ order:4; }
#testimonials{ order:5; }
#guides{ order:6; }
#faq{ order:7; }
.footer{ order:8; width:100%; }

.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}

/* Feature overview */

#features{
max-width:1320px !important;
padding-top:86px;
}

.control-path-section{
position:relative;
overflow:visible;
isolation:isolate;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
}

.control-path-section::before{
content:"";
position:absolute;
z-index:0;
top:-190px;
bottom:-110px;
left:50%;
width:100vw;
transform:translateX(-50%);
pointer-events:none;
background:
radial-gradient(ellipse 58% 40% at 50% 6%, rgba(22,136,248,.15), rgba(22,136,248,.055) 42%, transparent 78%),
linear-gradient(180deg, rgba(6,18,32,0), rgba(6,18,32,.18) 22%, rgba(6,18,32,.12) 66%, rgba(4,8,14,0));
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.control-path-section > *{
position:relative;
z-index:1;
}

.control-path-badge{
display:inline-flex;
align-items:center;
gap:9px;
margin:0 0 22px 24px;
padding:8px 14px;
border:1px solid rgba(88,167,255,.46);
border-radius:999px;
color:#58a7ff;
background:rgba(22,136,248,.08);
font-size:13px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
}

.control-path-badge svg{
width:20px;
height:20px;
flex:0 0 auto;
fill:none;
stroke:currentColor;
stroke-width:2.1;
stroke-linecap:round;
stroke-linejoin:round;
}
.control-path-head{
max-width:860px;
margin-bottom:26px;
}

.home-main > #features .control-path-head h2{
font-size:46px;
}

.control-path-head h2 span{
color:#3f8cff;
}

.control-path-head p{
max-width:780px;
margin-left:auto;
margin-right:auto;
font-size:18px;
line-height:1.45;
}

.control-path-chips{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin:0 auto 32px;
}

.control-path-chips span{
padding:8px 15px;
border:1px solid rgba(255,255,255,.11);
border-radius:999px;
background:rgba(255,255,255,.045);
color:rgba(246,248,248,.72);
font-size:14px;
}

.control-path-layout{
display:grid;
grid-template-columns:minmax(280px, .82fr) minmax(0, 1.48fr);
gap:24px;
align-items:stretch;
}

.control-path-problem,
.control-path-solution{
border:1px solid rgba(88,167,255,.28);
border-radius:10px;
background:linear-gradient(145deg, rgba(8,28,48,.64), rgba(4,9,15,.86));
}

.control-path-problem{
padding:28px;
}

.control-path-solution{
padding:28px 30px;
background:linear-gradient(145deg, rgba(8,18,31,.56), rgba(4,9,15,.72));
}

.control-path-accent{
display:block;
width:44px;
height:4px;
margin-bottom:26px;
border-radius:999px;
background:linear-gradient(90deg, var(--home-teal), var(--home-blue));
}

.control-path-problem h3{
max-width:330px;
margin:0 0 13px;
color:#fff;
font-size:31px;
line-height:1.04;
}

.control-path-problem p,
.control-path-solution-head p,
.control-path-card p{
color:rgba(246,248,248,.66);
}

.control-path-problem p{
margin:0;
font-size:16px;
line-height:1.48;
}

.control-path-problem ul{
display:grid;
gap:11px;
margin:24px 0 0;
padding:0;
list-style:none;
}

.control-path-problem li{
display:flex;
align-items:center;
gap:11px;
min-height:46px;
padding:10px 13px;
border:1px solid rgba(255,255,255,.10);
border-radius:8px;
background:rgba(255,255,255,.045);
color:rgba(246,248,248,.86);
font-weight:750;
}

.control-path-problem li::before{
content:"";
width:9px;
height:9px;
flex:0 0 auto;
border-radius:999px;
background:var(--home-blue);
box-shadow:0 0 16px rgba(22,136,248,.38);
}

.control-path-solution-head{
margin-bottom:20px;
}

.control-path-solution-head h3{
margin:0 0 6px;
color:#fff;
font-size:29px;
line-height:1.12;
}

.control-path-solution-head p{
margin:0;
font-size:16px;
}

.control-path-card-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}

.control-path-card{
display:grid;
grid-template-columns:52px 1fr;
gap:16px;
min-height:142px;
padding:20px;
border:1px solid rgba(255,255,255,.095);
border-radius:9px;
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.control-path-icon{
width:50px;
height:50px;
padding:8px;
border:1px solid rgba(88,167,255,.42);
border-radius:12px;
background:
radial-gradient(circle at 50% 18%, rgba(88,167,255,.16), transparent 58%),
rgba(22,136,248,.045);
color:#35a0ff;
fill:none;
stroke:currentColor;
stroke-width:2.6;
stroke-linecap:round;
stroke-linejoin:round;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
filter:drop-shadow(0 0 10px rgba(22,136,248,.18));
}

.control-path-icon-round{
border-radius:999px;
}

.control-path-card h4{
margin:0 0 6px;
color:#fff;
font-size:19px;
line-height:1.16;
}

.control-path-card p{
margin:0;
font-size:15px;
line-height:1.45;
}

/* Product video demo section */

.product-demo-section{
position:relative;
max-width:1340px !important;
padding-top:74px;
}

.product-demo-section::before{
content:"";
position:absolute;
z-index:0;
top:-160px;
left:0;
right:0;
height:340px;
pointer-events:none;
background:radial-gradient(ellipse 44% 56% at 50% 0%, rgba(22,136,248,.13), rgba(22,136,248,.05) 38%, transparent 74%);
opacity:.78;
}

.demo-pill{
display:inline-flex;
align-items:center;
gap:10px;
margin-bottom:12px;
padding:9px 16px;
border-radius:999px;
border:1px solid rgba(22,136,248,.34);
color:#58a7ff;
background:rgba(22,136,248,.08);
font-size:13px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}

.demo-pill span{
position:relative;
display:grid;
place-items:center;
width:18px;
height:18px;
flex:0 0 auto;
border-radius:50%;
border:2px solid currentColor;
box-shadow:0 0 20px rgba(22,136,248,.40);
}

.demo-pill span::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:0;
height:0;
transform:translate(-36%, -50%);
border-top:4px solid transparent;
border-bottom:4px solid transparent;
border-left:6px solid currentColor;
}

.product-demo-shell{
--product-demo-cluster-shift:0px;
--main-window-scroll-shift:35px;
position:relative;
z-index:1;
display:grid;
grid-template-columns:420px 773px;
grid-template-areas:
"intro settings"
"aside settings"
"main settings"
"proof proof"
"note note";
column-gap:24px;
row-gap:18px;
min-height:0;
padding:0;
align-items:start;
justify-content:center;
isolation:isolate;
overflow:visible;
background:none;
}

.product-demo-shell::before,
.product-demo-shell::after{
content:"";
position:absolute;
z-index:0;
pointer-events:none;
border-radius:999px;
}

.product-demo-shell::before{
top:-132px;
left:446px;
width:910px;
height:330px;
background:radial-gradient(ellipse at center, rgba(13,34,56,.44) 0%, rgba(10,23,37,.28) 46%, rgba(7,8,8,0) 78%);
filter:blur(42px);
opacity:.92;
}

.product-demo-shell::after{
top:446px;
left:96px;
width:470px;
height:250px;
background:radial-gradient(ellipse at center, rgba(22,136,248,.10) 0%, rgba(10,22,35,.08) 52%, rgba(7,8,8,0) 82%);
filter:blur(30px);
opacity:.88;
}

.product-demo-copy{
position:relative;
z-index:3;
grid-area:intro;
width:auto;
max-width:420px;
padding-top:18px;
}

.product-demo-copy h2{
margin:10px 0 16px;
color:#fff;
font-size:58px;
line-height:.96;
white-space:normal;
}

.product-demo-copy h2 span{
display:block;
margin-top:4px;
color:#3f8cff;
}

.product-demo-copy p{
max-width:41ch;
margin:0;
color:rgba(246,248,248,.78);
font-size:18px;
line-height:1.62;
}

.product-demo-settings-window{
position:relative;
z-index: 4;
grid-area:settings;
width:773px;
max-width:none;
justify-self:start;
margin:96px 0 0 var(--product-demo-cluster-shift);
border-radius:14px;
box-shadow:0 30px 76px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.20);
}

.product-demo-settings-copy{
position:relative;
z-index:3;
grid-area:aside;
width:100%;
max-width:380px;
margin-top:14px;
color:#fff;
}

.product-demo-settings-copy span{
display:block;
margin-bottom:16px;
color:#58a7ff;
font-size:13px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}

.product-demo-settings-copy span::after{
content:"";
display:block;
width:34px;
height:1px;
margin-top:16px;
background:rgba(246,248,248,.55);
}

.product-demo-settings-copy h3{
margin:0 0 10px;
font-size:24px;
line-height:1.08;
}

.product-demo-settings-copy p{
margin:0;
color:rgba(246,248,248,.72);
font-size:16px;
line-height:1.62;
}

.product-demo-main-card{
position:relative;
z-index:auto;
grid-area:main;
justify-self:start;
width:520px;
min-height:238px;
margin-top:14px;
padding:30px 26px 28px 34px;
border-radius:18px;
border:1px solid rgba(88,167,255,.42);
background:linear-gradient(145deg, rgba(14,43,71,.84), rgba(5,14,24,.96) 62%);
box-shadow:0 24px 58px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
transform:none;
}

.product-demo-main-card::after{
content:"";
position:absolute;
z-index: 6;
top: -17px;
right:calc(-107px - var(--main-window-scroll-shift));
width:359px;
aspect-ratio:426 / 274;
border-radius:22px;
background:rgba(0,0,0,.17);
box-shadow:
0 0 22px rgba(0,0,0,.27),
5px 6px 13.2px rgba(0,0,0,.22),
2px 3px 6.6px rgba(0,0,0,.20);
filter:blur(6.6px);
transform:translate(2px, 3px);
transition:background .14s ease-out, box-shadow .14s ease-out, filter .14s ease-out;
pointer-events:none;
}

.product-demo-main-card:has(.main-window-dark-crop:hover)::after{
background:rgba(0,0,0,.26);
box-shadow:
0 0 30px rgba(0,0,0,.41),
6px 8px 17px rgba(0,0,0,.34),
3px 5px 9px rgba(0,0,0,.29);
filter:blur(7.2px);
}

.product-demo-main-card .main-window-dark-crop{
position:absolute;
z-index: 7;
right:calc(-107px - var(--main-window-scroll-shift));
top: -17px;
width:359px;
transform:translateZ(0);
will-change:right;
}

.window-badge{
position:relative;
z-index: 2;
display:block;
margin:0 0 18px;
color:#58a7ff;
font-size:13px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}

.window-badge span{
display:none;
}

.window-badge::after{
content:"";
display:block;
width:34px;
height:1px;
margin-top:12px;
background:rgba(246,248,248,.55);
}

.demo-card-copy{
position:relative;
z-index: 2;
max-width:240px;
}

.demo-card-copy h3{
margin:0 0 10px;
color:#fff;
font-size:21px;
line-height:1.1;
}

.demo-card-copy p{
margin:0;
color:rgba(246,248,248,.72);
font-size:14px;
line-height:1.52;
}

.product-video-frame{
overflow:hidden;
background:#191b1f;
image-rendering:auto;
contain:paint;
isolation:isolate;
transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

.product-video-frame.product-demo-settings-window{
transform:translateZ(0);
will-change:margin-left;
}

.main-window-dark-crop{
aspect-ratio:426 / 274;
border-radius:22px;
background:
url("/assets/display-dimmer-mainwindow-dark-20260511-first-frame.png?v=20260525-first-frame-full") center / cover no-repeat,
#191b1f;
clip-path:inset(1px 3px 1px 2px round 22px);
opacity:.82;
box-shadow:none;
filter:
drop-shadow(-8.5px -8.5px 14.6px rgba(0,0,0,.24))
drop-shadow(7px 9px 11px rgba(0,0,0,.21))
drop-shadow(2px 4px 6.6px rgba(0,0,0,.14));
transition:opacity .14s ease-out, filter .14s ease-out;
}

.main-window-dark-crop:hover{
opacity:1;
filter:
drop-shadow(-9.5px -9.5px 17px rgba(0,0,0,.37))
drop-shadow(8px 11px 15px rgba(0,0,0,.37))
drop-shadow(2px 5px 8px rgba(0,0,0,.26));
}

.settings-window-dark-crop{
aspect-ratio:773 / 650;
border-radius:13px;
background:
url("/assets/display-dimmer-settingswindow-dark-20260511-212004-first-frame.png?v=20260525-settings-icon-90") center / cover no-repeat,
linear-gradient(180deg, rgba(45,45,48,.98), rgba(33,34,38,.98));
clip-path:inset(0 2px 2px 2px round 12px);
}
.main-window-dark-crop::after,
.settings-window-dark-crop::after{
content:"";
position:absolute;
z-index:4;
display:block;
aspect-ratio:1;
background:url("/assets/display-dimmer-logo-header-256.png") center / contain no-repeat;
border-radius:7px;
pointer-events:none;
}

.main-window-dark-crop::after{
left:calc(3.02% + 1px);
top:calc(2.65% + 1px);
width:7.23%;
}

.settings-window-dark-crop::after{
left:calc(1.55% + 1px);
top:1.31%;
width:3.55%;
}

.main-window-dark-video,
.settings-window-dark-video{
display:block;
max-width:none;
opacity:0;
transform-origin:top left;
pointer-events:none;
transition:opacity .18s ease-out;
will-change:transform, opacity;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}

.product-video-frame.is-video-ready .main-window-dark-video,
.product-video-frame.is-video-ready .settings-window-dark-video{
opacity:1;
}

.main-window-dark-video::-webkit-media-controls-start-playback-button,
.settings-window-dark-video::-webkit-media-controls-start-playback-button{
display:none !important;
-webkit-appearance:none;
}

.main-window-dark-video{
width:600.938967%;
height:525.547445%;
transform:translate3d(-41.328125%, -38.333333%, 0);
}

.settings-window-dark-video{
width:331.177232%;
height:221.538462%;
transform:translate3d(-35.429688%, -26.319444%, 0);
background:#2d2d30;
}

.product-proof-strip{
position:relative;
z-index:5;
grid-area:proof;
justify-self:start;
width:100%;
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
margin:6px 0 0 var(--product-demo-cluster-shift);
border-radius:8px;
border:1px solid rgba(88,167,255,.28);
background:linear-gradient(180deg, rgba(7,20,35,.82), rgba(4,9,17,.86));
box-shadow:0 18px 48px rgba(0,0,0,.18);
}

.product-proof-strip div{
display:grid;
grid-template-columns:68px 1fr;
column-gap:18px;
align-items:center;
min-height:104px;
padding:20px 24px;
border-right:1px solid rgba(255,255,255,.10);
}

.product-proof-strip div:last-child{
border-right:0;
}

.product-proof-strip div > .proof-icon{
grid-row:1 / 3;
display:block;
width:66px;
height:66px;
object-fit:contain;
filter:drop-shadow(0 0 16px rgba(61,151,255,.34));
}

.product-proof-strip strong{
color:#fff;
font-size:15px;
}

.product-proof-strip small{
color:rgba(246,248,248,.58);
font-size:14px;
line-height:1.35;
}

.product-demo-note{
position:relative;
z-index:5;
grid-area:note;
justify-self:start;
width:100%;
margin:-8px 0 0 var(--product-demo-cluster-shift);
color:rgba(246,248,248,.46);
text-align:center;
font-size:13px;
}

/* Guides and conversion */

#guides{
max-width:980px;
}

.guide-list{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.guide-row{
min-height:118px;
align-items:center;
border-radius:8px;
border-color:rgba(255,255,255,.10);
background:rgba(255,255,255,.045);
}

.guide-row:hover{
background:rgba(255,255,255,.07);
}

#guides.help-support-section{
position:relative;
isolation:isolate;
max-width:1240px;
padding-top:84px;
padding-bottom:56px;
scroll-margin-top:106px;
}

#guides.help-support-section::before{
content:"";
position:absolute;
z-index:-1;
top:-120px;
bottom:-120px;
left:50%;
width:100vw;
transform:translateX(-50%);
pointer-events:none;
background:
radial-gradient(ellipse 38% 28% at 50% 12%, rgba(22,136,248,.14), rgba(22,136,248,.045) 48%, transparent 78%),
linear-gradient(180deg, rgba(6,18,32,0), rgba(6,18,32,.13) 30%, rgba(4,8,14,0) 82%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.help-support-shell{
position:relative;
overflow:hidden;
padding:34px 48px 40px;
border-radius:10px;
border:1px solid rgba(88,167,255,.28);
background:linear-gradient(145deg, rgba(8,28,48,.30), rgba(4,9,15,.86));
box-shadow:
0 28px 78px rgba(0,0,0,.24),
inset 0 1px 0 rgba(255,255,255,.07);
}

.help-support-shell::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%);
opacity:.37;
}

.help-support-badge,
.help-column-title,
.help-support-head,
.help-support-intro,
.help-support-layout{
position:relative;
z-index:1;
}

.help-support-badge{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 24px;
padding:8px 15px;
border-radius:999px;
border:1px solid rgba(88,167,255,.44);
color:#58a7ff;
background:rgba(5,17,31,.58);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
font-size:13px;
font-weight:900;
letter-spacing:.11em;
text-transform:uppercase;
}

.help-support-badge svg,
.help-column-title svg,
.help-guide-icon svg{
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}

.help-support-badge svg{
width:20px;
height:20px;
}

.help-support-head{
max-width:850px;
margin:0 auto 44px;
text-align:center;
}

.help-support-head h2{
margin:0 0 14px;
font-size:48px;
line-height:1.08;
}

.help-support-head h2 span{
color:#3f8cff;
}

.help-support-head p{
max-width:760px;
margin:0 auto;
color:rgba(246,248,248,.72);
font-size:18px;
}

.help-support-topics{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:24px;
}

.help-support-topics span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 16px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
color:rgba(246,248,248,.76);
background:rgba(255,255,255,.045);
font-size:14px;
}

.help-support-layout{
display:grid;
grid-template-columns:minmax(0, .94fr) minmax(0, 1.06fr);
gap:30px;
align-items:start;
}

.help-column-title{
display:flex;
align-items:center;
gap:13px;
margin:0 0 16px;
color:#74b7ff;
}

.help-column-title svg{
width:29px;
height:29px;
flex:0 0 auto;
stroke-width:2.05;
}

.help-column-title h3{
margin:0;
color:#fff;
font-size:28px;
line-height:1.15;
}

.help-guide-list,
.help-faq-list{
display:grid;
gap:10px;
}

.help-guide-row{
display:grid;
grid-template-columns:52px minmax(0, 1fr) auto;
align-items:center;
gap:18px;
min-height:78px;
padding:14px 18px;
border-radius:8px;
border:1px solid rgba(255,255,255,.11);
background:
linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
rgba(3,10,19,.60);
color:inherit;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
transition:border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.help-guide-row:hover{
text-decoration:none;
transform:translateY(-1px);
border-color:rgba(88,167,255,.56);
background:
radial-gradient(circle at 0 50%, rgba(22,136,248,.13), transparent 46%),
linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
box-shadow:0 14px 36px rgba(0,0,0,.18), 0 0 22px rgba(22,136,248,.09), inset 0 1px 0 rgba(255,255,255,.06);
}

.help-guide-icon{
display:grid;
place-items:center;
width:44px;
height:44px;
border-radius:8px;
color:#39a5ff;
border:1px solid rgba(88,167,255,.27);
background:
radial-gradient(circle at 50% 0%, rgba(88,167,255,.20), transparent 70%),
rgba(7,24,43,.72);
}

.help-guide-icon svg{
width:26px;
height:26px;
stroke-width:2;
}

.help-guide-copy strong{
display:block;
color:#fff;
font-size:17px;
line-height:1.24;
}

.help-guide-copy small{
display:block;
margin-top:6px;
color:rgba(246,248,248,.68);
font-size:15px;
line-height:1.42;
}

.help-guide-arrow{
color:#58a7ff;
font-size:28px;
line-height:1;
transition:transform .16s ease;
}

.help-guide-row:hover .help-guide-arrow{
transform:translateX(3px);
}

.help-all-guides{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:18px;
color:#58a7ff;
font-weight:800;
font-size:16px;
}

.help-all-guides:hover{
color:#7dc0ff;
text-decoration:none;
}

#faq{
scroll-margin-top:106px;
}

.help-support-section .help-faq-list details{
position:relative;
overflow:hidden;
margin:0;
padding:0 !important;
border-radius:8px;
border:1px solid rgba(255,255,255,.10);
background:
linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.022)),
rgba(3,10,19,.62) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.help-support-section .help-faq-list details[open]{
border-color:rgba(58,147,255,.82);
background:
radial-gradient(circle at 0 0, rgba(22,136,248,.16), transparent 42%),
linear-gradient(145deg, rgba(6,25,46,.82), rgba(5,13,24,.82)) !important;
box-shadow:0 16px 38px rgba(0,0,0,.18), 0 0 22px rgba(22,136,248,.08), inset 0 1px 0 rgba(255,255,255,.07);
}

.help-support-section .help-faq-list details:not([open]):hover{
border-color:rgba(88,167,255,.42);
background:
radial-gradient(circle at 0 50%, rgba(22,136,248,.09), transparent 45%),
linear-gradient(135deg, rgba(255,255,255,.060), rgba(255,255,255,.028)),
rgba(3,10,19,.66) !important;
box-shadow:0 10px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05);
}

.help-support-section .help-faq-list details:not([open]):hover summary::after{
border-color:rgba(88,167,255,.80);
background:
linear-gradient(#7dc0ff, #7dc0ff) center / 12px 2px no-repeat,
linear-gradient(#7dc0ff, #7dc0ff) center / 2px 12px no-repeat,
rgba(8,27,49,.74);
}

.help-support-section .help-faq-list summary{
position:relative;
display:flex;
align-items:center;
min-height:60px;
padding:17px 58px 17px 20px;
color:#fff;
font-size:17px;
font-weight:850;
line-height:1.3;
cursor:pointer;
list-style:none;
}

.help-support-section .help-faq-list summary::-webkit-details-marker{
display:none;
}

.help-support-section .help-faq-list summary::after{
content:"";
position:absolute;
top:50%;
right:18px;
width:26px;
height:26px;
margin-top:-13px;
border-radius:50%;
border:1px solid rgba(88,167,255,.55);
background:
linear-gradient(#58a7ff, #58a7ff) center / 12px 2px no-repeat,
linear-gradient(#58a7ff, #58a7ff) center / 2px 12px no-repeat,
rgba(5,17,31,.58);
}

.help-support-section .help-faq-list details[open] summary::after{
background:
linear-gradient(#58a7ff, #58a7ff) center / 12px 2px no-repeat,
rgba(5,17,31,.58);
}

.help-support-section .help-faq-list .answer{
margin:0;
padding:0 58px 22px 20px;
color:rgba(246,248,248,.72);
font-size:16px;
line-height:1.55;
}

#pro .card.wide,
#pro .cta-card{
max-width:880px;
margin-left:auto;
margin-right:auto;
}

#pro .pro-heading-vs{
color:rgba(246,248,248,.72);
}

#pro .pro-heading-accent{
color:#3f8cff;
}

@media (min-width:1120px){
#pro .section-head{
max-width:1040px;
}

#pro .section-head p{
white-space:nowrap;
}
}

#pro .card.wide{
border-color:rgba(139,215,199,.18);
background:linear-gradient(180deg, rgba(139,215,199,.09), rgba(255,255,255,.035));
}

.plan-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:24px;
max-width:1040px;
margin:0 auto 24px;
}

.plan-card{
min-height:400px;
padding:28px 30px;
border-radius:8px;
border:1px solid rgba(88,167,255,.26);
background:
linear-gradient(145deg, rgba(5,16,29,.82), rgba(4,9,17,.94)),
rgba(255,255,255,.035);
box-shadow:0 26px 68px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
}

.plan-card-pro{
border-color:rgba(22,136,248,.76);
background:
radial-gradient(circle at 72% 14%, rgba(22,136,248,.16), transparent 34%),
linear-gradient(145deg, rgba(5,18,34,.92), rgba(3,9,18,.96));
box-shadow:0 26px 68px rgba(0,0,0,.26), 0 0 24px rgba(22,136,248,.13), inset 0 1px 0 rgba(255,255,255,.08);
}

.plan-card-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
padding-bottom:22px;
border-bottom:1px solid rgba(255,255,255,.12);
}

.plan-card h3{
margin:0 0 6px;
color:#fff;
font-size:34px;
line-height:1.08;
}

.plan-card-head p{
margin:0;
color:rgba(246,248,248,.68);
font-size:17px;
}

.plan-pill{
flex:0 0 auto;
margin-top:2px;
padding:8px 13px;
border-radius:8px;
border:1px solid rgba(255,255,255,.16);
color:rgba(246,248,248,.82);
background:rgba(255,255,255,.055);
font-size:14px;
font-weight:700;
}

.plan-pill-pro{
border-color:rgba(88,167,255,.34);
color:#fff;
background:linear-gradient(180deg, rgba(47,134,255,.96), rgba(22,98,210,.95));
}

.plan-price{
flex:0 0 auto;
min-width:144px;
margin-top:0;
padding:10px 13px 11px;
border-radius:10px;
border:1px solid rgba(88,167,255,.36);
background:
linear-gradient(180deg, rgba(47,134,255,.20), rgba(22,98,210,.12)),
rgba(255,255,255,.045);
box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
text-align:right;
text-decoration:none;
cursor:pointer;
transition:
background .22s ease,
border-color .22s ease,
transform .22s ease;
}

.plan-price:hover,
.plan-price:focus-visible{
background:
linear-gradient(180deg, rgba(47,134,255,.28), rgba(22,98,210,.17)),
rgba(255,255,255,.065);
border-color:rgba(88,167,255,.52);
text-decoration:none;
}

.plan-price:hover{
transform:translateY(-1px);
}

.plan-price:focus-visible{
outline:2px solid rgba(88,167,255,.60);
outline-offset:3px;
}

.plan-price span{
display:block;
color:#79b9ff;
font-size:11px;
font-weight:850;
letter-spacing:.09em;
line-height:1.2;
text-transform:uppercase;
}

.plan-price strong{
display:inline-block;
margin-top:3px;
color:#fff;
font-size:25px;
line-height:1;
}

.plan-price small{
margin-left:4px;
color:rgba(246,248,248,.58);
font-size:13px;
font-weight:800;
}

.plan-list{
display:grid;
gap:16px;
margin:24px 0 0;
padding:0;
list-style:none;
}

.plan-list li{
display:grid;
grid-template-columns:25px 1fr;
gap:13px;
align-items:center;
color:rgba(246,248,248,.90);
font-size:19px;
line-height:1.25;
}

.plan-list li span{
position:relative;
display:block;
width:25px;
height:25px;
border-radius:50%;
border:2px solid #1688f8;
box-shadow:0 0 12px rgba(22,136,248,.22);
}

.plan-list li span::after{
content:"";
position:absolute;
left:6px;
top:4px;
width:8px;
height:13px;
border:solid #1688f8;
border-width:0 3px 3px 0;
transform:rotate(45deg);
}

.plan-best{
display:flex;
align-items:center;
gap:10px;
margin:22px 0 0;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.12);
color:rgba(246,248,248,.66);
font-size:15px;
}

.plan-best::before{
content:"";
width:19px;
height:19px;
background:#1688f8;
clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
box-shadow:0 0 16px rgba(22,136,248,.32);
}

.plan-price-note{
margin:14px 0 0;
color:rgba(246,248,248,.52);
font-size:14px;
line-height:1.45;
}

.plan-buy-link{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:12px;
min-width:166px;
min-height:42px;
padding:0 20px;
border:1px solid rgba(126,192,255,.42);
border-radius:999px;
color:#fff;
background:linear-gradient(180deg, rgba(64,151,255,.98), rgba(19,111,232,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
0 10px 20px rgba(0,0,0,.18);
font-size:15px;
font-weight:850;
text-decoration:none;
transition:
background .18s ease,
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}

.plan-buy-link::after{
content:"\2192";
margin-left:8px;
color:rgba(255,255,255,.86);
}

.plan-buy-link:hover,
.plan-buy-link:focus-visible{
color:#fff;
text-decoration:none;
background:linear-gradient(180deg, rgba(82,166,255,.98), rgba(29,123,244,.96));
border-color:rgba(165,213,255,.58);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 12px 22px rgba(0,0,0,.20);
}

.plan-buy-link:hover{
transform:translateY(-1px);
}

.plan-buy-link:focus-visible{
outline:2px solid rgba(126,192,255,.65);
outline-offset:3px;
}

#pro .cta-card{
position:relative;
isolation:isolate;
flex-direction:column;
align-items:center;
gap:14px;
max-width:760px;
margin-top:26px;
padding:0;
border:0;
background:
radial-gradient(ellipse at 50% 58%, rgba(22,136,248,.13), transparent 62%);
box-shadow:none;
}

#pro .cta-card::before{
content:none;
}

#pro .cta-card:has(.featured-store-badge:hover)::before{
opacity:0;
}

#pro .cta-card > div{
text-align:center;
}

#pro .featured-store-badge{
position:relative;
z-index:1;
width:min(500px, 100%);
min-width:0;
min-height:96px;
gap:18px;
padding:16px 24px;
border-radius:14px;
border-width:2px;
box-shadow:
0 0 0 1px rgba(255,255,255,.10) inset,
0 16px 42px rgba(0,0,0,.32),
0 0 24px rgba(22,136,248,.14);
transition:
background .14s ease-out,
border-color .14s ease-out,
box-shadow .14s ease-out;
transition-delay:0s;
}

#pro .featured-store-badge:hover{
background:
linear-gradient(135deg, rgba(16,71,126,.68), rgba(3,10,20,.92) 48%, rgba(10,43,80,.74)),
rgba(3,10,20,.90);
box-shadow:
0 0 0 1px rgba(255,255,255,.15) inset,
0 16px 34px rgba(0,0,0,.34),
0 0 24px rgba(22,136,248,.14);
transition:
background .14s ease-out,
border-color .14s ease-out,
box-shadow .14s ease-out;
}

#pro .featured-store-badge .ms-mark{
width:62px;
height:62px;
border-radius:12px;
}

#pro .featured-store-badge .ms-logo{
width:32px;
height:32px;
}

#pro .featured-store-badge .small{
font-size:24px;
}

#pro .featured-store-badge .big{
font-size:21px;
}

/* Reviews and FAQ */

#testimonials.section{
position:relative;
isolation:isolate;
max-width:1260px;
padding-top:82px;
padding-bottom:88px;
}

#testimonials.section::before{
content:"";
position:absolute;
z-index:-1;
top:-120px;
bottom:-120px;
left:50%;
width:100vw;
transform:translateX(-50%);
pointer-events:none;
background:
radial-gradient(ellipse 38% 28% at 50% 12%, rgba(22,136,248,.14), rgba(22,136,248,.045) 48%, transparent 78%),
linear-gradient(180deg, rgba(6,18,32,0), rgba(6,18,32,.13) 30%, rgba(4,8,14,0) 82%);
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

.reviews-head{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
gap:28px;
align-items:end;
margin-bottom:24px;
}

.reviews-eyebrow{
display:inline-flex;
align-items:center;
gap:10px;
width:max-content;
margin-bottom:18px;
padding:8px 14px;
border:1px solid rgba(88,167,255,.42);
border-radius:999px;
color:#58a7ff;
background:rgba(22,136,248,.08);
font-size:13px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
}

.reviews-eyebrow svg{
width:15px;
height:15px;
color:#48d7c8;
}

.reviews-head h2{
max-width:820px;
margin:0 0 12px;
color:#fff;
font-size:56px;
line-height:1.04;
}

.reviews-head h2 span{
color:#3f8cff;
}

.reviews-head p{
max-width:800px;
margin:0;
color:rgba(246,248,248,.68);
font-size:19px;
line-height:1.48;
}

.reviews-proof-line{
display:flex;
flex-wrap:wrap;
gap:9px 12px;
margin:17px 0 0;
color:rgba(246,248,248,.52);
font-size:14px;
font-weight:700;
}

.reviews-proof-line strong{
color:rgba(246,248,248,.78);
font-weight:850;
}

.reviews-rating-pill{
display:inline-flex;
align-items:center;
gap:13px;
min-height:56px;
padding:13px 18px;
border:1px solid rgba(88,167,255,.34);
border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.030));
box-shadow:0 18px 44px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
white-space:nowrap;
transform:translate(-26px, 8px);
}

.reviews-rating-pill .stars{
font-size:28px;
}

.reviews-rating-pill strong{
color:#fff;
font-size:23px;
line-height:1;
}

.reviews-rating-pill span:last-child{
color:rgba(246,248,248,.68);
font-size:15px;
font-weight:750;
}

.reviews-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
align-items:stretch;
gap:16px;
}

.reviews-card{
min-height:258px;
display:flex;
flex-direction:column;
padding:25px 26px 24px;
border:1px solid rgba(88,167,255,.162);
border-radius:16px;
background:
radial-gradient(circle at 18% 0%, rgba(22,136,248,.077), transparent 50%),
linear-gradient(155deg, rgba(255,255,255,.045), rgba(255,255,255,.018) 48%, rgba(5,13,22,.648)),
linear-gradient(180deg, rgba(7,21,36,.612), rgba(4,10,17,.774));
box-shadow:
0 22px 54px rgba(0,0,0,.20),
inset 0 1px 0 rgba(255,255,255,.055);
}

.reviews-card-featured{
transform:none;
border-color:rgba(88,167,255,.252);
background:
radial-gradient(circle at 18% 0%, rgba(22,136,248,.117), transparent 52%),
linear-gradient(155deg, rgba(255,255,255,.054), rgba(255,255,255,.022) 48%, rgba(5,13,22,.666)),
linear-gradient(180deg, rgba(8,25,44,.684), rgba(4,10,17,.792));
box-shadow:
0 24px 60px rgba(0,0,0,.22),
0 0 20px rgba(22,136,248,.06),
inset 0 1px 0 rgba(255,255,255,.065);
}

.reviews-card-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:24px;
}

.reviews-card-top .stars{
font-size:19px;
}

.reviews-card .reviews-quote{
margin:0;
color:#fff;
font-size:21px;
line-height:1.46;
font-weight:500;
}

.reviews-card .reviews-quote::before,
.reviews-card .reviews-quote::after{
color:#3f8cff;
font-weight:760;
}

.reviews-card .reviews-quote::before{ content:"\201C"; }
.reviews-card .reviews-quote::after{ content:"\201D"; }

.reviews-footer{
display:flex;
align-items:center;
gap:9px;
margin-top:auto;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.060);
color:rgba(246,248,248,.48);
font-size:14px;
}

.reviews-footer strong{
color:#fff;
font-size:15px;
}

.testimonial-card{
min-width:360px;
max-width:360px;
}

.testimonial-inner{
min-height:230px;
border-radius:8px;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
}

.stars,
.review-modal-stars{
color:var(--home-amber);
}

.testimonials-strip[hidden],
#testimonials .rating-line{
display:none !important;
}

/* Guide pages */

.guide-main{
min-height:100vh;
overflow:hidden;
}

.guide-hero{
position:relative;
isolation:isolate;
padding:150px 22px 44px;
}

.guide-hero::before{
content:"";
position:absolute;
z-index:-1;
top:-130px;
left:50%;
width:100vw;
height:650px;
transform:translateX(-50%);
pointer-events:none;
background:
radial-gradient(ellipse 55% 38% at 44% 24%, rgba(22,136,248,.16), rgba(22,136,248,.055) 48%, transparent 78%),
linear-gradient(180deg, rgba(8,25,49,.42), rgba(7,8,8,0) 80%);
-webkit-mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
mask-image:linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
}

.guide-hero-inner{
display:grid;
grid-template-columns:minmax(0, .82fr) minmax(500px, .82fr);
gap:48px;
align-items:center;
}

.guide-copy{
max-width:760px;
}

.guide-copy h1{
margin:26px 0 18px;
color:#fff;
font-size:64px;
line-height:1.02;
letter-spacing:0;
text-wrap:balance;
}

.guide-copy h1 span{
display:block;
font-size:.95em;
white-space:nowrap;
color:#3f8cff;
text-shadow:0 0 26px rgba(47,134,255,.20);
}

.brightness-guide .guide-copy h1{
font-size:58px;
text-wrap:normal;
}

.troubleshooting-guide .guide-copy h1{
font-size:56px;
text-wrap:normal;
}

.troubleshooting-guide .guide-copy h1 span{
white-space:normal;
}

@media (max-width: 1060px){
.brightness-guide .guide-copy h1{
font-size:52px;
}

.troubleshooting-guide .guide-copy h1{
font-size:52px;
}
}

@media (max-width: 720px){
.brightness-guide .guide-copy h1{
font-size:38px;
}

.troubleshooting-guide .guide-copy h1{
font-size:38px;
}
}

.guide-copy p{
max-width:740px;
margin:0;
color:rgba(246,248,248,.74);
font-size:21px;
line-height:1.55;
}

.guide-meta-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}

.guide-meta-row span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 14px;
border:1px solid rgba(88,167,255,.24);
border-radius:999px;
color:rgba(246,248,248,.70);
background:rgba(255,255,255,.045);
font-size:14px;
font-weight:650;
}

.guide-cta-card{
position:relative;
border:1px solid rgba(88,167,255,.30);
border-radius:18px;
padding:25px;
background:
linear-gradient(135deg, rgba(22,136,248,.13), rgba(255,255,255,.030)),
rgba(5,12,20,.76);
box-shadow:
0 28px 70px rgba(0,0,0,.30),
0 0 36px rgba(22,136,248,.12),
inset 0 1px 0 rgba(255,255,255,.08);
}

.guide-cta-card h2{
margin:0 0 12px;
color:#fff;
font-size:30px;
line-height:1.12;
letter-spacing:0;
}

.guide-cta-card p{
margin:0;
color:rgba(246,248,248,.66);
font-size:16px;
line-height:1.55;
}

.guide-store-badge{
width:100%;
min-width:0;
min-height:102px;
margin-top:18px;
padding:18px 20px;
gap:16px;
border-radius:16px;
}

.guide-store-badge .ms-mark{
width:62px;
height:62px;
border-radius:12px;
}

.guide-store-badge .ms-logo{
width:32px;
height:32px;
}

.guide-store-badge .small{
font-size:28px;
}

.guide-store-badge .big{
font-size:19px;
}

.guide-cta-note{
margin-top:14px !important;
color:rgba(246,248,248,.54) !important;
font-size:14px !important;
}

.guide-summary-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
padding-bottom:28px;
}

.guide-summary-grid article{
min-height:172px;
border:1px solid rgba(88,167,255,.18);
border-radius:16px;
padding:24px;
background:
radial-gradient(circle at 18% 0%, rgba(22,136,248,.075), transparent 50%),
linear-gradient(155deg, rgba(255,255,255,.042), rgba(255,255,255,.018) 48%, rgba(5,13,22,.66)),
linear-gradient(180deg, rgba(7,21,36,.62), rgba(4,10,17,.78));
box-shadow:0 22px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

.guide-summary-grid h2{
margin:0 0 12px;
color:#fff;
font-size:21px;
line-height:1.2;
}

.guide-summary-grid p{
margin:0;
color:rgba(246,248,248,.66);
font-size:15px;
line-height:1.55;
}

.guide-layout{
display:grid;
grid-template-columns:232px minmax(0, 1fr);
gap:28px;
align-items:start;
padding-bottom:64px;
}

.guide-nav-card{
position:sticky;
top:86px;
display:flex;
flex-direction:column;
gap:8px;
align-self:start;
border:1px solid rgba(88,167,255,.20);
border-radius:16px;
padding:16px;
background:
linear-gradient(145deg, rgba(8,28,48,.56), rgba(4,10,18,.82) 62%),
rgba(5,12,20,.72);
box-shadow:0 22px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055);
}

.guide-nav-card a{
border-radius:10px;
padding:10px 12px;
color:rgba(246,248,248,.70);
font-size:14px;
font-weight:800;
line-height:1.25;
text-decoration:none;
transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}

.guide-nav-card a:hover{
color:#fff;
background:rgba(88,167,255,.13);
box-shadow:inset 0 0 0 1px rgba(88,167,255,.18);
text-decoration:none;
}

.guide-panel{
border:1px solid rgba(88,167,255,.28);
border-radius:18px;
padding:34px 38px 38px;
background:
radial-gradient(circle at 16% 0%, rgba(22,136,248,.13), transparent 48%),
linear-gradient(145deg, rgba(8,28,48,.74), rgba(4,10,18,.92) 62%);
box-shadow:
0 30px 78px rgba(0,0,0,.26),
0 0 32px rgba(22,136,248,.07),
inset 0 1px 0 rgba(255,255,255,.08);
}

.guide-section{
scroll-margin-top:102px;
padding:0 0 30px;
margin:0 0 30px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.guide-section:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}

.guide-section h2{
margin:0 0 14px;
color:#fff;
font-size:30px;
line-height:1.15;
letter-spacing:0;
}

.guide-section h3{
margin:0 0 10px;
color:#fff;
font-size:19px;
line-height:1.25;
}

.guide-section p{
margin:0;
color:rgba(246,248,248,.70);
font-size:16px;
line-height:1.7;
}

.guide-section p + p,
.guide-section p + ul,
.guide-section ul + p,
.guide-method-grid + p{
margin-top:12px;
}

.guide-section ul{
margin:14px 0 0;
padding-left:0;
list-style:none;
}

.guide-section li{
position:relative;
margin:10px 0;
padding-left:22px;
color:rgba(246,248,248,.70);
font-size:16px;
line-height:1.65;
}

.guide-section li::before{
content:"";
position:absolute;
top:.72em;
left:2px;
width:7px;
height:7px;
border-radius:50%;
background:#2f86ff;
box-shadow:0 0 16px rgba(47,134,255,.45);
}

.guide-method-grid,
.guide-related-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}

.guide-method-grid article,
.guide-related-grid a,
.guide-faq details{
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:rgba(255,255,255,.045);
box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.guide-method-grid article{
padding:20px;
}

.guide-related-grid a{
display:block;
padding:18px;
color:inherit;
}

.guide-related-grid a:hover{
border-color:rgba(88,167,255,.36);
background:rgba(88,167,255,.090);
text-decoration:none;
}

.guide-related-grid strong{
display:block;
color:#fff;
font-size:16px;
line-height:1.25;
}


.guides-index .guides-quick-grid{
margin-top:22px;
}.guide-related-grid span{
display:block;
margin-top:7px;
color:rgba(246,248,248,.62);
font-size:14px;
line-height:1.45;
}

.guide-faq{
display:grid;
gap:10px;
}

.guide-faq details{
padding:0;
}

.guide-faq summary{
position:relative;
display:block;
cursor:pointer;
min-height:58px;
padding:17px 58px 17px 18px;
color:#fff;
font-size:16px;
font-weight:850;
line-height:1.45;
list-style:none;
}

.guide-faq summary::after{
content:"";
position:absolute;
top:50%;
right:18px;
width:24px;
height:24px;
transform:translateY(-50%);
border:1px solid rgba(88,167,255,.40);
border-radius:50%;
background:
linear-gradient(#58a7ff, #58a7ff) center / 10px 2px no-repeat,
linear-gradient(#58a7ff, #58a7ff) center / 2px 10px no-repeat,
rgba(5,17,31,.58);
}

.guide-faq details[open] summary::after{
background:
linear-gradient(#58a7ff, #58a7ff) center / 10px 2px no-repeat,
rgba(5,17,31,.58);
}

.guide-faq summary::-webkit-details-marker{
display:none;
}

.guide-faq p{
padding:0 18px 18px;
font-size:15px;
line-height:1.65;
}

.guide-final-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-top:30px;
padding:24px;
border:1px solid rgba(88,167,255,.28);
border-radius:16px;
background:
linear-gradient(135deg, rgba(22,136,248,.12), rgba(255,255,255,.030)),
rgba(5,12,20,.72);
box-shadow:0 20px 58px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
}

.guide-final-cta h2{
margin:0 0 8px;
color:#fff;
font-size:25px;
line-height:1.15;
}

.guide-final-cta p{
margin:0;
color:rgba(246,248,248,.66);
font-size:15px;
line-height:1.5;
}

.guide-final-button{
flex:0 0 auto;
min-height:44px;
padding:0 18px;
border:1px solid rgba(165,213,255,.48);
border-radius:999px;
color:#fff;
background:linear-gradient(180deg, rgba(64,151,255,.98), rgba(19,111,232,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
0 14px 32px rgba(22,136,248,.20);
white-space:nowrap;
}

.guide-final-button:hover{
color:#fff;
text-decoration:none;
background:linear-gradient(180deg, rgba(82,166,255,.98), rgba(29,123,244,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 18px 40px rgba(22,136,248,.25);
}

/* App rules guide */

.app-rules-guide{
overflow:hidden;
}

.app-rules-hero{
position:relative;
isolation:isolate;
padding:150px 22px 38px;
}

.app-rules-hero::before{
content:"";
position:absolute;
z-index:-1;
top:-120px;
left:50%;
width:100vw;
height:640px;
transform:translateX(-50%);
pointer-events:none;
background:
radial-gradient(ellipse 52% 42% at 61% 30%, rgba(24,126,240,.14), rgba(24,126,240,.045) 48%, transparent 78%),
linear-gradient(180deg, rgba(7,18,32,.42), rgba(7,8,8,0) 82%);
}

.app-rules-hero-inner{
display:grid;
grid-template-columns:minmax(500px, .96fr) minmax(0, .86fr);
gap:46px;
align-items:center;
}

.app-rules-copy{
max-width:680px;
}

.app-rules-copy h1{
margin:26px 0 20px;
color:#fff;
font-size:68px;
line-height:.98;
letter-spacing:0;
text-wrap:balance;
}

.app-rules-copy h1 span{
color:#3f8cff;
text-shadow:0 0 24px rgba(47,134,255,.18);
}

.app-rules-copy p{
max-width:650px;
margin:0;
color:rgba(246,248,248,.73);
font-size:21px;
line-height:1.55;
}

.app-rules-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:14px;
margin-top:30px;
}

.app-rules-primary{
min-height:48px;
padding:0 20px;
border:1px solid rgba(165,213,255,.46);
border-radius:999px;
color:#fff;
background:linear-gradient(180deg, rgba(69,157,255,.98), rgba(21,112,232,.96));
box-shadow:
0 16px 40px rgba(22,136,248,.22),
inset 0 1px 0 rgba(255,255,255,.24);
white-space:nowrap;
transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.app-rules-primary:hover{
color:#fff;
background:linear-gradient(180deg, rgba(88,171,255,.98), rgba(32,124,244,.96));
border-color:rgba(190,225,255,.56);
box-shadow:
0 18px 44px rgba(22,136,248,.26),
inset 0 1px 0 rgba(255,255,255,.30);
text-decoration:none;
}

.app-rules-secondary{
display:inline-flex;
align-items:center;
min-height:48px;
padding:0 18px;
border:1px solid rgba(88,167,255,.22);
border-radius:999px;
color:rgba(246,248,248,.78);
background:rgba(255,255,255,.035);
font-size:14px;
font-weight:850;
}

.app-rules-secondary:hover{
color:#fff;
border-color:rgba(88,167,255,.36);
background:rgba(88,167,255,.08);
text-decoration:none;
}

.app-rules-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:24px;
}

.app-rules-meta span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 14px;
border:1px solid rgba(88,167,255,.22);
border-radius:999px;
color:rgba(246,248,248,.66);
background:rgba(255,255,255,.035);
font-size:14px;
font-weight:720;
}

.app-rules-product{
position:relative;
min-height:520px;
}

.app-rules-product::before{
content:"";
position:absolute;
inset:92px 6% 60px 0;
border-radius:50%;
background:radial-gradient(ellipse at center, rgba(44,141,255,.18), rgba(44,141,255,.055) 44%, transparent 72%);
pointer-events:none;
}

.app-rules-shot-stack{
position:relative;
min-height:520px;
overflow:hidden;
-webkit-mask-image:linear-gradient(180deg, #000 76%, rgba(0,0,0,.82) 88%, transparent 100%);
mask-image:linear-gradient(180deg, #000 76%, rgba(0,0,0,.82) 88%, transparent 100%);
}

.app-rules-shot{
position:absolute;
top:20px;
left:50%;
display:block;
width:min(500px, 94%);
height:auto;
transform:translateX(-50%);
opacity:0;
filter:drop-shadow(0 36px 54px rgba(0,0,0,.40));
will-change:opacity, transform;
}

.app-rules-shot-a{
animation:appRulesShowA 13.5s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-shot-b{
animation:appRulesShowB 13.5s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-shot-c{
animation:appRulesShowC 13.5s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-step-strip{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:1px;
margin-top:4px;
margin-bottom:54px;
border:1px solid rgba(88,167,255,.18);
border-radius:16px;
overflow:hidden;
background:rgba(88,167,255,.12);
box-shadow:0 24px 60px rgba(0,0,0,.18);
}

.app-rules-step-strip article{
min-height:150px;
padding:24px;
background:
linear-gradient(145deg, rgba(11,28,44,.86), rgba(7,12,18,.92)),
rgba(255,255,255,.03);
}

.app-rules-step-strip span{
display:grid;
place-items:center;
width:32px;
height:32px;
margin-bottom:16px;
border:1px solid rgba(105,184,255,.34);
border-radius:50%;
color:#82c4ff;
background:rgba(88,167,255,.08);
font-size:13px;
font-weight:950;
}

.app-rules-step-strip h2{
margin:0 0 8px;
color:#fff;
font-size:19px;
line-height:1.22;
}

.app-rules-step-strip p{
margin:0;
color:rgba(246,248,248,.62);
font-size:14px;
line-height:1.55;
}

.app-rules-layout{
padding-bottom:68px;
}

.app-rules-panel{
background:
linear-gradient(145deg, rgba(7,24,42,.76), rgba(4,9,16,.93) 58%);
}

.app-rules-guide-section{
padding-bottom:42px;
margin-bottom:42px;
}

.app-rules-section-kicker{
display:block;
margin-bottom:12px;
color:#72bdff;
font-size:12px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
}

.app-rules-split{
display:grid;
grid-template-columns:minmax(0, .86fr) minmax(340px, .70fr);
gap:34px;
align-items:center;
}

.app-rules-split-reverse{
grid-template-columns:minmax(360px, .82fr) minmax(0, .88fr);
}

.app-rules-split-reverse > div{
order:2;
}

.app-rules-split-reverse > figure{
order:1;
}

.app-rules-figure{
position:relative;
margin:0;
}

.app-rules-figure img{
display:block;
width:100%;
height:auto;
filter:drop-shadow(0 28px 42px rgba(0,0,0,.36));
}

.app-rules-figure figcaption{
margin-top:12px;
color:rgba(246,248,248,.52);
font-size:13px;
line-height:1.45;
}

.app-rules-figure-cycle{
min-height:410px;
}

.app-rules-figure-cycle img{
position:absolute;
left:50%;
top:0;
max-width:100%;
transform:translateX(-50%);
opacity:0;
will-change:opacity, transform;
}

.app-rules-figure-cycle figcaption{
position:absolute;
left:0;
right:0;
bottom:0;
}

.app-rules-cycle-a{
width:100%;
animation:appRulesFinderA 12s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-cycle-b{
width:68%;
animation:appRulesFinderB 12s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-cycle-c{
width:78%;
animation:appRulesFinderC 12s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-ordered{
margin:16px 0 0;
padding-left:20px;
}

.app-rules-ordered li{
margin:9px 0;
padding-left:4px;
color:rgba(246,248,248,.70);
font-size:16px;
line-height:1.6;
}

.app-rules-ordered li::before{
content:none;
}

.app-rules-info-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
}

.app-rules-info-grid article{
min-height:150px;
padding:20px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
background:rgba(255,255,255,.040);
box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.app-rules-info-grid h3{
margin:0 0 8px;
}

.app-rules-info-grid p{
font-size:15px;
line-height:1.6;
}

.app-rules-final-cta{
margin-top:0;
}

.app-rules-open-section{
position:relative;
margin-top:60px;
margin-bottom:60px;
}

.app-rules-section-head{
max-width:820px;
margin:0 auto 48px;
text-align:center;
}

.app-rules-steps-open .app-rules-section-head{
margin-bottom:30px;
}

.app-rules-steps-open{
width:min(calc(100vw - 64px), 1220px);
max-width:1220px;
margin-top:116px;
margin-bottom:40px;
}

.app-rules-title{
max-width:1100px;
margin:0 0 34px;
}

.app-rules-title h1{
max-width:1080px;
margin:26px 0 18px;
color:#fff;
font-size:70px;
line-height:.98;
letter-spacing:0;
text-wrap:balance;
}

.app-rules-title h1 span{
color:#3f8cff;
text-shadow:0 0 24px rgba(47,134,255,.18);
}

.app-rules-title p{
max-width:700px;
margin:0;
color:rgba(246,248,248,.72);
font-size:21px;
line-height:1.55;
}

.app-rules-section-head-left{
max-width:760px;
margin-left:0;
text-align:left;
}

.app-rules-section-head h2,
.app-rules-open-cta h2{
margin:0;
color:#fff;
font-size:48px;
line-height:1.05;
letter-spacing:0;
text-wrap:balance;
}

.app-rules-section-head p,
.app-rules-open-cta p{
max-width:720px;
margin:18px auto 0;
color:rgba(246,248,248,.66);
font-size:18px;
line-height:1.65;
}

.app-rules-section-head-left p{
margin-left:0;
}

.app-rules-story{
position:relative;
height:158vh;
min-height:1180px;
}

.schedules-story{
height:98vh;
min-height:760px;
}

.hotkeys-story{
height:148vh;
min-height:1080px;
}

.app-rules-story-stage{
position:relative;
height:clamp(640px, 74vh, 760px);
min-height:640px;
overflow:visible;
}

.app-rules-story-row{
position:absolute;
top:50%;
left:0;
right:0;
z-index:1;
display:grid;
grid-template-columns:minmax(420px, .76fr) minmax(0, 1.12fr);
gap:36px;
align-items:center;
min-height:0;
height:auto;
margin:0;
padding:0 14px;
overflow:visible;
opacity:0;
visibility:hidden;
background:none;
transform:translate3d(0, -46%, 0);
transition:
opacity .34s ease,
transform .34s ease;
will-change:opacity, transform;
}

.app-rules-story-row.is-active{
opacity:1;
visibility:visible;
transform:translate3d(0, -50%, 0);
}

.app-rules-story-row-reverse{
grid-template-columns:minmax(0, 1.12fr) minmax(420px, .76fr);
}

.app-rules-story-row-reverse .app-rules-story-copy{
order:2;
}

.app-rules-story-row-reverse .app-rules-floating-shot{
order:1;
}

.app-rules-story-copy span{
display:block;
margin-bottom:20px;
color:#58a7ff;
font-size:14px;
font-weight:950;
letter-spacing:.18em;
}

.app-rules-story-copy h2,
.app-rules-story-copy h3,
.app-rules-exe-copy h2,
.app-rules-fullscreen-copy h2{
margin:0;
color:#fff;
font-size:42px;
line-height:1.08;
letter-spacing:0;
text-wrap:balance;
}

.app-rules-story-copy p,
.app-rules-exe-copy p,
.app-rules-fullscreen-copy p{
margin:20px 0 0;
color:rgba(246,248,248,.68);
font-size:18px;
line-height:1.65;
}

.app-rules-story-copy h2,
.app-rules-story-copy h3{
max-width:600px;
font-size:54px;
line-height:1.03;
}

.app-rules-story-copy p{
max-width:600px;
font-size:21px;
line-height:1.56;
}

.app-rules-floating-shot,
.app-rules-fullscreen-shot{
position:relative;
margin:0;
display:flex;
align-items:flex-start;
justify-content:center;
overflow:hidden;
}

.app-rules-floating-shot{
height:clamp(570px, 43vw, 640px);
padding-top:clamp(6px, 1.4vw, 18px);
-webkit-mask-image:none;
mask-image:none;
}

.app-rules-fullscreen-shot{
height:clamp(560px, 48vw, 690px);
-webkit-mask-image:linear-gradient(180deg, #000 76%, rgba(0,0,0,.86) 90%, transparent 100%);
mask-image:linear-gradient(180deg, #000 76%, rgba(0,0,0,.86) 90%, transparent 100%);
}

.app-rules-floating-shot::before{
content:"";
position:absolute;
inset:10% -2% 2%;
z-index:-1;
border-radius:50%;
background:radial-gradient(ellipse at center, rgba(47,134,255,.16), rgba(47,134,255,.045) 45%, transparent 72%);
pointer-events:none;
}

.app-rules-floating-shot::after{
content:"";
position:absolute;
left:-28px;
right:-28px;
bottom:-1px;
z-index:2;
height:28%;
background:linear-gradient(180deg, rgba(7,8,8,0), rgba(7,8,8,.92) 68%, #070808 100%);
pointer-events:none;
}

.app-rules-complete-shot::after,
.schedules-rule-shot::after,
.hotkeys-key-shot::after{
content:none;
}

.app-rules-floating-shot img,
.app-rules-fullscreen-shot img{
position:relative;
z-index:1;
display:block;
height:auto;
margin:0 auto;
filter:drop-shadow(0 38px 58px rgba(0,0,0,.40));
}

.app-rules-floating-shot img{
width:min(650px, 100%);
max-width:none;
transform:translateY(8px);
}

.app-rules-fullscreen-shot img{
width:min(660px, 100%);
}

.app-rules-scope-shot img{
transform:translateY(10px);
}

.app-rules-browse-shot img{
width:min(698px, 104%);
transform:translateY(7px);
}

.app-rules-complete-shot img{
width:min(650px, 100%);
transform:translateY(8px);
}

.schedules-guide .app-rules-title h1{
max-width:1120px;
}

.schedules-guide .app-rules-title p{
max-width:760px;
}

.schedules-floating-shot img{
width:min(650px, 100%);
transform:translateY(8px);
}

.schedules-rule-shot img,
.schedules-overnight-shot img{
width:min(650px, 100%);
}

.schedules-overnight-open{
width:min(calc(100vw - 64px), 1220px);
max-width:1220px;
display:grid;
grid-template-columns:minmax(390px, .66fr) minmax(0, 1.14fr);
gap:72px;
align-items:center;
margin-top:12px;
margin-bottom:40px;
}

.schedules-overnight-open .app-rules-floating-shot{
height:clamp(560px, 42vw, 610px);
}

.schedules-guide .app-rules-floating-shot::after,
.hotkeys-guide .app-rules-floating-shot::after{
height:28%;
}

.hotkeys-guide .app-rules-title h1{
max-width:1020px;
}

.hotkeys-guide .app-rules-title p{
max-width:780px;
}

.hotkeys-floating-shot img{
width:min(650px, 100%);
transform:translateY(8px);
}

.hotkeys-edit-shot img,
.hotkeys-key-shot img,
.hotkeys-actions-shot img{
width:min(650px, 100%);
}

.hotkeys-actions-open{
width:min(calc(100vw - 64px), 1220px);
max-width:1220px;
display:grid;
grid-template-columns:minmax(390px, .66fr) minmax(0, 1.14fr);
gap:72px;
align-items:center;
margin-top:12px;
margin-bottom:40px;
}

.hotkeys-actions-open .app-rules-floating-shot{
height:clamp(560px, 42vw, 610px);
}

.app-rules-exe-open{
width:min(calc(100vw - 64px), 1220px);
max-width:1220px;
display:grid;
grid-template-columns:minmax(390px, .66fr) minmax(0, 1.14fr);
gap:72px;
align-items:center;
margin-top:-8px;
margin-bottom:24px;
padding-top:10px;
padding-bottom:0;
}

.app-rules-exe-copy{
max-width:540px;
}

.app-rules-exe-copy h2 span{
color:#3f8cff;
text-shadow:0 0 24px rgba(47,134,255,.18);
}

.app-rules-rail{
display:grid;
gap:0;
margin-top:30px;
border-top:1px solid rgba(88,167,255,.14);
}

.app-rules-rail-step{
display:grid;
grid-template-columns:42px minmax(0, 1fr);
gap:15px;
align-items:start;
padding:18px 0;
border-bottom:1px solid rgba(88,167,255,.12);
}

.app-rules-rail-step > span{
display:grid;
place-items:center;
width:34px;
height:34px;
margin-top:1px;
border:1px solid rgba(105,184,255,.34);
border-radius:999px;
color:#82c4ff;
background:rgba(88,167,255,.08);
font-size:13px;
font-weight:950;
}

.app-rules-rail-step strong{
display:block;
color:#fff;
font-size:17px;
line-height:1.25;
}

.app-rules-rail-step em{
display:block;
margin-top:5px;
color:rgba(246,248,248,.58);
font-style:normal;
font-size:14px;
line-height:1.45;
}

.app-rules-exe-stage{
position:relative;
min-height:780px;
}

.app-rules-exe-stage::after{
content:"";
position:absolute;
left:-4px;
top:210px;
z-index:-1;
width:820px;
height:520px;
border-radius:50%;
background:radial-gradient(ellipse at center, rgba(47,134,255,.10), rgba(47,134,255,.030) 48%, transparent 76%);
pointer-events:none;
}

.app-rules-exe-stage img{
position:absolute;
display:block;
height:auto;
pointer-events:none;
user-select:none;
filter:drop-shadow(0 30px 44px rgba(0,0,0,.42));
will-change:transform, opacity;
}

.app-rules-task-shot{
top:0;
right:0;
z-index:2;
width:min(610px, 88%);
opacity:.95;
animation:appRulesExeMain 9s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-file-shot{
top:306px;
left:2px;
z-index:3;
width:min(382px, 52%);
opacity:.92;
animation:appRulesExeLeft 9s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-copy-shot{
top:428px;
right:14px;
z-index:4;
width:min(410px, 56%);
opacity:.88;
animation:appRulesExeRight 9s cubic-bezier(.22,1,.36,1) infinite;
}

.app-rules-details-open{
width:min(calc(100vw - 64px), 1220px);
max-width:1220px;
display:block;
margin-top:0;
margin-bottom:76px;
padding-top:0;
padding-bottom:0;
}

.app-rules-details-open .app-rules-section-head{
margin-bottom:28px;
}

.app-rules-details-open .app-rules-section-head{
max-width:620px;
margin:0 0 30px;
}

.app-rules-detail-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:22px;
border:0;
}

.app-rules-detail-grid article{
min-height:198px;
padding:24px;
border:1px solid rgba(88,167,255,.18);
border-radius:18px;
background:
linear-gradient(145deg, rgba(12,30,50,.72), rgba(5,10,16,.90)),
rgba(255,255,255,.03);
box-shadow:
0 18px 46px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.055);
}

.app-rules-detail-icon{
display:grid;
place-items:center;
width:48px;
height:48px;
margin-bottom:18px;
border:1px solid rgba(91,166,255,.32);
border-radius:50%;
color:#8ed0ff;
background:radial-gradient(circle at 35% 25%, rgba(82,172,255,.28), rgba(24,93,183,.18) 58%, rgba(5,10,16,.35));
}

.app-rules-detail-icon svg{
width:25px;
height:25px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}

.app-rules-detail-icon-warn{
color:#d995ff;
border-color:rgba(211,126,255,.30);
background:radial-gradient(circle at 35% 25%, rgba(178,72,224,.25), rgba(93,45,130,.18) 58%, rgba(5,10,16,.35));
}

.app-rules-detail-icon-apply{
color:#73f4ff;
border-color:rgba(93,227,236,.30);
background:radial-gradient(circle at 35% 25%, rgba(74,212,229,.24), rgba(31,111,130,.18) 58%, rgba(5,10,16,.35));
}

.app-rules-detail-label{
display:block;
margin-bottom:6px;
color:#72bdff;
font-size:12px;
font-weight:900;
letter-spacing:.10em;
text-transform:uppercase;
}

.app-rules-detail-grid h3{
margin:0 0 10px;
color:#fff;
font-size:21px;
line-height:1.18;
}

.app-rules-detail-grid p{
margin:0;
color:rgba(246,248,248,.63);
font-size:15px;
line-height:1.65;
}

@media (min-width: 1061px){
.hotkeys-actions-details .app-rules-detail-grid{
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:18px;
}

.hotkeys-actions-details .app-rules-detail-grid article{
min-height:278px;
padding:22px;
}

.hotkeys-actions-details .app-rules-detail-grid h3{
font-size:21px;
}

.hotkeys-actions-details .app-rules-detail-grid p{
font-size:14px;
line-height:1.58;
}
}

.app-rules-mini-callout{
display:grid;
gap:6px;
max-width:430px;
margin-top:18px;
padding:14px 16px;
border:1px solid rgba(88,167,255,.24);
border-radius:8px;
background:rgba(9,22,36,.68);
box-shadow:0 18px 38px rgba(0,0,0,.20);
}

.app-rules-mini-callout span,
.automation-behavior-note .app-rules-detail-label{
color:#58a7ff;
font-size:12px;
font-weight:950;
letter-spacing:.14em;
text-transform:uppercase;
}

.app-rules-mini-callout strong{
color:#fff;
font-size:18px;
line-height:1.35;
}

.hotkeys-default-callout{
gap:10px;
max-width:460px;
}

.hotkeys-shortcut-pairs{
display:grid;
gap:8px;
}

.hotkeys-shortcut-pairs div{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
align-items:center;
gap:12px;
padding:10px 12px;
border:1px solid rgba(88,167,255,.18);
border-radius:7px;
background:rgba(255,255,255,.035);
}

.hotkeys-shortcut-pairs strong{
color:#fff;
font-size:16px;
line-height:1.25;
}

.hotkeys-shortcut-pairs em{
color:#9fcfff;
font-size:12px;
font-style:normal;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
white-space:nowrap;
}

@media (max-width: 560px){
.hotkeys-shortcut-pairs div{
grid-template-columns:1fr;
gap:4px;
}

.hotkeys-shortcut-pairs em{
white-space:normal;
}
}

.automation-behavior-note{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:16px;
margin-top:18px;
}

.automation-behavior-note article{
min-height:0;
padding:22px;
border:1px solid rgba(88,167,255,.22);
border-radius:8px;
background:linear-gradient(180deg, rgba(8,22,36,.74), rgba(5,13,22,.58));
box-shadow:0 20px 48px rgba(0,0,0,.20);
}

.automation-behavior-note h3{
margin:10px 0 0;
color:#fff;
font-size:21px;
line-height:1.2;
}

.automation-behavior-note p{
margin:10px 0 0;
color:rgba(246,248,248,.68);
font-size:15px;
line-height:1.58;
}
.app-rules-fullscreen-open{
--app-rules-fullscreen-bottom-x:0px;
--app-rules-fullscreen-middle-x:0px;
--app-rules-fullscreen-top-x:0px;
--app-rules-fullscreen-bottom-y:0px;
--app-rules-fullscreen-middle-y:0px;
--app-rules-fullscreen-top-y:0px;
--app-rules-fullscreen-bottom-scale:1;
--app-rules-fullscreen-middle-scale:1;
--app-rules-fullscreen-top-scale:1;
position:relative;
width:100%;
max-width:none;
min-height:0;
margin:0 0 36px;
padding:0;
border:0;
}

.app-rules-fullscreen-sticky{
position:relative;
top:auto;
display:grid;
align-items:start;
padding:64px 22px 18px;
overflow:hidden;
}

.app-rules-fullscreen-grid{
width:min(1185px, 100%);
margin:0 auto;
display:grid;
grid-template-columns:minmax(310px, 420px) minmax(0, 1fr);
gap:clamp(34px, 4.4vw, 60px);
align-items:center;
isolation:isolate;
}

.app-rules-fullscreen-copy{
position:relative;
z-index:12;
max-width:460px;
}

.app-rules-fullscreen-copy .app-rules-section-kicker{
margin-bottom:18px;
color:#62c9ff;
font-size:14px;
font-weight:900;
letter-spacing:.18em;
}

.app-rules-fullscreen-copy h2{
max-width:410px;
font-size:clamp(44px, 4.05vw, 64px);
line-height:1.02;
}

.app-rules-fullscreen-copy p{
max-width:400px;
margin:22px 0 0;
font-size:clamp(17px, 1.15vw, 19px);
line-height:1.5;
}

.app-rules-fullscreen-copy h2 span{
color:#3f8cff;
text-shadow:0 0 24px rgba(47,134,255,.18);
}

.app-rules-fullscreen-points{
display:grid;
gap:18px;
max-width:430px;
margin-top:34px;
}

.app-rules-fullscreen-points div{
display:grid;
grid-template-columns:56px minmax(0, 1fr);
gap:18px;
align-items:center;
}

.app-rules-fullscreen-points span{
display:grid;
place-items:center;
width:42px;
height:42px;
color:#4fa3ff;
}

.app-rules-fullscreen-points span svg,
.app-rules-fullscreen-visual svg{
width:100%;
height:100%;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}

.app-rules-fullscreen-points strong{
color:#fff;
font-size:19px;
line-height:1.25;
}

.app-rules-fullscreen-visual{
position:relative;
min-height:min(650px, 50vw);
isolation:isolate;
z-index:1;
}

.app-rules-fullscreen-stage{
position:absolute;
right:-182px;
top:50%;
width:min(960px, calc(100% + 242px));
aspect-ratio:1618 / 806;
transform:translateY(-46%);
pointer-events:none;
}

.app-rules-fullscreen-stage::before{
content:none;
}

.app-rules-fullscreen-layer{
position:absolute;
inset:0;
display:block;
width:100%;
max-width:none;
height:100%;
object-fit:contain;
pointer-events:none;
user-select:none;
will-change:transform;
}

.app-rules-fullscreen-layer-bottom{
z-index:1;
opacity:.62;
filter:
saturate(.92)
brightness(.92)
drop-shadow(0 32px 70px rgba(0,0,0,.48));
transform:
translate3d(var(--app-rules-fullscreen-bottom-x), var(--app-rules-fullscreen-bottom-y), 0)
scale(var(--app-rules-fullscreen-bottom-scale));
}

.app-rules-fullscreen-layer-middle{
z-index:2;
opacity:1;
filter:
saturate(.88)
brightness(.90);
transform:
translate3d(var(--app-rules-fullscreen-middle-x), var(--app-rules-fullscreen-middle-y), 0)
scale(var(--app-rules-fullscreen-middle-scale));
}

.app-rules-fullscreen-layer-top{
z-index:3;
opacity:.98;
filter:
saturate(.98)
brightness(.97)
drop-shadow(0 32px 80px rgba(0,0,0,.54));
transform:
translate3d(var(--app-rules-fullscreen-top-x), var(--app-rules-fullscreen-top-y), 0)
scale(var(--app-rules-fullscreen-top-scale));
}

.app-rules-open-cta{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
gap:30px;
align-items:center;
margin-top:40px;
margin-bottom:72px;
padding:38px 22px;
border-top:1px solid rgba(88,167,255,.16);
border-bottom:1px solid rgba(88,167,255,.16);
}

.app-rules-fullscreen-open + .app-rules-open-cta{
margin-top:0;
}

.app-rules-open-cta p{
margin-left:0;
}

@keyframes appRulesShowA{
0%,25%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
32%,92%{
opacity:0;
transform:translateX(-50%) translateY(-10px) scale(.985);
}
100%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
}

@keyframes appRulesShowB{
0%,29%{
opacity:0;
transform:translateX(-50%) translateY(12px) scale(.985);
}
36%,58%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
65%,100%{
opacity:0;
transform:translateX(-50%) translateY(-10px) scale(.985);
}
}

@keyframes appRulesShowC{
0%,62%{
opacity:0;
transform:translateX(-50%) translateY(12px) scale(.985);
}
69%,90%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
100%{
opacity:0;
transform:translateX(-50%) translateY(-10px) scale(.985);
}
}

@keyframes appRulesFinderA{
0%,25%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
32%,92%{
opacity:0;
transform:translateX(-50%) translateY(-8px) scale(.985);
}
100%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
}

@keyframes appRulesFinderB{
0%,30%{
opacity:0;
transform:translateX(-50%) translateY(10px) scale(.985);
}
37%,58%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
65%,100%{
opacity:0;
transform:translateX(-50%) translateY(-8px) scale(.985);
}
}

@keyframes appRulesFinderC{
0%,62%{
opacity:0;
transform:translateX(-50%) translateY(10px) scale(.985);
}
69%,90%{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
}
100%{
opacity:0;
transform:translateX(-50%) translateY(-8px) scale(.985);
}
}

@keyframes appRulesExeMain{
0%,100%{
opacity:.88;
transform:translate3d(0,0,0) scale(.985);
}
42%{
opacity:.98;
transform:translate3d(-12px,-6px,0) scale(1);
}
72%{
opacity:.92;
transform:translate3d(0,4px,0) scale(.99);
}
}

@keyframes appRulesExeLeft{
0%,100%{
opacity:.76;
transform:translate3d(-12px,18px,0) scale(.94);
}
44%{
opacity:.94;
transform:translate3d(0,0,0) scale(.965);
}
72%{
opacity:.86;
transform:translate3d(12px,-10px,0) scale(.955);
}
}

@keyframes appRulesExeRight{
0%,100%{
opacity:.72;
transform:translate3d(12px,20px,0) scale(.94);
}
48%{
opacity:.86;
transform:translate3d(0,0,0) scale(.96);
}
76%{
opacity:.98;
transform:translate3d(-10px,-14px,0) scale(.98);
}
}

@media (prefers-reduced-motion: reduce){
.app-rules-shot,
.app-rules-figure-cycle img,
.app-rules-exe-stage img{
animation:none !important;
}

.app-rules-shot-a,
.app-rules-cycle-a{
opacity:1;
}
}

@media (max-width: 1060px){
.app-rules-hero{
padding-top:126px;
}

.app-rules-hero-inner{
grid-template-columns:1fr;
gap:26px;
}

.app-rules-copy{
max-width:820px;
margin:0 auto;
text-align:center;
}

.app-rules-copy h1{
font-size:54px;
}

.app-rules-copy p{
margin-left:auto;
margin-right:auto;
}

.app-rules-actions,
.app-rules-meta{
justify-content:center;
}

.app-rules-product,
.app-rules-shot-stack{
min-height:500px;
}

.app-rules-shot{
width:min(540px, 86vw);
}

.app-rules-step-strip{
grid-template-columns:1fr;
max-width:720px;
}

.app-rules-split,
.app-rules-split-reverse{
grid-template-columns:1fr;
gap:24px;
}

.app-rules-split-reverse > div,
.app-rules-split-reverse > figure{
order:initial;
}

.app-rules-figure{
max-width:460px;
}

.app-rules-figure-cycle{
min-height:360px;
}

.app-rules-open-section{
margin-top:64px;
margin-bottom:64px;
}

.app-rules-section-head{
margin-bottom:42px;
}

.app-rules-story{
display:grid;
gap:54px;
height:auto;
min-height:0;
}

.app-rules-story-stage{
position:relative;
top:auto;
display:grid;
gap:54px;
height:auto;
min-height:0;
border:0;
border-radius:0;
background:none;
box-shadow:none;
overflow:visible;
}

.app-rules-story-row,
.app-rules-story-row-reverse,
.schedules-overnight-open,
.hotkeys-actions-open,
.app-rules-exe-open{
position:relative;
inset:auto;
top:auto;
z-index:1;
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
transform:none !important;
grid-template-columns:1fr;
gap:30px;
min-height:0;
margin-bottom:0;
padding:0 0 54px;
border:0;
border-bottom:1px solid rgba(88,167,255,.12);
border-radius:0;
background:none;
box-shadow:none;
overflow:visible;
}

.app-rules-details-open{
width:100%;
display:block;
margin-top:52px;
margin-bottom:64px;
}

.app-rules-details-open .app-rules-section-head{
margin:0 0 28px;
}

.app-rules-story-row.is-active,
.app-rules-story-row:nth-child(2),
.app-rules-story-row:nth-child(3){
transform:none;
}

.app-rules-story-row-reverse .app-rules-story-copy,
.app-rules-story-row-reverse .app-rules-floating-shot{
order:initial;
}

.app-rules-floating-shot{
height:auto;
min-height:0;
padding-top:0;
padding-bottom:34px;
overflow:visible;
}

.app-rules-floating-shot img,
.app-rules-scope-shot img,
.app-rules-browse-shot img,
.app-rules-complete-shot img,
.schedules-floating-shot img,
.schedules-rule-shot img,
.schedules-overnight-shot img,
.hotkeys-floating-shot img,
.hotkeys-edit-shot img,
.hotkeys-key-shot img,
.hotkeys-actions-shot img{
width:min(760px, 100%);
max-width:100%;
transform:none;
}

.app-rules-exe-stage{
width:100%;
max-width:760px;
min-height:620px;
margin:0 auto;
}

.app-rules-task-shot{
width:min(580px, 88%);
}

.app-rules-file-shot{
top:284px;
width:min(360px, 52%);
}

.app-rules-copy-shot{
top:430px;
width:min(400px, 58%);
}

.app-rules-fullscreen-open{
width:100%;
min-height:0;
margin:28px 0 0;
padding:0;
border:0;
}

.app-rules-fullscreen-sticky{
position:relative;
top:auto;
min-height:0;
padding:0 22px 22px;
overflow:visible;
}

.app-rules-fullscreen-grid{
width:100%;
max-width:900px;
grid-template-columns:1fr;
gap:30px;
}

.app-rules-fullscreen-copy{
max-width:760px;
margin:0 auto;
}

.app-rules-fullscreen-copy h2{
font-size:46px;
line-height:1.04;
}

.app-rules-fullscreen-copy p{
font-size:18px;
line-height:1.58;
}

.app-rules-fullscreen-visual{
width:100%;
max-width:900px;
min-height:0;
margin:0 auto;
}

.app-rules-fullscreen-stage{
position:relative;
right:auto;
top:auto;
width:min(100%, 900px);
transform:none;
margin:24px auto 0;
}

.app-rules-fullscreen-layer-bottom,
.app-rules-fullscreen-layer-middle,
.app-rules-fullscreen-layer-top{
transform:none;
}

.app-rules-detail-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.app-rules-open-cta{
grid-template-columns:1fr;
}
}

@media (max-width: 720px){
.app-rules-hero{
padding:104px 16px 28px;
}

.app-rules-copy h1{
font-size:40px;
}

.app-rules-copy p{
font-size:17px;
}

.app-rules-actions{
display:grid;
justify-items:stretch;
}

.app-rules-primary,
.app-rules-secondary{
justify-content:center;
width:100%;
text-align:center;
}

.app-rules-product,
.app-rules-shot-stack{
min-height:420px;
}

.app-rules-shot{
top:0;
width:min(420px, 94vw);
}

.app-rules-step-strip{
margin-bottom:34px;
border-radius:14px;
}

.app-rules-step-strip article{
min-height:0;
padding:20px;
}

.app-rules-guide-section{
padding-bottom:30px;
margin-bottom:30px;
}

.app-rules-info-grid{
grid-template-columns:1fr;
}

.app-rules-figure-cycle{
min-height:300px;
}

.app-rules-open-section{
margin-top:48px;
margin-bottom:48px;
}

.app-rules-section-head,
.app-rules-section-head-left{
margin-bottom:30px;
text-align:left;
}

.app-rules-title{
margin-bottom:42px;
}

.app-rules-title h1{
font-size:42px;
}

.app-rules-title p{
font-size:17px;
}

.app-rules-section-head h2,
.app-rules-open-cta h2{
font-size:34px;
}

.app-rules-section-head p,
.app-rules-open-cta p,
.app-rules-story-copy p,
.app-rules-exe-copy p,
.app-rules-fullscreen-copy p{
font-size:16px;
}

.app-rules-story-copy h2,
.app-rules-story-copy h3,
.app-rules-exe-copy h2,
.app-rules-fullscreen-copy h2{
font-size:31px;
}

.app-rules-story-row{
padding-bottom:48px;
}

.app-rules-floating-shot{
padding-bottom:28px;
}

.app-rules-floating-shot img,
.app-rules-scope-shot img,
.app-rules-browse-shot img,
.app-rules-complete-shot img,
.schedules-floating-shot img,
.schedules-rule-shot img,
.schedules-overnight-shot img,
.hotkeys-floating-shot img,
.hotkeys-edit-shot img,
.hotkeys-key-shot img,
.hotkeys-actions-shot img{
width:100%;
}

.app-rules-exe-stage{
min-height:500px;
}

.app-rules-task-shot{
right:0;
width:92%;
}

.app-rules-file-shot{
top:238px;
bottom:auto;
width:52%;
}

.app-rules-copy-shot{
right:0;
top:358px;
width:60%;
}

.app-rules-detail-grid,
.automation-behavior-note{
grid-template-columns:1fr;
gap:14px;
}

.app-rules-detail-grid article{
min-height:0;
padding:22px;
border-bottom:1px solid rgba(88,167,255,.18);
}

.app-rules-detail-grid article:last-child{
border-bottom:0;
}

.app-rules-open-cta{
margin-bottom:64px;
padding:34px 22px;
}

.app-rules-fullscreen-points{
gap:14px;
}

.app-rules-fullscreen-points div{
grid-template-columns:44px minmax(0, 1fr);
gap:12px;
}

.app-rules-fullscreen-visual{
min-height:0;
}

.app-rules-fullscreen-sticky{
padding:0 16px 48px;
overflow:hidden;
}

.app-rules-fullscreen-stage{
margin-top:16px;
}

}

/* Contact page */

.contact-main{
min-height:100vh;
overflow:hidden;
}

.contact-hero{
position:relative;
isolation:isolate;
padding:150px 22px 72px;
}

.contact-hero::before{
content:"";
position:absolute;
z-index:-1;
top:-120px;
left:50%;
width:100vw;
height:620px;
transform:translateX(-50%);
background:
radial-gradient(ellipse 54% 42% at 50% 28%, rgba(22,136,248,.15) 0%, rgba(22,136,248,.052) 46%, rgba(22,136,248,0) 78%),
radial-gradient(ellipse 34% 26% at 30% 52%, rgba(72,184,210,.045) 0%, rgba(72,184,210,.024) 48%, rgba(72,184,210,0) 82%);
pointer-events:none;
}

.contact-hero-inner{
display:grid;
grid-template-columns:minmax(0, .92fr) minmax(430px, .78fr);
gap:48px;
align-items:center;
}

.contact-copy{
max-width:720px;
}

.contact-copy h1{
margin:26px 0 18px;
color:#fff;
font-size:64px;
line-height:1.02;
font-weight:800;
letter-spacing:0;
}

.contact-copy h1 span{
color:#3f8cff;
text-shadow:0 0 24px rgba(47,134,255,.18);
}

.contact-copy p{
max-width:680px;
margin:0;
color:rgba(246,248,248,.74);
font-size:21px;
line-height:1.52;
}

.contact-direct{
display:inline-flex;
align-items:center;
margin-top:28px;
min-height:48px;
padding:0 18px;
border:1px solid rgba(88,167,255,.30);
border-radius:999px;
color:rgba(246,248,248,.84);
background:linear-gradient(180deg, rgba(7,20,35,.72), rgba(4,9,17,.76));
box-shadow:0 18px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
font-size:16px;
font-weight:750;
}

.contact-panel{
position:relative;
border:1px solid rgba(88,167,255,.30);
border-radius:18px;
padding:30px;
background:
radial-gradient(circle at 22% 0%, rgba(22,136,248,.15), transparent 48%),
linear-gradient(145deg, rgba(8,28,48,.86), rgba(4,10,18,.94) 62%);
box-shadow:
0 30px 78px rgba(0,0,0,.30),
0 0 32px rgba(22,136,248,.08),
inset 0 1px 0 rgba(255,255,255,.08);
}

.contact-panel-head h2{
margin:0 0 8px;
color:#fff;
font-size:30px;
line-height:1.12;
}

.contact-panel-head p{
margin:0 0 24px;
color:rgba(246,248,248,.62);
font-size:15px;
line-height:1.5;
}

.contact-form{
display:grid;
gap:12px;
}

.contact-form label{
color:rgba(246,248,248,.80);
font-size:13px;
font-weight:850;
letter-spacing:.07em;
text-transform:uppercase;
}

.contact-form input,
.contact-form textarea{
width:100%;
border:1px solid rgba(255,255,255,.11);
border-radius:10px;
padding:13px 14px;
color:#fff;
background:
linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
rgba(3,10,19,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
font:inherit;
font-size:15px;
line-height:1.45;
outline:none;
transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.contact-form textarea{
min-height:170px;
resize:vertical;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
color:rgba(246,248,248,.34);
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:rgba(88,167,255,.58);
background:
linear-gradient(135deg, rgba(22,136,248,.10), rgba(255,255,255,.030)),
rgba(3,10,19,.78);
box-shadow:0 0 0 3px rgba(22,136,248,.16), inset 0 1px 0 rgba(255,255,255,.06);
}

.contact-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:10px;
}

.contact-actions .btn{
min-height:44px;
border-radius:999px;
padding:0 18px;
font-size:15px;
font-weight:850;
text-decoration:none;
cursor:pointer;
transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.contact-primary{
border:1px solid rgba(165,213,255,.48);
color:#fff;
background:linear-gradient(180deg, rgba(64,151,255,.98), rgba(19,111,232,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.24),
0 12px 22px rgba(0,0,0,.20),
0 0 22px rgba(22,136,248,.12);
}

.contact-primary:hover{
color:#fff;
background:linear-gradient(180deg, rgba(82,166,255,.98), rgba(29,123,244,.96));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 14px 26px rgba(0,0,0,.22),
0 0 28px rgba(22,136,248,.18);
transform:translateY(-1px);
}

.contact-secondary{
border:1px solid rgba(88,167,255,.26);
color:rgba(246,248,248,.82);
background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.026));
}

.contact-secondary:hover{
color:#fff;
border-color:rgba(88,167,255,.42);
background:linear-gradient(180deg, rgba(88,167,255,.13), rgba(255,255,255,.034));
}

.contact-note{
margin:2px 0 0;
color:rgba(246,248,248,.46);
font-size:13px;
line-height:1.45;
}

.contact-help-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:16px;
padding-bottom:54px;
}

.contact-help-card{
min-height:174px;
border:1px solid rgba(88,167,255,.18);
border-radius:16px;
padding:24px;
background:
radial-gradient(circle at 18% 0%, rgba(22,136,248,.075), transparent 50%),
linear-gradient(155deg, rgba(255,255,255,.042), rgba(255,255,255,.018) 48%, rgba(5,13,22,.66)),
linear-gradient(180deg, rgba(7,21,36,.62), rgba(4,10,17,.78));
box-shadow:0 22px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

.contact-help-card h2{
margin:0 0 12px;
color:#fff;
font-size:21px;
line-height:1.2;
}

.contact-help-card p{
margin:0;
color:rgba(246,248,248,.66);
font-size:15px;
line-height:1.55;
}

.contact-help-card a{
display:inline-flex;
margin-top:16px;
color:#58a7ff;
font-size:15px;
font-weight:850;
}

.contact-help-card a:hover{
color:#79bbff;
text-decoration:none;
}

/* Legal pages */

.legal-main{
min-height:100vh;
overflow:hidden;
}

.legal-hero{
position:relative;
isolation:isolate;
padding:146px 22px 44px;
}

.legal-hero::before{
content:"";
position:absolute;
z-index:-1;
top:-120px;
left:50%;
width:min(1080px, 84vw);
height:560px;
transform:translateX(-50%);
background:
radial-gradient(ellipse at 50% 28%, rgba(22,136,248,.15), rgba(22,136,248,.05) 42%, transparent 74%),
radial-gradient(circle at 30% 54%, rgba(139,215,199,.07), transparent 38%);
pointer-events:none;
}

.legal-hero-inner{
max-width:1120px;
text-align:center;
}

.legal-hero h1{
margin:26px 0 18px;
color:#fff;
font-size:56px;
line-height:1.02;
font-weight:800;
letter-spacing:0;
white-space:nowrap;
}

.legal-hero h1 span{
color:#3f8cff;
text-shadow:0 0 22px rgba(47,134,255,.16);
}

.legal-hero p{
max-width:760px;
margin:0 auto;
color:rgba(246,248,248,.74);
font-size:21px;
line-height:1.52;
}

.legal-updated{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:26px;
min-height:42px;
padding:0 16px;
border:1px solid rgba(88,167,255,.30);
border-radius:999px;
color:rgba(246,248,248,.72);
background:linear-gradient(180deg, rgba(7,20,35,.70), rgba(4,9,17,.74));
box-shadow:0 16px 40px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
font-size:14px;
font-weight:800;
}

.legal-summary-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
padding-bottom:28px;
}

.legal-summary-grid article{
min-height:172px;
border:1px solid rgba(88,167,255,.18);
border-radius:16px;
padding:24px;
background:
radial-gradient(circle at 18% 0%, rgba(22,136,248,.075), transparent 50%),
linear-gradient(155deg, rgba(255,255,255,.042), rgba(255,255,255,.018) 48%, rgba(5,13,22,.66)),
linear-gradient(180deg, rgba(7,21,36,.62), rgba(4,10,17,.78));
box-shadow:0 22px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05);
}

.legal-summary-grid h2{
margin:0 0 12px;
color:#fff;
font-size:21px;
line-height:1.2;
}

.legal-summary-grid p{
margin:0;
color:rgba(246,248,248,.66);
font-size:15px;
line-height:1.55;
}

.legal-layout{
display:grid;
grid-template-columns:260px minmax(0, 1fr);
gap:22px;
align-items:start;
padding-bottom:64px;
}

.legal-nav-card{
position:sticky;
top:86px;
display:flex;
flex-direction:column;
gap:8px;
border:1px solid rgba(88,167,255,.20);
border-radius:16px;
padding:16px;
background:
linear-gradient(145deg, rgba(8,28,48,.56), rgba(4,10,18,.82) 62%),
rgba(3,10,19,.72);
box-shadow:0 22px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.055);
}

.legal-nav-card a{
border-radius:10px;
padding:10px 12px;
color:rgba(246,248,248,.70);
font-size:14px;
font-weight:800;
line-height:1.25;
text-decoration:none;
transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}

.legal-nav-card a:hover{
color:#fff;
background:rgba(88,167,255,.13);
box-shadow:inset 0 0 0 1px rgba(88,167,255,.18);
}

.legal-panel{
border:1px solid rgba(88,167,255,.28);
border-radius:18px;
padding:34px 38px 38px;
background:
radial-gradient(circle at 16% 0%, rgba(22,136,248,.13), transparent 48%),
linear-gradient(145deg, rgba(8,28,48,.74), rgba(4,10,18,.92) 62%);
box-shadow:
0 30px 78px rgba(0,0,0,.26),
0 0 32px rgba(22,136,248,.07),
inset 0 1px 0 rgba(255,255,255,.08);
}

.legal-section{
scroll-margin-top:102px;
padding:0 0 30px;
margin:0 0 30px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.legal-section:last-child{
margin-bottom:0;
padding-bottom:0;
border-bottom:0;
}

.legal-section h2{
margin:0 0 14px;
color:#fff;
font-size:30px;
line-height:1.12;
}

.legal-section p{
margin:0;
color:rgba(246,248,248,.70);
font-size:16px;
line-height:1.7;
}

.legal-section p + p,
.legal-section p + ul,
.legal-section ul + p{
margin-top:12px;
}

.legal-section ul{
margin:14px 0 0;
padding-left:0;
list-style:none;
}

.legal-section li{
position:relative;
margin:10px 0;
padding-left:22px;
color:rgba(246,248,248,.70);
font-size:16px;
line-height:1.6;
}

.legal-section li::before{
content:"";
position:absolute;
top:.72em;
left:0;
width:7px;
height:7px;
border-radius:50%;
background:#1688f8;
box-shadow:0 0 14px rgba(22,136,248,.32);
}

.legal-section a{
color:#58a7ff;
font-weight:850;
}

.legal-section a:hover{
color:#79bbff;
text-decoration:none;
}

.faq{
max-width:860px;
margin-left:auto;
margin-right:auto;
}

.faq details{
border-radius:8px;
background:rgba(255,255,255,.04);
}

.site-footer{
width:100%;
margin-top:0;
padding:30px 22px 34px;
border-top:0;
}

.footer-shell{
position:relative;
max-width:1240px;
padding:38px 40px 22px;
border-top:0;
border-radius:0;
background:transparent;
box-shadow:none;
}

.footer-shell::before{
content:"";
position:absolute;
z-index:1;
top:0;
left:-50px;
right:-50px;
height:1px;
background:rgba(88,167,255,.16);
pointer-events:none;
}

.footer-shell::after{
content:"";
position:absolute;
z-index:0;
top:1px;
left:-53px;
right:-53px;
height:330px;
background:
radial-gradient(ellipse 86% 300px at 50% 16px, rgba(22,136,248,.138), rgba(22,136,248,.059) 42%, rgba(22,136,248,.020) 72%, transparent 92%),
linear-gradient(180deg, rgba(0,0,0,.194), transparent 86%);
box-shadow:
0 30px 90px rgba(0,0,0,.227),
0 0 70px rgba(22,136,248,.081);
filter:blur(14px);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
pointer-events:none;
}

.footer-main{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(300px, 367px) repeat(3, minmax(150px, 181px)) minmax(90px, 1fr);
column-gap:clamp(24px, 2.4vw, 32px);
row-gap:26px;
align-items:start;
justify-items:start;
}

.footer-brand-line{
display:inline-flex;
align-items:center;
gap:12px;
color:var(--home-ink);
font-size:18px;
font-weight:850;
}

.footer-brand-line:hover{
text-decoration:none;
}

.footer-brand-icon{
width:34px;
height:34px;
border-radius:9px;
box-shadow:
0 0 0 1px rgba(255,255,255,.13),
0 10px 22px rgba(0,0,0,.28),
0 0 18px rgba(22,136,248,.14);
}

.footer-copy{
max-width:410px;
margin-top:12px;
color:rgba(246,248,248,.72);
font-size:15px;
line-height:1.55;
}

.footer-store{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
margin-top:20px;
min-height:38px;
padding:0 14px 0 12px;
border:1px solid rgba(139,215,199,.26);
border-radius:999px;
color:#fff;
background:linear-gradient(135deg, rgba(91,183,255,.66), rgba(44,216,217,.56));
box-shadow:
0 10px 20px rgba(0,0,0,.16),
inset 0 1px 0 rgba(255,255,255,.12);
font-size:14px;
font-weight:900;
transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.footer-store:hover{
color:#fff;
text-decoration:none;
background:linear-gradient(135deg, rgba(100,194,255,.72), rgba(51,226,226,.62));
box-shadow:
0 12px 24px rgba(0,0,0,.18),
inset 0 1px 0 rgba(255,255,255,.16);
transform:translateY(-1px);
}

.footer-ms-logo{
width:18px;
height:18px;
flex:0 0 auto;
transform-origin:center;
transition:transform .16s ease-out, filter .16s ease-out;
}

.footer-store:hover .footer-ms-logo,
.footer-store:focus-visible .footer-ms-logo{
transform:rotate(3deg) scale(1.04);
filter:drop-shadow(0 0 7px rgba(255,255,255,.18));
}

.footer-ms-logo rect{
stroke:rgba(0,18,34,.78);
stroke-width:1.1;
vector-effect:non-scaling-stroke;
}

.footer-ms-logo rect:nth-child(1){ fill:#f25022; }
.footer-ms-logo rect:nth-child(2){ fill:#7fba00; }
.footer-ms-logo rect:nth-child(3){ fill:#00a4ef; }
.footer-ms-logo rect:nth-child(4){ fill:#ffb900; }

.footer-nav{
display:flex;
flex-direction:column;
gap:10px;
}

.footer-nav h2{
margin:0 0 4px;
color:var(--home-ink);
font-size:12px;
font-weight:900;
letter-spacing:.08em;
line-height:1.2;
text-transform:uppercase;
}

.footer-nav a{
color:rgba(246,248,248,.78);
font-size:14px;
line-height:1.35;
}

.footer-nav a:hover{
color:#64b5ff;
text-decoration:none;
}

.footer-legal-row{
position:relative;
z-index:1;
display:flex;
justify-content:space-between;
gap:18px;
margin-top:24px;
padding-top:15px;
border-top:1px solid rgba(255,255,255,.07);
color:rgba(246,248,248,.38);
font-size:12px;
line-height:1.45;
}

.footer-legal-row p{
margin:0;
}

.footer-disclaimer{
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:12px;
}

@media (max-width: 1060px){
.section h2{
font-size:40px;
}

.guide-hero{
padding-top:126px;
}

.guide-hero-inner{
grid-template-columns:1fr;
gap:34px;
}

.guide-copy{
max-width:820px;
margin:0 auto;
text-align:center;
}

.guide-copy h1{
font-size:52px;
}

.guide-copy p{
margin-left:auto;
margin-right:auto;
}

.guide-meta-row{
justify-content:center;
}

.guide-cta-card{
max-width:720px;
margin:0 auto;
}

.guide-summary-grid{
grid-template-columns:1fr;
max-width:720px;
}

.guide-layout{
grid-template-columns:1fr;
max-width:820px;
}

.guide-nav-card{
position:relative;
top:auto;
flex-direction:row;
flex-wrap:wrap;
}

.contact-hero{
padding-top:126px;
}

.contact-hero-inner{
grid-template-columns:1fr;
gap:34px;
}

.contact-copy{
max-width:820px;
margin:0 auto;
text-align:center;
}

.contact-copy h1{
font-size:52px;
}

.contact-copy p{
margin-left:auto;
margin-right:auto;
}

.contact-panel{
max-width:720px;
margin:0 auto;
}

.contact-help-grid{
grid-template-columns:1fr;
max-width:720px;
}

.legal-hero{
padding-top:124px;
}

.legal-hero h1{
font-size:52px;
white-space:normal;
}

.legal-summary-grid{
grid-template-columns:repeat(2, minmax(0, 1fr));
max-width:720px;
}

.legal-layout{
grid-template-columns:1fr;
max-width:820px;
}

.legal-nav-card{
position:relative;
top:auto;
flex-direction:row;
flex-wrap:wrap;
}

.topbar{
padding-left:14px;
padding-right:14px;
}

.topbar-inner{
padding-left:14px;
padding-right:12px;
}

.nav{
display:none;
}

.hero-modern h1{
font-size:50px;
}

.control-path-layout{
grid-template-columns:1fr;
}

.control-path-problem h3{
max-width:none;
}

.reviews-head{
grid-template-columns:1fr;
gap:20px;
align-items:start;
}

.reviews-rating-pill{
transform:none;
width:max-content;
max-width:100%;
}

.reviews-grid{
grid-template-columns:1fr;
max-width:720px;
margin-left:auto;
margin-right:auto;
}

#guides.help-support-section{
max-width:860px;
}

.help-support-shell{
padding:32px 34px 36px;
}

.help-support-layout{
grid-template-columns:1fr;
gap:34px;
}

.help-support-head{
margin-bottom:34px;
}

.help-support-head h2{
font-size:42px;
}

.product-demo-shell{
min-height:0;
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"intro"
"settings"
"aside"
"main"
"proof"
"note";
gap:18px;
}

.product-demo-copy,
.product-demo-settings-window,
.product-demo-settings-copy,
.product-demo-main-card,
.product-proof-strip,
.product-demo-note{
position:relative;
top:auto;
left:auto;
right:auto;
bottom:auto;
width:100%;
margin:0;
}

.product-demo-copy{
max-width:760px;
margin:0 auto 18px;
padding-top:0;
text-align:center;
}

.product-demo-copy h2{
font-size:46px;
white-space:normal;
}

.product-demo-settings-window{
width:min(100%, 620px);
max-width:none;
margin:0 auto;
}

.product-demo-settings-copy{
max-width:560px;
margin:0 auto;
text-align:center;
}

.product-demo-settings-copy span::after{
margin-left:auto;
margin-right:auto;
}

.product-demo-main-card{
display:grid;
grid-template-columns:minmax(220px, .85fr) minmax(300px, 1.15fr);
align-items:center;
gap:24px;
padding:26px;
margin-top:0;
}

.product-demo-main-card::after{
display:none;
}

.product-demo-main-card .main-window-dark-crop{
position:relative;
right:auto;
top:auto;
width:100%;
transform:translateZ(0);
will-change:auto;
}

.product-proof-strip{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.product-proof-strip div:nth-child(2){
border-right:0;
}

.product-proof-strip div:nth-child(-n+2){
border-bottom:1px solid rgba(255,255,255,.10);
}

.product-demo-note{
text-align:center;
}
}

@media (max-width: 720px){
.nav{
display:none;
}

.guide-hero{
padding:104px 16px 48px;
}

.guide-copy h1{
font-size:38px;
}

.guide-copy p{
font-size:16px;
}

.guide-meta-row span{
min-height:32px;
padding:0 12px;
font-size:13px;
}

.guide-cta-card{
padding:20px;
border-radius:16px;
}

.guide-cta-card h2{
font-size:25px;
}

.guide-store-badge{
min-height:86px;
gap:10px;
padding:12px;
}

.guide-store-badge .ms-mark{
width:42px;
height:42px;
border-radius:10px;
}

.guide-store-badge .ms-logo{
width:24px;
height:24px;
}

.guide-store-badge .small{
font-size:18px;
}

.guide-store-badge .big{
font-size:15px;
}

.guide-summary-grid,
.guide-layout{
padding-left:16px;
padding-right:16px;
}

.guide-panel{
padding:24px 22px 26px;
border-radius:16px;
}

.guide-section h2{
font-size:25px;
}

.guide-section p,
.guide-section li{
font-size:15px;
}

.guide-method-grid,
.guide-related-grid{
grid-template-columns:1fr;
}

.guide-final-cta{
display:grid;
gap:18px;
padding:22px;
}

.guide-final-cta h2{
font-size:23px;
}

.guide-final-button{
width:100%;
white-space:normal;
text-align:center;
}

.contact-hero{
padding:104px 16px 48px;
}

.contact-copy h1{
font-size:38px;
}

.contact-copy p{
font-size:16px;
}

.contact-direct{
width:100%;
justify-content:center;
padding:0 14px;
font-size:14px;
}

.contact-panel{
padding:22px;
border-radius:16px;
}

.contact-actions{
display:grid;
}

.contact-actions .btn{
width:100%;
}

.contact-help-grid{
padding-left:16px;
padding-right:16px;
padding-bottom:40px;
}

.legal-hero{
padding:104px 16px 34px;
}

.legal-hero h1{
font-size:36px;
}

.legal-title-brand{
display:block;
}

.legal-hero p{
font-size:16px;
}

.legal-summary-grid,
.legal-layout{
padding-left:16px;
padding-right:16px;
}

.legal-summary-grid{
grid-template-columns:1fr;
}

.legal-panel{
padding:24px 22px 26px;
border-radius:16px;
}

.legal-section h2{
font-size:25px;
}

.legal-section p,
.legal-section li{
font-size:15px;
}

.topbar{
padding:0 12px 0;
}

.topbar-inner{
height:58px;
padding-left:12px;
padding-right:10px;
}

.nav-store{
min-height:38px;
gap:9px;
padding:0 14px 0 12px;
font-size:13px;
}

.nav-ms-logo{
width:18px;
height:18px;
}

.sticky-stack.is-scrolled .topbar{
padding-top:0;
}

.sticky-stack.is-scrolled .topbar-inner{
height:50px;
padding-left:10px;
padding-right:9px;
}

.sticky-stack.is-scrolled .brand-logo{
width:26px;
height:26px;
border-radius:7px;
}
.sticky-stack.is-scrolled .brand::before{
width:26px;
height:26px;
border-radius:7px;
background-image:url("/assets/display-dimmer-logo-header-52.png");
}

.sticky-stack.is-scrolled .nav-store{
min-height:34px;
padding-left:12px;
padding-right:13px;
font-size:12px;
}

.sticky-stack.is-scrolled .nav-ms-logo{
width:16px;
height:16px;
}

.home-main > .section{
padding:58px 16px;
}

.section h2{
font-size:34px;
}

#testimonials.section{
padding-top:60px;
padding-bottom:66px;
}

.reviews-eyebrow{
width:auto;
}

.reviews-head h2{
font-size:40px;
}

.reviews-head p{
font-size:17px;
}

.reviews-rating-pill{
border-radius:18px;
flex-wrap:wrap;
white-space:normal;
}

.reviews-head{
grid-template-columns:minmax(0, 1fr);
}

.reviews-head > *,
.reviews-rating-pill{
min-width:0;
width:100%;
max-width:100%;
}

.reviews-rating-pill{
justify-content:center;
text-align:center;
}

.reviews-card{
min-height:0;
padding:21px;
}

.reviews-card-featured{
transform:none;
}

.reviews-card .reviews-quote{
font-size:19px;
}

#guides.help-support-section{
padding-top:54px;
padding-bottom:38px;
}

.help-support-shell{
padding:26px 18px 28px;
border-radius:10px;
}

.help-support-badge{
margin-bottom:18px;
padding:7px 12px;
font-size:12px;
}

.help-support-head{
margin-bottom:24px;
text-align:left;
}

.help-support-head h2{
font-size:34px;
}

.help-support-head p{
font-size:16px;
}

.help-support-topics{
justify-content:flex-start;
gap:8px;
margin-top:12px;
}

.help-support-topics span{
min-height:30px;
padding:0 12px;
font-size:13px;
}

.help-column-title h3{
font-size:21px;
}

.help-guide-row{
grid-template-columns:44px minmax(0, 1fr) auto;
gap:13px;
min-height:74px;
padding:13px;
}

.help-guide-icon{
width:40px;
height:40px;
}

.help-guide-icon svg{
width:24px;
height:24px;
}

.help-guide-copy strong,
.help-support-section .help-faq-list summary{
font-size:16px;
}

.help-guide-copy small,
.help-support-section .help-faq-list .answer{
font-size:14px;
}

.help-support-section .help-faq-list summary{
min-height:58px;
padding:16px 52px 16px 16px;
}

.help-support-section .help-faq-list summary::after{
right:15px;
}

.help-support-section .help-faq-list .answer{
padding:0 16px 18px;
}

.hero-modern{
padding:102px 0 48px;
background-image:url("/assets/display-dimmer-hero-gradient.png?v=20260518-user-gradient-alpha65");
background-image:image-set(
url("/assets/display-dimmer-hero-gradient-mobile.webp?v=20260523-gradient-webp") type("image/webp"),
url("/assets/display-dimmer-hero-gradient.png?v=20260518-user-gradient-alpha65") type("image/png")
);
}

.hero-modern-inner{
padding:0 16px;
}

.hero-modern-copy{
width:100%;
max-width:360px;
}

.hero-modern h1{
max-width:100%;
font-size:44px;
overflow-wrap:break-word;
}

.hero-modern h1 span{
display:inline-block;
}

.hero-modern .sub{
font-size:16px;
}

.hero-modern .seo{
font-size:14px;
}

.hero-modern .cta-row,
.hero-proof{
width:100%;
}

.hero-modern .store-badge,
.featured-store-badge{
min-width:0;
width:100%;
max-width:100%;
min-height:112px;
gap:16px;
padding:18px;
}

.hero-modern .store-badge .store-text,
.featured-store-badge .store-text{
min-width:0;
}

.hero-modern .store-badge .ms-mark,
.featured-store-badge .ms-mark{
width:64px;
height:64px;
}

.hero-modern .store-badge .ms-logo,
.featured-store-badge .ms-logo{
width:34px;
height:34px;
}

.hero-modern .store-badge .small,
.featured-store-badge .small{
font-size:28px;
white-space:normal;
overflow-wrap:break-word;
}

.hero-modern .store-badge .big,
.featured-store-badge .big{
font-size:19px;
white-space:normal;
overflow-wrap:break-word;
}

#pro .featured-store-badge{
min-height:96px;
gap:14px;
padding:16px;
}

#pro .featured-store-badge .ms-mark{
width:58px;
height:58px;
}

#pro .featured-store-badge .ms-logo{
width:31px;
height:31px;
}

#pro .featured-store-badge .small{
font-size:21px;
}

#pro .featured-store-badge .big{
font-size:18px;
}

.hero-modern .trust-row{
width:100%;
max-width:100%;
flex-wrap:wrap;
flex-direction:column;
gap:8px 12px;
padding:12px 16px;
border-radius:24px;
font-size:14px;
text-align:center;
}

.hero-modern .trust-sep{
display:none;
}

.guide-list{
grid-template-columns:1fr;
}

.control-path-section{
border-radius:0;
border-left:0;
border-right:0;
}

.control-path-badge{
margin-left:0;
}

.control-path-head{
text-align:left;
}

.home-main > #features .control-path-head h2{
font-size:34px;
}

.control-path-head p{
font-size:16px;
}

.control-path-chips{
justify-content:flex-start;
}

.control-path-problem,
.control-path-solution{
padding:22px;
}

.control-path-problem h3,
.control-path-solution-head h3{
font-size:26px;
}

.control-path-card-grid{
grid-template-columns:1fr;
}

.control-path-card{
grid-template-columns:44px 1fr;
min-height:0;
padding:18px;
}

.control-path-icon{
width:40px;
height:40px;
padding:7px;
}

.product-demo-section{
padding-top:86px;
}

#pro.section{
padding-top:52px;
padding-bottom:52px;
}

.plan-grid{
grid-template-columns:1fr;
}

.plan-card{
padding:20px;
min-width:0;
}

.plan-card-head{
display:block;
}

.plan-card h3{
font-size:30px;
}

.plan-card-head p{
font-size:16px;
}

.plan-pill{
display:inline-flex;
margin-top:16px;
}

.plan-price{
display:inline-block;
margin-top:16px;
max-width:100%;
text-align:left;
}

.plan-buy-link{
width:100%;
min-width:0;
white-space:normal;
text-align:center;
}

.plan-list{
gap:14px;
}

.plan-list li{
grid-template-columns:26px 1fr;
gap:12px;
font-size:17px;
}

.plan-list li span{
width:26px;
height:26px;
}

.product-demo-copy{
margin-bottom:12px;
}

.product-demo-copy h2{
font-size:38px;
}

.product-demo-copy p{
font-size:16px;
}

.demo-pill{
padding:8px 13px;
font-size:11px;
}

.product-demo-shell{
min-height:0;
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"intro"
"settings"
"aside"
"main"
"proof"
"note";
gap:18px;
}

.product-demo-copy,
.product-demo-settings-window,
.product-demo-settings-copy,
.product-demo-main-card,
.product-proof-strip,
.product-demo-note{
position:relative;
top:auto;
left:auto;
right:auto;
bottom:auto;
width:100%;
margin:0;
}

.product-demo-copy{
max-width:760px;
margin:0 auto 18px;
padding-top:0;
text-align:center;
}

.product-demo-copy h2{
font-size:46px;
white-space:normal;
}

.product-demo-settings-window{
width:min(100%, 620px);
max-width:none;
margin:0 auto;
}

.product-demo-settings-copy{
max-width:560px;
margin:0 auto;
text-align:center;
}

.product-demo-settings-copy span::after{
margin-left:auto;
margin-right:auto;
}

.product-demo-main-card{
display:grid;
grid-template-columns:minmax(220px, .85fr) minmax(300px, 1.15fr);
align-items:center;
gap:24px;
padding:26px;
margin-top:0;
}

.product-demo-main-card::after{
display:none;
}

.product-demo-main-card .main-window-dark-crop{
position:relative;
right:auto;
top:auto;
width:100%;
transform:translateZ(0);
will-change:auto;
}

.product-proof-strip{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.product-proof-strip div:nth-child(2){
border-right:0;
}

.product-proof-strip div:nth-child(-n+2){
border-bottom:1px solid rgba(255,255,255,.10);
}

.product-demo-note{
text-align:center;
}
}

@media (max-width: 720px){
.site-footer{
padding:24px 16px 28px;
}

.footer-shell{
padding:24px 20px 20px;
border-radius:0;
}

.footer-shell::before{
left:-16px;
right:-16px;
}

.footer-shell::after{
left:-12px;
right:-12px;
}

.footer-main{
grid-template-columns:1fr;
gap:26px;
}

.footer-brand{
grid-column:auto;
}

.footer-copy{
font-size:14px;
}

.footer-legal-row{
flex-direction:column;
gap:10px;
margin-top:18px;
}

.footer-disclaimer{
justify-content:flex-start;
}
}

@media (max-width: 720px){
.guide-cta-card .guide-store-badge{
min-height:86px;
gap:10px;
padding:12px;
}

.guide-cta-card .guide-store-badge .ms-mark{
width:42px;
height:42px;
border-radius:10px;
}

.guide-cta-card .guide-store-badge .ms-logo{
width:24px;
height:24px;
}

.guide-cta-card .guide-store-badge .small{
font-size:18px;
white-space:nowrap;
overflow-wrap:normal;
}

.guide-cta-card .guide-store-badge .big{
font-size:15px;
white-space:nowrap;
overflow-wrap:normal;
}
}

@media (max-width: 980px){
.product-video-frame.product-demo-settings-window{
transform:translateZ(0);
will-change:auto;
}
}

@media (max-width: 720px){
.product-demo-main-card{
grid-template-columns:1fr;
gap:18px;
padding:20px;
}

.product-demo-settings-window,
.product-demo-main-card .main-window-dark-crop{
max-width:100%;
}
}

@media (min-width:981px){
.product-demo-shell::before{
top:-32px;
}

.product-video-frame.product-demo-settings-window{
transform:translateY(51px) translateZ(0) !important;
}
}

@media (max-width:560px){
.product-proof-strip{
grid-template-columns:1fr;
}

.product-proof-strip div{
grid-template-columns:54px minmax(0, 1fr);
column-gap:16px;
min-height:92px;
padding:18px 20px;
border-right:0;
border-bottom:1px solid rgba(255,255,255,.10);
}

.product-proof-strip div:last-child{
border-bottom:0;
}

.product-proof-strip div > .proof-icon{
width:52px;
height:52px;
}

.product-proof-strip strong{
font-size:17px;
line-height:1.18;
}

.product-proof-strip small{
font-size:15px;
line-height:1.36;
}
}

@media (min-width:981px){
.product-demo-settings-window{
z-index:6;
}

.product-demo-main-card{
z-index:auto;
}

.product-demo-main-card::after{
z-index:7;
}

.product-demo-main-card .main-window-dark-crop{
z-index:8;
}
}

@media (max-width: 720px){
.guides-index .guide-copy h1{
font-size:36px;
line-height:1.08;
}

.guides-index .guide-copy h1 span{
display:inline;
white-space:normal;
}
}