/* MELRIC.AI marketing site. Page layer on top of app.css (loaded first).
   The view is pinned. The wheel/touch gesture drives the storyboard. */

html,body{margin:0;height:100%;background:#000;color:var(--text);overflow:hidden;overscroll-behavior:none}

#stage{position:fixed;inset:0;z-index:1}
#corridor,#neuro{position:absolute;inset:0;width:100%;height:100%}
#neuro{z-index:1;pointer-events:none}
#links{z-index:1;position:absolute;inset:0;width:100%;height:100%}

.topbar{position:fixed;top:0;left:0;right:0;z-index:9;display:flex;align-items:center;justify-content:space-between;padding:20px 30px;pointer-events:none;background:none;border:none}
.topbar .brand b{font-family:'Raleway',sans-serif;font-weight:400;letter-spacing:.5em;font-size:15px;color:#fff;text-shadow:0 0 10px rgba(94,255,160,.45)}
.topbar .tb-right{display:flex;align-items:center;gap:28px}

.glow{font-weight:600;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#eafff4;cursor:pointer;pointer-events:auto;text-decoration:none;
  text-shadow:0 0 6px rgba(94,255,160,.85),0 0 16px rgba(46,230,111,.55);animation:gpulse 3.6s ease-in-out infinite;background:none;border:none;font-family:inherit;padding:0}
.glow:hover{color:#fff;text-shadow:0 0 10px rgba(94,255,160,1),0 0 26px rgba(46,230,111,.85)}
.glow .arw{font-family:'Raleway',sans-serif;font-weight:200}
.glow.dim{color:var(--dim);font-size:11px;animation:none;text-shadow:0 0 4px rgba(94,255,160,.25)}
.glow.dim:hover{color:#eafff4;text-shadow:0 0 8px rgba(94,255,160,.7)}
@keyframes gpulse{0%,100%{text-shadow:0 0 5px rgba(94,255,160,.55),0 0 12px rgba(46,230,111,.4)}50%{text-shadow:0 0 10px rgba(94,255,160,.95),0 0 24px rgba(46,230,111,.72)}}

#hero{position:fixed;left:0;right:0;bottom:16%;z-index:5;text-align:center;pointer-events:none;transition:opacity .5s}
#hero .eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 10px rgba(46,230,111,.6);margin-bottom:14px}
#hero h1{font-family:'Raleway',sans-serif;font-weight:200;font-size:clamp(28px,4.6vw,52px);color:#fff;line-height:1.08;text-shadow:0 2px 30px rgba(0,0,0,.95);margin:0}
#hero h1 .soft{color:var(--dim)}

#phaseCap{position:fixed;left:0;right:0;bottom:8%;z-index:5;text-align:center;pointer-events:none;
  font-family:'Raleway',sans-serif;font-weight:300;font-size:clamp(18px,2.6vw,26px);color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.95);opacity:0;transition:opacity .45s;padding:0 24px}

#hint{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);animation:hintpulse 2.4s ease-in-out infinite;transition:opacity .4s}
@keyframes hintpulse{0%,100%{opacity:.35}50%{opacity:.85}}

.node{opacity:0;transition:transform .5s,opacity .5s,left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1)}

/* Enter-the-node decision surface (the app approval / one-move feel) */
#flow{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;text-align:center;padding:0 26px}
#flow.on{display:flex}
#flowScrim{position:fixed;inset:0;z-index:9;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.35),rgba(0,0,0,.72) 70%);opacity:0;transition:opacity .5s;pointer-events:none}
#flowScrim.on{opacity:1}
#flow .step{max-width:600px;transform:translateY(24px) scale(.97);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
#flow .step.in{transform:none;opacity:1}
#flow .kick{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 12px rgba(46,230,111,.6);margin-bottom:18px}
#flow h3{font-family:'Raleway',sans-serif;font-weight:200;font-size:clamp(26px,4.2vw,44px);color:#fff;margin:0 0 30px;line-height:1.12;text-shadow:0 2px 26px rgba(0,0,0,.95)}
#flow p{font-size:16px;line-height:1.65;color:var(--text);max-width:520px;margin:0 auto 26px}
#flow .opts{display:flex;gap:40px;justify-content:center;flex-wrap:wrap}
#flow .opt{font-family:'Raleway',sans-serif;font-weight:300;font-size:clamp(20px,2.6vw,28px);color:#eafff4;cursor:pointer;
  text-shadow:0 0 7px rgba(94,255,160,.7),0 0 18px rgba(46,230,111,.4);transition:.2s}
