/* ============================================================
   VERIFYSHIELD AVIATION — CENTRALIZED DESIGN SYSTEM
   verifyshield-core.css · v1.2 · June 2026
   Governing: Quiet Architect Positioning Brief v0.3 · Lexicon v1.6.9
   v1.2: Restored slate-blue third color family, dark COI variant,
   gold accent on "Shield" logo, fixed hero button contrast.
   One stylesheet, every page.
   Pages may not introduce local colors, fonts, or variants.

   THE GOLD RULE — gold may touch only:
   (1) one emphasized headline phrase per page (.vs-mark)
   (2) the two proof actions (.vs-btn--gold: hero primary,
       nav Verify Integrity) — never more than one per surface
   (3) certificate rules, tags, and seal
   (4) section eyebrow ticks
   (5) dark-panel eyebrows and links
   (6) the pull-quote rule and footer tagline
   (7) the "Shield" word in the logo (.vs-accent-gold)
   Gold never fills backgrounds, never colors body text.
   ============================================================ */

/* ------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {
  /* Color — registry ink, paper artifact, gold seal */
  --vs-paper:        #F6F4EE;   /* page background */
  --vs-surface:      #FFFFFF;   /* cards */
  --vs-stock:        #FFFDF6;   /* certificate stock */
  --vs-ink:          #16202C;   /* primary text */
  --vs-ink-2:        #46505C;   /* secondary text */
  --vs-ink-3:        #6B7480;   /* captions, meta */
  --vs-rule:         #D6D2C6;   /* hairline rules */
  --vs-rule-strong:  #AEA995;   /* emphasized rules */
  --vs-exhibit:      #F1EEE3;   /* mono/exhibit field background */

  /* Navy — header, hero, footer */
  --vs-navy:         #101A26;   /* dark surface family */
  --vs-navy-2:       #18242F;   /* elevated card on navy */
  --vs-navy-rule:    #2A3744;   /* rules on navy */
  --vs-navy-ink:     #E9E7DE;   /* text on navy */
  --vs-navy-ink-2:   #9AA5B0;   /* secondary text on navy */

  /* Slate — aviation instrument blue (services, sovereignty, ARR) */
  --vs-slate:        #13212F;   /* slate dark surface */
  --vs-slate-2:      #1B2C3C;   /* elevated card on slate */
  --vs-slate-rule:   rgba(150,180,208,0.16); /* rules on slate */
  --vs-slate-ink:    #E9E7DE;   /* text on slate */
  --vs-slate-ink-2:  #9AAFC0;   /* secondary text on slate */

  --vs-gold-deep:    #7A5C1D;   /* borders, labels, ticks on light — AA on paper */
  --vs-gold:         #C9A24B;   /* gold action fill (two actions site-wide) */
  --vs-gold-bright:  #DCBC6C;   /* emphasis text, eyebrows, links on dark */

  --vs-cite:         #2F557F;   /* links on light — legal-citation blue */
  --vs-verify:       #1E6B41;   /* semantic: confirmed integrity (light) */
  --vs-verify-brt:   #4CAF77;   /* semantic: confirmed integrity (dark) */

  /* Type */
  --vs-font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --vs-font-body:    "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --vs-font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, Menlo, monospace;

  --vs-h1: clamp(2.5rem, 4.9vw, 3.6rem);
  --vs-h2: clamp(1.8rem, 3.1vw, 2.4rem);
  --vs-h3: 1.16rem;
  --vs-body: 1.03rem;
  --vs-small: 0.875rem;
  --vs-caption: 0.8rem;
  --vs-eyebrow: 0.76rem;

  /* Space — 8px base scale */
  --vs-s1: 0.25rem;  --vs-s2: 0.5rem;   --vs-s3: 0.75rem;
  --vs-s4: 1rem;     --vs-s5: 1.5rem;   --vs-s6: 2rem;
  --vs-s7: 3rem;     --vs-s8: 4rem;     --vs-s9: 6rem;

  /* Structure */
  --vs-max:   1120px;
  --vs-prose: 70ch;
  --vs-radius: 2px;
  --vs-border: 1px solid var(--vs-rule);
  --vs-shadow-cert: 0 2px 0 rgba(0,0,0,.12), 0 28px 56px -24px rgba(0,0,0,.55);
  --vs-shadow-card: 0 1px 0 rgba(22,32,44,.05);
}

