/* ============================================================================
   NOUSTIQ DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Stable production asset. This file is NOT versioned by release: cache-busting
   is handled by the ?v=<filemtime> query appended by asset(). Adding a product
   module, an integration or a certification must never require a new stylesheet
   or a new namespace.

   ARCHITECTURE
     1  Tokens          every value the system can express, named by ROLE
     2  Reset
     3  Accessibility
     4  Layout
     5  Typography
     6  Actions
     7  Status language     the product's own vocabulary, rendered
     8  Surfaces & cards
     9  Registry tables     how configuration becomes a page
    10  Evidence            provenance as a first-class visual
    11  Approval gate       governance, not three buttons
    12  Opportunity brief   the signature artifact
    13  Product chrome      synthetic app UI
    14  Flow & process
    15  Editorial
    16  Forms
    17  Navigation
    18  Footer
    19  Motion
    20  Utilities
    21  Print

   RULE: components reference tokens only. A raw hex value below the token
   block is a bug. Roles, not colours: --nq-observed, never --green.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════ 1. TOKENS */

:root {
  /* ---- Brand ------------------------------------------------------- */
  --nq-brand-ink:        #07111f;   /* the deep field the brand sits on   */
  --nq-brand-ink-2:      #0d1a2a;
  --nq-brand-ink-3:      #12243a;
  --nq-brand-accent:     #18c98b;   /* Noustiq green: decision, movement  */
  --nq-brand-accent-deep:#0b7d55;   /* AA-safe green for text on white    */

  /* ---- Surfaces ---------------------------------------------------- */
  --nq-surface:          #ffffff;
  --nq-surface-subtle:   #f7f9fb;
  --nq-surface-sunken:   #eef2f6;
  --nq-surface-raised:   #ffffff;
  --nq-surface-hover:    #f3f6f9;
  --nq-surface-ink:      var(--nq-brand-ink);
  --nq-surface-ink-2:    #0b1728;

  /* ---- Product chrome (synthetic app UI reads distinctly) ---------- */
  --nq-product-bg:       #f4f7fa;
  --nq-product-panel:    #ffffff;
  --nq-product-rail:     #0d1a2a;
  --nq-product-rail-ink: #93a4b8;
  --nq-product-border:   #dde5ed;

  /* ---- Text -------------------------------------------------------- */
  --nq-text:             #14263a;
  --nq-text-strong:      #07111f;
  --nq-text-muted:       #5a6b80;
  --nq-text-subtle:      #7b8b9e;
  --nq-text-on-ink:      #eef3f8;
  --nq-text-on-ink-mute: #9aabbe;
  --nq-text-on-accent:   #04150e;

  /* ---- Borders ----------------------------------------------------- */
  --nq-border:           #dfe6ee;
  --nq-border-strong:    #c3ceda;
  --nq-border-ink:       #1d2c3f;
  --nq-rule:             #eaeff4;

  /* ---- Action ------------------------------------------------------ */
  --nq-action:           var(--nq-brand-accent);
  --nq-action-hover:     #14b57c;
  --nq-action-press:     #0fa06d;
  --nq-action-text:      var(--nq-text-on-accent);
  --nq-action-quiet:     var(--nq-text);
  --nq-action-quiet-bg:  transparent;

  /* ---- Status language --------------------------------------------
     These carry meaning, not decoration. Every chip, row and table cell
     in the product and on this site resolves to one of these six.      */
  --nq-observed:         #0b7d55;   /* seen directly, with a source      */
  --nq-observed-bg:      #e7f8f1;
  --nq-observed-border:  #b6e6d2;

  --nq-verified:         #0a6ea8;   /* confirmed by a second party       */
  --nq-verified-bg:      #e8f3fa;
  --nq-verified-border:  #b9dcf0;

  --nq-inferred:         #2f6fed;   /* reasoned, not witnessed           */
  --nq-inferred-bg:      #edf4ff;
  --nq-inferred-border:  #c6dbff;

  --nq-review:           #9a6208;   /* needs a human decision            */
  --nq-review-bg:        #fdf4e3;
  --nq-review-border:    #f2ddb3;

  --nq-danger:           #b32d20;   /* rejected, failed, stale-blocking  */
  --nq-danger-bg:        #fdedeb;
  --nq-danger-border:    #f5ccc7;

  --nq-unknown:          #64748b;   /* honestly not known                */
  --nq-unknown-bg:       #f1f4f8;
  --nq-unknown-border:   #dbe2ea;

  /* ---- Focus & disabled -------------------------------------------- */
  --nq-focus:            #1b6fe0;
  --nq-surface-hover-ink:#dde6ef;   /* hover for a light button on an ink field */
  --nq-contrast-border:  #8c9aab;   /* prefers-contrast overrides                */
  --nq-contrast-border-2:#5d6c7e;
  --nq-contrast-text:    #3c4c60;

  /* ---- Print ------------------------------------------------------
     A procurement reviewer prints the Trust Center. These are greys that
     survive a monochrome laser printer, not screen tokens.            */
  --nq-print-border:        #999999;
  --nq-print-border-strong: #666666;
  --nq-print-muted:         #555555;
  --nq-focus-ring:       0 0 0 3px color-mix(in srgb, var(--nq-focus) 35%, transparent);
  --nq-disabled-bg:      #eef2f6;
  --nq-disabled-text:    #96a3b3;

  /* ---- Elevation --------------------------------------------------- */
  --nq-shadow-sm: 0 1px 2px rgba(7,17,31,.06), 0 1px 1px rgba(7,17,31,.04);
  --nq-shadow-md: 0 4px 14px rgba(7,17,31,.07), 0 1px 3px rgba(7,17,31,.05);
  --nq-shadow-lg: 0 16px 40px rgba(7,17,31,.10), 0 3px 10px rgba(7,17,31,.06);
  --nq-shadow-xl: 0 28px 70px rgba(7,17,31,.14), 0 6px 18px rgba(7,17,31,.07);

  /* ---- Radii ------------------------------------------------------- */
  --nq-radius-xs: 4px;
  --nq-radius-sm: 6px;
  --nq-radius:    10px;
  --nq-radius-lg: 14px;
  --nq-radius-xl: 20px;
  --nq-radius-pill: 999px;

  /* ---- Spacing (4px base) ------------------------------------------ */
  --nq-space-1: 4px;    --nq-space-2: 8px;    --nq-space-3: 12px;
  --nq-space-4: 16px;   --nq-space-5: 20px;   --nq-space-6: 24px;
  --nq-space-7: 32px;   --nq-space-8: 40px;   --nq-space-9: 48px;
  --nq-space-10: 64px;  --nq-space-11: 80px;  --nq-space-12: 104px;
  --nq-space-13: 136px;

  /* ---- Typography -------------------------------------------------- */
  --nq-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nq-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --nq-size-display: clamp(2.35rem, 1.6rem + 3.1vw, 3.9rem);
  --nq-size-h1:      clamp(1.95rem, 1.45rem + 2.05vw, 3rem);
  --nq-size-h2:      clamp(1.55rem, 1.28rem + 1.15vw, 2.15rem);
  --nq-size-h3:      clamp(1.15rem, 1.06rem + .38vw, 1.4rem);
  --nq-size-h4:      1.0625rem;
  --nq-size-lede:    clamp(1.03rem, .98rem + .28vw, 1.2rem);
  --nq-size-body:    1rem;
  --nq-size-sm:      .9375rem;
  --nq-size-xs:      .8125rem;
  --nq-size-mono:    .75rem;

  --nq-leading-tight: 1.12;
  --nq-leading-snug:  1.35;
  --nq-leading-body:  1.62;

  --nq-tracking-tight: -.028em;
  --nq-tracking-flat:  -.011em;
  --nq-tracking-wide:  .085em;

  --nq-weight-regular: 400;
  --nq-weight-medium:  520;
  --nq-weight-semi:    620;
  --nq-weight-bold:    700;

  /* ---- Layout ------------------------------------------------------ */
  --nq-width-shell:  1180px;
  --nq-width-wide:   1360px;
  --nq-width-prose:  68ch;
  --nq-width-narrow: 46rem;
  --nq-header-h:     66px;
  --nq-gutter:       var(--nq-space-6);

  /* ---- Z-index ----------------------------------------------------- */
  --nq-z-base:    0;
  --nq-z-raised:  10;
  --nq-z-sticky:  100;
  --nq-z-header:  200;
  --nq-z-overlay: 300;
  --nq-z-modal:   400;
  --nq-z-toast:   500;

  /* ---- Motion ------------------------------------------------------ */
  --nq-ease:      cubic-bezier(.22, .61, .36, 1);
  --nq-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --nq-dur-fast:  .14s;
  --nq-dur:       .22s;
  --nq-dur-slow:  .5s;
}

