/* ═════════════════════════════════════════════════════════════════════════
   NADIS Public Site — Product

   Loaded only by `products.html`, after tokens.css and base.css.

   Section padding is NOT set here — that belongs to `.nx-section` in
   base.css and nowhere else.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── A pillar ─────────────────────────────────────────────────────────────
   What it is on the left, what is in it on the right. The same arrangement
   for all four rather than alternating sides — a zig-zag would be movement
   for its own sake, and it makes the four harder to compare, which is the
   one thing a reader is actually here to do.
   ───────────────────────────────────────────────────────────────────────── */
.nx-pillar { display: grid; gap: var(--nx-space-5); }

@media (min-width: 900px) {
  .nx-pillar {
    grid-template-columns: 1fr 1fr;
    gap: var(--nx-space-6);
    align-items: start;
  }
}

.nx-pillar__intro { align-self: start; }

/* The station marker inline with the product name. It carries the meaning
   established by the Day Line on the home page — blue for what the system
   does, green for what grows the practice — without redrawing the line. */
.nx-pillar__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  margin-bottom: var(--nx-space-3);
}
/* The marker's default block margin and paper halo belong to the timeline,
   not to a text run — and the halo would be visibly wrong on a sand band. */
.nx-pillar__eyebrow .nx-dayline__marker {
  margin: 0;
  box-shadow: none;
}

.nx-pillar__title { margin-bottom: var(--nx-space-3); }
.nx-pillar__blurb { margin-bottom: var(--nx-space-4); }

.nx-pillar__who {
  padding-top: var(--nx-space-3);
  border-top: 1px solid var(--nx-rule);
  color: var(--nx-ink-faint);
}

/* The capability list. Ruled rows rather than bullets — it is a
   specification, and it should read like one. */
.nx-pillar__items { display: grid; gap: var(--nx-space-1); }

.nx-pillar__item {
  padding-block: var(--nx-space-3);
  border-bottom: 1px solid var(--nx-rule);
  font-size: var(--nx-text-small);
  color: var(--nx-ink-muted);
}
.nx-pillar__item:last-child { border-bottom: 0; }

@media (min-width: 900px) {
  /* Optically aligns the first list row's cap-height with the product
     name's, so the two columns start on the same line. */
  .nx-pillar__items { padding-top: 2px; }
}