/* System website sub-pages (src/pages/system-page.njk → sections/nx/sys/page-*.njk): the doc head
   additions, the module page (hero, records strip, inventory, role cards, circuit minis, spine,
   CTA row), the process page (swimlane and evidence rail, stage sections, exception rows,
   handoffs), the industry head, the reference pages (rule cards, kind cards, agent head, doors)
   and pricing's included rows. Loaded after sys/plates.css on nx-system pages; every selector is
   scoped under .nx. White plates on paper, 1px --line borders, 12px radius. Signal red only on:
   the swimlane's gate diamonds and pulse, the stage eyebrow of a gate stage, the exception tag. */

/* -- Section rhythm: every pad section under the anchorbar opens with the same air */
.nx.nx-sys section.pad:not(.doc-head):not(.doc-next):not(.sys-sec):not(.doc-rows):not(.doc-cta) {
  padding-top: 44px;
}
.nx.nx-sys section.doc-rows.pad {
  padding-top: 4px;
}
.nx.nx-sys section.doc-cta.pad {
  padding-top: 40px;
}
/* -- Page foot: one two-column row, the CTA box left and previous/next stacked right (doc-next.njk) */
.nx.nx-sys .doc-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 56px;
}
.nx.nx-sys .doc-next .doc-foot-cta {
  display: grid;
  gap: 14px;
}
.nx.nx-sys .doc-next .doc-foot-cta .rev {
  margin: 0;
}
.nx.nx-sys .doc-next .doc-foot-nav {
  display: grid;
  gap: 12px;
  align-content: start;
}
.nx.nx-sys .doc-next .doc-foot-nav a {
  min-width: 0;
  text-align: left;
}
.nx.nx-sys .doc-next .doc-foot-nav a.next {
  text-align: left;
}
@media (max-width: 900px) {
  .nx.nx-sys .doc-next {
    grid-template-columns: minmax(0, 1fr);
  }
}
.nx.nx-sys .doc-cta .doc-aside {
  position: static;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  gap: 20px;
}
.nx.nx-sys .doc-rows + .doc-next,
.nx.nx-sys .doc-cta + .doc-next {
  padding-top: 24px;
}
.nx.nx-sys .doc.pad {
  padding-top: 40px;
}

/* -- Doc head additions: breadcrumb, folio, shape line, counts, head CTA */
.nx .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.nx .crumbs a {
  color: var(--ink-2);
}
.nx .crumbs a:hover {
  color: var(--ink);
}
.nx .crumbs i {
  font-style: normal;
  color: var(--ink-3);
}
.nx .crumbs [aria-current] {
  color: var(--ink);
}
.nx .doc-head .folio {
  display: inline-block;
}
.nx .doc-head .doc-shape,
.nx .doc-head .counts {
  margin: 14px 0 0;
  color: var(--ink-3);
}
.nx .doc-head .cta {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nx .sec-lead {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46em;
}
.nx .sec-note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46em;
}
.nx .sec-note a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nx .sec-note a:hover {
  border-color: var(--ink);
}
.nx p.cta {
  margin: 18px 0 0;
}

