/* System home (src/_includes/sections/nx/sys/home.njk): hero window slot, fit strip, screens
   row with role filter, gate cards, operating thread, drill chain and form plate, spine cards,
   role cards, kpi board, controls checklist, industry cards, hub, rollout band, reference cards.
   Loaded after home-netflix.css, sys/base.css and sys/doc.css; every selector is scoped under
   .nx. White plates on paper, 1px --line borders, 12px radius. Signal red only on: gate
   diamonds, the thread's gate number and 'waits for' line, the ladder's gate diamond. */

/* -- 01 Hero: copy left, app window right */
.nx .sys-hero {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  padding-top: 72px;
  padding-bottom: 56px;
  align-items: center;
}
.nx .sys-win {
  min-width: 0;
}
.nx .sys-win .win {
  max-width: 760px;
  margin-left: auto;
}
.nx .sys-win .win[data-kind='circuit'] .win-circuit {
  padding: 32px 28px 16px;
}
.nx .sys-win .win-circuit .circuit {
  width: 100%;
  height: auto;
  display: block;
}
.nx .sys-win .win-note span:not(.k) {
  color: var(--ink-2);
}

/* -- 02 Fit strip on the bottom edge of the pastel band */
.nx .fit {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 56px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid color-mix(in srgb, var(--pi) 18%, var(--pc));
  color: var(--pi);
}
.nx .fit > .k {
  color: var(--pi);
  opacity: 0.7;
}
.nx .fit-modes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx .fit-modes a {
  display: inline-block;
  height: 36px;
  line-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--pi) 25%, var(--pc));
  border-radius: 6px;
  background: rgb(255 255 255 / 60%);
  font-size: 13.5px;
  color: var(--pi);
  white-space: nowrap;
}
.nx .fit-modes a:hover {
  background: #fff;
  border-color: var(--pi);
}
.nx .fit-buyer {
  margin: 0 0 0 auto;
  font-size: 14px;
  line-height: 1.45;
  color: var(--pi);
  opacity: 0.85;
  max-width: 38em;
}
.nx .fit.fit-plain .fit-buyer {
  margin-left: 0;
}

/* -- 03 The screens: role filter chips above a snap-scrolling track of compact windows */
.nx .rolefilter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.nx .rolefilter .chip {
  cursor: pointer;
  background: #fff;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
}
.nx .rolefilter .chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.nx .rolefilter .chip.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nx .screens .track {
  gap: 18px;
  align-items: flex-start;
  padding-top: 16px;
}
.nx .sc-plate {
  flex: none;
  width: min(560px, 100%);
  scroll-snap-align: start;
  min-width: 0;
}
.nx .sc-plate .win {
  width: 100%;
}
.nx .screens .arrow {
  bottom: 28px;
}
.nx .dim {
  opacity: 0.35;
  transition: opacity 200ms ease;
}

/* -- 04 Where a person signs: gate cards. Cards top-align inside the row (a short card never floats
   half-way down beside a tall one) and the thumbnail column stays at the top too */
.nx .gate-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx .gate-card {
  margin-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 20px;
  align-items: start;
  align-content: start;
  padding: 20px 22px;
  border-radius: 12px;
}
.nx .gate-text {
  min-width: 0;
}
.nx .gate-name {
  margin: 0;
  display: flex;
  align-items: center;
  font: 650 19px/1.2 var(--display);
  letter-spacing: -0.01em;
}
.nx .gate-text > .chip.signer {
  display: inline-block;
  margin-top: 10px;
}
.nx .gate-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.nx .gate-text > p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.nx .gate-text > .gate-waits {
  margin-top: 8px;
  font: 13px var(--mono);
  letter-spacing: 0.01em;
  line-height: 1.5;
  color: var(--ink-3);
  text-transform: none;
}
.nx .gate-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nx .gate-link:hover {
  border-color: var(--ink);
}
.nx .gate-mini {
  min-width: 0;
  align-self: start;
}
.nx i.diamond {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--red);
  transform: rotate(45deg);
  margin-right: 10px;
  flex: none;
}

