/* ==========================================================================
   Nextrail — landing page ("the simple page", F007, 2026-09-25)
   ---------------------------------------------------------------------------
   Language: the marketing site. Warm off-white canvas (#f6f7f9), Fraunces
   display, General Sans body, JetBrains Mono micro-labels, one restrained green
   accent, muted amber for the step that waits, hairline rules, tabular figures,
   light and dark.

   The page is short on purpose: six bands, one idea each. The craft rules that
   survived the cut:
   · Section numbers are monospace and sequential. No glyph dividers.
   · Bracketed annotations ([CTRL-04]) exist only where they resolve to a named
     entry in the footer register. A tag with no entry is decoration.
   · No cipher/base64 blocks, no paper texture, no particle artwork, no specimen
     labels, no emoji. Emergence imagery contradicts governed operations.
   · Motion is hand-rolled and transform-only: one scroll listener, one rAF, a
     canvas plate drawn from a real depth map, and a film that plays only while
     it is on screen. Everything settles; nothing loops for attention.
   · Every number is either from the live FX reference, from the running session,
     or labelled simulated.
   ========================================================================== */

/* The app-level `#app { overflow-x: hidden }` makes #app the scroll container,
   which is what stopped the header's `position: sticky` from ever engaging. The
   landing clips its own wide elements, so it does not need that container. */
body.is-landing #app {
  overflow-x: clip;
  overflow-y: visible;
}

/* An anchored section has to clear the header once the header sticks. The header
   is 65px at desktop but taller where its nav links wrap, so the offset comes
   from the measured header height when the landing has published one. */
.npl main > section[id] {
  scroll-margin-top: calc(var(--npl-header-live, var(--nx-header-h)) + 16px);
}

