/* 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;
  overflow-x:hidden;
}

body{
  background:var(--home-bg);
  color:var(--home-ink);
  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: -42px;
  right:calc(-108px - 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(-108px - var(--main-window-scroll-shift));
  top: -42px;
  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-poster.png?v=20260511-2115") 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-poster.png?v=20260511-2120") 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.28% + 1px);
  top:.98%;
  width:4.10%;
}

.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;
}

.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;
  }
}