/* Neurvance "stage" look: a light-gray stage, white floating cards, two-tone headlines,
   one dark band and slow motion that makes the page feel alive.
   Loaded after styles.css, home.css and site-header.css, and only on pages whose <body> has class "stage".
   Everything is scoped to body.stage so Newsletter, Policies, Characters and Cube Market keep their look.
   CSP is style-src 'self': no inline style attributes. Motion is moved by live.js through CSS variables,
   and every animation stops for visitors who prefer reduced motion. */

/* Nothing on a stage page may widen it: scroll-linked motion moves things sideways, and a page that
   can be scrolled to the right looks broken. `clip` hides the overflow without making a scroll box. */
html:has(body.stage),
body.stage {
  overflow-x: clip;
}

body.stage {
  --blue: #0c0f12;
  --blue-2: #2b3138;
  --blue-ink: #0c0f12;
  --pink: #0c0f12;
  --pink-strong: #2b3138;
  --ink: #0c0f12;
  --muted: #4a525a;
  --subtle: #636b73;
  --line: #e1e5e8;
  --line-strong: #cdd3d8;
  --tint: #eceff1;
  --surface-soft: #eef0f2;
  --shadow: 0 14px 40px rgba(20, 28, 34, 0.10);
  --shadow-lg: 0 30px 80px rgba(20, 28, 34, 0.20);
  --stage: #c9cfd3;
  --soft: #a3abb2;
  /* The shared app tokens from neurvance-glass.css, so every app page picks up the same palette. */
  --nv-blue: #0c0f12;
  --nv-blue-2: #2b3138;
  --nv-blue-ink: #0c0f12;
  --nv-pink: #0c0f12;
  --nv-pink-strong: #2b3138;
  --nv-tint: #eceff1;
  --nv-surface-soft: #c9cfd3;
  --nv-glass-line: #e1e5e8;
  --nv-line-strong: #cdd3d8;
  --nv-text: #0c0f12;
  --nv-text-muted: #4a525a;
  --nv-text-subtle: #636b73;
  --nv-shadow: 0 14px 40px rgba(20, 28, 34, 0.10);
  --nv-shadow-lg: 0 30px 80px rgba(20, 28, 34, 0.20);
  background:
    radial-gradient(1100px 620px at 50% -8%, #e3e8ea 0%, rgba(227, 232, 234, 0) 70%),
    var(--stage);
  color: var(--ink);
}

/* The same shared tokens on the root element itself: pages derive their own tokens on :root
   (for example --p-pink: var(--nv-pink)), and those are resolved there, not on the body. */
html:has(body.stage) {
  --nv-blue: #0c0f12;
  --nv-blue-2: #2b3138;
  --nv-blue-ink: #0c0f12;
  --nv-pink: #0c0f12;
  --nv-pink-strong: #2b3138;
  --nv-tint: #eceff1;
  --nv-surface-soft: #c9cfd3;
  --nv-glass-line: #e1e5e8;
  --nv-line-strong: #cdd3d8;
  --nv-text: #0c0f12;
  --nv-text-muted: #4a525a;
  --nv-text-subtle: #636b73;
  --nv-shadow: 0 14px 40px rgba(20, 28, 34, 0.10);
  --nv-shadow-lg: 0 30px 80px rgba(20, 28, 34, 0.20);
}

body.stage main,
body.stage .section,
body.stage .section-white,
body.stage .section-soft,
body.stage main > .section:nth-of-type(odd) {
  background: transparent;
}

html:has(body.stage) {
  background: var(--stage);
}

/* ---------------------------------------------------------------- type */
body.stage .soft {
  color: var(--soft);
  font-style: normal;
}

body.stage h1,
body.stage h2 {
  letter-spacing: -0.035em;
}

body.stage .eyebrow,
body.stage .section-label,
body.stage .pill-label {
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

body.stage .pill-label.on-dark {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ---------------------------------------------------------------- buttons */
body.stage .btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 26px rgba(12, 15, 18, 0.28);
}

body.stage .btn-primary:hover {
  background: #262c33;
  color: #fff;
}

body.stage .btn-secondary,
body.stage .card .btn-secondary,
body.stage .hero .btn-secondary {
  border-color: rgba(12, 15, 18, 0.28);
  background: rgba(255, 255, 255, 0.35);
  color: var(--ink);
}

body.stage .btn-secondary:hover,
body.stage .card .btn-secondary:hover,
body.stage .hero .btn-secondary:hover {
  border-color: var(--ink);
  background: #fff;
}

body.stage .card-blue .btn-primary {
  background: #fff;
  color: var(--ink);
}

/* ---------------------------------------------------------------- header: a floating pill bar */
html body.stage .site-header,
html body.stage .site-header.is-top {
  --hdr-fg: var(--ink);
  --hdr-btn: var(--ink);
  --hdr-bg: transparent;
  --hdr-border: transparent;
  --hdr-blur: none;
  top: 12px;
  margin-top: 12px;
  border-bottom: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body.stage .site-header .header-inner {
  width: min(calc(100% - 32px), 1180px);
  height: auto;
  min-height: 0;
  padding: 8px 10px 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 40px rgba(20, 28, 34, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

body.stage .site-header .site-nav {
  position: relative;
  gap: 2px;
  padding: 4px 6px 4px 52px;
  border: 0;
  background: #eceff1;
  box-shadow: none;
}

/* A small dark switch at the start of the nav pill, like the toggle in the reference. */
body.stage .site-header .site-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--ink);
  transform: translateY(-50%);
}

body.stage .site-header .site-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  animation: nv-switch 6s ease-in-out infinite;
}

body.stage .site-header .site-nav a {
  color: var(--ink);
  font-weight: 500;
}

body.stage .site-header .site-nav a:hover,
body.stage .site-header .site-nav a[aria-current="page"] {
  background: #fff;
  color: var(--ink);
}

body.stage .site-header .header-signin {
  color: var(--ink);
}

body.stage .site-header .header-cta {
  gap: 10px;
  padding: 0 16px 0 8px;
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

body.stage .site-header .header-cta::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 5px var(--ink), 0 0 0 1px rgba(255, 255, 255, 0.35);
}

body.stage .site-header .header-cta:hover {
  background: #262c33;
}

body.stage .site-header .mobile-nav summary {
  border-color: var(--ink);
}

body.stage .site-header .menu-icon,
body.stage .site-header .menu-icon::before,
body.stage .site-header .menu-icon::after {
  background: var(--ink);
}

body.stage .site-header .mobile-nav[open] .menu-icon {
  background: transparent;
}

body.stage .site-header .mobile-nav-panel {
  border-radius: 22px;
}

body.stage .site-header .mobile-nav-panel a:hover {
  background: #eceff1;
  color: var(--ink);
}

body.stage .site-header :focus-visible {
  outline-color: var(--ink);
}

@keyframes nv-switch {
  0%, 38% { transform: translate(0, -50%); }
  50%, 88% { transform: translate(16px, -50%); }
  100% { transform: translate(0, -50%); }
}

/* ---------------------------------------------------------------- hero on the stage */
body.stage .hero,
body.stage .hero-blue,
body.stage .page-hero,
body.stage .newsletter-hero {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding: clamp(36px, 6vw, 76px) 0 clamp(24px, 4vw, 48px);
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}

body.stage .hero::before,
body.stage .hero-blue::before,
body.stage .page-hero::before,
body.stage .newsletter-hero::before {
  display: none;
}

body.stage .hero h1,
body.stage .hero-blue h1,
body.stage .page-hero h1,
body.stage .newsletter-hero h1 {
  color: var(--ink);
}

body.stage .hero h1,
body.stage .hero-blue h1,
body.stage .page-hero h1 {
  max-width: 18ch;
}

body.stage.page-home .hero h1 {
  max-width: 15.5em;
  text-wrap: balance;
  text-shadow: 0 0 28px rgba(201, 207, 211, 0.95), 0 0 6px rgba(201, 207, 211, 0.7);
}

body.stage .page-home .hero h1,
body.stage.page-home .hero h1 {
  min-height: 2.15em;
  font-size: clamp(36px, 5.6vw, 76px);
  line-height: 1.02;
}

body.stage .hero .hero-lead,
body.stage .hero .lead,
body.stage .hero-blue .lead,
body.stage .page-hero .lead,
body.stage .newsletter-hero .lead {
  color: var(--muted);
}

body.stage .benefit-icon,
body.stage .market-num,
body.stage .character-buy-button,
body.stage .product:hover::after {
  background: var(--ink);
  box-shadow: none;
  color: #fff;
}

body.stage .market-hero h1 span {
  color: var(--soft);
}

body.stage ::selection {
  background: var(--ink);
  color: #fff;
}

body.stage .chip {
  color: var(--muted);
}

body.stage .chip::before {
  color: var(--ink);
}

body.stage .hero-meta,
body.stage .page-meta {
  color: var(--subtle);
}

body.stage .pull-up {
  margin-top: 0;
}

/* The word that changes in the headline. It fades out and in; without JS it just says "your market". */
.rotator {
  display: inline-block;
  color: #7f8890;
  transition: opacity 260ms ease, transform 260ms ease, filter 260ms ease;
}

.rotator.is-out {
  opacity: 0;
  transform: translateY(0.18em);
  filter: blur(6px);
}

/* A robot hand and a human hand reach toward each other from the sides of the hero, behind the headline.
   They slide in once, then float gently, and a small spark glows where the fingertips almost meet.
   --hw is the width of each hand; the robot hand sits lower so the index fingertips line up.
   --hp (0 to 1) is set by live.js while you scroll: at 0 the hands are apart, at 1 the fingertips meet.
   Without JavaScript or with reduced motion it stays at 1. */
.stage-hands {
  --hw: min(38vw, 520px);
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.stage-hands .hand {
  position: absolute;
  transition: left 180ms ease-out, right 180ms ease-out;
  display: block;
  width: var(--hw);
  height: auto;
  filter: drop-shadow(0 28px 38px rgba(30, 40, 48, 0.28));
}

.stage-hands .hand-robot {
  top: calc(var(--hw) * 0.25 - 26px);
  left: calc(var(--hw) * -0.62 * (1 - var(--hp, 1)));
  animation: nv-hand-left 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both, nv-bob 9s ease-in-out 1.6s infinite;
}

.stage-hands .hand-human {
  top: -26px;
  right: calc(var(--hw) * -0.62 * (1 - var(--hp, 1)));
  animation: nv-hand-right 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both, nv-bob 9s ease-in-out 1.75s infinite reverse;
}

.hands-spark {
  position: absolute;
  top: calc(var(--hw) * 0.29 - 26px);
  left: 50%;
  width: calc(60px + var(--hp, 1) * 70px);
  height: calc(60px + var(--hp, 1) * 70px);
  margin: calc(-30px - var(--hp, 1) * 35px) 0 0 calc(-30px - var(--hp, 1) * 35px);
  opacity: calc(0.35 + var(--hp, 1) * 0.65);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.85) 18%, rgba(255, 255, 255, 0) 68%);
  animation: nv-spark 3.2s ease-in-out 1.4s infinite both;
}

@keyframes nv-hand-left {
  from { translate: -22% 0; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}

@keyframes nv-hand-right {
  from { translate: 22% 0; opacity: 0; }
  to { translate: 0 0; opacity: 1; }
}

@keyframes nv-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes nv-spark {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* The scene: a soft blob behind a floating browser card. live.js sets --rx, --ry and --p. */
.stage-scene {
  position: relative;
  width: min(100%, 1020px);
  margin: clamp(32px, 5vw, 56px) auto 0;
  padding-bottom: 8px;
}

.stage-blob {
  position: absolute;
  z-index: -1;
  top: 46%;
  left: 50%;
  width: min(86%, 760px);
  aspect-ratio: 1.15;
  border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
  background:
    radial-gradient(circle at 34% 28%, #ffffff 0%, #f0f3f4 34%, #d9dfe2 70%, #c3cbcf 100%);
  box-shadow:
    inset -30px -40px 80px rgba(120, 132, 140, 0.35),
    inset 24px 24px 60px rgba(255, 255, 255, 0.9),
    0 50px 120px rgba(90, 100, 108, 0.25);
  transform: translate(-50%, -50%) translateY(calc(var(--p, 0) * 60px)) scale(calc(1 + var(--p, 0) * 0.08));
  animation: nv-blob 18s ease-in-out infinite;
}

@keyframes nv-blob {
  0%, 100% { border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%; }
  33% { border-radius: 56% 44% 42% 58% / 46% 56% 44% 54%; }
  66% { border-radius: 42% 58% 58% 42% / 56% 46% 54% 44%; }
}

.stage-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(30, 40, 48, 0.28), 0 6px 18px rgba(30, 40, 48, 0.10);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, calc(var(--p, 0) * -28px), 0);
  transition: transform 240ms ease-out;
}

.stage-card-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #f7f8f9;
}

.stage-card-dots {
  display: flex;
  gap: 6px;
}

.stage-card-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d3d8dc;
}