/* -- Module page: hero window (full container width, level with the anchorbar), records strip, capability inventory */
.nx .doc-hero .win {
  max-width: none;
}
.nx .records-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.nx .records-strip > .k {
  color: var(--ink-3);
}
.nx .records-strip .recs {
  margin: 0;
}
.nx .recs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.nx .chip.mono {
  font: 12px var(--mono);
}
.nx a.chip {
  text-decoration: none;
}
.nx a.chip:hover {
  border-color: var(--ink);
}
.nx .inventory {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 28px;
  font-size: 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.nx .inventory dt {
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}
.nx .inventory dd {
  margin: 0;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .inventory dd.mono {
  font: 12.5px var(--mono);
}
.nx .inventory dd a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nx .inventory dd a:hover {
  border-color: var(--ink);
}
.nx .inventory dd .k-data {
  color: #2b4bb5;
}
.nx .inventory dd .k-proc {
  color: #1d6b3a;
}
.nx .inventory dd .k-ctrl {
  color: #9e1b1b;
}
.nx .inventory dd .k-plan {
  color: #8a5a00;
}
.nx .inventory dd .k-conn {
  color: #5b3fb0;
}

/* -- Role cards on module, roles, industry and agent pages */
.nx .role-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx a.role-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.nx a.role-card:hover {
  border-color: var(--ink);
}
.nx .role-card > .k {
  display: block;
  margin: 6px 0 0;
  color: var(--ink-3);
}
.nx .role-card .role-tables {
  margin: 12px 0 0;
}
.nx .role-card .role-tables .chip {
  font-size: 11px;
}
.nx .role-card .acts-as {
  margin: 10px 0 0;
  color: var(--ink-3);
}
.nx .role-card .acts-as a {
  color: var(--ink);
}
.nx .role-card .waits {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  font: 11.5px var(--mono);
  color: var(--ink-2);
}
.nx .role-cards .role-views {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-width: none;
}

/* -- Circuit minis: process cards with the stage circuit */
.nx .cmini-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx .cmini {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 0;
}
/* the mini circuit scrolls inside its own wrapper on phones; the wrapper's fade says there is more to the right */
.nx .cmini .circuit-fade {
  position: relative;
}
.nx .cmini .circuit-scroll {
  overflow-x: auto;
}
.nx .sys-plate.cmini {
  padding: 20px 22px 14px;
}
.nx .cmini-head {
  display: block;
  margin-bottom: 8px;
  color: inherit;
  text-decoration: none;
}
.nx .cmini-head b {
  display: block;
  font: 650 17px var(--display);
  letter-spacing: -0.01em;
}
.nx .cmini-head:hover b {
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
}
.nx .cmini-head span {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
  margin-top: 2px;
}
.nx .cmini .circuit {
  width: 100%;
  height: auto;
  display: block;
}
.nx .cmini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.nx .cmini-chips i {
  font: 10.5px var(--mono);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--ink-2);
}
.nx .cmini-chips i b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 4px;
}
.nx .cmini .circuit .lbl {
  font-size: 11.5px;
}
.nx .cmini .circuit .lbl2,
.nx .cmini .circuit .callout {
  font-size: 10px;
}
.nx .circuit .node.lit {
  fill: var(--ink);
  animation: none;
}
.nx .circuit .lbl.on {
  fill: var(--ink);
}
.nx .circuit .lbl a {
  fill: inherit;
}
.nx .circuit a:hover .lbl,
.nx .circuit .lbl a:hover {
  text-decoration: underline;
}

/* -- Spine: the current module and the pricing tick */
.nx .spine-card.on {
  border-color: var(--pi);
}
.nx .spine-card .tick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 18px 0;
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pi);
}
.nx .spine-card .tick + .phead {
  padding-top: 8px;
}

