/* /for/solopreneurs/: the story player, the chapter cards, the sign-up cards.
   The stage is dark in both themes (it is a screen); everything else uses the tokens. */
.lg-main.sl{max-width:1120px;grid-template-columns:minmax(0,1fr);padding-top:56px}
.sl .lg-head,.sl .lg-doc{max-width:none}
.sl-hero{text-align:center}
.sl-hero h1{margin-bottom:14px}
.sl-acc{color:var(--accent)}
.sl-hero .lg-lede{margin:0 auto 20px;max-width:46ch}
.sl-hero-ph{justify-content:center;margin-bottom:8px}
.sl-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;margin-top:28px}
.lg .sl-btn{text-decoration:none}
.sl-btn{display:flex;align-items:center;height:50px;padding:0 24px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:15px}
.sl-btn:hover{border-color:var(--text-3);color:var(--text)}

/* the player */
.ss{margin:28px 0 64px}
.ss-stage{position:relative;overflow:hidden;--ar:1.7778;aspect-ratio:16/9;border:1px solid #242a33;border-radius:28px;background:#0b0d10;color:#f5f7fa}
.ss-stage:focus-visible,.ss-b:focus-visible,.ss-go:focus-visible,.sl-ch:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ss-stop{position:absolute;inset:0}
.ss-stop[hidden]{display:none}
.ss-pic{position:absolute;inset:0;overflow:hidden}
.ss-pic img{position:absolute;display:block;max-width:none;height:auto;width:calc(var(--z)*100%);left:calc(50% - var(--x)*var(--z)*100%);top:calc(50% - var(--y)*var(--z)*0.8333*var(--ar)*100%);transform-origin:50% 50%;animation:ss-drift 5s ease-out both}
.ss-pic::after,.ss-mailpic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,0) 0,rgba(11,13,16,.1) 35%,rgba(11,13,16,.82) 72%,#0b0d10 100%)}
.ss-mailpic img{inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;animation:ss-drift 5s ease-out both}
.ss-mail{position:absolute;z-index:1;left:5%;top:9%;width:min(300px,46%);padding:18px 20px;border:1px solid #242a33;border-radius:16px;background:#12151a;color:#f5f7fa;font-size:clamp(13px,1.5vw,16px);box-shadow:0 20px 50px -20px rgba(0,0,0,.7)}
.ss-mail p{margin:0 0 8px;color:#a7b0bd}
.ss-mail .ss-mail-h{margin-bottom:12px;color:#f5f7fa;font-weight:600}
.ss-mail p:last-child{margin:0}
.ss-chip{position:absolute;z-index:1;right:6%;top:12%;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid #242a33;border-radius:999px;background:rgba(18,21,26,.92);font:500 14px/1 'Geist Mono',monospace;color:#f5f7fa}
.ss-chip i{width:9px;height:9px;border-radius:50%;background:#b8ff3c;box-shadow:0 0 0 0 rgba(184,255,60,.6);animation:ss-ping 1.6s ease-out infinite}
.ss-cap{position:absolute;z-index:2;left:clamp(20px,4vw,48px);right:clamp(20px,4vw,48px);bottom:clamp(20px,4.5vw,48px)}
.ss-time{display:inline-block;margin-bottom:12px;padding:6px 12px;border-radius:999px;background:#b8ff3c;color:#0b0d10;font:600 clamp(12px,1.3vw,14px)/1 'Geist Mono',monospace}
.ss-h{margin:0;font-size:clamp(30px,6vw,72px);line-height:1.02;font-weight:700;letter-spacing:-.035em;color:#f5f7fa;animation:ss-rise .6s cubic-bezier(.2,.8,.2,1) both}
.ss-p{margin:10px 0 0;font-size:clamp(16px,2.4vw,28px);line-height:1.25;letter-spacing:-.01em;color:#c4ccd7;animation:ss-rise .6s .12s cubic-bezier(.2,.8,.2,1) both}
.ss-ctl{position:absolute;z-index:3;top:16px;right:16px;display:flex;gap:8px}
.ss-b{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #2f3742;border-radius:50%;background:rgba(18,21,26,.82);color:#f5f7fa;cursor:pointer}
.ss-b[hidden],.ss-ctl[hidden]{display:none}
.ss-b:hover{border-color:#7b8492}
.ss-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ss-pp .ss-i-play{display:none;fill:currentColor}
.ss-paused .ss-pp .ss-i-pause{display:none}
.ss-paused .ss-pp .ss-i-play{display:block}
.ss-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ss-strip[hidden]{display:none}
.ss-go{position:relative;display:block;width:100%;padding:14px 0 0;border:0;background:none;color:var(--text-2);cursor:pointer;text-align:left}
.ss-go::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;border-radius:4px;background:var(--border)}
.ss-fill{position:absolute;left:0;top:0;height:4px;width:0;border-radius:4px;background:var(--accent)}
.ss-go[data-done] .ss-fill{width:100%}
.ss-go[aria-current=true] .ss-fill{animation:ss-fill 5s linear both}
.ss-paused .ss-go[aria-current=true] .ss-fill{animation-play-state:paused}
.ss-still .ss-go[aria-current=true] .ss-fill{animation:none;width:100%}
.ss-lbl{font:500 13px/1 'Geist Mono',monospace}
.ss-go[aria-current=true] .ss-lbl,.ss-go:hover .ss-lbl{color:var(--text)}
.ss-paused .ss-pic img,.ss-paused .ss-pic.ss-mailpic img{animation-play-state:paused}
@keyframes ss-drift{from{transform:scale(1)}to{transform:scale(1.06)}}
@keyframes ss-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ss-fill{from{width:0}to{width:100%}}
@keyframes ss-ping{70%,100%{box-shadow:0 0 0 12px rgba(184,255,60,0)}}
/* no script: every stop in turn, no strip */
.ss-stage:not(.ss-on){aspect-ratio:auto;display:grid;gap:2px}
.ss-stage:not(.ss-on) .ss-stop{position:relative;inset:auto;aspect-ratio:16/9}
.ss-still .ss-pic img,.ss-still .ss-mailpic img,.ss-still .ss-h,.ss-still .ss-p,.ss-still .ss-chip i{animation:none}
@media (prefers-reduced-motion:reduce){.ss-pic img,.ss-mailpic img,.ss-h,.ss-p,.ss-chip i{animation:none}}

/* chapters and cards */
.lg .sl-ch-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.lg .sl-ch-list li,.lg .sl-cards li{margin:0}
.lg .sl-ch{text-decoration:none}
.sl-ch{display:block;height:100%;padding:12px 12px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);transition:border-color .2s,transform .2s}
.sl-ch:hover{border-color:var(--text-3);color:var(--text);transform:translateY(-2px)}
.sl-ch-v{display:block;width:100%;height:auto;margin-bottom:14px;border-radius:10px;background:var(--surface-2)}
.sl-ch-t{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px}
.sl-ch-t b{font-size:17px;font-weight:600}
.sl-ch-len{padding:3px 8px;border-radius:999px;background:var(--surface-2);font:500 12px/1.2 'Geist Mono',monospace;color:var(--text-2)}
.sl-ch-p{display:block;text-decoration:none;margin-top:6px;padding:0 6px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.ch-line{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ch-draw 5s ease-in-out infinite}
.ch-area{fill:var(--accent);opacity:.12}
.ch-dot{fill:var(--accent)}
.ch-ring{fill:none;stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ch-ping 2.5s ease-out infinite}
.ch-d{fill:var(--text-2);transform-box:fill-box;transform-origin:center;opacity:0;animation:ch-pop 5s ease-out infinite;animation-delay:calc(var(--n)*.7s)}
.ch-bar{fill:var(--c);transform-box:fill-box;transform-origin:left;animation:ch-grow 5s ease-out infinite;animation-delay:calc(var(--n)*.25s)}
.ch-col{fill:var(--money);transform-box:fill-box;transform-origin:bottom;animation:ch-rise 5s ease-out infinite;animation-delay:calc(var(--n)*.18s)}
@keyframes ch-draw{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
@keyframes ch-ping{from{transform:scale(1);opacity:.8}to{transform:scale(3);opacity:0}}
@keyframes ch-pop{0%{opacity:0;transform:scale(.3)}15%,70%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes ch-grow{0%{transform:scaleX(0)}50%,100%{transform:scaleX(1)}}
@keyframes ch-rise{0%{transform:scaleY(0)}50%,100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.ch-line,.ch-ring,.ch-d,.ch-bar,.ch-col{animation:none}.ch-line{stroke-dashoffset:0}.ch-d{opacity:1}.ch-ring{opacity:.4}}
.sl .lg-doc>section+section{margin-top:0}
.sl .lg-doc>section{margin-bottom:64px}
.sl .lg-doc>section h2{margin:0 0 24px;font-size:clamp(26px,3.4vw,36px);letter-spacing:-.02em}
.sl .sl-price{max-width:640px}
.lg .sl-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.lg .sl-cards li{padding:20px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.sl-cards h3{margin:0 0 8px;font-size:17px}
.sl-cards p{margin:0;font-size:15px;color:var(--text-2)}
.sl-close{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.sl-ask{display:flex;flex-direction:column;align-items:center;gap:12px}
.sl-ask p{margin:0;font-size:20px;font-weight:600}
html:not([data-launch="on"]) .sl-ask{display:none}

@media (max-width:640px){
  .lg-main.sl{padding-top:36px}
  .ss{margin-bottom:48px}
  .ss-stage{--ar:.8;aspect-ratio:4/5;border-radius:22px}
  .ss-pic:not(.ss-mailpic) img{width:calc(var(--mz)*100%);left:calc(50% - var(--mx)*var(--mz)*100%);top:calc(50% - var(--my)*var(--mz)*0.6667*100%)}
  .ss-stage:not(.ss-on) .ss-stop{aspect-ratio:4/5}
  .ss-mail{right:5%;left:5%;width:auto;top:12%}
  .ss-chip{right:auto;left:5%;top:8%}
  .ss-ctl{top:12px;right:12px}
  .ss-strip{gap:5px}
}