/* ---------- Tokens ------------------------------------------------------- */
.npl {
  --nx-bg: #f6f7f9;
  --nx-bg-2: #f0f2f5;
  --nx-surface: #ffffff;
  --nx-text: #0b0d12;
  --nx-muted: #3c4350;
  /* 4.7:1 on the canvas — the small mono annotations this token carries are AA. */
  --nx-faint: #666f7f;
  --nx-accent: #0f9d63;
  --nx-accent-soft: rgba(15, 157, 99, 0.1);
  --nx-accent-ink: #086b43;
  --nx-amber: #b4780a;
  --nx-amber-soft: rgba(180, 120, 10, 0.12);
  --nx-amber-ink: #8a5a04;
  --nx-line: #e6e9ee;
  --nx-line-2: #eef1f5;
  --nx-r-sm: 10px;
  --nx-r-md: 14px;
  --nx-r-lg: 16px;
  --nx-r-xl: 22px;
  --nx-shadow-m: 0 2px 6px rgba(11, 13, 18, 0.05), 0 18px 44px -22px rgba(11, 13, 18, 0.16);
  --nx-shadow-l: 0 3px 10px rgba(11, 13, 18, 0.05), 0 40px 80px -40px rgba(11, 13, 18, 0.24);

  --nx-shell: 1200px;
  --nx-header-h: 64px;

  /* The display and body stack moved to Inter in the 2026-10 redesign; home.css
     restates both tokens. Kept in step here so the two files cannot drift into
     a font nobody is loading. */
  --nx-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-cjk: "PingFang TC", "Hiragino Sans TC", "Noto Sans TC", "Microsoft JhengHei", var(--nx-body);
  --nx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nx-gutter: clamp(1.15rem, 4vw, 2.5rem);
  --nx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: relative;
  min-height: 100vh;
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: var(--nx-body);
  font-size: 16px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.npl-zh {
  --nx-body: var(--nx-cjk);
  --np-sans: var(--np-cjk, var(--nx-cjk));
  line-height: 1.75;
  /* Negative tracking is a Latin correction: at -0.02em Cantonese headings
     start to collide. The Chinese surface sets its own spacing to zero, and the
     display sizes get the CJK stack rather than the Latin one. */
  letter-spacing: 0;
}
.npl-zh h1,
.npl-zh h2,
.npl-zh h3,
.npl-zh h4,
.npl-zh .np-h1,
.npl-zh .np-h2,
.npl-zh .np-h3,
.npl-zh .np-lede,
.npl-zh .np-cont,
.npl-zh .mp-h2,
.npl-zh .mp-h3 {
  letter-spacing: 0;
  font-family: var(--np-cjk, var(--nx-cjk));
}

/* ---------- Base --------------------------------------------------------- */
.npl *,
.npl *::before,
.npl *::after {
  box-sizing: border-box;
}
.npl h1,
.npl h2,
.npl h3,
.npl p,
.npl dl,
.npl dd,
.npl dt,
.npl figure,
.npl figcaption,
.npl ul,
.npl ol,
.npl li {
  margin: 0;
}
/* Padding is reset at zero specificity, like the link reset below it. `.npl p`
   is (0,1,1) — a class and a type — so it outranked every class-only component
   rule and quietly flattened the inset inside eight of them: the pricing
   caption, the journey's scope list, its panel footers, its pill, its readout.
   `:where()` adds no specificity, so those rules land at (0,1,0) and a
   component's own padding wins on source order. The margin reset above keeps
   its (0,1,1): the page's vertical rhythm is tuned against it, and lifting that
   moves sixty boxes, which is a re-typesetting rather than a fix. */
.npl :where(h1, h2, h3, p, dl, dd, dt, figure, figcaption, ul, ol, li) {
  padding: 0;
}
.npl ul,
.npl ol {
  list-style: none;
}
/* Zero-specificity resets, so components below can set their own colour and
   background without fighting `.npl a` / `.npl button`. */
.npl :where(a) {
  color: inherit;
  text-decoration: none;
}
.npl :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.npl img {
  display: block;
  max-width: 100%;
}
.npl ::selection {
  background: var(--nx-accent-soft);
}
.npl :focus-visible {
  outline: 2px solid var(--nx-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.npl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.npl-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 0.65rem 1rem;
  background: var(--nx-surface);
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-sm);
}
.npl-skip:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Layout ------------------------------------------------------ */
.npl-shell {
  width: 100%;
  max-width: var(--nx-shell);
  margin-inline: auto;
  padding-inline: var(--nx-gutter);
}

.npl-section {
  padding-block: clamp(3.2rem, 6vw, 5.5rem);
}
.npl-section + .npl-section,
.npl-filmband + .npl-section {
  border-top: 1px solid var(--nx-line-2);
}

/* ---------- Type -------------------------------------------------------- */
.npl-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--nx-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.npl-no {
  color: var(--nx-text);
  font-weight: 500;
}
.npl-rule {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: var(--nx-line);
}
.npl-tag {
  font-family: var(--nx-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--nx-faint);
  white-space: nowrap;
}

.npl-h1 {
  font-family: var(--nx-display);
  font-weight: 600;
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.npl-h1-accent {
  display: block;
  color: var(--nx-text);
  font-style: italic;
  font-weight: 500;
}

.npl-h2 {
  font-family: var(--nx-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.npl-lede {
  margin-top: 1.15rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.15vw, 1.16rem);
  color: var(--nx-muted);
}

.npl-fine {
  font-family: var(--nx-mono);
  font-size: 0.73rem;
  line-height: 1.7;
  color: var(--nx-faint);
}

.npl-mini-label {
  font-family: var(--nx-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-faint);
}

.npl-num {
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
}

.npl-section-head {
  max-width: 62ch;
}
.npl-section-head .npl-h2 {
  margin-top: 1.5rem;
}

/* ---------- Buttons ----------------------------------------------------- */
.npl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.72rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.18s var(--nx-ease), border-color 0.18s var(--nx-ease),
    color 0.18s var(--nx-ease), transform 0.18s var(--nx-ease);
}
.npl-btn-primary {
  background: #0b7a4b;
  color: #ffffff;
  border-color: #0b7a4b;
}
.npl-btn-primary:hover {
  background: var(--nx-accent);
  border-color: var(--nx-text);
}
.npl-btn-ghost {
  background: transparent;
  color: var(--nx-text);
  border-color: var(--nx-line);
}
.npl-btn-ghost:hover {
  border-color: var(--nx-text);
}
.npl-btn-sm {
  min-height: 38px;
  padding: 0.5rem 0.95rem;
  font-size: 0.88rem;
}
.npl-btn:active {
  transform: translateY(1px);
}

/* ---------- Header ------------------------------------------------------ */
.npl-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--nx-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--nx-line-2);
}
.npl-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--nx-header-h);
}
.npl-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}
.npl-mark {
  flex: none;
}
.npl-mark-bg {
  fill: var(--nx-text);
}
.npl-mark-dot {
  fill: var(--nx-accent);
}
.npl-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.npl-brand-name {
  font-family: var(--nx-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.npl-brand-by {
  font-family: var(--nx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--nx-faint);
}
.npl-nav-links {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  font-size: 0.92rem;
}
.npl-nav-links a {
  color: var(--nx-muted);
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.16s var(--nx-ease), border-color 0.16s var(--nx-ease);
}
.npl-nav-links a:hover {
  color: var(--nx-text);
  border-bottom-color: var(--nx-accent);
}
.npl-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.npl-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--nx-mono);
  font-size: 0.72rem;
  color: var(--nx-faint);
}
.npl-lang button {
  padding: 0.3rem 0.1rem;
}
.npl-lang button[aria-pressed="true"] {
  color: var(--nx-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.npl-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--nx-line);
  color: var(--nx-muted);
}
.npl-theme:hover {
  color: var(--nx-text);
  border-color: var(--nx-text);
}
.npl-theme .npl-i-moon {
  display: none;
}

