/* CodeNSM onboarding + PLG landing layer — loads AFTER codensm.css.
   Adds: office diorama teaser, persona rows, demo proof card, 6-step strip,
   modes table, methodology band, wizard rail + ICP picker + mode selector +
   connection-confirmed celebration. Same instrument-panel language:
   dark base, thin luminous borders, mono for data, glow only on live things. */

/* ============================== LANDING ============================== */

/* ---- hero refinements ---- */
.hero-roster .out b{color:var(--ink);font-weight:600}
.hero-roster .st-top{color:var(--mint)}
.hero-roster .st-fit{color:var(--sky)}
.hero-roster .st-stress{color:var(--amber)}
.hero-roster .st-snooze{color:var(--lav)}

/* ---- office diorama (signature) ---- */
.office-teaser{border:1px solid var(--line-lum);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--bg-2));
  box-shadow:var(--raise);padding:18px 14px 8px;margin-top:36px;overflow:hidden;position:relative}
.office-teaser::before{content:"[ THE OFFICE · LIVE VIEW ]";position:absolute;top:12px;left:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)}
.office-teaser svg{display:block;width:100%;height:auto;margin-top:14px}
.office-teaser .desk{stroke:rgba(255,255,255,.16);stroke-width:1.5;fill:rgba(255,255,255,.02)}
.office-teaser .screen{fill:rgba(125,215,255,.10);stroke:rgba(125,215,255,.35);stroke-width:1}
.office-teaser .floor{stroke:rgba(255,255,255,.05);stroke-width:1}
.office-teaser .sprite{transform-box:fill-box;transform-origin:50% 100%}
.office-teaser .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.08em;fill:var(--dim)}
.office-teaser .lbl.on-mint{fill:var(--mint)}
.office-teaser .lbl.on-sky{fill:var(--sky)}
.office-teaser .lbl.on-amber{fill:var(--amber)}
.office-teaser .lbl.on-lav{fill:var(--lav)}
.office-teaser .zz{font-family:var(--mono);font-size:11px;fill:var(--lav);opacity:0;
  transform-box:fill-box;transform-origin:center}
@media(prefers-reduced-motion:no-preference){
  .office-teaser .sprite{animation:onb-breathe 3.4s ease-in-out infinite}
  .office-teaser .sprite.s2{animation-delay:.7s}
  .office-teaser .sprite.s3{animation:onb-jitter 2.2s ease-in-out infinite}
  .office-teaser .sprite.s4{animation:onb-slump 5s ease-in-out infinite}
  .office-teaser .zz{animation:onb-zz 3s ease-out infinite}
  .office-teaser .zz.z2{animation-delay:1.1s}
  .office-teaser .halo{animation:onb-halo 2.8s ease-in-out infinite}
}
@keyframes onb-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.035)}}
@keyframes onb-jitter{0%,100%{transform:translateX(0)}20%{transform:translateX(-1.2px)}
  40%{transform:translateX(1.2px)}60%{transform:translateX(-.8px)}80%{transform:translateX(.8px)}}
@keyframes onb-slump{0%,100%{transform:scaleY(.97) rotate(1.5deg)}50%{transform:scaleY(1) rotate(1.5deg)}}
@keyframes onb-zz{0%{opacity:0;transform:translate(0,0)}25%{opacity:.9}
  100%{opacity:0;transform:translate(7px,-16px)}}
@keyframes onb-halo{0%,100%{opacity:.25}50%{opacity:.7}}

/* ---- archetype chips + state row ---- */
.arch-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.arch-chips span{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;color:var(--soft);background:var(--bg-2)}
.arch-chips span b{font-weight:600;color:var(--ac,var(--mint))}
.state-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;
  font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.state-row i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.state-row i::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sc,var(--dim))}

/* ---- persona rows (what's in it for them) ---- */
.personas{display:grid;gap:14px;margin-top:44px}
.persona{display:grid;grid-template-columns:220px 1fr;gap:22px;border:1px solid var(--line);
  border-radius:16px;padding:24px 26px;background:var(--panel);box-shadow:var(--raise);position:relative;overflow:hidden}