/* ------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--vs-font-body);
  font-size: var(--vs-body);
  line-height: 1.65;
  color: var(--vs-ink);
  background: var(--vs-paper);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }

h1, h2 {
  font-family: var(--vs-font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--vs-s4);
  text-wrap: balance;
}
h1 { font-size: var(--vs-h1); }
h2 { font-size: var(--vs-h2); }
h3 {
  font-family: var(--vs-font-body);
  font-size: var(--vs-h3);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 var(--vs-s2);
}
p { margin: 0 0 var(--vs-s4); max-width: var(--vs-prose); }
a { color: var(--vs-cite); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--vs-gold-deep); outline-offset: 3px; border-radius: var(--vs-radius); }

.vs-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--vs-ink); color: var(--vs-paper);
  padding: var(--vs-s2) var(--vs-s4); z-index: 100;
}
.vs-skip:focus { left: var(--vs-s4); top: var(--vs-s2); }

/* Headline emphasis — THE gold moment, one per page */
.vs-mark { font-style: italic; color: var(--vs-gold-bright); }
.vs-light .vs-mark, .vs-mark--onlight { color: var(--vs-gold-deep); }

/* Gold accent for logo "Shield" word */
.vs-accent-gold { color: var(--vs-gold-bright); }

/* Utility text roles */
.vs-eyebrow {
  font-family: var(--vs-font-mono);
  font-size: var(--vs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-ink-2);
  display: block;
  margin-bottom: var(--vs-s4);
}
.vs-eyebrow::before {              /* gold section tick */
  content: "";
  display: inline-block;
  width: 22px; height: 2px;
  background: var(--vs-gold-deep);
  vertical-align: middle;
  margin-right: var(--vs-s3);
}
.vs-caption { font-size: var(--vs-caption); color: var(--vs-ink-3); line-height: 1.55; }
.vs-lede { font-size: 1.14rem; color: var(--vs-ink-2); }
.vs-mono { font-family: var(--vs-font-mono); }

/* ------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------ */
.vs-wrap { max-width: var(--vs-max); margin: 0 auto; padding: 0 var(--vs-s5); }
.vs-section { padding: var(--vs-s9) 0; border-top: var(--vs-border); }
.vs-section--flush { border-top: none; }
.vs-grid { display: grid; gap: var(--vs-s5); }
.vs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vs-grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 980px) {
  .vs-grid--3, .vs-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .vs-grid--2, .vs-grid--3, .vs-grid--5 { grid-template-columns: 1fr; }
  .vs-section { padding: var(--vs-s8) 0; }
}

/* ------------------------------------------------------------
   4. DARK SURFACES (shared family)
   ------------------------------------------------------------ */
