/* Section 3: numbers, Cluely-style stats: big centred two-tone heading, then a list (big figure
   left, title + grey lines right) beside a black-and-white visual card with the research link
   under it. Owner: numbers+closing builder; design-system pass 2026-10-12.
   Frame, padding, marks, min-height and the head (.sec-head) come from layout.css. .ns-head is
   shared with the FAQ. Tokens only. */
.ns-head { margin-bottom: var(--gap-head); }

.n-split { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--sp-64); align-items: start; }
.n-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.n-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-32); align-items: start;
  padding-block: clamp(var(--sp-16), 2svh, var(--sp-24)); border-top: 1px solid var(--line);
}
/* figure role: display face, the page's one display weight */
.n-figure {
  display: flex; align-items: baseline; gap: var(--sp-8); margin: 0; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--w-figure); line-height: 1;
  letter-spacing: var(--ls-display); color: var(--ink); font-variant-numeric: tabular-nums;
}
/* figure unit ("of 970"): meta role, set on the figure's baseline */
.n-of { font-family: var(--font-body); font-weight: 600; font-size: var(--w-lead); letter-spacing: 0; color: var(--muted); }
.n-copy { display: grid; gap: var(--gap-line); max-width: var(--measure); }
.n-title { margin: 0 0 calc(var(--gap-title) - var(--gap-line)); font-size: var(--w-title); line-height: 1.3; font-weight: var(--fw-title); letter-spacing: -.01em; color: var(--ink); }
.n-grey { margin: 0; font-size: var(--w-lead); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* the conditions line is a footnote: meta role */
.n-grey + .n-grey { font-size: var(--w-meta); font-weight: 500; }

.n-side { display: grid; gap: var(--sp-24); justify-items: center; }
.n-card { width: 100%; margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.n-shot { position: relative; background: var(--paper); }
.n-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1); }
.n-shot .micro { position: absolute; left: var(--sp-8); bottom: var(--sp-8); padding: var(--sp-4) var(--sp-8); background: var(--paper); color: var(--ink); border-radius: 6px; }
.n-flag {
  display: flex; align-items: center; gap: var(--sp-8); margin: 0; padding: var(--sp-12) var(--sp-16); background: var(--paper);
  font-size: var(--w-meta); font-weight: 600; color: var(--caution-ink);
}
.n-flag .px-icon { --px-size: 18px; margin-left: -4px; }
.n-illus { grid-column: 1 / -1; margin: 0; padding: 0 var(--sp-16) var(--sp-12); background: var(--paper); }

/* action role */
.n-link {
  display: flex; align-items: center; gap: var(--sp-8); width: max-content; min-height: 44px; padding: 0 2px;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.n-link:hover { border-bottom-color: var(--ink); }
.n-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.n-link .px-icon { margin-right: -4px; }

@media (max-width: 1199px) {
  .n-split { grid-template-columns: minmax(0, 1fr) 200px; gap: var(--sp-48); }
  .n-row { grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-24); }
}
@media (max-width: 759px) {
  .n-split { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .n-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); padding-block: var(--sp-24); }
  .n-card { grid-template-columns: 1fr 1fr; }
  .n-flag { grid-column: 1 / -1; }
}