/* Dark mode. Tokens only are redefined; not one component rule below changes. */
@media (prefers-color-scheme: dark) {
  :root {
    --nq-surface:          #0b1420;
    --nq-surface-subtle:   #0e1926;
    --nq-surface-sunken:   #111e2d;
    --nq-surface-raised:   #111e2d;
    --nq-surface-hover:    #162435;
    --nq-surface-ink:      #050d17;
    --nq-surface-ink-2:    #081320;

    --nq-product-bg:       #0e1926;
    --nq-product-panel:    #111e2d;
    --nq-product-rail:     #050d17;
    --nq-product-border:   #1e2d40;

    --nq-text:             #e4ebf3;
    --nq-text-strong:      #f5f8fb;
    --nq-text-muted:       #9dadc0;
    --nq-text-subtle:      #7889a0;

    --nq-border:           #1e2d40;
    --nq-border-strong:    #2c3f56;
    --nq-rule:             #172536;

    --nq-brand-accent-deep:#3ddba0;
    --nq-action-text:      #04150e;

    --nq-observed:         #47d5a2;
    --nq-observed-bg:      #0c2b21;
    --nq-observed-border:  #1c4d3c;

    --nq-verified:         #56b3e4;
    --nq-verified-bg:      #0a2130;
    --nq-verified-border:  #1a3f56;

    --nq-inferred:         #7ba5ff;
    --nq-inferred-bg:      #101d38;
    --nq-inferred-border:  #22375f;

    --nq-review:           #e0a94e;
    --nq-review-bg:        #2a1f0d;
    --nq-review-border:    #4d3a1c;

    --nq-danger:           #f07f70;
    --nq-danger-bg:        #2c1512;
    --nq-danger-border:    #542823;

    --nq-unknown:          #93a3b8;
    --nq-unknown-bg:       #141f2e;
    --nq-unknown-border:   #26374b;

    --nq-focus:            #6aa6ff;
    --nq-disabled-bg:      #162435;
    --nq-disabled-text:    #6b7c92;

    --nq-shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --nq-shadow-md: 0 4px 14px rgba(0,0,0,.5);
    --nq-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
    --nq-shadow-xl: 0 28px 70px rgba(0,0,0,.6);
  }
}

/* ════════════════════════════════════════════════════════════ 2. RESET */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nq-header-h) + var(--nq-space-6));
}

body {
  margin: 0;
  background: var(--nq-surface);
  color: var(--nq-text);
  font-family: var(--nq-font);
  font-size: var(--nq-size-body);
  line-height: var(--nq-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--nq-action); color: var(--nq-text-on-accent); }

/* ═════════════════════════════════════════════════════ 3. ACCESSIBILITY */

:focus-visible {
  outline: 2px solid var(--nq-focus);
  outline-offset: 2px;
  border-radius: var(--nq-radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--nq-space-4);
  top: -120px;
  z-index: var(--nq-z-toast);
  background: var(--nq-action);
  color: var(--nq-action-text);
  padding: var(--nq-space-3) var(--nq-space-5);
  border-radius: var(--nq-radius);
  font-size: var(--nq-size-sm);
  font-weight: var(--nq-weight-semi);
  transition: top var(--nq-dur) var(--nq-ease);
}
.skip-link:focus { top: var(--nq-space-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Every interactive target clears 24x24 (WCAG 2.2 AA, 2.5.8). */
a[class*="button"], button, .status-chip[href], .tab-button {
  min-height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

@media (prefers-contrast: more) {
  :root {
    --nq-border: var(--nq-contrast-border);
    --nq-border-strong: var(--nq-contrast-border-2);
    --nq-text-muted: var(--nq-contrast-text);
  }
}

/* ═══════════════════════════════════════════════════════════ 4. LAYOUT */

.shell {
  width: 100%;
  max-width: var(--nq-width-shell);
  margin-inline: auto;
  padding-inline: var(--nq-gutter);
}
.shell-wide { max-width: var(--nq-width-wide); }
.shell-narrow { max-width: var(--nq-width-narrow); }

@media (max-width: 560px) { :root { --nq-gutter: var(--nq-space-5); } }

.section    { padding-block: clamp(var(--nq-space-10), 6.5vw, var(--nq-space-12)); }
.section-sm { padding-block: clamp(var(--nq-space-9), 4.5vw, var(--nq-space-10)); }
.section-lg { padding-block: clamp(var(--nq-space-11), 8vw, var(--nq-space-13)); }

.section-subtle { background: var(--nq-surface-subtle); }
.section-sunken { background: var(--nq-surface-sunken); }

.section-ink {
  background: var(--nq-surface-ink);
  color: var(--nq-text-on-ink);
}
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: var(--nq-text-on-ink); }
.section-ink p, .section-ink .lede { color: var(--nq-text-on-ink-mute); }
.section-ink .eyebrow { color: var(--nq-brand-accent); }
.section-ink hr, .section-ink .rule { background: var(--nq-border-ink); }

.grid { display: grid; gap: var(--nq-space-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } }

/* Asymmetric split — the default editorial rhythm, deliberately not 50/50. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(var(--nq-space-7), 5vw, var(--nq-space-11));
  align-items: start;
}
.split-even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.split-reverse > :first-child { order: 2; }
.split-center { align-items: center; }
@media (max-width: 940px) {
  .split, .split-even { grid-template-columns: minmax(0,1fr); gap: var(--nq-space-8); }
  .split-reverse > :first-child { order: 0; }
}

.rule { height: 1px; background: var(--nq-rule); border: 0; }

/* ═══════════════════════════════════════════════════════ 5. TYPOGRAPHY */

h1, h2, h3, h4 {
  line-height: var(--nq-leading-tight);
  letter-spacing: var(--nq-tracking-tight);
  font-weight: var(--nq-weight-semi);
  color: var(--nq-text-strong);
  text-wrap: balance;
}
h1 { font-size: var(--nq-size-h1); }
h2 { font-size: var(--nq-size-h2); }
h3 { font-size: var(--nq-size-h3); letter-spacing: var(--nq-tracking-flat); }
h4 { font-size: var(--nq-size-h4); letter-spacing: var(--nq-tracking-flat); }
p  { text-wrap: pretty; }

.display {
  font-size: var(--nq-size-display);
  line-height: 1.04;
  letter-spacing: -.034em;
  font-weight: var(--nq-weight-semi);
  color: var(--nq-text-strong);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nq-space-2);
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-semi);
  letter-spacing: var(--nq-tracking-wide);
  text-transform: uppercase;
  color: var(--nq-brand-accent-deep);
  margin-bottom: var(--nq-space-4);
}

.lede {
  font-size: var(--nq-size-lede);
  line-height: 1.55;
  color: var(--nq-text-muted);
  max-width: 60ch;
}

