/* ==========================================================================
   Next Payment — home
   ---------------------------------------------------------------------------
   Loaded after css/landing.css, which owns the console-adjacent chrome. This
   file owns the home page's design system and nothing else: one namespace, .np.

   Direction (2026-09-29): the page is built like a product tour, not a
   document. One idea per band, product panels big enough to read, prose cut to
   a headline and a gray continuation sentence, and two scroll-spy sweeps where
   the copy holds still and the product changes beside it.

   Deviations from the art-direction note, and why:
   · The accent stays the brand green rather than a new blue: the console, the
     marketing site and the docs share it, and a second accent would fork them.
   · The hero is centred rather than split, because the reference the owner
     pointed at is centred and a three-word headline wants the room.
   · The mandated "Payment infrastructure" section keeps its four product jobs
     and the five availability labels; the rest of the prose was cut.
   ========================================================================== */

.np {
  /* Ink and canvas — the house values. The page had drifted to #111318 on
     #ffffff; it is put back on ink #0b0d12 over canvas #f6f7f9, with the two
     recessed surfaces derived from that canvas rather than white. */
  --np-ink: #0b0d12;
  --np-ink-2: #5f6470;
  /* 4.8:1 on white and 4.5:1 on --np-canvas-2; the previous #8a8f99 was 3.0:1
     and left the eyebrow labels, fine print and quote footers hard to read. */
  --np-ink-3: #5c6472;
  --np-canvas: #f6f7f9;
  --np-canvas-2: #eef0f3;
  --np-canvas-3: #e7eaee;
  --np-rule: #e2e5ea;
  --np-rule-2: #d2d7de;

  /* One accent, borrowed from the product identity */
  --np-accent: var(--nx-accent, #0f9d63);
  --np-accent-ink: var(--nx-accent-ink, #086b43);
  --np-accent-soft: var(--nx-accent-soft, rgba(15, 157, 99, 0.1));

  /* Availability */
  /* Every one of these is measured against the tint the chip paints under
     itself, not against white: the recessed canvas made the old values land at
     4.20–4.44:1, under AA for the 10.5px label they carry. */
  --np-ok: #126b33;
  --np-review: #5c6472;
  --np-verify: #96440a;
  /* 4.9:1 on the 6% tint the chip paints under itself. The previous #6a7280
     measured 4.22:1 there, which is below AA for the 10.5px chip label. */
  --np-off: #5b626e;

  /* Radius, depth, space */
  --np-r-sm: 8px;
  --np-r-md: 14px;
  --np-r-lg: 20px;
  --np-shadow-1: 0 1px 2px rgba(16, 18, 23, 0.04);
  --np-shadow-2: 0 1px 2px rgba(16, 18, 23, 0.04), 0 12px 32px -12px rgba(16, 18, 23, 0.14);
  --np-shadow-3: 0 32px 72px -28px rgba(16, 18, 23, 0.22);
  --np-shell: 1320px;
  --np-section-y: clamp(4.25rem, 7.5vw, 7rem);

  /* Type: Inter for everything, JetBrains Mono for data */
  --np-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif;
  --np-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --np-cjk: "Noto Sans TC", "PingFang TC", "Hiragino Sans TC", var(--np-sans);

  /* Motion */
  --np-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --np-t-hover: 160ms;
  --np-t-reveal: 320ms;
  --np-t-swap: 640ms;

  --nx-display: var(--np-sans);
  --nx-body: var(--np-sans);
  --nx-cjk: var(--np-cjk);

  position: relative;
  background: var(--np-canvas);
  color: var(--np-ink);
  font-family: var(--np-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* The console keeps its own canvas; the home page paints its own. */
body.is-landing {
  background: var(--np-canvas, #fff);
}

.np-shell {
  width: 100%;
  max-width: var(--np-shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}
.np-main {
  display: block;
}

.np-skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 60;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--np-r-sm) var(--np-r-sm);
  background: var(--np-ink);
  color: #fff;
  font: 600 0.8rem/1 var(--np-sans);
  text-decoration: none;
}
.np-skip:focus-visible {
  transform: translate(-50%, 0);
}

.np a:focus-visible,
.np button:focus-visible,
.np select:focus-visible,
.np [tabindex]:focus-visible {
  outline: 2px solid var(--np-accent);
  outline-offset: 3px;
  border-radius: var(--np-r-sm);
}

/* ---------- The NEXT mark ------------------------------------------------- */
/* One glyph, three jobs: the lockup, the affordance on a control that moves you
   forward, and the indicator on an active step. Nothing else uses it. */
.np-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 0;
  background: none;
  /* the bar draws in the current text colour; the post is the one fixed green */
  color: var(--np-ink);
}
.np-mark svg {
  display: block;
}
.np-mark--lg {
  width: 28px;
  height: 28px;
}

/* ---------- Announcement banner ------------------------------------------ */
.np-banner {
  background: var(--np-ink);
  color: #f4f5f7;
}
.np-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-block: 0.4rem;
  font-size: 0.867rem;
  text-align: center;
}
.np-banner a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.np-banner a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Header ------------------------------------------------------- */
.np-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--np-canvas) 88%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--np-rule);
}
.np-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}
.np-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}
.np-wordmark {
  font: 600 1rem/1 var(--np-sans);
  letter-spacing: -0.02em;
}
.np-byline {
  display: block;
  font: 400 0.8rem/1.2 var(--np-mono);
  color: var(--np-ink-3);
}
.np-nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.np-nav a {
  color: var(--np-ink-2);
  text-decoration: none;
  font-size: 0.933rem;
  font-weight: 500;
  padding: 0.4rem 0;
}
.np-nav a:hover {
  color: var(--np-ink);
}
.np-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.np-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: 500 0.8rem/1 var(--np-mono);
  color: var(--np-ink-3);
}
.np-lang button {
  /* WCAG 2.2 AA 2.5.8: the EN button was 18×22px with 4.8px between neighbours.
     A 24px box keeps the label the same size and clears the minimum target. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  background: none;
  border: 0;
  padding: 0.35rem 0.15rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.np-lang button[aria-pressed="true"] {
  color: var(--np-ink);
}
.np-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-sm);
  background: none;
  color: inherit;
  cursor: pointer;
}
.np-menu-btn span {
  display: block;
  width: 16px;
  height: 1.5px;
  margin: 3.5px auto;
  background: currentColor;
}
.np-mobile-nav {
  display: flex;
  flex-direction: column;
  padding: 0.6rem clamp(1.15rem, 4vw, 2rem) 1.2rem;
  border-bottom: 1px solid var(--np-rule);
}
.np-mobile-nav[hidden] {
  display: none;
}
.np-mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 46px;
  color: var(--np-ink);
  text-decoration: none;
  font-size: 0.933rem;
  font-weight: 500;
  border-bottom: 1px solid var(--np-rule);
}
.np-mobile-nav .np-btn {
  margin-top: 0.9rem;
  justify-content: center;
  border-bottom: 0;
}

/* ---------- Buttons ------------------------------------------------------ */
.np-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--np-r-sm);
  font: 500 0.933rem/1 var(--np-sans);
  text-decoration: none;
  background: none;
  color: var(--np-ink);
  cursor: pointer;
  transition: background-color var(--np-t-hover) var(--np-ease),
    border-color var(--np-t-hover) var(--np-ease), color var(--np-t-hover) var(--np-ease);
}
.np-btn-primary {
  background: var(--np-ink);
  color: #fff;
}
.np-btn-primary:hover {
  background: #1d2027;
}
.np-btn-ghost {
  border-color: var(--np-rule-2);
  background: var(--np-canvas);
}
.np-btn-ghost:hover {
  border-color: var(--np-ink);
}
.np-btn-sm {
  min-height: 38px;
  padding: 0 0.85rem;
  font-size: 0.933rem;
}
.np-arrow {
  display: inline-block;
  transition: transform var(--np-t-hover) var(--np-ease);
}
.np-btn:hover .np-arrow,
.np-btn:focus-visible .np-arrow {
  transform: translateX(4px);
}
.np-only-sm {
  display: none;
}

