/* LIT App auth + onboarding polish: login, signup, welcome, tour, empty states. Loaded last. Black+gold trifecta, glass, kinetic type.
   Motion comes from /js/motion.js (window.LITMotion) + /js/hero-gl.js (window.LITHero); everything degrades to static markup. */
:root{
  --g1:#C9A84C;--g2:#F59E0B;--g3:#FFD700;
  --trif:linear-gradient(120deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 100%);
  --glass-bd:rgba(40,30,10,.12);--glass-hi:rgba(255,255,255,.9);--card-a:82%;--gb-a:.42;
  --glow-1:0 0 40px -12px var(--amber-glow);--glow-2:0 0 90px -24px var(--amber-glow);
}
:root[data-theme=dark]{--glass-bd:rgba(255,255,255,.10);--glass-hi:rgba(255,255,255,.12);--card-a:72%;--gb-a:.6}

/* ---------- kinetic words (markup: .kin > .w > span; --i from LITMotion.stagger / split) ---------- */
.kin .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.kin .w>span{display:inline-block;transform:translateY(110%);animation:wup .9s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*70ms + 80ms)}
.kin.wait .w>span{animation-play-state:paused}.kin.in .w>span{animation-play-state:running}
@keyframes wup{to{transform:none}}
.mag{transform:translate(var(--tx,0),var(--ty,0))}
.mag:active{transform:translate(var(--tx,0),var(--ty,0)) scale(.97)}

/* ---------- shader canvas (LITHero.mount) ---------- */
.hero-gl{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s var(--ease-out)}
.hero-gl.gl-on{opacity:1}
.hero-gl canvas{width:100%;height:100%;display:block}

/* ---------- glass card with gradient hairline (login card, signup/welcome card, tour card) ---------- */
.welcome .login,.acct .acard,.tour-card{
  background:color-mix(in srgb,var(--bg-card) var(--card-a),transparent);
  backdrop-filter:saturate(1.3) blur(18px);-webkit-backdrop-filter:saturate(1.3) blur(18px);
  border-color:transparent;isolation:isolate;
  box-shadow:var(--sh-2),var(--glow-2)}
.welcome .login::before,.acct .acard::before,.tour-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--trif);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--gb-a);pointer-events:none;z-index:-1}
.welcome .login::after,.acct .acard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(165deg,var(--glass-hi) 0%,transparent 42%);opacity:.35}
.acct .acard{overflow:visible}
.acct .acard>*{position:relative}

