/* NativePort site layer — page-scoped styles on top of the Dunas tokens +
   components. Consumes only semantic/accent/space/radius/type tokens (never a
   raw --color-* primitive), per the design-system cardinal rule. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.np-body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
}
/* Plain element selector on purpose — .ds-btn (0,1,0) must be able to set
   its own label color; a scoped reset would out-rank it. */
a { color: inherit; text-decoration: none; }

/* ---- Dark theme (the site's single mode) ----------------------------------
   Remaps the DS semantic layer for dark. `:root[data-theme]` (0,1,1) so it
   out-ranks both tokens.css's `:root` definitions and the per-Aura
   `[data-theme=…]` accent blocks without touching the vendored files. */
html { color-scheme: dark; }
:root[data-theme] {
  /* neutrals */
  --surface-base: #0b0b0c;
  --surface-alt: #161617;
  --text-primary: #f5f5f5;
  --text-secondary: #c9c9cc;
  --text-tertiary: #8b8b90;
  --border-subtle: #1f1f21;
  --border-default: #2a2a2d;
  --border-strong: #3f3f43;
  --border-emphasis: #55555a;
  /* buttons invert: white pill, dark label */
  --button-primary-bg: #f5f5f5;
  --button-primary-fg: #0b0b0c;
  --button-primary-bg-pressed: #d4d4d4;
  --button-secondary-bg: transparent;
  --button-secondary-fg: #f5f5f5;
  --button-secondary-bg-pressed: #1f1f21;
  --button-secondary-border: #3f3f43;
  --button-ghost-bg-hover: rgba(255, 255, 255, .07);
  /* Nova accent re-anchored for dark surfaces */
  --accent-text: #78d1ca;
  --accent-solid: #56c5bc;
  --accent-border: #224f4b;
  --accent-surface: #1a3b38;
  --accent-surface-subtle: #112726;
  /* status colors lifted for contrast on dark */
  --status-success: #4cbe4f;
  --status-warning: #f0b900;
}

/* ---- Brand lockup ------------------------------------------------------ */
.np-wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: .82;
  letter-spacing: -1px;
  font-size: 26px;
  color: var(--text-primary);
}
.np-wordmark--footer { font-size: 30px; }
.np-lockup { display: inline-flex; flex-direction: column; gap: 3px; }
.np-lockup-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Nav ---------------------------------------------------------------- */
.np-nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface-base) 88%, transparent);
  backdrop-filter: blur(var(--blur-subtle));
  -webkit-backdrop-filter: blur(var(--blur-subtle));
  border-bottom: 1px solid var(--border-subtle);
}
.np-nav-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-24);
  padding: var(--space-12) var(--space-24);
}
.np-nav-links { display: flex; gap: 4px; margin-left: var(--space-16); flex: 1; }
.np-nav-links a {
  padding: 7px var(--space-12);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--text-secondary);
  transition: background .15s ease, color .15s ease;
}
.np-nav-links a:hover { background: var(--surface-alt); color: var(--text-primary); }
.np-nav-actions { display: flex; gap: var(--space-8); align-items: center; }

/* ---- Page scaffold ------------------------------------------------------ */
.np-main { min-height: 60vh; }
.np-wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--space-24); }
.np-section { padding: 44px 0; }
.np-h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 44px); line-height: .84; letter-spacing: -1px;
  margin: 0 0 var(--space-8);
}
.np-section-lead { color: var(--text-tertiary); font-size: 15px; max-width: 62ch; margin: 0 0 var(--space-24); }
.np-rule { height: 1px; background: var(--border-strong); border: 0; margin: var(--space-12) 0 var(--space-24); }

/* ---- Hero ---------------------------------------------------------------- */
.np-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px; align-items: center;
  padding: 56px 0 36px;
}
.np-hero-title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(46px, 6.5vw, 88px); line-height: .8; letter-spacing: -2px;
  margin: 0; max-width: 14ch;
}
.np-hero-lead { font-size: 17px; line-height: 1.6; color: var(--text-secondary); max-width: 62ch; margin: var(--space-24) 0 0; }
.np-hero-meta {
  display: flex; gap: var(--space-20); flex-wrap: wrap;
  margin-top: var(--space-24);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);
}
.np-hero-meta b { color: var(--text-primary); font-weight: 500; }
.np-hero-cta { display: flex; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-24); }