/* ---------- Shared type -------------------------------------------------- */
.np-eyebrow {
  margin: 0;
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
.np-h1 {
  margin: 0;
  font-family: var(--np-sans);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4.25rem);
  line-height: 0.96;
  letter-spacing: -0.032em;
}
.np-h2 {
  margin: 0;
  font-family: var(--np-sans);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.667rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.np-h3 {
  margin: 0;
  font: 500 clamp(1.15rem, 1.8vw, 1.6rem) /1.3 var(--np-sans);
  letter-spacing: -0.02em;
}
/* The signature heading: sentence one in ink, sentence two in gray. */
.np-cont {
  color: var(--np-ink-2);
  /* colour alone separates the qualifier from the claim — same size, same weight */
  font-weight: inherit;
}
.np-lede {
  margin: 0;
  font-size: clamp(1.06rem, 1.5vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--np-ink-2);
}
.np-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--np-ink-2);
}
.np-fine {
  margin: 0;
  font-size: 0.933rem;
  line-height: 1.55;
  color: var(--np-ink-3);
}
.np-mono {
  font-family: var(--np-mono);
}

/* ---------- Availability chips ------------------------------------------ */
.np-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 6%, transparent);
  font: 500 0.8rem/1.3 var(--np-mono);
  color: var(--np-review);
  white-space: nowrap;
}
.np-chip--ok {
  color: var(--np-ok);
}
.np-chip--onboarding {
  color: var(--np-off);
}
.np-chip--sandbox {
  color: var(--np-review);
}
/* The specimen chip: the same shape as the status chips, but it labels the
   quote rather than a capability, so it does not borrow a status modifier. */
.np-chip--specimen {
  color: var(--np-review);
}
.np-chip--verify {
  color: var(--np-verify);
}
.np-chip--planned {
  color: var(--np-off);
}

/* ---------- Product panels ---------------------------------------------- */
.np-shot-frame {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--np-r-sm);
  background: #04101d;
}
.np-shot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}
.np-shot--tall {
  /* The captures are 1:2 portrait; a 3:4 frame shows the heading and most of
     the form, which is the part that carries the meaning. */
  aspect-ratio: 3 / 4;
  max-height: 24rem;
}
.np-shot--wide {
  aspect-ratio: 16 / 10;
  max-height: 24rem;
}
.np-shot--hero {
  /* The hero is the owner's 16:9 product intro; the frame matches it. */
  aspect-ratio: 16 / 9;
}
.np-hero-cap {
  padding: 0.7rem 1rem 0.85rem;
  border-top: 1px solid var(--np-rule);
  background: var(--np-canvas-2);
  font: 400 0.8rem/1.5 var(--np-mono);
  color: var(--np-ink-3);
}

.np-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--np-canvas);
}
.np-panel-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--np-rule);
}
.np-dots {
  display: inline-flex;
  gap: 4px;
}
.np-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--np-rule-2);
}
.np-panel-title {
  font: 500 0.8rem/1.2 var(--np-sans);
  color: var(--np-ink);
  min-width: 0;
}
.np-panel-bar .np-chip {
  margin-left: auto;
}
.np-panel-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 1rem 1.05rem;
  flex: 1;
  align-content: start;
}
.np-rows {
  display: grid;
  gap: 0;
}
.np-row {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--np-rule);
  font-size: 0.933rem;
}
.np-row:last-child {
  border-bottom: 0;
}
.np-row dt {
  flex: none;
  width: 8.5rem;
  margin: 0;
  color: var(--np-ink-3);
  font: 500 0.8rem/1.5 var(--np-mono);
}
.np-row dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  color: var(--np-ink);
}
.np-row dd.is-strong {
  font-weight: 600;
}
.np-row dd.is-mono {
  font-family: var(--np-mono);
  font-size: 0.8rem;
}
.np-amount {
  font: 600 1.6rem/1.1 var(--np-sans);
  letter-spacing: -0.02em;
}
.np-amount small {
  font: 400 0.8rem/1 var(--np-mono);
  color: var(--np-ink-3);
  letter-spacing: 0;
  display: block;
  margin-top: 0.25rem;
}
.np-note {
  margin: 0;
  font: 400 0.8rem/1.5 var(--np-mono);
  color: var(--np-ink-3);
}
.np-actions-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.np-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-sm);
  background: var(--np-canvas);
  font-size: 0.8rem;
  color: var(--np-ink);
}
.np-mini-btn--on {
  background: var(--np-ink);
  border-color: var(--np-ink);
  color: #fff;
}
.np-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--np-rule);
  font-size: 0.867rem;
}
.np-list li:last-child {
  border-bottom: 0;
}
.np-list .np-list-k {
  flex: none;
  width: 8.5rem;
  color: var(--np-ink-3);
  font: 500 0.8rem/1.5 var(--np-mono);
}
.np-list .np-list-v {
  flex: 1;
  min-width: 0;
  color: var(--np-ink);
}
.np-list .np-list-tag {
  margin-left: auto;
}
.np-faces {
  display: inline-flex;
}
.np-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-left: -0.45rem;
  border-radius: 50%;
  border: 1.5px solid var(--np-canvas);
  background: var(--np-canvas-3);
  color: var(--np-ink-2);
  font: 600 0.8rem/1 var(--np-mono);
}
.np-face:first-child {
  margin-left: 0;
}
.np-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 62px;
}
.np-bar-chart i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, var(--np-accent) 26%, var(--np-canvas-3));
}
.np-upload {
  display: grid;
  gap: 0.35rem;
  place-items: center;
  padding: 1.1rem;
  border: 1px dashed var(--np-rule-2);
  border-radius: var(--np-r-sm);
  background: var(--np-canvas-2);
  color: var(--np-ink-2);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- Trust strip -------------------------------------------------- */
.np-strip {
  border-top: 1px solid var(--np-rule);
  border-bottom: 1px solid var(--np-rule);
  background: var(--np-canvas);
}
.np-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 2rem;
  padding-block: 1.1rem;
  text-align: center;
  font-size: 0.933rem;
  color: var(--np-ink-2);
}
.np-strip-inner span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* On a phone the three lines were centre-stacked with a different indent on
   each, which reads as broken rather than centred. They become three rows,
   left-aligned, separated by the same hairline the rest of the page uses. */
@media (max-width: 640px) {
  .np-strip-inner {
    display: grid;
    justify-content: start;
    gap: 0;
    text-align: left;
    padding-block: 0.4rem;
  }
  .np-strip-inner span {
    padding-block: 0.7rem;
    align-items: flex-start;
  }
  .np-strip-inner span + span { border-top: 1px solid var(--np-rule); }
  .np-strip .np-dot { margin-top: 0.42rem; }
}
.np-strip-inner b {
  color: var(--np-ink);
  font-weight: 500;
}
.np-strip .np-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-accent);
}

/* ---------- Section furniture ------------------------------------------- */
.np-section {
  position: relative;
  isolation: isolate;
  padding-block: var(--np-section-y);
  border-top: 1px solid var(--np-rule);
}
.np-section > .np-shell,
.np-hero > .np-shell,
.np-close > .np-shell {
  position: relative;
  z-index: 1;
}

/* ---------- Interlude ----------------------------------------------------
   One dark band. The sentence is the product thesis and it is static: the
   machine's half and the person's half take the ink, the rest sits back, and a
   signal runs along a rule past a wall of ticks and stops at a gate. The old
   bed was a 12-second video loop whose phase decided which clause looked
   important; this is drawn, and it plays once. */
