/* NEMO Plan hero animation — generated from HTML Templates/plan-hero-devices.html
   (the mockup Rakesh approved 2026-10-30). Edit the mockup, then regenerate. Scoped under .nph. */
.nph{width:100%}
.nph .caption span{font-family:"DM Sans",system-ui,sans-serif}
.nph .steps span{font-size:11px;padding:4px 9px}
@media (max-width:980px){.nph .caption span{font-size:13px}}
/* the hero column held a framed screenshot; the animation needs neither the frame nor the clipping */
.hero-visual:has(> .nph){overflow:visible;box-shadow:none;border-radius:0}
@media (min-width:901px){.hero-inner:has(.nph){max-width:1280px;grid-template-columns:.8fr 1.2fr;gap:44px}}
.nph .steps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:22px}
.nph .steps span{font-size:12px;font-weight:600;color:#94a3b8;border:1px solid rgba(255,255,255,.12);padding:5px 11px;border-radius:999px;transition:all .3s}
.nph .steps span.on{color:#042f2e;background:#2dd4bf;border-color:#2dd4bf}
/* device frames — same as the Takeoff hero (src/components/HeroDevices.css) */
.nph .devices{position:relative;width:100%;aspect-ratio:1.42}
.nph .monitor{position:absolute;left:12%;top:0;width:82%}
.nph .m-edge{background:linear-gradient(160deg,#e3e6ea 0%,#a4aab2 45%,#cfd3d9 100%);padding:.42%;border-radius:1.6%/2.6%;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4)}
.nph .m-glass{position:relative;background:#050608;padding:1.25%;border-radius:1.3%/2.1%;overflow:hidden}
.nph .m-neck{width:15%;aspect-ratio:1.7;margin:0 auto;background:linear-gradient(90deg,#80868f 0%,#dfe2e6 40%,#b9bec5 60%,#7a8089 100%);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.nph .m-foot{width:32%;height:11px;margin:0 auto;border-radius:3px 3px 12px 12px;background:linear-gradient(#e3e6ea,#8d939b)}
.nph .tablet{position:absolute;left:0;bottom:3%;width:39%;background:#050506;padding:.55%;border-radius:4.6%/6.6%;box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 30px 70px rgba(0,0,0,.6),0 0 70px rgba(20,184,166,.12)}
.nph .t-glass{position:relative;background:#000;padding:2.2%;border-radius:4%/5.8%;overflow:hidden}
.nph .phone{position:absolute;right:0;bottom:0;width:18.5%;background:#050506;padding:1%;border-radius:16%/7.6%;box-shadow:0 0 0 1.5px rgba(255,255,255,.24),0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(20,184,166,.14)}
.nph .p-glass{position:relative;background:#000;padding:2.4%;border-radius:15%/7.1%;overflow:hidden}
.nph .vp{position:relative;overflow:hidden;border-radius:3px}
/* focus: the device where the step happens comes forward, the others dim */
.nph .monitor,.nph .tablet,.nph .phone{transition:transform .55s cubic-bezier(.4,0,.2,1),opacity .55s,filter .55s}
.nph .devices.focus .monitor,.nph .devices.focus .tablet,.nph .devices.focus .phone{filter:brightness(.42) saturate(.5)}
.nph .devices.f-mon .monitor,.nph .devices.f-tab .tablet,.nph .devices.f-ph .phone{filter:none;z-index:5}
.nph .devices.f-mon .monitor{transform:scale(1.03);transform-origin:50% 20%}
.nph .devices.f-tab .tablet{transform:scale(1.16);transform-origin:0 100%}
.nph .devices.f-ph .phone{transform:scale(1.2);transform-origin:100% 100%}
.nph .caption{display:flex;justify-content:center;min-height:40px;margin-bottom:18px}
.nph .caption span{font-size:16px;font-weight:600;color:#ccfbf1;background:rgba(20,184,166,.14);border:1px solid rgba(20,184,166,.45);padding:8px 18px;border-radius:999px;transition:opacity .3s,transform .3s}
.nph .caption span.out{opacity:0;transform:translateY(6px)}
.nph .pulse{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;overflow:visible}
/* tablet: Project Analytics (EVM) */
.nph #nph-health{position:absolute;inset:12px;background:#4f5e73;border-radius:14px;z-index:9;padding:18px;color:#fff;opacity:0;transform:translateY(16px);transition:all .45s}
.nph #nph-health.open{opacity:1;transform:none}
.nph #nph-health .tabs{display:flex;gap:6px;margin-top:10px;font-size:12px;font-weight:600}.nph #nph-health .tabs span{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.08);color:#cbd5e1}.nph #nph-health .tabs .on{background:#14b8a6;color:#042f2e}
.nph #nph-health .gs{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:12px;margin-top:14px}
.nph #nph-health .gc{background:rgba(15,23,42,.35);border-radius:12px;padding:12px;text-align:center;font-size:12px;color:#cbd5e1}
.nph #nph-health .gc b{display:block;font-size:13px;margin-top:4px}
.nph #nph-health .ev{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:12px}.nph #nph-health .ev div{background:rgba(15,23,42,.35);border-radius:10px;padding:10px;font-size:11px;color:#cbd5e1}.nph #nph-health .ev b{display:block;font-size:15px;color:#fff;margin-top:2px}
.nph .screen{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;font-family:Poppins,system-ui,sans-serif;color:#0f172a}
.nph .mon .screen{width:1280px;height:800px;background:#f8fafc}
.nph .tab .screen{width:720px;height:520px;background:#0f172a}
.nph .ph .screen{width:300px;height:630px;background:#f8fafc}

/* ---------- shared bits ---------- */
.nph .fade{transition:opacity .45s ease}.nph .hide{opacity:0;pointer-events:none}
.nph .cursor{position:absolute;left:640px;top:420px;width:22px;height:22px;z-index:40;transition:left .6s cubic-bezier(.5,0,.2,1),top .6s cubic-bezier(.5,0,.2,1);pointer-events:none}
.nph .cursor.click:after{content:"";position:absolute;left:-10px;top:-10px;width:26px;height:26px;border-radius:50%;border:2px solid #14b8a6;animation:nph-ping .45s ease-out}
.nph .tap{position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(20,184,166,.35);border:2px solid #14b8a6;z-index:40;opacity:0;transition:left .5s,top .5s,opacity .2s;pointer-events:none}
@keyframes nph-ping{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.nph .av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;border:2px solid #fff}

/* ---------- monitor: projects page ---------- */
.nph #nph-projects{position:absolute;inset:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0f1f35 100%);font-family:"DM Sans",sans-serif;color:#fff;padding:34px 48px}
.nph #nph-projects .crumb{display:flex;gap:10px;align-items:center;font-size:14px;color:#94a3b8}
.nph #nph-projects .n{width:30px;height:30px;border-radius:8px;background:#14b8a6;color:#042f2e;display:grid;place-items:center;font-weight:800}
.nph #nph-projects h2{font-size:34px;margin-top:22px}.nph #nph-projects .s{color:#94a3b8;font-size:15px;margin-top:4px}
.nph #nph-projects .np{position:absolute;right:48px;top:86px;background:#0d9488;border:1px solid #14b8a6;padding:10px 18px;border-radius:10px;font-weight:700;font-size:14px}
.nph #nph-projects .pills{display:flex;gap:10px;margin-top:22px}
.nph #nph-projects .pills span{font-size:13px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.nph #nph-projects .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.nph #nph-projects .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;transition:border-color .3s,background .3s}
.nph #nph-projects .card.hl{border-color:#14b8a6;background:rgba(20,184,166,.1)}
.nph #nph-projects .card h3{font-size:19px}.nph #nph-projects .card p{font-size:13px;color:#94a3b8;margin-top:4px}
.nph #nph-projects .gauges{display:flex;gap:14px;margin-top:16px}
.nph #nph-projects .g{flex:1;border-radius:10px;background:rgba(255,255,255,.04);padding:10px;font-size:12px;color:#94a3b8}
.nph #nph-projects .g b{display:block;font-size:20px;color:#fff}

/* ---------- monitor: schedule ---------- */
.nph #nph-sched{position:absolute;inset:0}
.nph .hdr{height:58px;background:#fff;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;gap:12px;padding:0 20px}
.nph .logo{width:28px;height:28px;border-radius:7px;background:#14b8a6;color:#042f2e;display:grid;place-items:center;font-weight:800;font-size:14px}
.nph .hdr .t{font-weight:700;font-size:15px}.nph .hdr .t span{color:#64748b}.nph .hdr .bc{font-size:11px;color:#64748b}
.nph .busy{margin-left:18px;font-size:12px;font-weight:600;color:#1d4ed8;background:#dbeafe;padding:5px 12px;border-radius:999px}
.nph .busy i{display:inline-block;animation:nph-spin 1s linear infinite;font-style:normal}@keyframes nph-spin{to{transform:rotate(360deg)}}
.nph .tb{height:50px;display:flex;align-items:center;gap:8px;padding:0 20px;background:#fff;border-bottom:1px solid #e2e8f0;font-size:12px}
.nph .btn{color:#fff;font-weight:600;padding:6px 12px;border-radius:8px}
.nph .met{margin-left:14px;display:flex;gap:14px;font-weight:600}.nph .met span{color:#64748b;font-weight:500}
.nph .avatar{margin-left:auto;width:32px;height:32px;border-radius:50%;background:#14b8a6;color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.nph .panes{position:absolute;top:118px;left:12px;right:12px;bottom:12px;display:grid;grid-template-columns:660px 1fr;gap:10px}
.nph .pane{background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;position:relative}
.nph .ph-h{height:40px;white-space:nowrap;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid #e2e8f0;font-size:11px;font-weight:700;letter-spacing:.5px;color:#334155}
.nph .ico{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:13px;border:1px solid}
.nph .srch{flex:1;height:28px;border:1px solid #e2e8f0;border-radius:7px;font-size:11px;color:#94a3b8;display:flex;align-items:center;padding:0 10px;font-weight:400;letter-spacing:0}
.nph .seg{display:flex;border:1px solid #e2e8f0;border-radius:7px;overflow:hidden;font-weight:600;letter-spacing:0}.nph .seg span{padding:5px 9px;color:#64748b}.nph .seg .on{background:#14213c;color:#fff}
.nph .tog{padding:5px 9px;border-radius:7px;border:1px solid #e2e8f0;color:#64748b;font-weight:600;letter-spacing:0}
.nph table{border-collapse:collapse;width:100%;font-size:12px;table-layout:fixed}
.nph th{height:32px;background:linear-gradient(#f1f5f9,#e2e8f0);border-bottom:2px solid #cbd5e1;font-size:10px;font-weight:700;color:#64748b;text-transform:uppercase;text-align:left;padding:0 8px;white-space:nowrap}
.nph td{height:44px;padding:0 8px;border-bottom:1px solid #f1f5f9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nph tr:nth-child(even) td{background:rgba(241,245,249,.4)}
.nph tr.row{opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s}.nph tr.row.in{opacity:1;transform:none}
.nph .wbs{font-family:ui-monospace,Consolas,monospace;font-weight:600;color:#334155}
.nph .aid{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#6366f1}
.nph .sum .nm{font-weight:700;color:#0f172a}.nph .nm{font-weight:500;color:#334155}
.nph .tg{color:#14b8a6;margin-right:4px}
.nph .dt{color:#475569}.nph .sum .dt{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:2px 6px;color:#94a3b8}
.nph .una{color:#94a3b8;font-style:italic;font-size:11px}
.nph .pct{display:flex;align-items:center;gap:6px;font-weight:600;color:#334155}
.nph .ph-c{color:#0f766e;font-weight:700}
.nph #nph-gantt{position:absolute;top:40px;left:0;right:0;bottom:0}
.nph .assignpop{position:absolute;z-index:30;width:230px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 18px 40px rgba(15,23,42,.18);padding:10px;font-size:13px}
.nph .assignpop .h{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;padding:2px 6px 8px}
.nph .assignpop .m{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;transition:background .2s}
.nph .assignpop .m.sel{background:#f0fdfa}.nph .assignpop .m .ck{margin-left:auto;color:#14b8a6;font-weight:800;opacity:0}.nph .assignpop .m.sel .ck{opacity:1}
/* XER dialog */
.nph .scrim{position:absolute;inset:0;background:rgba(15,23,42,.55);display:grid;place-items:center;z-index:20}
.nph .dlg{width:480px;background:#0f1a2b;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:22px;color:#e2e8f0;font-size:13px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.nph .dlg .hd{display:flex;gap:12px;align-items:center}.nph .dlg .it{width:40px;height:40px;border-radius:10px;background:#ea580c;display:grid;place-items:center;font-size:18px}
.nph .dlg h4{font-size:16px;color:#fff}.nph .dlg .st{font-size:12px;color:#94a3b8}
.nph .dlg .lab{margin:16px 0 8px;font-size:10px;font-weight:700;letter-spacing:1px;color:#64748b}
.nph .dlg .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nph .dlg .k{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}.nph .dlg .k b{display:block;font-size:20px}
.nph .dlg .rows{margin-top:10px;background:rgba(20,184,166,.12);border:1px solid rgba(20,184,166,.35);color:#5eead4;border-radius:10px;padding:9px 12px;display:flex;justify-content:space-between;font-weight:600}
.nph .dlg .ex{margin-top:12px;font-size:12px;color:#94a3b8;line-height:1.5}
.nph .dlg .bt{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.nph .dlg .bt span{padding:9px 14px;border-radius:9px;font-weight:600;font-size:12px}
.nph .file{position:absolute;z-index:25;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 20px 50px rgba(15,23,42,.25);width:360px;padding:14px;font-size:12px}
.nph .file .r{display:flex;gap:10px;align-items:center;padding:8px;border-radius:8px}.nph .file .r.sel{background:#e0f2fe}
.nph .toast{position:absolute;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#0f172a;color:#fff;font-size:13px;padding:12px 18px;border-radius:12px;opacity:0;transition:all .35s;z-index:35;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.nph .toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- phone ---------- */
.nph .p-top{height:64px;background:#0f172a;color:#fff;display:flex;align-items:center;gap:10px;padding:18px 14px 0;font-size:14px}
.nph .p-top small{display:block;font-size:11px;color:#94a3b8}.nph .p-top .pa{margin-left:auto;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#0f766e);display:grid;place-items:center;font-size:11px;font-weight:700}
.nph .p-body{position:absolute;top:64px;left:0;right:0;bottom:62px;padding:14px;overflow:hidden}
.nph .p-tabs{position:absolute;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid #e2e8f0;display:grid;grid-template-columns:repeat(5,1fr);font-size:10px;font-weight:600;color:#64748b;text-align:center;padding-top:10px}
.nph .p-tabs .on{color:#0f766e;border-top:2px solid #0f766e;margin-top:-11px;padding-top:9px}
.nph .p-tabs i{display:inline-block;font-style:normal;background:#0f766e;color:#fff;border-radius:999px;font-size:9px;padding:0 5px;margin-left:2px}
.nph .p-empty{margin-top:90px;text-align:center;color:#94a3b8;font-size:14px}
.nph .tcard{background:#fff;border-radius:12px;border:1px solid #e2e8f0;padding:14px;box-shadow:0 1px 3px rgba(15,23,42,.06)}
.nph .tcard .w{font-size:11px;color:#64748b;font-family:ui-monospace,Consolas,monospace}.nph .tcard .n{font-size:15px;font-weight:700;margin-top:2px}
.nph .pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;color:#fff}
.nph .pbar{height:6px;border-radius:3px;background:#e5e7eb;margin-top:10px;overflow:hidden}.nph .pbar i{display:block;height:100%;background:#14b8a6;width:0;transition:width .8s}
.nph .drawer{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -10px 30px rgba(15,23,42,.25);padding:18px 16px 16px;transform:translateY(105%);transition:transform .45s cubic-bezier(.5,0,.2,1);z-index:10}
.nph .drawer.open{transform:none}
.nph .lbl{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.nph .rng{position:relative;height:6px;border-radius:3px;background:#e5e7eb;margin:12px 0 6px}.nph .rng i{position:absolute;left:0;top:0;bottom:0;background:#0f766e;border-radius:3px;width:0;transition:width .9s}
.nph .rng b{position:absolute;top:-6px;width:18px;height:18px;border-radius:50%;background:#0f766e;margin-left:-9px;left:0;transition:left .9s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.nph .inp{border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font-size:13px;color:#94a3b8;margin-top:4px}.nph .inp.f{color:#0f172a;border-color:#14b8a6}
.nph .pbtn{flex:1;text-align:center;padding:11px;border-radius:10px;font-weight:700;font-size:13px}
.nph #nph-gallery{position:absolute;inset:0;background:#fff;z-index:12;transform:translateX(100%);transition:transform .4s}
.nph #nph-gallery.open{transform:none}
.nph .flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:30;pointer-events:none}
.nph .flash.go{animation:nph-fl .5s}@keyframes nph-fl{0%{opacity:0}20%{opacity:1}100%{opacity:0}}

/* ---------- tablet: workflow board + daily report ---------- */
.nph .kb{position:absolute;inset:0;padding:18px;font-family:Poppins,sans-serif}
.nph .kb .top{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px}
.nph .kb .rep{margin-left:auto;background:#0d9488;color:#fff;font-size:13px;padding:8px 14px;border-radius:9px}
.nph .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.nph .col{background:#162032;border-radius:12px;padding:10px;min-height:400px}
.nph .col h5{font-size:12px;color:#cbd5e1;display:flex;align-items:center;gap:6px;margin-bottom:10px}.nph .col h5 i{width:8px;height:8px;border-radius:50%;display:inline-block}
.nph .kc{background:#1e293b;border-radius:10px;padding:10px;margin-bottom:8px;color:#e2e8f0;font-size:12px}.nph .kc small{display:block;color:#94a3b8;font-size:10px;font-family:ui-monospace,Consolas,monospace}
.nph .menu{position:absolute;right:18px;top:58px;width:200px;background:#0f1a2b;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;color:#e2e8f0;font-size:13px;z-index:5}
.nph .menu div{padding:9px 10px;border-radius:8px}.nph .menu .hl{background:rgba(20,184,166,.18);color:#5eead4}
.nph .rmodal{position:absolute;inset:12px;background:#fff;border-radius:14px;z-index:8;padding:18px;color:#0f172a;transform:translateY(20px);opacity:0;transition:all .4s}
.nph .rmodal.open{transform:none;opacity:1}
.nph .rmodal .bts span{font-size:12px;font-weight:700;padding:8px 12px;border-radius:9px;border:1px solid #e2e8f0}
.nph .pdf{margin-top:14px;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;font-size:11px}
.nph .pdf .band{background:#0f172a;color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center}
.nph .pdf .band b{font-size:16px}.nph .pdf .band span{font-size:10px;font-weight:800;letter-spacing:1px;background:#14b8a6;color:#042f2e;padding:4px 8px;border-radius:6px}
.nph .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 14px}
.nph .kpi{border-radius:9px;padding:10px;border:1px solid #e2e8f0}.nph .kpi b{display:block;font-size:22px}
.nph .sec{padding:0 14px 12px}.nph .sec h6{font-size:12px;margin:6px 0}
.nph .sec table td,.nph .sec table th{height:26px;font-size:10px}