/* ---------- 00 · Hero --------------------------------------------------- */
.npl-hero {
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3rem, 6vw, 5.5rem);
}
.npl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.npl-hero-copy {
  max-width: 32rem;
}
.npl-hero-copy .npl-h1 {
  margin-top: 1.6rem;
}
.npl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2rem;
}
.npl-hero-selfserve {
  margin-top: 1.15rem;
  font-size: 0.98rem;
  color: var(--nx-muted);
}

/* The one command, above the fold: the way in is a line a developer can copy, so
   it sits under the hero's own action rather than three screens down. */
.npl-cmdrow {
  display: flex;
  align-items: center;
  gap: 0.6rem 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding: 0.7rem 0.75rem 0.7rem 0.95rem;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-sm);
  background: var(--nx-surface);
}
.npl-cmdrow-label {
  font-family: var(--nx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nx-text);
  white-space: nowrap;
}
.npl-cmdrow-code {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: var(--nx-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.npl-cmdrow-copy,
.npl-terminal-copy {
  margin-left: auto;
  min-height: 32px;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  font-family: var(--nx-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-muted);
  white-space: nowrap;
  transition: color 0.16s var(--nx-ease), border-color 0.16s var(--nx-ease);
}
.npl-cmdrow-copy:hover,
.npl-terminal-copy:hover {
  color: var(--nx-text);
  border-color: var(--nx-text);
}
[data-copied="1"] {
  color: var(--nx-text);
  border-color: var(--nx-accent);
}
.npl-trust {
  margin-top: 1.6rem;
  max-width: 58ch;
  font-family: var(--nx-mono);
  font-size: 0.69rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--nx-faint);
}

/* The hero plate: a photograph with its depth pass painted over it. The frame is
   the photograph's own ratio, and the canvas is absolutely positioned, so the
   layout is identical whether or not the drift is running. */
.npl-hero-plate {
  margin: 0;
  transform: translate3d(0, var(--npl-drift, 0px), 0);
  will-change: transform;
}
.npl-hero-plate-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--nx-r-xl);
  border: 1px solid var(--nx-line);
  background: var(--nx-surface);
  box-shadow: var(--nx-shadow-l);
  aspect-ratio: 3 / 2;
}
.npl-hero-plate-img,
.npl-hero-plate-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.npl-hero-plate-img {
  object-fit: cover;
}
.npl-hero-plate-canvas {
  opacity: 0;
  transition: opacity 0.5s var(--nx-ease);
}
.npl-hero-plate-canvas[data-ready="1"] {
  opacity: 1;
}
.npl-hero-plate-cap {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--nx-line);
}
.npl-hero-plate-no {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-text);
}
.npl-hero-plate-note {
  grid-column: 1 / -1;
  max-width: 56ch;
  font-family: var(--nx-mono);
  font-size: 0.7rem;
  line-height: 1.65;
  color: var(--nx-faint);
}

/* The caption is the page's own instrument: the brief that produced it, typed in,
   and what the work returned. The prompt is set large enough to read as the subject
   rather than as fine print, and the last line of the run stops where the product
   stops — at a person. */