.np-interlude {
  position: relative;
  isolation: isolate;
  background: #0b0d12;
  color: #eef1f5;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  overflow: clip;
}
.np-interlude-signal {
  position: relative;
  height: 2px;
  margin: 0 auto clamp(2rem, 4.5vw, 3.4rem);
  width: min(1200px, calc(100% - 2.5rem));
  background: rgba(238, 241, 245, 0.14);
}
/* The wall of ticks the signal passes: the checks, drawn once in CSS. */
.np-interlude-ticks {
  position: absolute;
  inset: -7px 0 -7px 0;
  background: repeating-linear-gradient(
    to right,
    rgba(238, 241, 245, 0.1) 0 1px,
    transparent 1px 31px
  );
}
.np-interlude-run {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  background: var(--np-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.np-interlude-gate {
  position: absolute;
  left: 72%;
  top: -9px;
  bottom: -9px;
  width: 2px;
  background: var(--np-accent);
}
.np-interlude.is-in .np-interlude-run { transform: scaleX(1); }
.np-interlude-inner {
  display: grid;
  gap: 0.9rem;
}
.np-interlude-line {
  margin: 0;
  max-width: 26ch;
  font: 500 clamp(2.1rem, 1.1rem + 4.4vw, 4.2rem)/1.18 var(--np-sans);
  letter-spacing: -0.02em;
  color: #fff;
}
/* Two-tone, chosen rather than animated: what the machine does and what the
   person does carry the ink; the partner's half and the record sit back. */
.np-beat { display: inline; color: #9aa3af; }
.np-beat--0,
.np-beat--1 { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .np-interlude-run { transition: none; transform: scaleX(1); }
}

/* ---------- Atmospheric layer -------------------------------------------
   Generated backdrops, one per band that can carry one. They are decorative:
   aria-hidden, no pointer events, always behind the content, and always
   optional — if an image fails the band is simply the flat canvas it was
   before. The rules below keep them from ever competing with text. */
.np-atmos {
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Short bands: the backdrop spans the band. */
.np-atmos--fill {
  position: absolute;
  inset: 0;
}
/* Tall bands (the two sweeps, the walkthrough): the backdrop follows the
   reader instead of being stretched over 5,000px of scroll. The negative
   margin keeps it out of the layout so it never adds height. */
.np-atmos--stick {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
}
.np-atmos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}
/* Near-white line work on white: multiply keeps the ink and drops the paper. */
.np-atmos--lines img {
  opacity: 0.55;
  mix-blend-mode: multiply;
}
.np-atmos--glow img {
  /* The generated wash carries a warm cast; at low opacity it reads as depth
     rather than as a tint over the white canvas. */
  opacity: 0.4;
}
.np-dark .np-atmos img {
  opacity: 0.5;
  mix-blend-mode: screen;
}
@media (max-width: 720px) {
  /* Cropped hard, a wide backdrop loses its composition; the page reads better
     without it on a phone. */
  .np-atmos {
    display: none;
  }
}
.np-section--alt {
  background: var(--np-canvas-2);
}
.np-section-head {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.np-section-head--wide {
  max-width: 60rem;
}

/* ---------- Hero --------------------------------------------------------- */
.np-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) 0;
  text-align: center;
  overflow: clip;
}

/* The hero's field: a hairline grid with one signal that travels a rail and
   stops at a gate, drawn in the markup rather than loaded as a video. It is a
   backdrop, not a band, and it fades into the canvas before the console window;
   the copy and the window are lifted above it. */
.np-hero-field {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: min(68vh, 620px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
/* The grid the band sits on, and the one signal that crosses it. */
.np-hero-field {
  background-image:
    linear-gradient(to right, var(--np-rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--np-rule) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  background-position: center top;
}
.np-hero-rail {
  position: absolute;
  left: 50%;
  top: 15%;
  width: min(560px, 58vw);
  height: 1px;
  background: var(--np-rule-2);
  transform: translateX(-50%);
}
.np-hero-run {
  position: absolute;
  inset: 0 auto 0 0;
  width: 72%;
  background: var(--np-accent);
  transform: scaleX(0);
  transform-origin: left center;
  animation: np-hero-run 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms forwards;
}
.np-hero-gate {
  position: absolute;
  left: 72%;
  top: -7px;
  width: 1px;
  height: 15px;
  background: var(--np-ink-2);
}
@keyframes np-hero-run {
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .np-hero-run { animation: none; transform: scaleX(1); }
}
.np-hero-stage {
  z-index: 1;
}
.np-hero-copy {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
  max-width: 60rem;
  margin-inline: auto;
}
.np-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem 0.35rem 0.4rem;
  border: 1px solid var(--np-rule-2);
  border-radius: 999px;
  background: var(--np-canvas);
  font: 500 0.8rem/1.3 var(--np-sans);
  color: var(--np-ink-2);
  text-decoration: none;
}
.np-hero-pill:hover {
  border-color: var(--np-ink);
  color: var(--np-ink);
}
.np-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.np-hero-badge {
  font: 400 0.8rem/1.5 var(--np-mono);
  color: var(--np-ink-3);
}

/* The product window bleeds past the shell so the page never looks boxed in. */
.np-hero-stage {
  position: relative;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}
.np-hero-stage .np-hero-window {
  /* The hero is a film: no window chrome, no bar, no fake console. Centred in
     the shell (a fixed max-width and symmetric auto insets — the old rule
     widened it past the shell and the stage's own padding broke the symmetry). */
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  text-align: left;
}
.np-hero-video {
  border-radius: var(--np-r-lg);
}
/* The scroll scrim: above the page, below the film, so the film stays lit. */
.np-scrim {
  position: fixed;
  inset: 0;
  /* Under the header (40) and the film (50): the page dims, the nav and the
     film stay lit. */
  z-index: 35;
  /* A literal: the scrim is appended to <body>, outside the page root that
     defines the ink token, so var(--np-ink) resolved to nothing and the scrim
     painted transparent. */
  background: #0b0d12;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms linear;
}
.np-hero-video {
  position: relative;
  z-index: 60;
}
/* The stage owns a stacking context above the scrim, so the film stays the one
   lit thing while the page behind it dims. */
.np-hero-stage {
  position: relative;
  z-index: 60;
}
/* Workspace chrome inside the hero window. */
.np-app {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  min-height: 22rem;
}
.np-app-nav {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 0.9rem 0.7rem;
  border-right: 1px solid var(--np-rule);
  background: var(--np-canvas-2);
}
.np-app-item {
  padding: 0.45rem 0.6rem;
  border-radius: var(--np-r-sm);
  font-size: 0.867rem;
  color: var(--np-ink-2);
}
.np-app-item.is-on {
  background: var(--np-canvas);
  color: var(--np-ink);
  font-weight: 500;
  box-shadow: var(--np-shadow-1);
}
.np-app-sep {
  height: 1px;
  margin: 0.5rem 0.6rem;
  background: var(--np-rule-2);
}
.np-app-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-content: start;
}
.np-app-main > .np-panel + .np-panel {
  border-left: 1px solid var(--np-rule);
}
.np-app-main .np-panel {
  background: transparent;
}
.np-app-main .np-panel-bar {
  background: var(--np-canvas);
}

/* ---------- Sweeps: sticky rail beside a wall of panels ------------------ */
.np-sweep-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.np-rail {
  position: sticky;
  top: calc(var(--npl-header-live, 64px) + 2.5rem);
  display: grid;
  gap: 0.15rem;
}
.np-rail-list {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-rail-list li {
  margin: 0;
}
.np-rail-btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.5rem 0.25rem 0.5rem 1rem;
  border: 0;
  background: none;
  text-align: left;
  color: var(--np-ink-3);
  font: 500 0.98rem/1.35 var(--np-sans);
  cursor: pointer;
  transition: color var(--np-t-hover) var(--np-ease);
}
.np-rail-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62rem;
  width: 2.5px;
  height: 18px;
  border-radius: 2px;
  background: transparent;
  transition: background-color var(--np-t-hover) var(--np-ease);
}
.np-rail-btn[aria-current="true"] {
  color: var(--np-ink);
}
.np-rail-btn[aria-current="true"]::before {
  background: var(--np-accent);
}
.np-rail-btn:hover {
  color: var(--np-ink);
}
.np-rail-note {
  margin: 1rem 0 0 1rem;
  font: 400 0.8rem/1.6 var(--np-mono);
  color: var(--np-ink-3);
}
.np-rail-head {
  margin: 0 0 1rem 1rem;
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
/* The journey's heading sits directly above its pinned viewport, so it needs
   less air under it than a normal section head. */
.np-journey .np-section-head {
  margin-bottom: clamp(0.75rem, 1.6vw, 1.25rem);
}

.np-canvases {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
}
.np-canvas {
  display: grid;
  gap: 1.4rem;
  scroll-margin-top: calc(var(--npl-header-live, 64px) + 2rem);
}
.np-canvas-head {
  display: grid;
  gap: 0.6rem;
  max-width: 40rem;
}

/* The wall: panels divided by hairlines, one continuous surface. */
.np-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-rule);
  box-shadow: var(--np-shadow-1);
  overflow: hidden;
  gap: 1px;
}
.np-wall > .np-panel {
  background: var(--np-canvas);
}
/* Inside a wall every screen is cropped to the same frame, so a dashboard and a
   form can sit side by side without one leaving a hole. Wide captures are only
   used at full frame where a panel stands alone (the hero, a journey stage). */
.np-wall .np-shot {
  aspect-ratio: 3 / 4;
  max-height: 24rem;
}
.np-wall--2 {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
.np-wall--wide > .np-panel:first-child {
  grid-column: 1 / -1;
}

/* ---------- AI sweep ----------------------------------------------------- */
.np-prompt {
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-2);
  overflow: hidden;
}
.np-prompt-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: grid;
  gap: 0.8rem;
}
.np-prompt-text {
  min-height: 3.4rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--np-ink);
}
.np-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--np-accent);
}
.np-windows {
  display: grid;
  gap: 0.9rem;
}
.np-win {
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-2);
  overflow: hidden;
}
.np-win--b {
  margin-left: clamp(0.75rem, 4vw, 3rem);
}
.np-win--c {
  margin-left: clamp(1.5rem, 8vw, 6rem);
}
.np-approve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--np-accent) 30%, var(--np-rule-2));
  border-radius: var(--np-r-sm);
  background: var(--np-accent-soft);
}
.np-approve-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--np-accent);
  color: #fff;
  font: 600 0.8rem/1 var(--np-mono);
}
.np-approve-main {
  display: grid;
  gap: 0.1rem;
  flex: 1 1 8rem;
  font-size: 0.933rem;
  min-width: 0;
}
.np-approve-main b {
  font-weight: 600;
}
.np-approve-main small {
  color: var(--np-ink-2);
  font-size: 0.8rem;
}