.small { font-size: var(--nq-size-sm); }
.micro { font-size: var(--nq-size-xs); color: var(--nq-text-muted); }
.mono {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  letter-spacing: .04em;
}
.muted { color: var(--nq-text-muted); }
.subtle { color: var(--nq-text-subtle); }

.section-head { margin-bottom: var(--nq-space-9); max-width: 62ch; }
.section-head .lede { margin-top: var(--nq-space-4); }

/* A two-column section head: statement left, qualification right. Breaks the
   centred eyebrow/headline/paragraph rhythm without inventing a new layout. */
.section-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(var(--nq-space-6), 4vw, var(--nq-space-10));
  align-items: end;
  margin-bottom: var(--nq-space-9);
}
.section-head-split > p { color: var(--nq-text-muted); font-size: var(--nq-size-sm); }
@media (max-width: 860px) {
  .section-head-split { grid-template-columns: minmax(0,1fr); gap: var(--nq-space-4); align-items: start; }
}

.prose { max-width: var(--nq-width-prose); }
.prose p + p { margin-top: var(--nq-space-5); }
.prose h2 { margin-top: var(--nq-space-9); margin-bottom: var(--nq-space-4); }
.prose h3 { margin-top: var(--nq-space-7); margin-bottom: var(--nq-space-3); }
.prose ul { margin: var(--nq-space-4) 0; padding-left: var(--nq-space-6); list-style: disc; }
.prose ol { margin: var(--nq-space-4) 0; padding-left: var(--nq-space-6); list-style: decimal; }
.prose li { margin-bottom: var(--nq-space-2); }
.prose a { color: var(--nq-brand-accent-deep); border-bottom: 1px solid currentColor; }

/* ══════════════════════════════════════════════════════════ 6. ACTIONS */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nq-space-2);
  height: 44px;
  padding-inline: var(--nq-space-6);
  border-radius: var(--nq-radius);
  border: 1px solid transparent;
  font-size: var(--nq-size-sm);
  font-weight: var(--nq-weight-semi);
  letter-spacing: var(--nq-tracking-flat);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--nq-dur-fast) var(--nq-ease),
              border-color var(--nq-dur-fast) var(--nq-ease),
              color var(--nq-dur-fast) var(--nq-ease),
              transform var(--nq-dur-fast) var(--nq-ease);
}
.button:active { transform: translateY(1px); }

.button-primary {
  background: var(--nq-action);
  color: var(--nq-action-text);
  border-color: var(--nq-action);
  box-shadow: var(--nq-shadow-sm);
}
.button-primary:hover { background: var(--nq-action-hover); border-color: var(--nq-action-hover); }
.button-primary:active { background: var(--nq-action-press); }

.button-secondary {
  background: var(--nq-surface);
  color: var(--nq-text);
  border-color: var(--nq-border-strong);
}
.button-secondary:hover { background: var(--nq-surface-hover); border-color: var(--nq-text-subtle); }

.button-quiet {
  background: var(--nq-action-quiet-bg);
  color: var(--nq-text-muted);
}
.button-quiet:hover { background: var(--nq-surface-hover); color: var(--nq-text); }

.button-on-ink {
  background: var(--nq-surface);
  color: var(--nq-text-strong);
  border-color: var(--nq-surface);
}
.button-on-ink:hover { background: var(--nq-surface-hover-ink); border-color: var(--nq-surface-hover-ink); }

.button-on-ink-quiet {
  background: transparent;
  color: var(--nq-text-on-ink);
  border-color: rgba(255,255,255,.24);
}
.button-on-ink-quiet:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); }

.button-lg { height: 50px; padding-inline: var(--nq-space-7); font-size: var(--nq-size-body); }
.button-sm { height: 36px; padding-inline: var(--nq-space-4); font-size: var(--nq-size-xs); }
.button-block { width: 100%; }
.button[disabled], .button[aria-disabled="true"] {
  background: var(--nq-disabled-bg);
  color: var(--nq-disabled-text);
  border-color: var(--nq-disabled-bg);
  pointer-events: none;
  box-shadow: none;
}

.button-row { display: flex; flex-wrap: wrap; gap: var(--nq-space-3); }
@media (max-width: 480px) {
  .button-row-stack { display: grid; }
  .button-row-stack .button { width: 100%; }
}

.text-link {
  display: inline-flex;
  align-items: center;
  /* WCAG 2.2 AA 2.5.8: a standalone link is a target, not inline prose. */
  min-height: 24px;
  gap: var(--nq-space-2);
  color: var(--nq-brand-accent-deep);
  font-weight: var(--nq-weight-semi);
  font-size: var(--nq-size-sm);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nq-dur-fast) var(--nq-ease), gap var(--nq-dur-fast) var(--nq-ease);
}
.text-link:hover { border-bottom-color: currentColor; gap: 10px; }
.section-ink .text-link { color: var(--nq-brand-accent); }

/* ═════════════════════════════════════════════════ 7. STATUS LANGUAGE

   One vocabulary across the site and the synthetic product UI. The tone
   suffix is set by PHP from the registry, never hand-picked per page.     */

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-semi);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--nq-radius-sm);
  border: 1px solid var(--nq-unknown-border);
  background: var(--nq-unknown-bg);
  color: var(--nq-unknown);
  white-space: nowrap;
  line-height: 1.5;
}
.status-chip::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-chip.is-ok       { background: var(--nq-observed-bg); border-color: var(--nq-observed-border); color: var(--nq-observed); }
.status-chip.is-verified { background: var(--nq-verified-bg); border-color: var(--nq-verified-border); color: var(--nq-verified); }
.status-chip.is-inferred { background: var(--nq-inferred-bg); border-color: var(--nq-inferred-border); color: var(--nq-inferred); }
.status-chip.is-review   { background: var(--nq-review-bg);   border-color: var(--nq-review-border);   color: var(--nq-review); }
.status-chip.is-pending  { background: var(--nq-unknown-bg);  border-color: var(--nq-unknown-border);  color: var(--nq-unknown); }
.status-chip.is-danger   { background: var(--nq-danger-bg);   border-color: var(--nq-danger-border);   color: var(--nq-danger); }
.status-chip.is-muted    { background: transparent; border-color: var(--nq-border); color: var(--nq-text-subtle); }
.status-chip.no-dot::before { display: none; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--nq-space-2); }

/* Synthetic-data marker. Required wherever invented records are shown. */
.synthetic-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nq-review);
  background: var(--nq-review-bg);
  border: 1px dashed var(--nq-review-border);
  padding: 3px 9px;
  border-radius: var(--nq-radius-sm);
}

/* ══════════════════════════════════════════════════ 8. SURFACES & CARDS */

.card {
  background: var(--nq-surface-raised);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  padding: var(--nq-space-6);
}
.card-lg { padding: var(--nq-space-7); }
.card-raised { box-shadow: var(--nq-shadow-md); }
.card-interactive {
  transition: border-color var(--nq-dur) var(--nq-ease),
              box-shadow var(--nq-dur) var(--nq-ease),
              transform var(--nq-dur) var(--nq-ease);
}
.card-interactive:hover {
  border-color: var(--nq-border-strong);
  box-shadow: var(--nq-shadow-md);
  transform: translateY(-2px);
}
.card h3, .card h4 { margin-bottom: var(--nq-space-3); }
.card p { color: var(--nq-text-muted); font-size: var(--nq-size-sm); }

.section-ink .card {
  background: var(--nq-surface-ink-2);
  border-color: var(--nq-border-ink);
}
.section-ink .card p { color: var(--nq-text-on-ink-mute); }

.panel {
  background: var(--nq-surface-subtle);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  padding: var(--nq-space-6);
}