#flow .opt:hover{color:#fff;text-shadow:0 0 12px rgba(94,255,160,1),0 0 30px rgba(46,230,111,.8);transform:translateY(-2px)}
#flow .backline{margin-top:34px}
#flow .backline .glow{font-size:12px;opacity:.8}

/* Native Webflow form, styled to the app language. The form lives hidden in
   #formHome and is moved into the final step by site.js. */
#formHome{display:none}
#flow #formSlot #formHome,#contactPanel #contactFormWrap{display:block}
.mel-form .w-form{margin:0}
.mel-form form{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin:10px 0 0}
.mel-form input[type=email],.mel-form input[type=text],.mel-form textarea{
  background:rgba(255,255,255,.04);border:none;border-bottom:1px solid rgba(94,255,160,.4);color:#fff;
  font-family:'Raleway',sans-serif;font-size:17px;padding:10px 6px;width:290px;outline:none;text-align:center;border-radius:0;box-shadow:none}
.mel-form textarea{width:min(440px,84vw);min-height:96px;text-align:left;resize:vertical}
.mel-form input::placeholder,.mel-form textarea::placeholder{color:var(--dim)}
.mel-form input:focus,.mel-form textarea:focus{border-color:var(--cyan)}
.mel-form input[type=submit]{width:auto;background:none;border:none;cursor:pointer;padding:0;
  font-weight:600;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#eafff4;font-family:inherit;
  text-shadow:0 0 6px rgba(94,255,160,.85),0 0 16px rgba(46,230,111,.55);animation:gpulse 3.6s ease-in-out infinite;text-align:center}