.vs-dark {
  background: var(--vs-navy);
  color: var(--vs-navy-ink);
}
.vs-dark h1, .vs-dark h2, .vs-dark h3 { color: #FFFFFF; }
.vs-dark p { color: var(--vs-navy-ink); }
.vs-dark .vs-lede { color: var(--vs-navy-ink-2); }
.vs-dark .vs-caption { color: var(--vs-navy-ink-2); }
.vs-dark a { color: var(--vs-gold-bright); }
.vs-dark .vs-eyebrow { color: var(--vs-gold-bright); }
.vs-dark .vs-eyebrow::before { background: var(--vs-gold-bright); }
.vs-dark .vs-textlink { color: var(--vs-gold-bright); }
.vs-dark .vs-accent-gold { color: var(--vs-gold-bright); }

/* Slate surface — aviation instrument panel blue */
.vs-slate {
  background: var(--vs-slate);
  color: var(--vs-slate-ink);
}
.vs-slate h1, .vs-slate h2, .vs-slate h3 { color: #FFFFFF; }
.vs-slate p { color: var(--vs-slate-ink); }
.vs-slate .vs-lede { color: var(--vs-slate-ink-2); }
.vs-slate .vs-caption { color: var(--vs-slate-ink); }
.vs-slate a { color: var(--vs-gold-bright); }
.vs-slate .vs-eyebrow { color: var(--vs-gold-bright); }
.vs-slate .vs-eyebrow::before { background: var(--vs-gold-bright); }
.vs-slate .vs-textlink { color: var(--vs-gold-bright); }
.vs-slate .vs-accent-gold { color: var(--vs-gold-bright); }
.vs-slate .vs-stats .vs-stat { border-top-color: var(--vs-gold-bright); }
.vs-slate .vs-stat__value { color: #FFFFFF; }
.vs-slate .vs-stat__label { color: var(--vs-slate-ink); }
.vs-slate .vs-quote { border-left-color: var(--vs-gold-bright); }
.vs-slate .vs-quote p { color: #FFFFFF; }
.vs-slate .vs-grid {
  background: var(--vs-slate-rule);
  border-color: var(--vs-slate-rule);
}
.vs-slate .vs-card--step { border-top-color: rgba(220,188,108,0.4); }
.vs-slate .vs-card--step .vs-card__num { color: var(--vs-gold-bright); }
.vs-slate .vs-card--step h3 { color: #FFFFFF; }
.vs-slate .vs-card--step p { color: var(--vs-slate-ink-2); }

/* Service cards on slate — dark boxes, gold hover, curved corners (v12) */
.vs-slate .vs-card--service {
  background: var(--vs-slate-2);
  border: 1px solid var(--vs-slate-rule);
  border-radius: 6px;
  border-top: none;
  padding: 40px;
  transition: border-color .3s ease, transform .3s ease;
}
.vs-slate .vs-card--service:hover {
  border-color: var(--vs-gold-bright);
  transform: translateY(-3px);
}
.vs-slate .vs-card--service .vs-card__kicker {
  color: var(--vs-gold-bright);
}
.vs-slate .vs-card--service h3 {
  font-family: var(--vs-font-display);
  font-size: 1.65rem;
  font-weight: 600;
  margin: 14px 0 4px;
  color: #FFFFFF;
}
.vs-slate .vs-card--service p {
  font-size: 0.97rem;
  color: var(--vs-slate-ink);
  opacity: 0.92;
}
.vs-slate .vs-card--service .vs-textlink {
  margin-top: auto;
}
/* Sentry module on slate — top rule instead of left gold bar */
.vs-slate .vs-card__module {
  background: transparent;
  border-left: none;
  border-top: 1px solid var(--vs-slate-rule);
  margin-top: 20px;
  padding: 18px 0 0;
  font-size: 0.88rem;
  color: var(--vs-slate-ink-2);
}
.vs-slate .vs-card__module strong {
  color: var(--vs-gold-bright);
  font-weight: 500;
}

/* ------------------------------------------------------------
   5. NAVIGATION (dark, site-wide)
   ------------------------------------------------------------ */
.vs-header {
  background: var(--vs-navy);
  border-bottom: 1px solid var(--vs-navy-rule);
  position: sticky; top: 0; z-index: 50;
}
.vs-nav {
  max-width: var(--vs-max); margin: 0 auto;
  padding: 0 var(--vs-s5);
  display: flex; align-items: center; gap: var(--vs-s5);
  min-height: 68px;
}
.vs-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vs-font-display);
  font-size: 1.34rem; font-weight: 600;
  color: #FFFFFF; text-decoration: none;
  letter-spacing: -0.01em; margin-right: auto;
}
.vs-logo { width: 26px; height: 30px; flex: none; display: block; }
.vs-nav__links { display: flex; align-items: center; gap: var(--vs-s5); }
.vs-nav__link {
  font-size: var(--vs-small); font-weight: 500;
  color: var(--vs-navy-ink); text-decoration: none;
  padding: var(--vs-s2) 0; border-bottom: 2px solid transparent;
}
.vs-nav__link:hover, .vs-nav__link[aria-current="page"] { border-bottom-color: var(--vs-gold-bright); color: #FFFFFF; }

/* Dropdown */
.vs-drop { position: relative; }
.vs-drop__toggle {
  font: inherit; font-size: var(--vs-small); font-weight: 500;
  background: none; border: none; cursor: pointer;
  color: var(--vs-navy-ink); padding: var(--vs-s2) 0;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
}
.vs-drop__toggle:hover { border-bottom-color: var(--vs-gold-bright); color: #FFFFFF; }
.vs-drop__toggle::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.vs-drop__menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--vs-surface); border: var(--vs-border);
  border-top: 2px solid var(--vs-gold-deep);
  border-radius: var(--vs-radius); box-shadow: 0 18px 40px -18px rgba(0,0,0,.4);
  min-width: 260px; padding: var(--vs-s2) 0; margin: 0; list-style: none;
  display: none;
}
.vs-drop[data-open="true"] .vs-drop__menu { display: block; }
.vs-drop__menu li a {
  display: block; padding: var(--vs-s2) var(--vs-s4);
  font-size: var(--vs-small); color: var(--vs-ink); text-decoration: none;
}
.vs-drop__menu li a:hover { background: var(--vs-exhibit); }

/* Mobile nav */
.vs-nav__burger {
  display: none; background: none; border: 1px solid var(--vs-navy-rule);
  border-radius: var(--vs-radius); padding: var(--vs-s2) var(--vs-s3);
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  letter-spacing: .08em; cursor: pointer; color: var(--vs-navy-ink);
}
@media (max-width: 920px) {
  .vs-nav__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--vs-navy); border-bottom: 1px solid var(--vs-navy-rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--vs-s3) var(--vs-s5) var(--vs-s5);
  }
  .vs-nav[data-open="true"] .vs-nav__links { display: flex; }
  .vs-nav__burger { display: block; }
  .vs-nav__link, .vs-drop__toggle { padding: var(--vs-s3) 0; width: 100%; text-align: left; }
  .vs-drop__menu {
    position: static; transform: none; box-shadow: none;
    background: transparent; border: none; border-left: 2px solid var(--vs-navy-rule);
    margin: 0 0 var(--vs-s2) var(--vs-s3); min-width: 0;
  }
  .vs-drop__menu li a { color: var(--vs-navy-ink); }
  .vs-drop__menu li a:hover { background: var(--vs-navy-2); }
  .vs-nav .vs-btn { width: 100%; justify-content: center; margin-top: var(--vs-s3); }
}

/* ------------------------------------------------------------
   6. BUTTONS & LINKS
   ------------------------------------------------------------ */
.vs-btn {
  display: inline-flex; align-items: center; gap: var(--vs-s2);
  font-family: var(--vs-font-body); font-size: var(--vs-small); font-weight: 600;
  letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  padding: 0.74rem 1.4rem; border-radius: var(--vs-radius);
  background: var(--vs-ink); color: var(--vs-paper);
  border: 1px solid var(--vs-ink);
  transition: background-color .15s ease, border-color .15s ease;
}
.vs-btn:hover { background: #243140; }
.vs-btn--secondary { background: transparent; color: var(--vs-ink); }
.vs-btn--secondary:hover { background: var(--vs-exhibit); }
.vs-btn--gold {                       /* proof actions only — max one per surface */
  background: var(--vs-gold); border-color: var(--vs-gold);
  color: #FFFFFF; font-weight: 700;
}
.vs-btn--gold:hover { background: var(--vs-gold-bright); border-color: var(--vs-gold-bright); color: #FFFFFF; }
.vs-btn--ghost-dark {                 /* secondary on dark surfaces */
  background: transparent; color: var(--vs-navy-ink);
  border-color: var(--vs-gold-deep);
}
.vs-btn--ghost-dark:hover { border-color: var(--vs-gold-bright); color: #FFFFFF; background: rgba(220,188,108,.06); }
.vs-btn--compact { padding: 0.52rem 1.05rem; }
.vs-btn[aria-disabled="true"] {
  background: var(--vs-exhibit); color: var(--vs-ink-3);
  border-color: var(--vs-rule); cursor: not-allowed;
}
.vs-textlink {
  font-size: var(--vs-small); font-weight: 600;
  color: var(--vs-cite); text-decoration: none;
}
.vs-textlink::after { content: " →"; }
.vs-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------
   7. CARD SYSTEM
   ------------------------------------------------------------ */
.vs-card {
  background: var(--vs-surface);
  border: 1px solid var(--vs-rule-strong);
  border-radius: var(--vs-radius);
  padding: var(--vs-s5);
  box-shadow: var(--vs-shadow-card);
}
/* Service cards: heavier head rule, kicker */
.vs-card--service { display: flex; flex-direction: column; gap: var(--vs-s3); border-top: 3px solid var(--vs-ink); }
.vs-card--service .vs-card__kicker {
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  letter-spacing: .1em; text-transform: uppercase; color: var(--vs-gold-deep);
}
.vs-card--service h3 { font-family: var(--vs-font-display); font-size: 1.42rem; font-weight: 600; }
.vs-card--service .vs-textlink { margin-top: auto; }
.vs-card__note {
  border-top: 1px dashed var(--vs-rule);
  padding-top: var(--vs-s3);
  font-size: var(--vs-caption); color: var(--vs-ink-3);
}
/* Nested module block (Sentry inside Continuity) */
.vs-card__module {
  background: var(--vs-exhibit); border-radius: var(--vs-radius);
  border-left: 2px solid var(--vs-gold-deep);
  padding: var(--vs-s3) var(--vs-s4); font-size: var(--vs-small);
  color: var(--vs-ink-2);
}
.vs-card__module strong { color: var(--vs-ink); }

/* Audience cards: white-filled, gold hover rule */
.vs-card--audience {
  display: flex; flex-direction: column; gap: var(--vs-s2);
  border-top: 2px solid var(--vs-rule-strong);
  transition: border-color .15s ease, transform .15s ease;
}
.vs-card--audience:hover { border-top-color: var(--vs-gold-deep); transform: translateY(-2px); }
.vs-card--audience h3 { font-size: 1rem; }
.vs-card--audience p { font-size: var(--vs-small); color: var(--vs-ink-2); margin-bottom: var(--vs-s3); }
.vs-card--audience .vs-textlink { margin-top: auto; font-size: var(--vs-caption); }

/* Numbered problem/process cards */
.vs-card--step { background: transparent; border: none; border-top: 2px solid var(--vs-ink); border-radius: 0; padding: var(--vs-s4) 0 0; box-shadow: none; }
.vs-card--step .vs-card__num {
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  color: var(--vs-gold-deep); letter-spacing: .1em; display: block; margin-bottom: var(--vs-s2);
}

/* ------------------------------------------------------------
   8. PULL-QUOTES (one per page; never testimonial-styled)
   ------------------------------------------------------------ */
.vs-quote {
  border-left: 3px solid var(--vs-gold-deep);
  padding-left: var(--vs-s5);
  margin: var(--vs-s6) 0;
  max-width: 56ch;
}
.vs-quote p {
  font-family: var(--vs-font-display);
  font-size: 1.5rem; font-style: italic; font-weight: 500;
  line-height: 1.38; color: var(--vs-ink); margin: 0;
}
.vs-quote--founder cite {
  display: block; margin-top: var(--vs-s3);
  font-family: var(--vs-font-mono); font-style: normal;
  font-size: var(--vs-caption); letter-spacing: .1em;
  text-transform: uppercase; color: var(--vs-ink-3);
}

/* ------------------------------------------------------------
   9. CERTIFICATE EXHIBIT — the proof artifact
   ------------------------------------------------------------ */
.vs-cert {
  background: var(--vs-stock);
  border: 1px solid var(--vs-gold-deep);
  outline: 1px solid rgba(122,92,29,.35);
  outline-offset: 4px;                       /* engraved double frame */
  border-radius: var(--vs-radius);
  box-shadow: var(--vs-shadow-cert);
  position: relative; overflow: hidden;
}
.vs-cert__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--vs-s3);
  padding: var(--vs-s3) var(--vs-s4);
  border-bottom: 1px solid var(--vs-gold-deep);
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vs-ink);
}
.vs-cert__tag {
  border: 1px solid var(--vs-gold-deep); border-radius: var(--vs-radius);
  padding: 2px 8px; color: var(--vs-gold-deep); font-size: 0.7rem;
}
.vs-cert__body { padding: var(--vs-s4); position: relative; }
.vs-cert__body::before {                     /* SPECIMEN watermark */
  content: attr(data-watermark);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--vs-font-mono); font-size: 3.4rem; letter-spacing: .3em;
  color: rgba(122,92,29,0.07); transform: rotate(-18deg);
  pointer-events: none; user-select: none;
}
.vs-cert__row {
  display: flex; justify-content: space-between; gap: var(--vs-s4);
  padding: var(--vs-s2) 0; border-bottom: 1px solid var(--vs-rule);
  font-size: var(--vs-small);
}
.vs-cert__row dt { color: var(--vs-ink-3); margin: 0; }
.vs-cert__row dd { font-family: var(--vs-font-mono); margin: 0; text-align: right; color: var(--vs-ink); }
.vs-fingerprint {
  margin-top: var(--vs-s4);
  background: var(--vs-exhibit); border-radius: var(--vs-radius);
  padding: var(--vs-s3) var(--vs-s4);
}
.vs-fingerprint__label {
  font-family: var(--vs-font-mono); font-size: 0.68rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vs-gold-deep); display: block; margin-bottom: var(--vs-s2);
}
.vs-fingerprint__value {
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  line-height: 1.7; word-break: break-all; color: var(--vs-ink);
}
.vs-cert__foot {
  margin-top: var(--vs-s4);
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--vs-s4);
}
.vs-cert__status {
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  color: var(--vs-verify); margin: 0;
}
/* Green dot + Active status indicator (v12-inspired) */
.vs-cert__indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--vs-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--vs-ink-3);
}
.vs-cert__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5BD08A;
  box-shadow: 0 0 0 3px rgba(91,208,138,0.16);
  flex: none;
}
.vs-cert--dark .vs-cert__indicator {
  color: var(--vs-navy-ink-2);
}