/* A stated fact with a label. The workhorse for "state it once" surfaces. */
.fact-list { display: grid; }
.fact {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--nq-space-4);
  padding-block: var(--nq-space-3);
  border-bottom: 1px solid var(--nq-rule);
  align-items: start;
}
.fact:last-child { border-bottom: 0; }
.fact-key {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nq-text-subtle);
  padding-top: 2px;
}
.fact-value { font-size: var(--nq-size-sm); color: var(--nq-text); min-width: 0; }
.fact-value .note {
  display: block;
  color: var(--nq-text-muted);
  font-size: var(--nq-size-xs);
  margin-top: 3px;
}
.section-ink .fact { border-color: var(--nq-border-ink); }
.section-ink .fact-value { color: var(--nq-text-on-ink); }
.section-ink .fact-value .note { color: var(--nq-text-on-ink-mute); }
@media (max-width: 560px) {
  .fact { grid-template-columns: minmax(0,1fr); gap: var(--nq-space-1); }
}

/* Honest empty state. Used where proof does not exist yet. Deliberately
   understated: absence should not become the loudest thing on the page. */
.empty-state {
  border: 1px dashed var(--nq-border-strong);
  border-radius: var(--nq-radius-lg);
  padding: var(--nq-space-7);
  background: var(--nq-surface-subtle);
}
.empty-state h3 { font-size: var(--nq-size-h4); margin-bottom: var(--nq-space-2); }
.empty-state p { color: var(--nq-text-muted); font-size: var(--nq-size-sm); max-width: 58ch; }

/* ═══════════════════════════════════════════════════ 9. REGISTRY TABLES

   How a configuration file becomes a page. Any registry renders through
   these classes; adding a record never touches CSS.                       */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  background: var(--nq-surface-raised);
}
.data-table { min-width: 640px; font-size: var(--nq-size-sm); }
.data-table th, .data-table td {
  padding: var(--nq-space-3) var(--nq-space-5);
  text-align: left;
  border-bottom: 1px solid var(--nq-rule);
  vertical-align: top;
}
.data-table thead th {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nq-text-subtle);
  background: var(--nq-surface-subtle);
  white-space: nowrap;
  border-bottom-color: var(--nq-border);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:first-child {
  color: var(--nq-text-strong);
  font-weight: var(--nq-weight-medium);
}
.data-table .cell-note {
  color: var(--nq-text-muted);
  font-size: var(--nq-size-xs);
  display: block;
  margin-top: 3px;
  max-width: 52ch;
}
.data-table caption {
  caption-side: bottom;
  text-align: left;
  padding: var(--nq-space-4) var(--nq-space-5);
  color: var(--nq-text-muted);
  font-size: var(--nq-size-xs);
  border-top: 1px solid var(--nq-rule);
}

/* Below 640px a data table becomes stacked records rather than a scroll
   trap. The header cell text is carried in data-label by PHP. */
@media (max-width: 640px) {
  .data-table.stack-mobile { min-width: 0; }
  .data-table.stack-mobile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table.stack-mobile tr {
    display: block;
    border-bottom: 1px solid var(--nq-border);
    padding: var(--nq-space-4) var(--nq-space-5);
  }
  .data-table.stack-mobile tr:last-child { border-bottom: 0; }
  .data-table.stack-mobile td {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--nq-space-3);
    padding: var(--nq-space-1) 0;
    border: 0;
  }
  .data-table.stack-mobile td::before {
    content: attr(data-label);
    font-family: var(--nq-font-mono);
    font-size: var(--nq-size-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nq-text-subtle);
  }
  .data-table.stack-mobile .cell-note { max-width: none; }
}

/* A registry rendered as rows rather than a table, when the note matters
   more than comparison across columns. */
.registry-list { display: grid; }
.registry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--nq-space-4);
  align-items: start;
  padding-block: var(--nq-space-4);
  border-bottom: 1px solid var(--nq-rule);
}
.registry-row:last-child { border-bottom: 0; }
.registry-row h4 { margin-bottom: 2px; }
.registry-row p { font-size: var(--nq-size-sm); color: var(--nq-text-muted); max-width: 62ch; }
@media (max-width: 560px) {
  .registry-row { grid-template-columns: minmax(0,1fr); }
}

/* ══════════════════════════════════════════════════════ 10. EVIDENCE

   Provenance as a visual moat. A finding is never shown without its
   source, its time and whether it was observed or inferred.               */

.evidence-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nq-space-4);
  padding: var(--nq-space-5);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  background: var(--nq-surface-raised);
}
.evidence-item + .evidence-item { margin-top: var(--nq-space-3); }

/* The state rail: a 3px edge carrying the finding's epistemic status. */
.evidence-rail {
  width: 3px;
  border-radius: var(--nq-radius-pill);
  background: var(--nq-unknown);
}
.evidence-item.is-observed .evidence-rail { background: var(--nq-observed); }
.evidence-item.is-inferred .evidence-rail { background: var(--nq-inferred); }
.evidence-item.is-review   .evidence-rail { background: var(--nq-review); }
.evidence-item.is-verified .evidence-rail { background: var(--nq-verified); }
.evidence-item.is-stale    .evidence-rail { background: var(--nq-danger); }

.evidence-finding {
  font-size: var(--nq-size-sm);
  color: var(--nq-text-strong);
  font-weight: var(--nq-weight-medium);
  margin-bottom: var(--nq-space-3);
}

/* Provenance strip: source, type, observed-at, last-checked, researcher. */
.evidence-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-2) var(--nq-space-5);
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  letter-spacing: .04em;
  color: var(--nq-text-subtle);
}
.evidence-meta span { display: inline-flex; gap: 5px; }
.evidence-meta b {
  font-weight: var(--nq-weight-semi);
  color: var(--nq-text-muted);
  text-transform: uppercase;
}
.evidence-source {
  color: var(--nq-text-muted);
  border-bottom: 1px solid var(--nq-border-strong);
}

.section-ink .evidence-item { background: var(--nq-surface-ink-2); border-color: var(--nq-border-ink); }
.section-ink .evidence-finding { color: var(--nq-text-on-ink); }

/* ═══════════════════════════════════════════════════ 11. APPROVAL GATE

   Governance, not three buttons. Policy identity, checks, decision and
   history are all first-class.                                            */

.gate {
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  background: var(--nq-surface-raised);
  color: var(--nq-text);
  overflow: hidden;
}
/* A gate can sit inside a dark marketing section. Its own surfaces remain
   theme-aware, so light mode never inherits light-on-dark text onto a white
   gate card. */
.section-ink .gate { color: var(--nq-text); }
.section-ink .gate p { color: var(--nq-text-muted); }
.section-ink .gate .gate-policy { color: var(--nq-text-strong); }
.section-ink .gate .gate-version,
.section-ink .gate .gate-check-note,
.section-ink .gate .gate-history li { color: var(--nq-text-subtle); }
.section-ink .gate .fact { border-color: var(--nq-rule); }
.section-ink .gate .fact-key { color: var(--nq-text-subtle); }
.section-ink .gate .fact-value { color: var(--nq-text); }
.section-ink .gate .fact-value .note { color: var(--nq-text-muted); }
.gate-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-3);
  align-items: baseline;
  padding: var(--nq-space-5) var(--nq-space-6);
  background: var(--nq-surface-subtle);
  border-bottom: 1px solid var(--nq-border);
}
.gate-policy { font-weight: var(--nq-weight-semi); font-size: var(--nq-size-sm); }
.gate-version {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-text-subtle);
  letter-spacing: .05em;
}
.gate-body { padding: var(--nq-space-6); }

.gate-checks { display: grid; gap: var(--nq-space-2); }
.gate-check {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: var(--nq-space-3);
  align-items: center;
  padding: var(--nq-space-3) var(--nq-space-4);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  font-size: var(--nq-size-sm);
  background: var(--nq-surface);
}
.gate-check-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--nq-observed); }
.gate-check.is-failed .gate-check-icon { color: var(--nq-danger); }
.gate-check.is-review .gate-check-icon { color: var(--nq-review); }
.gate-check-note {
  font-size: var(--nq-size-xs);
  color: var(--nq-text-muted);
  text-align: right;
}
@media (max-width: 620px) {
  .gate-check { grid-template-columns: auto minmax(0,1fr); }
  .gate-check-note { grid-column: 2; text-align: left; }
}