.mel-form input[type=submit]:hover{color:#fff;text-shadow:0 0 10px rgba(94,255,160,1),0 0 26px rgba(46,230,111,.85)}
.mel-form .w-form-done{background:none;border:none;color:#eafff4;font-family:'Raleway',sans-serif;font-size:19px;
  text-shadow:0 0 8px rgba(94,255,160,.8),0 0 20px rgba(46,230,111,.5);padding:14px 0}
.mel-form .w-form-fail{background:none;border:none;color:#fca5a5;font-size:13px;letter-spacing:.04em;margin-top:14px;padding:0}

/* Contact overlay (native Webflow form) */
#contactPanel{position:fixed;inset:0;z-index:11;display:none;align-items:center;justify-content:center;text-align:center;padding:0 26px}
#contactPanel.on{display:flex}
#contactPanel .step{max-width:600px}
#contactPanel .kick{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 12px rgba(46,230,111,.6);margin-bottom:18px}
#contactPanel h3{font-family:'Raleway',sans-serif;font-weight:200;font-size:clamp(24px,3.6vw,38px);color:#fff;margin:0 0 24px;line-height:1.12}
#contactPanel form{flex-direction:column;gap:14px}
#contactPanel .backline{margin-top:28px}

/* Corner utility */
.corner{position:fixed;bottom:22px;right:28px;z-index:8}

/* Low power: fps watchdog hides the corridor, keeps orb + lines */
body.low-power #corridor{display:none}

/* Small screens: touch drives the storyboard */
@media (max-width:700px){
  .topbar{padding:16px 18px}
  .topbar .tb-right{gap:16px}
  .topbar .brand b{font-size:13px;letter-spacing:.4em}
  .glow{font-size:11px;letter-spacing:.14em}
  .node{width:78px;padding:7px 5px}
  .node .nm{font-size:10px}
  .node .ico svg{width:16px;height:16px}
  #hero{bottom:14%}
  #flow .opts{gap:22px}
  .mel-form input[type=email]{width:min(290px,78vw)}
  .corner{right:18px}
}

/* Reduced motion: no pulsing, no breathing, static glow. site.js also skips
   the WebGL boot and the electricity, and applies the storyboard instantly. */
@media (prefers-reduced-motion: reduce){
  .glow,#hint,.mel-form input[type=submit]{animation:none}
  .orb::after{animation:none}
  .node,#hero,#phaseCap,#flow .step{transition-duration:.01s}
}
body.reduced .orb{background:radial-gradient(circle at 50% 45%,rgba(46,230,111,.35),rgba(46,230,111,.10) 40%,transparent 65%)}

/* ============================== v3 layer ==================================
   Bigger orb, always-glowing nodes, node cards, the WORK/PERSONAL toggle. */

/* Melric 50% bigger */
.orb{width:225px;height:225px}

/* nodes glow green at rest, flare bright when a signal lands */
.node::before{opacity:.16}
.node .ico svg{filter:drop-shadow(0 0 7px rgba(94,255,160,.75))}
.node .nm{color:#eafff4;text-shadow:0 0 10px rgba(46,230,111,.55)}
.node.flare::before{opacity:.55;transition:opacity .18s ease-out}
.node.flare .ico svg{filter:drop-shadow(0 0 14px rgba(94,255,160,1))}
.node.lit::before{opacity:.42}
.node.lit .ico svg{filter:drop-shadow(0 0 13px rgba(94,255,160,1))}
.node.lit .nm{color:#fff;text-shadow:0 0 14px rgba(94,255,160,.9)}
.node.ghost{width:86px}
.node.ghost .nm{font-size:10px;color:#cfeeda}

#stage{will-change:transform}

/* the in-node card: still inside Melric */
#nodeCard{position:fixed;left:50%;top:50%;z-index:7;width:min(480px,86vw);padding:34px 38px;text-align:left;
  background:rgba(6,14,9,.78);border:1px solid rgba(94,255,160,.28);border-radius:14px;
  box-shadow:0 0 60px rgba(46,230,111,.14),inset 0 0 40px rgba(46,230,111,.05);
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;will-change:transform,opacity}
#nodeCard .kick{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 12px rgba(46,230,111,.6);margin-bottom:12px}
#nodeCard h3{font-family:'Raleway',sans-serif;font-weight:200;font-size:clamp(24px,3.4vw,36px);color:#fff;
  margin:0 0 20px;line-height:1.1;text-shadow:0 2px 22px rgba(0,0,0,.9)}
#nodeCard .ncline{font-size:15px;line-height:1.5;color:#dff5e6;padding:7px 0;opacity:0;
  text-shadow:0 0 8px rgba(46,230,111,.25);border-bottom:1px solid rgba(94,255,160,.08)}
#nodeCard .ncline:last-child{border-bottom:none}
#nodeCard .ncline::before{content:'\203A';color:var(--cyan);margin-right:12px;
  text-shadow:0 0 8px rgba(94,255,160,.8)}

/* the WORK / PERSONAL toggle (echoes the app's mode switch) */
#modeTog{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:8;display:flex;gap:4px;
  padding:4px 6px;border:1px solid rgba(94,255,160,.25);border-radius:999px;background:rgba(6,14,9,.7);
  opacity:0;pointer-events:none;transition:opacity .4s}
#modeTog .mt{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);padding:4px 14px;border-radius:999px;transition:all .35s}
#modeTog .mt.on{color:#0a140d;background:rgba(94,255,160,.92);
  box-shadow:0 0 18px rgba(46,230,111,.55);text-shadow:none}

