:root {
  --nf-navy: #0B1F33;
  --nf-teal: #0F7B81;
  --nf-aqua: #2EA8A9;
  --nf-muted: #516477;
  --nf-line: #D9E4EA;
  --nf-paper: #F7FAFC;
  --nf-wash: #EEF5F6;
}

body {
  background: var(--nf-paper);
  color: var(--nf-navy);
}

nav {
  background: rgb(247 250 252 / 94%);
  border-color: var(--nf-line);
}

nav img {
  width: 196px;
}

.eyebrow,
h1 em,
.number,
.points li::before,
.chips span,
.docline span,
.screen-proof,
.problem-bridge {
  color: var(--nf-teal);
}

.btn {
  background: var(--nf-navy);
  border-color: var(--nf-navy);
}

.btn.secondary {
  color: var(--nf-navy);
  border-color: #B8C9D4;
}

.visual,
.example,
.document,
#role-insight,
.pillar-grid article {
  border-color: var(--nf-line);
}

.flow,
.trust,
.future-roles,
.governance-feature,
.showcase,
.services-compact {
  background: var(--nf-wash);
}

.dark,
.governance-example,
.security-section {
  background: var(--nf-navy);
}

.dark .eyebrow,
.security-section .eyebrow {
  color: #7AD3CE;
}

.dark p,
.security-section .section-heading > p {
  color: #B9D0D5;
}

.diligence-footer {
  background: #EAF2F5;
  border-color: var(--nf-line);
}

.footer-brand img {
  width: 196px;
}

/* Use the supplied approved master directly in HTML image contexts. The v2 SVG
   remains available as the repository master, but external image references
   inside an <img>-loaded SVG are not consistently painted by browsers. */
nav img,
.hub-brand img,
.footer-brand img {
  content: url("/marketing/site/neurofolio-approved-wordmark.png");
}

.hub-brand img,
.footer-brand img {
  mix-blend-mode: multiply;
}

a:focus-visible,
button:focus-visible {
  outline-color: var(--nf-aqua);
}

@media (max-width: 850px) {
  nav img,
  .footer-brand img {
    width: 168px;
  }
}