.stage-card-url {
  flex: 1;
  max-width: 360px;
  margin: 0 auto;
  padding: 4px 14px;
  border-radius: 999px;
  background: #eceff1;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
}


.stage-card-view {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f4f6f7;
}

/* The dashboard preview is taller than its window and slides up as the page scrolls. It is built from
   HTML and sized with container units, so it stays sharp and in the same style as the rest of the page. */
.stage-card-view {
  container-type: inline-size;
}

.stage-card-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: #eceff1;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.mock {
  --m-ink: #0c0f12;
  --m-muted: #4a525a;
  --m-line: #e1e5e8;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1.42;
  grid-template-rows: 56fr 44fr;
  gap: 1.3cqw;
  padding: 1.3cqw;
  background: linear-gradient(180deg, #e9ecee, #dfe3e6);
  color: var(--m-ink);
  font-size: 1.12cqw;
  line-height: 1.45;
  text-align: left;
  transform: translate3d(0, calc(var(--p, 0) * -56%), 0);
}

.mock p,
.mock ul,
.mock ol,
.mock h3,
.mock h4 {
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-top {
  display: grid;
  grid-template-columns: 0.86fr 1.7fr 1.05fr 1.05fr;
  gap: 1.3cqw;
  min-height: 0;
}

.m-bottom {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 1.3cqw;
  min-height: 0;
}

.m-col {
  display: grid;
  grid-template-rows: 1.5fr 1fr;
  gap: 1.3cqw;
  min-height: 0;
}

.m-card {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 1.6cqw;
  overflow: hidden;
  border-radius: 1.9cqw;
  background: #fff;
  box-shadow: 0 0.6cqw 2cqw rgba(20, 28, 34, 0.08);
}

.m-label {
  margin-bottom: 1cqw !important;
  color: var(--m-muted);
  font-family: var(--font-mono);
  font-size: 0.9cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.m-card h3 {
  margin-bottom: 0.8cqw;
  font-family: var(--font);
  font-size: 2cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.m-card h3 em,
.m-cols h4 em {
  display: inline-grid;
  width: 2.2cqw;
  height: 2.2cqw;
  place-items: center;
  margin-right: 0.9cqw;
  border-radius: 50%;
  background: var(--m-ink);
  color: #fff;
  font-size: 1.05cqw;
  font-style: normal;
  font-weight: 600;
  vertical-align: 0.12cqw;
}

.m-text {
  margin-bottom: 1.1cqw !important;
  color: var(--m-muted);
}

.m-text a,
.m-card a {
  color: var(--m-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.25cqw;
}

.m-btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 1.3cqw 1.4cqw;
  border: 1px solid var(--m-ink);
  border-radius: 999px;
  background: var(--m-ink);
  color: #fff;
  font-size: 1.25cqw;
  font-weight: 600;
  box-shadow: 0 0.6cqw 1.6cqw rgba(12, 15, 18, 0.22);
}

.m-btn.m-ghost {
  background: transparent;
  box-shadow: none;
  color: var(--m-ink);
}

.m-btn.m-small {
  width: auto;
  padding: 0.7cqw 1.5cqw;
  font-size: 0.95cqw;
}

.m-ok {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  margin-top: 1cqw !important;
  color: #067647;
  font-weight: 600;
}

.m-ok i {
  width: 0.7cqw;
  height: 0.7cqw;
  border-radius: 50%;
  background: #12b76a;
}

.m-link {
  margin-top: auto !important;
  color: var(--m-ink);
  font-weight: 600;
}

.m-fill .m-link {
  padding-top: 1cqw;
}

.m-pill {
  float: right;
  padding: 0.2cqw 0.9cqw;
  border-radius: 999px;
  background: #eceff1;
  color: var(--m-ink);
  font-family: var(--font);
  letter-spacing: 0;
  text-transform: none;
}

.m-tables {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1cqw;
}

.m-table {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 1.2cqw;
}

.m-table > p {
  padding: 0.9cqw 1cqw 0.9cqw 3.6cqw;
  border-bottom: 1px solid var(--m-line);
  background: #eceff1;
  font-weight: 700;
}

.m-table > p small {
  margin-left: 0.4cqw;
  color: var(--m-muted);
  font-weight: 500;
}

.m-table li {
  position: relative;
  display: flex;
  min-height: 3.3cqw;
  align-items: center;
  padding: 0.6cqw 1cqw 0.6cqw 3.6cqw;
  border-top: 1px solid var(--m-line);
}

.m-table li:first-child {
  border-top: 0;
}

.m-table li span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: grid;
  width: 2.7cqw;
  place-items: center;
  border-right: 1px solid var(--m-line);
  background: #f4f6f7;
  color: var(--m-muted);
}

.m-table li b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.m-table li u {
  margin-left: auto;
  padding-left: 0.6cqw;
  color: #98a1a8;
  text-decoration: none;
}

.m-tables .m-table {
  margin-bottom: 0;
}

.m-how {
  margin-top: 1.2cqw;
  padding: 1.2cqw 1.4cqw;
  border-radius: 1.2cqw;
  background: #f4f6f7;
}

.m-how > strong {
  display: block;
  margin-bottom: 0.5cqw;
}

.m-how ul {
  padding-left: 1.2cqw;
  list-style: disc;
}

.m-how ul li {
  margin-bottom: 0.4cqw;
}

.m-how > p {
  margin-top: 0.8cqw;
  padding-top: 0.8cqw;
  border-top: 1px solid var(--m-line);
}

.m-chip {
  display: inline-block;
  margin-left: 0.4cqw;
  padding: 0.1cqw 0.7cqw;
  border-radius: 0.6cqw;
  background: #e1e5e8;
  font-weight: 600;
}

.m-note {
  margin-top: 0.9cqw !important;
  color: var(--m-muted);
}

.m-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1cqw;
}

.m-head small {
  color: var(--m-muted);
  font-size: 1cqw;
}

.m-cols {
  display: grid;
  flex: 1;
  grid-template-columns: 1fr 0.8fr 1fr;
  margin-top: 0.4cqw;
  border-top: 1px solid var(--m-line);
}

.m-cols > div {
  min-width: 0;
  padding: 1.2cqw 1.4cqw 0;
  border-left: 1px solid var(--m-line);
}

.m-cols > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.m-cols h4 {
  margin-bottom: 1cqw;
  font-family: var(--font);
  font-size: 1.5cqw;
  font-weight: 600;
}

.m-cols p {
  margin-top: 0.9cqw;
  padding-top: 0.9cqw;
  border-top: 1px solid var(--m-line);
}

.m-cols p:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.m-cols a,
.m-cols small {
  display: block;
  margin-top: 0.3cqw;
}

.m-cols small {
  color: var(--m-muted);
}

.m-faint {
  color: var(--m-muted);
}

.m-page {
  flex: 1;
  margin-top: 0.8cqw;
  padding: 1.4cqw 1.6cqw;
  overflow: hidden;
  border: 1px solid var(--m-line);
  border-radius: 1.2cqw;
  background: #fff;
}

.m-page small {
  display: block;
  padding-bottom: 0.7cqw;
  border-bottom: 2px solid var(--m-ink);
  color: var(--m-muted);
  font-size: 0.8cqw;
  letter-spacing: 0.1em;
}

.m-page h4 {
  margin: 1.2cqw 0 0.5cqw;
  font-family: var(--font);
  font-size: 1.9cqw;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.m-page > .m-faint {
  margin-bottom: 1cqw !important;
  font-size: 0.95cqw;
  line-height: 1.4;
}

.m-page ol li {
  display: flex;
  justify-content: space-between;
  padding: 0.4cqw 0;
  font-size: 1cqw;
}

.m-page ol li a {
  text-decoration: none;
}

.m-page ol li i {
  color: var(--m-muted);
  font-style: normal;
}

.m-report > .m-link {
  margin-top: 1cqw !important;
}

.stage-float {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(30, 40, 48, 0.22);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: nv-float 7s ease-in-out infinite;
}

.stage-float-a {
  top: 18%;
  left: -26px;
}

.stage-float-b {
  right: -22px;
  bottom: 14%;
  animation-delay: -3.5s;
}

.stage-float small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.live-dot {
  position: relative;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #12b76a;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid #12b76a;
  opacity: 0;
  animation: nv-ping 2.4s ease-out infinite;
}

.live-bar {
  flex: none;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
}

.live-bar i {
  width: 4px;
  border-radius: 2px;
  background: var(--ink);
  animation: nv-bar 1.6s ease-in-out infinite;
}

.live-bar i:nth-child(1) { height: 7px; }
.live-bar i:nth-child(2) { height: 14px; animation-delay: -0.5s; }
.live-bar i:nth-child(3) { height: 10px; animation-delay: -1s; }

@keyframes nv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes nv-ping {
  0% { opacity: 0.8; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes nv-bar {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.live-bar i {
  transform-origin: bottom;
}

/* ---------------------------------------------------------------- cards on the stage */
body.stage .card,
body.stage .contact-rows,
body.stage .home-dashboard {
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: #fff;
  box-shadow: var(--shadow);
}

body.stage .card {
  border-radius: 24px;
}

body.stage .home-num {
  background: var(--ink);
  color: #fff;
}

body.stage .home-dashboard {
  border-radius: 28px;
}

body.stage .home-dashboard-label {
  color: var(--muted);
}

body.stage .home-cube-features li {
  border-top-color: rgba(12, 15, 18, 0.16);
}

body.stage .home-cube-features a:hover h3 {
  color: var(--ink);
}

body.stage .home-market-graphs .market-graph figcaption strong {
  color: var(--ink);
}

body.stage .home-market-graphs .mg-s1,
body.stage .home-market-graphs .mg-p1 { fill: #0c0f12; }
body.stage .home-market-graphs .mg-s2,
body.stage .home-market-graphs .mg-p4 { fill: #c3cacf; }
body.stage .home-market-graphs .mg-p2 { fill: #5b636b; }
body.stage .home-market-graphs .mg-p3 { fill: #98a1a8; }
body.stage .home-market-graphs .mg-line { stroke: #0c0f12; }
body.stage .home-market-graphs .mg-line-muted { stroke: #98a1a8; }
body.stage .home-market-graphs .mg-dot { fill: #0c0f12; }
body.stage .home-market-graphs .mg-dot-muted { fill: #98a1a8; }

body.stage .shot-badge {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}

body.stage .text-link {
  color: var(--ink);
}

body.stage .text-link:hover {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

/* Data protection card and the footer are dark. */
body.stage .duo .card-blue,
body.stage .card-blue {
  border-color: transparent;
  background: linear-gradient(160deg, #1a2026, #0c0f12 70%);
}

body.stage .site-footer {
  background: #0c0f12;
}

/* ---------------------------------------------------------------- the dark band */
.band-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) 0;
  background: #04060a;
  color: #fff;
  text-align: center;
}

body.stage .band-dark,
body.stage main > .band-dark:nth-of-type(odd) {
  background: #04060a;
}

/* Light rays that run toward a vanishing point, like the tunnel in the reference. */
.band-rays {
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 220vmax;
  height: 220vmax;
  background:
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      rgba(58, 120, 255, 0) 0deg 5deg,
      rgba(58, 120, 255, 0.34) 5.4deg,
      rgba(58, 120, 255, 0) 6.4deg,
      rgba(160, 200, 255, 0.16) 11deg,
      rgba(58, 120, 255, 0) 12deg
    );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 4%, #000 14%, transparent 34%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 4%, #000 14%, transparent 34%);
  transform: translate(-50%, -50%) rotate(0deg);
}

.band-glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(36, 92, 255, 0.34), rgba(4, 6, 10, 0) 70%),
    radial-gradient(90% 90% at 50% 120%, rgba(4, 6, 10, 0), #04060a 80%);
}

.band-dark.is-live .band-rays {
  animation: nv-rays 90s linear infinite;
}

.band-dark.is-live .band-glow {
  animation: nv-glow 7s ease-in-out infinite;
}

@keyframes nv-rays {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nv-glow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

body.stage .band-dark .section-label {
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.band-dark h2 {
  max-width: 14ch;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.98;
}

.band-dark h2 .soft {
  color: rgba(255, 255, 255, 0.42);
}

.band-dark .home-steps {
  max-width: 1040px;
  margin: clamp(40px, 6vw, 72px) auto 0;
  text-align: left;
}

.band-dark .home-steps li {
  padding: 26px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 400ms ease, background-color 400ms ease, transform 400ms ease;
}

.band-dark .home-steps li::before {
  position: static;
  margin-bottom: 18px;
  background: #fff;
  color: #0c0f12;
}

.band-dark .home-steps strong {
  color: #fff;
  font-size: 18px;
}

.band-dark.is-live .home-steps li {
  animation: nv-step 9s ease-in-out infinite;
}

.band-dark.is-live .home-steps li:nth-child(2) { animation-delay: 3s; }
.band-dark.is-live .home-steps li:nth-child(3) { animation-delay: 6s; }

@keyframes nv-step {
  0%, 4%, 36%, 100% {
    border-color: rgba(255, 255, 255, 0.14);
    background-color: rgba(255, 255, 255, 0.05);
    transform: none;
  }
  10%, 30% {
    border-color: rgba(130, 176, 255, 0.85);
    background-color: rgba(70, 120, 255, 0.16);
    transform: translateY(-6px);
  }
}

/* ---------------------------------------------------------------- numbers */
.stats-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding: clamp(24px, 4.5vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

body.stage .stats-card .section-label,
body.stage .card .section-label,
body.stage .home-dashboard .section-label {
  background: var(--tint);
}

.stats-card h2 {
  max-width: 18ch;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
}

.stats-card .section-note {
  margin-top: 16px;
  max-width: 34ch;
}

.stats-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-list li {
  display: grid;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.stats-list li:first-child {
  border-top: 0;
}

.stat-num {
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-text {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.stat-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #d9dee2;
  transition: background-color 400ms ease;
}

.stat-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 28, 34, 0.25);
  transition: transform 400ms cubic-bezier(0.3, 1.4, 0.5, 1);
}

.stats-list li.is-on .stat-toggle {
  background: var(--ink);
}

.stats-list li.is-on .stat-toggle::after {
  transform: translateX(20px);
}

/* ---------------------------------------------------------------- marquee headline */
.marquee {
  overflow: hidden;
  padding: clamp(28px, 5vw, 64px) 0;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  width: max-content;
  animation: nv-marquee 46s linear infinite;
}

.marquee-track span {
  padding-right: 0.5em;
  color: var(--ink);
  font-family: var(--font);
  font-size: clamp(54px, 11vw, 160px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
}

.marquee-track .soft {
  color: var(--soft);
}

@keyframes nv-marquee {
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 820px) {
  .stats-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  body.stage.page-home .hero h1 {
    min-height: 3.1em;
  }

  /* On phones the hands get their own band above the headline. */
  body.stage.page-home .hero {
    padding-top: 150px;
  }

  .stage-hands {
    --hw: 62vw;
  }

  .stage-hands .hand-robot {
    top: calc(var(--hw) * 0.25 - 4px);
  }

  .stage-hands .hand-human {
    top: -4px;
  }

  .hands-spark {
    top: calc(var(--hw) * 0.29 - 4px);
  }

  body.stage .site-header .header-inner {
    width: calc(100% - 24px);
    padding: 6px 8px 6px 14px;
  }

  .stage-float-a {
    left: -6px;
  }

  .stage-float-b {
    right: -6px;
  }

  .stage-float {
    padding: 8px 12px 8px 10px;
    font-size: 12px;
  }

  .stage-card-url {
    display: none;
  }


  .stats-list li {
    grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  }

  .stat-toggle {
    display: none;
  }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.stage *,
  body.stage *::before,
  body.stage *::after {
    animation: none !important;
    transition: none !important;
  }

  .stage-card,
  .stage-blob,
  .mock {
    transform: none;
  }

  .stage-blob {
    transform: translate(-50%, -50%);
  }
}

/* ---------------------------------------------------------------- smooth, scroll-linked motion
   The browser keeps its own native scrolling, so it stays fast and never lags. Motion is tied to the
   scroll position with CSS scroll timelines, which run off the main thread. Browsers without them
   (older Safari, Firefox) keep the simple fade-in from site.js. Reduced motion switches all of it off. */
html:has(body.stage) {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.stage) {
    scroll-behavior: auto;
  }
}

@supports (animation-timeline: view()) {
  @keyframes nv-rise {
    from { opacity: 0; transform: translate3d(0, 56px, 0) scale(0.985); }
  }

  @keyframes nv-rise-soft {
    from { opacity: 0; transform: translate3d(0, 30px, 0); }
  }

  @keyframes nv-zoom-in {
    from { opacity: 0; transform: scale(0.9); filter: blur(10px); }
  }

  @keyframes nv-hero-out {
    to { opacity: 0; transform: translate3d(0, -56px, 0); }
  }

  @keyframes nv-drift {
    from { transform: translate3d(0, 36px, 0); }
    to { transform: translate3d(0, -36px, 0); }
  }

  /* Sections no longer fade as one block; their cards rise one by one instead. */
  body.stage .reveal-ready [data-reveal],
  body.stage.reveal-ready [data-reveal],
  .reveal-ready body.stage [data-reveal] {
    opacity: 1;
    transition: none;
  }

  /* Cards, panels and rows rise into place as they enter the screen. */
  body.stage main .card:not(.card-static),
  body.stage main .stats-card,
  body.stage main .home-dashboard,
  body.stage main .contact-rows,
  body.stage main .policy-doc,
  body.stage main .market-graph,
  body.stage main .home-cube-features li,
  body.stage main .stats-list li {
    animation: nv-rise linear backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  /* A small stagger across a row of cards. */
  body.stage main .grid-3 > :nth-child(2),
  body.stage main .home-market-graphs > :nth-child(2),
  body.stage main .home-cube-features li:nth-child(even),
  body.stage main .stats-list li:nth-child(2) {
    animation-range: entry 8% entry 63%;
  }

  body.stage main .grid-3 > :nth-child(3),
  body.stage main .home-market-graphs > :nth-child(3),
  body.stage main .stats-list li:nth-child(3) {
    animation-range: entry 16% entry 71%;
  }

  /* Section headings ease in a little earlier than their content. */
  body.stage main .section > .container > h2,
  body.stage main .section > .container > .section-label,
  body.stage main .section > .container > .section-note {
    animation: nv-rise-soft linear backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  /* The big words in the dark band grow into the screen. */
  body.stage .band-dark h2 {
    animation: nv-zoom-in linear backwards;
    animation-timeline: view();
    animation-range: entry 5% entry 70%;
  }

  body.stage .band-dark .home-steps {
    animation: nv-rise linear backwards;
    animation-timeline: view();
    animation-range: entry 20% entry 80%;
  }

  /* The marquee headline drifts slightly against the scroll. */
  body.stage .marquee {
    animation: nv-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }

  /* The homepage hero text lifts away as you scroll down, while the hands and card carry on. */
  body.stage.page-home .hero .container > :not(.stage-scene) {
    animation: nv-hero-out linear forwards;
    animation-timeline: scroll(root block);
    animation-range: 0 60vh;
  }

  body.stage.page-home .hero .container > h1 {
    animation-range: 0 75vh;
  }
}

/* Gentle, premium hover feel on the cards that float on the stage. */
body.stage main .card:not(.card-static) {
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease, border-color 320ms ease;
}

/* ---------------------------------------------------------------- much stronger scroll motion
   Same idea as above, turned up: longer travel, longer ranges, softer easing, parallax layers. */
@supports (animation-timeline: view()) {
  @keyframes nv-rise {
    from { opacity: 0; transform: translate3d(0, 150px, 0) scale(0.92); }
  }

  @keyframes nv-rise-soft {
    from { opacity: 0; transform: translate3d(0, 80px, 0); }
  }

  @keyframes nv-zoom-in {
    from { opacity: 0; transform: scale(0.7); filter: blur(14px); }
  }

  @keyframes nv-from-left {
    from { opacity: 0; transform: translate3d(-120px, 0, 0); }
  }

  @keyframes nv-from-right {
    from { opacity: 0; transform: translate3d(120px, 0, 0); }
  }

  @keyframes nv-scene-in {
    from { opacity: 0.15; transform: translate3d(0, 170px, 0) scale(0.9); }
  }

  @keyframes nv-hero-out {
    to { opacity: 0; transform: translate3d(0, -130px, 0) scale(0.94); }
  }

  @keyframes nv-hero-out-lite {
    to { opacity: 0; transform: translate3d(0, -70px, 0); }
  }

  /* Up and down only: moving the full-width band sideways pushed it past the screen edge,
     and the page could be scrolled to the right. */
  @keyframes nv-drift {
    from { transform: translate3d(0, 40px, 0); }
    to { transform: translate3d(0, -40px, 0); }
  }

  @keyframes nv-parallax-down {
    to { transform: translate3d(0, 120px, 0); }
  }

  @keyframes nv-footer-up {
    from { opacity: 0; transform: translate3d(0, 90px, 0); }
  }

  body.stage main .card:not(.card-static),
  body.stage main .stats-card,
  body.stage main .home-dashboard,
  body.stage main .contact-rows,
  body.stage main .policy-doc,
  body.stage main .market-graph,
  body.stage main .home-cube-features li {
    animation: nv-rise cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }

  body.stage main .grid-3 > :nth-child(2),
  body.stage main .home-market-graphs > :nth-child(2),
  body.stage main .home-cube-features li:nth-child(even) {
    animation-range: entry 6% entry 96%;
  }

  body.stage main .grid-3 > :nth-child(3),
  body.stage main .home-market-graphs > :nth-child(3) {
    animation-range: entry 12% entry 100%;
  }

  body.stage main .stats-list li {
    animation: nv-from-right cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 95%;
  }

  body.stage main .stats-list li:nth-child(even) {
    animation-name: nv-from-left;
    animation-range: entry 8% entry 100%;
  }

  body.stage main .section > .container > h2,
  body.stage main .section > .container > .section-label,
  body.stage main .section > .container > .section-note {
    animation: nv-rise-soft cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }

  body.stage .band-dark h2 {
    animation: nv-zoom-in cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  body.stage .band-dark .home-steps {
    animation: nv-rise cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 10% entry 100%;
  }

  body.stage .stage-scene {
    animation: nv-scene-in cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }

  body.stage .site-footer {
    animation: nv-footer-up cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }

  /* The hands and their glow sink slowly as you scroll, so they trail the text like a second layer. */
  body.stage .stage-hands {
    animation: nv-parallax-down linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }

  /* The hero text lifts away in layers: the headline first and furthest, the small print last. */
  body.stage.page-home .hero .container > :not(.stage-scene) {
    animation: nv-hero-out-lite cubic-bezier(0.4, 0, 0.6, 1) forwards;
    animation-timeline: scroll(root block);
    animation-range: 0 70vh;
  }

  body.stage.page-home .hero .container > h1 {
    animation-name: nv-hero-out;
    animation-range: 0 85vh;
  }
}