.persona::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--pc,var(--mint));opacity:.85}
@media(max-width:760px){.persona{grid-template-columns:1fr;gap:10px}}
.persona .who{font-family:var(--mono)}
.persona .who .tag{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pc,var(--mint))}
.persona .who h3{font-family:var(--sans);font-size:1.14rem;margin-top:6px}
.persona ul{list-style:none;display:grid;gap:8px}
.persona li{font-size:.93rem;color:var(--soft);padding-left:20px;position:relative}
.persona li::before{content:"▸";position:absolute;left:0;color:var(--pc,var(--mint));font-family:var(--mono);font-size:.8rem}

/* ---- live demo proof card ---- */
.demo-card{display:block;border:1px solid var(--line-lum);border-radius:20px;margin-top:40px;
  padding:38px 40px;background:linear-gradient(135deg,rgba(126,240,201,.06),rgba(125,215,255,.04) 60%,transparent);
  box-shadow:var(--raise);position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.demo-card:hover{transform:translateY(-3px);border-color:rgba(126,240,201,.45)}
.demo-card .live-dot{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.14em;color:var(--mint)}
.demo-card .live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 12px 2px rgba(126,240,201,.6)}
@media(prefers-reduced-motion:no-preference){.demo-card .live-dot::before{animation:onb-halo 2s infinite}}
.demo-card h3{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.02em;margin:12px 0 10px}
.demo-card p{color:var(--soft);max-width:58ch}
.demo-card .go{font-family:var(--mono);font-size:.84rem;color:var(--mint);margin-top:18px;display:inline-block}

/* ---- 6-step strip (how it works) ---- */
.strip6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:44px}
@media(max-width:980px){.strip6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.strip6{grid-template-columns:1fr 1fr}}
.strip6 .s{border:1px solid var(--line);border-radius:13px;padding:16px 14px;background:var(--bg-2);
  box-shadow:var(--raise);position:relative}
.strip6 .s .n{font-family:var(--mono);font-size:.66rem;color:var(--dim);letter-spacing:.1em}
.strip6 .s .gl{font-family:var(--mono);font-size:1.05rem;color:var(--accent);display:block;margin:8px 0 6px}
.strip6 .s h3{font-size:.88rem;font-weight:600;line-height:1.35}
.strip6 .s p{font-size:.76rem;color:var(--dim);margin-top:5px;line-height:1.5}
.strip6 .s:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);color:var(--dim);font-size:.75rem;z-index:1}
@media(max-width:980px){.strip6 .s::after{display:none}}

/* ---- modes comparison table ---- */
.modes-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:40px;
  border:1px solid var(--line-lum);border-radius:16px;overflow:hidden;background:var(--panel);box-shadow:var(--raise)}
.modes-table th,.modes-table td{padding:16px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-2);font-size:.9rem}
.modes-table tr:last-child td{border-bottom:0}
.modes-table thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);background:var(--bg-2);border-bottom:1px solid var(--line)}
.modes-table thead th.m-names{color:var(--sky)}
.modes-table thead th.m-full{color:var(--mint)}
.modes-table td:first-child{font-family:var(--mono);font-size:.74rem;color:var(--dim);width:20%}
.modes-table td{color:var(--soft)}
.modes-table td b{color:var(--ink)}
.modes-note{margin-top:14px;font-size:.92rem;color:var(--soft)}
.modes-note b{color:var(--mint)}
@media(max-width:700px){.modes-table th,.modes-table td{padding:12px 12px;font-size:.8rem}}

