/* AI System Club waitlist page (/ai-system) only. Shared components and tokens come from /styles.css. */

/* ---------- hero ---------- */
.waitlist-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,84px);align-items:center;padding:clamp(36px,5vw,76px) 0 clamp(26px,4vw,48px);text-align:left;}
.waitlist-hero .hi{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);}
.waitlist-hero h1{margin:12px 0 22px;font-size:clamp(3rem,1.7rem + 4.6vw,5.4rem);line-height:.98;letter-spacing:-.035em;}
.waitlist-hero h1 .u{padding:0;margin:0;background:none;}
.waitlist-hero .ai-or{position:relative;display:inline-block;margin-right:.12em;padding:0 .06em;color:var(--color-accent);}
.waitlist-hero .ai-or::after{
  content:"";position:absolute;left:-.22em;right:-.26em;top:-.06em;bottom:-.1em;
  background:var(--color-accent);transform:rotate(-5deg);pointer-events:none;
  -webkit-mask:url("../../assets/doodles/circle.svg") center/100% 100% no-repeat;
          mask:url("../../assets/doodles/circle.svg") center/100% 100% no-repeat;
}
.waitlist-hero .lead{max-width:34rem;margin:0 0 26px;font-size:var(--text-lg);color:var(--color-ink-soft);}
.waitlist-hero .wl-form{justify-content:flex-start;max-width:480px;margin:0;}
.wlcount{margin:20px 0 4px;font-size:1rem;color:var(--color-ink-soft);}
.wlcount b{color:var(--color-ink);background:linear-gradient(transparent 58%,var(--color-marker) 58% 92%,transparent 92%);}
.wlnote{display:inline-block;font:1.5rem/1.1 var(--font-hand);color:var(--color-accent-text);transform:rotate(-2deg);}
.waitlist-hero .photo-wrap{position:relative;justify-self:center;width:min(100%,360px);padding:24px 16px;}
.waitlist-hero .polaroid{max-width:none;padding:14px 14px 58px;transform:rotate(-2.5deg);--tape-col:var(--tape-accent);}
.waitlist-hero .polaroid img{aspect-ratio:828/1100;object-fit:cover;}
.waitlist-hero .sticker.s2{bottom:26px;left:-30px;font-size:1.45rem;}
.club-deco-star{--size:70px;--tilt:16deg;top:-4px;right:-8px;}
.club-deco-bolt{--size:58px;--tilt:-12deg;left:-22px;top:30%;}

/* ---------- what you could build: folder-tab cards ---------- */
.club-curriculum{padding:clamp(44px,6vw,84px) 0;}
.creator-proof{max-width:800px;margin:0 auto 64px;text-align:center;}
.creator-proof p{margin:0;font-size:var(--text-lg);line-height:1.6;color:var(--color-ink-soft);}
.creator-proof p:first-child{margin-bottom:10px;font:var(--text-xl)/1.4 var(--font-display);color:var(--color-ink);}
.creator-proof strong{font-weight:400;color:var(--color-ink);background:linear-gradient(transparent 60%,var(--color-marker) 60% 94%,transparent 94%);}
.club-curriculum .sec-head{margin-bottom:58px;}
.club-curriculum .sec-head h2{margin-top:6px;font-size:var(--text-3xl);}
.build-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 26px;}
.bi{
  position:relative;padding:26px 24px 24px;
  background:var(--color-card);border:1px solid var(--color-line);border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-paper);
  transition:transform .2s var(--ease-out),box-shadow .2s;
}
.bi:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);}
.bi-n{
  position:absolute;bottom:100%;left:-1px;padding:3px 18px 1px;
  font:1.6rem/1.15 var(--font-hand);color:var(--color-ink);
  background:var(--tab,var(--color-butter));border:1px solid var(--color-line);border-bottom:0;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
}
.bi:nth-child(5n+1){--tab:var(--color-butter);}
.bi:nth-child(5n+2){--tab:var(--color-mint);}
.bi:nth-child(5n+3){--tab:var(--color-peach);}
.bi:nth-child(5n+4){--tab:var(--color-sky);}
.bi:nth-child(5n+5){--tab:var(--color-accent-tint);}
.bi h3{margin:0 0 8px;font-size:1.3rem;}
.bi p{margin:0;font-size:.97rem;color:var(--color-ink-soft);}