@media (max-width:700px){
  .orb{width:170px;height:170px}
  #nodeCard{padding:24px 22px}
  #nodeCard .ncline{font-size:13.5px}
  #modeTog{top:56px}
}

/* ============================== v3.2 layer ================================
   Nodes 2x, app-style lit pucks: glowing circle behind each glyph. */
.node{width:180px;padding:10px 8px}
.node .ico{width:88px;height:88px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,rgba(46,230,111,.34),rgba(46,230,111,.12) 52%,rgba(46,230,111,.04) 74%,rgba(46,230,111,0) 100%);
  border:1px solid rgba(94,255,160,.4);
  box-shadow:0 0 26px rgba(46,230,111,.38),inset 0 0 20px rgba(46,230,111,.2)}
.node .ico svg{width:40px;height:40px;stroke-width:1.4}
.node .nm{font-size:15px;font-weight:700;margin-top:12px;letter-spacing:.08em;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 2px 10px rgba(0,0,0,.85),0 0 12px rgba(46,230,111,.6)}
.node.ghost{width:140px}
.node.ghost .ico{width:64px;height:64px;box-shadow:0 0 18px rgba(46,230,111,.28),inset 0 0 14px rgba(46,230,111,.14)}
.node.ghost .ico svg{width:28px;height:28px}
.node.ghost .nm{font-size:12px}
.node.flare .ico{border-color:rgba(94,255,160,.95);
  box-shadow:0 0 46px rgba(94,255,160,.75),inset 0 0 26px rgba(46,230,111,.4);
  background:radial-gradient(circle at 50% 42%,rgba(94,255,160,.5),rgba(46,230,111,.18) 52%,rgba(46,230,111,.05) 74%,rgba(46,230,111,0) 100%);
  transition:box-shadow .18s ease-out,border-color .18s ease-out}
.node.lit .ico{border-color:rgba(94,255,160,.85);
  box-shadow:0 0 40px rgba(94,255,160,.6),inset 0 0 24px rgba(46,230,111,.32)}

@media (max-width:700px){
  .node{width:112px;padding:7px 5px}
  .node .ico{width:56px;height:56px}
  .node .ico svg{width:26px;height:26px}
  .node .nm{font-size:11px;margin-top:7px}
  .node.ghost{width:92px}
  .node.ghost .ico{width:44px;height:44px}
  .node.ghost .ico svg{width:20px;height:20px}
  .node.ghost .nm{font-size:9.5px}
}

/* ============================== v4 layer ==================================
   Live widget nodes, the app's bottom Work|Family toggle with sliding knob,
   Melric's caption bar, the approval-layer ask, family-blue tint. */

/* widget nodes: small live app cards ringed around the orb */
.node.widget{width:216px;padding:13px 15px;border-radius:12px;text-align:left;cursor:pointer;
  background:rgba(6,14,9,.74);border:1px solid rgba(94,255,160,.28);
  box-shadow:0 0 24px rgba(46,230,111,.2),inset 0 0 16px rgba(46,230,111,.07);
  backdrop-filter:blur(4px)}