/* The five-stop authority rail: who is allowed to do what. */
.np-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 1rem 0 0;
  list-style: none;
  border-top: 1px solid var(--np-rule);
}
.np-progress li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font: 500 0.8rem/1.3 var(--np-mono);
  color: var(--np-ink-3);
}
.np-progress li + li::before {
  content: "→";
  color: var(--np-rule-2);
}
.np-progress li.is-key {
  color: var(--np-ink);
}
.np-progress li.is-human {
  padding: 0.3rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--np-accent) 34%, transparent);
  border-radius: 999px;
  background: var(--np-accent-soft);
  color: var(--np-ink);
}

/* ---------- Six-stage walk ---------------------------------------------- */
.np-journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.np-stages {
  display: grid;
  gap: 1.25rem;
}
.np-stage {
  display: grid;
  gap: 0.9rem;
  padding: clamp(1.3rem, 2.4vw, 2rem);
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-1);
}
.np-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.np-stage-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--np-rule);
  font-size: 0.8rem;
  color: var(--np-ink-3);
}
.np-stage-of {
  margin-left: auto;
  color: var(--np-ink-3);
}
.np-stage-copy {
  display: grid;
  gap: 0.7rem;
}
.np-stage-screen .np-wall {
  box-shadow: var(--np-shadow-2);
}
.np-stage-screen .np-wall > .np-panel {
  border-radius: 0;
}
.np-stage-no {
  margin: 0;
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
.np-stage[data-boundary="human"] {
  border-color: color-mix(in srgb, var(--np-accent) 40%, var(--np-rule-2));
}
.np-stage[data-boundary="partner"] {
  border-color: color-mix(in srgb, var(--np-verify) 34%, var(--np-rule-2));
}
.np-stage-line {
  margin: 0;
  font: 400 0.8rem/1.6 var(--np-mono);
  color: var(--np-ink-2);
}

/* Pinned mode, desktop only, motion allowed. */
.np-journey.is-pinned .np-journey-viewport {
  height: calc(100svh - var(--npl-header-live, 64px));
  overflow: hidden;
}
.np-journey.is-pinned .np-journey-grid {
  height: 100%;
  align-items: start;
  padding-top: 1rem;
}
.np-journey.is-pinned .np-rail {
  position: static;
  align-self: start;
}
.np-journey.is-pinned .np-stages {
  position: relative;
  display: block;
  height: 100%;
}
.np-journey.is-pinned .np-stage {
  position: absolute;
  inset: 0;
  /* Top-aligned, not centred: a centred card left a dead band between the
     section heading and the first stage. */
  margin: 0 auto;
  height: fit-content;
  max-height: 100%;
  overflow-y: auto;
}

/* ---------- Infrastructure cards ---------------------------------------- */
.np-jobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-rule);
  gap: 1px;
  overflow: hidden;
}
.np-job {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1.5rem 1.4rem 1.7rem;
  background: var(--np-canvas);
}
.np-job h3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font: 600 1.2rem/1.3 var(--np-sans);
  letter-spacing: -0.02em;
}
.np-job h3 span {
  font: 500 0.8rem/1 var(--np-mono);
  color: var(--np-ink-3);
  font-weight: 400;
}
.np-legend {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--np-rule);
}
/* The legend's heading, now that the eyebrow treatment is gone from the page:
   still small, still quiet, but a sentence-cased label rather than a mono
   micro-caption above a heading. */
.np-legend-title {
  margin: 0;
  font-size: 0.933rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--np-ink-2);
}
/* The five labels read as one instrument row, not as five stacked lines. */
.np-legend-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-legend-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.933rem;
  color: var(--np-ink-2);
}

/* ---------- Quote, roles, selector -------------------------------------- */
.np-quote {
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-1);
  overflow: hidden;
}
.np-quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--np-rule);
  font: 500 0.8rem/1 var(--np-mono);
  color: var(--np-ink-3);
}
.np-quote-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--np-rule);
  font-size: 0.933rem;
}
.np-quote-row:last-child {
  border-bottom: 0;
}
.np-quote-row dt {
  flex: 1;
  margin: 0;
  color: var(--np-ink-2);
}
.np-quote-row dd {
  margin: 0;
  font-family: var(--np-mono);
  font-size: 0.867rem;
  color: var(--np-ink);
}
.np-quote-foot {
  padding: 0.8rem 1.1rem;
  background: var(--np-canvas-2);
  font: 400 0.8rem/1.55 var(--np-mono);
  color: var(--np-ink-3);
}
.np-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.np-roles {
  display: grid;
  border-top: 1px solid var(--np-rule-2);
}
.np-role {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--np-rule);
}
.np-role dt {
  margin: 0;
  font: 600 1rem/1.3 var(--np-sans);
  letter-spacing: -0.015em;
}
.np-role dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--np-ink-2);
}

