/* chapters: a glass panel rides sticky beside the moving devices */
.chap{position:relative;min-height:165vh;padding:0 var(--gut);display:flex}
.chap.left{justify-content:flex-start}.chap.right{justify-content:flex-end}
.panel{position:sticky;top:24vh;align-self:flex-start;margin-top:26vh;width:min(490px,100%);padding:clamp(24px,3vw,40px);
  opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 46px)) rotateX(calc((1 - var(--r,1)) * 14deg));transform-origin:50% 100%}
.panel h2{font-size:clamp(2.4rem,4.4vw,4rem);margin-bottom:1rem}
.panel p{color:#d3dcf5}
.panel .price{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.05;margin:.6rem 0 .2rem}
.panel .price small{font:500 .9rem/1.3 Inter,sans-serif;color:var(--mut);display:block;margin-top:.25rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin-top:1.4rem}
.tags li{padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);color:var(--lilac)}
.panel .btn{margin-top:1.2rem}

/* pricing */
.pricing{position:relative;padding:clamp(80px,14vh,160px) var(--gut) clamp(40px,8vh,90px);background:linear-gradient(rgba(4,10,28,0),rgba(4,10,28,.55) 18%,rgba(4,10,28,.55) 82%,rgba(4,10,28,0))}
.pricing-head,.compare h2,.compare p.lead,.proc-head,.faq h2,.cards-head,.start-copy{text-shadow:0 2px 18px rgba(4,10,28,.95),0 0 4px rgba(4,10,28,.8)}
.pricing-head{max-width:46em;margin-bottom:clamp(28px,5vh,56px)}
.pricing-head p{color:#d3dcf5;margin-top:1rem;max-width:36em}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);align-items:stretch}
.plan{padding:clamp(22px,2.6vw,34px);display:flex;flex-direction:column;opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 60px))}
.plan.hot{border-color:rgba(79,184,255,.6);box-shadow:0 30px 80px rgba(47,123,255,.35),inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(79,184,255,.25)}
.plan .tag{color:var(--blue)}
.plan h3{font-size:clamp(1.7rem,2.4vw,2.3rem);margin:.6rem 0 .3rem}
.plan .amt{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;margin:.6rem 0 .2rem}
.plan .amt span{font-size:.5em;color:var(--lilac)}
.plan .per{color:var(--mut);font-size:.95rem;margin-bottom:1rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.5rem;color:#d3dcf5;font-size:.95rem}
.plan li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:linear-gradient(120deg,#2f7bff,#8b5cff);margin-right:.65rem;vertical-align:middle}
.plan .btn{margin-top:auto;justify-self:start;align-self:flex-start}
.fine{color:var(--mut);font-size:.9rem;margin-top:1.4rem;max-width:60em}

/* compare */
.compare{padding:clamp(40px,8vh,100px) var(--gut)}
.compare h2{font-size:clamp(2.2rem,4.4vw,4rem);max-width:12em;margin-bottom:1rem}
.compare p.lead{color:#d3dcf5;max-width:40em;margin-bottom:clamp(20px,4vh,40px)}
.bars{display:grid;gap:14px;max-width:820px}
.bar{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;gap:14px;align-items:center;font-size:.95rem;opacity:var(--r,1);transform:translateX(calc((1 - var(--r,1)) * -30px))}
.bar .lab{color:#d3dcf5;text-shadow:0 1px 10px rgba(4,10,28,.9)}
.bar .fill{height:14px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid var(--line)}
.bar .fill i{display:block;height:100%;width:calc(var(--w) * var(--r,1));background:linear-gradient(90deg,#2f7bff,#8b5cff);border-radius:999px}
.bar.me .fill i{background:linear-gradient(90deg,#4fb8ff,#7c5cff);box-shadow:0 0 18px rgba(79,184,255,.6)}
.bar .amt{font-family:"JetBrains Mono",monospace;font-size:.85rem;color:var(--lilac);white-space:nowrap}
.bar.me .amt{color:#fff}
.compare .fine{margin-top:1rem}

/* process */
.process{position:relative;padding:clamp(80px,14vh,170px) var(--gut) clamp(60px,10vh,120px);
  clip-path:ellipse(calc(70% + var(--open,0) * 60%) calc(40% + var(--open,0) * 70%) at 50% 100%);background:linear-gradient(rgba(4,10,28,0),rgba(4,10,28,.55) 30%)}
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:clamp(30px,6vh,70px)}
.proc-head .big{max-width:9em}
.badge{width:clamp(90px,11vw,140px);flex:none;color:var(--lilac);will-change:transform}
.badge text{font-size:11.2px;letter-spacing:.2em;fill:currentColor;text-transform:uppercase}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)}
.cols article{padding:clamp(22px,2.6vw,36px);opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 60px))}
.cols article span{color:var(--blue)}
.cols h3{font-size:clamp(1.7rem,2.4vw,2.3rem);margin:.8rem 0 .7rem}
.cols p{color:#d3dcf5}

/* faq */
.faq{padding:clamp(40px,8vh,100px) var(--gut);display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,5vw,80px);align-items:start}
.faq h2{font-size:clamp(2.4rem,5vw,4.6rem);position:sticky;top:18vh}
.qa{display:grid;gap:12px}
.qa details{padding:0;border-radius:18px;opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 34px))}
.qa summary{list-style:none;cursor:pointer;padding:1.15rem 1.4rem;display:flex;justify-content:space-between;gap:1rem;font-weight:500}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--lilac);font-size:1.4rem;line-height:1}
.qa details[open] summary::after{content:"\2212"}
.qa details p{padding:0 1.4rem 1.3rem;color:#d3dcf5}

/* footer */
.foot-main{margin-top:clamp(40px,8vh,100px);padding:clamp(40px,8vh,90px) var(--gut) 30px;background:linear-gradient(rgba(4,10,28,0),rgba(4,10,28,.92) 40%);overflow:hidden}
.word{font-size:clamp(4rem,17vw,16rem);line-height:.82;font-family:Inter,sans-serif;font-weight:800;letter-spacing:.02em;color:transparent;background:linear-gradient(180deg,#d4ddff,#3f5fff 85%);-webkit-background-clip:text;background-clip:text;transform:translateY(calc((1 - var(--r,1)) * 22%));opacity:var(--r,1);white-space:nowrap}
.foot-grid{text-shadow:0 1px 10px rgba(4,10,28,.9);display:grid;grid-template-columns:1.5fr 1fr 1.5fr;gap:2rem;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--mut);font-size:.92rem}
.foot-grid nav{display:grid;gap:.4rem}.foot-grid nav a:hover{color:var(--ink)}
.foot-grid a.em{color:var(--lilac)}
.credit a{color:var(--lilac);text-decoration:underline}

@media (max-width:760px){
  .chap{min-height:150vh}
  .panel{top:auto;bottom:4vh;margin-top:60vh;width:100%;padding:22px 20px;background:linear-gradient(135deg,rgba(14,28,70,.95),rgba(6,14,38,.96))}
  .panel h2{font-size:2.2rem;margin-bottom:.6rem}
  .tags{display:none}
  .plans,.cols,.faq,.foot-grid{grid-template-columns:1fr}
  .faq h2{position:static}
  .proc-head{flex-direction:column;align-items:flex-start}
  .bar{grid-template-columns:1fr;gap:6px}
  .word{font-size:19vw}
}
@media (prefers-reduced-motion:reduce){
  .panel,.plan,.bar,.cols article,.qa details,.word{opacity:1!important;transform:none!important}
  .bar .fill i{width:var(--w)!important}
  .process{clip-path:none}
}