*{box-sizing:border-box;margin:0;padding:0}
body{background:#08080a;color:#f2f2f5;
     font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
     -webkit-font-smoothing:antialiased}
.hero{min-height:74vh;display:flex;flex-direction:column;justify-content:center;
      padding:80px 24px;max-width:1080px;margin:0 auto}
.hero h1{font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-1.6px;font-weight:750}
.lede{margin-top:16px;font-size:clamp(14px,1.55vw,17px);color:#a0a0ad;line-height:1.55;max-width:34em}
.cta{display:inline-block;margin-top:24px;background:#f2f2f5;color:#08080a;font-weight:700;
     font-size:14.5px;padding:13px 24px;border-radius:7px;text-decoration:none;align-self:flex-start}
.meta{margin-top:11px;font-size:11.5px;color:#9a9aa8}
.hero-in{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.formats{margin-top:18px;font-size:11.5px;color:#8a8a99;line-height:1.6;max-width:30em}
.demo{display:flex;align-items:flex-end;gap:16px}
.cap{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:#8c8c9c;
     font-weight:700;margin-bottom:7px}
.arrow{color:#7e7e8f;font-size:17px;padding-bottom:26px}
.fan{display:flex;gap:7px;align-items:flex-end}
.ab{background:#eef1f7;border:1px solid #ccd3e1;border-radius:3px;position:relative;overflow:hidden}
.ab .ph{position:absolute;left:0;right:0;bottom:0;
        background:linear-gradient(160deg,#9fb0d0,#6d7fa4)}
.ab .t1{position:absolute;left:10%;right:10%;height:6px;border-radius:2px;background:#2f4fc4}
.ab .t2{position:absolute;left:10%;right:38%;height:4px;border-radius:2px;background:#9aa8c6}
@media (max-width:820px){
  .hero-in{grid-template-columns:1fr;gap:32px}
  .demo{flex-direction:column;align-items:center}
  .arrow{padding-bottom:0;transform:rotate(90deg)}
}
.scroller{height:600vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;
       flex-direction:column;align-items:center;justify-content:center}
.copy{position:absolute;top:8vh;left:0;right:0;text-align:center;padding:0 20px;height:130px}
.beat{position:absolute;left:0;right:0;top:0;padding:0 20px;opacity:0;
      transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.beat.on{opacity:1;transform:none}
.beat h2{font-size:clamp(24px,3.4vw,40px);letter-spacing:-1.2px;line-height:1.1;font-weight:750}
.beat p{margin-top:10px;font-size:clamp(12.5px,1.4vw,15px);color:#9a9aa8;line-height:1.5}
.field{position:relative;display:flex;justify-content:center;width:100%;margin-top:34px}
.row{display:flex;align-items:flex-start;transform-origin:center}
.slide{position:relative;flex:0 0 auto}
.art{position:relative;overflow:hidden;background:#eef1f7;border:1px solid #ccd3e1}
.art .ph{position:absolute;left:0;right:0;bottom:0;
         background:linear-gradient(160deg,#9fb0d0,#6d7fa4)}
.art .t1{position:absolute;left:9%;right:9%;height:6px;border-radius:2px;background:#2f4fc4}
.art .t2{position:absolute;left:9%;right:40%;height:4px;border-radius:2px;background:#9aa8c6}
.art .safe{position:absolute;left:0;right:0;border-top:1px dashed #ff4d8d;opacity:0}
/* Five slides across cannot work on a phone. Show one. This breakpoint
   must match the matchMedia('(max-width: 720px)') check in scroll.js,
   which also switches the fit-to-width math to size for one slide
   instead of five. */
@media (max-width:720px){
  .slide{display:none}
  .slide:nth-child(3){display:block}
  .copy{height:170px}
  .scroller{height:420vh}
}
@media (prefers-reduced-motion:reduce){
  .beat{transition:none}
  *{scroll-behavior:auto !important}
}
.band{max-width:1080px;margin:0 auto;padding:96px 24px;border-top:1px solid #1c1c22}
.band h2{font-size:clamp(22px,3vw,34px);letter-spacing:-1px;font-weight:750;margin-bottom:18px}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.tier{border:1px solid #22222a;border-radius:10px;padding:26px}
.tier.ghost{background:none;border-style:dashed}
.tname{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:#8a8a99;font-weight:700}
.tprice{font-size:38px;font-weight:750;letter-spacing:-1.6px;margin:6px 0 10px}
.tnote{font-size:12.5px;color:#8a8a99;line-height:1.55;margin-bottom:10px}
.tier ul{list-style:none;margin:16px 0 20px}
.tier li{font-size:13px;color:#c8c8d2;padding:5px 0 5px 18px;position:relative}
.tier li:before{content:"·";position:absolute;left:4px;color:#5a5a6a}
.ghost-cta{background:none;color:#f2f2f5;border:1px solid #3a3a46}
.steps{margin:16px 0 16px 20px;color:#c8c8d2;font-size:14px;line-height:1.9}
.small{font-size:12px;color:#8a8a99;line-height:1.6;max-width:44em;margin-top:12px}
code{background:#17171d;padding:1px 5px;border-radius:3px;font-size:.9em}
dl{margin-top:8px}
dt{font-weight:700;font-size:14.5px;margin-top:20px}
dd{color:#9a9aa8;font-size:13.5px;line-height:1.6;margin-top:5px;max-width:46em}
dd a{color:#f2f2f5;text-decoration:underline}
@media (max-width:820px){ .tiers{grid-template-columns:1fr} }