/* ---------- login ---------- */
.welcome{position:relative;isolation:isolate}
.welcome>.hero-gl{inset:-12% 30% -12% -14%;-webkit-mask-image:radial-gradient(58% 62% at 44% 50%,#000 25%,transparent 92%);mask-image:radial-gradient(58% 62% at 44% 50%,#000 25%,transparent 92%)}
.welcome .hero,.welcome .login{position:relative;z-index:1}
.welcome .hero{gap:1.2rem}
.welcome .chip{animation-delay:0ms}
.welcome .chip i{animation:pulse 2.4s var(--ease-io) infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px transparent}}
.hero h1{font-size:clamp(2.6rem,5.6vw,5.4rem);letter-spacing:-.05em;line-height:.98;max-width:12ch}
.hero h1 .grad{background:var(--trif);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;animation:wup .9s var(--ease-out) forwards,sheen 6s linear infinite;animation-delay:calc(var(--i,0)*70ms + 80ms),0s}
@keyframes sheen{to{background-position:220% 0}}
.hero .lede{max-width:46ch}
.hero .trust{gap:.6rem 1.3rem;color:var(--muted);font-weight:500}
.hero .trust b{color:var(--white);font:700 1.05em var(--font-head);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero .trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g2);box-shadow:0 0 10px var(--g2);flex:none}
.welcome .hero>*{animation-delay:calc(var(--i,0)*90ms)}
.welcome .login{animation-delay:120ms;padding:2.2rem 2rem 1.7rem}
.login .emblem{position:relative;isolation:isolate;border:0;box-shadow:none;background:radial-gradient(circle at 50% 30%,var(--bg-card),var(--bg-card2))}
.login .emblem::before{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,var(--g1),var(--g2),var(--g3),var(--g1));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 1.5px));animation:rot 7s linear infinite;z-index:-1}
.login .emblem::after{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,var(--amber-glow),transparent 70%);opacity:.45;filter:blur(8px);z-index:-2}
.login .emblem img{filter:drop-shadow(0 0 12px var(--amber-glow))}
.login h2{font-size:clamp(1.5rem,2vw,1.75rem);letter-spacing:-.03em}
.login .steps{margin-top:.9rem}
.login form{gap:.9rem}
.login .cc,.login input.otp{transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.login .cc:focus-within{outline:none;border-color:var(--g2);box-shadow:0 0 0 4px var(--amber-dim),var(--glow-1)}
.login input.otp:focus-visible{outline:none;border-color:var(--g2);box-shadow:0 0 0 4px var(--amber-dim),var(--glow-1)}
.login input.otp{font-size:clamp(1.6rem,3vw,2rem);letter-spacing:.55em;text-indent:.55em;min-height:68px;border-radius:var(--r-2)}
.login #fOtp.rise{animation-duration:var(--dur-4)}
.login #fOtp>*{animation:rise var(--dur-4) var(--ease-out) both;animation-delay:calc(var(--i,1)*60ms)}
.login #fOtp label.f{--i:0}.login #fOtp .btn-lg{--i:1}.login #otpResend{--i:2}.login #otpBack{--i:3}
.login .or{margin:1rem 0 .8rem}
.login .or::before,.login .or::after{background:linear-gradient(90deg,transparent,var(--border-ctl) 50%,transparent)}
.login #waBtn{border-color:color-mix(in srgb,#25D366 45%,var(--border-ctl))}
.login #waBtn::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3 4.3c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.4 2.5 1 3 .8 3.5.7.5 0 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3l-2-1c-.3-.1-.5-.1-.7.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5.3-.5v-.6l-.9-2.1c-.2-.6-.5-.5-.7-.5h-.5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3 4.3c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.4 2.5 1 3 .8 3.5.7.5 0 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3l-2-1c-.3-.1-.5-.1-.7.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.5-.5.3-.5v-.6l-.9-2.1c-.2-.6-.5-.5-.7-.5h-.5z'/%3E%3C/svg%3E") center/contain no-repeat;color:#25D366}
.login .newhere a,.acard .newhere a{background:var(--trif);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration-color:var(--g2)}
.login .legal,.login .help-wa,.acard .legal,.acard .help-wa{font-size:var(--fs-xs);margin-top:.3rem}
.login .newhere{margin-top:.9rem}
.login details.rem{margin-top:.45rem}

/* primary CTA: gradient + light sweep + glow; magnetic on fine pointers */
.welcome .btn-primary,.acct .btn-primary,.tour-card .btn-primary,.empty-s .btn-primary{background:linear-gradient(180deg,#FFC531,var(--amber));overflow:hidden;isolation:isolate;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 24px -10px var(--amber-glow)}
.welcome .btn-primary::after,.acct .btn-primary::after,.empty-s .btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-130%);animation:btnshine 5s var(--ease-io) infinite;pointer-events:none}
@keyframes btnshine{0%,62%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
@media(hover:hover){.welcome .btn-primary:not(:disabled):hover,.acct .btn-primary:not(:disabled):hover,.empty-s .btn-primary:not(:disabled):hover{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 0 0 1px rgba(255,215,0,.35),0 14px 40px -10px var(--amber-glow)}}
.btn-primary .spin{border-color:var(--on-amber);border-right-color:transparent}

/* ---------- signup + welcome (.acct) ---------- */
.acct{position:relative;isolation:isolate}
.acct>.hero-gl{inset:-14% 26% -14% -10%;-webkit-mask-image:radial-gradient(58% 62% at 40% 50%,#000 25%,transparent 92%);mask-image:radial-gradient(58% 62% at 40% 50%,#000 25%,transparent 92%)}
.acct.solo>.hero-gl{inset:-20% -10% -10%;-webkit-mask-image:radial-gradient(60% 70% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 70% at 50% 40%,#000 30%,transparent 100%)}
.acct>.sidehero,.acct>.acard{position:relative;z-index:1}
.sidehero{gap:1.1rem;color:var(--white)}
.sidehero .eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:600 .7rem/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-text)}
.sidehero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--g2);box-shadow:0 0 12px var(--g2)}
.sidehero h2{font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.045em;line-height:1;max-width:12ch;font-weight:700}
.sidehero h2 .grad{background:var(--trif);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.sidehero p{max-width:36ch;font-size:1.05rem}
.sidehero .how{list-style:none;display:grid;gap:.55rem;margin-top:.4rem;counter-reset:hw;max-width:360px}
.sidehero .how li{counter-increment:hw;display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border-radius:var(--r-2);border:1px solid var(--glass-bd);background:color-mix(in srgb,var(--bg-card) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:500;opacity:0;transform:translateX(-14px);animation:slidein .7s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*120ms + 500ms)}
.sidehero .how li::before{content:counter(hw);display:grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--trif);color:var(--on-amber);font:700 .8rem var(--font-head)}
.sidehero .how li small{display:block;color:var(--muted);font-weight:400}
.sidehero .proof{display:flex;align-items:baseline;gap:.5rem;margin-top:.2rem;color:var(--muted);font-size:var(--fs-sm)}
.sidehero .proof b{font:700 1.9rem/1 var(--font-head);letter-spacing:-.04em;background:var(--trif);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
@keyframes slidein{to{opacity:1;transform:none}}
.acard{padding:clamp(1.4rem,3vw,2.2rem);gap:1rem}
.acard form{gap:.7rem}
.acard .err:empty{min-height:0;margin-top:-.7rem}
.acard h1{font-size:clamp(1.55rem,2.6vw,2rem);letter-spacing:-.035em}
.acard input:not([type=file]):not([type=checkbox]):focus,.acard .cc:focus-within{outline:none;border-color:var(--g2);box-shadow:0 0 0 4px var(--amber-dim),var(--glow-1)}
.acard .cc:focus-within input{outline:none;box-shadow:none}
.acard input.otp{font-size:clamp(1.6rem,3vw,2rem);letter-spacing:.55em;text-indent:.55em;text-align:center;min-height:68px}
.dots li[aria-current=step] i{box-shadow:0 0 0 4px var(--amber-dim);background:var(--trif)}
.dots li.done i{background:var(--amber-dim)}

/* welcome: success moment */
.acard:has(.okmark){text-align:center;gap:.8rem;padding-top:clamp(2rem,4vw,2.8rem)}
.okmark{position:relative;width:96px;height:96px;margin:0 auto .2rem;display:grid;place-items:center}
.okmark svg{width:72px;height:72px;stroke:var(--on-amber);position:relative;z-index:1;stroke-width:3.2}
.okmark::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--trif);box-shadow:0 0 0 0 var(--amber-glow),var(--glow-2);animation:okpop .6s var(--spring-ok) both,okring 1.4s .5s var(--ease-out) both}
.okmark::after{content:"";position:absolute;inset:-28px;border-radius:50%;pointer-events:none;background:
  radial-gradient(circle at 50% 8%,var(--g3) 0 3px,transparent 4px),radial-gradient(circle at 88% 30%,var(--g2) 0 2.5px,transparent 3.5px),radial-gradient(circle at 94% 68%,var(--g1) 0 2px,transparent 3px),
  radial-gradient(circle at 60% 96%,var(--g3) 0 3px,transparent 4px),radial-gradient(circle at 14% 82%,var(--g2) 0 2.5px,transparent 3.5px),radial-gradient(circle at 6% 36%,var(--g3) 0 2px,transparent 3px),radial-gradient(circle at 28% 10%,var(--g1) 0 2px,transparent 3px);
  opacity:0;animation:sparks 1.3s .55s var(--ease-out) both}
.okmark circle{stroke:var(--on-amber);opacity:.35}
@keyframes okpop{from{transform:scale(.4);opacity:0}}
@keyframes okring{from{box-shadow:0 0 0 0 var(--amber-glow),var(--glow-2)}to{box-shadow:0 0 0 26px transparent,var(--glow-2)}}
@keyframes sparks{0%{opacity:0;transform:scale(.4) rotate(-20deg)}30%{opacity:1}100%{opacity:0;transform:scale(1.25) rotate(14deg)}}
.acard .welcome-h{font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.045em;line-height:1.02}
.acard .next-up{list-style:none;display:grid;gap:.5rem;width:100%;text-align:left;counter-reset:nu;margin:.3rem 0 .2rem}
.acard .next-up li{counter-increment:nu;display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border-radius:var(--r-2);border:1px solid var(--glass-bd);background:color-mix(in srgb,var(--bg-card) 60%,transparent);opacity:0;transform:translateY(10px);animation:slideup .6s var(--ease-out) forwards;animation-delay:calc(var(--i,0)*110ms + 700ms)}
.acard .next-up li::before{content:counter(nu);display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--trif);color:var(--on-amber);font:700 .78rem var(--font-head)}
.acard .next-up li.now{border-color:var(--border-amber);background:var(--amber-dim)}
.acard .next-up b{display:block;font:600 .95rem var(--font-head)}
.acard .next-up small{color:var(--muted)}
@keyframes slideup{to{opacity:1;transform:none}}
.acard .next-up+.btn-lg{animation:rise var(--dur-4) var(--ease-out) 1.1s both}