/* -- Process page: swimlane and the evidence rail */
.nx .swim {
  margin-top: 18px;
  padding: 14px 14px 12px;
  --pc: var(--identity-surface, var(--catalog-palette-slate-base));
  --pi: var(--identity-ink, var(--catalog-palette-slate-ink));
}
.nx .swim-scroll {
  overflow-x: auto;
}
.nx .swimlane {
  min-width: 1100px;
  width: 100%;
  height: auto;
  display: block;
}
.nx .swimlane .lane rect {
  fill: color-mix(in srgb, var(--pc) 30%, #fff);
}
.nx .swimlane .lane.alt rect {
  fill: #fff;
}
.nx .swimlane .lane-lbl {
  font: 11px var(--mono);
  fill: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nx .swimlane .stage rect {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.2;
}
.nx .swimlane .stage a:hover rect {
  stroke-width: 2;
}
.nx .swimlane .stage text {
  font: 600 12.5px var(--body);
  fill: var(--ink);
}
.nx .swimlane .stage .sub {
  font: 400 10px var(--mono);
  fill: var(--ink-3);
}
.nx .swimlane .stage .diamond {
  fill: var(--red);
  stroke: none;
}
.nx .swimlane .path {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}
.nx .swimlane .pulse {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 60 2600;
  stroke-dashoffset: 2660;
  filter: drop-shadow(0 0 4px rgb(200 16 46 / 70%));
  animation: sys-swim 9s linear infinite;
}
@keyframes sys-swim {
  to {
    stroke-dashoffset: 0;
  }
}
.nx .swimlane .handoff {
  stroke: var(--ink-2);
  fill: none;
  stroke-width: 1.2;
}
.nx .swimlane .handoff-dot {
  fill: var(--ink-2);
}
.nx .swimlane .handoff-lbl {
  font: 10px var(--mono);
  fill: var(--ink-2);
}
.nx .swim-rail {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 14px 0 0;
  padding: 4px 0 6px;
  overflow-x: auto;
}
.nx .swim-rail li {
  flex: none;
  width: 200px;
  opacity: 0.6;
  display: grid;
  gap: 6px;
  align-content: start;
}
.nx .swim-rail li.on {
  opacity: 1;
}
.nx .swim-rail li > .k {
  color: var(--ink-3);
}
.nx .swim > .lead {
  margin-top: 4px;
}

/* -- Stage by stage */
.nx .stage-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 40px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  scroll-margin-top: 104px;
}
.nx .stage-sec:first-of-type {
  border-top: 0;
  padding-top: 8px;
}
.nx .stage-copy {
  min-width: 0;
}
.nx .stage-copy > .k {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
}
.nx .stage-sec.gate .stage-copy > .k {
  color: var(--red);
}
.nx .stage-copy h2 {
  margin-top: 10px;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.nx .stage-copy > p {
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.55;
  max-width: 36em;
}
.nx .stage-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  margin: 16px 0 0;
  font-size: 14px;
  align-items: center;
}
.nx .stage-meta dt {
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nx .stage-meta dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.nx .stage-meta code {
  font: 11.5px var(--mono);
  background: #f1f0ec;
  padding: 1px 5px;
  border-radius: 3px;
}
.nx .stage-plate {
  min-width: 0;
}
.nx .stage-plate .win {
  max-width: 620px;
  margin-left: auto;
}

/* -- Gates strip additions, exception rows, handoff pairs */
.nx .gates li b a {
  color: inherit;
}
.nx .gates li b a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
}
.nx .gates li:last-child {
  border-bottom: 0;
}
.nx .exc {
  margin-top: 18px;
  padding: 8px 20px;
}
.nx .exc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.nx .exc li {
  break-inside: avoid;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.nx .exc .tag {
  font: 10.5px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.nx .exc li:first-child .tag {
  color: var(--red);
}
.nx .exc b {
  font: 600 16px var(--display);
  letter-spacing: -0.01em;
}
.nx .exc p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .handoffs {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
}
.nx .chain-grid.two .chain-src .mini {
  max-width: 280px;
}
.nx .handoffs .chain-grid.two {
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  margin-top: 0;
  align-items: center;
}
.nx .chain-dst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  min-width: 0;
}
.nx .chain-dst::before {
  content: 'created record';
  font: 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.nx .chain-dst.has-mini {
  padding: 12px;
}
.nx .chain-dst .mini {
  width: 100%;
}
.nx .chain-grid > .lead {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
  display: grid;
  gap: 2px;
}
.nx .chain-grid > .lead em {
  font: 11px var(--mono);
  color: var(--ink-3);
}

/* -- Industry head: the tinted photo band with the card over it */
.nx .ind-head {
  position: relative;
  --pc: var(--identity-surface, var(--catalog-palette-slate-base));
  --pi: var(--identity-ink, var(--catalog-palette-slate-ink));
  background: var(--pc);
  padding-bottom: 36px;
}
.nx .ind-photo {
  height: 320px;
  overflow: hidden;
  position: relative;
}
.nx .ind-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9) contrast(1.05);
}
.nx .ind-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--pc);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.nx .ind-head .ind-card.doc-head {
  position: relative;
  z-index: 1;
  margin-top: -130px;
  width: auto;
  max-width: 980px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 36px 28px;
}
.nx .ind-head .ind-card .fit {
  margin-top: 20px;
  padding-bottom: 0;
  min-height: 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.nx .ind-head .ind-card .fit + .fit {
  margin-top: 0;
  padding-top: 10px;
  border-top: 0;
}
.nx .ind-head .ind-card .fit > .k {
  color: var(--ink-3);
  opacity: 1;
}
.nx .ind-head .fit-modes a,
.nx .ind-head .fit-modes span.on {
  display: inline-block;
  height: 32px;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
.nx .ind-head .fit-modes a:hover {
  border-color: var(--ink);
}
.nx .ind-head .fit-modes span.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nx .diff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx .spec-card.diff > b {
  display: block;
}
.nx .ind-screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}
.nx .ind-screens .win {
  font-size: 12px;
}
.nx .ind-card-sib {
  width: auto;
}
.nx .ind-card-sib > a {
  display: block;
  color: inherit;
  padding-bottom: 16px;
}
.nx .ind-card-sib .phead {
  min-height: 0;
}
.nx .ind-card-sib.on {
  border-color: var(--pi);
}

/* -- Reference pages: rule cards, kind cards, two cards, the thin band, agent head */
.nx .rule-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.nx .spec-card.rule .icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  color: var(--ink);
}
.nx .spec-card.rule .icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nx .spec-card.rule > b {
  display: block;
}
.nx .kind-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx .spec-card.kind > b {
  display: block;
}
.nx .spec-card.kind .recs {
  margin-top: 12px;
}
.nx .doc-body.tables {
  max-width: none;
}
.nx .doc-body.tables > p {
  max-width: 58em;
}
.nx .two-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
  align-items: start;
}
.nx .two-cards .spec-card > b,
.nx .two-cards .spec-card .vh b {
  font-size: 20px;
}
.nx .two-cards .spec-card > b {
  display: block;
  margin-bottom: 8px;
}
.nx .two-cards .spec-card p,
.nx .two-cards .spec-card li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .two-cards .spec-card > p:first-of-type {
  margin-top: 8px;
}
.nx .two-cards .spec-card ul,
.nx .two-cards .spec-card ol {
  margin: 10px 0 0;
  padding-left: 20px;
}
.nx .two-cards .spec-card .recs {
  margin-top: 12px;
}
.nx .two-cards .spec-card .small {
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 12px;
}
.nx .two-cards .steps3 {
  margin-top: 16px;
}
.nx .spec-card .glyph-wrap {
  color: var(--ink-3);
  display: inline-flex;
}
.nx .spec-card .glyph-wrap .glyph {
  width: 18px;
  height: 18px;
}
.nx .glyph {
  width: 12px;
  height: 12px;
  flex: none;
}
.nx .inter.thin .in.pad > div > p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.55;
  max-width: 40em;
}
.nx .agent-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
}
.nx .agent-head-text {
  min-width: 0;
}
.nx .agent-head-text h2 {
  margin-top: 24px;
  font-size: 24px;
  letter-spacing: -0.02em;
}
.nx .agent-head-text p {
  margin: 12px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40em;
}
.nx .agent-head-text .sec-lead {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
}
.nx .agent-head-text .cta {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nx .agent-head .term {
  max-width: 900px;
}
.nx .doc-group .row-head {
  margin-top: 40px;
}
.nx .doc-group + .doc-group {
  margin-top: 24px;
}
.nx .doc-row .reads {
  margin: 10px 0 0;
  color: var(--ink-3);
}
.nx .doc-row .ends {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .doc-row .ends .k {
  color: var(--ink-3);
  margin-right: 6px;
}
.nx .doc-row-text > .k {
  color: var(--ink-3);
  display: block;
  margin-bottom: 8px;
}

/* -- Pricing: everything included as ticked chip rows */
.nx .included-rows {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}
.nx .included-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.nx .included-row > .k {
  color: var(--ink-3);
  padding-top: 7px;
}
.nx .recs.ticked {
  margin-top: 0;
}
.nx .recs.ticked .chip,
.nx .spec-card .recs .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 13px;
  padding: 5px 10px;
}
.nx .recs .chip a {
  color: inherit;
}
.nx .recs .chip a:hover {
  text-decoration: underline;
}

/* -- Get started: the first screen as a compact window above the three doors */
.nx .doors {
  display: grid;
  gap: 24px;
}
.nx .doors-hero {
  display: grid;
  gap: 10px;
  max-width: 820px;
}
.nx .doors-hero > .k {
  color: var(--ink-3);
}
.nx .doors-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx .door {
  width: auto;
  display: flex;
  flex-direction: column;
  transform: none;
}
.nx .door:hover {
  transform: none;
}
.nx .door .phead {
  min-height: 0;
  padding-bottom: 14px;
}
.nx .door .phead .pcat {
  margin-left: 0;
  font-family: var(--display);
  font-weight: 700;
}
.nx .door h3 {
  min-height: 0;
  margin-top: 10px;
}
.nx .door-body {
  flex: 1;
  background: #fff;
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
  color: var(--ink);
}
.nx .door-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .door-body .btn {
  justify-self: start;
  margin-top: auto;
}
.nx .term.small {
  font-size: 12px;
  line-height: 1.6;
  padding: 12px 14px;
  box-shadow: none;
  white-space: pre-wrap;
}
.nx .refs .rev {
  grid-column: 1 / -1;
}

/* -- Wide tablets */
@media (max-width: 1100px) {
  .nx .role-cards,
  .nx .cmini-row,
  .nx .ind-screens,
  .nx .diff-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx .rule-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -- Tablets */
@media (max-width: 900px) {
  .nx .stage-sec {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 28px 0;
  }
  .nx .stage-plate .win {
    max-width: none;
    margin-left: 0;
  }
  .nx .agent-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .nx .exc ul {
    columns: 1;
  }
  .nx .two-cards,
  .nx .kind-cards,
  .nx .doors-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .ind-photo {
    height: 220px;
  }
  .nx .ind-head .ind-card.doc-head {
    margin-top: -90px;
    padding: 24px 22px 22px;
  }
  .nx .included-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .nx.nx-sys .doc-cta .doc-aside {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .doc-hero .win {
    max-width: none;
  }
}

/* -- Phones */
@media (max-width: 720px) {
  .nx .role-cards,
  .nx .cmini-row,
  .nx .ind-screens,
  .nx .diff-grid,
  .nx .rule-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .handoffs {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .inventory {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 0;
  }
  .nx .inventory dt {
    padding-top: 10px;
  }
  .nx .stage-copy h2 {
    font-size: 24px;
  }
  .nx .doc-next {
    flex-direction: column;
    gap: 12px;
  }
  .nx .doc-next a {
    min-width: 0;
  }
  .nx .doc-next a.next {
    text-align: left;
  }
  .nx .handoffs .chain-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx.nx-sys section.pad:not(.doc-head):not(.doc-next):not(.sys-sec):not(.doc-rows):not(.doc-cta) {
    padding-top: 32px;
  }
}

/* -- Terminal: lines wrap instead of clipping (the API reply lands on its own line anyway) */
.nx.nx-sys .term {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: visible;
}

/* -- Gates strip: a two-column grid filled row by row (the gates, then the controls), never a
   column flow that lands a control under the last gate; titles wrap */
.nx .plate.gates {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
.nx .gates li b {
  white-space: normal;
  overflow: visible;
}
@media (max-width: 900px) {
  .nx .plate.gates {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -- Process controls: a control without a lead prints as one plain line, level with the titled rows */
.nx .gates li.ctrl.plain {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .gates li.ctrl.plain .tick {
  vertical-align: middle;
}
/* -- Reports strip with a single card: full width */
.nx .kpis.single {
  grid-template-columns: minmax(0, 1fr);
}
.nx .kpis.single .kpi {
  max-width: 560px;
}
/* -- The tables list on the data model page: one plate of hairline rows, not sixty cards */
.nx .spec-tables {
  display: block;
  margin-top: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.nx .spec-table {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}
.nx .spec-table:first-child {
  border-top: 0;
}
.nx .spec-table[open] {
  background: #fbfaf7;
}
.nx .spec-table table {
  margin: 0 0 10px;
}

/* -- Note plates: the two-line bands (agents, metering) as white plates on paper */
.nx .note-plate {
  padding: 22px 24px;
  display: grid;
  gap: 10px;
  max-width: 760px;
}
.nx .note-plate > .k {
  color: var(--ink-3);
}
.nx .note-plate p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
}
.nx .note-plate a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nx .note-plate a:hover {
  border-color: var(--ink);
}

/* -- Data model: the names the site uses that the spec has no table for */
.nx .unknown-records {
  margin-top: 36px;
  max-width: 58em;
}
.nx .unknown-records .row-head h3 {
  font-size: 20px;
  letter-spacing: -0.015em;
}
.nx .unknown-records p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .unknown-records .recs {
  margin-top: 12px;
}

/* -- Roles plate on the implementation page: the first-right cell wraps */
.nx .win[data-kind='roles'] .win-grid td {
  white-space: normal;
}

/* -- Dashed chips sit on the same baseline as their siblings; in the industry head they take the button shape */
.nx .chip.dashed {
  vertical-align: middle;
}
.nx .ind-head .fit-modes .chip.dashed {
  display: inline-block;
  height: 32px;
  padding: 0 10px;
  font: 13px/30px var(--body);
  border-radius: 6px;
  border-style: dashed;
  color: var(--ink-2);
}

/* -- Circuit minis on phones: the SVG keeps a legible width and scrolls in its card, fading at the edge */
@media (max-width: 640px) {
  .nx .cmini .circuit {
    min-width: 460px;
  }
  .nx .cmini .circuit-fade::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff);
    pointer-events: none;
  }
  .nx .row-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .nx .row-head .k {
    white-space: nowrap;
  }
  .nx .win-title {
    white-space: normal;
    line-height: 1.2;
  }
}

/* -- Agent row on the process and integrations pages: the terminal is the only dark surface, so
   the prompt button takes the ghost look beside 'Read skill.md' */
.nx.nx-sys .agent-row .cta .btn:not(.ghost):not(.red) {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.nx.nx-sys .agent-row .cta .btn:not(.ghost):not(.red):hover {
  background: #fff;
}

.nx .inter.thin[data-pc] {
  background: color-mix(in srgb, var(--identity-surface) 18%, var(--paper));
}