/* PitCrew public page (index.php). Redesign 2026-10-24 (Lucas: "complete shit... the photos and videos used are trash"): real
   finished edits do the talking (hero phone + a row of Reels), every other section a full-width band or plain, cards instead of
   floating lists. Loaded after studio.css (tokens, buttons, logo). Pit orange, Archivo 800 for display. Mobile first. */
.lp{--pit:var(--acc);--band:#111115}
.lp{overflow-x:clip}
.lp h1,.lp h2,.lp .num{font-family:'Archivo PC',Inter,sans-serif;font-weight:800;letter-spacing:-.025em}
.lp h2{font-size:clamp(28px,5.6vw,44px);line-height:1.04;margin:0 0 14px;max-width:18ch;text-wrap:balance}
.lp h3{font-size:18px;margin:0 0 6px}
.lp p{max-width:38em}
.lp section{padding:64px 0}
.lp .band{background:var(--band);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:900px){.lp section{padding:100px 0}}
.lp .intro{color:#c9c9d1;font-size:16.5px;line-height:1.6}
.kick{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pit);margin-bottom:12px}
.lp :focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:6px}

/* top bar */
.lp-top{position:sticky;top:0;z-index:5;background:rgba(11,11,14,.84);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.lp-top .wrap{display:flex;align-items:center;height:62px;gap:18px}
.lp-top nav{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:14.5px}
.lp-top nav a:not(.btn){color:var(--dim);text-decoration:none}.lp-top nav a:not(.btn):hover{color:var(--text)}
@media(max-width:560px){.lp-top nav a:not(.btn){display:none}}

/* hero: copy + a phone playing a real Reel */
.lp-hero{padding:36px 0 56px!important}
.lp-hero .wrap{display:grid;gap:36px;align-items:center}
.lp-hero h1{font-size:clamp(46px,11vw,84px);line-height:.92;margin:0 0 20px;transform:skewX(-9deg);transform-origin:0 100%;text-wrap:balance}
.lp-hero h1 span{display:block;color:var(--pit)}
.lp-hero .intro{margin:0 0 24px;max-width:30em}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.cta .btn{flex:1 1 auto}
@media(min-width:600px){.cta .btn{flex:0 0 auto}}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--dim);font-size:14px}
.ticks li:before{content:"";display:inline-block;width:10px;height:6px;border-left:2px solid var(--pit);border-bottom:2px solid var(--pit);transform:rotate(-45deg) translateY(-3px);margin-right:9px}
.phone{position:relative;margin:0 auto;width:min(78vw,340px)}
.phone video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:30px;background:#000;border:6px solid #1c1c22;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--line2)}
.phone figcaption{text-align:center;font-size:13px;color:var(--dim);margin-top:12px}
.snd{position:absolute;right:16px;top:16px;width:40px;height:40px;display:grid;place-items:center;padding:0;color:#fff;background:rgba(10,10,12,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:50%;cursor:pointer}
.snd svg{width:20px;height:20px}.snd[aria-pressed=true]{background:var(--pit);border-color:transparent}
.rv{position:relative}.rv .snd{right:10px;top:10px;width:36px;height:36px}.rv .snd svg{width:18px;height:18px}
@media(min-width:900px){.lp-hero{padding:72px 0 100px!important}.lp-hero .wrap{grid-template-columns:1.2fr .8fr;gap:64px}.phone{width:340px}}

/* real edits */
.reels{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:28px -18px 22px;padding:0 18px 4px;scroll-padding:0 18px;scrollbar-width:none}
.reels::-webkit-scrollbar{display:none}
.reels figure{margin:0;scroll-snap-align:start}
.reels video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:#000;border:1px solid var(--line)}
.reels figcaption{font-size:13.5px;color:var(--dim);margin-top:9px}.reels figcaption b{display:block;color:var(--text);font-size:15px}
@media(min-width:760px){.reels{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);max-width:1180px;overflow:visible;margin:32px 0 26px;padding:0;gap:16px}}
.stylelist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.stylelist li{border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font-size:14px;color:#d6d6dc}

/* steps */
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
.steps .num{display:block;font-size:46px;line-height:.9;color:var(--pit);transform:skewX(-9deg);margin-bottom:14px}
.steps p{color:var(--dim);font-size:15px;margin:0}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr);gap:16px}}

/* checks */
.checks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.checks li{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 18px 50px;position:relative;color:var(--dim);font-size:14.5px}
.checks li b{display:block;color:var(--text);font-size:16px;margin-bottom:2px}
.checks li:before{content:"";position:absolute;left:20px;top:24px;width:12px;height:7px;border-left:2.5px solid var(--pit);border-bottom:2.5px solid var(--pit);transform:rotate(-45deg)}
@media(min-width:700px){.checks{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.checks{grid-template-columns:repeat(3,1fr)}}

/* split + before / after */
.split{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px}}
.cmp{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;max-width:460px;width:100%;justify-self:center;background:#141418;touch-action:pan-y;user-select:none;border:1px solid var(--line)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .after{clip-path:inset(0 0 0 var(--x,50%))}
.cmp .knob{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.cmp .knob:after{content:"";position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:var(--pit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' stroke='%23160b03' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;min-height:0}
.cmp .tag{position:absolute;bottom:12px;font-size:12.5px;padding:4px 10px;border-radius:999px;background:rgba(10,10,12,.66);color:#fff;pointer-events:none}
.cmp .tag.l{left:12px}.cmp .tag.r{right:12px}

/* two cards */
.duo{display:grid;gap:12px}
@media(min-width:800px){.duo{grid-template-columns:1fr 1fr;gap:16px}}
.cardx{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.cardx h3{font-size:22px;font-family:'Archivo PC',Inter,sans-serif;font-weight:800}
.cardx p{color:var(--dim);margin:0}

/* FAQ */
.fq{display:grid;gap:0 48px;margin-top:20px}
@media(min-width:860px){.fq{grid-template-columns:1fr 1fr}}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font-size:16px;cursor:pointer}
.faq details p{color:var(--dim);margin:10px 0 0}
.lp #join{padding-top:0}

/* waitlist */
.join{background:linear-gradient(135deg,rgba(255,90,31,.12),var(--card) 55%);border:1px solid var(--line2);border-radius:24px;padding:28px 20px}
@media(min-width:720px){.join{padding:44px}}
.join h2{max-width:none}
.join .wl{display:grid;gap:10px;margin-top:18px}
@media(min-width:720px){.join .wl{grid-template-columns:1fr 1fr auto}}

.lp-foot{padding:30px 0 50px;color:var(--dim2);font-size:14px;border-top:1px solid var(--line)}
.lp-foot a{color:var(--dim)}
.lp-foot p{max-width:none;margin:0 0 6px}