/* ---------- coach-mark tour card ---------- */
.tour-card{box-shadow:var(--sh-2),0 0 60px -16px var(--amber-glow)}
.tour-card::before{z-index:0}
.tour-card>*{position:relative;z-index:1}
.tour-count{display:inline-flex;align-items:center;gap:.5rem}
.tour-count::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g2);box-shadow:0 0 10px var(--g2)}
.tour-bar i.on{background:var(--trif)}
.tour-card h2{letter-spacing:-.03em;font-size:1.3rem}
.tour-ring{border-color:var(--g3);box-shadow:0 0 0 9999px var(--tour-dim,rgba(20,13,0,.55)),0 0 0 1px var(--amber-glow),0 0 34px var(--amber-glow)}

/* ---------- empty states ---------- */
.empty-s{gap:.5rem;padding:clamp(2.5rem,6vw,4rem) var(--s-4);animation:rise var(--dur-4) var(--ease-out) both}
.empty-s>img,.empty-s>svg,.empty-s>div:has(>svg){position:relative;width:64px;height:64px;padding:16px;margin-bottom:var(--s-3);border-radius:18px;color:var(--amber-text);opacity:1;background:linear-gradient(145deg,var(--bg-card),var(--bg-card2));border:1px solid var(--border-amber);box-shadow:var(--sh-1),0 0 50px -14px var(--amber-glow)}
.empty-s>div:has(>svg){display:grid;place-items:center}
.empty-s>div>svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.empty-s>img{object-fit:contain;filter:drop-shadow(0 0 8px var(--amber-glow))}
.empty-s b{font-size:clamp(1.2rem,2vw,1.45rem);letter-spacing:-.03em;color:var(--white)}
.empty-s p,.empty-s .small{max-width:40ch;color:var(--muted)}
.empty-s .next{padding-top:.4rem}
.empty-s .next-link{text-decoration-color:var(--g2)}