.npl-brief {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--nx-line);
}
.npl-brief-row {
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
}
.npl-brief-key {
  font-family: var(--nx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-text);
  flex: none;
  padding-top: 0.15rem;
}
.npl-brief-text {
  font-family: var(--nx-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--nx-text);
}
.npl-brief-steps {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.npl-brief-steps li {
  position: relative;
  padding-left: 1.35rem;
  font-family: var(--nx-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--nx-faint);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.35s var(--nx-ease), transform 0.35s var(--nx-ease), color 0.35s var(--nx-ease);
}
.npl-brief-steps li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--nx-accent);
}
.npl-brief-steps li.is-in,
.npl-still .npl-brief-steps li {
  opacity: 1;
  transform: none;
  color: var(--nx-muted);
}
.npl-brief-steps li.is-sign::before {
  content: "◆";
  color: var(--nx-amber);
}
.npl-brief-steps li.is-sign.is-in {
  color: var(--nx-amber-ink);
}
.npl-hero-plate-pill {
  font-family: var(--nx-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-amber-ink);
  background: var(--nx-amber-soft);
  border-radius: 999px;
  padding: 0.28rem 0.6rem;
}

/* ---------- The film ---------------------------------------------------- */
.npl-filmband {
  padding-block: clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}
.npl-artefact-film {
  margin: 0;
}
.npl-artefact-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--nx-bg-2);
  border-radius: var(--nx-r-xl);
  border: 1px solid var(--nx-line);
  box-shadow: var(--nx-shadow-m);
}
.npl-artefact-film-cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--nx-line);
  font-family: var(--nx-mono);
  font-size: 0.72rem;
  color: var(--nx-faint);
}
.npl-film-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-accent);
  flex: none;
}
.npl-artefact-film-text {
  flex: 1 1 22ch;
  color: var(--nx-muted);
}
.npl-artefact-film-run {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.npl-artefact-film-clock {
  font-variant-numeric: tabular-nums;
}
.npl-artefact-film-toggle {
  min-height: 32px;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--nx-line);
  border-radius: 999px;
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.npl-artefact-film-toggle:hover {
  color: var(--nx-text);
  border-color: var(--nx-text);
}
.npl-film-note {
  margin-top: 1.4rem;
  max-width: 88ch;
}

/* ---------- 01 · Architecture ------------------------------------------ */
.npl-arch {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  transform: translate3d(0, var(--npl-drift, 0px), 0);
}
.npl-arch-nodes {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
}
.npl-arch-nodes > li {
  border-right: 1px solid var(--nx-line-2);
}
.npl-arch-nodes > li:last-child {
  border-right: 0;
}
.npl-arch-node {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 1.1rem 0.9rem 1.2rem;
  text-align: left;
  transition: background-color 0.18s var(--nx-ease);
}
.npl-arch-node:hover,
.npl-arch-node[aria-pressed="true"] {
  background: var(--nx-surface);
}
.npl-arch-no {
  font-family: var(--nx-mono);
  font-size: 0.65rem;
  color: var(--nx-faint);
}
.npl-arch-node[aria-pressed="true"] .npl-arch-no {
  color: var(--nx-text);
}
.npl-arch-name {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.npl-arch-state {
  font-family: var(--nx-mono);
  font-size: 0.62rem;
  color: var(--nx-faint);
  text-transform: lowercase;
}
.npl-arch-node.is-passed .npl-arch-name::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 0.45rem;
  border-radius: 50%;
  background: var(--nx-accent-soft);
}
.npl-arch-track {
  position: relative;
  height: 34px;
  margin-top: 1.4rem;
  border-top: 1px solid var(--nx-line);
}
.npl-arch-fill {
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  background: var(--nx-accent);
  transition: width 0.2s linear;
}
.npl-arch-dot {
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-accent);
  transform: translateX(-50%);
  transition: left 0.2s linear;
}
.npl-arch-stop {
  position: absolute;
  right: 0;
  top: 0.5rem;
  font-family: var(--nx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-amber-ink);
}
.npl-arch-detail {
  margin-top: 1.2rem;
}
.npl-arch-panel {
  display: none;
  padding-left: 1rem;
  border-left: 2px solid var(--nx-line);
}
.npl-arch-panel.is-shown {
  display: block;
}
.npl-arch-panel.is-human {
  border-left-color: var(--nx-amber);
}
.npl-arch-panel-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--nx-display);
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.npl-arch-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.6rem;
  margin-top: 0.7rem;
  max-width: 70ch;
  font-size: 0.96rem;
  color: var(--nx-muted);
}
.npl-arch-facts li {
  padding-left: 1rem;
  position: relative;
}
.npl-arch-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--nx-faint);
}

