/* Landing page video player (static/nexusah/js/nx-video.js). Live path: static/nexusah/css/nx-video.css.
   Everything is scoped to .nx-vp* so the designer's Webflow styles stay untouched. */

/* The designer's box (.video-wrapper / .ui-mockup_wrapper) becomes a frame matching the videos' shape.
   All three "Inside the Tool" panes get that shape, so switching tabs does not move the page. */
.ui-tabs_content .ui-mockup_wrapper { aspect-ratio: 3840 / 1950; }
.video-wrapper.nx-vp-host,
.ui-mockup_wrapper.nx-vp-host {
  aspect-ratio: var(--nx-ar, 3840 / 1950);   /* per video: style="--nx-ar: …" on the box */
  padding: 0;
  overflow: hidden;
  background-color: #05060a;
  isolation: isolate;
}

/* Hosts outside the landing page (Help & FAQs): a plain frame of the video's shape. */
.nx-vp-frame.nx-vp-host {
  position: relative;
  width: 100%;
  aspect-ratio: var(--nx-ar, 3840 / 1950);
  overflow: hidden;
  border: 1px solid rgba(240, 180, 41, .18);
  border-radius: .75rem;
  background-color: #05060a;
  isolation: isolate;
}

.nx-vp {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #05060a;
  color: #fff;
  font-family: Inter, sans-serif;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.nx-vp:focus { outline: none; }
.nx-vp:focus-visible { outline: 2px solid #f0b429; outline-offset: -2px; }

.nx-vp_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #05060a;
}
/* data-crop: the file has black bars baked in; the box has the picture's shape and the bars are
   cropped away (full screen shows the whole frame). */
.nx-vp.is-crop .nx-vp_video { object-fit: cover; }
.nx-vp.is-crop:fullscreen .nx-vp_video { object-fit: contain; }
.nx-vp.is-crop:-webkit-full-screen .nx-vp_video { object-fit: contain; }

.nx-vp_poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

/* Until nx-video.js has taken over (is-ready) the native player is shown as is, so a script that
   fails to load never leaves a play button that does nothing. */
.nx-vp:not(.is-ready) .nx-vp_poster,
.nx-vp:not(.is-ready) .nx-vp_start { display: none; }

/* Big play button (the designer's gold .video-play circle) with the title and length. */
.nx-vp_start {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: radial-gradient(ellipse at center, rgba(5, 6, 10, .08) 0%, rgba(5, 6, 10, .5) 100%);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity .25s ease, visibility 0s linear 0s, background-color .25s ease;
}
.nx-vp_start .video-play {
  box-shadow: 0 0 0 0 rgba(240, 180, 41, .4), 0 12px 32px rgba(0, 0, 0, .45);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.nx-vp_start::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5rem;
  height: 5rem;
  margin: -2.5rem 0 0 -2.5rem;
  border-radius: 999px;
  border: 2px solid rgba(240, 180, 41, .55);
  animation: nx-vp-ring 2.4s ease-out 3;
  pointer-events: none;
}
.nx-vp_start:hover .video-play,
.nx-vp_start:focus-visible .video-play {
  transform: scale(1.07);
  background-color: #f0b429;
  box-shadow: 0 0 0 10px rgba(240, 180, 41, .16), 0 12px 32px rgba(0, 0, 0, .45);
}
.nx-vp_start:focus { outline: none; }
.nx-vp_start:focus-visible .video-play { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes nx-vp-ring {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

.nx-vp_meta {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  pointer-events: none;
}
.nx-vp_chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .7rem;
  border: 1px solid rgba(240, 180, 41, .28);
  border-radius: 999px;
  background: rgba(8, 10, 16, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 600 .78rem/1 "Space Grotesk", Inter, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
}
.nx-vp_chip.is-time { color: #f0b429; font-variant-numeric: tabular-nums; }
.nx-vp_chip-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: #f0b429;
  box-shadow: 0 0 8px rgba(240, 180, 41, .8);
}

/* Started: the poster gives way once the first frame is on screen; paused shows a lighter play button. */
.nx-vp.is-started .nx-vp_poster { opacity: 0; visibility: hidden; }
.nx-vp.is-started .nx-vp_start {
  background: rgba(5, 6, 10, .18);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.nx-vp.is-started .nx-vp_start::before,
.nx-vp.is-started .nx-vp_meta { display: none; }
.nx-vp.is-started.is-paused:not(.is-seeking) .nx-vp_start {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease, visibility 0s linear 0s;
}
/* The play button stays clear of the control bar. */
.nx-vp.is-started .nx-vp_start { bottom: 3.5rem; }

/* Control bar */
.nx-vp_bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 2.75rem .75rem .55rem;
  background: linear-gradient(to top, rgba(5, 6, 10, .9) 0%, rgba(5, 6, 10, .6) 45%, rgba(5, 6, 10, 0) 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
/* Once started the bar only fades: its controls stay reachable with Tab, and keyboard focus
   (kb-ui, set by the script) keeps it on screen. */
.nx-vp.is-started .nx-vp_bar { visibility: visible; }
.nx-vp.is-started.show-ui .nx-vp_bar,
.nx-vp.is-started.is-paused .nx-vp_bar,
.nx-vp.is-started.kb-ui .nx-vp_bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nx-vp.is-started.is-playing:not(.show-ui):not(.kb-ui) { cursor: none; }

.nx-vp_btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nx-vp_btn:hover { background: rgba(255, 255, 255, .1); color: #f0b429; }
.nx-vp_btn:focus { outline: none; }
.nx-vp_btn:focus-visible { outline: 2px solid #f0b429; outline-offset: 1px; }
.nx-vp_btn svg { width: 1.25rem; height: 1.25rem; display: block; }
.nx-vp_btn[hidden] { display: none; }

.nx-vp_time {
  flex: none;
  padding: 0 .35rem;
  color: rgba(255, 255, 255, .85);
  font: 500 .78rem/1 "Space Grotesk", Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.nx-vp_time-total { color: rgba(255, 255, 255, .55); }

.nx-vp_seek {
  --p: 0%;
  --b: 0%;
  flex: 1 1 auto;
  min-width: 3rem;
  height: 1.75rem;
  margin: 0 .35rem;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.nx-vp_seek:focus { outline: none; }
.nx-vp_seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #f0b429 0, #f0b429 var(--p), rgba(255, 255, 255, .4) var(--p), rgba(255, 255, 255, .4) var(--b), rgba(255, 255, 255, .16) var(--b), rgba(255, 255, 255, .16) 100%);
}
.nx-vp_seek::-moz-range-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, #f0b429 0, #f0b429 var(--p), rgba(255, 255, 255, .4) var(--p), rgba(255, 255, 255, .4) var(--b), rgba(255, 255, 255, .16) var(--b), rgba(255, 255, 255, .16) 100%);
}
.nx-vp_seek::-webkit-slider-thumb {
  width: 13px;
  height: 13px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 999px;
  background: #f0b429;
  box-shadow: 0 0 0 4px rgba(240, 180, 41, .22);
  transform: scale(.0001);
  transition: transform .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.nx-vp_seek::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 999px;
  background: #f0b429;
  box-shadow: 0 0 0 4px rgba(240, 180, 41, .22);
  transform: scale(.0001);
  transition: transform .15s ease;
}
.nx-vp_seek:hover::-webkit-slider-thumb,
.nx-vp_seek:focus-visible::-webkit-slider-thumb,
.nx-vp.is-seeking .nx-vp_seek::-webkit-slider-thumb { transform: none; }
.nx-vp_seek:hover::-moz-range-thumb,
.nx-vp_seek:focus-visible::-moz-range-thumb,
.nx-vp.is-seeking .nx-vp_seek::-moz-range-thumb { transform: none; }
.nx-vp_seek:focus-visible::-webkit-slider-runnable-track { outline: 2px solid #f0b429; outline-offset: 5px; }
.nx-vp_seek:focus-visible::-moz-range-track { outline: 2px solid #f0b429; outline-offset: 5px; }

/* Buffering spinner */
.nx-vp_spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: #f0b429;
  border-radius: 999px;
  background: rgba(5, 6, 10, .55);
  box-shadow: 0 0 0 .6rem rgba(5, 6, 10, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  animation: nx-vp-spin .8s linear infinite;
  transition: opacity .2s ease .25s, visibility 0s linear .45s;
}
.nx-vp.is-waiting .nx-vp_spinner {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s ease .25s, visibility 0s linear .25s;
}
.nx-vp.is-waiting .nx-vp_start { opacity: 0; visibility: hidden; }
@keyframes nx-vp-spin { to { transform: rotate(360deg); } }

/* Load failure */
.nx-vp_error {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1rem;
  background: rgba(5, 6, 10, .82);
  text-align: center;
  font-size: .9rem;
}
.nx-vp.is-error .nx-vp_error { display: flex; }
/* Nothing under the error panel stays visible or reachable with Tab. */
.nx-vp.is-error .nx-vp_start,
.nx-vp.is-started.is-error .nx-vp_bar,
.nx-vp.is-error .nx-vp_spinner { visibility: hidden; }

/* End screen: the poster again, Watch again and the sign-up button. */
.nx-vp_end {
  position: absolute;
  inset: 0 0 3.5rem;
  z-index: 2;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: 1rem;
  background: radial-gradient(ellipse at center, rgba(5, 6, 10, .55) 0%, rgba(5, 6, 10, .78) 100%);
}
.nx-vp.is-ended .nx-vp_end { display: flex; }
.nx-vp.is-ended .nx-vp_poster { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s linear 0s; }
.nx-vp.is-ended .nx-vp_start { opacity: 0; visibility: hidden; }
.nx-vp_replay {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.15rem;
  border: 1px solid rgba(240, 180, 41, .5);
  border-radius: 999px;
  background: rgba(8, 10, 16, .78);
  color: #fff;
  font: 600 .9rem/1 "Space Grotesk", Inter, sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nx-vp_replay svg { width: 1.15rem; height: 1.15rem; }
.nx-vp_replay:hover { border-color: #f0b429; color: #f0b429; }
.nx-vp_replay:focus { outline: none; }
.nx-vp_replay:focus-visible { outline: 2px solid #f0b429; outline-offset: 2px; }
.nx-vp_cta.button { margin: 0; }

/* Status line for screen readers only */
.nx-vp_sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The page's ambient embers and cursor glow step back while a video plays. */
#nx-embers,
#cursor-glow { transition: opacity .4s ease; }
html.nx-vp-active #nx-embers,
html.nx-vp-active #cursor-glow { opacity: 0; }
.nx-vp_retry {
  padding: .55rem 1rem;
  border: 1px solid rgba(240, 180, 41, .5);
  border-radius: .5rem;
  background: rgba(240, 180, 41, .12);
  color: #f0b429;
  font: 600 .85rem/1 "Space Grotesk", Inter, sans-serif;
  cursor: pointer;
}
.nx-vp_retry:focus-visible { outline: 2px solid #f0b429; outline-offset: 2px; }

/* Shown in the page while the player is in the expanded view */
.nx-vp_away {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  width: 100%;
  background: #05060a;
  color: rgba(255, 255, 255, .8);
  font: 600 .85rem/1.2 "Space Grotesk", Inter, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.nx-vp_away img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  filter: blur(2px);
}
.nx-vp_away span { position: relative; padding: .6rem 1rem; border-radius: 999px; background: rgba(8, 10, 16, .7); border: 1px solid rgba(240, 180, 41, .28); }

/* Expanded (theater) view: centred over a dimmed page, never the whole screen. */
html.nx-vp-lock,
html.nx-vp-lock body { overflow: hidden; }
.nx-vp-theater {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.nx-vp-theater_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 9, .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .22s ease;
}
.nx-vp-theater_panel {
  position: relative;
  width: min(1600px, 90vw, calc((100vh - 8rem) * var(--nx-arn, 1.9692)));
  width: min(1600px, 90vw, calc((100dvh - 8rem) * var(--nx-arn, 1.9692)));
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .22s ease, transform .22s ease;
}
.nx-vp-theater.is-open .nx-vp-theater_backdrop { opacity: 1; }
.nx-vp-theater.is-open .nx-vp-theater_panel { opacity: 1; transform: none; }
.nx-vp-theater_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.nx-vp-theater_title {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  color: #fff;
  font: 600 1rem/1.2 "Space Grotesk", Inter, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nx-vp-theater_hint {
  margin-left: auto;
  color: rgba(255, 255, 255, .62);
  font: 500 .75rem/1 Inter, sans-serif;
  white-space: nowrap;
}
@media (hover: none) {
  .nx-vp-theater_hint { display: none; }
}
.nx-vp-theater_hint kbd {
  padding: .15rem .35rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: .3rem;
  font: inherit;
}
.nx-vp-theater_close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(240, 180, 41, .3);
  border-radius: 999px;
  background: rgba(12, 14, 20, .85);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nx-vp-theater_close:hover { color: #f0b429; border-color: rgba(240, 180, 41, .7); }
.nx-vp-theater_close:focus { outline: none; }
.nx-vp-theater_close:focus-visible { outline: 2px solid #f0b429; outline-offset: 2px; }
.nx-vp-theater_close svg { width: 1.1rem; height: 1.1rem; }
.nx-vp-theater_stage {
  position: relative;
  aspect-ratio: var(--nx-ar, 3840 / 1950);
  overflow: hidden;
  border: 1px solid rgba(240, 180, 41, .22);
  border-radius: .75rem;
  background: #05060a;
  box-shadow: 0 30px 120px rgba(0, 0, 0, .6), 0 0 120px rgba(240, 180, 41, .1);
}

/* Full screen (the player element itself, so the same controls stay available) */
.nx-vp:fullscreen { border-radius: 0; }
.nx-vp:fullscreen .is-expand { display: none; }
.nx-vp:-webkit-full-screen .is-expand { display: none; }
.nx-vp:-webkit-full-screen { width: 100%; height: 100%; border-radius: 0; }

@media (max-width: 767px) {
  .nx-vp_meta { left: .6rem; bottom: .6rem; gap: .35rem; }
  .nx-vp_chip { padding: .32rem .55rem; font-size: .7rem; }
  .nx-vp_start .video-play { width: 3.75rem; height: 3.75rem; }
  .nx-vp_start::before { width: 3.75rem; height: 3.75rem; margin: -1.875rem 0 0 -1.875rem; }
  .nx-vp_bar { gap: .1rem; padding: 2rem .35rem .3rem; }
  .nx-vp_btn { width: 2.5rem; height: 2.5rem; }
  .nx-vp_time { padding: 0 .2rem; font-size: .72rem; }
  .nx-vp_time-total { display: none; }
  /* Phones: the inline player is already screen-wide, so Full screen is the way to enlarge it. */
  .nx-vp_btn.is-expand { display: none; }
  .nx-vp.is-started .nx-vp_start { bottom: 3rem; }
  .nx-vp_end { bottom: 3rem; }
  .nx-vp_replay { padding: .6rem .9rem; font-size: .8rem; }
}
@media (max-width: 479px) {
  .nx-vp_chip:not(.is-time) { display: none; }
  .nx-vp_cta { display: none; }
}
@media (hover: none) {
  /* Touch: 44px targets */
  .nx-vp_btn { width: 2.75rem; height: 2.75rem; }
  .nx-vp_seek::-webkit-slider-thumb { transform: none; }
  .nx-vp_seek::-moz-range-thumb { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-vp_start::before { animation: none; display: none; }
  .nx-vp *,
  .nx-vp-theater * { transition-duration: 0s !important; transition-delay: 0s !important; }
  .nx-vp_spinner { animation-duration: 1.6s; }
  .nx-vp-theater_panel { transform: none; }
}