/* Landing (scrollytelling). Loaded after style.css. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
canvas#spine{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@media(max-width:900px){canvas#spine{opacity:.3}}
.bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--iris);z-index:20}
nav{position:fixed;top:0;left:0;right:0;z-index:9;max-width:none;padding:20px 24px 28px;background:linear-gradient(#000 55%,rgba(0,0,0,0))}
nav a.cta{color:#fff}
.hud{position:fixed;right:24px;bottom:24px;text-align:right;z-index:4;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);pointer-events:none}
.hud b{display:block;font-size:34px;font-weight:400;letter-spacing:-.03em;line-height:1.1;margin-top:2px}
.hud i{display:block;width:120px;height:2px;margin:8px 0 0 auto;background:#222}
.hud i span{display:block;height:100%;width:100%}
@media(max-width:900px){.hud{bottom:auto;top:20px;left:50%;right:auto;transform:translateX(-50%);z-index:10;font-size:0}.hud i{display:none}.hud b{font-size:16px;margin:0}}

.chap{min-height:auto;display:flex;align-items:center;padding-top:72px;padding-bottom:72px}
.col{max-width:540px}
.chap.hero{min-height:100vh;min-height:100svh;padding-top:120px}
.scroll{margin-top:60px;color:var(--ash);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.scroll::after{content:"";width:1px;height:36px;background:var(--ash);transform-origin:top;animation:drip 1.6s infinite}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* word reveal */
.js .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.js .split .w>span{display:inline-block;transform:translateY(115%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.js .split.in .w>span{transform:none}

/* stats */
.stats{display:flex;gap:48px;margin:36px 0 12px}
.stat b{display:block;font-size:clamp(56px,9vw,96px);font-weight:400;letter-spacing:-.05em;line-height:1}
.stat small{display:block;margin-top:6px;color:var(--ash);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.stat.good b{color:var(--spark)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chip{margin:0;background:transparent;color:#fff;border:1px solid #444;border-radius:9999px;padding:12px 18px;font-weight:400;text-transform:none;letter-spacing:0;font-size:16px;transition:all .2s}
.chip.on{background:var(--iris);border-color:var(--iris);transform:scale(1.05)}
.chipout{margin-top:24px;color:var(--spark);font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;min-height:1.2em}

/* sticky chapters */
.tall{position:relative}
.tall .stick{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.tall.fix{height:250vh}
.tall.streak{height:240vh}
#fix .stick>.chap{flex-direction:column;align-items:flex-start;justify-content:center}
.move{position:absolute;left:0;top:0;width:100%;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;max-width:540px}
.move.on{opacity:1;transform:none}
.stage{position:relative;min-height:340px;width:100%}
.dots{display:flex;gap:8px;margin-top:30px}
.dots span{width:8px;height:8px;border-radius:50%;background:#333;transition:background .3s,transform .3s}
.dots span.on{background:var(--iris);transform:scale(1.4)}
.big{font-size:clamp(72px,12vw,140px);font-weight:400;letter-spacing:-.05em;line-height:1}
.big small{font-size:.28em;color:var(--ash);letter-spacing:-.02em;margin-left:8px}
.grid14{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;max-width:440px;margin-top:30px}
.grid14 span{aspect-ratio:1;border-radius:50%;border:1px solid #444;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ash);transition:all .35s}
.grid14 span.on{background:var(--iris);border-color:var(--iris);color:#fff;transform:scale(1.1)}
.cap{margin-top:24px;color:var(--spark);font-size:14px;font-weight:600;letter-spacing:.025em;text-transform:uppercase;min-height:1.2em}

/* offer */
.offer-price{margin-top:24px;font-size:clamp(72px,12vw,140px);font-weight:400;letter-spacing:-.05em;line-height:1;color:var(--spark)}
.offer-price s{font-size:.2em;color:var(--ash);text-decoration:none;letter-spacing:-.01em;margin-left:12px}
.col ul{margin-top:24px}
button.big-cta{padding:18px 32px;font-size:15px;animation:glow 2.4s infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(128,82,255,.55)}50%{box-shadow:0 0 0 14px rgba(128,82,255,0)}}
details{margin-top:12px;font-weight:200;font-size:18px;color:var(--mist);max-width:540px}
details summary{cursor:pointer;color:#fff;font-weight:400;list-style:none;padding:12px 0}
details summary::before{content:"+ ";color:var(--iris)}
details[open] summary::before{content:"– "}
details p{margin-top:0}

@media(prefers-reduced-motion:reduce){
  .js .split .w>span{transform:none;transition:none}
  .move,.grid14 span,.dots span,.chip{transition:none}
  .scroll::after,button.big-cta{animation:none}
}

/* scroll bands */
.band{overflow:hidden;white-space:nowrap;padding:0;pointer-events:none}
.band span{display:inline-block;font-size:clamp(64px,12vw,180px);font-weight:400;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1px #3b3b3b;will-change:transform}
.chap h1,.chap h2,.chap p,.chap .label{will-change:translate}