/* ---- Panels & grids ------------------------------------------------------ */
.np-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.np-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.np-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
.np-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  background: var(--surface-base);
}
.np-panel h3 { margin: 0 0 var(--space-8); font-size: 15px; font-weight: 600; }
.np-panel p { margin: 0; color: var(--text-tertiary); font-size: 13.5px; line-height: 1.55; }
.np-panel .np-more { display: inline-block; margin-top: var(--space-12); font-size: 13px; color: var(--accent-text); }

/* ---- Provider marks & cards ---------------------------------------------- */
.np-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-base);
  overflow: hidden;
}
.np-mark img { width: 100%; height: 100%; object-fit: contain; }
.np-mark--mono { font-weight: 700; font-size: 15px; border: none; }
.np-mark--lg { width: 64px; height: 64px; border-radius: var(--radius-lg); }
.np-mark--lg.np-mark--mono { font-size: 22px; }

.np-provider-card {
  display: flex; flex-direction: column; gap: var(--space-12);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-16);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.np-provider-card:hover { border-color: var(--border-emphasis); box-shadow: var(--elevation-sm); }
.np-provider-card .head { display: flex; align-items: center; gap: var(--space-12); }
.np-provider-card .head .name { font-weight: 600; font-size: 15px; }
.np-provider-card .head .cat { color: var(--text-tertiary); font-size: 12px; margin-top: 2px; }
.np-provider-card .sum { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; flex: 1; }
.np-provider-card .facts {
  display: flex; gap: var(--space-8); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
}
.np-provider-card .facts span { padding: 3px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); }
.np-provider-card .facts .is-top { color: var(--accent-text); border-color: var(--accent-border); background: var(--accent-surface-subtle); }

.np-group-head { display: flex; align-items: baseline; gap: var(--space-12); margin: var(--space-24) 0 var(--space-16); }
.np-group-head h3 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 24px; letter-spacing: -.5px; line-height: .9; margin: 0;
}
.np-group-head .n { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }

/* ---- Scoreboard (home) ---------------------------------------------------- */
.np-board-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-12); }
.np-board-chip {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-16);
  transition: border-color .15s ease;
}
.np-board-chip:hover { border-color: var(--accent-border); }
.np-board-chip .verb { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.np-board-chip .lead-name { font-weight: 600; font-size: 14px; }
.np-board-chip .score { font-family: var(--font-mono); font-size: 12px; color: var(--accent-text); }

/* ---- Tables ---------------------------------------------------------------- */
.np-table-scroll { overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
table.np-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface-base); }
.np-table th, .np-table td { text-align: left; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.np-table thead th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-tertiary); font-weight: 400;
  background: var(--surface-alt);
}
.np-table tbody tr:last-child td { border-bottom: none; }
.np-table .num { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.np-table .prov { display: flex; align-items: center; gap: var(--space-12); font-weight: 600; }
.np-table .note { color: var(--text-tertiary); font-size: 12.5px; }
.np-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 6px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--border-default); color: var(--text-secondary);
}
.np-rank--first { background: var(--text-primary); color: var(--surface-base); border-color: var(--text-primary); }

/* ---- Provider detail ------------------------------------------------------- */
.np-detail-hero { display: flex; gap: var(--space-20); align-items: center; padding: 48px 0 0; }
.np-detail-hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(40px, 6vw, 64px); line-height: .8; letter-spacing: -1.5px; margin: 0;
}
.np-detail-sub { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; margin-top: var(--space-8); }
.np-detail-desc { font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 68ch; margin: var(--space-20) 0 0; }

.np-verbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-16); }
.np-verbcard { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.np-verbcard--top { border-color: var(--accent-border); }
.np-verbcard .top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--surface-alt); border-bottom: 1px solid var(--border-subtle);
}
.np-verbcard--top .top { background: var(--accent-surface-subtle); }
.np-verbcard .verb { font-weight: 600; font-size: 14px; }
.np-verbcard .comp { font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: -.5px; }
.np-verbcard .comp small { font-size: 13px; font-family: var(--font-mono); color: var(--text-tertiary); letter-spacing: 0; }
.np-verbcard .meta { display: flex; justify-content: space-between; padding: var(--space-8) var(--space-16); font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); border-bottom: 1px solid var(--border-subtle); }
.np-verbcard dl { margin: 0; padding: var(--space-12) var(--space-16); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-16); }
.np-verbcard dl div { display: flex; flex-direction: column; gap: 2px; }
.np-verbcard dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.np-verbcard dd { margin: 0; font-family: var(--font-mono); font-size: 14px; }
.np-verbcard .vnote { padding: var(--space-8) var(--space-16) var(--space-12); color: var(--text-tertiary); font-size: 12.5px; border-top: 1px dashed var(--border-subtle); }

