/* "Up next" fan-out at the bottom of the gallery hub pages
   (chats, reports, feedback, testimonials) and below the /survey,
   /research/experimental-data, and /research content. Each page hand-picks
   three destinations suited to who is plausibly reading it — see the .np
   markup in the legacy/*.html files and the src pages. Idiom follows the
   homepage deck: mono eyebrow, quiet cards, purple accent. Dark is the
   default theme on the hub pages; .light-mode overrides below.

   Sizing is rem so the band rides each page's fluid root (the dense tier on
   the legacy hubs, site.css's root on templated pages). The band spans its
   parent container — the hubs' .container or the templated .page-container —
   so its edges line up with the content above it. /research is the one page
   that places it outside any container (after the full-bleed evidence deck):
   there the markup adds .np-standalone, which restates the deck's own
   content column (.ev-inner in new-home.css, 1230px). */

.np {
  margin: 4.5rem 0 2.5rem;
  padding: 2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: Roboto, -apple-system, sans-serif;
}
.np-standalone {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.np-eyebrow {
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8a8aff;
  margin: 0 0 0.5rem;
}
.np-note {
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #b9b9c4;
  margin: 0 0 1.375rem;
}
.np-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.np-card {
  display: flex;
  flex-direction: column;
  background: #101018;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  padding: 1.125rem 1.25rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.np-card:hover,
.np-card:focus-visible { border-color: #8a8aff; }
.np-card h3 {
  font-family: Roboto, sans-serif;
  font-weight: 500;
  font-size: 1.03rem;
  line-height: 1.35;
  color: #ffffff;
  margin: 0 0 0.375rem;
}
.np-card p {
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #b9b9c4;
  margin: 0 0 1rem;
}
.np-go {
  margin-top: auto;
  font-family: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8aff;
}

.light-mode .np { border-top-color: rgba(0, 0, 0, 0.12); }
.light-mode .np-eyebrow, .light-mode .np-go { color: #5a5ad1; }
.light-mode .np-note { color: #555a63; }
.light-mode .np-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.13);
}
.light-mode .np-card:hover,
.light-mode .np-card:focus-visible { border-color: #5a5ad1; }
.light-mode .np-card h3 { color: #212529; }
.light-mode .np-card p { color: #555a63; }

@media (max-width: 760px) {
  .np-grid { grid-template-columns: 1fr; }
  .np { margin-top: 3.5rem; }
}