/* wrenhouse.io: the Nest previews. Tokens are the hub's own dark set (hub/hub.html and the approved
   "Customer hub revamp" boards). Depth comes from layered solid surfaces and real shadows, never gradients or blur. */
.nest-kit{
  --n-ground:#080a0b; --n-surface:#15181d; --n-sunk:#111417; --n-ink:#ecf0ef; --n-muted:#a3aeac; --n-line:#262c2e; --n-line2:#1e2326;
  --n-accent:#3fb0a5; --n-accent-ink:#86d6cc; --n-accent-soft:#12302d; --n-on-accent:#06201d;
  --n-ok:#6cc596; --n-ok-soft:#15301f; --n-amber:#e3ac52; --n-amber-soft:#33270f; --n-blue:#a9bcf8; --n-blue-soft:#1d2640; --n-rose:#f7a9cf; --n-rose-soft:#3c1d2d;
  --k-bg2:#101617; --k-on2:#163a37; --k-ink2:#ecf0ef; --k-muted2:#97a6a3; --glow:#5fd6c8; --teal:#0c7a73;
  --n-lift:0 1px 2px rgba(0,0,0,.4),0 16px 40px rgba(0,0,0,.35);
  --n-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif; --n-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}

/* ---------- The stage: page band, then the stage plate, then the hub, then the floating Wren card ---------- */
.ns-stage{position:relative}
.ns-plate{position:relative;background:#0f1516;border:1px solid #1c2426;border-radius:32px;padding:clamp(10px,2.2vw,28px);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 60px 120px -60px rgba(0,0,0,.9)}
.ns-tilt{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;will-change:transform}
.nest{container-type:inline-size;position:relative;display:flex;gap:10px;padding:10px;background:var(--n-ground);border-radius:24px;color:var(--n-ink);
  font-family:var(--font);font-size:14px;line-height:1.45;text-align:left;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 40px 80px -30px rgba(0,0,0,.85),0 0 140px -30px rgba(95,214,200,.28);
  transition:opacity .3s ease,transform .3s ease}
.swap .nest,.ns-frame.swap .nest{opacity:.25;transform:translateY(6px)}
.nest *{box-sizing:border-box}
.nest .i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nest .i.s{width:15px;height:15px}
.nest .sp,.wren-card .sp{width:12px;height:12px;fill:currentColor;flex:none}
.n-eb{font-family:var(--n-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--n-muted);font-weight:500}

/* Rail */
.n-rail{width:76px;flex:none;background:var(--k-bg2);color:var(--k-ink2);border-radius:22px;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:2px}
.n-mark{width:52px;height:52px;border-radius:16px;background:var(--k-on2);display:grid;place-items:center;margin-bottom:10px}
.n-mark svg{width:30px;height:30px}.n-mark .hs{fill:none;stroke:var(--k-ink2);stroke-width:2;stroke-linejoin:round}.n-mark .hd{fill:var(--glow)}
.n-mark.sm{width:34px;height:34px;border-radius:11px;margin:0}.n-mark.sm svg{width:22px;height:22px}
.n-mod{width:62px;min-height:56px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:500;color:var(--k-muted2);position:relative;text-align:center;line-height:1.15;padding:0 2px}
.n-mod.on{background:var(--k-on2);color:#fff}.n-mod.on .i{color:var(--glow)}
.n-badge{position:absolute;top:4px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--glow);color:#062421;font:600 10px/18px var(--n-mono);text-align:center}
.n-fill{flex:1;min-height:10px}
.n-av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;font-size:12px;font-weight:600;background:var(--n-accent-soft);color:var(--n-accent-ink)}
.n-av.t1{background:var(--n-blue-soft);color:var(--n-blue)}.n-av.t2{background:var(--n-rose-soft);color:var(--n-rose)}.n-av.t3{background:var(--n-amber-soft);color:var(--n-amber)}
.n-me{width:38px;height:38px;font-size:13px;background:var(--n-amber-soft);color:var(--n-amber)}

/* Sheet */
.n-sheet{flex:1;min-width:0;background:var(--n-surface);border-radius:20px;box-shadow:var(--n-lift);display:flex;flex-direction:column;overflow:hidden}
.n-phone-top{display:none}
.n-screen{flex:1;display:flex;flex-direction:column;min-height:0}
.n-head{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--n-line2);flex-wrap:wrap}
.n-seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--n-sunk);border:1px solid var(--n-line2);flex:none}
.n-seg span{height:30px;padding:0 14px;border-radius:9px;font-size:13px;color:var(--n-muted);display:flex;align-items:center;gap:6px;white-space:nowrap}
.n-seg span.on{background:var(--n-surface);color:var(--n-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.n-count{font:normal 600 12px var(--n-mono);color:var(--n-accent-ink)}
.n-sum{margin:0;font-size:13px;color:var(--n-muted);flex:1;min-width:180px}.n-sum b{color:var(--n-ink);font-weight:600}
.n-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:12px;background:var(--n-sunk);border:1px solid var(--n-line);color:var(--n-muted);font-size:12.5px;width:240px}

/* For you */
.n-fy{flex:1;display:grid;grid-template-columns:200px minmax(220px,300px) minmax(0,1fr);min-height:0}
.n-lanes{background:var(--n-sunk);border-right:1px solid var(--n-line2);padding:14px 10px;display:flex;flex-direction:column;gap:2px}
.n-lanes .n-eb{padding:0 10px 6px}
.n-lane{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:10px;font-size:13px;color:var(--n-muted)}
.n-lane span{flex:1}.n-lane i{font:normal 12px var(--n-mono)}
.n-lane.on{background:var(--n-accent-soft);color:var(--n-accent-ink);font-weight:600}
.n-meet{margin-top:14px;border-radius:16px;background:var(--k-bg2);border:1px solid #1b2425;padding:12px 12px 6px;display:grid;font-size:12px;color:var(--k-ink2)}
.n-meet b{font-size:12.5px;margin-bottom:4px}
.n-meet span{display:grid;grid-template-columns:62px 1fr;gap:6px;padding:7px 0;border-top:1px solid var(--k-on2);line-height:1.35}
.n-meet time{font-family:var(--n-mono);font-size:11px;color:var(--k-muted2)}
.n-list{border-right:1px solid var(--n-line2);padding:6px 0;overflow:hidden}
.n-row{display:grid;gap:3px;padding:12px 16px;border-left:3px solid transparent;transition:background .3s ease}
.n-row+.n-row{border-top:1px solid var(--n-line2)}
.n-row.cur{background:var(--n-accent-soft);border-left-color:var(--glow)}
.n-row.arrive{animation:n-arrive .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes n-arrive{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.n-row-top{display:flex;align-items:center;gap:8px;min-width:0}
.n-row-top b{font-size:13.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-row-top time{font-size:11.5px;color:var(--n-muted);flex:none}
.n-dot{width:7px;height:7px;border-radius:50%;background:var(--glow);flex:none}.n-dot.read{background:transparent;border:1px solid var(--n-line)}
.n-subj{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-row-foot{display:flex;align-items:center;gap:8px;min-width:0}
.n-row-foot em{font-style:normal;font-size:11.5px;color:var(--n-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;flex:none}
.p-ready{background:var(--n-accent-soft);color:var(--n-accent-ink)}.p-needs{background:var(--n-amber-soft);color:var(--n-amber)}.p-done{background:var(--n-ok-soft);color:var(--n-ok)}
.n-skel{display:grid;gap:14px;padding:16px}.n-skel i{display:block;height:46px;border-radius:12px;background:var(--n-sunk);animation:n-pulse 1.2s ease-in-out infinite alternate}
@keyframes n-pulse{to{opacity:.45}}
.n-read{padding:18px 24px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.n-read-top{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--n-muted);flex-wrap:wrap}
.n-read h3{margin:0;font-family:var(--n-display);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.n-msg{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--n-sunk);border:1px solid var(--n-line2)}
.n-msg p{margin:0;font-size:13px;line-height:1.5;color:var(--n-ink)}
.n-drafted{display:flex;align-items:center;gap:6px;font:500 10.5px var(--n-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-accent-ink)}
.n-compose{border:1px solid var(--n-line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .3s ease}
.n-compose.is-sent{border-color:#255048}
.n-fld{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--n-line2);font-size:12px;color:var(--n-muted)}
.n-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--n-sunk);border:1px solid var(--n-line);color:var(--n-ink);font-size:12px;font-weight:500}
.n-doc{padding:12px 14px;display:grid;gap:8px;font-size:13px;line-height:1.55;min-height:112px}
.n-doc p{margin:0}.n-sig{color:var(--n-muted)}
.n-typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--glow);animation:n-blink .9s steps(1) infinite}
@keyframes n-blink{50%{opacity:0}}
.n-actions{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--n-line2);flex-wrap:wrap}
.n-btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:12px;font-size:12.5px;font-weight:600;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease}
.n-btn.go{background:var(--glow);color:#062421}
.n-btn.ghost{border:1px solid var(--n-line);color:var(--n-ink)}
.n-btn.quiet{color:var(--n-muted)}
.n-btn.pressed{transform:scale(.94);box-shadow:0 0 0 7px rgba(95,214,200,.22)}
.n-sent,.w-sent{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--n-ok)}
.n-sent .i,.w-sent .i{width:16px;height:16px;stroke-width:2.4}
.n-sorted{margin:auto 0;display:grid;gap:14px}.n-sorted h3{margin:0}.n-sorted ol{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--n-line2);border-radius:16px;overflow:hidden}.n-sorted li{display:grid;grid-template-columns:70px 1fr;gap:10px;padding:11px 14px;font-size:12.5px;line-height:1.4}.n-sorted li+li{border-top:1px solid var(--n-line2)}.n-sorted time{font:500 11px var(--n-mono);color:var(--glow)}.n-sorted p{margin:0;color:var(--n-muted);font-size:13px}
.n-empty{margin:auto;display:grid;justify-items:center;gap:6px;color:var(--n-muted);font-size:13px;text-align:center}.n-empty .sp{width:22px;height:22px;color:var(--n-accent)}.n-empty b{color:var(--n-ink)}

/* Today */
.n-today{padding:20px 24px 22px;display:grid;gap:18px}
.n-hello h3{margin:0;font-family:var(--n-display);font-size:26px;font-weight:700;letter-spacing:-.025em}
.n-hello p{margin:6px 0 0;color:var(--n-muted);font-size:13.5px}
.n-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--n-line2);border-radius:16px;overflow:hidden}
.n-kpis div{padding:14px 16px;display:grid;gap:6px}.n-kpis div+div{border-left:1px solid var(--n-line2)}
.n-kpis b{font-family:var(--n-display);font-size:26px;font-weight:700;letter-spacing:-.02em}
.n-cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
.n-cols section{display:grid;align-content:start;gap:4px}
.n-cols .n-row{padding:10px 4px;border-left:0}
.n-night{background:var(--k-bg2);border:1px solid #1b2425;border-radius:18px;padding:14px 16px}
.n-night .n-eb{color:var(--k-muted2)}
.n-night ol{list-style:none;margin:6px 0 0;padding:0;display:grid}
.n-night li{display:grid;grid-template-columns:68px 1fr;gap:8px;padding:9px 0;border-top:1px solid var(--k-on2);font-size:12.5px;line-height:1.4}
.n-night time{font-family:var(--n-mono);font-size:11px;color:var(--glow)}

/* Automations */
.n-autos{padding:18px 24px 20px;display:grid;gap:4px}
.n-suggest{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--n-accent-soft);flex-wrap:wrap;margin-bottom:12px}
.n-suggest>div{flex:1;min-width:200px;display:grid;gap:3px}.n-suggest b{font-size:14px}.n-suggest span{font-size:12.5px;color:var(--n-accent-ink);line-height:1.45}
.n-ok{width:40px;height:40px;border-radius:13px;background:var(--n-accent);color:var(--n-on-accent);display:grid;place-items:center;flex:none}
.n-autos-h{display:flex;align-items:baseline;gap:10px;margin:6px 0 2px}.n-autos-h h3{margin:0;font-family:var(--n-display);font-size:18px;letter-spacing:-.015em}.n-autos-h span{margin-left:auto;font-size:12px;color:var(--n-muted)}
.n-auto{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--n-line2);flex-wrap:wrap}
.n-auto>div:not(.n-mode){flex:1;min-width:200px;display:grid;gap:2px}.n-auto b{font-size:13.5px}.n-auto span{font-size:12.5px;color:var(--n-muted);line-height:1.4}.n-auto em{font-style:normal;font-size:12px;font-weight:600}
.n-aico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;transition:background .4s ease,color .4s ease}
.n-aico .sp{width:16px;height:16px}.n-aico.auto{background:var(--k-bg2);color:var(--glow);box-shadow:0 0 0 1px #1b2425}.n-aico.ask{background:var(--n-amber-soft);color:var(--n-amber)}
.n-mode{display:flex;gap:2px;padding:3px;border-radius:11px;background:var(--n-sunk);border:1px solid var(--n-line2)}
.n-mode span{height:28px;padding:0 10px;border-radius:8px;font-size:12px;color:var(--n-muted);display:flex;align-items:center;transition:background .35s ease,color .35s ease}
.n-mode span.on{background:var(--n-surface);color:var(--n-ink);font-weight:600}.n-mode span.on.auto{background:var(--n-accent);color:var(--n-on-accent)}
.n-auto.first{animation:none}

/* Reports */
.n-rep{padding:20px 24px 22px;display:grid;gap:16px}
.n-rep h3{margin:0;font-family:var(--n-display);font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.n-kstrip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--n-line2);border-radius:16px;overflow:hidden}
.n-kstrip div{padding:14px 16px;display:grid;gap:4px;align-content:start}.n-kstrip div+div{border-left:1px solid var(--n-line2)}
.n-kstrip b{font-family:var(--n-display);font-size:24px;font-weight:700;letter-spacing:-.02em}
.n-kstrip em{font-style:normal;font-size:11.5px;color:var(--n-muted)}.n-kstrip em.up{color:var(--n-ok);font-weight:600}
.n-chart{border:1px solid var(--n-line2);border-radius:16px;padding:14px 16px}
.n-chart-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.n-chart-h b{font-size:13.5px}
.n-chart-h span{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--n-muted)}
.n-chart-h i{width:10px;height:10px;border-radius:3px;display:inline-block}.k-w{background:var(--n-accent)}.k-t{background:var(--n-amber);margin-left:8px}
.n-bars{height:150px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:end;margin-top:12px;border-bottom:1px solid var(--n-line);padding:0 6px}
.n-bars div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;position:relative}
.n-bars i{display:block;width:100%;transform-origin:bottom}
.n-bars .t{height:calc(var(--t)*100%);background:var(--n-amber);border-radius:6px 6px 2px 2px}
.n-bars .w{height:calc(var(--w)*100%);background:var(--n-accent);border-radius:2px 2px 0 0}
.n-chart.grow .n-bars i{animation:n-grow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
@keyframes n-grow{from{transform:scaleY(0)}to{transform:none}}
.n-bars span{position:absolute;top:100%;left:0;right:0;text-align:center;font-size:10.5px;color:var(--n-muted);margin-top:6px}
.n-chart p{margin:26px 0 0;font-size:12.5px;color:var(--n-muted)}

/* ---------- The floating Wren card ---------- */
.wren-card{position:absolute;z-index:3;width:min(340px,42%);background:#0f2a28;color:#eaf3f1;border:1px solid rgba(95,214,200,.22);border-radius:20px;padding:16px;display:grid;gap:10px;
  box-shadow:0 2px 0 rgba(255,255,255,.04) inset,0 30px 60px -18px rgba(0,0,0,.85),0 0 0 6px rgba(8,10,11,.55);
  opacity:0;transform:translateY(14px) scale(.98);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none;font-size:13px;line-height:1.5}
.wren-card.in{opacity:1;transform:none}
.w-head{display:flex;align-items:center;gap:8px}.w-head b{font-family:var(--n-display);font-size:15px}
.w-mark{width:28px;height:28px;border-radius:9px;background:#1c4844;color:var(--glow);display:grid;place-items:center}.w-mark .sp{width:14px;height:14px}
.w-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--n-mono);letter-spacing:.08em;text-transform:uppercase;color:#9dbbb6}
.w-live i{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 3px rgba(95,214,200,.18)}
.w-q{margin:0;justify-self:end;max-width:85%;background:#1c4844;border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:12.5px}
.w-a{margin:0;min-height:3em}
.w-draft{background:#0b201f;border:1px solid #1c4844;border-radius:14px;padding:10px 12px;display:grid;gap:4px}
.w-draft p{margin:0;font-size:12.5px;color:#cfe3e0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.w-to{font:500 10.5px var(--n-mono);letter-spacing:.08em;text-transform:uppercase;color:#9dbbb6}
.w-act{display:flex;gap:8px;align-items:center}.wren-card .n-btn.go{box-shadow:0 0 0 3px rgba(95,214,200,.3),0 10px 24px -8px rgba(95,214,200,.6)}.w-act .n-btn.ghost{border-color:#2a5a55;color:#eaf3f1}
.w-sent{color:var(--glow)}
.wren-card .i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ns-cursor{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;color:#fff;opacity:0;pointer-events:none;transition:transform .9s cubic-bezier(.45,0,.2,1),opacity .3s ease;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.ns-cursor.on{opacity:1}

/* ---------- Home hero stage ---------- */
.hero-stage{margin-top:clamp(28px,4vw,48px)}
.ns-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.ns-tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:#111819;border:1px solid #1f2829;overflow-x:auto;scrollbar-width:none;max-width:100%}
.ns-tabs::-webkit-scrollbar{display:none}
.ns-tabs button{font:600 13.5px var(--font);height:36px;padding:0 16px;border-radius:10px;border:0;background:none;color:#a3aeac;cursor:pointer;white-space:nowrap}
.ns-tabs button[aria-selected="true"]{background:#1c4844;color:#fff;box-shadow:0 0 0 1px rgba(95,214,200,.25)}
.ns-tabs button:focus-visible,.ns-play:focus-visible,.ns-steps button:focus-visible,.ns-nav button:focus-visible,.ns-biz button:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.ns-cap{margin:0;color:#a3aeac;font-size:14px;flex:1;min-width:220px}
.ns-play{font:600 13px var(--font);height:36px;padding:0 14px;border-radius:10px;border:1px solid #2a3335;background:none;color:#ecf0ef;cursor:pointer}
#nest-hero .wren-card{left:-24px;right:auto;bottom:-48px}
#nest-hero .nest{min-height:560px}

/* ---------- Tour stage ---------- */
.ns-tour{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.ns-side{position:sticky;top:96px;display:grid;gap:18px}
.ns-biz{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ns-biz::-webkit-scrollbar{display:none}
.ns-biz button{flex:none;white-space:nowrap;font:600 12.5px var(--font);height:32px;padding:0 11px;border-radius:999px;border:1px solid #2a3335;background:none;color:#a3aeac;cursor:pointer}
.ns-biz button[aria-pressed="true"]{background:#1c4844;border-color:#1c4844;color:#fff}
.ns-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:s}
.ns-steps button{width:100%;display:grid;grid-template-columns:30px 1fr;gap:2px 12px;text-align:left;padding:12px 14px;border-radius:16px;border:1px solid transparent;background:none;color:#a3aeac;cursor:pointer;font:inherit}
.ns-n{grid-row:span 2;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font:600 12.5px var(--n-mono);background:#151d1e;color:#a3aeac;transition:background .3s ease,color .3s ease}
.ns-t{font-weight:600;font-size:15px;color:#cdd4d2;align-self:center}
.ns-p{grid-column:2;font-size:13.5px;line-height:1.5;color:#a3aeac;display:none}
.ns-steps button[aria-current]{background:#121a1b;border-color:#22302f}
.ns-steps button[aria-current] .ns-n{background:var(--glow);color:#062421}
.ns-steps button[aria-current] .ns-t{color:#fff}
.ns-steps button[aria-current] .ns-p{display:block}
.ns-steps button.done .ns-n{background:#1c4844;color:var(--glow)}
.ns-nav{display:flex;align-items:center;gap:10px}
.ns-nav button{font:600 13.5px var(--font);height:40px;padding:0 16px;border-radius:12px;cursor:pointer}
.ns-back{border:1px solid #2a3335;background:none;color:#ecf0ef}.ns-back:disabled{opacity:.4;cursor:default}
.ns-next{border:0;background:var(--glow);color:#062421}
.ns-count{margin-left:auto;font:500 12px var(--n-mono);color:#a3aeac}
.ns-progress{height:3px;border-radius:3px;background:#1c2426;overflow:hidden}.ns-progress i{display:block;height:100%;width:0;background:var(--glow);transition:width .5s ease}
.ns-frame{position:relative}
.ns-tour .wren-card{left:-14px;right:auto;bottom:-26px}
.ns-tour .nest{min-height:600px}

/* ---------- Container sizes: the hub reflows like the real one ---------- */
@container (max-width:1060px){.n-fy{grid-template-columns:minmax(210px,250px) minmax(0,1fr)}.n-lanes{display:none}.n-search{display:none}}
@container (max-width:760px){
  .n-kstrip{grid-template-columns:repeat(2,minmax(0,1fr))}.n-kstrip div:nth-child(3){border-left:0}.n-kstrip div:nth-child(n+3){border-top:1px solid var(--n-line2)}
  .n-cols{grid-template-columns:1fr}
}
@container (max-width:620px){
  .n-fy{grid-template-columns:1fr}.n-list{border-right:0;border-bottom:1px solid var(--n-line2)}
  .n-rail{display:none}
  .n-phone-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--n-line2);font-size:13.5px}
  .n-head{padding:12px 14px}.n-sum{display:none}
  .n-read{padding:14px 16px}.n-read h3{font-size:18px}
  .n-row{padding:10px 14px}.n-list .n-row:nth-child(n+3){display:none}.n-msg{display:none}.n-drafted{letter-spacing:.06em}
  .n-kpis{grid-template-columns:1fr}.n-kpis div+div{border-left:0;border-top:1px solid var(--n-line2)}
  .n-today,.n-autos,.n-rep{padding:16px}.n-mode span:first-child{display:none}
  .n-actions .quiet{display:none}
  .n-actions{display:grid;grid-template-columns:1fr 1fr}.n-actions .n-btn{justify-content:center;text-align:center}.n-actions .n-sent{grid-column:1/-1}
  .n-drafted .long{display:none}
  .n-autos .n-auto:last-child{display:none}
}

@media (max-width:999px){
  .ns-tour{grid-template-columns:1fr}
  .ns-biz{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:-4px;padding-inline:4px}.ns-biz::-webkit-scrollbar{display:none}
  .ns-side{position:static}
  .ns-steps{grid-auto-flow:column;grid-auto-columns:minmax(220px,78%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
  .ns-steps::-webkit-scrollbar{display:none}
  .ns-steps li{scroll-snap-align:start}
  .ns-steps button{height:100%}
  .ns-p{display:block}
  .ns-tour .nest,#nest-hero .nest{min-height:0}
}
@media (max-width:640px){
  .wren-card:not(.in){display:none}
  .wren-card{position:relative;width:auto;left:auto!important;right:auto!important;bottom:auto!important;margin:-18px 10px 0;opacity:1;transform:none}
  .ns-plate{border-radius:24px}
  .w-act{display:grid;grid-template-columns:1fr 1fr}.w-act .n-btn{justify-content:center}.w-act .w-sent{grid-column:1/-1}
  .ns-stage{padding-bottom:12px}
  .nest{border-radius:18px;padding:6px}
  .n-sheet{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .ns-tilt,.nest,.wren-card,.ns-cursor,.n-row,.n-bars i,.ns-progress i{transition:none!important;animation:none!important}
}

/* Who it's for: a still For you per field, on the same Nest kit */
.ns-mini .ns-plate{padding:clamp(8px,1.4vw,16px);border-radius:26px}
.ns-mini .nest{min-height:0}
.ns-mini .n-mod{min-height:50px}
.n-when{margin-left:auto;font:500 11px var(--n-mono);letter-spacing:.06em;color:var(--n-muted)}
.n-status{display:flex;align-items:center;gap:10px;margin:0;padding:10px 20px;border-bottom:1px solid var(--n-line2);font-size:12.5px;color:var(--n-accent-ink);background:var(--n-sunk)}
.n-status i{width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 3px rgba(95,214,200,.18);flex:none}
.n-list-mini{border-right:0;padding:4px 0}
.n-list-mini .n-row{padding:12px 18px;gap:6px}
.n-list-mini .n-row-top{gap:10px}
.n-list-mini .n-av{width:30px;height:30px;font-size:11px}
.n-list-mini .n-row-foot{padding-left:40px}
@container (max-width:620px){.n-list-mini .n-row:nth-child(n+3){display:grid}.n-when{display:none}}

/* ---------- Still previews on How it works ---------- */
.step-stage{margin:0;padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--line);display:grid;gap:16px}
.step-stage .nest{min-height:0}
.step-stage figcaption{color:#a3aeac;font-size:14.5px;line-height:1.55;max-width:46em}
@media (min-width:960px){.step-stage{padding-left:280px}}

/* Comfortable tap targets */
.ns-tabs button,.ns-play,.ns-biz button,.ns-nav button{min-height:44px}

/* Wide screens: a taller hero preview, and the hub itself drawn larger so it reads at a distance. */
@media (min-width:1440px){
  #nest-hero .nest{min-height:640px}
  .ns-tabs button{font-size:14.5px;height:40px;padding:0 18px}
  .ns-cap{font-size:15px}
  .ns-play{height:40px;font-size:14px}
}
@media (min-width:1800px){#nest-hero .ns-plate,.ns-tour .ns-plate,.step-stage .ns-plate{zoom:1.12}}
@media (min-width:2300px){#nest-hero .ns-plate,.ns-tour .ns-plate,.step-stage .ns-plate{zoom:1.25}}

/* ---------- "Your business": find your kind of company and the preview switches to it ---------- */
.ns-bar,.ns-biz{position:relative}
.ns-more-slot{display:flex}
.ns-more{display:inline-flex;align-items:center;gap:6px;font:600 13.5px var(--font);height:44px;padding:0 14px 0 12px;border-radius:14px;border:1px dashed #2f4a47;background:rgba(95,214,200,.04);color:#cfe9e5;cursor:pointer;white-space:nowrap;transition:border-color .2s,background-color .2s,color .2s}
.ns-more:hover{border-color:#5fd6c8;color:#fff;background:rgba(95,214,200,.08)}
.ns-more.on{border-style:solid;border-color:rgba(95,214,200,.45);background:#1c4844;color:#fff}
.ns-more:focus-visible{outline:2px solid #5fd6c8;outline-offset:2px}
.ns-more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ns-more .ns-chev{transition:transform .2s}.ns-more[aria-expanded="true"] .ns-chev{transform:rotate(180deg)}
.ns-more span{overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.ns-biz .ns-more.wide{grid-column:1/-1;justify-content:center;height:40px;border-radius:999px;font-size:12.5px}
.ns-pick{position:absolute;z-index:40;top:calc(100% + 10px);left:0;width:min(720px,100%);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;max-height:min(560px,72vh);
  background:#111819;border:1px solid #26393a;border-radius:20px;box-shadow:0 30px 80px -24px rgba(0,0,0,.75),0 0 0 1px rgba(95,214,200,.06);color:#ecf0ef;overflow:hidden;
  animation:nsPick .22s cubic-bezier(.2,.8,.2,1)}
.ns-pick[hidden]{display:none}
.ns-biz .ns-pick{width:min(560px,calc(100vw - 32px))}
@keyframes nsPick{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.ns-pick-h{padding:20px 22px 12px;display:grid;gap:4px}
.ns-pick-h b{font:700 17px/1.25 var(--display);letter-spacing:-.01em}
.ns-pick-h span{color:#a3aeac;font-size:13.5px;line-height:1.5}
.ns-pick-q{margin:0 16px;display:flex;align-items:center;gap:10px;height:48px;padding:0 14px;border-radius:14px;background:#0b1112;border:1px solid #2a3335}
.ns-pick-q:focus-within{border-color:#5fd6c8;box-shadow:0 0 0 3px rgba(95,214,200,.15)}
.ns-pick-q svg{width:18px;height:18px;fill:none;stroke:#7f8b89;stroke-width:2;stroke-linecap:round;flex:none}
.ns-pick-q input{flex:1;min-width:0;border:0;background:none;color:#ecf0ef;font-size:16px;outline:none;height:100%}
.ns-pick-q input::placeholder{color:#6f7b79}
.ns-pick-q input::-webkit-search-cancel-button{filter:invert(.7)}
.ns-pick-list{overflow:auto;padding:14px 16px 6px;display:grid;gap:14px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#2a3335 transparent}
.ns-pick-gl{display:block;font:500 10.5px var(--n-mono,var(--mono));letter-spacing:.09em;text-transform:uppercase;color:#5fd6c8;margin:0 0 8px 2px}
.ns-pick-opts{display:flex;flex-wrap:wrap;gap:6px}
.ns-pick-opts button{font:500 13.5px var(--font);min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #2a3335;background:#151d1e;color:#dfe7e5;cursor:pointer;text-align:left;transition:border-color .15s,background-color .15s}
.ns-pick-opts button:hover,.ns-pick-opts button:focus-visible{border-color:#5fd6c8;background:#1c4844;color:#fff;outline:none}
.ns-pick-wait,.ns-pick-none{margin:4px 2px 10px;color:#a3aeac;font-size:14px;line-height:1.55}
.ns-pick-none b{color:#ecf0ef;font-weight:600}.ns-pick-none a{color:#5fd6c8}
.ns-pick-f{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid #1f2829;background:#0e1415;font-size:13px;color:#a3aeac}
.ns-pick-acts{display:flex;gap:8px;flex-wrap:wrap}
.ns-pick-gen,.ns-pick-demo{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;font:600 13px var(--font);cursor:pointer;text-decoration:none;white-space:nowrap}
.ns-pick-gen{border:1px solid #2a3335;background:none;color:#ecf0ef}.ns-pick-gen:hover{border-color:#ecf0ef}
.ns-pick-demo{background:#5fd6c8;color:#06211f;border:0}.ns-pick-demo:hover{background:#8fe6dc}
.ns-pick .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){

  .ns-pick{position:fixed;left:12px;right:12px;width:auto;top:auto;bottom:max(12px,env(safe-area-inset-bottom));max-height:78vh;border-radius:22px}
  .ns-biz .ns-pick{width:auto}
  .ns-pick{box-shadow:0 0 0 100vmax rgba(4,8,8,.6),0 30px 80px -24px rgba(0,0,0,.75)}
  .ns-pick-f{flex-direction:column;align-items:stretch}.ns-pick-acts>*{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.ns-pick{animation:none}}
@media (min-width:1440px){.ns-more{height:44px;font-size:14.5px;padding:0 18px 0 14px}}
.ns-side{z-index:5}
@media (max-width:999px){.ns-biz .ns-pick{position:fixed;left:16px;right:16px;top:auto;bottom:max(16px,env(safe-area-inset-bottom));width:auto;max-width:640px;margin:0 auto;max-height:78vh;box-shadow:0 0 0 100vmax rgba(4,8,8,.6),0 30px 80px -24px rgba(0,0,0,.75)}}