.node.widget .wt{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);text-shadow:0 0 10px rgba(46,230,111,.5);margin-bottom:8px}
.node.widget .wt svg{width:14px;height:14px;flex:0 0 auto}
.node.widget .wl{font-size:13px;color:#dff5e6;padding:3px 0;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.node.widget .wl.big{font-size:19px;font-weight:600;color:#fff;text-shadow:0 0 12px rgba(46,230,111,.45)}
.node.widget .wl.ok{color:#9fe3b6;font-size:12px}
.node.widget .wl.done{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(94,255,160,.45)}
.node.widget .wl.warn{color:#fcd9a0}
.node.widget .wl .tag{font-size:9px;font-weight:800;letter-spacing:.16em;color:#fca5a5;margin-left:8px;
  text-shadow:0 0 10px rgba(252,165,165,.6)}
.node.widget.flare{border-color:rgba(94,255,160,.9);
  box-shadow:0 0 44px rgba(94,255,160,.6),inset 0 0 22px rgba(46,230,111,.22);
  transition:box-shadow .18s ease-out,border-color .18s ease-out}
.node.widget.morphing{transform:translate(-50%,-50%) scale(.86)!important;opacity:.25!important;
  transition:transform .18s ease-in,opacity .18s ease-in}

/* the app's Work|Family toggle, bottom center (app: .modeToggle bottom 46px) */
#modeTog{position:fixed;left:50%;bottom:46px;top:auto;transform:translateX(-50%);z-index:8;display:flex;gap:2px;
  padding:3px;border-radius:999px;background:rgba(10,16,12,.55);border:1px solid #1c2a1f;
  backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s,box-shadow .4s}
#modeTog .mt-opt{position:relative;z-index:2;background:none;border:none;color:var(--dim);font-size:11px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 16px;border-radius:999px;cursor:pointer;transition:color .3s;font-family:inherit}
#modeTog .mt-opt.on{color:#7dffb0}
#modeTog .mt-knob{position:absolute;z-index:1;top:3px;bottom:3px;border-radius:999px;background:rgba(46,230,111,.16);
  box-shadow:0 0 14px rgba(46,230,111,.18);transition:left .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1),background .45s,box-shadow .45s}
body.familyMode #modeTog .mt-opt.on{color:#9fd8ff}
body.familyMode #modeTog .mt-knob{background:rgba(94,200,255,.16);box-shadow:0 0 14px rgba(94,200,255,.18)}
#modeTog.flipping{animation:togflash .85s ease-out}
@keyframes togflash{
  0%{box-shadow:0 0 0 rgba(94,255,160,0);transform:translateX(-50%) scale(1)}
  30%{box-shadow:0 0 42px rgba(94,255,160,.85);transform:translateX(-50%) scale(1.16)}
  100%{box-shadow:0 0 0 rgba(94,255,160,0);transform:translateX(-50%) scale(1)}
}

/* family mode: the app's blue-tinted world */
body.familyMode .node.widget{border-color:rgba(140,210,255,.3);
  box-shadow:0 0 24px rgba(94,200,255,.2),inset 0 0 16px rgba(94,200,255,.07)}
body.familyMode .node.widget .wt{color:#9fd8ff;text-shadow:0 0 10px rgba(94,200,255,.5)}
body.familyMode .node.widget .wl.big{text-shadow:0 0 12px rgba(94,200,255,.45)}
body.familyMode .node.widget .wl.ok{color:#a8dcff}
body.familyMode .node.widget.flare{border-color:rgba(160,220,255,.9);
  box-shadow:0 0 44px rgba(94,200,255,.6),inset 0 0 22px rgba(94,200,255,.22)}

/* Melric's caption bar (top center), the app's caption language */
#melCap{position:fixed;top:66px;left:50%;transform:translateX(-50%) translateY(-6px);z-index:12;max-width:min(560px,80vw);
  text-align:center;padding:10px 20px;border-radius:12px;background:rgba(10,16,12,.72);border:1px solid rgba(94,255,160,.22);
  backdrop-filter:blur(6px);font-size:14px;color:#dff5e6;letter-spacing:.02em;
  text-shadow:0 0 8px rgba(46,230,111,.3);opacity:0;pointer-events:none;transition:opacity .45s,transform .45s}
#melCap.show{opacity:1;transform:translateX(-50%) translateY(0)}
#melCap::before{content:'MELRIC';display:block;font-size:9px;font-weight:800;letter-spacing:.34em;color:var(--accent);
  text-shadow:0 0 10px rgba(46,230,111,.6);margin-bottom:4px}