/* ---------- The record the operating model closes on --------------------- */
.np-ledger { margin-top: 1.4rem; }
.np-ledger .np-micro {
  margin: 0 0 0.55rem;
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
.np-ledger .np-h3 { margin: 0 0 1.5rem; }
.np-ledger-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 176px;
  gap: 0 2.5rem;
  align-items: center;
}
.np-ledger-row { position: relative; padding: 1.05rem 0; }
.np-ledger-row + .np-ledger-row { border-top: 1px solid var(--np-rule); }
/* A green leader from each record's right edge, across the gap, to the junction */
.np-ledger-row::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2.5rem;
  width: 2.5rem;
  height: 2px;
  background: var(--np-accent);
  transform: translateY(-50%);
  transform-origin: right center;
}
.np-ledger-rowhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.np-ledger-rl { font-size: 1rem; color: var(--np-ink-2); }
.np-ledger-amt { font: 500 1rem/1.3 var(--np-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.np-ledger-sub { margin: 0.35rem 0 0; font: 0.8rem/1.5 var(--np-mono); color: #6a7280; }
.np-ledger-sum {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-left: 1.6rem;
  border-left: 2px solid var(--np-accent);
}
.np-ledger-sum::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--np-accent);
  transform: translateY(-50%);
}
.np-ledger-eq { font: 700 1.6rem/1 var(--np-mono); font-variant-numeric: tabular-nums; color: var(--np-accent); }
.np-ledger-verdict { font: 600 0.667rem/1.2 var(--np-mono); letter-spacing: 0.14em; color: var(--np-ink-3); }

.np-ledger-log { margin-top: 1.75rem; border-top: 1px solid var(--np-rule); }
.np-ledger-loglist {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.np-ledger-loglist li { position: relative; display: flex; flex-direction: column; gap: 0.25rem; }
.np-ledger-loglist li::before {
  content: "";
  position: absolute;
  top: -0.9rem;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--np-ink);
  transform: translateY(50%);
}
.np-ledger-logkey { font: 0.78rem/1.4 var(--np-mono); color: #6a7280; }
.np-ledger-logactor { font-size: 0.933rem; line-height: 1.4; }

/* One-shot write: the leaders draw, the log lights, then it holds. The complete
   frame is the default; .is-armed (JS, non-reduced) hides only the drawn parts
   until the band enters the viewport. Reduced motion and no-JS keep the whole
   static composition. */
.np-ledger .np-ledger-row::after { transform: translateY(-50%) scaleX(1); }
.np-ledger.is-armed .np-ledger-row::after { transform: translateY(-50%) scaleX(0); transition: transform 600ms linear; }
.np-ledger .np-ledger-sum::before { transform: translateY(-50%) scale(1); }
.np-ledger.is-armed .np-ledger-sum::before { transform: translateY(-50%) scale(0); transition: transform 200ms var(--np-ease) 1100ms; }
.np-ledger.is-armed .np-ledger-loglist li::before { opacity: 0; transition: opacity 220ms var(--np-ease); }
.np-ledger.is-armed .np-ledger-loglist li:nth-child(1)::before { transition-delay: 1350ms; }
.np-ledger.is-armed .np-ledger-loglist li:nth-child(2)::before { transition-delay: 1570ms; }
.np-ledger.is-armed .np-ledger-loglist li:nth-child(3)::before { transition-delay: 1790ms; }
.np-ledger.is-armed.is-in .np-ledger-row::after { transform: translateY(-50%) scaleX(1); }
.np-ledger.is-armed.is-in .np-ledger-sum::before { transform: translateY(-50%) scale(1); }
.np-ledger.is-armed.is-in .np-ledger-loglist li::before { opacity: 1; }

@media (max-width: 639px) {
  .np-ledger-pair { grid-template-columns: 1fr; gap: 0.75rem; }
  .np-ledger-row::after { display: none; }
  .np-ledger-sum { flex-direction: row; align-items: baseline; gap: 0.6rem; border-left: 0; padding-left: 0; border-top: 2px solid var(--np-accent); padding-top: 0.9rem; }
  .np-ledger-sum::before { display: none; }
  .np-ledger-loglist { grid-template-columns: 1fr; gap: 0.9rem; }
  .np-ledger-loglist li::before { display: none; }
}

/* The published coverage, between the band head and the control. Every peer
   surveyed names its markets; this list already existed inside the control. */
.np-coverage {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  max-width: 46rem;
}
.np-selector {
  display: grid;
  gap: 1.1rem;
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-1);
}
.np-selector-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
}
.np-field {
  display: grid;
  gap: 0.4rem;
}
.np-field > span {
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-ink-3);
  /* A form label, not an eyebrow: sentence case in the reading sans. */
  font-family: var(--np-sans);
  letter-spacing: 0;
  text-transform: none;
}
.np-field select {
  appearance: none;
  width: 100%;
  min-height: 46px;
  padding: 0 2.2rem 0 0.85rem;
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-sm);
  background: var(--np-canvas)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238a8f99' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 0.9rem center;
  color: var(--np-ink);
  font: 500 0.933rem/1.2 var(--np-sans);
}
.np-result {
  display: grid;
  gap: 0.8rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--np-rule);
  border-radius: var(--np-r-sm);
  background: var(--np-canvas-2);
  transition: opacity var(--np-t-reveal) var(--np-ease);
}
.np-result.is-swapping {
  opacity: 0.35;
}
.np-result h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font: 600 1rem/1.3 var(--np-sans);
  letter-spacing: -0.015em;
}

/* ---------- MCP surfaces -------------------------------------------------- */
.np-terminal {
  display: grid;
  gap: 0.9rem;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-2);
}
.np-terminal-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 500 0.8rem/1 var(--np-mono);
  color: var(--np-ink-3);
}
.np-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  min-height: 34px;
  padding: 0 0.7rem;
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-sm);
  background: var(--np-canvas);
  color: var(--np-ink-2);
  font: 500 0.8rem/1 var(--np-mono);
  cursor: pointer;
}
.np-copy:hover {
  border-color: var(--np-ink);
  color: var(--np-ink);
}
.np-copy[data-copied="true"] {
  border-color: var(--np-accent);
  color: var(--np-ink);
}
.np-terminal code {
  display: block;
  overflow-x: auto;
  padding: 0.9rem 1rem;
  border-radius: var(--np-r-sm);
  background: var(--np-canvas-3);
  font: 400 0.867rem/1.7 var(--np-mono);
  color: var(--np-ink);
  /* The command is ~78 characters, which is wider than the card at desktop and
     far wider than a phone. Wrap it rather than clipping `/mcp` off the end. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.np-terminal code .np-c {
  /* Comments sit on --np-canvas-3 rather than white, so they need the darker
     secondary ink to stay above 4.5:1. */
  color: var(--np-ink-2);
}

/* ---------- the MCP terminal (redesigned 2026-09-30) -------------------- */
/* The band's product, not an illustration of one: a prompt that blinks, the
   install command typing itself, and the same endpoint installed into five MCP
   clients in turn. The typing is decoration — the copyable string is real text
   underneath — and the frame is fixed, so a one-line command and a JSON block
   are the same size. */
.np-term-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 500 0.8rem/1 var(--np-mono);
  color: var(--np-ink-3);
}
.np-term-title {
  color: var(--np-ink-3);
}
.np-term-client {
  margin-left: auto;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--np-accent-soft);
  color: var(--np-ink);
  letter-spacing: 0.04em;
}
.np-term-body {
  display: block;
  padding: 0.85rem 0.95rem 0.9rem;
  border-radius: var(--np-r-sm);
  background: var(--np-canvas-3);
  /* fixed frame: the card never jumps between a one-line command and JSON.
     Tall enough for the longest client block (opencode's four-line config plus
     its comment) at this type size — asserted, not eyeballed. */
  height: 17.5rem;
  overflow: hidden;
}
.np-term-file {
  display: block;
  font: 400 0.8rem/1.5 var(--np-mono);
  color: var(--np-ink-3);
}
.np-term-file[hidden] {
  display: none;
}
.np-term-line {
  display: block;
  margin-top: 0.45rem;
  font: 400 0.8rem/1.62 var(--np-mono);
  color: var(--np-ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.np-term-prompt {
  color: var(--np-ink);
  font-weight: 600;
}
.np-term-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--np-ink);
}
.np-term-comment {
  display: block;
  margin-top: 0.55rem;
  font: 400 0.8rem/1.62 var(--np-mono);
  color: var(--np-ink-2);
  white-space: pre-wrap;
}
.np-term-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.np-term-tab {
  min-height: 34px;
  padding: 0 0.85rem;
  border: 1px solid var(--np-rule-2);
  border-radius: 999px;
  background: var(--np-canvas);
  color: var(--np-ink-2);
  font: 500 0.8rem/1 var(--np-sans);
  cursor: pointer;
}
.np-term-tab:hover {
  border-color: var(--np-ink);
  color: var(--np-ink);
}
.np-term-tab[aria-pressed="true"] {
  border-color: var(--np-ink);
  background: var(--np-ink);
  color: var(--np-canvas);
}
.np-term-hint {
  margin: 0;
}
@media (max-width: 640px) {
  .np-term-body {
    height: 19rem;
  }
  .np-term-client {
    display: none;
  }
}
.np-dark {
  background: #0e1015;
  color: #eef0f3;
  border-top: 0;
}
.np-dark .np-h2,
.np-dark .np-h3 {
  color: #fff;
}
.np-dark .np-lede,
.np-dark .np-body {
  color: #a9aeb8;
}
.np-dark .np-fine,
.np-dark .np-eyebrow {
  color: #7c828d;
}
.np-dark .np-chip {
  color: #b7bcc6;
}
.np-dark .np-rows,
.np-dark .np-list {
  border-color: #23262e;
}
.np-dark .np-row {
  border-bottom-color: #23262e;
  color: #e7e9ee;
}
.np-dark .np-row dt,
.np-dark .np-list .np-list-k {
  color: #7c828d;
}
.np-dark .np-row dd,
.np-dark .np-list .np-list-v {
  color: #e7e9ee;
}
.np-dark .np-sweep-grid .np-rail-note,
.np-dark .np-rail-btn {
  color: #7c828d;
}
.np-dark .np-rail-btn[aria-current="true"] {
  color: #fff;
}
.np-verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-verbs li {
  margin: 0;
  padding: 0.32rem 0.6rem;
  border: 1px solid #2b2f38;
  border-radius: var(--np-r-sm);
  font: 500 0.8rem/1.2 var(--np-mono);
  color: #c3c8d2;
}
.np-verbs li.is-off {
  border-style: dashed;
  color: #7c828d;
}