.np-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.np-fit .cell { border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-20); }
.np-fit .cell .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: var(--space-8); }
.np-fit .fit-yes .tag { color: var(--status-success); }
.np-fit .fit-no .tag { color: var(--status-warning); }
.np-fit p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }

/* ---- Code block ------------------------------------------------------------- */
.np-code {
  background: var(--surface-black); color: var(--text-on-emphasis);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-16) var(--space-20);
  overflow-x: auto;
}
.np-code pre { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.c-cmd { color: var(--accent-400); }
.c-str { color: var(--accent-200); }
.c-com { color: #6b6b70; }

/* Terminal window (hero) — np-code plus title-bar chrome. */
.np-term {
  background: var(--surface-black); color: var(--text-on-emphasis);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--elevation-lg);
}
.np-term-head {
  display: flex; align-items: center; gap: 7px;
  padding: 10px var(--space-16);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.np-term-head i { width: 9px; height: 9px; border-radius: var(--radius-full); background: #2e2e31; }
.np-term-head span { margin-left: var(--space-8); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #6b6b70; }
.np-term-body { margin: 0; padding: var(--space-16) var(--space-20); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; overflow-x: auto; }

/* ---- Prose pages (methodology, legal) ---------------------------------------- */
.np-page-head { padding: 56px 0 0; }
.np-page-head h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(40px, 6.5vw, 72px); line-height: .8; letter-spacing: -2px; margin: 0;
}
.np-page-head .stamp { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-top: var(--space-12); }
.np-prose { max-width: 72ch; font-size: 15.5px; line-height: 1.75; color: var(--text-primary); padding: var(--space-24) 0 64px; }
.np-prose h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 28px; letter-spacing: -.5px; line-height: .9; margin: 40px 0 var(--space-12); }
.np-prose h3 { font-size: 16.5px; margin: var(--space-24) 0 var(--space-8); }
.np-prose p, .np-prose li { color: var(--text-secondary); }
.np-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.np-prose code { font-family: var(--font-mono); font-size: .85em; background: var(--surface-alt); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; word-break: break-word; }
.np-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 13.5px; margin: var(--space-16) 0; }
.np-prose th, .np-prose td { border: 1px solid var(--border-subtle); padding: var(--space-8) var(--space-12); text-align: left; }
.np-callout { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-20); margin: var(--space-16) 0; background: var(--surface-alt); }
.np-callout p { margin: var(--space-4) 0; font-weight: 600; color: var(--text-primary); }

/* ---- FAQ ------------------------------------------------------------------- */
.np-faq { display: flex; flex-direction: column; gap: var(--space-8); max-width: 820px; }
.np-faq details { border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.np-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-16); padding: var(--space-16) var(--space-20); font-weight: 600; font-size: 14.5px; }
.np-faq summary::-webkit-details-marker { display: none; }
.np-faq summary::after { content: "+"; color: var(--text-tertiary); }
.np-faq details[open] summary::after { content: "–"; }
.np-faq details p { margin: 0; padding: 0 var(--space-20) var(--space-16); color: var(--text-secondary); font-size: 14px; line-height: 1.6; }

/* ---- Footer ------------------------------------------------------------------ */
.np-footer { border-top: 1px solid var(--border-subtle); margin-top: 56px; }
.np-footer-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-24);
  padding: 44px var(--space-24);
}
.np-footer-brand p { color: var(--text-tertiary); font-size: 13px; line-height: 1.6; max-width: 34ch; margin: var(--space-12) 0 0; }
.np-footer-col { display: flex; flex-direction: column; gap: var(--space-8); }
.np-footer-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-4); }
.np-footer-col a { font-size: 13.5px; color: var(--text-secondary); }
.np-footer-col a:hover { color: var(--text-primary); }
.np-footer-line {
  max-width: 1160px; margin: 0 auto; padding: var(--space-16) var(--space-24) var(--space-24);
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);
}

/* ---- How-to ------------------------------------------------------------------- */
.np-breadcrumb {
  display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap;
  margin: var(--space-24) 0 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary);
}
.np-breadcrumb a { color: var(--text-tertiary); }
.np-breadcrumb a:hover { color: var(--text-primary); }
.np-breadcrumb span[aria-current] { color: var(--text-secondary); }