/* -- 05 Operating thread under the circuit */
.nx .thread {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.nx .th-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 220px;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  align-items: start;
  scroll-margin-top: 104px;
}
.nx .th-n {
  font: 700 34px/1 var(--display);
  color: var(--ink-3);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  padding-top: 2px;
}
.nx .th-row.gate .th-n {
  color: var(--red);
}
.nx .th-n .diamond {
  width: 8px;
  height: 8px;
  margin-right: 8px;
}
.nx .th-body {
  min-width: 0;
}
.nx .th-body h3 {
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.nx .th-body h3 a {
  color: inherit;
}
.nx .th-body h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
}
.nx .th-body p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}
.nx .th-body .waits {
  font: 11.5px var(--mono);
  letter-spacing: 0.04em;
  color: var(--red);
}
.nx .th-proc {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nx .th-proc:hover {
  border-color: var(--ink);
}
.nx .th-plate {
  min-width: 0;
}
/* Tier A: no flow sentence and no plate on any row, so the rows sit side by side as labelled stops instead of
   a column of empty paragraphs */
.nx .thread.brief {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 24px;
  border-top: 1px solid var(--line);
}
.nx .thread.brief .th-row {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px 0;
  border-top: 0;
  align-items: center;
}
.nx .thread.brief .th-n {
  font-size: 26px;
}
.nx .thread.brief .th-body h3 {
  font-size: 17px;
}
.nx .thread.brief .th-body .waits {
  margin-top: 4px;
}

/* -- 06 One record creates the next: kpi tile → grid → form, then the handoff pair */
.nx .chain-grid {
  display: grid;
  align-items: start;
  gap: 16px;
  margin-top: 18px;
}
.nx .chain-grid.three {
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.6fr) 64px minmax(0, 1.2fr);
}
.nx .chain-grid.two {
  grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);
  margin-top: 40px;
}
.nx .chain-arrow {
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--ink-3);
  margin-top: 22px;
}
.nx .chain-arrow svg {
  width: 64px;
  height: 24px;
  display: block;
}
.nx .chain-arrow path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.nx .chain-arrow .diamond {
  margin: 0 0 4px;
}
.nx .chain .kpi.chain-kpi {
  box-shadow: var(--plate-shadow-compact, 0 16px 40px -30px rgb(0 0 0 / 35%));
  border-radius: 12px;
  padding: 16px;
}
.nx .chain .win .win-grid tr.on td {
  background: #fbfaf7;
}
.nx .chain .lead {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56em;
}
.nx .chain-src {
  min-width: 0;
}

