/* VeraCrest division sites, dark design (V14, 24 October 2026). One file, identical on veracrest, VeraTrust, VeraTrend, VeraTag and VeraTrack.
   Loaded last. A page opts in with class "ar" plus one accent class on <html>: ac-mint, ac-rose, ac-coral, ac-violet or ac-amber.
   Dark navy with the division's own accent, glass surfaces, a faint grid floor and drifting particles (arcade-site.js).
   Motion only; never game elements (no points, streaks, confetti or mascot). Invented screens and documents stay light.
   Arial and the system monospace font only. No inline styles. Reduced motion removes the particles and all animation. */
html.ar { --a: #5BE8AB; --a-hi: #9DF2CE; --a-rgb: 91, 232, 171; }
html.ar.ac-rose { --a: #F27DB9; --a-hi: #F8A9D1; --a-rgb: 242, 125, 185; }
html.ar.ac-coral { --a: #F08A7A; --a-hi: #F5B1A5; --a-rgb: 240, 138, 122; }
html.ar.ac-violet { --a: #B79CF5; --a-hi: #D0BDF9; --a-rgb: 183, 156, 245; }
html.ar.ac-amber { --a: #F4C95D; --a-hi: #F8DC93; --a-rgb: 244, 201, 93; }
html.ar {
  --ok: #5BE8AB; --bad: #FF8F8F; --gold: #F4C95D;
  --ar-ink: #EAF4F8; --ar-sub: #A9C1CD; --ar-mute: #7E9AA8;
  --card: rgba(13, 30, 44, .78); --card-solid: #0E1F2D;
  --line: rgba(var(--a-rgb), .22); --line-hi: rgba(var(--a-rgb), .5); --glow: rgba(var(--a-rgb), .38);
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  /* style.css variables, flipped so older rules read correctly on dark */
  --ink: var(--ar-ink); --ink2: var(--ar-sub); --muted: var(--ar-mute); --bg: rgba(var(--a-rgb), .035);
  --green: var(--a); --greentext: var(--a-hi); --mint: var(--a); --mint2: var(--a-hi);
  color-scheme: dark; background: #040A10;
}
.ar body {
  background: radial-gradient(120% 80% at 70% 0%, #10304A 0%, #0A1826 45%, #040A10 100%) fixed;
  color: var(--ar-ink); overflow-x: hidden;
}
.ar body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 85% 0%, rgba(var(--a-rgb), .12), transparent 70%); }
.ar a { color: var(--a-hi); }
.ar :focus-visible { outline: 3px solid var(--a-hi); outline-offset: 3px; box-shadow: none; }
.ar .skip { background: var(--card-solid); color: var(--ar-ink); }
.ar h1, .ar h2, .ar h3 { color: var(--ar-ink); }

/* Backdrop (made by arcade-site.js). Negative z-index: sits behind the page, above the body background. */
.ar-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.ar-floor {
  position: fixed; left: -50%; right: -50%; bottom: -10vh; height: 45vh; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(420px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 85%); mask-image: linear-gradient(to top, rgba(0,0,0,.5), transparent 85%);
  animation: ar-floor 6s linear infinite;
}
@keyframes ar-floor { to { background-position: 0 64px, 0 0; } }

/* Header and services bar */
.ar .site-header { background: rgba(4, 10, 16, .88); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ar .nav a { color: var(--ar-sub); }
.ar .nav a:hover, .ar .nav a[aria-current] { color: #fff; }
.ar .svcbar { background: rgba(4, 10, 16, .7); border-color: var(--line); }
.ar .svclabel { color: var(--ar-sub); }
.ar .svcbar a { color: var(--ar-sub); }
.ar .svcbar a:hover { color: #fff; }
.ar .svcbar a[aria-current] { color: #fff; border-bottom-color: var(--a); }

/* Buttons */
.ar .btn-mint, .ar .nav .btn-mint, .ar .btn-green, .ar .btn-sky, .ar .hm .btn-mint { background: linear-gradient(135deg, var(--a), var(--a-hi)); color: #041119; border: 0; font-weight: 700; box-shadow: 0 4px 22px var(--glow); }
.ar .btn-ghost, .ar .hero .btnrow .btn-ghost, .ar .btn-outline, .ar .btn-dark { background: transparent; border: 1px solid var(--line-hi); color: var(--ar-ink); }
.ar .btn-ghost:hover, .ar .btn-outline:hover { background: rgba(var(--a-rgb), .1); }
.ar .btn[disabled] { background: rgba(255, 255, 255, .08); color: var(--ar-mute); border-color: var(--line); box-shadow: none; }
.ar .btn:hover { filter: none; transform: translateY(-1px); }

/* Heroes and bands: the page backdrop shows through */
.ar .hero, .ar .pagehead, .ar .hero-glow { background: radial-gradient(900px 520px at 80% 25%, rgba(var(--a-rgb), .14), transparent 60%), radial-gradient(700px 420px at 0 100%, rgba(var(--a-rgb), .06), transparent 60%); }
.ar .hero::before, .ar .pagehead::before, .ar .hero-glow::before { background-image: linear-gradient(rgba(var(--a-rgb), .06) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--a-rgb), .06) 1px, transparent 1px); }
.ar .band { background: transparent; }
.ar .alt { background: rgba(var(--a-rgb), .035); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ar .lead, .ar .sub { color: var(--ar-sub); }
.ar .eyebrow, .ar .tagline, .ar .eyebrow.mint { color: var(--a); font-family: var(--mono); }
.ar .mono, .ar .muted, .ar .hero .muted, .ar .pagehead .muted { color: var(--ar-sub); }
.ar .hero h1 span, .ar .pagehead h1 span { color: var(--a-hi); }

/* Surfaces that were white */
.ar .card, .ar .steps li, .ar .flow .node, .ar .faq details, .ar .finding, .ar .tablewrap, .ar .range, .ar .notice, .ar .panel {
  background: var(--card); border: 1px solid var(--line); color: var(--ar-ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.ar .finding { border-left: 6px solid var(--a); }
.ar .notice { border-color: rgba(244, 201, 93, .45); color: var(--ar-sub); box-shadow: none; }
.ar .card p, .ar .steps span, .ar .flow .node p, .ar .faq details p, .ar .fgrid dd, .ar .finding .small, .ar .prose p, .ar .prose ul, .ar .prose ol, .ar .whofor, .ar .founder p, .ar .flownote, .ar .noteline { color: var(--ar-sub); }
.ar .steps li::before, .ar .icon { background: rgba(var(--a-rgb), .15); color: var(--a-hi); }
.ar .tag { background: transparent; color: var(--ar-sub); border-color: var(--line-hi); }
.ar .price, .ar .card .big, .ar .guides .card h3 a, .ar .checks li, .ar .reveal summary, .ar .quote { color: var(--ar-ink) !important; }
.ar .faq summary { color: var(--ar-ink); }
.ar .faq summary::after { color: var(--a); }
.ar thead th { background: rgba(var(--a-rgb), .1); color: var(--ar-ink); }
.ar th, .ar td { border-bottom: 1px solid var(--line); }
.ar .flow .node .mono, .ar .finding .sample, .ar .fgrid dt { color: var(--a); }
.ar .flow .human { background: rgba(2, 6, 10, .6); border-color: var(--a); }
.ar .range { color: var(--ar-sub); box-shadow: none; }
.ar .prose .src { border-top-color: var(--line); color: var(--ar-sub); }
.ar .box { border-color: var(--ar-sub); }
.ar .fphoto { border-color: var(--line-hi); }
.ar .pill.p-high, .ar .pill.p-med { background: var(--a); color: #041119; }
.ar .pill.p-low { background: rgba(255, 255, 255, .15); color: var(--ar-ink); }

/* Membership section (main site pricing page): dark cards with the accent edge */
.ar .mb { background: rgba(2, 6, 10, .55); color: var(--ar-ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ar .mb-sub { color: var(--ar-sub); }
.ar .mb-switch { background: rgba(255, 255, 255, .05); border-color: var(--line-hi); }
.ar .mb-sw { color: var(--ar-sub); }
.ar .mb-sw[aria-pressed="true"] { background: var(--a); color: #041119; }
.ar .mb-card { background: var(--card); border: 1px solid var(--line); color: var(--ar-ink); box-shadow: 0 10px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ar .mb-card::before { background: var(--a); }
.ar .mb-card.t2 { outline: 2px solid var(--a); box-shadow: 0 0 30px var(--glow), 0 10px 40px rgba(0, 0, 0, .4); }
.ar .mb-card h3, .ar .mb-list b { color: var(--ar-ink); }
.ar .mb-who, .ar .mb-per, .ar .mb-list li { color: var(--ar-sub); }
.ar .mb-btn { background: rgba(255, 255, 255, .08); color: var(--ar-mute); border-color: var(--line); }
.ar .mb-ck { background: rgba(var(--a-rgb), .15); color: var(--a-hi); }
.ar .mb-ck.no { background: rgba(255, 255, 255, .06); color: var(--ar-mute); }
.ar .mb-disc { background: rgba(var(--a-rgb), .12); color: var(--a-hi); }
.ar .mb-more { color: var(--a-hi); }

/* Tool pages (VeraTag, VeraTrack): the green page with white boxes becomes dark glass; output documents stay light */
.ar .cs { background: transparent; color: var(--ar-ink); }
.ar .cs h1 { color: var(--ar-ink); }
.ar .cs-eyebrow { color: var(--a); font-family: var(--mono); }
.ar .cs-intro { color: var(--ar-sub); }
.ar .cs-safe li, .ar .cs-steps li, .ar .cs-panel, .ar .cs-flag, .ar .cs-src, .ar .vt-tiles li { background: var(--card); border: 1px solid var(--line); color: var(--ar-ink); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ar .cs-safe li { color: var(--a-hi); }
.ar .cs-panel h2, .ar .cs-flag h3, .ar .cs-flag.vt h3, .ar .vt-tiles b { color: var(--ar-ink); }
.ar .cs-lbl, .ar .cs-flag .q, .ar .cs-cta p, .ar .vt-tiles li { color: var(--ar-sub); }
.ar .cs textarea, .ar .cs input[type=text] { background: rgba(255, 255, 255, .06); border: 1px solid var(--line-hi); color: var(--ar-ink); }
.ar .cs-out, .ar .cs-ticket, .ar .vt-list li { background: #F4F6F7; color: #1E2428; border-color: #DDE3E6; }
.ar .cs-flag .cs-tag { background: rgba(255, 255, 255, .08); color: var(--ar-ink); }
.ar .cs-note { background: rgba(244, 201, 93, .09); color: var(--ar-sub); }
.ar .cs-note a, .ar .cs-src a { color: var(--a-hi); }
.ar .cs-tbl th { background: rgba(var(--a-rgb), .1); }
.ar .cs .btn.cs-b2, .ar .cs-pk { background: transparent; color: var(--ar-ink); border: 1px solid var(--line-hi); }
.ar .cs .btn.cs-b2:hover { background: rgba(var(--a-rgb), .12); }
.ar .cs-pk[aria-pressed="true"] { background: var(--a); border-color: var(--a); color: #041119; }
.ar .vt-track { background: rgba(255, 255, 255, .1); }

/* Main home page: already a dark designed page, so just let the backdrop through */
.ar .hm { background: transparent; }

.ar .mb-draft { background: rgba(244, 201, 93, .14); color: var(--gold); border: 1px solid rgba(244, 201, 93, .45); }
/* Links inside light invented screens and documents keep a dark green */
.ar :is(.hm-doc, .hm-win, .hm-mini, .ap-win, .cs-out, .cs-ticket, .vt-list) a { color: #0B6B45; }

.ar :is(.ap-win, .hm-doc, .hm-win, .hm-mini, .cs-out, .cs-ticket, .vt-list) :is(.muted, .mono, small) { color: #4A555C; }
.ar .cs .btn.cs-b1 { background: linear-gradient(135deg, var(--a), var(--a-hi)); color: #041119; border: 0; font-weight: 700; box-shadow: 0 4px 22px var(--glow); }

.ar .cs-steps span { background: var(--a); color: #041119; }

/* Home carousel: the action button takes the slide's own accent */
.ar .hm-slide .btn-mint { background: var(--ac); color: #041119; box-shadow: 0 4px 22px color-mix(in srgb, var(--ac) 40%, transparent); }

/* Pop-up */
.ar dialog { background: var(--card-solid); color: var(--ar-ink); border: 1px solid var(--line-hi); box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px var(--glow); }
.ar dialog::backdrop { background: rgba(2, 6, 10, .75); backdrop-filter: blur(3px); }
.ar dialog p { color: var(--ar-sub); }

/* Footer */
.ar .site-footer { background: rgba(2, 6, 10, .9); border-top: 1px solid var(--line); color: var(--ar-sub); }
.ar .flinks a { color: var(--ar-ink); }

/* Reduced motion: no particles, no moving floor, no hover lift */
@media (prefers-reduced-motion: reduce) {
  .ar *, .ar *::before, .ar *::after { animation: none !important; transition: none !important; }
  .ar-fx { display: none; }
}

/* Print: plain black on white, no backdrop */
@media print {
  .ar-fx, .ar-floor { display: none !important; }
  html.ar, .ar body { background: #fff !important; color: #000 !important; }
  .ar body::after { display: none; }
  .ar *, .ar *::before, .ar *::after { background: transparent !important; color: #000 !important; text-shadow: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation: none !important; }
  .ar .card, .ar .steps li, .ar .flow .node, .ar .faq details, .ar .finding, .ar .tablewrap, .ar .range, .ar .notice, .ar .panel, .ar .cs-panel, .ar .cs-flag { border: 1px solid #999 !important; }
  .ar th, .ar td { border-bottom: 1px solid #999 !important; }
  .ar a { text-decoration: underline; }
}