/* the ask as an approval layer: orb rises, content sits beneath it */
#flow.approval{align-items:flex-start;padding-top:31vh}
#flow.approval h3{font-size:clamp(24px,3.4vw,34px);font-weight:200;color:#eafff1}
#flow.approval .kick{margin-bottom:14px}
#flow.approval .opts{gap:34px;margin-top:6px}
.orb{transition:transform .5s cubic-bezier(.4,0,.2,1),top .55s cubic-bezier(.55,0,.3,1),left .55s cubic-bezier(.55,0,.3,1),filter .4s}

@media (max-width:700px){
  .node.widget{width:168px;padding:10px 11px}
  .node.widget .wl{font-size:11.5px}
  .node.widget .wl.big{font-size:16px}
  #modeTog{bottom:34px}
  #melCap{top:58px;font-size:12.5px}
  #flow.approval{padding-top:27vh}
}

/* ============================== v5 layer ==================================
   App-true nodes (glyph + name + status + LIVE on a soft radial glow, no
   boxes), breathing glow, cockpit corner rails, in-node app pages with the
   jumped-up orb + letterspaced label, full family-blue crossover. */

/* nodes: no boxes, no borders. A soft radial glow that BREATHES. */
.node,.node.widget{width:180px;padding:22px 10px;background:none;border:none;box-shadow:none;
  border-radius:0;text-align:center;backdrop-filter:none;cursor:pointer}
.node::before{content:'';position:absolute;inset:-26px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(46,230,111,.22),rgba(46,230,111,.08) 45%,rgba(46,230,111,0) 70%);
  animation:nbreathe 3.6s ease-in-out infinite;animation-delay:var(--bd,0ms)}
.node::after{content:'';position:absolute;inset:-32px;border-radius:50%;z-index:-1;opacity:0;
  background:radial-gradient(circle,rgba(94,255,160,.36),rgba(94,255,160,.12) 48%,rgba(94,255,160,0) 72%);
  transition:opacity .5s}