.npl-boundary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--nx-line);
  border-left: 2px solid var(--nx-amber);
  border-radius: var(--nx-r-sm);
  background: var(--nx-surface);
  font-size: 0.92rem;
  color: var(--nx-muted);
}
.npl-boundary code {
  font-family: var(--nx-mono);
  font-size: 0.76rem;
  color: var(--nx-amber-ink);
}

.npl-arch-lower {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.npl-plate {
  margin: 0;
  transform: translate3d(0, var(--npl-drift, 0px), 0);
}
.npl-plate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--nx-line);
}
.npl-plate-readout {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  color: var(--nx-faint);
}
.npl-canvas {
  position: relative;
  border-radius: var(--nx-r-md);
  overflow: hidden;
  background: var(--nx-surface);
}
.npl-canvas > canvas {
  display: block;
  width: 100%;
}
.npl-canvas.is-plate {
  aspect-ratio: 3 / 2;
  margin-top: 1rem;
  border: 1px solid var(--nx-line);
}
.npl-canvas.is-plate > canvas {
  height: 100%;
}
.npl-plate figcaption {
  margin-top: 0.9rem;
  max-width: 60ch;
}

.npl-record {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-md);
  background: var(--nx-surface);
}
.npl-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.4rem;
  margin-top: 1rem;
}
.npl-record-grid dt {
  font-family: var(--nx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.npl-record-grid dd {
  margin-top: 0.3rem;
  font-size: 0.95rem;
}
.npl-record-grid dd code {
  font-family: var(--nx-mono);
  font-size: 0.8rem;
}
.npl-record .npl-fine {
  margin-top: 1.1rem;
}

/* ---------- 02 · Agents & MCP ------------------------------------------ */
.npl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
}
.npl-grid-wide {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.npl-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-lg);
  background: var(--nx-surface);
  overflow: hidden;
}
.npl-card-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--nx-line-2);
}
.npl-card-title {
  font-family: var(--nx-display);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.npl-card-note {
  margin-left: auto;
  font-family: var(--nx-mono);
  font-size: 0.66rem;
  color: var(--nx-faint);
}
.npl-card-body {
  padding: 1rem 1.4rem 1.2rem;
  align-content: start;
}
.npl-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--nx-line-2);
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  color: var(--nx-faint);
}
.npl-inline-link {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  color: var(--nx-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.npl-tools {
  display: flex;
  flex-direction: column;
}
.npl-tool {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 3.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--nx-line-2);
}
.npl-tool:last-child {
  border-bottom: 0;
}
.npl-tool.is-loading {
  display: block;
  font-family: var(--nx-mono);
  font-size: 0.72rem;
  color: var(--nx-faint);
}
.npl-tool-name {
  font-family: var(--nx-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.npl-tool-tag {
  font-family: var(--nx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-text);
  background: var(--nx-accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  text-align: center;
}
.npl-tool-tag.is-write {
  color: var(--nx-amber-ink);
  background: var(--nx-amber-soft);
}
.npl-tool-body {
  font-size: 0.88rem;
  color: var(--nx-muted);
}

.npl-card-body .npl-mini-label {
  margin-top: 1.4rem;
}
.npl-verbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.npl-verbs li code {
  font-family: var(--nx-mono);
  font-size: 0.72rem;
  color: var(--nx-muted);
  border: 1px dashed var(--nx-line);
  border-radius: var(--nx-r-sm);
  padding: 0.25rem 0.55rem;
  text-decoration: line-through;
  text-decoration-color: var(--nx-amber);
}
.npl-endpoint {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.7rem;
}
.npl-endpoint code {
  font-family: var(--nx-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.npl-endpoint span {
  font-family: var(--nx-mono);
  font-size: 0.64rem;
  color: var(--nx-faint);
}

.npl-auth {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.npl-auth li {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.8rem;
  align-items: baseline;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--nx-line-2);
  font-size: 0.9rem;
  color: var(--nx-muted);
}
.npl-auth li code {
  font-family: var(--nx-mono);
  font-size: 0.76rem;
  color: var(--nx-text);
}
.npl-auth li.is-none code {
  color: var(--nx-amber-ink);
}
.npl-auth li.is-none span {
  color: var(--nx-faint);
}
.npl-auth-refusal {
  margin-top: 1.1rem;
  font-family: var(--nx-mono);
  font-size: 0.74rem;
  color: var(--nx-amber-ink);
  background: var(--nx-amber-soft);
  border-radius: var(--nx-r-sm);
  padding: 0.6rem 0.8rem;
}
.npl-auth + .npl-fine,
.npl-auth-refusal + .npl-fine {
  margin-top: 1rem;
}

.npl-partners {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--nx-line);
}
.npl-partners-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 0.9rem;
  font-size: 0.95rem;
  color: var(--nx-muted);
}
.npl-partners-list li {
  position: relative;
  padding-left: 1rem;
}
.npl-partners-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px;
  height: 1px;
  background: var(--nx-faint);
}
.npl-partners .npl-fine {
  margin-top: 1rem;
  max-width: 78ch;
}

/* ---------- The terminal: the command, and what it answers -------------
   The one dark surface on the page, in the register of the Code-Morph study: a
   panel that assembles itself, ink behind glass, the page's own green and amber
   for the two facts that matter (connected, refused). */
.npl-terminal {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  border: 1px solid #1b212c;
  border-radius: var(--nx-r-md);
  background: #0b0d12;
  color: #e8ecf1;
  overflow: hidden;
}
.npl-terminal-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.npl-terminal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-accent);
  flex: none;
}
.npl-terminal-title {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8d97a8;
}
.npl-terminal-body {
  margin: 0;
  padding: 1.1rem 1.2rem 1.2rem;
  font-family: var(--nx-mono);
  font-size: 0.8rem;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #e8ecf1;
}
.npl-tline {
  display: block;
  opacity: 0;
  transition: opacity 0.3s var(--nx-ease), transform 0.3s var(--nx-ease);
  transform: translateY(3px);
}
.npl-tline.is-in,
.npl-still .npl-tline {
  opacity: 1;
  transform: none;
}
.npl-tline.is-prompt::before {
  content: "$ ";
  color: #4ed6a0;
}
.npl-tline.is-out {
  color: #9aa4b5;
  padding-left: 1.1rem;
}
.npl-tline.is-deny {
  color: #f0b357;
  padding-left: 1.1rem;
}
.npl-terminal-foot {
  padding: 0 1.2rem 1.1rem;
  color: #7d8799;
}
.npl-terminal .npl-terminal-copy {
  border-color: rgba(255, 255, 255, 0.2);
  color: #b9c2d0;
}
.npl-terminal .npl-terminal-copy:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.npl-terminal .npl-terminal-copy[data-copied="1"] {
  color: #4ed6a0;
  border-color: #2ec38a;
}

/* ---------- The six stations, walked on request ------------------------ */
.npl-arch-run-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.npl-arch-run-row .npl-fine {
  max-width: 52ch;
}

/* ---------- 03 · The one rate table ------------------------------------ */
.npl-table-wrap {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  overflow-x: auto;
  border-top: 1px solid var(--nx-line);
  border-bottom: 1px solid var(--nx-line);
}
.npl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.npl-table th,
.npl-table td {
  padding: 0.95rem 0.9rem;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--nx-line-2);
}
.npl-table thead th {
  font-family: var(--nx-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--nx-faint);
  white-space: nowrap;
}
.npl-table tbody tr:last-child th,
.npl-table tbody tr:last-child td {
  border-bottom: 0;
}
.npl-table.is-rates th[scope="row"] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 500;
}
.npl-rate-pair {
  font-family: var(--nx-mono);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.npl-rate-lead {
  font-family: var(--nx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-text);
  background: var(--nx-accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
}
.npl-rate-value {
  font-size: 1.22rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.npl-rate-age {
  color: var(--nx-faint);
}
.npl-rate-row.is-lead {
  background: color-mix(in srgb, var(--nx-accent-soft) 55%, transparent);
}
.npl-rate-row.is-lead th[scope="row"] {
  box-shadow: inset 2px 0 0 var(--nx-accent);
}
.npl-rate-row.is-lead .npl-rate-value {
  font-size: 1.5rem;
}
.npl-rates-foot {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 1.3rem;
  max-width: 88ch;
}

/* ---------- Status pills ------------------------------------------------ */
.npl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--nx-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  color: var(--nx-muted);
  background: var(--nx-bg-2);
  white-space: nowrap;
}
.npl-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.npl-pill.is-live {
  color: var(--nx-text);
  background: var(--nx-accent-soft);
}

/* ---------- 04 · Close --------------------------------------------------- */
.npl-close {
  text-align: left;
}

/* A depth strip: a shallow band of the series that drifts on its own depth map.
   Same module as the hero plate, less height, so it can sit inside a band. */
.npl-depthstrip {
  margin: clamp(1.8rem, 3.5vw, 2.6rem) 0 0;
  transform: translate3d(0, var(--npl-drift, 0px), 0);
}
.npl-close .npl-depthstrip {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.npl-depthstrip-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3.1 / 1;
  border: 1px solid var(--nx-line);
  border-radius: var(--nx-r-xl);
  background: var(--nx-surface);
}
.npl-depthstrip.is-wide .npl-depthstrip-frame {
  aspect-ratio: 2.7 / 1;
}
.npl-depthstrip-frame img,
.npl-depthstrip-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.npl-depthstrip-frame img {
  object-fit: cover;
  object-position: center 52%;
}
.npl-depthstrip-canvas {
  opacity: 0;
  transition: opacity 0.5s var(--nx-ease);
}
.npl-depthstrip-canvas[data-ready="1"] {
  opacity: 1;
}
.npl-depthstrip figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: 0.9rem;
}
.npl-depthstrip-title {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.npl-close-line {
  margin-top: 1.6rem;
  font-family: var(--nx-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.028em;
}
.npl-close-sub {
  margin-top: 1.2rem;
  max-width: 46ch;
  font-size: 1rem;
  color: var(--nx-muted);
}

/* ---------- Footer ------------------------------------------------------ */
.npl-footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  border-top: 1px solid var(--nx-line);
  background: var(--nx-bg-2);
}
.npl-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.5rem);
}
.npl-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.npl-footer-name {
  font-family: var(--nx-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.npl-footer-line {
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--nx-faint);
  max-width: 40ch;
}
.npl-footer-head {
  font-family: var(--nx-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.npl-footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--nx-muted);
}
.npl-footer-links a:hover,
.npl-footer-links button:hover {
  color: var(--nx-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.npl-register-foot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--nx-line);
}
.npl-register-foot h3 {
  font-family: var(--nx-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nx-faint);
}
.npl-register-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
  margin-top: 1rem;
  font-size: 0.86rem;
  color: var(--nx-muted);
}
.npl-register-list li {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: 0.8rem;
}
.npl-register-list span {
  font-family: var(--nx-mono);
  font-size: 0.7rem;
  color: var(--nx-faint);
}
.npl-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-top: 2.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--nx-line);
  font-family: var(--nx-mono);
  font-size: 0.68rem;
  color: var(--nx-faint);
}