.np-cap-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0.7rem 0 1.1rem;
  padding: 0;
  list-style: none;
}
.np-cap-features li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.933rem;
  line-height: 1.4;
  color: var(--np-ink-2);
}
.np-cap-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--np-accent);
}

/* ---------- Payment infrastructure: the five-capability rail + panel --------- */
.np-cap {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 2.75rem);
  align-items: start;
  margin-top: clamp(1.75rem, 4vw, 3rem);
}
.np-cap-rail {
  margin: 0;
  padding: 0;
  list-style: none;
  position: sticky;
  top: 6rem;
}
.np-cap-rail li + li { border-top: 1px solid var(--np-rule); }
.np-cap-rail button {
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 0.95rem 0;
  border: 0;
  background: none;
  font: 500 1rem/1.4 var(--np-sans);
  letter-spacing: -0.01em;
  color: var(--np-ink-3);
  text-align: left;
  cursor: pointer;
}
.np-cap-rule {
  width: 2px;
  height: 1.2em;
  background: var(--np-ink);
  opacity: 0.14;
  border-radius: 1px;
  transition: opacity 240ms var(--np-ease), background-color 240ms var(--np-ease);
}
.np-cap-rail button.is-on { color: var(--np-ink); }
.np-cap-rail button.is-on .np-cap-rule { background: var(--np-accent); opacity: 1; }
.np-cap-rail button:focus-visible {
  outline: 2px solid var(--np-accent);
  outline-offset: 2px;
}
.np-cap-panel { animation: np-cap-in 240ms var(--np-ease); }
@keyframes np-cap-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.np-cap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.np-cap-head .np-h3 { margin: 0; }
.np-cap-panel .np-shot {
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
}
.np-cap-note {
  margin-top: 1.4rem;
  color: var(--np-ink-2);
}
@media (max-width: 1023px) {
  .np-cap { grid-template-columns: 1fr; }
  .np-cap-rail {
    position: static;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .np-cap-rail li { flex: none; scroll-snap-align: start; }
  .np-cap-rail li + li { border-top: 0; }
  .np-cap-rail button {
    grid-template-columns: none;
    gap: 0;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--np-rule);
    border-radius: 999px;
    white-space: nowrap;
  }
  .np-cap-rail button .np-cap-rule { display: none; }
  .np-cap-rail button.is-on { border-color: var(--np-accent); color: var(--np-ink); }
  .np-cap-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Close + footer ------------------------------------------------ */
.np-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--np-section-y);
  text-align: center;
  border-top: 1px solid var(--np-rule);
}
.np-close-inner {
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
}
.np-footer {
  padding-block: 3rem;
  border-top: 1px solid var(--np-rule);
  background: var(--np-canvas-2);
}
.np-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.np-footer h3 {
  margin: 0 0 0.8rem;
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
.np-footer ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.np-footer li {
  margin: 0;
}
.np-footer a {
  color: var(--np-ink-2);
  text-decoration: none;
  font-size: 0.933rem;
}
.np-footer a:hover {
  color: var(--np-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.np-disclosure {
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--np-rule);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--np-ink-3);
  max-width: 62rem;
}

/* The entity line and the two notices, under the disclosure. Same voice as the
   marketing site's footer, so the last thing on every page reads the same. */
.np-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin: 1.1rem 0 0;
  font-family: var(--np-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--np-ink-3);
}
.np-legal-entity {
  color: var(--np-ink-3);
}
.np-legal a {
  color: var(--np-ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--np-rule);
}
.np-legal a:hover {
  color: var(--np-ink);
  border-bottom-color: var(--np-ink-3);
}

/* ---------- Reveal ------------------------------------------------------- */

/* The infrastructure mesh as a wireframe: rows and columns of one surface with
   two signal lines crossing it. Drawn, not rendered — no file, no seam, and the
   only green is the house green. */