/* Decision record: who decided, what, why, when. */
.gate-decision {
  margin-top: var(--nq-space-5);
  padding: var(--nq-space-5);
  border-radius: var(--nq-radius);
  border: 1px solid var(--nq-observed-border);
  background: var(--nq-observed-bg);
}
.gate-decision.is-hold   { border-color: var(--nq-review-border); background: var(--nq-review-bg); }
.gate-decision.is-reject { border-color: var(--nq-danger-border); background: var(--nq-danger-bg); }

.gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-2);
  margin-top: var(--nq-space-5);
}
.gate-action {
  flex: 1 1 auto;
  min-width: 108px;
  height: 40px;
  border-radius: var(--nq-radius);
  border: 1px solid var(--nq-border-strong);
  background: var(--nq-surface);
  font-size: var(--nq-size-sm);
  font-weight: var(--nq-weight-semi);
  color: var(--nq-text-muted);
  cursor: pointer;
  transition: all var(--nq-dur-fast) var(--nq-ease);
}
.gate-action:hover { border-color: var(--nq-text-subtle); color: var(--nq-text); }
.gate-action[aria-pressed="true"] {
  background: var(--nq-observed-bg);
  border-color: var(--nq-observed);
  color: var(--nq-observed);
}
.gate-action[data-decision="hold"][aria-pressed="true"] {
  background: var(--nq-review-bg); border-color: var(--nq-review); color: var(--nq-review);
}
.gate-action[data-decision="reject"][aria-pressed="true"] {
  background: var(--nq-danger-bg); border-color: var(--nq-danger); color: var(--nq-danger);
}

.gate-history {
  margin-top: var(--nq-space-5);
  padding-top: var(--nq-space-4);
  border-top: 1px solid var(--nq-rule);
}
.gate-history li {
  display: flex;
  gap: var(--nq-space-3);
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-text-subtle);
  padding-block: 3px;
}

/* ═════════════════════════════════════════════ 12. OPPORTUNITY BRIEF

   The signature artifact. Readable in about thirty seconds, which is the
   design constraint that decides everything below.                        */

.brief {
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  background: var(--nq-surface-raised);
  overflow: hidden;
  box-shadow: var(--nq-shadow-md);
}
.brief-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nq-space-3);
  padding: var(--nq-space-5) var(--nq-space-6);
  border-bottom: 1px solid var(--nq-border);
  background: var(--nq-surface-subtle);
}
.brief-account { font-weight: var(--nq-weight-semi); font-size: var(--nq-size-h4); }
.brief-context {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-text-subtle);
  letter-spacing: .04em;
}
.brief-body { padding: var(--nq-space-6); display: grid; gap: var(--nq-space-6); }

/* Each labelled block of the brief. */
.brief-block { }
.brief-label {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-semi);
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--nq-text-subtle);
  margin-bottom: var(--nq-space-2);
  display: flex;
  align-items: center;
  gap: var(--nq-space-2);
}
.brief-block > p { font-size: var(--nq-size-sm); color: var(--nq-text); }
.brief-block ul { display: grid; gap: var(--nq-space-2); }
.brief-block li {
  font-size: var(--nq-size-sm);
  color: var(--nq-text);
  padding-left: var(--nq-space-4);
  position: relative;
}
.brief-block li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--nq-border-strong);
}

/* Two-up inside the brief, for reciprocal facts (owner / contact route). */
.brief-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--nq-space-6);
}
@media (max-width: 640px) { .brief-pair { grid-template-columns: minmax(0,1fr); } }

.brief-footer {
  padding: var(--nq-space-4) var(--nq-space-6);
  border-top: 1px solid var(--nq-rule);
  background: var(--nq-surface-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-3);
  align-items: center;
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-text-subtle);
}

/* Unknowns are a feature. Never hide them. */
.brief-unknowns {
  border: 1px solid var(--nq-review-border);
  background: var(--nq-review-bg);
  border-radius: var(--nq-radius);
  padding: var(--nq-space-4) var(--nq-space-5);
}
.brief-unknowns .brief-label { color: var(--nq-review); }
.brief-unknowns li::before { background: var(--nq-review); }

/* ════════════════════════════════════════════════ 13. PRODUCT CHROME

   Synthetic application UI. Reads as software, not as marketing. This is
   where visual complexity is allowed; the marketing surface stays calm.   */

.product-frame {
  border: 1px solid var(--nq-product-border);
  border-radius: var(--nq-radius-lg);
  overflow: hidden;
  background: var(--nq-product-bg);
  box-shadow: var(--nq-shadow-lg);
}
.product-bar {
  display: flex;
  align-items: center;
  gap: var(--nq-space-3);
  padding: var(--nq-space-3) var(--nq-space-5);
  background: var(--nq-product-rail);
  color: var(--nq-text-on-ink);
}
.product-bar-title { font-size: var(--nq-size-xs); font-weight: var(--nq-weight-semi); }
.product-bar-sub {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-product-rail-ink);
  letter-spacing: .04em;
}
.product-bar-mark { opacity: .9; flex-shrink: 0; color: var(--nq-text-on-ink); }
.product-canvas { padding: var(--nq-space-5); }
.product-panel {
  background: var(--nq-product-panel);
  border: 1px solid var(--nq-product-border);
  border-radius: var(--nq-radius);
  padding: var(--nq-space-5);
}
.product-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nq-space-3);
  padding: var(--nq-space-4) var(--nq-space-5);
  border-top: 1px solid var(--nq-product-border);
  background: var(--nq-surface-subtle);
}
.product-foot .mono { color: var(--nq-text-subtle); }

/* A named person with their role. */
.person-row { display: flex; align-items: center; gap: var(--nq-space-3); }
.person-initials {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--nq-radius-pill);
  background: var(--nq-brand-ink);
  color: var(--nq-text-on-ink);
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-bold);
  letter-spacing: .04em;
}
.person-row b { font-size: var(--nq-size-sm); display: block; }
.person-row small { font-size: var(--nq-size-xs); color: var(--nq-text-muted); display: block; }

/* An audit trail. Used for approval history and source history. */
.trail { display: grid; gap: var(--nq-space-3); }
.trail li {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: var(--nq-space-3);
  align-items: start;
  position: relative;
}
.trail li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--nq-border-strong);
}
.trail li:first-child::before { background: var(--nq-observed); }
.trail b { font-size: var(--nq-size-sm); font-weight: var(--nq-weight-medium); display: block; }
.trail small {
  grid-column: 2;
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-text-subtle);
  display: block;
  margin-top: 1px;
  min-width: 0;
}

/* Tabs — the product demo switcher. Accessible tab semantics required. */
.tab-list {
  display: flex;
  gap: var(--nq-space-1);
  overflow-x: auto;
  padding-bottom: var(--nq-space-2);
  scrollbar-width: thin;
}
.tab-button {
  flex: 0 0 auto;
  padding: var(--nq-space-2) var(--nq-space-4);
  border-radius: var(--nq-radius-pill);
  border: 1px solid var(--nq-border);
  background: var(--nq-surface);
  font-size: var(--nq-size-xs);
  font-weight: var(--nq-weight-semi);
  color: var(--nq-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nq-dur-fast) var(--nq-ease);
}
.tab-button:hover { border-color: var(--nq-border-strong); color: var(--nq-text); }
.tab-button[aria-selected="true"] {
  background: var(--nq-brand-ink);
  border-color: var(--nq-brand-ink);
  color: var(--nq-text-on-ink);
}
.tab-panel[hidden] { display: none; }

