/* neevstep.com landing (29 Sep 2026). Brand: /brand tokens only · Lexend · no gradients ·
   Coral = only wrong/stuck · Mint = only right/done · subject colours only on subject tiles. Rename on change. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--ns-bg);color:var(--ns-ink);font:16px/1.6 var(--ns-font);overflow-x:hidden}
a{color:var(--ns-violet-deep)}
h1,h2,h3{letter-spacing:-.025em;line-height:1.1}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:800}
h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
em{font-style:normal}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
@media(min-width:760px){.wrap{padding:0 28px}}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-violet-deep);margin-bottom:12px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;border-radius:10px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ns-sun);outline-offset:2px}

/* logo (same as the app) */
.logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:21px;letter-spacing:-.02em;color:var(--ns-ink)}
.logo b{color:var(--ns-violet)}
.logo.on{color:#fff}.logo.on b{color:var(--ns-sun)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:600 15px/1 var(--ns-font);
  text-decoration:none;background:var(--ns-violet);color:#fff;padding:12px 18px;border-radius:var(--ns-r-pill);transition:transform var(--ns-ease),background var(--ns-ease)}
.btn:hover{background:var(--ns-violet-deep)}
.btn:active{transform:translateY(2px)}
.btn.sm{padding:9px 15px;font-size:14px}
.btn.lg{padding:15px 24px;font-size:16.5px}
.btn.ghost{background:transparent;color:var(--ns-violet-deep);box-shadow:inset 0 0 0 1.5px var(--ns-line-2)}
.btn.ghost:hover{background:var(--ns-violet-soft)}
.btn.sun{background:var(--ns-sun);color:var(--ns-sun-ink);box-shadow:0 4px 0 #D9A21C}
.btn.sun:hover{background:#FFD25E}
.btn.onv{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn.onv:hover{background:rgba(255,255,255,.1)}
.btn[disabled]{opacity:.6;cursor:wait}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(246,245,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--ns-line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.top-nav{display:flex;gap:2px;margin-left:auto}
.top-nav a{text-decoration:none;color:var(--ns-muted);font-weight:500;font-size:14.5px;padding:8px 12px;border-radius:10px;white-space:nowrap}
.top-nav a:hover{color:var(--ns-violet-deep);background:var(--ns-violet-soft)}
.top-cta{display:flex;gap:8px;margin-left:8px}
@media(max-width:940px){.top-nav{display:none}.top-cta{margin-left:auto}}
@media(max-width:480px){.hide-s{display:none}.logo{font-size:19px}}

/* hero */
.hero{background:var(--ns-violet);color:#fff;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:76px;padding-bottom:92px}
.hero .eyebrow{color:var(--ns-sun)}
.hero h1{font-size:clamp(38px,5.6vw,68px);font-weight:800;letter-spacing:-.04em;line-height:1.02;max-width:13ch}
.hero h1 em{color:var(--ns-sun)}
.lede{color:#E4DEFF;font-size:18px;max-width:52ch;margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-note{margin-top:18px;font-size:14px;color:#CFC6FF}
.hero-note b{color:#fff;font-weight:600}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;padding-top:48px;padding-bottom:56px;gap:40px}}
@media(max-width:420px){.hero-cta .btn{width:100%}}

/* live panel preview */
.pv{background:#fff;color:var(--ns-ink);border-radius:var(--ns-r-lg);padding:16px;box-shadow:0 30px 60px rgba(23,21,58,.35),0 0 0 8px rgba(255,255,255,.08);transform:rotate(-1deg)}
.pv-bar{display:flex;align-items:center;gap:8px;font-size:14px;padding:2px 4px 12px}
.pv-dot{width:9px;height:9px;border-radius:50%;background:var(--ns-mint);box-shadow:0 0 0 0 rgba(20,184,121,.5);animation:live 2s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(20,184,121,0)}100%{box-shadow:0 0 0 0 rgba(20,184,121,0)}}
.pv-code{margin-left:auto;background:var(--ns-violet-soft);color:var(--ns-violet-deep);padding:4px 10px;border-radius:var(--ns-r-pill);font-size:13px}
.pv-sum{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pv-sum span{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:var(--ns-r-pill);background:var(--ns-bg)}
.pv-sum .s-hand{background:var(--ns-sun-soft);color:var(--ns-step)}
.pv-sum .s-stuck{background:var(--ns-coral-soft);color:var(--ns-coral-ink)}
.pv-sum .s-done{background:var(--ns-mint-soft);color:var(--ns-mint-ink)}
.pv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:460px){.pv-grid{grid-template-columns:repeat(3,1fr)}.pv-t:nth-child(n+10){display:none}}
.pv-t{border:1.5px solid var(--ns-line);border-radius:12px;padding:8px 9px 9px;min-width:0;transition:border-color .4s,background .4s}
.pv-t b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-t span{display:block;font-size:11.5px;color:var(--ns-muted);font-weight:500}
.pv-t i{display:block;height:4px;border-radius:4px;background:var(--ns-line);margin-top:6px;overflow:hidden}
.pv-t u{display:block;height:100%;background:var(--ns-violet);transition:width .6s ease}
.pv-t.hand{border-color:var(--ns-sun);background:#FFFBEF;animation:wave 1.6s ease-in-out infinite}.pv-t.hand span{color:var(--ns-step)}
.pv-t.stuck{border-color:var(--ns-coral);background:#FFF6F6}.pv-t.stuck span{color:var(--ns-coral-ink)}
.pv-t.away{border-color:var(--ns-sun);background:var(--ns-sun-soft)}.pv-t.away span{color:var(--ns-sun-ink)}
.pv-t.idle{opacity:.55}
.pv-t.done{border-color:var(--ns-mint)}.pv-t.done span{color:var(--ns-mint-ink)}.pv-t.done u{background:var(--ns-mint)}
@keyframes wave{50%{transform:translateY(-2px)}}
.pv-foot{display:flex;justify-content:flex-end;margin-top:12px}
.pv-eyes{display:inline-flex;align-items:center;gap:6px;background:var(--ns-ink);color:#fff;font-size:13px;font-weight:600;padding:8px 14px;border-radius:var(--ns-r-pill)}
.pv-eyes svg{width:16px;height:16px}

/* facts strip */
.facts{background:var(--ns-ink);color:#fff}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:26px;padding-bottom:26px}
.facts b{display:block;font-size:18px;font-weight:700;color:var(--ns-sun)}
.facts span{font-size:14px;color:#C9C5E8}
@media(max-width:820px){.facts-in{grid-template-columns:repeat(2,1fr)}}

/* sections */
.s{padding:92px 0}
.s.alt{background:#fff;border-top:1px solid var(--ns-line);border-bottom:1px solid var(--ns-line)}
@media(max-width:760px){.s{padding:60px 0}}
.s-head{max-width:720px;margin-bottom:40px}
.s-lede{color:var(--ns-muted);font-size:17.5px;margin-top:14px;max-width:60ch}
.card{background:var(--ns-card);border:1px solid var(--ns-line);border-radius:var(--ns-r);box-shadow:var(--ns-shadow)}
.fine{margin-top:22px;font-size:14px;color:var(--ns-muted)}

.how{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.how li{padding:28px}
.how-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--ns-violet);color:#fff;font-weight:800;margin-bottom:18px;box-shadow:var(--ns-press)}
.how li:nth-child(3) .how-n{background:var(--ns-sun);color:var(--ns-sun-ink)}
.how p{color:var(--ns-muted);margin-top:8px}
@media(max-width:820px){.how{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:40px}}
.ticks{list-style:none;margin-top:26px;display:grid;gap:14px}
.ticks li{position:relative;padding-left:34px;color:var(--ns-ink-2)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:7px;background:var(--ns-violet-soft)}
.ticks li::after{content:"";position:absolute;left:7px;top:8px;width:8px;height:5px;border-left:2.5px solid var(--ns-violet);border-bottom:2.5px solid var(--ns-violet);transform:rotate(-45deg)}

/* tablet mock */
.tab-mock{background:var(--ns-ink);border-radius:30px;padding:14px;box-shadow:var(--ns-shadow-lift);max-width:500px;justify-self:center;width:100%}
.tab-mock>*{background:#fff}
.tm-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px 18px 0 0;border-bottom:1px solid var(--ns-line)}
.tm-prog{flex:1;height:8px;border-radius:8px;background:var(--ns-violet-soft);overflow:hidden}
.tm-prog i{display:block;height:100%;background:var(--ns-violet);border-radius:8px}
.tm-step{font-size:12.5px;font-weight:600;color:var(--ns-muted)}
.tm-fig{padding:18px 22px 10px;text-align:center}
.tm-fig svg{max-width:320px;overflow:visible}
.tm-shape{fill:var(--ns-violet-soft);stroke:var(--ns-violet);stroke-width:3;stroke-linejoin:round}
.tm-diag{stroke:var(--ns-sun);stroke-width:4;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:160;animation:draw 4s ease-in-out infinite}
.tm-lb text{font:700 15px var(--ns-font);fill:var(--ns-ink)}
.tm-ptr{fill:var(--ns-sun);stroke:var(--ns-violet-deep);stroke-width:3;animation:ptr 4s ease-in-out infinite}
@keyframes draw{0%,15%{stroke-dashoffset:160}55%,100%{stroke-dashoffset:0}}
@keyframes ptr{0%,15%{transform:translate(0,0)}55%,100%{transform:translate(130px,-90px)}}
.tm-kw{display:flex;gap:8px;justify-content:center;margin-top:6px}
.tm-kw span{background:var(--ns-sun-soft);color:var(--ns-sun-ink);font-weight:600;font-size:13px;padding:5px 12px;border-radius:var(--ns-r-pill)}
.tm-q{padding:16px 18px 20px;border-radius:0 0 18px 18px;border-top:1px solid var(--ns-line)}
.tm-q p{font-weight:600}
.tm-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tm-opts span{flex:1 1 0;min-width:60px;text-align:center;padding:10px 6px;border-radius:12px;border:1.5px solid var(--ns-line-2);font-weight:600;font-size:14.5px}
.tm-opts .ok{border-color:var(--ns-mint);background:var(--ns-mint-soft);color:var(--ns-mint-ink)}
.tm-opts .idk{border-style:dashed;color:var(--ns-muted);font-weight:500}
@media(prefers-reduced-motion:reduce){.tm-diag{animation:none;stroke-dashoffset:0}.tm-ptr{animation:none;transform:translate(130px,-90px)}.pv-dot,.pv-t.hand{animation:none}}

/* panel states */
.states{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.states{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.states{grid-template-columns:1fr}}
.st{background:#fff;border:1.5px solid var(--ns-line);border-left-width:6px;border-radius:var(--ns-r);padding:20px 22px}
.st b{display:block;font-size:17px;margin-bottom:4px}
.st span{color:var(--ns-muted);font-size:15px}
.st.hand{border-left-color:var(--ns-sun)}
.st.stuck{border-left-color:var(--ns-coral)}
.st.away{border-left-color:#E0A800}
.st.idle{border-left-color:var(--ns-line-2)}
.st.done{border-left-color:var(--ns-mint)}
.st.eyes{background:var(--ns-ink);border-color:var(--ns-ink);color:#fff}
.st.eyes span{color:#C9C5E8}

/* foundation band */
.neev{background:var(--ns-violet-deep);color:#fff;padding:84px 0}
.neev-in{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;max-width:980px}
.neev h2 em{color:var(--ns-sun)}
.neev .eyebrow{color:var(--ns-sun)}
.neev p{color:#E4DEFF;font-size:18px;margin-top:14px;max-width:60ch}
.neev-mark .mark{width:140px;height:140px;display:block}
@media(max-width:760px){.neev{padding:60px 0}.neev-in{grid-template-columns:1fr;gap:24px}.neev-mark .mark{width:84px;height:84px}}

/* subjects */
.subs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.subs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.subs{grid-template-columns:repeat(2,1fr)}}
.sub{background:#fff;border:1px solid var(--ns-line);border-radius:var(--ns-r);padding:18px;display:flex;flex-direction:column;gap:12px;min-height:118px}
.sub i{width:34px;height:34px;border-radius:10px;background:var(--c)}
.sub b{font-size:15.5px;line-height:1.25}
.sub span{font-size:12px;font-weight:600;color:var(--ns-muted);margin-top:-8px}
.sub.add{border-style:dashed}

/* demo form */
.demo{background:var(--ns-violet-soft)}
.form{padding:28px;display:grid;gap:14px}
.form label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ns-ink-2)}
.form small{font-weight:400;color:var(--ns-muted)}
.form input,.form select,.form textarea{font:16px var(--ns-font);color:var(--ns-ink);background:var(--ns-bg);border:1.5px solid var(--ns-line);border-radius:12px;padding:12px 14px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--ns-violet);background:#fff}
.form textarea{resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.f2{grid-template-columns:1fr}.form{padding:20px}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}
.form-msg{font-size:15px;min-height:1.4em}
.form-msg.err{color:var(--ns-coral-ink)}
.form.sent{place-items:center;text-align:center;padding:48px 28px}
.form.sent h3{font-size:24px}
.form.sent p{color:var(--ns-muted)}

/* footer */
.foot{background:var(--ns-ink);color:#C9C5E8;padding:56px 0 24px}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.foot p{margin-top:14px;font-size:14.5px}
.foot nav{display:grid;gap:8px;align-content:start}
.foot nav b{color:#fff;font-size:14px;margin-bottom:4px}
.foot nav a{color:#C9C5E8;text-decoration:none;font-size:14.5px}
.foot nav a:hover{color:#fff}
.foot-b{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
@media(max-width:680px){.foot-in{grid-template-columns:1fr 1fr}.foot-in>div{grid-column:1/-1}}