.np-mesh {
  margin: clamp(1.6rem, 3.4vw, 2.6rem) 0 0;
  border: 1px solid var(--np-rule);
  border-radius: var(--np-r-lg);
  background: var(--np-canvas-2);
  overflow: hidden;
}
.np-mesh svg {
  display: block;
  width: 100%;
  height: clamp(10rem, 21vw, 16rem);
}
.np-mesh-row,
.np-mesh-col {
  stroke: var(--np-rule-2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.np-mesh-col { stroke: var(--np-rule); }
.np-mesh-signal {
  stroke: var(--np-accent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.np-mesh.is-in .np-mesh-signal {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .np-mesh-signal { stroke-dashoffset: 0; transition: none; }
}

/* The closing line: a hairline across the band that draws to its end and stops
   at a node. Drawn, so there is nothing to load and nothing to loop. */
.np-close-line {
  position: relative;
  width: min(560px, 62vw);
  height: 1px;
  margin: 0 auto clamp(1.6rem, 3.4vw, 2.4rem);
  background: var(--np-rule-2);
}
.np-close-run {
  position: absolute;
  inset: -1px auto -1px 0;
  width: 100%;
  background: var(--np-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.np-close-line.is-in .np-close-run { transform: scaleX(1); }
.np-close-stop {
  position: absolute;
  left: 100%;
  top: 50%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  border: 2px solid var(--np-accent);
  background: var(--np-canvas);
}
@media (prefers-reduced-motion: reduce) {
  .np-close-run { transition: none; transform: scaleX(1); }
}

/* The endpoint block inside the developer band: the page's one dark surface,
   carrying the endpoint, its own descriptor and the two verb lists. */
.np-dev-mcp {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--np-r-lg);
  background: #0e1015;
  color: #eef0f3;
}
.np-dev-mcp .np-h3 { color: #fff; }
.np-dev-mcp .np-fine { color: #9aa3af; }
.np-dev-mcp .np-verbs li {
  border-color: rgba(238, 240, 243, 0.16);
  color: #e7e9ee;
}
.np-dev-mcp .np-verbs li.is-off { color: #9aa3af; }
.np-dev-mcp .np-two { gap: clamp(1.4rem, 3vw, 2.4rem); }

/* The register: one section where three used to be. The checker sits under the
   head, the two lists sit beside each other on a wide screen. */
.np-live-block { margin-top: clamp(1.6rem, 3.2vw, 2.4rem); }
.np-live-block .np-h3 { margin: 0 0 0.6rem; }
.np-live-block .np-roles { margin-top: 0.4rem; }

/* The published route table: every row carries its own label, and the whole
   answer is on the page at once. Scrolls sideways rather than clipping. */
.np-routes-wrap {
  margin-top: 0.9rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.np-routes {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.np-routes th,
.np-routes td {
  padding: 0.7rem 1.1rem 0.7rem 0;
  border-bottom: 1px solid var(--np-rule);
  font-size: 0.933rem;
  vertical-align: baseline;
  white-space: nowrap;
}
.np-routes thead th {
  border-bottom-color: var(--np-rule-2);
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
.np-routes tbody td { color: var(--np-ink-2); }
.np-routes tbody td:first-child { color: var(--np-ink); font-weight: 500; }
.np-routes-region th {
  padding-top: 1.2rem;
  border-bottom: 0;
  font: 600 0.8rem/1 var(--np-sans);
  letter-spacing: 0.01em;
  color: var(--np-ink);
}
.np-routes-note { max-width: 46rem; margin-top: 0.4rem; }
.np-live-grid { display: grid; gap: clamp(1.6rem, 3.2vw, 2.4rem); }
@media (min-width: 900px) {
  .np-live-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Four lanes and a gate, drawn in CSS. Nothing is photographed and nothing is
   generated: the picture is the mechanic the four rows below describe — three
   lanes run past the gate, and the one that belongs to a person stops at it.
   The run lines draw once when the band enters (revealInit adds `.is-in`). */
.np-lanes {
  position: relative;
  margin: clamp(1.6rem, 3.4vw, 2.6rem) 0 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.2rem);
}
.np-lane {
  position: relative;
  height: 1px;
  background: var(--np-rule-2);
}
.np-lane-run {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--np-ink-3);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms);
}
.np-lane--gate .np-lane-run { background: var(--np-accent); }
.np-lane-node {
  position: absolute;
  left: 72%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--np-accent);
  box-shadow: 0 0 0 4px var(--np-accent-soft);
}
.np-lane-gate {
  position: absolute;
  left: 72%;
  top: calc(-1 * clamp(0.9rem, 2vw, 1.4rem));
  bottom: calc(-1 * clamp(0.9rem, 2vw, 1.4rem));
  width: 1px;
  background: var(--np-ink-2);
}
.np-lanes.is-in .np-lane-run { transform: scaleX(var(--run, 1)); }
@media (prefers-reduced-motion: reduce) {
  .np-lane-run { transition: none; transform: scaleX(var(--run, 1)); }
}

/* Generated plates: dark, restrained, one per band that used to be a wall of
   small print. The image drifts a few percent as it crosses the viewport (see
   platesInit); under reduced motion it is simply still. */
.np-plate {
  position: relative;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  border-radius: var(--np-r-lg);
  overflow: hidden;
  background: #07090c;
}
.np-plate img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 380px);
  object-fit: cover;
  transform: scale(1.06);
}
.np-plate video {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 380px);
  object-fit: cover;
  transform: scale(1.06);
}
.np-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 9, 12, 0.02) 0%, rgba(7, 9, 12, 0.5) 100%);
}
.np-plate-cap {
  position: absolute;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(0.9rem, 3vw, 1.6rem);
  z-index: 2;
  margin: 0;
  font-family: var(--np-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
@media (prefers-reduced-motion: reduce) {
  .np-plate img {
    transform: none;
  }
}

.np.is-armed [data-np-rise] {
  opacity: 0;
  transform: translateY(18px);
}
.np [data-np-rise] {
  transition: opacity var(--np-t-reveal) var(--np-ease), transform var(--np-t-reveal) var(--np-ease);
}
.np [data-np-rise].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .np * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .np [data-np-rise] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Narrow screens ---------------------------------------------- */
@media (max-width: 1039px) {
  .np-nav {
    display: none;
  }
  .np-menu-btn {
    display: inline-block;
  }
  .np-sweep-grid,
  .np-journey-grid,
  .np-stage-grid,
  .np-wall--2,
  .np-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .np-app {
    grid-template-columns: minmax(0, 1fr);
  }
  .np-app-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .np-app-main > .np-panel + .np-panel {
    border-left: 0;
    border-top: 1px solid var(--np-rule);
  }
  .np-app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-right: 0;
    border-bottom: 1px solid var(--np-rule);
  }
  .np-app-sep {
    display: none;
  }
  .np-rail {
    position: static;
  }
  .np-rail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  .np-rail-btn {
    width: auto;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--np-rule-2);
    border-radius: 999px;
    font-size: 0.933rem;
  }
  .np-rail-btn::before {
    display: none;
  }
  .np-rail-btn[aria-current="true"] {
    border-color: var(--np-accent);
    color: var(--np-ink);
  }
  .np-rail-head,
  .np-rail-note {
    margin-left: 0;
  }
  .np-canvases {
    gap: 2.5rem;
  }
  .np-win--b,
  .np-win--c {
    margin-left: 0;
  }
  .np-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .np-header-inner {
    gap: 0.4rem;
  }
  .np-byline {
    display: none;
  }
  .np-actions .np-btn-ghost[data-go] {
    display: none;
  }
  .np-hide-sm {
    display: none;
  }
  .np-only-sm {
    display: inline;
  }
  .np-role {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .np-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .np-row {
    flex-wrap: wrap;
    gap: 0.1rem;
  }
  .np-row dt {
    width: 100%;
  }
  .np-list li {
    flex-wrap: wrap;
  }
  .np-list .np-list-k {
    width: 100%;
  }
}

/* ---------- Terms-change panel in pricing ------------------------------- */
.np-terms {
  border-top: 1px solid var(--np-rule);
  padding: 0 1.1rem 1.1rem;
}
.np-terms summary {
  padding: 0.85rem 0;
  cursor: pointer;
  font: 500 0.933rem/1.3 var(--np-sans);
  color: var(--np-ink);
}
.np-terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.933rem;
  margin-bottom: 0.9rem;
}
.np-terms-table th,
.np-terms-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--np-rule);
}
.np-terms-table thead th {
  font: 500 0.8rem/1 var(--np-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-ink-3);
}
.np-terms-table tbody th {
  font-weight: 500;
  color: var(--np-ink-2);
}
.np-terms-table tr.is-changed {
  background: var(--nx-amber-soft, rgba(180, 120, 10, 0.12));
}
.np-terms-table tr.is-changed td:last-child {
  color: var(--nx-amber-ink, #8a5a04);
  font-weight: 500;
}

/* ==========================================================================
   Payment infrastructure — the four windows (2026-10-01)
   ---------------------------------------------------------------------------
   The band under the hero, rebuilt the way the reference does it: vertical
   strips open as the band arrives, and four product windows sweep through a
   pinned stage — each one coming forward while the ones behind settle back —
   with the job's own one-line prompt typing itself as the window lands. Every
   availability label is unchanged, and the five-label legend stays below.
   Without motion (narrow screens, reduced motion, no JS) the four windows sit
   in reading order with their prompts already written.
   ========================================================================== */
.np-infra {
  position: relative;
  overflow: hidden;
}
.np-infra > .np-shell {
  position: relative;
  z-index: 1;
}
/* the strip bed: paper, then vertical strips that lift away */
.np-infra-bed {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 1px;
  pointer-events: none;
}
.np-infra-bed i {
  display: block;
  background: linear-gradient(180deg, var(--np-canvas-2), var(--np-canvas-3));
  border-right: 1px solid var(--np-rule);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
.np-infra-bed i:last-child {
  border-right: 0;
}
html[data-npl-motion="off"] .np-infra-bed i,
.np-reduced .np-infra-bed i {
  transform: translate3d(0, -101%, 0);
}

.np-infra-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- The line the four jobs sit on -------------------------------
   The band's navigation and its progress indicator are the same object: one
   hairline under the stage, filled as the reader moves from job to job, with
   the four jobs as stations on it and an amber gate before the one job that is
   still under verification. The stations are the step buttons, so there is no
   second rail beside it. */
.np-infra-line {
  position: relative;
}
.np-infra-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  z-index: 0;
  pointer-events: none;
}
.np-infra-rule svg {
  display: block;
  width: 100%;
  height: 2px;
  overflow: visible;
}
.np-infra-track {
  fill: none;
  stroke: var(--np-rule);
  stroke-width: 2;
}
.np-infra-draw {
  fill: none;
  stroke: var(--np-ink);
  stroke-width: 2;
}
.np-infra-gate {
  position: absolute;
  left: 57%;
  top: -13px;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: var(--np-verify);
}
.np-infra-gate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(180, 83, 9, 0.16), transparent 72%);
}
.np-infra-stations {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
.np-infra-station {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--np-ink-3);
  text-align: center;
  cursor: pointer;
  font-size: 0.933rem;
}
.np-infra-node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--np-canvas);
  border: 2px solid var(--np-rule-2);
  transition: background-color 160ms var(--np-ease), border-color 160ms var(--np-ease),
    transform 160ms var(--np-ease);
}
.np-infra-station .np-infra-n {
  font-size: 0.8rem;
  color: var(--np-ink-3);
}
.np-infra-station:hover {
  color: var(--np-ink-2);
}
.np-infra-station[aria-pressed="true"],
.np-infra-station[aria-pressed="true"] .np-infra-n {
  color: var(--np-ink);
}
.np-infra-node.is-lit {
  background: var(--np-accent);
  border-color: var(--np-accent);
}