.vs-cert__seal { width: 54px; height: 54px; flex: none; opacity: .9; }

/* Dark variant — for use on navy/slate hero backgrounds */
.vs-cert--dark {
  background: linear-gradient(165deg, var(--vs-navy-2), var(--vs-navy));
  border-color: var(--vs-gold-deep);
  outline-color: rgba(220,188,108,0.25);
  color: var(--vs-navy-ink);
  box-shadow: 0 2px 0 rgba(0,0,0,.2), 0 28px 56px -24px rgba(0,0,0,.7);
}
.vs-cert--dark .vs-cert__head {
  border-bottom-color: var(--vs-gold-deep);
  color: var(--vs-navy-ink);
}
.vs-cert--dark .vs-cert__tag {
  color: var(--vs-gold-bright);
  border-color: var(--vs-gold-bright);
}
.vs-cert--dark .vs-cert__body::before {
  color: rgba(220,188,108,0.07);
}
.vs-cert--dark .vs-cert__row {
  border-bottom-color: var(--vs-navy-rule);
}
.vs-cert--dark .vs-cert__row dt { color: var(--vs-navy-ink-2); }
.vs-cert--dark .vs-cert__row dd { color: var(--vs-navy-ink); }
.vs-cert--dark .vs-fingerprint {
  background: rgba(255,255,255,.04);
}
.vs-cert--dark .vs-fingerprint__label {
  color: var(--vs-gold-bright);
}
.vs-cert--dark .vs-fingerprint__value {
  color: var(--vs-gold);
}
.vs-cert--dark .vs-cert__status {
  color: var(--vs-verify-brt);
}
.vs-cert--dark .vs-cert__seal circle,
.vs-cert--dark .vs-cert__seal path {
  stroke: var(--vs-gold-bright);
}
.vs-cert--dark .vs-cert__seal text {
  fill: var(--vs-gold-bright);
}
.vs-cert--dark .vs-cert__guilloche {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2216%22%20viewBox%3D%220%200%2080%2016%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23DCBC6C%22%20stroke-width%3D%220.7%22%20opacity%3D%220.5%22%3E%3Cpath%20d%3D%22M0%208%20Q10%201%2020%208%20T40%208%20T60%208%20T80%208%22%2F%3E%3Cpath%20d%3D%22M0%208%20Q10%2015%2020%208%20T40%208%20T60%208%20T80%208%22%2F%3E%3Cpath%20d%3D%22M0%204%20Q10%20-3%2020%204%20T40%204%20T60%204%20T80%204%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q10%2019%2020%2012%20T40%2012%20T60%2012%20T80%2012%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

/* Stat band */
.vs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vs-s5); }
.vs-stat { border-top: 2px solid var(--vs-gold-deep); padding-top: var(--vs-s3); }
.vs-stat__value { font-family: var(--vs-font-display); font-size: 1.9rem; font-weight: 600; }
.vs-stat__label { font-size: var(--vs-caption); color: var(--vs-ink-2); margin-top: 2px; }
@media (max-width: 880px) { .vs-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vs-stats { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   10. PERIMETER BLOCKS
   ------------------------------------------------------------ */
.vs-perimeter {
  background: var(--vs-surface); border: 1px solid var(--vs-rule-strong);
  border-left: 4px solid var(--vs-ink);
  border-radius: var(--vs-radius);
  padding: var(--vs-s6);
  box-shadow: var(--vs-shadow-card);
}
.vs-perimeter h2, .vs-perimeter h3 { margin-top: 0; }
.vs-perimeter--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vs-s6); }
@media (max-width: 760px) { .vs-perimeter--two { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   11. DARK PUBLICATION BAND (ARR) — composes with .vs-dark / .vs-slate
   ------------------------------------------------------------ */
.vs-panel { border-top: 3px double var(--vs-gold-deep); }
.vs-issue {
  border: 1px solid var(--vs-navy-rule); border-top: 2px solid var(--vs-gold-bright);
  border-radius: var(--vs-radius);
  padding: var(--vs-s5); background: var(--vs-navy-2);
}
.vs-slate .vs-issue {
  border-color: var(--vs-slate-rule);
  background: var(--vs-slate-2);
}
.vs-issue__meta {
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vs-gold-bright);
  display: block; margin-bottom: var(--vs-s3);
}
.vs-issue h3 { font-family: var(--vs-font-display); font-size: 1.5rem; font-weight: 600; color: #FFFFFF; }

/* ------------------------------------------------------------
   12. FORMS
   ------------------------------------------------------------ */
.vs-field { margin-bottom: var(--vs-s4); }
.vs-field label {
  display: block; font-size: var(--vs-small); font-weight: 600;
  margin-bottom: var(--vs-s1);
}
.vs-field input, .vs-field select, .vs-field textarea {
  width: 100%; font: inherit; font-size: var(--vs-small);
  padding: 0.66rem 0.8rem; color: var(--vs-ink);
  background: var(--vs-surface); border: 1px solid var(--vs-rule-strong);
  border-radius: var(--vs-radius);
}
.vs-field input:focus, .vs-field select:focus, .vs-field textarea:focus {
  outline: 2px solid var(--vs-gold-deep); outline-offset: 1px;
}
.vs-field--error input, .vs-field--error select { border-color: #8C3A2E; }
.vs-field__msg { font-size: var(--vs-caption); margin-top: var(--vs-s1); }
.vs-field--error .vs-field__msg { color: #8C3A2E; }
.vs-form__success {
  border: 1px solid var(--vs-verify); border-left-width: 3px;
  border-radius: var(--vs-radius); padding: var(--vs-s4);
  font-size: var(--vs-small); color: var(--vs-verify); background: var(--vs-surface);
}

/* ------------------------------------------------------------
   13. FOOTER (dark)
   ------------------------------------------------------------ */
.vs-footer {
  background: var(--vs-navy);
  color: var(--vs-navy-ink);
  border-top: 3px double var(--vs-gold-deep);
  padding: var(--vs-s8) 0 var(--vs-s6);
  margin-top: var(--vs-s9);
}
.vs-footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--vs-s6);
}
@media (max-width: 880px) { .vs-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .vs-footer__grid { grid-template-columns: 1fr; } }
.vs-footer h4 {
  font-family: var(--vs-font-mono); font-size: var(--vs-caption);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vs-navy-ink-2); margin: 0 0 var(--vs-s3);
}
.vs-footer ul { list-style: none; margin: 0; padding: 0; }
.vs-footer li { margin-bottom: var(--vs-s2); }
.vs-footer a { font-size: var(--vs-small); color: var(--vs-navy-ink); text-decoration: none; }
.vs-footer a:hover { color: var(--vs-gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.vs-footer__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--vs-font-display); font-size: 1.25rem; font-weight: 600;
  color: #FFFFFF; margin-bottom: var(--vs-s2);
}
.vs-footer .vs-caption { color: var(--vs-navy-ink-2); }
.vs-footer__legalrow {
  border-top: 1px solid var(--vs-navy-rule); margin-top: var(--vs-s6); padding-top: var(--vs-s4);
  font-size: var(--vs-caption); color: var(--vs-navy-ink-2); line-height: 1.7;
}
.vs-footer__tagline { font-family: var(--vs-font-mono); letter-spacing: .08em; color: var(--vs-gold-bright); }

/* ------------------------------------------------------------
   14. SECURITY ENGRAVING (guilloché) — proof-artifact motif
   The visual language of certificates, bonds, currency.
   Static, ultra-low opacity. Never competes with text.
   ------------------------------------------------------------ */
.vs-engrave { position: relative; }
.vs-engrave > * { position: relative; z-index: 1; }
.vs-engrave::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%2296%22%20viewBox%3D%220%200%20240%2096%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23DCBC6C%22%20stroke-width%3D%220.6%22%3E%3Cpath%20d%3D%22M0%2024%20Q30%204%2060%2024%20T120%2024%20T180%2024%20T240%2024%22%2F%3E%3Cpath%20d%3D%22M0%2024%20Q30%2044%2060%2024%20T120%2024%20T180%2024%20T240%2024%22%2F%3E%3Cpath%20d%3D%22M0%2048%20Q30%2028%2060%2048%20T120%2048%20T180%2048%20T240%2048%22%2F%3E%3Cpath%20d%3D%22M0%2048%20Q30%2068%2060%2048%20T120%2048%20T180%2048%20T240%2048%22%2F%3E%3Cpath%20d%3D%22M0%2072%20Q30%2052%2060%2072%20T120%2072%20T180%2072%20T240%2072%22%2F%3E%3Cpath%20d%3D%22M0%2072%20Q30%2092%2060%2072%20T120%2072%20T180%2072%20T240%2072%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 360px 144px;
  opacity: 0.05;                 /* whisper-faint on navy */
  pointer-events: none;
}
/* Hairline gold rule that caps an engraved dark band top & bottom */
.vs-engrave--ruled { border-top: 1px solid rgba(220,188,108,.22); border-bottom: 1px solid rgba(220,188,108,.22); }