/* ══════════════════════════════════════════════════ 14. FLOW & PROCESS */

/* The operating chain, as a horizontal run that wraps rather than scrolls. */
.chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--nq-space-2);
}
.chain-step {
  flex: 1 1 150px;
  min-width: 0;
  padding: var(--nq-space-4);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  background: var(--nq-surface-raised);
}
.chain-step-index {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-bold);
  color: var(--nq-text-subtle);
  letter-spacing: .08em;
}
.chain-step h4 { margin: var(--nq-space-2) 0 var(--nq-space-1); font-size: var(--nq-size-sm); }
.chain-step p { font-size: var(--nq-size-xs); color: var(--nq-text-muted); line-height: 1.5; }

/* The decision boundary in the chain. This is the product's whole point,
   so it is the one step allowed to look different. */
.chain-step.is-gate {
  border-color: var(--nq-brand-accent);
  background: var(--nq-observed-bg);
  box-shadow: inset 0 0 0 1px var(--nq-brand-accent);
}
.chain-step.is-gate .chain-step-index { color: var(--nq-observed); }
.chain-step.is-gate p { color: var(--nq-observed); }

.section-ink .chain-step { background: var(--nq-surface-ink-2); border-color: var(--nq-border-ink); }
.section-ink .chain-step p { color: var(--nq-text-on-ink-mute); }

/* Lane diagram — where Noustiq sits in the stack. */
.lane-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--nq-space-4);
  align-items: stretch;
}
.lane {
  padding: var(--nq-space-5);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  background: var(--nq-surface-raised);
}
.lane.is-core {
  border-color: var(--nq-brand-accent);
  background: var(--nq-observed-bg);
}
.lane-tag {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--nq-text-subtle);
}
.lane.is-core .lane-tag { color: var(--nq-observed); }
.lane h3 { font-size: var(--nq-size-h4); margin: var(--nq-space-2) 0; }
.lane p { font-size: var(--nq-size-xs); color: var(--nq-text-muted); }

/* Numbered editorial steps — dense, not cards. */
.step-list { display: grid; gap: 0; }
.step-item {
  display: grid;
  grid-template-columns: 56px minmax(0,1fr);
  gap: var(--nq-space-5);
  padding-block: var(--nq-space-6);
  border-bottom: 1px solid var(--nq-rule);
}
.step-item:last-child { border-bottom: 0; }
.step-index {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-bold);
  color: var(--nq-brand-accent-deep);
  letter-spacing: .08em;
  padding-top: 4px;
}
.step-item h3 { margin-bottom: var(--nq-space-2); }
.step-item p { color: var(--nq-text-muted); font-size: var(--nq-size-sm); max-width: 64ch; }
@media (max-width: 560px) {
  .step-item { grid-template-columns: minmax(0,1fr); gap: var(--nq-space-2); }
}

/* ══════════════════════════════════════════════════════════════ 14b. HERO

   Composition target: positioning takes roughly 40%, the product roughly 60%.
   The product visual must never outweigh the headline, which is why the copy
   column is fixed-minimum and the product column is the one that flexes.    */

.hero {
  padding-block: clamp(var(--nq-space-9), 5.5vw, var(--nq-space-11));
  position: relative;
  overflow: hidden;
}
/* One restrained field of light. No blobs, no parallax, no gradient scenery. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -30%;
  height: 80%;
  background: radial-gradient(ellipse 55% 50% at 40% 45%,
              color-mix(in srgb, var(--nq-brand-accent) 9%, transparent), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: clamp(var(--nq-space-7), 4.5vw, var(--nq-space-10));
  /* start, not center: centring a short copy column against a tall product
     column throws the headline off the fold. */
  align-items: start;
}
.hero-copy { max-width: 30rem; padding-top: var(--nq-space-4); }
.hero-product { min-width: 0; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: var(--nq-space-8); }
  .hero-copy { max-width: 38rem; }
}

/* The operating chain as a thin band directly beneath the hero. */
.chain-band {
  padding-block: var(--nq-space-6);
  background: var(--nq-surface-subtle);
  border-block: 1px solid var(--nq-border);
}

/* ────────────────────────────────────────────────────────── MODULE GRID */

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nq-space-4);
}
@media (max-width: 1040px) { .module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .module-grid { grid-template-columns: minmax(0,1fr); } }

.module {
  padding: var(--nq-space-5);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  background: var(--nq-surface-raised);
}
.module.is-pivot { border-color: var(--nq-brand-accent); background: var(--nq-observed-bg); }
.module-head { display: flex; align-items: center; gap: var(--nq-space-3); flex-wrap: wrap; }
.module-head h3 { font-size: var(--nq-size-h4); margin: 0; }
.module-headline {
  font-size: var(--nq-size-sm);
  font-weight: var(--nq-weight-medium);
  color: var(--nq-text);
  margin-top: var(--nq-space-3);
}
.module .mono { color: var(--nq-text-subtle); }

/* ───────────────────────────────────────────────────────────── METRICS

   Numbers the visitor produced themselves. Never used for a vendor claim.  */

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nq-space-4);
  padding-top: var(--nq-space-5);
  border-top: 1px solid var(--nq-rule);
}
@media (max-width: 560px) { .metric-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.metric-value {
  display: block;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  font-weight: var(--nq-weight-semi);
  letter-spacing: var(--nq-tracking-tight);
  color: var(--nq-text-strong);
  font-variant-numeric: tabular-nums;
}
.metric-label {
  display: block;
  font-size: var(--nq-size-xs);
  color: var(--nq-text-muted);
  margin-top: 2px;
}
.metric-value-lg { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); }
.annual {
  padding-top: var(--nq-space-5);
  border-top: 1px solid var(--nq-rule);
}

/* ═════════════════════════════════════════════════════ 15. EDITORIAL */

/* Full-bleed statement band. Used sparingly; it is loud by design. */
.statement {
  padding-block: clamp(var(--nq-space-10), 7vw, var(--nq-space-12));
}
.statement blockquote {
  font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2.05rem);
  line-height: 1.28;
  letter-spacing: var(--nq-tracking-tight);
  font-weight: var(--nq-weight-medium);
  max-width: 24ch;
  color: var(--nq-text-strong);
}
.section-ink .statement blockquote { color: var(--nq-text-on-ink); }
.statement-support { max-width: 46ch; color: var(--nq-text-muted); font-size: var(--nq-size-sm); }

/* Contrast pair: what a lead gives you vs what a brief gives you. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--nq-space-5); }
@media (max-width: 760px) { .compare { grid-template-columns: minmax(0,1fr); } }
.compare-col {
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  overflow: hidden;
}
.compare-col.is-primary { border-color: var(--nq-brand-accent); box-shadow: var(--nq-shadow-md); }
.compare-head {
  padding: var(--nq-space-5);
  border-bottom: 1px solid var(--nq-border);
  background: var(--nq-surface-subtle);
}
.compare-col.is-primary .compare-head { background: var(--nq-observed-bg); border-bottom-color: var(--nq-observed-border); }
.compare-list { padding: var(--nq-space-3) var(--nq-space-5) var(--nq-space-5); }
.compare-list li {
  display: flex;
  gap: var(--nq-space-3);
  align-items: flex-start;
  padding-block: var(--nq-space-3);
  border-bottom: 1px solid var(--nq-rule);
  font-size: var(--nq-size-sm);
}
.compare-list li:last-child { border-bottom: 0; }
.compare-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--nq-text-subtle); }
.compare-col.is-primary .compare-icon { color: var(--nq-observed); }

/* Buyer paths. */
.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--nq-space-5); }
@media (max-width: 900px) { .path-grid { grid-template-columns: minmax(0,1fr); } }
.path {
  display: flex;
  flex-direction: column;
  gap: var(--nq-space-4);
  padding: var(--nq-space-6);
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius-lg);
  background: var(--nq-surface-raised);
}
.path-audience {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--nq-brand-accent-deep);
}
.path-question { font-size: var(--nq-size-h4); font-weight: var(--nq-weight-semi); color: var(--nq-text-strong); }
.path p { font-size: var(--nq-size-sm); color: var(--nq-text-muted); }
.path-links { margin-top: auto; display: grid; gap: var(--nq-space-2); padding-top: var(--nq-space-2); }