.np-howto-hero { padding: var(--space-16) 0 0; }
.np-howto-hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(36px, 5.5vw, 56px); line-height: .84; letter-spacing: -1.5px; margin: var(--space-16) 0 0;
}

/* ---- How-to: two-column article layout ----------------------------------- */
.np-howto-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  grid-template-areas: "article sidebar";
  align-items: start;
  gap: 48px;
}
.np-howto-prose { grid-area: article; min-width: 0; }
.np-howto-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: calc(var(--space-64) + var(--space-24));
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  min-width: 0;
  padding-bottom: 64px;
}
.np-howto-side-block {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-16) var(--space-20);
  min-width: 0;
}
.np-howto-side-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--space-12);
}
.np-howto-toc nav#TableOfContents ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-8);
}
.np-howto-toc nav#TableOfContents ul ul { margin-top: var(--space-8); padding-left: var(--space-12); }
.np-howto-toc nav#TableOfContents a {
  display: block;
  font-size: 13px; line-height: 1.4; color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.np-howto-toc nav#TableOfContents a:hover { color: var(--accent-text); }
.np-howto-facts-list { margin: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.np-howto-facts-list div { display: flex; justify-content: space-between; gap: var(--space-12); }
.np-howto-facts-list dt { color: var(--text-tertiary); font-size: 12.5px; }
.np-howto-facts-list dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.np-howto-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.np-howto-side-list a {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere;
}
.np-howto-side-list a:hover { color: var(--text-primary); }
.np-howto-side-list .np-mark { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.np-howto-side-list--docs a { color: var(--accent-text); }
.np-howto-side-cta p { margin: 0 0 var(--space-12); color: var(--text-tertiary); font-size: 13px; line-height: 1.5; }

.np-howto-prose .highlight {
  margin: var(--space-16) 0;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  overflow-x: auto;
}
.np-howto-prose .highlight pre {
  margin: 0; padding: var(--space-16) var(--space-20);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
}
.np-howto-prose .highlight code { background: none; border: none; padding: 0; }

.np-howto-prose > pre {
  margin: var(--space-16) 0;
  padding: var(--space-16) var(--space-20);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  overflow-x: auto;
  max-width: 100%;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
}
.np-howto-prose > pre code {
  background: none; border: none; padding: 0;
  overflow-wrap: normal; word-break: normal; white-space: pre;
}

.np-howto-list { display: flex; flex-direction: column; gap: var(--space-16); }
.np-howto-card {
  display: block;
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: var(--space-20);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.np-howto-card:hover { border-color: var(--border-emphasis); box-shadow: var(--elevation-sm); }
.np-howto-card h3 { margin: var(--space-8) 0; font-size: 18px; font-weight: 600; }
.np-howto-card p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.np-howto-card-meta {
  display: flex; gap: var(--space-16); align-items: center; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.np-howto-latest {
  padding: 3px 8px; border-radius: var(--radius-full);
  color: var(--accent-text); border: 1px solid var(--accent-border); background: var(--accent-surface-subtle);
}
.np-howto-updated { color: var(--text-tertiary); }
.np-howto-summary { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin: var(--space-12) 0 0; }

/* ---- Utility ------------------------------------------------------------------ */
.np-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: 13px; margin: var(--space-24) 0 0; }
.np-back:hover { color: var(--text-primary); }
.np-stamp { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }

/* ---- Responsive ----------------------------------------------------------------- */
@media (max-width: 960px) {
  .np-hero { grid-template-columns: 1fr; gap: var(--space-24); }
  .np-grid-4, .np-board-strip { grid-template-columns: repeat(2, 1fr); }
  .np-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .np-footer-inner { grid-template-columns: 1fr 1fr; }
  .np-howto-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sidebar" "article"; gap: var(--space-24); }
  .np-howto-sidebar { position: static; padding-bottom: 0; }
  .np-nav-links { display: none; }
}
@media (max-width: 640px) {
  .np-grid-2, .np-grid-3, .np-grid-4, .np-board-strip, .np-fit { grid-template-columns: 1fr; }
  .np-detail-hero { flex-direction: column; align-items: flex-start; }
  .np-hero { padding-top: 48px; }
  .np-howto-card-meta { gap: var(--space-8); }
}
@media (max-width: 360px) {
  .np-nav-inner { padding: var(--space-12) var(--space-16); gap: var(--space-12); }
}