/* ============================================================
   Nova custom video player  —  shared by / (index.html) and /video
   Tokens (--moss,--mono,--bone,--void,--fog,--serif,--ease) come
   from index.html :root and assets/vs.css :root. Dark context.
   ============================================================ */
.np{--np-accent:var(--moss,#7FE0FF);max-width:1080px;margin:0 auto}
.np-wrap{max-width:1080px;margin:0 auto}

/* ---------- stage ---------- */
.np-stage{position:relative;aspect-ratio:16/9;border-radius:clamp(16px,2.4vw,26px);overflow:hidden;
  background:#05080B;outline:none;
  box-shadow:0 44px 100px -38px rgba(0,0,0,.85),0 0 0 1px rgba(215,235,250,.12) inset}
.np-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#05080B;cursor:pointer}
.np-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .55s var(--ease);
  background:radial-gradient(130% 90% at 50% 128%,rgba(127,224,255,.16),transparent 58%)}
.np.is-started .np-stage::after{opacity:0}

/* corner brackets */
.np-corner{position:absolute;width:20px;height:20px;z-index:5;opacity:.5;pointer-events:none;transition:opacity .4s}
.np-corner.tl{top:14px;left:14px;border-top:1.5px solid var(--bone);border-left:1.5px solid var(--bone)}
.np-corner.tr{top:14px;right:14px;border-top:1.5px solid var(--bone);border-right:1.5px solid var(--bone)}
.np-corner.bl{bottom:14px;left:14px;border-bottom:1.5px solid var(--bone);border-left:1.5px solid var(--bone)}
.np-corner.br{bottom:14px;right:14px;border-bottom:1.5px solid var(--bone);border-right:1.5px solid var(--bone)}
.np.is-started .np-corner{opacity:0}

/* big center play */
.np-big{position:absolute;left:50%;top:50%;z-index:7;transform:translate(-50%,-50%);
  width:clamp(70px,9vw,104px);height:clamp(70px,9vw,104px);border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;color:#06131B;
  background:linear-gradient(160deg,#CFF3FF 0%,#7FE0FF 45%,#3FB9E8 100%);
  box-shadow:0 18px 52px -12px rgba(127,224,255,.62),0 1px 0 rgba(255,255,255,.6) inset;
  transition:transform .3s var(--ease),opacity .3s}
.np-big svg{width:36%;height:36%;margin-left:7%}
.np-big:hover{transform:translate(-50%,-50%) scale(1.06)}
.np-big::before{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(127,224,255,.45);animation:npping 2.6s var(--ease) infinite}
.np-big::after{content:"";position:absolute;inset:-30px;border-radius:50%;border:1px solid rgba(127,224,255,.18);animation:npping 2.6s var(--ease) .5s infinite}
@keyframes npping{0%{transform:scale(.78);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.np.is-started .np-big{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.5)}
@media(prefers-reduced-motion:reduce){.np-big::before,.np-big::after{animation:none}}

/* now-playing chapter label (full title) */
.np-now{position:absolute;left:clamp(16px,3vw,26px);bottom:58px;z-index:8;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--np-accent);
  text-shadow:0 1px 10px rgba(4,7,10,.9);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s;
  pointer-events:none;max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-now::before{content:"▸ "}

/* slim always-on progress line at the very bottom of the video */
.np-mini{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:6;background:rgba(233,241,246,.14);opacity:0;transition:opacity .4s}
.np.is-started .np-mini{opacity:1}
.np-mini i{display:block;height:100%;width:0;background:var(--np-accent);box-shadow:0 0 8px rgba(127,224,255,.8)}

/* control bar */
.np-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:12px;
  padding:36px clamp(14px,3vw,22px) clamp(12px,1.7vw,17px);
  background:linear-gradient(to top,rgba(4,7,10,.92),rgba(4,7,10,.5) 52%,transparent);
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.np.is-started .np-stage:hover .np-ctrl,
.np.is-started.is-paused .np-ctrl,
.np.is-started .np-stage:focus-within .np-ctrl{opacity:1;transform:none;pointer-events:auto}
.np.is-started .np-stage:hover .np-now,
.np.is-started.is-paused .np-now,
.np.is-started .np-stage:focus-within .np-now{opacity:1;transform:none}
@media(hover:none){.np.is-started .np-ctrl{opacity:1;transform:none;pointer-events:auto}.np.is-started .np-now{opacity:1;transform:none}}
.np.is-ended .np-ctrl,.np.is-ended .np-now,.np.is-ended .np-mini{opacity:0!important;pointer-events:none}

.np-btn{width:34px;height:34px;flex:none;border:0;background:transparent;color:var(--bone);cursor:pointer;
  display:grid;place-items:center;border-radius:9px;transition:background .2s,color .2s}
.np-btn:hover{background:rgba(255,255,255,.14)}
.np-btn svg{width:20px;height:20px}

/* thin scrub */
.np-track{position:relative;flex:1;height:22px;display:flex;align-items:center;cursor:pointer;touch-action:none;min-width:60px}
.np-rail{position:relative;width:100%;height:4px;border-radius:4px;background:rgba(233,241,246,.22)}
.np-buf{position:absolute;left:0;top:0;height:4px;border-radius:4px;background:rgba(233,241,246,.3);width:0}
.np-fill{position:absolute;left:0;top:0;height:4px;border-radius:4px;background:var(--np-accent);width:0;box-shadow:0 0 10px rgba(127,224,255,.7)}
.np-track:hover .np-rail,.np-track:focus-visible .np-rail{height:6px}
.np-knob{position:absolute;top:50%;left:0;width:13px;height:13px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 2px 7px rgba(0,0,0,.55);opacity:0;transition:opacity .2s}
.np-track:hover .np-knob,.np-track:focus-visible .np-knob{opacity:1}
.np-tick{position:absolute;top:50%;transform:translate(-50%,-50%);width:3px;height:11px;border-radius:2px;background:#05080B;box-shadow:0 0 0 1px rgba(233,241,246,.55);z-index:2;pointer-events:none}

.np-time{font-family:var(--mono);font-size:12px;color:rgba(233,241,246,.82);flex:none;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}

/* volume — selectors carry extra specificity to beat the page's global
   input[type=range] rule (0,1,1) that otherwise stretches this to 100%. */
.np-vol{display:flex;align-items:center;gap:7px;flex:none}
.np-vol input.np-volsl{-webkit-appearance:none;appearance:none;width:66px;min-width:0;flex:none;height:4px;border-radius:4px;background:rgba(233,241,246,.28);cursor:pointer;padding:0;margin:0;outline:none}
.np-vol input.np-volsl::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.np-vol input.np-volsl::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}

/* speed */
.np-spd{position:relative;flex:none}
.np-spd-btn{min-width:42px;height:34px;padding:0 8px;border:1px solid rgba(215,235,250,.16);background:rgba(255,255,255,.04);
  color:var(--bone);font-family:var(--mono);font-size:12px;font-weight:600;border-radius:9px;cursor:pointer;transition:.2s}
.np-spd-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(127,224,255,.5)}
.np-spd-menu{position:absolute;bottom:calc(100% + 8px);right:0;display:none;flex-direction:column;gap:2px;z-index:12;
  min-width:78px;padding:5px;background:rgba(8,12,16,.97);border:1px solid rgba(215,235,250,.16);border-radius:11px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 44px -18px rgba(0,0,0,.8)}
.np-spd.open .np-spd-menu{display:flex}
.np-spd-menu button{font-family:var(--mono);font-size:12px;color:var(--fog);background:transparent;border:0;border-radius:7px;padding:8px 11px;cursor:pointer;text-align:left;transition:.15s}
.np-spd-menu button:hover{background:rgba(255,255,255,.1);color:var(--bone)}
.np-spd-menu button.on{color:var(--np-accent);font-weight:700}

@media(max-width:560px){.np-ctrl{gap:8px}.np-btn{width:30px;height:30px}.np-vol input.np-volsl{width:44px}.np-time{font-size:11px}}
@media(max-width:430px){.np-vol input.np-volsl{display:none}}

/* ---------- end card (auto-shown when the video finishes) ---------- */
.np-end{position:absolute;inset:0;z-index:11;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:20px;text-align:center;padding:24px;
  background:radial-gradient(120% 120% at 50% 42%,rgba(8,12,16,.85),rgba(4,7,10,.95));
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.np.is-ended .np-end{display:flex;animation:npfade .5s var(--ease)}
@keyframes npfade{from{opacity:0}to{opacity:1}}
.np-end h4{font-size:clamp(22px,3.2vw,36px);font-weight:850;font-stretch:118%;letter-spacing:-.02em;color:var(--bone);margin:0}
.np-end h4 .iti{font-family:var(--serif);font-style:italic;font-weight:400}
.np-end p{margin:0;color:var(--fog);font-size:clamp(14px,1.6vw,16px);max-width:42ch}
.np-end-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.np-replay{background:transparent;border:0;color:var(--fog);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .2s;padding:6px}
.np-replay:hover{color:var(--bone)}

/* ============================================================
   Labeled chapter timeline (big, bold, click to jump)
   Segments are proportional to each chapter's length, so they
   also read as a map of where you are in the video.
   ============================================================ */
.np-timeline{display:flex;gap:5px;margin-top:16px;width:100%}
.np-seg{position:relative;flex-grow:1;flex-shrink:1;flex-basis:0;min-width:96px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(215,235,250,.13);background:rgba(255,255,255,.035);border-radius:13px;
  padding:11px 14px;color:var(--fog);text-align:left;isolation:isolate;transition:border-color .18s,background .18s,color .18s,transform .18s}
.np-seg:hover{background:rgba(127,224,255,.08);border-color:rgba(127,224,255,.55);color:var(--bone);transform:translateY(-2px)}
.np-seg-fill{position:absolute;inset:0;z-index:-1;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(160deg,rgba(127,224,255,.24),rgba(127,224,255,.07));transition:transform .25s linear}
/* chapter marker pin + its timestamp (the spot in the video) */
.np-seg-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.np-seg-mark{line-height:0;flex:none}
.np-seg-mark svg{width:13px;height:13px;display:block;color:var(--np-accent);opacity:.55;transition:opacity .2s,transform .2s,filter .2s}
.np-seg-t{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--np-accent);opacity:.82;font-variant-numeric:tabular-nums}
.np-seg:hover .np-seg-mark svg{opacity:.9}
.np-seg.on .np-seg-mark svg{opacity:1;transform:translateY(-.5px);filter:drop-shadow(0 0 7px rgba(127,224,255,.75))}
.np-seg.on .np-seg-t{opacity:1}
.np-seg-l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:normal;overflow-wrap:normal;hyphens:none;font-size:14px;font-weight:800;letter-spacing:-.012em;line-height:1.18;color:inherit}
.np-seg.on{border-color:var(--np-accent);color:var(--bone);box-shadow:0 0 0 1px rgba(127,224,255,.4),0 14px 32px -16px rgba(127,224,255,.6)}
.np-seg.on .np-seg-l{color:var(--bone)}
@media(max-width:720px){
  .np-timeline{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(to right,transparent,#000 14px,#000 calc(100% - 14px),transparent)}
  .np-timeline::-webkit-scrollbar{height:0}
  .np-seg{flex:0 0 auto;min-width:150px;scroll-snap-align:start}
  .np-seg-l{font-size:15.5px}
}

/* ---------- "kill list" chapters: a tool logo with a red X over it ---------- */
.np-killcap{display:flex;align-items:center;gap:14px;margin:22px 0 4px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fog)}
.np-killcap::before,.np-killcap::after{content:"";flex:1;height:1px;background:rgba(215,235,250,.14)}
.np-killcap b{color:var(--np-accent);font-weight:700;letter-spacing:.2em}
/* the small "Kill 0N" / stage index in each chapter head */
.np-seg-idx{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fog2,#7D8C96);white-space:nowrap}
.np-seg.kill .np-seg-idx{color:#FF6B6B}
.np-seg-head .np-seg-t{margin-left:auto}
/* kill mark: the tool logo, red X struck over it */
.np-seg-mark.kl{position:relative;width:22px;height:22px;flex:none}
.np-seg-mark.kl img{width:22px;height:22px;object-fit:contain;display:block;border-radius:5px;
  opacity:.9;transition:opacity .2s}
.np-seg-mark.kl::after{content:"";position:absolute;inset:-3px;pointer-events:none;
  background:url(kill-crossout.png) center/contain no-repeat;opacity:.96;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.np-seg:hover .np-seg-mark.kl img,.np-seg.on .np-seg-mark.kl img{opacity:1}
/* non-kill marks (intro / next steps): a clean logo or icon, no X */
.np-seg-mark.logo{width:20px;height:20px;flex:none}
.np-seg-mark.logo img{width:20px;height:20px;object-fit:contain;display:block;opacity:.85}
.np-seg:hover .np-seg-mark.logo img,.np-seg.on .np-seg-mark.logo img{opacity:1}

/* =========================================================
   Conversion band under the video: scheduler + start-now
   ========================================================= */
.np-cta{max-width:940px;margin:clamp(52px,7vw,88px) auto 0;text-align:center}
.np-cta-head{display:grid;gap:16px;justify-items:center;margin-bottom:clamp(26px,3.4vw,40px)}
.np-cta-h{font-size:clamp(26px,3.6vw,44px);font-weight:850;font-stretch:118%;letter-spacing:-.025em;line-height:1.02;color:var(--bone)}
.np-cta-h .iti{font-family:var(--serif);font-style:italic;font-weight:400}
.np-cta-p{font-size:clamp(15px,1.7vw,17.5px);line-height:1.6;color:var(--fog);max-width:52ch}
.np-book{max-width:900px;margin:0 auto;border-radius:18px;overflow:hidden;background:#FAFCFD;
  border:1px solid rgba(9,24,33,.14);box-shadow:0 44px 100px -40px rgba(0,0,0,.6)}
.np-book iframe{width:100%;min-height:1020px;border:0;display:block;background:transparent}
@media(max-width:560px){.np-book{border-radius:13px}.np-book iframe{min-height:1300px}}
/* highlight pulse when the scheduler is auto-surfaced at video end */
.np-book.np-flash{animation:npflash 1.7s var(--ease) 1}
@keyframes npflash{0%,100%{box-shadow:0 44px 100px -40px rgba(0,0,0,.6)}30%{box-shadow:0 0 0 3px rgba(127,224,255,.6),0 44px 100px -40px rgba(0,0,0,.6)}}

.np-or{display:flex;align-items:center;gap:16px;max-width:420px;margin:clamp(28px,4vw,40px) auto clamp(22px,3vw,30px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--fog2,#7D8C96)}
.np-or::before,.np-or::after{content:"";flex:1;height:1px;background:rgba(215,235,250,.16)}

.np-startnow{display:grid;gap:12px;justify-items:center}
.np-startnow-k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--np-accent);font-weight:700}
.np-startnow .btn{padding:18px 30px;font-size:14.5px;max-width:100%}
.np-startnow-fine{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fog2,#7D8C96)}

/* signup is the MAIN CTA now — big primary button, scheduler demoted below */
.np-cta-main,.np-startnow .np-cta-main{width:min(600px,100%);padding:21px 30px;font-size:15.5px;
  white-space:normal;line-height:1.25;text-align:center}
.np-book-sm iframe{min-height:600px;height:600px}
.np-sched-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--fog);font-weight:600;margin:0 0 16px;text-align:center}
.np-sched-lt .np-sched-sub{color:var(--mutL,#5C6870)}

/* signup CTA — a deeper azure from the site's own diamond-cyan family
   (matches the page; reads clearly as "blue" without the off-brand royal blue) */
.btn-blue{background:linear-gradient(160deg,#5AC4F0 0%,#2E9FDE 48%,#1C7EC4 100%);color:#fff;font-weight:800;
  box-shadow:0 1px 0 rgba(255,255,255,.32) inset,0 16px 44px -12px rgba(46,159,222,.58)}
.btn-blue:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 24px 60px -14px rgba(46,159,222,.72)}

/* ---- highlighted scheduler on a LIGHT sheet (the pricing section) ---- */
.np-sched-lt{max-width:900px;margin:clamp(44px,6vw,76px) auto 0;text-align:center;scroll-margin-top:104px}
.np-sched-lt .np-sched-head{display:grid;gap:14px;justify-items:center;margin-bottom:clamp(24px,3.2vw,36px)}
.np-sched-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--moss-d);font-weight:700}
.np-sched-h{font-size:clamp(26px,3.6vw,42px);font-weight:850;font-stretch:118%;letter-spacing:-.025em;line-height:1.02;color:var(--inkL)}
.np-sched-h .iti{font-family:var(--serif);font-style:italic;font-weight:400}
.np-sched-p{font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--ink2L,#3E4A52);max-width:52ch}
.np-sched-lt .np-book{box-shadow:0 34px 80px -40px rgba(4,9,14,.4)}
.np-sched-lt .np-or{color:var(--mutL,#5C6870)}
.np-sched-lt .np-or::before,.np-sched-lt .np-or::after{background:rgba(9,24,33,.16)}
.np-sched-lt .np-startnow-k{color:var(--moss-d)}
.np-sched-lt .np-startnow-fine{color:var(--mutL,#5C6870)}