.section-ink .path { background: var(--nq-surface-ink-2); border-color: var(--nq-border-ink); }
.section-ink .path-question { color: var(--nq-text-on-ink); }
.section-ink .path-audience { color: var(--nq-brand-accent); }

/* Call-to-action panel. */
.cta-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: var(--nq-space-7);
  align-items: center;
  padding: clamp(var(--nq-space-7), 4vw, var(--nq-space-9));
  border-radius: var(--nq-radius-xl);
  background: var(--nq-surface-ink);
  color: var(--nq-text-on-ink);
}
.cta-panel h2 { color: var(--nq-text-on-ink); max-width: 22ch; }
.cta-panel p { color: var(--nq-text-on-ink-mute); max-width: 52ch; margin-top: var(--nq-space-4); }
@media (max-width: 780px) {
  .cta-panel { grid-template-columns: minmax(0,1fr); gap: var(--nq-space-6); }
}

/* ═════════════════════════════════════════════════════════ 16. FORMS */

.field { display: grid; gap: var(--nq-space-2); margin-bottom: var(--nq-space-5); }
.label {
  font-size: var(--nq-size-sm);
  font-weight: var(--nq-weight-semi);
  display: flex;
  align-items: baseline;
  gap: var(--nq-space-2);
}
.label-optional {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  color: var(--nq-text-subtle);
  font-weight: var(--nq-weight-regular);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hint { font-size: var(--nq-size-xs); color: var(--nq-text-muted); }

.input, .select, .textarea {
  width: 100%;
  height: 46px;
  padding-inline: var(--nq-space-4);
  background: var(--nq-surface);
  border: 1px solid var(--nq-border-strong);
  border-radius: var(--nq-radius);
  font-size: var(--nq-size-sm);
  color: var(--nq-text);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--nq-dur-fast) var(--nq-ease),
              box-shadow var(--nq-dur-fast) var(--nq-ease);
}
.textarea { height: auto; min-height: 112px; padding-block: var(--nq-space-3); resize: vertical; line-height: 1.6; }
.input::placeholder, .textarea::placeholder { color: var(--nq-text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--nq-text-subtle); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--nq-focus);
  box-shadow: var(--nq-focus-ring);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--nq-danger);
}

.select-wrap { position: relative; }
.select { padding-right: var(--nq-space-9); cursor: pointer; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: var(--nq-space-4);
  top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;
  border-right: 1.8px solid var(--nq-text-muted);
  border-bottom: 1.8px solid var(--nq-text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 var(--nq-space-5); }
@media (max-width: 620px) { .field-grid { grid-template-columns: minmax(0,1fr); } }

.choice-list { display: grid; gap: var(--nq-space-2); }
.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--nq-space-3);
  padding: var(--nq-space-4);
  border: 1px solid var(--nq-border-strong);
  border-radius: var(--nq-radius);
  background: var(--nq-surface);
  cursor: pointer;
  transition: border-color var(--nq-dur-fast) var(--nq-ease), background var(--nq-dur-fast) var(--nq-ease);
}
.choice:hover { border-color: var(--nq-text-subtle); background: var(--nq-surface-hover); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-mark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 1px;
  border: 1.8px solid var(--nq-border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.choice-mark::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--nq-action);
  transform: scale(0);
  transition: transform var(--nq-dur-fast) var(--nq-ease-out);
}
.choice:has(input:checked) { border-color: var(--nq-action); background: var(--nq-observed-bg); }
.choice:has(input:checked) .choice-mark { border-color: var(--nq-action); }
.choice:has(input:checked) .choice-mark::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--nq-focus); outline-offset: 2px; }
.choice-title { font-size: var(--nq-size-sm); font-weight: var(--nq-weight-semi); display: block; }
.choice-note { font-size: var(--nq-size-xs); color: var(--nq-text-muted); display: block; margin-top: 2px; }

/* Progressive form steps. */
.form-steps { display: flex; gap: var(--nq-space-2); margin-bottom: var(--nq-space-6); }
.form-step-pip {
  flex: 1;
  height: 3px;
  border-radius: var(--nq-radius-pill);
  background: var(--nq-border);
}
.form-step-pip.is-active { background: var(--nq-action); }
.form-step-pip.is-done { background: var(--nq-brand-accent-deep); }
.form-panel[hidden] { display: none; }

.error-summary {
  border: 1px solid var(--nq-danger-border);
  background: var(--nq-danger-bg);
  color: var(--nq-danger);
  border-radius: var(--nq-radius);
  padding: var(--nq-space-4) var(--nq-space-5);
  margin-bottom: var(--nq-space-5);
  font-size: var(--nq-size-sm);
}
.error-summary ul { margin-top: var(--nq-space-2); display: grid; gap: var(--nq-space-1); }
.error-summary a { text-decoration: underline; }
.field-error { font-size: var(--nq-size-xs); color: var(--nq-danger); font-weight: var(--nq-weight-medium); }

.notice {
  border: 1px solid var(--nq-border);
  background: var(--nq-surface-subtle);
  border-radius: var(--nq-radius);
  padding: var(--nq-space-4) var(--nq-space-5);
  font-size: var(--nq-size-sm);
}
.notice.is-review { border-color: var(--nq-review-border); background: var(--nq-review-bg); color: var(--nq-review); }
.notice.is-ok { border-color: var(--nq-observed-border); background: var(--nq-observed-bg); color: var(--nq-observed); }
/* A link inside a notice is a target, not inline prose (WCAG 2.2 AA 2.5.8). */
.notice a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: inherit;
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════ 17. NAVIGATION */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--nq-z-header);
  height: var(--nq-header-h);
  background: color-mix(in srgb, var(--nq-surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nq-dur) var(--nq-ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--nq-border); }
.header-inner { display: flex; align-items: center; gap: var(--nq-space-6); height: 100%; }

.brand { display: inline-flex; align-items: center; gap: var(--nq-space-2); flex-shrink: 0; }
.brand-symbol { width: 26px; height: 26px; }
.brand-word {
  font-weight: var(--nq-weight-bold);
  font-size: 1.06rem;
  letter-spacing: -.03em;
  color: var(--nq-text-strong);
}

.primary-nav { display: flex; align-items: center; gap: var(--nq-space-1); flex: 1; }
.primary-nav a {
  padding: var(--nq-space-2) var(--nq-space-3);
  border-radius: var(--nq-radius-sm);
  font-size: var(--nq-size-sm);
  font-weight: var(--nq-weight-medium);
  color: var(--nq-text-muted);
  transition: color var(--nq-dur-fast) var(--nq-ease), background var(--nq-dur-fast) var(--nq-ease);
}
.primary-nav a:hover { color: var(--nq-text); background: var(--nq-surface-hover); }
.primary-nav a[aria-current="page"] { color: var(--nq-text-strong); font-weight: var(--nq-weight-semi); }

.header-actions { display: flex; align-items: center; gap: var(--nq-space-3); }