/* Certificate guilloché band — crisp, sits under the header line */
.vs-cert__guilloche {
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2216%22%20viewBox%3D%220%200%2080%2016%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237A5C1D%22%20stroke-width%3D%220.7%22%20opacity%3D%220.55%22%3E%3Cpath%20d%3D%22M0%208%20Q10%201%2020%208%20T40%208%20T60%208%20T80%208%22%2F%3E%3Cpath%20d%3D%22M0%208%20Q10%2015%2020%208%20T40%208%20T60%208%20T80%208%22%2F%3E%3Cpath%20d%3D%22M0%204%20Q10%20-3%2020%204%20T40%204%20T60%204%20T80%204%22%2F%3E%3Cpath%20d%3D%22M0%2012%20Q10%2019%2020%2012%20T40%2012%20T60%2012%20T80%2012%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat-x;
  background-size: auto 14px;
  border-bottom: 1px solid var(--vs-gold-deep);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) { } /* pattern is static; no motion */
/* ============================================================
   v17.5 — TARGETED FIXES (appended; override prior rules by source order)
   ============================================================ */

/* (1) GOLD/GHOST BUTTONS ON DARK & SLATE.
   .vs-dark a / .vs-slate a set link color to gold-bright, which was
   overriding button text — so gold buttons on the hero (e.g. "See How
   It Works") rendered gold-on-gold. Pin button text so gold buttons read
   white, matching the nav "Verify Integrity" button. */