/* ---------- see how I think: illustrated points on dot paper ---------- */
.club-learning{
  padding:clamp(56px,8vw,100px) 0;
  background-color:var(--color-paper);
  background-image:radial-gradient(circle,var(--color-grid) 1.4px,transparent 1.8px);background-size:22px 22px;
  border-block:1px solid var(--color-line);
}
.club-learning-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,84px);align-items:start;}
.club-learning-intro{position:sticky;top:110px;}
.club-learning-intro h2{margin:10px 0 0;font-size:clamp(2.2rem,1.6rem + 2vw,3.3rem);line-height:1.06;letter-spacing:-.02em;}
.club-learning-points{display:grid;gap:18px;}
.club-learning-point{
  display:grid;grid-template-columns:78px minmax(0,1fr);gap:22px;align-items:start;padding:24px 26px;
  background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-paper);
}
.club-learning-point h3{margin:4px 0 8px;font-size:1.32rem;}
.club-learning-point p{margin:0;font-size:.98rem;line-height:1.7;color:var(--color-ink-soft);}
.cl-art{display:grid;place-items:center;width:78px;height:78px;border-radius:20px;background:var(--color-page);box-shadow:inset 0 0 0 1.5px var(--color-line);transform:rotate(-3deg);}
.club-learning-point:nth-child(2) .cl-art{transform:rotate(3deg);}
.cl-art svg{width:58px;height:58px;overflow:visible;}
.cl-art .ink{fill:none;stroke:var(--color-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.cl-art .or,.cl-art [fill="#D97757"]{fill:var(--color-accent);}
.cl-art .ors{fill:none;stroke:var(--color-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.cl-art *{transform-box:fill-box;transform-origin:center;}
.cl-prog{transform-origin:left center !important;animation:clProg 3.2s ease-in-out infinite;}
.cl-cursor{animation:clCursor 3.2s ease-in-out infinite;}
.cl-play{animation:clPulse 3.2s ease-in-out infinite;}
.cl-block{animation:clSnap 3.6s cubic-bezier(.6,0,.2,1) infinite;}
.cl-spark{opacity:0;animation:clSpark 3.6s ease-out infinite;}
.cl-b1{animation:clPop 3.4s ease-out infinite;}
.cl-b2{animation:clPop2 3.4s ease-out infinite;}
.cl-dot{animation:clDot 1.1s ease-in-out infinite;}
.cl-dot:nth-of-type(2){animation-delay:.15s;}
.cl-dot:nth-of-type(3){animation-delay:.3s;}
@keyframes clProg{0%{transform:scaleX(.05);}70%,100%{transform:scaleX(1);}}
@keyframes clCursor{0%{transform:translate(-14px,6px);}45%{transform:translate(0,0);}55%{transform:translate(0,0) scale(.85);}62%,100%{transform:translate(0,0) scale(1);}}
@keyframes clPulse{0%,50%{transform:scale(1);}58%{transform:scale(1.18);}70%,100%{transform:scale(1);}}
@keyframes clSnap{0%,15%{transform:translate(7px,-6px) rotate(9deg);}45%,100%{transform:translate(0,0) rotate(0);}}
@keyframes clSpark{0%,42%{opacity:0;transform:scale(.3);}55%{opacity:1;transform:scale(1.1);}75%{opacity:1;transform:scale(1);}90%,100%{opacity:0;transform:scale(.8);}}
@keyframes clPop{0%{opacity:0;transform:translateY(5px) scale(.9);}12%,88%{opacity:1;transform:none;}100%{opacity:0;}}
@keyframes clPop2{0%,30%{opacity:0;transform:translateY(5px) scale(.9);}42%,88%{opacity:1;transform:none;}100%{opacity:0;}}
@keyframes clDot{0%,100%{transform:translateY(0);}50%{transform:translateY(-2.5px);}}

/* ---------- what you get: a till receipt (buy once) ---------- */
.club-inclusions{padding:clamp(56px,8vw,100px) 0;}
.club-inclusions .wrap{filter:drop-shadow(0 1px 1px rgba(30,27,24,.08)) drop-shadow(0 14px 18px rgba(30,27,24,.14));}
.club-inclusions-inner{
  --tooth:14px;
  position:relative;max-width:640px;margin:0 auto;padding:48px clamp(22px,5vw,50px) 92px;
  background:var(--color-card);transform:rotate(-1deg);
  -webkit-mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--tooth) 51% repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--tooth) 51% repeat-x;
          mask:
    conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/var(--tooth) 51% repeat-x,
    conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/var(--tooth) 51% repeat-x;
}
.club-inclusions-inner::after{   /* barcode at the foot of the receipt */
  content:"";position:absolute;left:50%;bottom:30px;width:180px;height:36px;transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,var(--color-ink) 0 2px,transparent 2px 4px,var(--color-ink) 4px 5px,transparent 5px 8px,var(--color-ink) 8px 11px,transparent 11px 13px);
  opacity:.85;
}
.club-inclusions h2{margin:0 0 8px;text-align:center;font-size:var(--text-3xl);}
.club-inclusions-intro{margin:0 0 26px;text-align:center;color:var(--color-ink-soft);}
.club-inclusions dl{margin:0;border-top:2px dashed var(--color-line-strong);}
.club-inclusions dl > div{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;padding:18px 0;border-bottom:2px dashed var(--color-line-strong);}
.club-inclusions dl > div::before{
  content:"";grid-row:1 / span 2;width:24px;height:24px;margin-top:2px;background:var(--color-accent);
  -webkit-mask:url("../../assets/doodles/check.svg") center/contain no-repeat;
          mask:url("../../assets/doodles/check.svg") center/contain no-repeat;
}
.club-inclusions dt{font:700 .86rem/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink);}
.club-inclusions dd{margin:4px 0 0;font-size:.97rem;color:var(--color-ink-soft);}

