/* The blue sheen, shared by northgatestrategic.com, vericommand.net and verirecall.com
   (Eric, 2026-10-15: "get all the other sites updated with the spada look"). One file,
   byte-identical in all three sites at /assets/sheen/sheen.css, loaded LAST on every page:
   after each site's own sheets and after every page's own <style> block.

   It is a layer. It keeps every class name, every word, every link and every script, and
   changes only the finish, the way RatePilot's assets/ng/sheen.css did (10/15):
   - the ground: night navy (#070b14) with a soft blue glow, in place of the neutral black;
   - type: Saira for headlines, labels, wordmarks and buttons; Inter stays for reading text;
   - accents: the blue (#4a97ff), the cyan (#0fb6fc) used sparingly, and the sheen gradient
     on accented headline words and the featured panel's edge;
   - buttons: solid blue with a faint cyan ring; secondary buttons outlined;
   - each product's own mark (assets/sheen/mark.svg, a per-site file) beside its wordmark;
   - the lighthouse scene recoloured from amber to the sheen blues, and held smaller than the
     Spada hero shield was (Eric: "the shield that was used on the spada site was a bit too big").
   Status colours stay apart from the brand: green = passed, red = failed, amber = held.

   ":not(#_)" on a selector lifts it above every page's class-level rules (it adds one id to the
   specificity and matches every element), so the layer wins without !important. A page's own
   style="" attribute still wins over it. */