.menu-button {
  display: none;
  width: 42px; height: 42px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--nq-border);
  border-radius: var(--nq-radius);
  cursor: pointer;
  color: var(--nq-text);
}
.menu-button span {
  display: block;
  width: 17px; height: 1.7px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

@media (max-width: 1000px) {
  .menu-button { display: inline-flex; }
  .primary-nav, .header-actions { display: none; }
  .site-header[data-open="true"] .primary-nav,
  .site-header[data-open="true"] .header-actions {
    display: flex;
    position: absolute;
    left: 0; right: 0;
    top: var(--nq-header-h);
    flex-direction: column;
    align-items: stretch;
    gap: var(--nq-space-1);
    background: var(--nq-surface);
    border-bottom: 1px solid var(--nq-border);
    padding: var(--nq-space-3) var(--nq-gutter);
    box-shadow: var(--nq-shadow-lg);
  }
  .site-header[data-open="true"] .header-actions {
    top: auto;
    box-shadow: none;
    border-top: 1px solid var(--nq-rule);
    padding-block: var(--nq-space-3) var(--nq-space-5);
  }
  .site-header[data-open="true"] .primary-nav a { padding: var(--nq-space-3); font-size: var(--nq-size-body); }
  .site-header[data-open="true"] .button { width: 100%; }
}

/* ════════════════════════════════════════════════════════ 18. FOOTER */

.site-footer {
  background: var(--nq-surface-ink);
  color: var(--nq-text-on-ink-mute);
  padding-block: var(--nq-space-11) var(--nq-space-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--nq-space-8);
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .footer-grid { grid-template-columns: minmax(0,1fr); } }

.footer-group h4 {
  font-family: var(--nq-font-mono);
  font-size: var(--nq-size-mono);
  font-weight: var(--nq-weight-semi);
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--nq-text-subtle);
  margin-bottom: var(--nq-space-4);
}
.footer-group ul { display: grid; gap: var(--nq-space-2); }
/* Footer links are navigation targets, so they carry the WCAG 2.2 AA
   24x24 minimum rather than collapsing to their text line box. */
.footer-group a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--nq-size-sm);
  color: var(--nq-text-on-ink-mute);
}
.footer-group a:hover { color: var(--nq-text-on-ink); }
.footer-group .brand-word { color: var(--nq-text-on-ink); }
.footer-blurb { max-width: 34ch; color: var(--nq-text-subtle); }

.footer-base {
  margin-top: var(--nq-space-10);
  padding-top: var(--nq-space-6);
  border-top: 1px solid var(--nq-border-ink);
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-4);
  justify-content: space-between;
  align-items: center;
  font-size: var(--nq-size-xs);
  color: var(--nq-text-subtle);
}

/* ════════════════════════════════════════════════════════ 19. MOTION */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--nq-dur-slow) var(--nq-ease-out),
              transform var(--nq-dur-slow) var(--nq-ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }

/* ═════════════════════════════════════════════════════ 20. UTILITIES */

/* A blocking condition called out inside a workflow step. */
.blocker {
  padding: var(--nq-space-4);
  background: var(--nq-surface-subtle);
  border-left: 2px solid var(--nq-brand-accent);
  border-radius: var(--nq-radius-sm);
}
.blocker .mono { color: var(--nq-text-subtle); }

/* Release note bullets. */
.release-note {
  padding-left: var(--nq-space-5);
  position: relative;
  font-size: var(--nq-size-sm);
  color: var(--nq-text-muted);
}
.release-note::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--nq-brand-accent);
}

.center-row { justify-content: center; }

.stack   { display: grid; gap: var(--nq-space-3); }
.stack-4 { display: grid; gap: var(--nq-space-4); }
.stack-6 { display: grid; gap: var(--nq-space-6); }
.row     { display: flex; align-items: center; gap: var(--nq-space-3); }
.row-wrap { flex-wrap: wrap; }
.push    { margin-left: auto; }
.center  { text-align: center; }

.mt-2 { margin-top: var(--nq-space-2); }
.mt-3 { margin-top: var(--nq-space-3); }
.mt-4 { margin-top: var(--nq-space-4); }
.mt-5 { margin-top: var(--nq-space-5); }
.mt-6 { margin-top: var(--nq-space-6); }
.mt-7 { margin-top: var(--nq-space-7); }
.mt-8 { margin-top: var(--nq-space-8); }
.mt-9 { margin-top: var(--nq-space-9); }
.mb-2 { margin-bottom: var(--nq-space-2); }
.mb-3 { margin-bottom: var(--nq-space-3); }
.mb-5 { margin-bottom: var(--nq-space-5); }
.mb-6 { margin-bottom: var(--nq-space-6); }

/* A form step heading is an <h2> for document outline, but should read at h3
   scale inside a card. */
.h3-size { font-size: var(--nq-size-h3); }

/* ══════════════════════════════════════════════ 20b. ADMIN CONSOLE
   The evaluation inbox. Shares the design system so it cannot drift. */

.admin-body { background: var(--nq-surface-subtle); }
.admin-shell { padding-block: var(--nq-space-7) var(--nq-space-11); }
.admin-head { padding-bottom: var(--nq-space-4); border-bottom: 1px solid var(--nq-border); }
.admin-head .mono { color: var(--nq-text-subtle); }

.admin-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nq-space-3);
  align-items: flex-end;
  padding-top: var(--nq-space-5);
  border-top: 1px solid var(--nq-rule);
}
.admin-form .field { margin-bottom: 0; }
.admin-field-status { flex: 0 0 auto; min-width: 170px; }
.admin-field-note { flex: 1 1 240px; min-width: 0; }

a.status-chip { transition: border-color var(--nq-dur-fast) var(--nq-ease); }
a.status-chip:hover { border-color: var(--nq-text-subtle); }

/* ═════════════════════════════════════════════════════════ 21. PRINT
   A procurement reviewer will print the Trust Center. Make that readable. */

@media print {
  .site-header, .site-footer, .menu-button, .tab-list, .cta-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .section-sm { padding-block: var(--nq-space-5); }
  .section-ink { background: #fff; color: #000; }
  .card, .table-scroll, .brief, .gate {
    border-color: var(--nq-print-border);
    box-shadow: none;
    break-inside: avoid;
  }
  a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 90%;
    color: var(--nq-print-muted);
  }
  .status-chip { border-color: var(--nq-print-border-strong); color: #000; }
}


/* ============================================================
   NOUSTIQ KNOWLEDGE FOUNDATION
   Quiet editorial layouts for long-form search / research content.
   ============================================================ */
.kb-hub-hero { border-bottom: 1px solid var(--nq-rule); }
.kb-hub-facts { display:flex; flex-wrap:wrap; gap:var(--nq-space-3); margin-top:var(--nq-space-6); }
.kb-hub-facts span,
.kb-meta span,
.kb-card-category { font-size:var(--nq-size-xs); color:var(--nq-text-muted); }
.kb-hub-facts span { border:1px solid var(--nq-rule); border-radius:999px; padding:.48rem .75rem; background:var(--nq-surface); }
.kb-meta { display:flex; flex-wrap:wrap; gap:var(--nq-space-4); margin-top:var(--nq-space-5); }
.kb-prose { max-width:76ch; font-size:1.04rem; line-height:1.78; }
.kb-prose h2 { scroll-margin-top:7rem; padding-top:var(--nq-space-2); border-top:1px solid var(--nq-rule); }
.kb-prose h2:first-child { border-top:0; padding-top:0; }
.kb-prose h3 { scroll-margin-top:7rem; }
.kb-prose strong { color:var(--nq-text-strong); }
.kb-topic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--nq-space-5); }
.kb-topic-card { min-height:100%; }
.kb-topic-card h3 { margin-bottom:var(--nq-space-3); }
.kb-topic-card ul { margin:var(--nq-space-4) 0 0; padding-left:1.15rem; }
.kb-topic-card li + li { margin-top:.45rem; }
.kb-principles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--nq-space-5); }
.kb-policy-nav { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--nq-space-6); }
.kb-policy-nav a { font-size:var(--nq-size-sm); }
@media (max-width: 900px) {
  .kb-topic-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .kb-topic-grid, .kb-principles { grid-template-columns:1fr; }
  .kb-prose { font-size:1rem; line-height:1.72; }
}