.vs-dark a.vs-btn--gold, .vs-slate a.vs-btn--gold { color: #FFFFFF; }
.vs-dark a.vs-btn--ghost-dark, .vs-slate a.vs-btn--ghost-dark { color: var(--vs-navy-ink); }
.vs-dark a.vs-btn, .vs-slate a.vs-btn { color: var(--vs-paper); }

/* (2) PLAIN CONTENT CARDS (artifact trios) ON DARK/SLATE.
   Plain .vs-card has a light (#FFF) background, but on slate/dark the
   blanket heading rule made <h3> white and <p> light — white-on-white.
   Restore dark text for plain cards only; service/step/audience cards
   have dark backgrounds and keep their own light text. */
.vs-dark .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience),
.vs-slate .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) { color: var(--vs-ink-2); }
.vs-dark .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) h3,
.vs-slate .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) h3 { color: var(--vs-ink); }
.vs-dark .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) p,
.vs-slate .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) p { color: var(--vs-ink-2); }
.vs-dark .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) .vs-card__kicker,
.vs-slate .vs-card:not(.vs-card--service):not(.vs-card--step):not(.vs-card--audience) .vs-card__kicker { color: var(--vs-gold-deep); }

/* (3) DROPDOWN SUBMENU HOVER GAP.
   The menu opens on .vs-drop hover but sits 12px below the toggle's box;
   crossing that gap dropped the hover and closed the menu. An invisible
   bridge over the gap keeps the pointer within the menu (a .vs-drop child). */
.vs-drop__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

/* (4) SERVICE CARDS ON SLATE — HOVER TOP BORDER.
   The slate service card had border-top:none, so the gold hover border had
   no top edge. Give it a 1px top border to match the other sides. */
.vs-slate .vs-card--service { border-top: 1px solid var(--vs-slate-rule); }

/* (5) NUMBERED STEP CARDS — LEFT INDENT.
   Text rode the left edge of the top rule; add a small left indent. */
.vs-card--step { padding-left: var(--vs-s4); }