@font-face {
  font-family: "Saira";
  /* Saira.woff2: a Latin subset of Saira.ttf with every weight, width and feature kept (fontTools,
     2026-10-15); renders pixel-identical to the ttf. The ttf stays as the fallback. */
  src: url("Saira.woff2") format("woff2"), url("Saira.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* the Spada palette */
  --sh-night: #070b14;
  --sh-night-2: #0a1120;
  --sh-panel: #0d1626;
  --sh-rule: #1a2536;
  --sh-rule-2: #26354d;
  --sh-fg: #eef1f5;
  --sh-soft: #c9d2de;
  --sh-muted: #a3afbf;
  --sh-dim: #8592a3;
  --sh-blue: #4a97ff;
  --sh-blue-2: #7cb4ff;
  --sh-blue-btn: #1764e0;
  --sh-blue-btn-hover: #1f72f5;
  --sh-cyan: #0fb6fc;
  --sh-edge: #2e5ba6;
  --sh-sheen: linear-gradient(90deg, #0a4fe3 0%, #1374f4 22%, #0fb6fc 46%, #127df2 70%, #0a43d2 100%);
  --sh-sheen-text: linear-gradient(100deg, #4a97ff 0%, #2f8cff 25%, #0fb6fc 50%, #5aa8ff 75%, #4a97ff 100%);
  --sh-glow: radial-gradient(ellipse at 70% -24%, rgba(16, 76, 170, .30), transparent 62%);
  --display: "Saira", "Bahnschrift", "Segoe UI", system-ui, sans-serif;

  /* northgatestrategic.com (assets/site.css) */
  --bg: #070b14; --surface: #0d1626; --text: #eef1f5; --muted: #a3afbf; --quiet: #8592a3;
  --line: #1a2536; --warm: #ffb547;
  /* vericommand.net (site-chrome.css, pro.css) and verirecall.com (assets/tokens.css) */
  --bg-raised: #0d1626;
  --glow: var(--sh-glow); --vignette: var(--sh-glow);
  --hairline: #1a2536; --hairline-strong: #2e5ba6;
  --text-2: #a3afbf; --text-3: #8592a3;
  --lamp: #0fb6fc; --lamp-core: #e6f7ff; --lamp-rgb: 15, 182, 252;
  --focus: #4a97ff;
  --btn-bg: #1764e0; --btn-bg-hover: #1f72f5; --btn-text: #ffffff;
  --font-display: var(--display);
  /* pro.css legacy names */
  --panel-2: #0a1120; --ink-2: #c9d2de; --hash: #c9d2de; --blue: #7cb4ff;
}

/* ---------- the ground ---------- */
html { background: #070b14; }
body { background: var(--sh-glow) 0 0 / 100% 850px no-repeat, #070b14; }
body::before { background: none; }   /* northgatestrategic.com painted its top light here */
::selection { background: rgba(74, 151, 255, .35); color: #fff; }
:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #4a97ff; }

/* ---------- headlines: Saira ---------- */
h1, h2, h3, .product-line, .evidence-title, .plan, .price, .flow-step b, .ask q {
  font-family: var(--display);
}
h1:not(#_) { font-weight: 800; font-stretch: 112%; letter-spacing: -.025em; line-height: 1.02; font-size: clamp(34px, 4.6vw, 56px); }
#hero-title:not(#_) { font-size: clamp(40px, 6.2vw, 74px); }      /* the three home heroes (Spada's h1 scale) */
.account-card h1:not(#_) { font-size: clamp(30px, 5.2vw, 38px); }

h2:not(#_), .product-line:not(#_) { font-weight: 700; font-stretch: 110%; letter-spacing: -.015em; line-height: 1.08; }
h2:not(#_) { font-size: clamp(24px, 2.8vw, 32px); }               /* sub-heads: answers, policies, cards */
.section h2:not(#_), .tag + h2:not(#_) { font-size: clamp(30px, 3.6vw, 46px); }   /* section heads */
body:has(#hero-title) .beat h2:not(#_) { font-size: clamp(30px, 3.6vw, 46px); }    /* vericommand.net home beats */
.pro-panel h2:not(#_), body:has(#hero-title) .pro-panel h2:not(#_) { font-size: clamp(28px, 3.2vw, 38px); }
.final-cta h2:not(#_) { font-size: clamp(24px, 2.8vw, 32px); }
.wrap .card h2:not(#_) { font-size: 20px; }
.product-line:not(#_) { font-size: clamp(26px, 3vw, 34px); }

h3:not(#_), .evidence-title:not(#_), .plan:not(#_), .flow-step b:not(#_) { font-weight: 700; font-stretch: 105%; letter-spacing: 0; }
.evidence-title:not(#_) { font-size: 22px; color: var(--sh-fg); }
.feature h3:not(#_), .notice h3:not(#_), .plan:not(#_) { font-size: 20px; }
.flow-step b:not(#_) { font-size: 18px; }
.price:not(#_) { font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; font-size: 52px; }
.ask q:not(#_) { font-weight: 600; font-stretch: 104%; font-size: 19px; }

/* the accented words of a headline carry the sheen */
h1 em, h1 span, .beat h2 .accent {
  font-style: normal;
  background: var(--sh-sheen-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- labels: Saira, wide, uppercase ---------- */
.eyebrow, .status, .card-heading, .kicker, .feature-num, .flow-step span, .tag, .step .label,
.code, .wrap .meta, .modeled, .state, .vc-family, thead th, th {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 112%;
}
.eyebrow:not(#_), .status:not(#_), .kicker:not(#_), .feature-num:not(#_), .flow-step span:not(#_),
.step .label:not(#_), .code:not(#_), .card-heading:not(#_) { letter-spacing: .18em; color: var(--sh-dim); }

/* ---------- the wordmark, with the product's own mark beside it ---------- */
.wordmark:not(#_) {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 105%;
  letter-spacing: 0;
  font-size: 22px;
  color: var(--sh-fg);
}
.wordmark::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("mark.svg") center / contain no-repeat;
}
footer .wordmark:not(#_) { font-size: 20px; }
footer .wordmark::before { width: 26px; height: 26px; }
/* the account page's monogram tile, recoloured */
.account-product-mark {
  border-color: var(--sh-rule-2);
  background: #070b14;
  color: transparent;
  background-image: var(--sh-sheen-text);
  -webkit-background-clip: text;
  background-clip: text;
  box-shadow: inset 0 0 0 1px var(--sh-rule-2);
}

/* ---------- header and footer ---------- */
.vc-nav a.vc-dl span, .header-contact span { color: var(--sh-blue); }
.vc-menu summary { border-color: var(--sh-rule-2); background: rgba(13, 22, 38, .7); color: var(--sh-soft); font-family: var(--display); font-weight: 600; font-stretch: 108%; }
.vc-menu[open] summary { border-color: #3a4d6b; }
.vc-panel { background: linear-gradient(145deg, #111d31, #0b1424); border-color: var(--sh-rule-2); }
.vc-panel a:hover, .vc-panel a[aria-current=page] { background: rgba(74, 151, 255, .08); }

/* ---------- buttons: solid blue with a cyan edge; secondary outlined ---------- */
.btn:not(#_), .button:not(#_) {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: .01em;
  font-size: 13px;
  border-radius: 10px;
}
.button.primary, .btn.primary, .button-primary, .btn-filled {
  background: var(--sh-blue-btn);
  border-color: var(--sh-blue-btn);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(15, 182, 252, .18), 0 8px 28px -10px rgba(23, 100, 224, .7);
}
.button.primary:hover, .btn.primary:hover, .button-primary:hover, .btn-filled:hover {
  background: var(--sh-blue-btn-hover);
  border-color: var(--sh-blue-btn-hover);
  color: #fff;
}
.button.secondary, .btn.ghost, .button-secondary, .btn-ghost, .wrap .button:not(.primary) {
  background: transparent;
  border-color: var(--sh-rule-2);
  color: var(--sh-fg);
  box-shadow: none;
}
.button.secondary:hover, .btn.ghost:hover, .button-secondary:hover, .btn-ghost:hover, .wrap .button:not(.primary):hover {
  background: rgba(255, 255, 255, .03);
  border-color: #3a4d6b;
  color: var(--sh-fg);
}
.hero-actions { flex-wrap: wrap; }

/* ---------- the announcement pill ---------- */
.announcement, .pill { border-color: var(--sh-rule-2); background: rgba(13, 22, 38, .7); color: var(--sh-soft); }
.announcement:hover, a.pill:hover { border-color: #3a4d6b; background: rgba(13, 22, 38, .9); color: var(--sh-soft); }
.pill-dot { background: var(--sh-cyan); box-shadow: 0 0 8px rgba(15, 182, 252, .6); }
.scenario .tag { background: #070b14; }

/* ---------- surfaces ---------- */
.featured-product, .pro-panel, .price-card {
  background: var(--sh-sheen) top / 100% 2px no-repeat, radial-gradient(ellipse at 10% 0, rgba(16, 76, 170, .16), transparent 70%), #0d1626;
  border: 1px solid var(--sh-edge);
  box-shadow: inset 0 1px 0 rgba(15, 182, 252, .25), 0 30px 60px -40px rgba(23, 100, 224, .7);
}
.evidence-card, .scenario {
  background: linear-gradient(145deg, #111d31, #0b1424);
  border-color: var(--sh-rule-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.surface { background: radial-gradient(ellipse at 10% 0, rgba(16, 76, 170, .10), transparent 75%), #0d1626; border-color: var(--sh-rule-2); }
.approach { background: radial-gradient(ellipse at 12% 10%, rgba(16, 76, 170, .12), transparent 65%), #0a1120; }
.state-symbol, .demo-label { border-color: var(--sh-rule-2); color: var(--sh-blue-2); }
.evidence-row strong { color: var(--sh-fg); }
.evidence-row div span, .card-foot, .hero-bottom, .product-category { color: var(--sh-dim); }
.hero-bottom a, .hero-art figcaption { color: var(--sh-soft); }
.motion-control { color: var(--sh-dim); border-bottom-color: var(--sh-rule-2); }
.modeled { border-color: var(--sh-rule-2); color: var(--sh-soft); }
.tour-frame { border-color: var(--sh-rule-2); }
pre { background: #050912; }
code { background: rgba(74, 151, 255, .08); }

/* ---------- links with an accent rule ---------- */
.text-link, .proof-link { border-bottom-color: rgba(74, 151, 255, .45); }
.text-link:hover, .proof-link:hover { border-color: var(--sh-blue); }
.promise a, .honesty a, .doc a { text-decoration-color: rgba(74, 151, 255, .55); }
.product-row h3 a span { color: var(--sh-blue); }

/* ---------- lists, steps and checks ---------- */
.hero-points li::before, .card-list li::before { color: var(--sh-cyan); }
.steps li::before { color: var(--sh-cyan); border-color: var(--sh-rule-2); font-family: var(--display); font-weight: 600; }
.pro-list li::before, .limits li::before { background: var(--sh-blue); }

/* ---------- forms ---------- */
.signup input[type=email], .account-card input { background: #070b14; border-color: #3a4d6b; }
.signup input[type=email]:hover { border-color: #4f6a92; }
.signup input[type=email]:focus, .account-card input:focus { border-color: var(--sh-blue); box-shadow: 0 0 0 3px rgba(74, 151, 255, .2); }

/* ---------- the lighthouse scene: smaller than Spada's hero shield was, in the sheen blues ---------- */
.hero-art:not(#_) { max-width: 380px; margin-left: auto; margin-right: auto; isolation: isolate; }
.hero-art::before {
  content: "";
  position: absolute;
  inset: -12% -12% 18%;   /* kept inside the hero's side margins: no sideways scroll at 375 px */
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 76, 170, .30), rgba(7, 11, 20, 0) 72%);
}
/* the light: amber to cyan; the recorded marks to blue */
.beam-scene stop[stop-color="#f0c674"] { stop-color: #0fb6fc; }
.beam-scene [fill="#f0c674"] { fill: #0fb6fc; }
.beam-scene [stroke="#f0c674"] { stroke: #0fb6fc; }
.beam-scene .record-mark[fill="#f0c674"] { fill: #2f8cff; }
.beam-scene [fill="#ffe2a9"] { fill: #e6f7ff; }
.beam-scene [stroke="#8b8170"] { stroke: #5c7aa8; }
.beam-scene [stroke="#555049"], .beam-scene [stroke="#4b4843"] { stroke: #2c3e5c; }
/* the room, the lamp's metal and the agents' panels: neutral black to night navy */
.beam-scene stop[stop-color="#222224"] { stop-color: #13294d; }
.beam-scene stop[stop-color="#0a0a0b"] { stop-color: #070b14; }
.beam-scene stop[stop-color="#101012"] { stop-color: #0b1322; }
.beam-scene stop[stop-color="#29292b"] { stop-color: #24364f; }
.beam-scene stop[stop-color="#171719"] { stop-color: #111c2e; }
.beam-scene stop[stop-color="#09090a"] { stop-color: #060a12; }
.beam-scene stop[stop-color="#202022"] { stop-color: #1a2740; }
.beam-scene stop[stop-color="#1d1d20"] { stop-color: #15213a; }
.beam-scene stop[stop-color="#6b6b70"] { stop-color: #6d88b0; }
.beam-scene stop[stop-color="#29292d"] { stop-color: #1f2d45; }
.beam-scene stop[stop-color="#111113"] { stop-color: #0d1626; }
.beam-scene stop[stop-color="#202023"] { stop-color: #18263d; }
.beam-scene [fill="#09090a"] { fill: #070d18; }
.beam-scene [fill="#101012"] { fill: #0b1322; }
.beam-scene [fill="#252528"] { fill: #1a2536; }
.beam-scene [stroke="#323236"], .beam-scene [stroke="#343437"] { stroke: #26354d; }
.beam-scene [stroke="#414145"] { stroke: #2f4262; }
.beam-scene [stroke="#74747c"] { stroke: #6b7f9e; }
.beam-scene [stroke="#242326"] { stroke: #142033; }
.beam-scene [stroke="#aaaab0"] { stroke: #9fb0c8; }
.beam-scene .record-mark[fill="#303033"] { fill: #1f2c42; }
.beam-scene [fill="#8c8c90"] { fill: #8592a3; }

/* ---------- small screens ---------- */
@media (max-width: 550px) {
  .wordmark:not(#_) { font-size: 18px; gap: 8px; font-stretch: 100%; }
  .wordmark::before { width: 24px; height: 24px; }
  footer .wordmark:not(#_) { font-size: 19px; }
  .btn:not(#_), .button:not(#_) { font-size: 12px; }
  .hero-art:not(#_) { max-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .button:hover { transform: none; }
}