/* ---------- Scroll rail ------------------------------------------------- */
.npl-ruler {
  position: fixed;
  top: 50%;
  right: 14px;
  z-index: 30;
  width: 2px;
  height: 96px;
  transform: translateY(-50%);
  background: var(--nx-line);
  border-radius: 2px;
}
.npl-ruler-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--nx-accent);
  border-radius: 2px;
}
.npl-ruler-marker {
  position: absolute;
  left: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nx-accent);
  transform: translateY(-3px);
}
.npl-ruler-label {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--nx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nx-faint);
  white-space: nowrap;
}

/* ---------- Reveal / motion -------------------------------------------- */
.npl-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.6s var(--nx-ease), transform 0.6s var(--nx-ease);
}
.npl-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* An element can carry both a reveal and a drift; the drift wins once it is in,
   because the transform is rewritten every frame by the page's single loop. */
.npl-hero-plate.is-in,
.npl-plate.is-in,
.npl-depthstrip.is-in,
.npl-arch.is-in {
  transform: translate3d(0, var(--npl-drift, 0px), 0);
}

.npl-still .npl-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.npl-still .npl-hero-plate-canvas {
  display: none;
}
.npl-still .npl-depthstrip-canvas {
  display: none;
}

/* The same switch is published on <html> as `data-npl-motion="off"` — the marker the
   F003/F004 probes read — so the CSS gates motion on the document as well as on the
   landing root. Either one alone is enough; together they survive a class that has
   not landed yet. */
