/* A composed opening scene gradually gives way to a quiet reading sky. */
.reading-stars{position:absolute;inset:920px 0 0;pointer-events:none;mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.7) 18%,rgba(0,0,0,.38) 32%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.7) 82%,#000)}
.sky-point{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#c5d4de;opacity:var(--star-opacity)}
.sky-spark{position:absolute;color:#93a8b8}
@media(max-width:960px){.sky-spark{display:none}}
.deep-space::after{display:none}
body{position:relative;isolation:isolate}
body::before{content:none}
.deep-space{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.deep-space::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1780px;
  background:url("assets/space-texture.webp") center top/100% 1320px no-repeat;
  mask-image:linear-gradient(#000 0%,#000 28%,rgba(0,0,0,.65) 47%,rgba(0,0,0,.16) 68%,transparent 87%);
}
.deep-space::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1px 1px at 9% 31%,rgba(172,184,199,.4) 90%,transparent),
    radial-gradient(1px 1px at 88% 35%,rgba(172,184,199,.3) 90%,transparent),
    radial-gradient(1px 1px at 20% 43%,rgba(172,184,199,.2) 90%,transparent),
    radial-gradient(1px 1px at 73% 49%,rgba(172,184,199,.22) 90%,transparent),
    radial-gradient(1px 1px at 6% 56%,rgba(172,184,199,.3) 90%,transparent),
    radial-gradient(1px 1px at 93% 63%,rgba(172,184,199,.27) 90%,transparent),
    radial-gradient(1px 1px at 33% 72%,rgba(172,184,199,.19) 90%,transparent),
    radial-gradient(1px 1px at 81% 82%,rgba(172,184,199,.2) 90%,transparent),
    radial-gradient(1px 1px at 12% 91%,rgba(172,184,199,.3) 90%,transparent);
}
.space-cloud{
  position:absolute;width:1040px;height:1040px;
  background:url("assets/space-texture.webp") center/cover no-repeat;
  mask-image:radial-gradient(ellipse closest-side,#000 0%,transparent 96%);
}
.cloud-one{top:820px;right:calc(50% - 1200px);transform:rotate(24deg);opacity:.18}
.cloud-two{top:43%;left:calc(50% - 1280px);transform:rotate(-30deg);opacity:.09}
.cloud-three{bottom:-150px;right:calc(50% - 1230px);transform:rotate(18deg);opacity:.11}
.space-scene .space-texture{display:none}
.space-scene::after{background:radial-gradient(ellipse 38% 27% at 50% 33%,rgba(6,10,19,.34),transparent)}
.planet-left{width:420px;left:clamp(-240px,calc(50% - 1010px),-100px);top:310px;transform:rotate(-29deg);filter:hue-rotate(325deg)}
.planet-right{width:350px;right:clamp(-235px,calc(50% - 1030px),-100px);top:485px;transform:rotate(21deg);filter:hue-rotate(12deg)}
.planet-ring{width:145px;right:calc(50% - 520px);top:157px;transform:rotate(-12deg)}
.ink-star{color:#65737d;opacity:.38;filter:none}
.star-a{width:92px;height:176px;left:calc(50% - 475px);top:540px;transform:rotate(-5deg)}
.star-b{width:46px;height:96px;right:calc(50% - 540px);top:285px;color:#84939c;opacity:.32;transform:rotate(7deg)}
.use-cases::after{display:none}
.feature-art{background:radial-gradient(ellipse,rgba(41,226,204,.045),transparent 70%)}
.price-panel{background:radial-gradient(ellipse at 0 0,rgba(41,226,204,.06),transparent 68%),linear-gradient(130deg,#10262e,#101c2d)}
.final-cta{background:radial-gradient(ellipse at 50% 110%,rgba(41,226,204,.065),transparent 65%)}
.final-cta .mini-planet{width:110px;opacity:.7}
@media(min-width:1700px){
  .planet-left{width:470px;left:calc(50% - 1120px);top:290px}
  .planet-right{width:390px;right:calc(50% - 1140px);top:495px}
  .planet-ring{right:calc(50% - 610px);top:165px}
}
@media(max-width:1100px){
  .planet-left{width:340px;left:-245px;top:340px}
  .planet-right{width:290px;right:-220px;top:520px}
  .planet-ring{right:32px;top:146px;width:110px}
  .star-a{left:62px;top:545px;width:62px;height:128px}
  .star-b{right:38px;top:336px;width:32px;height:70px}
  .cloud-one{right:-820px}.cloud-two{left:-900px}.cloud-three{right:-850px}
}
@media(max-width:680px){
  .deep-space::before{
    height:1420px;background-size:900px 1080px;background-position:center top;
    mask-image:linear-gradient(#000 0%,rgba(0,0,0,.75) 30%,rgba(0,0,0,.24) 60%,transparent 95%);
  }
  .planet-left{width:225px;left:-192px;top:300px;opacity:.65}
  .planet-right{width:210px;right:-185px;top:600px;opacity:.45}
  .planet-ring{width:85px;right:10px;top:95px;opacity:.6}
  .star-a{left:15px;top:575px;width:30px;height:70px;opacity:.25}
  .star-b{display:none}
  .space-cloud{width:800px;height:1000px}
  .cloud-one{top:850px;right:-650px;opacity:.08}
  .cloud-two{top:43%;left:-680px;opacity:.05}
  .cloud-three{bottom:-100px;right:-650px;opacity:.06}
}

/* Rare shooting stars sit in the document sky, behind all reading content. */
.comet-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.space-comet{position:absolute;height:2px;border-radius:50%;transform-origin:right center;background:linear-gradient(90deg,transparent,rgba(89,167,204,.12) 30%,rgba(152,230,236,.7) 85%,#eefeff);opacity:0;will-change:transform,opacity}
.space-comet::after{content:"";position:absolute;right:-2px;top:-1px;width:4px;height:4px;border-radius:50%;background:#edffff;box-shadow:0 0 7px rgba(153,239,255,.7)}
.motion-toggle{font:inherit;line-height:24px;color:#8396ac;background:none;border:0;padding:6px 0;cursor:pointer;text-align:left}
.motion-toggle:hover{color:#c0eadf}
@media(prefers-reduced-motion:reduce){.comet-layer{display:none}}