/* ---------- Micro-motion -------------------------------------------------
   The leaders surveyed carry between twenty and a hundred hover transitions
   each (airwallex 142, nium 21, dlocal 19) built on transforms rather than
   layout. These are ours: a station's node grows a little, a row lifts its
   own surface, and the cards lift only where the pinned sweep is not setting
   their transform from the scroll — inline transforms win over CSS, so the
   pinned windows would swallow it. All of it is transform and background, so
   nothing reflows and the pointer never has to chase a moving target. */
.np-infra-station:hover .np-infra-node,
.np-infra-station:focus-visible .np-infra-node {
  transform: scale(1.25);
}
.np-infra-station:hover .np-infra-node:not(.is-lit),
.np-infra-station:focus-visible .np-infra-node:not(.is-lit) {
  border-color: var(--np-ink-3);
}
.np-infra:not(.is-pinned) .np-window {
  transition: transform var(--np-t-hover, 200ms) var(--np-ease), box-shadow var(--np-t-hover, 200ms) var(--np-ease);
}
.np-role,
.np-layer-cell {
  transition: background-color var(--np-t-hover, 200ms) var(--np-ease);
}
@media (hover: hover) {
  .np-infra:not(.is-pinned) .np-window:hover {
    transform: translateY(-3px);
    box-shadow: var(--np-shadow-2);
  }
  .np-role:hover,
  .np-layer-cell:hover {
    background: var(--np-canvas-2);
  }
}
/* the windows */
.np-infra-stage {
  position: relative;
  display: grid;
  gap: 1rem;
}
.np-window {
  border: 1px solid var(--np-rule-2);
  border-radius: var(--np-r-md);
  background: var(--np-canvas);
  box-shadow: var(--np-shadow-2);
  overflow: hidden;
}
.np-window-prompt {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  padding: 0.85rem 1.1rem 0.2rem;
  font: 400 0.85rem/1.6 var(--np-mono);
  color: var(--np-ink);
}
.np-window-prompt::before {
  content: "›";
  margin-right: 0.45rem;
  color: var(--np-ink);
  font-weight: 600;
}
.np-window-caret {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  vertical-align: -0.15em;
  background: var(--np-ink);
  animation: np-caret 1.06s steps(1, end) infinite;
}
.np-window-lead {
  margin: 0;
  padding: 0.35rem 1.1rem 0.2rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--np-ink);
}
.np-window .np-rows {
  padding: 0.35rem 1.1rem 0.9rem;
}
/* The partner-layer line under each job. It was a dt/dd pair with a caption of
   its own; now it is one status line, and it sits inside the card's padding. */
.np-window-status {
  margin: 0;
  padding: 0 1.1rem 1rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--np-ink-3);
}
/* wide + motion: one window at a time, in a fixed stage */
@media (min-width: 1040px) {
  .np-infra.is-pinned .np-infra-grid {
    align-items: center;
  }
  .np-infra.is-pinned .np-infra-stage {
    min-height: 21rem;
  }
  .np-infra.is-pinned .np-window {
    position: absolute;
    inset: 0;
    margin: auto;
    height: fit-content;
    transform-origin: center center;
  }
  .np-infra.is-pinned .np-window[aria-hidden="true"] {
    pointer-events: none;
  }
}
.np-infra-hint {
  margin: 1.1rem 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .np-window-caret {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================================================
   Micro-motion budget
   --------------------------------------------------------------------------
   The corpus survey measured this as the felt difference between a finished
   page and a careful one: the leaders carry dozens to thousands of transition
   declarations and this page carried eleven. Everything below moves transform,
   background or colour on an element that already exists — never layout, never
   a size — and the whole block is inert under reduced motion.
   ========================================================================== */
.np-window,
.np-role,
.np-panel,
.np-quote,
.np-btn,
.np-chip,
.np-infra-station,
.np-infra-node,
.np-arrow,
.np-lane {
  transition:
    transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 140ms linear,
    border-color 140ms linear,
    color 140ms linear;
}
.np-btn { transition-duration: 160ms; }
.np-btn:hover { transform: translateY(-1px); }
.np-btn:hover .np-arrow { transform: translateX(3px); }
.np-window:hover,
.np-quote:hover { transform: translateY(-2px); box-shadow: var(--np-shadow-2); }
.np-role:hover,
.np-role:focus-within { background: var(--np-canvas-2); }
.np-infra-station:hover { color: var(--np-ink); }
.np-infra-node { transition-duration: 220ms; }
.np-chip:hover { background: var(--np-canvas-3); }
@media (prefers-reduced-motion: reduce) {
  .np-window,
  .np-role,
  .np-panel,
  .np-quote,
  .np-btn,
  .np-chip,
  .np-infra-station,
  .np-infra-node,
  .np-arrow,
  .np-lane {
    transition: none;
  }
  .np-btn:hover,
  .np-window:hover,
  .np-quote:hover { transform: none; }
  .np-btn:hover .np-arrow { transform: none; }
}

/* The document root is 15px, so the old 0.72rem micro-labels computed to
   10.8px and 0.78rem to 11.7px — under the 12px floor the art direction set,
   and under what a compliance chip should be set at. Nothing on the page is
   smaller than 12px now. */
.np-mono,
.mp-mono,
.np-chip,
.mp-hand-chiplet,
.np-window-status,
.mp-z-k,
.mp-z-rows li,
.mp-z-log span,
.mp-panel-bar,
.np-verbs li,
.mp-step-gate,
.mp-meta,
.np-quote-head,
.np-field span,
.np-legend-title,
.np-tsize-test {
  font-size: max(0.8rem, 1em);
}
/* Group headings that wore the eyebrow costume. Sentence case, reading size,
   the same sans as the prose: they are lists of links, not labels. */
.np-footer h3,
.np-footer-col h3 {
  font: 600 0.933rem/1.3 var(--np-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--np-ink);
}
/* The station bar: the number is data, the name is a name. */
.np-window-name {
  font: 500 0.933rem/1.3 var(--np-sans);
  letter-spacing: 0;
  color: var(--np-ink);
}

/* ---------- Ambient motion ------------------------------------------------
   The page should read as alive at rest, not only under the pointer. Attio's
   calm comes from a handful of purpose-named ambient loops; these are ours.
   Transform, opacity and stroke only — no layout, no reflow — and every one of
   them stops under prefers-reduced-motion. */
@keyframes np-grid-drift {
  from { background-position: center top; }
  to { background-position: calc(50% + 96px) 96px; }
}
.np-hero-field { animation: np-grid-drift 26s linear infinite; }

/* The hero signal keeps running: travel, hold, restart. */
@keyframes np-signal-loop {
  0% { transform: scaleX(0); }
  55% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.np-hero-run { animation: np-signal-loop 4.6s cubic-bezier(0.22, 0.61, 0.36, 1) 220ms infinite; }

/* The operating model's lanes keep carrying. */
@keyframes np-lane-loop {
  0% { transform: scaleX(0); }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
.np-lanes.is-in .np-lane-run {
  animation: np-lane-loop 7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--d, 0ms) infinite;
}

/* The infrastructure mesh keeps a signal travelling its own line. */
@keyframes np-mesh-loop {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: -1; }
}
.np-mesh.is-in .np-mesh-signal {
  transition: none;
  stroke-dasharray: 0.34 0.66;
  animation: np-mesh-loop 6s linear infinite;
}

/* The gate breathes: the one thing standing between a draft and a release. */
@keyframes np-gate-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.np-hero-gate,
.np-lane-node { animation: np-gate-breathe 3.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .np-hero-field,
  .np-hero-run,
  .np-lanes.is-in .np-lane-run,
  .np-mesh.is-in .np-mesh-signal,
  .np-hero-gate,
  .np-lane-node { animation: none; }
  .np-hero-run { transform: scaleX(1); }
  .np-lanes.is-in .np-lane-run { transform: scaleX(var(--run, 1)); }
  .np-mesh-signal { stroke-dashoffset: 0; stroke-dasharray: 1; }
  .np-hero-gate, .np-lane-node { opacity: 1; }
}