html[data-npl-motion="off"] .npl-hero-plate-canvas {
  display: none;
}
html[data-npl-motion="off"] .npl-depthstrip-canvas {
  display: none;
}
html[data-npl-motion="off"] .npl-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Dark theme -------------------------------------------------- */
.npl[data-theme="dark"] {
  --nx-bg: #0a0c11;
  --nx-bg-2: #0d1016;
  --nx-surface: #12151c;
  --nx-text: #f2f4f7;
  --nx-muted: #a2abba;
  --nx-faint: #7d8799;
  --nx-accent: #2ec38a;
  --nx-accent-soft: rgba(46, 195, 138, 0.12);
  --nx-accent-ink: #7ee2b8;
  --nx-amber: #e8a95c;
  --nx-amber-soft: rgba(232, 169, 92, 0.14);
  --nx-amber-ink: #f0b357;
  --nx-line: #232936;
  --nx-line-2: #1b2029;
}
.npl[data-theme="dark"] .npl-mark-bg {
  fill: var(--nx-text);
}
.npl[data-theme="dark"] .npl-header {
  background: color-mix(in srgb, var(--nx-bg) 82%, transparent);
}
.npl[data-theme="dark"] .npl-btn-primary {
  background: var(--nx-accent);
  border-color: var(--nx-accent);
  color: #06180f;
}
.npl[data-theme="dark"] .npl-btn-primary:hover {
  background: var(--nx-accent);
  border-color: var(--nx-text);
}
.npl[data-theme="dark"] .npl-hero-plate-frame,
.npl[data-theme="dark"] .npl-artefact-video {
  border-color: var(--nx-line);
}
.npl[data-theme="dark"] .npl-theme .npl-i-sun {
  display: none;
}
.npl[data-theme="dark"] .npl-theme .npl-i-moon {
  display: block;
}

