/* LMSht dark — icons, motion and micro-interactions. Everything animates transform/opacity only. */

/* ---------- icons (same font the app uses) ---------- */
.ms{font-family:"Material Symbols Outlined";font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;width:1em;height:1em;overflow:hidden;white-space:nowrap;direction:ltr;flex:none;vertical-align:middle;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;user-select:none;visibility:hidden;transition:font-variation-settings .25s}
.icons-ready .ms{visibility:visible}
.ms.fill,.tab[aria-selected=true] .ms,.cell:hover .ico-tile .ms,.prob:hover .ico-tile .ms{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}
.ms.sm{font-size:18px}.ms.lg{font-size:28px}
.ms.arrow{width:1em;height:1em;font-size:20px;stroke:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover .ms.arrow,.more:hover .ms.arrow{transform:translateX(4px)}
.ico-tile{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--brand-100);color:var(--brand-700);border:1px solid rgba(167,139,250,.22);flex:none;transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .2s}
.cell:hover .ico-tile,.prob:hover .ico-tile,.cap:hover .ico-tile{transform:translateY(-3px) scale(1.08) rotate(-5deg)}
.cell.brand .ico-tile{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.25)}
.cell.coin .ico-tile{background:rgba(250,204,21,.16);color:#FDE047;border-color:rgba(250,204,21,.3)}
.cell h3,.prob h3,.plan h3{display:flex;align-items:center;gap:14px}
.cell h3,.prob h3{flex-wrap:wrap}
.plan h3 .ms{color:var(--brand-200);font-size:22px}
.cell>.ico-tile{margin-bottom:18px}
.badge .ms{color:var(--brand-200);font-size:18px}
.login{display:inline-flex;align-items:center;gap:6px}
.tab{display:inline-flex;align-items:center;gap:8px}.tab .ms{font-size:20px}
.pill{display:inline-flex;align-items:center;gap:7px}.pill .ms{font-size:18px;color:var(--brand-200)}
.pill:hover{border-color:var(--brand-200);transform:translateY(-2px);background:#2E2E33}
.pill{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s}
.pill.b .ms{color:inherit}
.rail div{display:flex;align-items:center;gap:9px}.rail div .ms{font-size:18px}
.kpi small{display:flex;align-items:center;gap:6px}.kpi small .ms{font-size:16px;color:var(--brand-200)}
.stat .ms{display:block;font-size:26px;color:var(--brand-200);margin-bottom:14px;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.stat:hover .ms{transform:translateY(-3px) scale(1.15)}
.toc a{display:inline-flex;align-items:center;gap:7px}.toc a .ms{font-size:18px}
.area .ico-tile{width:54px;height:54px;border-radius:15px;margin-bottom:18px}.area .ico-tile .ms{font-size:28px}
.demo-side .flow .n .ms{font-size:30px;color:var(--brand-200)}
.gen div{justify-content:flex-start;align-items:center;gap:12px}
.gen div .ms{color:var(--brand-200);font-size:22px}
.gen div:last-child .ms{color:#EDE9FE}
.gen em{font-style:normal;flex-grow:1}.gen small{color:#A1A1AA;font-size:.88rem;font-weight:500}
.gen div:last-child small{color:#EDE9FE}
.prompt{display:flex;gap:12px;align-items:flex-start}.prompt .ms{color:var(--brand-200);margin-top:1px}
.prompt:after{display:none}.prompt .cursor{display:inline-block;width:2px;height:1.1em;background:var(--brand-200);margin-left:2px;vertical-align:-3px;animation:blink 1s steps(2) infinite}
.success .seal .ms{font-size:34px;color:#fff}

/* ---------- scroll progress ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#7C3AED,#C4B5FD);pointer-events:none}

/* ---------- hero entrance (JS-gated so no-JS shows everything) ---------- */
@keyframes inUp{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes inRise{from{opacity:0;transform:translateY(70px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.js .ia{animation:inUp 1s var(--d,0s) both cubic-bezier(.16,1,.3,1)}
.js .stage.ia{animation:inRise 1.3s .45s both cubic-bezier(.16,1,.3,1)}
.hero:before{animation:breathe 7s ease-in-out infinite;transform-origin:50% 100%}
.badge b{position:relative}
.badge b:before{content:"";position:absolute;left:-2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative;flex:none}
.pulse-dot:after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3);opacity:0}}
.stage{will-change:transform}

/* chart draw */
.draw{stroke-dasharray:1;stroke-dashoffset:1}
.js .draw{animation:draw 2s 1.1s forwards cubic-bezier(.65,0,.35,1)}
.no-js .draw,html:not(.js) .draw{stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
.js .area-fill{animation:inUp 1.2s 2s both}
.js .dot{transform-box:fill-box;transform-origin:center;animation:pop .5s 2.9s both cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}
.dot-ring{transform-box:fill-box;transform-origin:center;animation:ping 2.4s 3.4s infinite}

/* floating cards around the dashboard */
.fl{position:absolute;z-index:3;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);animation:bob 6s ease-in-out infinite}
.fl-a{left:-34px;top:150px;width:250px;background:#18181B;border:1px solid #3F3F46;border-radius:var(--r-lg);padding:14px 16px;display:flex;gap:12px;align-items:center;text-align:left}
.fl-b{right:-30px;top:96px;background:#18181B;border:1px solid #3F3F46;border-radius:var(--r-lg);padding:12px 16px;display:flex;gap:12px;align-items:center;text-align:left;animation-delay:-3s}
.fl .ico-tile{width:38px;height:38px;border-radius:11px}.fl .ico-tile .ms{font-size:22px}
.fl b{display:block;font-size:.88rem;color:#fff;line-height:1.3}.fl span.t{font-size:.76rem;color:#A1A1AA}
.fl-b .ico-tile{background:var(--coin);color:var(--coin-t);border-color:rgba(250,204,21,.3)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.toast{position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#fff;color:#18181B;padding:11px 18px 11px 12px;border-radius:999px;font-weight:700;font-size:.9rem;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);opacity:0;pointer-events:none;animation:toast 9s 4s infinite}
.toast .ms{color:#fff;background:var(--ok);border-radius:50%;font-size:18px;padding:3px;width:24px;height:24px}
@keyframes toast{0%{opacity:0;transform:translate(-50%,24px) scale(.8)}5%{opacity:1;transform:translate(-50%,-6px) scale(1.06)}8%{transform:translate(-50%,0) scale(1)}34%{opacity:1;transform:translate(-50%,0) scale(1)}39%,100%{opacity:0;transform:translate(-50%,16px) scale(.9)}}

/* ---------- reveal with stagger ---------- */
.js .rv{transition:opacity .8s var(--rd,0s) cubic-bezier(.16,1,.3,1),transform .8s var(--rd,0s) cubic-bezier(.16,1,.3,1)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-bottom:1px solid #27272A;padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:scroll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee .mq{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid #27272A;border-radius:999px;background:#111113;color:var(--body);font-weight:600;font-size:.95rem;white-space:nowrap}
.marquee .mq .ms{color:var(--brand-200);font-size:20px}
@keyframes scroll{to{transform:translateX(calc(-50% - 7px))}}

/* ---------- buttons ---------- */
.btn-p{position:relative;overflow:hidden}
.btn-p:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);transform:translateX(-130%);pointer-events:none}
.btn-p:hover:after{transform:translateX(130%);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.mag,.mag:hover{transform:translate3d(var(--tx,0px),var(--ty,0px),0)}
.mag:active{transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(.97)}
.btn.loading{pointer-events:none}.btn .spin{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- spotlight borders on cards ---------- */
.spot{position:relative}
.spot:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(196,181,253,.9),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot:hover:after{opacity:1}
.cell,.plan,.cap{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cell:hover,.plan:hover,.cap:hover{transform:translateY(-4px)}

/* ---------- tabs: sliding pill ---------- */
.tablist{position:relative}
.tab{position:relative;z-index:1}
.tablist.has-ind .tab[aria-selected=true]{background:transparent}
.tab-ind{position:absolute;left:0;top:0;border-radius:var(--r-lg);background:var(--brand);box-shadow:0 8px 24px -8px rgba(124,58,237,.8);transition:transform .5s cubic-bezier(.16,1,.3,1),width .5s cubic-bezier(.16,1,.3,1),height .5s cubic-bezier(.16,1,.3,1);z-index:0;pointer-events:none}
.pane.on>div:first-child>*{animation:inUp .6s both cubic-bezier(.16,1,.3,1)}
.pane.on>div:first-child>*:nth-child(2){animation-delay:.06s}.pane.on>div:first-child>*:nth-child(3){animation-delay:.12s}.pane.on>div:first-child>*:nth-child(4){animation-delay:.18s}
.pane.on .mock{animation:inRise .7s both cubic-bezier(.16,1,.3,1)}
.pane.on .ticks li{animation:inUp .5s both cubic-bezier(.16,1,.3,1)}
.pane.on .ticks li:nth-child(1){animation-delay:.12s}.pane.on .ticks li:nth-child(2){animation-delay:.2s}.pane.on .ticks li:nth-child(3){animation-delay:.28s}.pane.on .ticks li:nth-child(4){animation-delay:.36s}
.pane.on .step,.pane.on .row{animation:inUp .5s both cubic-bezier(.16,1,.3,1)}
.pane.on .step:nth-child(2),.pane.on .row:nth-child(1){animation-delay:.15s}.pane.on .step:nth-child(3),.pane.on .row:nth-child(2){animation-delay:.22s}.pane.on .step:nth-child(4),.pane.on .row:nth-child(3){animation-delay:.29s}.pane.on .step:nth-child(5),.pane.on .row:nth-child(4){animation-delay:.36s}
.pane.on .lb .row,.lb .row{animation:none}

/* progress bars fill */
.bar i{transition:width 1.2s cubic-bezier(.16,1,.3,1)}

/* ---------- AI generator ---------- */
.gen div.in{animation:inUp .5s both cubic-bezier(.16,1,.3,1)}
.gen div.sk{background:#27272A;position:relative;overflow:hidden;min-height:50px}
.gen div.sk>*{opacity:0}
.gen div.sk:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.1) 50%,transparent 80%);transform:translateX(-100%);animation:shimmer 1.2s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* ---------- live leaderboard ---------- */
.lb .row{will-change:transform}
.lb .coins{font-variant-numeric:tabular-nums}
.lb .row.bump .coins{animation:bump .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{40%{transform:scale(1.25);color:#FDE047}}

/* ---------- faq ---------- */
.faq details[open] p{animation:inUp .45s both cubic-bezier(.16,1,.3,1)}
.faq summary{transition:color .2s}.faq summary:hover{color:var(--brand-200)}
.faq summary:after{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}

/* ---------- forms & success ---------- */
.field label{transition:color .2s}.field:focus-within label{color:var(--brand-200)}
.success:not([hidden]) .seal.ok{animation:pop .6s both cubic-bezier(.34,1.56,.64,1)}
.success:not([hidden]) > *:not(.seal){animation:inUp .6s .15s both cubic-bezier(.16,1,.3,1)}
.links a{position:relative}
.links a:not([aria-current]):before{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--brand-200);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.links a:not([aria-current]):hover:before{transform:scaleX(1)}

@media (max-width:980px){.fl,.toast{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition-duration:.01ms!important}
  .js .ia,.js .stage.ia,.js .rv{opacity:1!important;transform:none!important;filter:none!important}
  .draw{stroke-dashoffset:0}.marquee-track{animation:none}.toast{display:none}
}

/* ---------- content strip (replaces first marquee) ---------- */
.mq-band{border-bottom:1px solid #27272A;padding:44px 0 40px;overflow:hidden;background:linear-gradient(#09090B,#0B0B0E)}
.mq-label{text-align:center;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#71717A;margin:0 0 26px}
.mq-row{display:flex;width:max-content;margin-bottom:18px;animation:mqscroll 60s linear infinite;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.mq-band{-webkit-mask-image:none}
.mq-row.rev{animation-direction:reverse;animation-duration:72s;margin-bottom:0}
.mq-band:hover .mq-row{animation-play-state:paused}
.mq-track{display:flex;flex:none;gap:44px;padding-right:44px;margin:0;list-style:none}
.mq-row .mq{display:inline-flex;align-items:center;gap:11px;color:#A1A1AA;font-weight:600;font-size:1.08rem;letter-spacing:-.01em;white-space:nowrap;transition:color .25s}
.mq-row .mq .ms{font-size:22px;color:#52525B;transition:color .25s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.mq-row .mq:hover{color:#fff}.mq-row .mq:hover .ms{color:var(--brand-200);transform:scale(1.25) rotate(-6deg)}
.mq-row .mq:after{content:"";width:4px;height:4px;border-radius:50%;background:#3F3F46;margin-left:33px}
@keyframes mqscroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.mq-track[aria-hidden=true]{display:none}}

@media (max-width:980px){.login{display:none}}

/* ---------- chip marquee (matches reference: mixed solid / outline / soft pills + round icon chips) ---------- */
.mq-band{display:none}
.cp-band{position:relative;overflow:hidden;padding:56px 0 !important;border-block:1px solid #27272A;background:
  radial-gradient(ellipse 55% 90% at 30% 50%,rgba(124,58,237,.20),transparent 70%),
  radial-gradient(ellipse 45% 80% at 80% 60%,rgba(167,139,250,.12),transparent 70%),#0B0B0E}
.cp-row{display:flex;width:max-content;margin-bottom:18px;animation:mqscroll 70s linear infinite;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cp-row.rev{animation-direction:reverse;animation-duration:84s;margin-bottom:0;margin-left:-90px}
.cp-band:hover .cp-row{animation-play-state:paused}
.cp-track{display:flex;flex:none;align-items:center;gap:16px;padding-right:16px;margin:0;list-style:none}
.cp{display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 30px 0 24px;border-radius:999px;font-weight:600;font-size:1.06rem;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,background .25s,border-color .25s}
.cp .ms{font-size:24px}
.cp.w{background:linear-gradient(180deg,#232329,#1B1B20);color:#F4F4F5;border:1px solid #2F2F37;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px -16px rgba(0,0,0,.9)}
.cp.w .ms{color:#E4E4E7}
.cp.s{background:linear-gradient(180deg,#8B5CF6,#6D28D9);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 16px 34px -14px rgba(124,58,237,.9)}
.cp.o{background:rgba(124,58,237,.10);color:#D4C4FD;border:1.5px solid rgba(167,139,250,.55)}
.cp.r{width:58px;height:58px;padding:0;justify-content:center;border-radius:50%}
.cp.r .ms{font-size:26px}
.cp.r.w{background:#F4F4F5;border-color:#fff;color:#18181B;box-shadow:0 14px 30px -14px rgba(0,0,0,.9)}.cp.r.w .ms{color:#18181B}
.cp.r.o .ms{color:#C4B5FD}
.cp.r.s{background:linear-gradient(180deg,#8B5CF6,#6D28D9)}
.cp:hover{transform:translateY(-4px) scale(1.04)}
.cp:hover .ms{animation:wob .5s cubic-bezier(.34,1.56,.64,1)}
.cp.w:hover{border-color:rgba(167,139,250,.6)}
.cp.o:hover{background:rgba(124,58,237,.22)}
@keyframes wob{0%{transform:rotate(0)}40%{transform:rotate(-14deg) scale(1.25)}100%{transform:none}}
@media (max-width:980px){.cp{height:54px;font-size:.98rem;padding:0 24px 0 20px}.cp.r{width:52px;height:52px}.cp-band{padding:40px 0 !important}.cp-row.rev{margin-left:-60px}}
@media (prefers-reduced-motion:reduce){.cp-row{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:12px}.cp-track[aria-hidden=true]{display:none}.cp-row.rev{margin-left:0}}

/* ---------- container-scroll hero (dashboard card) ---------- */
.cs-hero{padding-bottom:0}
.cs{position:relative;padding:8px 0 40px}
.cs:before{content:"";position:absolute;left:50%;bottom:6%;width:min(980px,92%);height:55%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,rgba(124,58,237,.5),transparent 70%);filter:blur(30px);z-index:-1;pointer-events:none}
.cs-persp{width:100%;position:relative}
.cs-head{will-change:transform;position:relative;z-index:2}
.cs-frame{margin-top:8px;perspective:1000px}
.cs-card{max-width:1024px;margin:0 auto;height:40rem;width:100%;padding:24px;border:4px solid #6C6C6C;background:#222;border-radius:30px;transform-origin:50% 50%;will-change:transform;
  transform:rotateX(20deg) scale(1.05);
  box-shadow:0 0 #0000004d,0 9px 20px #0000004a,0 37px 37px #00000042,0 84px 50px #00000026,0 149px 60px #0000000a,0 233px 65px #00000003,0 -30px 120px -40px rgba(167,139,250,.35)}
.cs-screen{height:100%;width:100%;overflow:hidden;border-radius:16px;background:#18181B}
.cs-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:16px;user-select:none}
@media (max-width:768px){.cs-card{height:30rem;padding:8px;border-radius:24px;transform:rotateX(20deg) scale(.7)}.cs-frame{margin-top:24px}.cs-screen,.cs-screen img{border-radius:14px}}
@media (prefers-reduced-motion:reduce){.cs-card{transform:none}.cs-head{transform:none}}

/* ---------- polish pass ---------- */
h1,h2{text-wrap:balance}
.hero h1{max-width:820px}
.cs-head .fine{margin-bottom:8px}
.prob h3{flex-wrap:nowrap;align-items:center}
.cell{display:flex;flex-direction:column}
.cell .pills{margin-top:auto;padding-top:22px}
.cell>p{margin-bottom:0}
.cell:not(.s4) .pills{padding-top:20px}
.tog:first-of-type{margin-top:22px}
.mini-path{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:0}
.mini-path .nd{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.mini-path .nd .ms{font-size:20px}
.mini-path .nd.cur{background:#fff;color:#6D28D9;box-shadow:0 0 0 6px rgba(255,255,255,.18);animation:pulseRing 2.4s ease-in-out infinite}
.mini-path i{flex:1;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.7),rgba(255,255,255,.25))}
@keyframes pulseRing{50%{box-shadow:0 0 0 11px rgba(255,255,255,0)}}
.plan .ticks{align-content:start}
.gen{min-height:262px;align-content:start}
.chat{min-height:0}

/* ---------- light-theme overrides for rules that were authored dark ---------- */
html[data-theme="light"] .cp-band{background:radial-gradient(ellipse 55% 90% at 30% 50%,rgba(124,58,237,.10),transparent 70%),radial-gradient(ellipse 45% 80% at 80% 60%,rgba(167,139,250,.10),transparent 70%),#fff;border-block-color:#E2E8F0}
html[data-theme="light"] .cp.w{background:#fff;color:#0F172A;border-color:#E2E8F0;box-shadow:0 10px 26px -14px rgba(15,23,42,.35)}
html[data-theme="light"] .cp.w .ms{color:#334155}
html[data-theme="light"] .cp.w:hover{border-color:#A78BFA}
html[data-theme="light"] .cp.o{background:#F5F3FF;color:#5412C4;border-color:#D3BEF9}
html[data-theme="light"] .cp.o:hover{background:#EDE9FE}
html[data-theme="light"] .cp.r.w{background:#fff;border-color:#E2E8F0}
html[data-theme="light"] .cp.r.w .ms{color:#0F172A}
html[data-theme="light"] .cp.r.o .ms{color:#5412C4}
html[data-theme="light"] .pill:hover{background:#F5F3FF}
html[data-theme="light"] .cell.coin .ico-tile{color:var(--coin-t)}
html[data-theme="light"] .plan h3 .ms,html[data-theme="light"] .badge .ms,html[data-theme="light"] .prompt .ms{color:var(--brand)}
html[data-theme="light"] .ai .prompt .ms{color:var(--brand-200)}
html[data-theme="light"] .ico-tile{border-color:rgba(84,18,196,.14)}
html[data-theme="light"] .links a:not([aria-current]):before{background:var(--brand)}
html[data-theme="light"] .faq summary:hover,html[data-theme="light"] .field:focus-within label{color:var(--brand)}
html[data-theme="light"] .sw-dots i{background:#CBD5E1}
html[data-theme="light"] .sw-dots i.on{background:var(--brand)}
html[data-theme="light"] .sw-cap p{color:var(--muted)}

/* hero mockup: no bezel, the UI itself glows */
.cs-card{border:0;padding:0;background:transparent;border-radius:20px;
  box-shadow:0 0 0 1px rgba(196,181,253,.35),0 0 50px -8px rgba(139,92,246,.6),0 0 120px -10px rgba(124,58,237,.5),0 50px 140px -30px rgba(167,139,250,.55)}
.cs-screen{border-radius:20px;background:transparent}
.cs-screen img{border-radius:20px}
html[data-theme="light"] .cs-card{box-shadow:0 0 0 1px rgba(84,18,196,.18),0 0 50px -10px rgba(84,18,196,.35),0 40px 110px -30px rgba(84,18,196,.45)}
@media (max-width:768px){.cs-card{padding:0;border-radius:16px}.cs-screen,.cs-screen img{border-radius:16px}}

/* chip strip: the mask must include the shadow area, so pad the rows and pull them back with negative margins */
.cp-row{padding:40px 0;margin:-40px 0 -22px}
.cp-row.rev{margin-bottom:-40px}
.cp-track{padding-block:2px}

/* give the mockup glow room to fade before the hero edge */
.cs{padding-bottom:150px}
@media (max-width:768px){.cs{padding-bottom:80px}}

/* sleek chip band: glows and shadows may spill vertically; only the sideways scroll is clipped */
.hero{overflow:visible;overflow-x:clip}
.cp-band,
html[data-theme="dark"] .cp-band,
html[data-theme="light"] .cp-band{overflow:visible;overflow-x:clip;border-block:0;padding:72px 0 64px !important;
  background:radial-gradient(ellipse 55% 70% at 28% 55%,rgba(124,58,237,.16),transparent 70%),radial-gradient(ellipse 45% 60% at 78% 60%,rgba(167,139,250,.12),transparent 70%)}
html[data-theme="light"] .cp-band{background:radial-gradient(ellipse 55% 70% at 28% 55%,rgba(124,58,237,.09),transparent 70%),radial-gradient(ellipse 45% 60% at 78% 60%,rgba(167,139,250,.08),transparent 70%)}
.cp-row{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
body{overflow-x:clip}

/* hero background glow: centred above the edge so it fades out instead of being cut */
html[data-theme="dark"] .hero:before{background:radial-gradient(ellipse 62% 42% at 50% 80%,rgba(124,58,237,.40),transparent 72%),radial-gradient(ellipse 36% 26% at 50% 86%,rgba(167,139,250,.28),transparent 72%)}
html[data-theme="light"] .hero:before{background:radial-gradient(ellipse 62% 42% at 50% 80%,rgba(84,18,196,.15),transparent 72%)}

html[data-theme="dark"] .hero,html[data-theme="light"] .hero{overflow:visible;overflow-x:clip}

/* ---------- hero: stepped skyline of five learner screens on a dock ---------- */
.cs-frame{width:min(1360px,calc(100vw - 32px));position:relative;left:50%;margin:8px 0 0 calc(min(1360px,100vw - 32px) / -2);perspective:1100px}
.cs-card{max-width:none;height:auto;width:100%;border:0;padding:0;background:transparent;box-shadow:none;border-radius:0;transform:rotateX(20deg) scale(1.05)}
.cs-stage{container-type:inline-size;display:flex;align-items:flex-end;justify-content:center;width:100%}
.px{position:relative;margin:0 .35cqw;flex:none;width:calc(var(--w) * 1cqw);height:calc(var(--h) * 1cqw);overflow:hidden;border-radius:7px 7px 0 0;background:#fff;
  transform:translateY(calc((1 - var(--p,0)) * var(--lag,0) * 1px));will-change:transform;
  box-shadow:0 0 0 1px rgba(196,181,253,.3),0 0 44px -10px rgba(139,92,246,.55)}
.px.p3{z-index:2;border-radius:8px 8px 0 0;box-shadow:0 0 0 1px rgba(196,181,253,.4),0 0 60px -8px rgba(139,92,246,.7),0 0 150px -20px rgba(124,58,237,.55)}
.px img{position:absolute;top:0;left:calc(var(--ox,0) * -100%);width:calc(var(--z,1) * 100%);height:auto;max-width:none;user-select:none}
.cs-dock{list-style:none;margin:0 .35cqw;padding:10px;display:flex;justify-content:center;gap:6px;border-radius:8px;position:relative;z-index:3;
  background:#111113;border:1px solid #27272A;box-shadow:0 0 60px -20px rgba(124,58,237,.6);--dk-t:#A1A1AA;--dk-on:#fff;--dk-on-bg:rgba(124,58,237,.35)}
.cs-dock li{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:6px;font-weight:700;font-size:.9rem;color:var(--dk-t);animation:dockOn 10s infinite;animation-delay:calc(var(--i) * 2s)}
.cs-dock li .ms{font-size:20px}
@keyframes dockOn{0%,17%{background:var(--dk-on-bg);color:var(--dk-on)}22%,100%{background:transparent;color:var(--dk-t)}}
html[data-theme="light"] .px{box-shadow:0 0 0 1px rgba(84,18,196,.16),0 20px 50px -18px rgba(84,18,196,.4)}
html[data-theme="light"] .px.p3{box-shadow:0 0 0 1px rgba(84,18,196,.22),0 30px 90px -20px rgba(84,18,196,.5)}
html[data-theme="light"] .cs-dock{background:#fff;border-color:#E2E8F0;box-shadow:0 24px 60px -24px rgba(84,18,196,.35);--dk-t:#475569;--dk-on:#5412C4;--dk-on-bg:#EDE9FE}
@media (max-width:768px){
  .cs-card{height:auto;padding:0;border-radius:0;transform:rotateX(20deg) scale(.92)}
  .px.p1,.px.p5{display:none}
  .px.p2,.px.p4{width:17cqw;height:26cqw}.px.p3{width:60cqw;height:40cqw}
  .px.p3 img{width:140%}
  .cs-dock li span{display:none}.cs-dock li{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.cs-card{transform:none}.px{transform:none}.cs-dock li{animation:none}}

/* clean crops: side screens start at their page title, below the top bar; the centre shows its whole screen */
.px img{top:calc(var(--z) * var(--w) * -0.0349cqw)}
.px.p3 img{top:0;width:100%}
.px.p3{border-radius:8px 8px 0 0}
@media (max-width:768px){
  .px.p2,.px.p4{width:17cqw;height:24cqw}
  .px.p3{width:62cqw;height:37.2cqw}.px.p3 img{width:100%}
}

/* soft fade where the narrow side screens are cropped */
.px:not(.p3) img{-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 70%,transparent 100%)}
.px.p1 img,.px.p2 img{-webkit-mask-image:linear-gradient(90deg,#000 66%,transparent 100%)}

html[data-theme="dark"] .cs-card,html[data-theme="light"] .cs-card{box-shadow:none;border:0;background:transparent}

/* full-bleed skyline: spans the whole viewport width */
.cs-frame{width:100vw;left:50%;margin-left:-50vw}
.cs-dock{margin:0;border-radius:0;border-inline:0;padding-inline:max(16px,2vw)}
html[data-theme="light"] .cs-dock{border-inline:0}
@media (max-width:768px){.cs-frame{margin-top:4px}}

/* no dock: the screens run a little below the hero edge and fade out into the next section */
.cs{padding-bottom:0}
.cs-stage{margin-bottom:-64px}
.px:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,var(--subtle,#09090B) 92%);pointer-events:none;z-index:3}
.cs-dock{display:none}
@media (max-width:768px){.cs-stage{margin-bottom:-36px}}
/* hero spacing now handled in hero.css */
.cs{padding-bottom:0}.cs-stage{margin-bottom:0}

/* ---------- chip band, final: steady speed, pause control, calm on small screens ---------- */
.cp-band{position:relative}
.cp-band .cp-row,.cp-band .cp-row.rev{animation-duration:var(--dur,70s);animation-timing-function:linear;backface-visibility:hidden}
.cp-band.cp-paused .cp-row,.cp-band.cp-off .cp-row,.cp-band:focus-within .cp-row{animation-play-state:paused}
.cp-toggle{position:absolute;right:max(16px,2vw);top:18px;z-index:6;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(24,24,27,.7);border:1px solid #3F3F46;color:#D4D4D8;backdrop-filter:blur(8px);opacity:.8;transition:opacity .2s,transform .3s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s}
.cp-toggle:hover,.cp-toggle:focus-visible{opacity:1;color:#fff;border-color:#A78BFA;transform:scale(1.08)}
.cp-toggle .ms{font-size:22px}.cp-toggle .t-play{display:none}
.cp-band.cp-paused .cp-toggle .t-pause{display:none}.cp-band.cp-paused .cp-toggle .t-play{display:inline-block}
html[data-theme="light"] .cp-toggle{background:rgba(255,255,255,.85);border-color:#E2E8F0;color:#475569}
html[data-theme="light"] .cp-toggle:hover,html[data-theme="light"] .cp-toggle:focus-visible{color:#5412C4;border-color:#A78BFA}
.cp-band .cp.w,.cp-band .cp.s,.cp-band .cp.o{height:56px}
.cp-band .cp.r{width:52px;height:52px}
@media (max-width:640px){
  .cp-band{padding:48px 0 40px !important}
  .cp-row.rev{display:none}
  .cp-row{margin-bottom:-40px !important}
  .cp-band .cp.w,.cp-band .cp.s,.cp-band .cp.o{height:48px;font-size:.95rem;padding:0 22px 0 18px}
  .cp-band .cp.r{width:46px;height:46px}
  .cp-toggle{top:6px;width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){.cp-toggle{display:none}}