/* ---- methodology band ---- */
.method{border:1px solid var(--line);border-radius:18px;margin-top:40px;padding:32px 36px;
  background:linear-gradient(180deg,var(--bg-2),var(--panel));box-shadow:var(--raise);
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
@media(max-width:820px){.method{grid-template-columns:1fr}}
.method .m .k{font-family:var(--mono);font-size:1.6rem;font-weight:700;color:var(--ink)}
.method .m .k small{font-size:.8rem;color:var(--accent)}
.method .m h3{font-size:.98rem;margin:8px 0 6px}
.method .m p{font-size:.84rem;color:var(--soft)}

/* ---- footer research-digest band ---- */
.digest-band{border-top:1px solid var(--line-2)}
.digest-band .waitcard{max-width:560px}

/* ============================== WIZARD ============================== */

.onb-wrap{max-width:1060px;margin:0 auto;padding:120px 26px 90px;position:relative;z-index:2}
.onb-grid{display:grid;grid-template-columns:264px 1fr;gap:36px;margin-top:34px;align-items:start}
@media(max-width:860px){.onb-grid{grid-template-columns:1fr;gap:22px}}

/* ---- progress rail (personnel roster) ---- */
.onb-rail{position:sticky;top:96px;border:1px solid var(--line);border-radius:16px;
  background:var(--bg-2);box-shadow:var(--raise);padding:10px;display:grid;gap:2px}
@media(max-width:860px){.onb-rail{position:static;grid-template-columns:repeat(3,1fr)}}
.onb-rail .r{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;
  padding:12px 12px;border-radius:11px;opacity:.55}
.onb-rail .r .rn{font-family:var(--mono);font-size:.68rem;color:var(--dim);width:26px;height:26px;
  border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;background:var(--sunken)}
.onb-rail .r .rt{font-size:.86rem;font-weight:600;line-height:1.3}
.onb-rail .r .rm{display:block;font-family:var(--mono);font-size:.64rem;color:var(--dim);
  letter-spacing:.04em;margin-top:3px;line-height:1.45}
.onb-rail .r.done{opacity:1}
.onb-rail .r.done .rn{color:var(--mint);border-color:var(--line-lum)}
.onb-rail .r.done .rn::before{content:"✓"}
.onb-rail .r.done .rn span{display:none}
.onb-rail .r.now{opacity:1;background:rgba(126,240,201,.05);border:1px solid var(--line-lum)}
.onb-rail .r.now .rn{color:#06120c;background:linear-gradient(135deg,var(--mint),var(--sky));border-color:transparent}
.onb-rail.confirmed .r{opacity:1}
.onb-rail.confirmed .r .rn{color:var(--mint)}
@media(max-width:860px){.onb-rail .r .rm{display:none}.onb-rail .r{grid-template-columns:22px 1fr;padding:9px 8px}
  .onb-rail .r .rn{width:22px;height:22px}}

/* ---- personalized banner ---- */
.onb-pitch{display:grid;gap:4px;border:1px solid var(--line-lum-sky);border-radius:12px;
  background:rgba(125,215,255,.04);padding:14px 18px;margin-bottom:20px}
.onb-pitch .p{font-size:.95rem;color:var(--ink)}
.onb-pitch .fw{font-family:var(--mono);font-size:.72rem;color:var(--sky)}
.onb-pitch .fw b{color:var(--mint);font-weight:600}

/* ---- ICP picker ---- */
.icp-fs{border:0;margin:22px 0 4px;padding:0}
.icp-fs legend{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:4px}
.icp-fs .hint{font-size:.8rem;color:var(--dim);margin-bottom:14px}
.icp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.icp-grid{grid-template-columns:1fr}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icp-card{display:block;cursor:pointer;position:relative}
.icp-card .face{display:block;border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  background:var(--sunken);transition:border-color .18s,background .18s,transform .18s}
.icp-card .face b{display:block;font-size:.9rem;font-weight:600}
.icp-card .face span{display:block;font-size:.76rem;color:var(--dim);margin-top:3px;line-height:1.45}
.icp-card:hover .face{border-color:rgba(126,240,201,.3);transform:translateY(-1px)}
.icp-card input:checked + .face{border-color:var(--mint);background:rgba(126,240,201,.06);
  box-shadow:0 0 0 1px rgba(126,240,201,.35), var(--press)}
.icp-card input:checked + .face b{color:var(--mint)}
.icp-card input:focus-visible + .face{outline:2px solid var(--sky);outline-offset:2px}
details.icp-more{margin-top:12px}
details.icp-more>summary{cursor:pointer;font-family:var(--mono);font-size:.76rem;color:var(--sky);
  list-style:none;display:inline-flex;gap:8px;align-items:center}
details.icp-more>summary::-webkit-details-marker{display:none}
details.icp-more>summary::before{content:"▸";transition:transform .18s}
details.icp-more[open]>summary::before{transform:rotate(90deg)}
.icp-groups{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media(max-width:640px){.icp-groups{grid-template-columns:1fr}}
.icp-group h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.icp-opt{display:flex;gap:9px;align-items:baseline;padding:6px 8px;border-radius:8px;cursor:pointer;
  font-size:.82rem;color:var(--soft)}
.icp-opt:hover{background:rgba(255,255,255,.03)}
.icp-opt input{accent-color:#7ef0c9;flex:0 0 auto;transform:translateY(1px)}
.icp-opt input:checked ~ span{color:var(--mint)}

/* ---- mode selector (step 3) ---- */
.mode-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
@media(max-width:600px){.mode-pick{grid-template-columns:1fr}}
.mode-card{display:block;cursor:pointer}
.mode-card .face{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  background:var(--sunken);height:100%;transition:border-color .18s,background .18s}
.mode-card .face b{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600}
.mode-card .face b .mtag{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;padding:2px 7px;
  border:1px solid var(--line);border-radius:999px;color:var(--dim);text-transform:uppercase}
.mode-card .face span{display:block;font-size:.76rem;color:var(--dim);margin-top:6px;line-height:1.5}
.mode-card:hover .face{border-color:rgba(126,240,201,.3)}
.mode-card input:checked + .face{border-color:var(--mint);background:rgba(126,240,201,.06);
  box-shadow:0 0 0 1px rgba(126,240,201,.35)}
.mode-card input:checked + .face b{color:var(--mint)}
.mode-card input:focus-visible + .face{outline:2px solid var(--sky);outline-offset:2px}
.mode-privacy{font-size:.78rem;color:var(--dim);margin-top:8px}
.mode-privacy b{color:var(--mint)}

/* ---- step 6: listening radar + confirmation ---- */
.onb-radar{width:56px;height:56px;border-radius:50%;position:relative;flex:0 0 auto;
  border:1px solid var(--line-lum)}
.onb-radar i{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(126,240,201,.5)}
.onb-radar::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--mint);box-shadow:0 0 10px 2px rgba(126,240,201,.55)}
@media(prefers-reduced-motion:no-preference){
  .onb-radar i{animation:onb-ping 2.4s cubic-bezier(.2,.6,.35,1) infinite}
  .onb-radar i:nth-child(2){animation-delay:1.2s}
}
@keyframes onb-ping{0%{transform:scale(.2);opacity:.9}80%,100%{transform:scale(1.35);opacity:0}}
.onb-listen{display:flex;align-items:center;gap:20px;margin-top:22px;
  font-family:var(--mono);font-size:.84rem;color:var(--soft)}
.onb-listen b{color:var(--mint)}

.onb-success{border:1px solid var(--line-lum);border-radius:16px;padding:32px;margin-top:22px;
  background:linear-gradient(180deg,rgba(126,240,201,.05),transparent 70%);text-align:center}
.onb-success[hidden]{display:none}
.onb-check{width:74px;height:74px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  font-size:2rem;color:#06120c;font-weight:700;background:linear-gradient(135deg,var(--mint),var(--sky));
  box-shadow:0 0 34px -4px rgba(126,240,201,.55)}
@media(prefers-reduced-motion:no-preference){.onb-check{animation:onb-checkpulse 2.6s ease-in-out infinite}}
@keyframes onb-checkpulse{0%,100%{box-shadow:0 0 22px -6px rgba(126,240,201,.45)}
  50%{box-shadow:0 0 44px -2px rgba(126,240,201,.75)}}
.onb-success h3{font-size:1.4rem;letter-spacing:-.02em}
.onb-success h3 b{color:var(--mint)}
.onb-success p{font-size:.92rem;color:var(--soft);margin-top:8px}
.onb-success .cta-row{justify-content:center;margin-top:22px}

/* motion floor for everyone */
@media(prefers-reduced-motion:reduce){
  .office-teaser .zz{opacity:.6;transform:none}
  .demo-card:hover,.icp-card:hover .face{transform:none}
}