/* ---------- responsive ---------- */
@media(max-width:1100px){.hero h1{font-size:clamp(2.4rem,5vw,4rem)}}
@media(max-width:900px){
  .welcome>.hero-gl,.acct:not(.solo)>.hero-gl{display:none}
  .welcome .login{padding:1.8rem 1.4rem 1.4rem}
  .hero h1{font-size:clamp(2.3rem,9.5vw,3.2rem);max-width:none}
  .trust{gap:.4rem 1rem;font-size:var(--fs-xs)}
  .acct.solo>.hero-gl{inset:-10% -20% 0}
}
@media(max-width:560px){
  .welcome .login{padding:1.5rem 1.1rem 1.2rem;border-radius:var(--r-3)}
  .login .emblem{width:64px;height:64px}.login .emblem img{width:38px}
  .acard .next-up li{padding:.5rem .65rem}
  .okmark{width:84px;height:84px}.okmark svg{width:62px;height:62px}
}
/* ---------- reduced motion / forced colors ---------- */
@media(prefers-reduced-motion:reduce){
  .kin .w>span{animation:none;transform:none}
  .hero h1 .grad,.welcome .chip i,.login .emblem::before,.welcome .btn-primary::after,.acct .btn-primary::after,.empty-s .btn-primary::after{animation:none}
  .sidehero .how li,.acard .next-up li{animation:none;opacity:1;transform:none}
  .okmark::before,.okmark::after{animation:none}.okmark::after{opacity:0}
  .acard .next-up+.btn-lg,.empty-s,.login #fOtp>*{animation:none}
  .hero-gl{display:none}
  .mag{transform:none}
}
@media(forced-colors:active){
  .welcome .login::before,.acct .acard::before,.tour-card::before{background:CanvasText}
  .hero h1 .grad,.sidehero h2 .grad,.sidehero .proof b,.login .newhere a,.acard .newhere a{background:none;color:CanvasText;-webkit-background-clip:border-box;background-clip:border-box}
  .okmark::before,.sidehero .how li::before,.acard .next-up li::before{background:Highlight}
}