/* -- Form plate: status ladder, field pairs, owner line, audit note */
.nx .win-body.form {
  padding: 14px 16px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.nx .ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nx .ladder li {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font: 11px var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
}
.nx .ladder li.on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.nx .ladder .diamond {
  width: 7px;
  height: 7px;
  margin-right: 6px;
}
.nx .fields {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.nx .fields > div {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0efe9;
  min-width: 0;
}
.nx .fields dt {
  font: 10.5px var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx .fields dd {
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx .fields dd.mono {
  font-family: var(--mono);
  font-size: 12px;
}
.nx .form .owner {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nx .form .owner .k {
  color: var(--ink-3);
}
.nx .win-note .audit {
  font: 11px var(--mono);
  color: var(--ink-3);
}

/* -- 07 Modules: poster cards with a MiniPlate in the photo slot */
.nx .spine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.nx .spine-card {
  width: auto;
  transform: none;
}
.nx .spine-card:hover {
  transform: none;
}
.nx .spine-card > a,
.nx .spine-card > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.nx .spine-card .phead {
  min-height: 0;
  padding-bottom: 6px;
}
.nx .spine-card .ptag {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.nx .spine-card .pphoto-wrap {
  height: auto;
  margin-top: auto;
  padding: 8px 14px 14px;
}
.nx .spine-card .pphoto-wrap::before,
.nx .spine-card .pphoto-wrap::after {
  display: none;
}
.nx .spine-card .mini {
  box-shadow: 0 10px 24px -16px rgb(0 0 0 / 35%);
}

/* -- 08 Who works here: role cards */
.nx .role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.nx .role-card .vh {
  align-items: center;
}
.nx .role-card .vh b a {
  color: inherit;
}
.nx .role-card .vh b a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
}
.nx .role-card .av {
  width: 26px;
  height: 26px;
  font-size: 11px;
  flex: none;
}
.nx .role-card .scenario {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.nx .role-card .perms li {
  background: #f6f5f1;
}
.nx .role-card .perms li code {
  font: 11px var(--mono);
  color: var(--ink-2);
  margin-right: 4px;
}
.nx .role-views {
  margin-top: 12px;
  max-width: 260px;
}
.nx .role-views .mini {
  aspect-ratio: auto;
}

/* -- 09 Reports: the kpi board */
.nx .kpi-board {
  margin-top: 18px;
}
.nx .kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
  padding: 12px;
}
.nx .kpi {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  background: #fff;
}
.nx .kpi .vh {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.nx .kpi .vh b {
  font: 600 13.5px var(--display);
  letter-spacing: -0.01em;
  min-width: 0;
}
.nx .kpi .mono {
  font: 10.5px var(--mono);
  color: var(--ink-3);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}
.nx .kpi p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}
.nx .kpi > a {
  font: 11.5px var(--mono);
  color: var(--ink);
}
.nx .kpi > a:hover {
  text-decoration: underline;
}
.nx .kpi.tree2 {
  grid-row: auto;
}
.nx .rollup,
.nx .rollup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx .rollup > li > b {
  font: 600 12px var(--display);
}
.nx .rollup ul {
  margin-top: 6px;
  display: grid;
  gap: 6px;
}
.nx .rollup ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 10.5px var(--mono);
  color: var(--ink-2);
}
.nx .rollup .bar {
  display: inline-block;
  height: 6px;
  width: calc(var(--v) * 100px);
  max-width: 100%;
  background: var(--ink);
  opacity: 0.7;
  border-radius: 3px;
}

/* -- 10 Controls: checklist inside a white plate */
.nx .gates {
  display: block;
  margin-top: 18px;
  columns: 2;
  column-gap: 40px;
  list-style: none;
  padding: 8px 20px;
}
.nx .gates li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.nx .gates li b {
  font-weight: 600;
}
.nx .gates small {
  grid-column: 2;
  font-size: 13px;
  color: var(--ink-2);
}
.nx .gates code {
  font: 11px var(--mono);
  color: var(--ink-3);
}
.nx .gates .tick,
.nx .gates-legend .tick {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  margin-right: 10px;
  flex: none;
  box-sizing: border-box;
}
.nx .gates > li.ctrl {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.nx .plate.gates {
  grid-auto-flow: row dense;
  align-items: start;
}
.nx .plate.gates > li:only-child {
  grid-column: 1 / -1;
}
.nx .gates-legend {
  margin: 12px 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--ink-3);
}
.nx .gates-legend > span {
  white-space: nowrap;
}
.nx .gates-legend .diamond {
  margin-right: 6px;
}
.nx .gates-legend .tick {
  margin: 0 6px 0 14px;
}

/* -- 11 Fits your plant: poster cards with a short tinted photo band */
.nx .ind-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.nx .ind-card {
  width: auto;
}
.nx .ind-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.nx .ind-card .phead {
  min-height: 0;
  padding-bottom: 16px;
}
.nx .ind-card h3 {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: 0;
  white-space: normal;
}
.nx .ind-card .ptag {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  min-height: calc(3 * 1.4em);
}
.nx .ind-diff {
  flex: 1;
  margin: 0;
  padding: 14px 16px 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--pi);
  background: color-mix(in srgb, var(--pc) 45%, white);
  border-top: 1px solid color-mix(in srgb, var(--pi) 14%, var(--pc));
}
.nx .ind-diff b {
  font-weight: 650;
}

/* -- 12 Connections and the agent: hub beside the copy and terminal; without a hub the copy and
   the terminal take the two columns themselves (the wrapper dissolves with display: contents) */
.nx .sys-agent.with-hub {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}
.nx .sys-agent-copy {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.nx .sys-agent .term {
  max-width: 760px;
}
.nx .sys-agent:not(.with-hub) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
}
.nx .sys-agent:not(.with-hub) .sys-agent-copy {
  display: contents;
}
.nx .sys-agent:not(.with-hub) .term {
  max-width: none;
}
.nx .sys-agent h2 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.nx .hub {
  margin-top: 0;
  padding: 14px;
  --pc: var(--identity-surface, var(--catalog-palette-slate-base));
  --pi: var(--identity-ink, var(--catalog-palette-slate-ink));
}
.nx .hub-svg {
  width: 100%;
  height: auto;
  display: block;
}
.nx .hub-svg .centre rect {
  fill: var(--pc);
}
.nx .hub-svg .centre text {
  font: 600 17px var(--display);
  fill: var(--pi);
}
.nx .hub-svg .centre .sub {
  font: 11.5px var(--mono);
  fill: var(--pi);
  opacity: 0.8;
}
.nx .hub-svg .spoke {
  stroke: var(--line);
  stroke-width: 1.5;
}
.nx .hub-svg .node rect {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1;
}
.nx .hub-svg .node text {
  font: 15px var(--body);
  fill: var(--ink);
}
.nx .hub-svg .sub {
  font: 12px var(--mono);
  fill: var(--ink-2);
}
.nx .hub-svg .grp {
  font: 12px var(--mono);
  fill: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nx .hub-svg .agent-node rect {
  stroke-dasharray: 4 3;
}
.nx .hub-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx .hub-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nx .hub-list > li > .k {
  display: block;
  margin: 12px 0 2px;
  color: var(--ink-3);
}
.nx .hub-list > li:first-child > .k {
  margin-top: 0;
}
.nx .hub-list ul li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.nx .hub-list span {
  font: 11px var(--mono);
  color: var(--ink-3);
}
.nx .hub figcaption.lead {
  margin-top: 10px;
}

/* -- 13 Rollout and pricing: two white plates on paper (no pastel band); the timeline across the
   first, the rate card beside its copy in the second */
.nx .rollout .rollout-plan,
.nx .rollout .rollout-price {
  margin-top: 18px;
  padding: 22px 24px 20px;
  min-width: 0;
}
.nx .rollout .rollout-plan + .rollout-price {
  margin-top: 16px;
}
.nx .rollout .k {
  color: var(--ink-3);
}
.nx .rollout h3 {
  margin: 6px 0 0;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.nx .rollout .timeline-weeks {
  margin-top: 16px;
}
.nx .rollout .timeline {
  margin-top: 0;
}
.nx .rollout .timeline.brief li {
  padding: 12px 14px;
}
.nx .rollout .timeline.brief b {
  font-size: 15px;
}
.nx .rollout p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36em;
}
.nx .rollout p a {
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nx .rollout p a:hover {
  border-color: var(--ink);
}
.nx .rollout .rollout-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: center;
}
.nx .rollout .rollout-copy {
  min-width: 0;
}
.nx .rollout .pricing-grid.solo {
  margin: 0;
  max-width: none;
}

/* -- 14 Questions */
.nx #faq .faq {
  margin-top: 12px;
}

/* -- 15 Reference cards and the spec revision line */
.nx .refs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.nx .refs .ref {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--ink);
}
.nx .refs .ref:hover {
  border-color: var(--ink);
}
.nx .badge {
  font: 10.5px var(--mono);
  letter-spacing: 0.1em;
  border: 1px solid var(--ink);
  padding: 2px 6px;
  justify-self: start;
}
.nx .refs .ref b {
  font: 600 17px var(--display);
  letter-spacing: -0.01em;
}
.nx .refs .ref p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.nx .rev {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--ink-3);
}

/* -- Wide tablets */
@media (max-width: 1100px) {
  .nx .fit-buyer {
    margin-left: 0;
  }
  .nx .role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx .ind-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -- Tablets: the window stacks under the copy (rail hidden by base.css), rows and grids stack */
@media (max-width: 900px) {
  .nx .sys-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 40px;
    padding-bottom: 36px;
  }
  .nx .sys-win .win {
    max-width: none;
    margin-left: 0;
  }
  .nx .gate-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .gate-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .gate-mini {
    max-width: 260px;
  }
  .nx .th-row {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
  }
  .nx .th-plate {
    grid-column: 2;
    max-width: 260px;
  }
  .nx .chain-grid.three,
  .nx .chain-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .chain-arrow svg {
    transform: rotate(90deg);
    width: 40px;
  }
  .nx .gates {
    columns: 1;
  }
  .nx .sys-agent.with-hub,
  .nx .sys-agent:not(.with-hub) {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .hub-svg {
    display: none;
  }
  .nx .hub-list {
    display: block;
  }
  .nx .rollout .rollout-price {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* -- Phones */
@media (max-width: 720px) {
  .nx .role-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nx .fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 480px) {
  .nx .kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .nx .spine-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .ind-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .sc-plate {
    width: 100%;
  }
  .nx .th-n {
    font-size: 28px;
  }
  /* only the circuit scrolls inside its plate; the lead line under it wraps at the plate's width */
  .nx .circuit-scroll,
  .nx .sys-win .win-circuit {
    overflow-x: auto;
    min-width: 0;
  }
  .nx .circuit-scroll .circuit,
  .nx .sys-win .win-circuit .circuit {
    min-width: 520px;
  }
  .nx .win[data-kind='dispatch'] .op:nth-child(n + 5) {
    display: none;
  }
  .nx .sys-hero .win-grid th:nth-child(n + 5),
  .nx .sys-hero .win-grid td:nth-child(n + 5) {
    display: none;
  }
  .nx .hub-svg {
    display: none;
  }
  .nx .gate-card {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* -- Gate cards below 1200px: the thumbnail stacks under the text so the paragraph keeps a readable measure */
@media (max-width: 1200px) {
  .nx .gate-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .nx .gate-mini {
    max-width: 260px;
  }
}

/* -- Gate cards: signer and status pills on one row; the waiting line names the record */
.nx .gate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.nx .gate-row .chip.signer {
  margin-top: 0;
}
.nx .gate-name b {
  min-width: 0;
}

/* -- Role cards: the flow sentence under the permissions, not as the description */
.nx .role-card .inflow {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.nx .role-card .inflow .k {
  color: var(--ink-3);
  margin-right: 6px;
}

/* -- Screens row: a short plate keeps its own height; the row is as tall as the tallest, not each plate */
.nx .screens .sc-plate .win {
  height: auto;
  align-self: start;
}
.nx .screens .win[data-kind='dispatch'] .op:nth-child(n + 5) {
  display: none;
}

/* -- Fit and spine cards: three lines of description; the photo band and the callout panel are pinned together
   to the foot, so the slack of a shorter card sits under its text, not between the photo and the callout */
.nx .ind-card .ind-diff {
  flex: 0 0 auto;
  margin-top: auto;
}