/* ---------- Narrow screens --------------------------------------------- */
@media (max-width: 1039px) {
  /* Touch widths: every control on the visitor path gets a real 44px target,
     including the ones that are text on the desktop layout. */
  .npl-nav-links a,
  .npl-lang button,
  .npl-brand,
  .npl-footer-links a,
  .npl-footer-links button,
  .npl-artefact-film-toggle,
  .npl-inline-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .npl-theme {
    width: 44px;
    height: 44px;
  }
  .npl-btn-sm {
    min-height: 44px;
  }
  .npl-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .npl-hero-copy {
    max-width: 44rem;
  }
  .npl-arch-lower {
    grid-template-columns: minmax(0, 1fr);
  }
  .npl-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .npl-nav-links {
    order: 3;
    width: 100%;
    gap: 1.1rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: none;
  }
  .npl-nav-links::-webkit-scrollbar {
    display: none;
  }
  .npl-nav-links a {
    white-space: nowrap;
  }
  .npl-header-inner {
    flex-wrap: wrap;
    padding-block: 0.6rem;
  }
  .npl-header-actions {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  .npl-arch-nodes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .npl-arch-nodes > li {
    border-bottom: 1px solid var(--nx-line-2);
  }
  .npl-arch-nodes > li:nth-child(2n) {
    border-right: 0;
  }
  .npl-arch-facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .npl-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .npl-tool {
    grid-template-columns: minmax(0, 1fr) 3.4rem;
  }
  .npl-tool-body {
    grid-column: 1 / -1;
  }
  .npl-register-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .npl-ruler {
    display: none;
  }
}

@media (max-width: 560px) {
  .npl-brand-by {
    display: none;
  }
  .npl-header-signin {
    display: none;
  }
  .npl-table th,
  .npl-table td {
    padding: 0.8rem 0.55rem;
  }
  .npl-rate-value {
    font-size: 1.1rem;
  }
  .npl-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .npl-hero-plate-frame {
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .npl *,
  .npl *::before,
  .npl *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .npl-reveal {
    opacity: 1;
    transform: none;
  }
  .npl-hero-plate-canvas {
    display: none;
  }
  .npl-depthstrip-canvas {
    display: none;
  }
}