@keyframes nbreathe{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
.node .ico{width:auto;height:auto;margin:0 auto 8px;background:none;border:none;box-shadow:none;border-radius:0}
.node .ico svg{width:22px;height:22px;stroke-width:1.5;filter:drop-shadow(0 0 8px rgba(94,255,160,.8))}
.node .nm{font-size:14.5px;font-weight:700;letter-spacing:.02em;color:#fff;margin:0;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 12px rgba(46,230,111,.55)}
.node .st{font-size:11.5px;color:#bfe8cc;margin-top:4px;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.node .st.wait{color:#fcd9a0;text-shadow:0 1px 6px rgba(0,0,0,.9),0 0 8px rgba(252,217,160,.3)}
.node .live{font-size:8.5px;font-weight:800;letter-spacing:.42em;color:var(--accent);margin-top:9px;
  text-shadow:0 0 10px rgba(46,230,111,.75)}
.node.widget .nm{font-size:13px}
.node.widget .st{font-size:11px}
.node.widget .ico svg{width:20px;height:20px}
/* flare + lit: brighter glow, no box anywhere */
.node.flare .ico,.node.lit .ico{background:none;border:none;box-shadow:none}
.node.flare .ico svg,.node.lit .ico svg{filter:drop-shadow(0 0 16px rgba(94,255,160,1))}
.node.flare::after{opacity:1;transition:opacity .15s ease-out}
.node.lit::after{opacity:.85}
.node.flare .nm,.node.lit .nm{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 16px rgba(94,255,160,.9)}
body.reduced .node::before{animation:none}

/* family mode: the nodes themselves cross to blue (glow, glyph, LIVE, text) */
body.familyMode .node::before{background:radial-gradient(circle,rgba(94,200,255,.22),rgba(94,200,255,.08) 45%,rgba(94,200,255,0) 70%)}
body.familyMode .node::after{background:radial-gradient(circle,rgba(160,220,255,.36),rgba(160,220,255,.12) 48%,rgba(160,220,255,0) 72%)}
body.familyMode .node .ico svg{filter:drop-shadow(0 0 8px rgba(140,210,255,.8))}
body.familyMode .node .nm{text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 12px rgba(94,200,255,.6)}
body.familyMode .node .st{color:#cfe6f7}
body.familyMode .node .st.wait{color:#fcd9a0}
body.familyMode .node .live{color:#9fd8ff;text-shadow:0 0 10px rgba(94,200,255,.75)}
body.familyMode .node.flare .ico svg,body.familyMode .node.lit .ico svg{filter:drop-shadow(0 0 16px rgba(160,220,255,1))}

/* cockpit rails: live data in the four corners of the business beat */
.rail{position:fixed;z-index:6;max-width:240px;font-size:12px;color:#cfeeda;opacity:0;
  transition:opacity .5s;pointer-events:none}
#railTL{top:64px;left:28px;text-align:left}
#railTR{top:64px;right:28px;text-align:right}
#railBL{bottom:104px;left:28px;text-align:left}
#railBR{bottom:104px;right:28px;text-align:right}
.rail .rt{font-size:9.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);
  margin:16px 0 7px}
.rail .rt:first-child{margin-top:0}
.rail .rt .rmeta{color:#fcd9a0;margin-left:10px;letter-spacing:.14em;text-shadow:0 0 8px rgba(252,217,160,.3)}
.rail .rr{padding:2.5px 0;line-height:1.4;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.rail .rr.warn{color:#fcd9a0}
.rail .rr.ok{color:#9fe3b6;font-size:11px}
.rail .rr.big{font-size:24px;font-weight:600;color:#fff;text-shadow:0 0 14px rgba(46,230,111,.5)}
.rail.morphing{opacity:.12!important;transition:opacity .2s ease-in}
body.familyMode .rail .rr.big{text-shadow:0 0 14px rgba(94,200,255,.5)}
body.familyMode .rail .rr.ok{color:#a8dcff}
#cockCap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:8;
  font-size:9px;font-weight:800;letter-spacing:.46em;color:var(--dim);opacity:0;transition:opacity .5s}

/* the orb JUMPS: springy overshoot when it rises to the top */
.orb{transition:transform .6s cubic-bezier(.3,1.4,.45,1),top .65s cubic-bezier(.3,1.4,.45,1),left .55s cubic-bezier(.55,0,.3,1),filter .4s}
#orbTag{position:fixed;left:50%;top:calc(17vh + 88px);transform:translateX(-50%);z-index:7;
  font-size:11px;font-weight:800;letter-spacing:.52em;text-indent:.52em;color:#d9ffe8;
  text-shadow:0 0 12px rgba(46,230,111,.6);opacity:0;transition:opacity .4s}
body.nodeFocus #orbTag{opacity:1}

/* when a node page or the ask owns the screen, the ring and rails clear out */
body.nodeFocus .node,body.flowMode .node{opacity:0!important;pointer-events:none!important}
body.nodeFocus .rail,body.flowMode .rail{opacity:0!important}
body.nodeFocus #modeTog,body.flowMode #modeTog,body.nodeFocus #cockCap,body.flowMode #cockCap{opacity:0!important;pointer-events:none!important}

/* the in-node page: app-true, no card box. Copy under the risen orb. */
#nodePage{position:fixed;inset:0;z-index:7;opacity:0;pointer-events:none}
#nodePage .npc{position:absolute;left:50%;top:32vh;transform:translateX(-50%);width:min(640px,88vw);text-align:center}
#nodePage .kick{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);
  text-shadow:0 0 12px rgba(46,230,111,.6);margin-bottom:14px}
#nodePage h3{font-family:'Raleway',sans-serif;font-weight:200;font-size:clamp(26px,4vw,42px);color:#fff;
  margin:0 0 12px;line-height:1.1;text-shadow:0 2px 26px rgba(0,0,0,.95)}
#nodePage .npst{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9fe3b6;
  text-shadow:0 0 10px rgba(46,230,111,.4);margin-bottom:10px}
#nodePage .npst.wait{color:#fcd9a0;text-shadow:0 0 10px rgba(252,217,160,.35)}
#nodePage .npq{font-family:'Raleway',sans-serif;font-style:italic;font-weight:300;font-size:14.5px;
  color:var(--dim);margin-bottom:22px}
#nodePage .ncline{font-size:15px;line-height:1.5;color:#dff5e6;padding:6px 0;opacity:0;
  text-shadow:0 0 8px rgba(46,230,111,.25)}
#nodePage .npacts{display:flex;gap:38px;justify-content:center;margin-top:24px}
#nodePage .npact{font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:#eafff4;
  text-shadow:0 0 6px rgba(94,255,160,.85),0 0 16px rgba(46,230,111,.55)}
#nodePage .rt{font-size:9.5px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
#nodePage .npl{position:absolute;left:36px;top:30vh;max-width:210px;text-align:left}
#nodePage .npr{position:absolute;right:36px;top:30vh;max-width:230px;text-align:right}
#nodePage .nps{padding:3px 0;font-size:12px;color:#cfeeda;text-shadow:0 1px 6px rgba(0,0,0,.9)}
#nodePage .nps b{display:block;font-size:20px;font-weight:600;color:#fff;text-shadow:0 0 12px rgba(46,230,111,.45)}
#nodePage .rr{padding:2.5px 0;font-size:12px;line-height:1.4;color:#cfeeda;text-shadow:0 1px 6px rgba(0,0,0,.9)}

@media (max-width:700px){
  .node,.node.widget{width:118px;padding:14px 6px}
  .node .ico svg,.node.widget .ico svg{width:18px;height:18px}
  .node .nm{font-size:11.5px}
  .node.widget .nm{font-size:10.5px}
  .node .st,.node.widget .st{font-size:9px}
  .node .live{font-size:7px;margin-top:6px}
  .rail,#nodePage .npl,#nodePage .npr{display:none}
  #cockCap{bottom:18px;font-size:8px}
  #nodePage .npc{top:30vh}
  #orbTag{font-size:9.5px;top:calc(17vh + 68px)}
}
@media (prefers-reduced-motion: reduce){
  .node::before{animation:none}
}


/* v5.1: kill every last v4 box. Widgets stay boxless in family mode and on
   flare; the glow lives only in the radial pseudo layers. */
body.familyMode .node.widget{background:none;border:none;box-shadow:none;backdrop-filter:none}
.node.widget.flare,body.familyMode .node.widget.flare{background:none;border:none;box-shadow:none}
.node.widget.lit,body.familyMode .node.widget.lit{background:none;border:none;box-shadow:none}


/* v5.2: qualifier answers read as BUTTONS. Wider spacing, green light coming
   from BEHIND each option (soft pulsing backlight), hover glows brighter.
   Still glowing text, never pills. */
#flow .step{max-width:820px}
#flow .opts{gap:48px;margin-top:10px}
#flow.approval .opts{gap:44px}
#flow .opt{position:relative;padding:12px 20px}
#flow .opt::before{content:'';position:absolute;inset:-16px -28px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(46,230,111,.30),rgba(46,230,111,.11) 48%,rgba(46,230,111,0) 74%);
  animation:optbreathe 3.4s ease-in-out infinite;transition:opacity .25s}
@keyframes optbreathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.95;transform:scale(1.05)}}
#flow .opt:hover{color:#fff;text-shadow:0 0 14px rgba(94,255,160,1),0 0 34px rgba(46,230,111,.9)}
#flow .opt:hover::before{animation:none;opacity:1;transform:scale(1.12);
  background:radial-gradient(ellipse at center,rgba(94,255,160,.46),rgba(46,230,111,.18) 50%,rgba(46,230,111,0) 78%)}
@media (max-width:700px){
  #flow .opts{gap:34px}
  #flow .opt{padding:8px 10px}
  #phaseCap{bottom:16%}
}
@media (prefers-reduced-motion: reduce){
  #flow .opt::before{animation:none}
}