/* ---------- bio ---------- */
.club-bio{padding:clamp(44px,7vw,90px) 0;}
.club-bio-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(34px,6vw,84px);align-items:center;}
.club-bio .photo-wrap{position:relative;justify-self:center;width:min(100%,290px);}
.club-bio-polaroid{max-width:none;transform:rotate(-3.5deg);--tape-col:var(--tape-mint);}
.club-bio-polaroid .cap{font-size:1.55rem;}
.club-bio-copy{
  position:relative;padding:42px clamp(24px,4vw,48px) 30px clamp(46px,5vw,64px);
  background-color:var(--color-card);
  background-image:linear-gradient(90deg,transparent 28px,var(--color-peach) 28px 29.5px,transparent 29.5px);
  border:1px solid var(--color-line);border-radius:var(--radius-xs);box-shadow:var(--shadow-lift);
}
.club-bio-copy h2{margin:4px 0 16px;font-size:var(--text-3xl);}
.club-bio-copy p{margin:0 0 14px;font-size:var(--text-lg);line-height:1.72;color:var(--color-text);}

/* ---------- questions ---------- */
.club-faq-head h2{font-size:var(--text-3xl);}
.faq{display:grid;gap:12px;max-width:820px;margin:0 auto;}
.faq details{margin:0;padding:0;background:var(--color-card);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-flat);transition:box-shadow .2s,border-color .2s;}
.faq details[open]{border-color:var(--color-line-strong);box-shadow:var(--shadow-paper);}
.faq summary{position:relative;display:block;padding:19px 62px 19px 24px;font:1.12rem/1.35 var(--font-display);color:var(--color-ink);list-style:none;cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;top:50%;right:22px;width:22px;height:22px;margin-top:-11px;background:var(--color-accent);
  transition:transform .2s var(--ease-out);
  -webkit-mask:url("../../assets/doodles/plus.svg") center/contain no-repeat;
          mask:url("../../assets/doodles/plus.svg") center/contain no-repeat;
}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{margin:0;padding:0 24px 22px;color:var(--color-ink-soft);}

/* ---------- last thing: a signed letter ---------- */
#join{padding-bottom:clamp(30px,5vw,60px);}
.club-letter{max-width:820px;margin:0 auto;padding:clamp(48px,6vw,70px) clamp(22px,6vw,80px);transform:rotate(-.8deg);--tape-w:130px;--tape-h:32px;--tape-tilt:2deg;}
.club-letter h2{font-size:var(--text-3xl);text-wrap:balance;}
.club-letter .wl-form{margin:0 auto;}
.club-sign{display:inline-block;margin-top:22px;font:2.1rem/1 var(--font-hand);color:var(--color-accent-text);transform:rotate(-4deg);}

/* ---------- tablet ---------- */
@media (max-width:980px){
  .build-index{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  .waitlist-hero{grid-template-columns:minmax(0,1fr);text-align:center;padding-top:26px;}
  .waitlist-hero h1{font-size:clamp(2.5rem,12vw,3.4rem);}
  .waitlist-hero .lead{margin-inline:auto;}
  .waitlist-hero .wl-form{justify-content:center;margin-inline:auto;}
  .waitlist-hero .photo-wrap{display:block;width:min(70%,240px);margin:6px auto 0;}
  .waitlist-hero .sticker.s2{font-size:1.15rem;left:-18px;bottom:16px;}
  .club-deco-star{--size:50px;}
  .club-deco-bolt{--size:44px;left:-16px;}
  .creator-proof{margin-bottom:46px;}
  .build-index{grid-template-columns:minmax(0,1fr);gap:50px;}
  .club-learning-layout{grid-template-columns:minmax(0,1fr);}
  .club-learning-intro{position:static;}
  .club-learning-point{grid-template-columns:60px minmax(0,1fr);gap:16px;padding:20px;}
  .cl-art{width:60px;height:60px;border-radius:16px;}
  .cl-art svg{width:44px;height:44px;}
  .club-inclusions-inner{transform:none;}
  .club-bio-grid{grid-template-columns:minmax(0,1fr);}
  .club-bio .photo-wrap{width:min(76%,250px);}
  .club-bio-copy{padding:40px 22px 26px 44px;}
  .club-letter{transform:none;}
  .club-letter h2{font-size:clamp(1.55rem,6.6vw,2.1rem);}
}

@media (prefers-reduced-motion:reduce){
  .cl-art *{animation:none !important;opacity:1 !important;}
  .bi:hover{transform:none;}
}