/* vistraXa site styles. Mobile first: base rules are for small screens, and
   min-width queries at 480, 768, 1024, and 1280 px add from there.
   Order: fonts, tokens, base, layout, components, pages, utilities. */

/* ---------------------------------------------------------------- fonts */
/* Self hosted Public Sans, one variable file (Latin subset). build.js rewrites
   this URL to the content hashed filename. Licence: assets/fonts/OFL.txt. */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/public-sans-latin-var.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */
:root {
  --ink: #0b0b10;
  --ink-2: #111019;
  --ink-3: #191623;
  --paper: #fafaf8;
  --paper-alt: #f3f1f8;
  --surface: #ffffff;
  --text: #121016;
  --text-muted: #5f5a6a;
  --line: rgba(18, 16, 22, 0.12);
  --line-strong: rgba(18, 16, 22, 0.22);
  --violet: #5d3fd3;
  --violet-deep: #432d98;
  --violet-bright: #937bf4;
  --violet-soft: #ede9fb;
  /* --accent: fills that carry white text, same in both modes.
     --accent-text: the accent used as text, icons, rules, or strokes. */
  --accent: var(--violet);
  --accent-text: var(--violet);
  --tag-bg: var(--violet-soft);
  --tag-text: var(--violet-deep);
  --on-dark: #f8f7fb;
  --on-dark-muted: #b9b4c5;
  /* Hayma product accent, the one colour Hayma adds to the system. Same split as
     the violet: --hayma is a fill that carries white text (5.4:1), --hayma-text
     is the accent used as text, icons, or strokes, lighter on dark surfaces. */
  --hayma: #0f766e;
  --hayma-text: #0f766e;

  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-display: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  --fs-h1: clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;

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

  --r-control: 12px;
  --r-card: 16px;
  --r-panel: 24px;

  --max: 1180px;
  --gutter: 1.5rem;
  --measure: 68ch;
  --section-pad: clamp(4rem, 2.6rem + 6vw, 8rem);
  --header-h: 68px;
  --shadow-panel: 0 18px 48px rgba(12, 10, 18, 0.12);
  --shadow-sm: 0 1px 2px rgba(12, 10, 18, 0.04), 0 10px 30px rgba(12, 10, 18, 0.05);
  color-scheme: light;
}

/* Dark follows the system setting only, as v1 does. There is no manual toggle
   and nothing is stored. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d0c12;
    --paper-alt: #14121b;
    --surface: #17151f;
    --text: #f5f3f8;
    --text-muted: #aaa4b5;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.22);
    --accent-text: var(--violet-bright);
    --hayma-text: #2dd4bf;
    --tag-bg: rgba(147, 123, 244, 0.16);
    --tag-text: #cfc4fb;
    --shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 36px rgba(0, 0, 0, 0.18);
    color-scheme: dark;
  }
}

/* Ink sections stay ink in both modes. Components inside them read these. */
.ink {
  --text: var(--on-dark);
  --text-muted: var(--on-dark-muted);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --accent-text: var(--violet-bright);
  --hayma-text: #2dd4bf;
  --surface: rgba(255, 255, 255, 0.04);
  --tag-bg: rgba(147, 123, 244, 0.16);
  --tag-text: #cfc4fb;
  background: var(--ink);
  color: var(--on-dark);
}

.ink { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 4rem); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--fs-body)/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
/* clip, not hidden: hidden makes main a scroll container and breaks the
   sticky "On this page" navigation. */
main { display: block; overflow-x: clip; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { color: var(--text); letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; }
h1, h2 { font-weight: 700; }
h3 { font-weight: 650; letter-spacing: -0.02em; line-height: 1.25; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
strong { font-weight: 650; }

:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 3px; border-radius: 4px; }

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

.skip-link {
  position: fixed;
  left: var(--s4);
  top: -5rem;
  z-index: 200;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-control);
  background: var(--violet);
  color: #fff;
  font-weight: 650;
}
.skip-link:focus { top: var(--s4); }

/* ---------------------------------------------------------------- layout */
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: var(--section-pad); }
.section-alt { background: var(--paper-alt); }
.section-tight { padding-block: var(--s8); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s4); }
.section-head { max-width: var(--measure); margin-bottom: var(--s7); }
.section-head > * + * { margin-top: var(--s4); }
.section-head p:not(.eyebrow):not(.source), .lead { color: var(--text-muted); font-size: var(--fs-lead); line-height: 1.6; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--accent-text);
  font-size: var(--fs-small);
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.4;
  /* No uppercase: eyebrows can carry the brand name, which is always vistraXa. */
}
/* The v1 middle dot, drawn in CSS so it is never read out. Not a dash. */
.eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px rgba(147, 123, 244, 0.14); }
.eyebrow-on-dark { color: var(--violet-bright); }

.source { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }

/* ---------------------------------------------------------------- buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.btn svg, .text-link svg, .header-cta svg, .mobile-menu-cta svg {
  width: 1.1em; height: 1.1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--violet-deep); }
.btn-outline { border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--accent-text); color: var(--accent-text); }
.btn-ghost-dark { border-color: rgba(255, 255, 255, 0.3); color: var(--on-dark); }
.btn-ghost-dark:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--violet-soft); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--accent-text);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.18s ease;
}
.text-link:hover { text-decoration-color: currentColor; }
.link-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* ---------------------------------------------------------------- brand */
.brand { display: inline-flex; align-items: center; flex: none; border-radius: 6px; }
.brand-word {
  display: inline-flex;
  align-items: baseline;
  color: var(--text);
  font-size: 1.36rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.038em;
}
.brand-x {
  display: inline-block;
  width: 0.795em;
  height: 0.795em;
  margin-inline: 0.025em;
  vertical-align: -0.036em;
  color: var(--accent-text);
}

/* ---------------------------------------------------------------- header */
/* The blur sits on a pseudo element: backdrop-filter on the header itself
   would make it the containing block of the fixed mobile menu, collapsing the
   menu to a strip under the header. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.header-inner {
  width: min(var(--max), 100% - 2 * var(--gutter));
  min-height: var(--header-h);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s5);
}
.desktop-nav { display: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.header-cta {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 650;
  transition: background-color 0.18s ease;
}
.header-cta:hover { background: var(--violet-deep); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
  background: transparent;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
html:not(.js) .nav-toggle { display: none; }

/* Mobile menu. Without JavaScript it renders in the flow, fully visible. */
.mobile-menu { padding: var(--s4) var(--gutter) var(--s6); border-top: 1px solid var(--line); background: var(--paper); }
.js .mobile-menu {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.js .mobile-menu.open { display: block; }
html:not(.js) .site-header { position: relative; }
.mobile-group { padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.mobile-group-label {
  margin-bottom: var(--s1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mobile-menu a:not(.mobile-menu-cta) {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.125rem;
  font-weight: 600;
}
.mobile-menu a[aria-current='page'] { color: var(--accent-text); }
.mobile-primary { padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.mobile-menu-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
  min-height: 52px;
  margin-top: var(--s4);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 650;
}

/* Desktop navigation and the Solutions disclosure */
.desktop-nav-list { display: flex; align-items: center; gap: var(--s1); }
.desktop-nav-list > li { position: relative; }
.desktop-nav-list > li > a, .nav-disclosure {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 550;
  cursor: pointer;
}
.desktop-nav-list > li > a:hover, .nav-disclosure:hover { color: var(--accent-text); }
.desktop-nav-list > li > a[aria-current='page'], .nav-disclosure.is-active {
  color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--accent-text);
  border-radius: 0;
}
.icon-chevron { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s ease; }
.nav-disclosure[aria-expanded='true'] .icon-chevron { transform: rotate(180deg); }
.solutions-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: -0.5rem;
  width: 38rem;
  padding: var(--s4);
  grid-template-columns: 1fr 1fr;
  gap: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.nav-solutions.open .solutions-panel { display: grid; }
/* Without JavaScript the panel opens on hover and keyboard focus instead. */
html:not(.js) .nav-solutions:hover .solutions-panel,
html:not(.js) .nav-solutions:focus-within .solutions-panel { display: grid; }
.solutions-group-label {
  padding: var(--s2) var(--s3) var(--s1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.solutions-panel a { display: block; padding: var(--s2) var(--s3); border-radius: var(--r-control); }
.solutions-panel a:hover { background: var(--paper-alt); }
.solutions-link-label { display: block; color: var(--text); font-weight: 650; }
.solutions-panel a[aria-current='page'] .solutions-link-label { color: var(--accent-text); }
.solutions-link-note { display: block; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
/* The Sector focus menu is one short column. */
.industries-panel { width: 19rem; grid-template-columns: 1fr; }
/* Industries that have no page yet: shown greyed, not links (no href, so not
   focusable). Inactive controls are exempt from the contrast minimum, but
   they stay legible. */
.is-disabled { cursor: default; opacity: 0.55; }
.solutions-panel a.is-disabled:hover { background: none; }
.solutions-panel a.is-disabled .solutions-link-label { color: var(--text-muted); font-weight: 600; }
.mobile-menu a.is-disabled { color: var(--text-muted); }
.footer-col a.is-disabled, .footer-col a.is-disabled:hover { color: var(--on-dark-muted); }
/* Children of a solution (Application Security under Cybersecurity), indented
   on a rule so the pair reads as one domain. */
.solutions-sub, .mobile-sub, .footer-sub { margin-left: var(--s3); padding-left: var(--s3); border-left: 1px solid var(--line-strong); }
.solutions-sub { margin-top: var(--s1); }
.footer-sub { border-left-color: rgba(255, 255, 255, 0.18); }

/* ---------------------------------------------------------------- breadcrumb */
.breadcrumb { background: var(--ink); color: var(--on-dark-muted); padding-top: var(--s5); font-size: var(--fs-small); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s1) 0; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: '/'; margin-inline: var(--s2); color: rgba(255, 255, 255, 0.35); }
.breadcrumb a { color: var(--on-dark); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.breadcrumb a:hover { text-decoration-color: currentColor; }
.breadcrumb :focus-visible { outline-color: var(--violet-bright); }
.breadcrumb [aria-current='page'] { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------- home hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--s8) var(--s9); }
.hero::before, .page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(40rem 28rem at 85% 10%, rgba(93, 63, 211, 0.32), transparent 70%),
    radial-gradient(30rem 22rem at 30% 110%, rgba(147, 123, 244, 0.13), transparent 70%);
}
/* Subpage heroes sit under the ink breadcrumb strip, so the glow starts lower
   and fades out before the top edge instead of stopping at a hard line. */
.page-hero::before { background: radial-gradient(42rem 24rem at 85% 75%, rgba(93, 63, 211, 0.28), transparent 70%); }
.hero::after, .page-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(147, 123, 244, 0.6), transparent); }
.hero-layout { display: grid; gap: var(--s7); align-items: center; }
.hero h1 { margin-top: var(--s5); font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.045em; }
.hero h1 span { display: block; color: var(--violet-bright); }
.hero-sub { max-width: 38rem; margin-top: var(--s5); color: var(--on-dark-muted); font-size: var(--fs-lead); }
.hero .btn-row { margin-top: var(--s6); }
/* v1 trust row: label over detail, two columns from 480 px, label beside
   detail below that (v1's mobile pattern). */
.hero-trust { display: grid; gap: var(--s4); margin-top: 3.5rem; padding-top: 1.7rem; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.hero-trust li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s3); }
.hero-trust strong { color: var(--on-dark); font-size: 0.9rem; font-weight: 650; line-height: 1.35; }
.hero-trust span { color: #8f899b; font-size: 0.75rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .hero-content, .page-hero-inner { animation: vx-rise 0.6s ease-out both; }
  .hero-visual { animation: vx-rise 0.8s ease-out 0.1s both; }
}
@keyframes vx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The v1 system map. Decorative (aria-hidden); node text is 13 px at 360 px
   and 15 px from about 1100 px. Colours stay at 4.5:1 or better anyway. */
.hero-visual { position: relative; min-width: 0; width: 100%; max-width: 34rem; margin-inline: auto; }
.system-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(30, 26, 43, 0.92), rgba(13, 12, 18, 0.95));
  box-shadow: 0 30px 80px rgba(8, 6, 18, 0.28);
}
.system-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(147, 123, 244, 0.08), transparent 35%); pointer-events: none; }
.system-card-head, .system-card-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding-inline: var(--s5);
  color: #d6d1df;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.system-card-head { justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.system-status { display: flex; align-items: center; gap: var(--s2); color: #aea8ba; font-weight: 500; }
.system-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet-bright); box-shadow: 0 0 0 4px rgba(147, 123, 244, 0.18); }
.system-map { position: relative; height: clamp(330px, 64vw, 420px); }
.system-map::before { content: ''; position: absolute; inset: 12% 15%; border: 1px solid rgba(147, 123, 244, 0.1); border-radius: 50%; }
.system-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.system-lines path { fill: none; stroke: rgba(147, 123, 244, 0.42); stroke-width: 1.25; stroke-dasharray: 4 7; vector-effect: non-scaling-stroke; }
.system-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(147, 123, 244, 0.35);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(93, 63, 211, 0.23), rgba(93, 63, 211, 0.07)), #15121e;
  box-shadow: 0 0 60px rgba(93, 63, 211, 0.16);
}
.system-core svg { width: 34px; height: 34px; color: var(--violet-bright); }
.system-core span { margin-top: var(--s2); color: #d6d1df; font-size: 0.75rem; font-weight: 600; }
.system-node {
  position: absolute;
  width: 40%;
  min-height: 80px;
  padding: var(--s3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: #1b1826;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.13);
}
.system-node span { display: block; margin-bottom: var(--s1); color: var(--violet-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
.system-node strong { display: block; color: #eeebf3; font-size: clamp(0.8125rem, 0.74rem + 0.3vw, 0.9375rem); font-weight: 600; line-height: 1.3; }
.node-ai { left: 4%; top: 8%; }
.node-security { right: 4%; top: 8%; }
.node-cloud { left: 4%; bottom: 8%; }
.node-modern { right: 4%; bottom: 8%; }
.system-card-foot { justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.09); color: #aea8ba; font-weight: 500; }
.system-card-foot i { width: 3px; height: 3px; border-radius: 50%; background: var(--violet-bright); }
/* The stage labels are one group (aria-hidden), with the pause button after it
   in the same row. */
.foot-stages { display: flex; align-items: center; gap: var(--s3); }
/* Narrow screens keep all four stages and the button on one row. The status
   label goes, and the foot tightens: 11 px labels, 4 px gaps, a 28 px button.
   Measured, that row fits from 354 px up with 6 px to spare; it is switched
   below 360 px so the focus ring is never clipped by the card. Under that the
   labels become a 2 x 2 grid without dots, with the button beside it, so a
   wrap never strands a dot at the end of a line. */
@media (max-width: 479.98px) {
  .system-status { display: none; }
  .system-card-foot { gap: var(--s1); padding: var(--s3) var(--s1); font-size: 0.6875rem; }
  .foot-stages { gap: var(--s1); }
}
@media (max-width: 359.98px) {
  .system-card-foot { gap: var(--s3); }
  .foot-stages { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s1) var(--s5); }
  .foot-stages i { display: none; }
}

/* Flowing lines, only when motion is welcome. They loop, so WCAG 2.2.2 needs a
   way to stop them: the pause button in the hero (script.js reveals it and
   toggles .is-paused on .hero-visual). The offset is one dash period (4 + 7),
   so the loop joins without a jump. */
@media (prefers-reduced-motion: no-preference) {
  .system-lines path { animation: vx-dash 1.6s linear infinite; }
  .hero-visual.is-paused .system-lines path { animation-play-state: paused; }
}
@keyframes vx-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -11; } }

/* Pause / play control: an icon only round button in the card foot, after the
   stage labels. Its name is the visually hidden text, which script.js swaps
   between "Pause animation" and "Play animation". The labels are aria-hidden
   but the button is not. Hidden until script.js takes over (and under reduced
   motion, where nothing moves). 32 px, or 28 px on phones to fit the row. */
.hero-pause:not([hidden]) {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
@media (max-width: 479.98px) {
  .hero-pause:not([hidden]) { width: 28px; height: 28px; }
}
.hero-pause:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.5); }
.hero-pause svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero-pause .icon-play { display: none; fill: currentColor; stroke-width: 1; }
.hero-pause.is-paused .icon-pause { display: none; }
.hero-pause.is-paused .icon-play { display: block; }

/* ---------------------------------------------------------------- home starting points */
/* A compact, directly linked version of the original value strip. It keeps the
   visitor-led routes without competing with the hero for visual attention. */
.value-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.value-strip .wrap { display: grid; gap: var(--s4); padding-block: var(--s6); }
.value-strip-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.value-points { display: grid; }
.value-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--line); }
.value-points li:first-child { padding-top: 0; border-top: 0; }
.value-points span { padding-top: 0.15rem; color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.starting-path { display: block; border-radius: 4px; }
.value-points h3 { font-size: 0.9375rem; font-weight: 650; line-height: 1.45; }
.value-points p { margin-top: var(--s1); color: var(--text-muted); font-size: var(--fs-small); line-height: 1.5; }
.starting-path:hover h3 { color: var(--accent-text); }
.starting-path:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card p { color: var(--text-muted); }
.card .source { margin-top: auto; padding-top: var(--s2); }
.card-grid { display: grid; gap: var(--s4); }
.card .text-link { align-self: flex-start; margin-top: auto; padding-top: var(--s3); }
.card .link-row { margin-top: auto; padding-top: var(--s2); }
.card .link-row .text-link { margin-top: 0; padding-top: 0; }

.tag {
  align-self: flex-start;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--tag-bg);
  color: var(--tag-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tag-list li { padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }

/* Split section head (v1): eyebrow and heading left, intro right. */
.section-head-split > div > * + * { margin-top: var(--s4); }

/* Connected capabilities (home), v1 card design. */
.capability-grid { display: grid; gap: var(--s5); }
.capability-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.capability-card::after { content: ''; position: absolute; z-index: -1; right: -70px; bottom: -85px; width: 190px; height: 190px; border: 1px solid var(--line); border-radius: 50%; pointer-events: none; }
.capability-card:hover { border-color: var(--line-strong); box-shadow: 0 18px 50px rgba(12, 10, 18, 0.1); }
@media (prefers-reduced-motion: no-preference) { .capability-card:hover { transform: translateY(-4px); } }
.capability-featured {
  --text: var(--on-dark);
  --text-muted: #c3bdd0;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(147, 123, 244, 0.5);
  --accent-text: var(--violet-bright);
  --tag-bg: rgba(147, 123, 244, 0.14);
  --paper-alt: rgba(255, 255, 255, 0.05);
  border-color: rgba(147, 123, 244, 0.28);
  background: linear-gradient(145deg, #21173f, #12101a 72%);
  color: var(--on-dark);
}
.capability-featured::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 90% 10%, rgba(147, 123, 244, 0.25), transparent 42%); }
.capability-featured :focus-visible { outline-color: var(--violet-bright); }
.capability-top { display: flex; align-items: flex-start; justify-content: space-between; }
.capability-number { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.capability-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--tag-bg); color: var(--accent-text); }
.capability-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.capability-card h3 { margin-top: var(--s5); font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); }
.capability-card p { color: var(--text-muted); }
.capability-card .capability-problem { color: var(--text); font-weight: 600; }
.capability-card .tag-list { margin-top: var(--s3); }
.capability-links { display: grid; justify-items: start; gap: var(--s4); margin-top: auto; padding-top: var(--s4); }
.sub-solution { width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--accent-text); border-radius: var(--r-control); background: var(--paper-alt); }
.sub-solution-label { color: var(--accent-text) !important; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sub-solution-note { font-size: var(--fs-small); }

/* ---------------------------------------------------------------- steps (ink) */
/* v1 progression: numbered circles joined by a line. Vertical below 1024 px,
   one row above it. Used by "How vistraXa works" and "How an engagement runs". */
.steps li { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: var(--s4); padding-bottom: var(--s6); }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before { content: ''; position: absolute; left: 24.5px; top: 50px; bottom: 0; width: 1px; background: rgba(147, 123, 244, 0.45); }
.step-number {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(147, 123, 244, 0.5);
  border-radius: 50%;
  background: var(--ink);
  color: var(--violet-bright);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* v1 ink-2 for the homepage approach band and the solution page "How an
   engagement runs" bands, so they separate from dark paper. */
.approach, .approach .step-number, #engage, #engage .step-number { background: var(--ink-2); }
.steps h3 { padding-top: 0.75rem; font-size: 1.1875rem; }
.steps p { margin-top: var(--s2); color: var(--text-muted); }
.principles {
  display: grid;
  gap: var(--s4);
  margin-top: var(--s8);
  padding: var(--s5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}
.principles li { display: flex; align-items: flex-start; gap: var(--s3); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.45; }
.principles li + li { padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, 0.09); }
.principles svg { flex: none; width: 18px; height: 18px; margin-top: 0.1rem; fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.principles strong { display: block; color: var(--text); font-weight: 600; }
.closing-line { margin-top: var(--s7); color: var(--text-muted); font-weight: 600; }

/* ---------------------------------------------------------------- assessments scroller (home) */
/* Scroll snap row. The next card always peeks, so the row reads as scrollable
   even before the Previous and Next buttons appear. */
.scroller-track {
  margin: -6px;
  padding: 6px 6px var(--s5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  border-radius: var(--r-card);
}
/* Soft right edge where the next card is cut off. The fade is narrower than
   the peek, so no fully visible card (or its focus ring) is ever under it. It
   is dropped while the track itself has focus, so its ring stays whole, and
   at the scroll end (script.js sets .is-end). The buttons sit outside it. */
.scroller-track {
  --fade: 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
.scroller-track:focus-visible, .is-end .scroller-track { -webkit-mask-image: none; mask-image: none; }
.scroller-track:focus-visible { outline-offset: -3px; }
.assess-track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--s4); }
.assess-tile {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.assess-index { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.assess-name { margin-top: var(--s2); font-size: 1.3125rem; line-height: 1.2; }
.assess-name a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.assess-name a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.assess-fit { color: var(--text-muted); }
.assess-fit span { display: block; margin-bottom: var(--s1); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.assess-tile .text-link { font-size: var(--fs-small); }
.assess-cta { width: 100%; margin-top: auto; border-radius: 14px; font-size: 0.9375rem; }
.scroller-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); }
.scroller-controls { display: flex; gap: var(--s2); }
.scroller-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.scroller-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.scroller-btn[aria-disabled='true'] { opacity: 0.4; cursor: default; }
.scroller-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.after-list { margin-top: var(--s6); }

/* ---------------------------------------------------------------- why (v1 experience) */
.why-layout { display: grid; gap: var(--s7); }
.why-copy > * + * { margin-top: var(--s4); }
.why-copy > p:not(.eyebrow) { max-width: 60ch; color: var(--text-muted); }
.why-subhead { margin-top: var(--s6) !important; font-size: 1.125rem; }
.why-points, .diff-list { display: grid; gap: var(--s3); }
.why-points { margin-top: var(--s5) !important; }
.diff-list { gap: var(--s4); }
.why-points li, .diff-list li { position: relative; padding-left: var(--s5); color: var(--text-muted); }
.why-points li::before, .diff-list li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); }
.why-points strong, .diff-list strong { color: var(--text); }
.why-panel { padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-sm); }
.panel-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sector-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.sector-list li { padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--text); font-size: var(--fs-small); font-weight: 600; }
.why-region { display: flex; align-items: flex-start; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.why-region svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--accent-text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why-region p { color: var(--text-muted); font-size: var(--fs-small); }
.why-region strong { display: block; margin-bottom: var(--s1); color: var(--text); font-size: 0.9375rem; }
.why-note { margin-top: var(--s4); color: var(--text-muted); font-size: var(--fs-small); }
.why-panel > .text-link { margin-top: var(--s5); }

/* ---------------------------------------------------------------- v3 assessment choices */
.entry-choice-grid { display: grid; gap: var(--s4); }
.entry-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.entry-choice-index { color: var(--text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.entry-choice h3 { margin-top: var(--s4); font-size: 1.3125rem; line-height: 1.2; }
.entry-choice > p { margin-top: var(--s3); color: var(--text-muted); }
.entry-choice-fit { color: var(--text) !important; font-weight: 600; }
.entry-choice-fit span { display: block; margin-bottom: var(--s1); color: var(--accent-text); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.entry-choice > .text-link { margin-top: auto; padding-top: var(--s5); font-size: var(--fs-small); }
.entry-choice-links { display: grid; gap: var(--s2); margin-top: auto; padding-top: var(--s5); }
.entry-choice-links .text-link { font-size: var(--fs-small); }
.assessment-actions { display: flex; justify-content: center; margin-top: var(--s6); }

/* ---------------------------------------------------------------- v3 regional credibility */
.regional-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 34rem;
  background: var(--ink);
  color: var(--on-dark);
  --accent-text: var(--violet-bright);
}
.regional-band-media, .regional-band-scrim { position: absolute; inset: 0; z-index: -2; }
.regional-band-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% center;
  filter: saturate(0.72) hue-rotate(18deg) contrast(1.05);
}
.regional-band-scrim {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 11, 16, 0.94) 0%, rgba(11, 11, 16, 0.83) 42%, rgba(11, 11, 16, 0.48) 72%, rgba(11, 11, 16, 0.56) 100%),
    linear-gradient(0deg, rgba(11, 11, 16, 0.55), transparent 55%);
}
.regional-band-content { display: flex; align-items: center; min-height: 34rem; padding-block: var(--section-pad); }
.regional-band-content > div { max-width: 45rem; }
.regional-band h2 { margin-top: var(--s4); color: var(--on-dark); }
.regional-band p:not(.eyebrow) { margin-top: var(--s4); max-width: 62ch; color: var(--on-dark-muted); }
.regional-evidence { display: grid; gap: var(--s4); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.regional-evidence li { display: grid; gap: var(--s1); }
.regional-evidence strong { color: var(--on-dark); font-size: 0.9375rem; }
.regional-evidence span { color: var(--on-dark-muted); font-size: var(--fs-small); line-height: 1.5; }
.regional-link { margin-top: var(--s6); color: var(--violet-bright); }
.regional-band :focus-visible { outline-color: var(--violet-bright); }

/* ---------------------------------------------------------------- page hero (subpages) */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--s7) var(--s9); }
.page-hero-inner { max-width: 56rem; }
.page-hero h1 { margin-top: var(--s4); font-size: var(--fs-h1); }
.page-hero-tagline { margin-top: var(--s4); color: var(--on-dark); font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 550; line-height: 1.45; max-width: 46rem; }
.partner-line { margin-top: var(--s3); color: var(--on-dark-muted); font-size: var(--fs-small); }
.page-hero-summary { margin-top: var(--s5); max-width: var(--measure); color: var(--on-dark-muted); }
.page-hero .btn-row { margin-top: var(--s6); }
.btn-qualifier { width: 100%; color: var(--on-dark-muted); font-size: var(--fs-small); }
.text-link-dark { color: var(--on-dark); }
.page-hero .text-link { color: var(--on-dark); text-decoration-color: rgba(255, 255, 255, 0.35); }
.page-hero .text-link:hover { text-decoration-color: currentColor; }
.hero-note { margin-top: var(--s5); display: inline-flex; padding: var(--s2) var(--s4); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: var(--on-dark); font-weight: 600; }

/* ---------------------------------------------------------------- at a glance */
.stats { padding-block: var(--s7); border-bottom: 1px solid var(--line); }
.stat-list { display: grid; gap: var(--s5); }
.stat-list li { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 2px solid var(--accent-text); }
.stat-figure { color: var(--text); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--text); font-weight: 550; line-height: 1.45; }
.stat-list .source { margin-top: auto; }

/* ---------------------------------------------------------------- service decision brief */
/* A compact orientation layer so a visitor can identify fit, likely outcome,
   and the relevant entry route before reading the detailed service material. */
.service-brief { border-bottom: 1px solid var(--line); background: var(--surface); }
.service-brief .wrap { padding-block: var(--s6); }
.service-brief-list { display: grid; gap: var(--s4); }
.service-brief-list > div { padding-top: var(--s4); border-top: 1px solid var(--line); }
.service-brief-list > div:first-child { padding-top: 0; border-top: 0; }
.service-brief dt { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.service-brief dd { margin-top: var(--s2); max-width: 38ch; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.55; }
.service-brief .text-link { margin-top: var(--s2); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- on this page */
.page-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.page-nav ul { display: flex; gap: var(--s5); overflow-x: auto; scrollbar-width: none; padding-block: var(--s1); }
.page-nav ul::-webkit-scrollbar { display: none; }
.page-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
.page-nav a:hover { color: var(--accent-text); }
.page-nav :focus-visible { outline-offset: -3px; }

/* ---------------------------------------------------------------- challenge, solution */
.intro-source { margin-top: var(--s2); }
.page-trademark { margin-top: var(--s5, 2rem); }
.callout {
  max-width: var(--measure);
  margin-top: var(--s6);
  padding: var(--s5);
  border-left: 3px solid var(--accent-text);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: var(--paper-alt);
  color: var(--text);
  font-size: var(--fs-lead);
  line-height: 1.55;
}
.solution-layout { display: grid; gap: var(--s6); align-items: start; }
.solution-layout .prose p { color: var(--text-muted); }
.ai-panel { padding: var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--surface); }
.ai-panel .panel-label { color: var(--accent-text); }
.ai-panel p:last-child { margin-top: var(--s3); color: var(--text-muted); }

.diagram { margin-top: var(--s7); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.diagram-scroll { overflow-x: auto; border-radius: var(--r-control); }
.diagram svg { width: 100%; max-width: 880px; min-width: 760px; height: auto; margin-inline: auto; font-family: var(--font); }
.diagram figcaption { margin-top: var(--s4); max-width: var(--measure); color: var(--text-muted); font-size: 0.9375rem; }
/* Diagram drawing classes. Colours come from tokens so diagrams follow the theme. */
.dg-frame { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-box { fill: var(--paper-alt); stroke: var(--line-strong); stroke-width: 1.5; }
.dg-box-accent { fill: var(--tag-bg); stroke: var(--accent-text); stroke-width: 1.5; }
.dg-band { fill: var(--accent); }
.dg-node { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg-line { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.dg-line-accent { fill: none; stroke: var(--accent-text); stroke-width: 2; }
.dg-dash { fill: none; stroke: var(--text); stroke-width: 2; stroke-dasharray: 7 6; }
.dg-arrow { fill: var(--text-muted); }
.dg-arrow-accent { fill: var(--accent-text); }
.dg-marker { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.dg-text { fill: var(--text); font-size: 15px; font-weight: 600; }
.dg-small { fill: var(--text-muted); font-size: 13px; font-weight: 500; }
.dg-label { fill: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; }
.dg-on-accent { fill: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }

/* Who does what. A real table, stacked into labelled pairs on small screens. */
.who { margin-top: var(--s7); }
.who-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
.who-table caption { padding-bottom: var(--s4); color: var(--text); font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.02em; text-align: left; caption-side: top; }
.who-table th, .who-table td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; }
.who-table thead th { background: var(--ink); color: var(--on-dark); font-size: var(--fs-small); font-weight: 700; }
.who-table thead th:last-child { background: var(--violet-deep); }
.who-table td { border-top: 1px solid var(--line); color: var(--text-muted); }
@media (max-width: 767.98px) {
  .who-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .who-table, .who-table tbody, .who-table tr, .who-table td { display: block; }
  .who-table { border: 0; border-radius: 0; background: none; overflow: visible; }
  .who-table caption { display: block; }
  .who-table tr { margin-bottom: var(--s3); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
  .who-table td:first-child { border-top: 0; }
  .who-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--s1);
    color: var(--accent-text);
    font-size: var(--fs-xs);
    font-weight: 700;
  }
}

/* ---------------------------------------------------------------- CTA band */
.cta-band { padding: var(--s7) var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.cta-band > * + * { margin-top: var(--s4); }
.cta-band p { max-width: var(--measure); color: var(--text-muted); }
.cta-band .btn-row { margin-top: var(--s6); }

/* ---------------------------------------------------------------- FAQ */
.faq { max-width: 52rem; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding-block: var(--s5);
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 0.45rem;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 0.7rem; }
.faq summary:hover { color: var(--accent-text); }
.faq details p { max-width: var(--measure); padding-bottom: var(--s5); color: var(--text-muted); }

/* ---------------------------------------------------------------- v3 page system */
/* Solution and sector pages. Shorter, scannable sections: an outcome first
   hero with a brand graded photo, stat led problem cards, a diagram led
   solution, icon capability cards that name the problem they solve, and
   choice cards for the first step. Icons come from the sprite in layout.html. */
.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Hero with a photo panel. The photo is decorative (alt=""), and the flow chip
   over it is real text. Photos are graded to the brand palette offline. */
.page-hero-grid { display: grid; gap: var(--s7); align-items: center; }
.hero-media { position: relative; margin: 0; }
.hero-media-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-panel);
  background: var(--ink-3);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.hero-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 16, 0) 40%, rgba(11, 11, 16, 0.7)); }
.hero-flow {
  position: absolute;
  z-index: 1;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-control);
  background: rgba(17, 16, 25, 0.86);
  color: var(--on-dark);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.3;
}
.hero-flow li { display: inline-flex; align-items: center; gap: var(--s2); }
.hero-flow li + li::before { content: ''; width: 14px; height: 1px; background: var(--violet-bright); }
.hero-flow .icon { width: 18px; height: 18px; color: var(--violet-bright); }

/* At a glance: the existing service brief, now with icons. */
.service-brief dt { display: flex; align-items: center; gap: var(--s2); }
.service-brief dt .icon { width: 20px; height: 20px; color: var(--accent-text); }
.service-brief dd { color: var(--text); font-size: 0.9375rem; }

/* Problem cards: the number leads, one sentence explains it. */
.stat-cards { display: grid; gap: var(--s4); }
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-text);
  border-radius: var(--r-card);
  background: var(--surface);
}
.stat-card-figure { color: var(--text); font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-card-figure .icon { width: 40px; height: 40px; color: var(--accent-text); stroke-width: 1.5; }
.stat-card h3 { font-size: 1.125rem; }
.stat-card p:not(.stat-card-figure):not(.source) { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }
.stat-card .source { margin-top: auto; padding-top: var(--s2); }

/* One statement naming the cause behind the symptoms. */
.constraint {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  margin-top: var(--s6);
  padding: var(--s5);
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--on-dark);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.45;
}
.constraint .icon { margin-top: 2px; color: var(--violet-bright); }
.constraint strong { color: var(--violet-bright); }

/* Solution: diagram first, then the shift and the AI mechanism side by side. */
.solution-grid { display: grid; gap: var(--s5); margin-top: var(--s5); }
.shift, .ai-flow { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.shift .panel-label, .ai-flow .panel-label { margin-bottom: var(--s4); color: var(--accent-text); }
.shift-list { display: grid; gap: var(--s3); }
.shift-list li { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: var(--s3); align-items: center; padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.45; }
.shift-list li:first-child { padding-top: 0; border-top: 0; }
.shift-from { color: var(--text-muted); }
.shift-to { color: var(--text); font-weight: 650; }
.shift-list .icon { width: 20px; height: 20px; color: var(--accent-text); }
.ai-flow ol { display: grid; gap: var(--s4); }
.ai-flow li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.ai-flow-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tag-bg); color: var(--accent-text); }
.ai-flow-icon .icon { width: 20px; height: 20px; }
.ai-flow h3 { font-size: 1rem; }
.ai-flow p { margin-top: var(--s1); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.solution .diagram { margin-top: 0; }
.diagram + .cap-grid { margin-top: var(--s6); }

/* Capability cards with an icon, short ticks, and the problem they solve. */
.cap-grid { display: grid; gap: var(--s4); }
.cap-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.cap-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); color: #fff; }
.cap-card h3 { margin-top: var(--s1); font-size: 1.1875rem; }
.cap-card > p { color: var(--text-muted); font-size: 0.9375rem; line-height: 1.55; }
.ticks { display: grid; gap: var(--s2); }
.ticks li { position: relative; padding-left: 1.6rem; color: var(--text); font-size: 0.9375rem; line-height: 1.45; }
.ticks li::before { content: ''; position: absolute; left: 0.2rem; top: 0.3em; width: 0.45rem; height: 0.75rem; border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text); transform: rotate(40deg); }
.solves { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.solves span { color: var(--accent-text); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* Why vistraXa: three icon tiles under one line of founding experience. */
.why-tiles { display: grid; gap: var(--s4); }
.why-tiles li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); align-items: start; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.why-tiles .icon { width: 28px; height: 28px; margin-top: 2px; color: var(--accent-text); }
.why-tiles h3 { font-size: 1.0625rem; }
.why-tiles p { margin-top: var(--s1); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.why-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s5); color: var(--text-muted); font-size: var(--fs-small); }
.why-foot .icon { width: 20px; height: 20px; color: var(--accent-text); }
.why-foot span { display: inline-flex; align-items: center; gap: var(--s2); }

/* Where to start: choice cards, one per entry assessment. */
.start-grid { display: grid; gap: var(--s4); }
.start-card { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6) var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.start-card-primary { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text), var(--shadow-sm); }
.start-if { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.start-card h3 { font-size: var(--fs-h3); }
.start-card > p:not(.start-if) { color: var(--text-muted); }
.start-card .btn { align-self: flex-start; margin-top: auto; }
.start-more { margin-top: var(--s5); }

/* Photo beside content (MedTech health data rules). */
.media-split { display: grid; gap: var(--s6); align-items: start; }
.media-split-image { overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--ink-3); aspect-ratio: 16 / 10; }
.media-split-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rule-list { display: grid; gap: var(--s4); }
.rule-list li { padding: var(--s5); border: 1px solid var(--line); border-left: 3px solid var(--accent-text); border-radius: var(--r-card); background: var(--surface); }
.rule-list .rule-where { color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rule-list h3 { margin-top: var(--s2); font-size: 1.0625rem; }
.rule-list p:not(.rule-where) { margin-top: var(--s2); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.rule-note { margin-top: var(--s4); color: var(--text-muted); font-size: var(--fs-small); }

/* Hayma as a proof point on the MedTech page. A drawn answer card, not a screenshot. */
.proof { display: grid; gap: var(--s6); align-items: center; padding: var(--s6) var(--s5); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); box-shadow: var(--shadow-sm); }
.proof-copy > * + * { margin-top: var(--s4); }
.proof-copy p:not(.eyebrow) { color: var(--text-muted); }
.proof-lockup { display: inline-flex; align-items: center; gap: var(--s3); color: var(--text); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.proof-lockup svg { width: 40px; height: 40px; }
.proof .ticks li::before { border-color: var(--hayma-text); }
.proof-status { color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
.proof-mock { padding: var(--s5); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); font-size: var(--fs-small); line-height: 1.5; }
.proof-mock-head { display: flex; align-items: center; gap: var(--s2); color: var(--text); font-weight: 700; }
.proof-mock-head svg { width: 24px; height: 24px; }
.proof-sees { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.proof-sees li { padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: var(--fs-xs); font-weight: 600; }
.proof-sees li::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 0.4rem; border-radius: 50%; background: var(--hayma-text); vertical-align: 0.05em; }
.proof-sees li.off { color: var(--text-muted); }
.proof-sees li.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-muted); }
.proof-q { margin-top: var(--s4); margin-left: auto; max-width: 85%; padding: var(--s3) var(--s4); border-radius: 14px 14px 4px 14px; background: var(--hayma); color: #fff; font-weight: 600; }
.proof-a { margin-top: var(--s3); max-width: 92%; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: var(--surface); color: var(--text); }
.proof-cite { display: inline-block; margin-left: var(--s1); padding: 0 0.45rem; border-radius: 6px; background: #e0f2f1; color: #115e59; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.proof-a p + p { margin-top: var(--s2); color: var(--text-muted); }

@media (min-width: 768px) {
  .stat-cards, .cap-grid, .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { padding: var(--s7); }
  .hero-flow { left: var(--s4); right: auto; bottom: var(--s4); padding: var(--s3) var(--s4); font-size: var(--fs-small); }
  .constraint { padding: var(--s6); }
  .cap-card { padding: var(--s6); }
  .start-card { padding: var(--s7) var(--s6); }
}
@media (min-width: 1024px) {
  .page-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s8); }
  .hero-media-frame { aspect-ratio: 4 / 3; }
  .stat-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-cards:has(> :nth-child(3):last-child), .why-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .solution-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); }
  .why-tiles li { grid-template-columns: 1fr; }
  .start-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .media-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s7); }
  .media-split-image { position: sticky; top: calc(var(--header-h) + 5rem); aspect-ratio: 1 / 1; }
  .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); }
}
/* Connectors only where the three steps fit on one row. */
@media (max-width: 479.98px) {
  .hero-flow li + li::before { display: none; }
  .hero-flow { gap: var(--s2) var(--s4); }
}
/* Ink panels sit on near ink paper in dark mode, so they need an edge. */
@media (prefers-color-scheme: dark) {
  .constraint { border: 1px solid var(--line-strong); }
}
@media (forced-colors: active) {
  .stat-card, .cap-card, .shift, .ai-flow, .start-card, .why-tiles li, .constraint, .rule-list li, .proof, .proof-mock { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- assessments page */
.assess-cards { display: grid; gap: var(--s5); }
.assess-card { padding: var(--s6) var(--s5); gap: var(--s4); }
.assess-card h2 { font-size: var(--fs-h3); }
.assess-card .field-label { display: block; margin-bottom: var(--s1); color: var(--accent-text); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.assess-card .assess-fit { color: var(--text); font-weight: 600; }
.assess-card .btn { align-self: flex-start; margin-top: var(--s2); }
.include-list { display: grid; gap: var(--s4); max-width: var(--measure); }

/* ---------------------------------------------------------------- about */
.mission { padding-block: var(--section-pad); }
.mission-statement { max-width: 52rem; margin-top: var(--s5); color: var(--on-dark); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.value-grid h3 { font-size: 1.1875rem; }
.boundary { margin-top: var(--s5); padding: var(--s4) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-card); color: var(--text); font-weight: 600; max-width: var(--measure); }

/* ---------------------------------------------------------------- 404 */
.nf-lists { display: grid; gap: var(--s6); }
.nf-lists ul { display: grid; gap: var(--s2); margin-top: var(--s3); }
.nf-lists .nf-sub { margin: var(--s2) 0 0 var(--s3); padding-left: var(--s3); border-left: 1px solid var(--line-strong); }
.list-heading { font-size: 1.125rem; }

/* ---------------------------------------------------------------- contact band */
.contact-band { padding-block: var(--s8); }
.contact-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--s6);
  padding: var(--s7) var(--s5);
  border-radius: var(--r-panel);
  background: var(--ink);
  color: var(--on-dark);
  --accent-text: var(--violet-bright);
}
@media (prefers-color-scheme: dark) { .contact-card { border: 1px solid rgba(255, 255, 255, 0.1); } }
.contact-mark { position: absolute; z-index: -1; right: -3rem; bottom: -4rem; width: 16rem; height: 16rem; color: rgba(147, 123, 244, 0.1); }
.contact-mark svg { width: 100%; height: 100%; }
.contact-copy h2 { margin-top: var(--s4); color: var(--on-dark); }
.contact-copy p:last-child { margin-top: var(--s4); max-width: 36rem; color: var(--on-dark-muted); }
.contact-action { display: grid; gap: var(--s4); align-content: center; justify-items: start; }
.contact-email { color: var(--on-dark); font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.contact-email:hover { text-decoration-color: currentColor; }
.contact-region { color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 26rem; }
.contact-card :focus-visible { outline-color: var(--violet-bright); }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark-muted); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer-mark { position: absolute; right: -6rem; top: -6rem; width: 26rem; height: 26rem; color: rgba(147, 123, 244, 0.05); pointer-events: none; }
.footer-mark svg { width: 100%; height: 100%; }
.footer-content { position: relative; padding-block: var(--s8) var(--s5); }
.footer-main { display: grid; gap: var(--s7); }
.footer-brand .brand-word { color: #fff; font-size: 1.6rem; }
.footer-brand .brand-x { color: var(--violet-bright); }
.footer-tagline { margin-top: var(--s5); color: var(--on-dark); font-size: 1.0625rem; font-weight: 600; line-height: 1.6; }
.footer-mission { margin-top: var(--s3); max-width: 26rem; font-size: var(--fs-small); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.footer-label { margin-bottom: var(--s3); color: var(--on-dark); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: var(--s1); }
.footer-col a { display: inline-flex; align-items: center; min-height: 32px; color: var(--on-dark-muted); font-size: 0.9375rem; }
.footer-col a:hover, .footer-col a[aria-current='page'] { color: #fff; }
.footer-contact p { margin-top: var(--s3); font-size: var(--fs-small); max-width: 22rem; }
.footer-email { color: var(--on-dark) !important; font-weight: 650; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-xs);
}
.site-footer :focus-visible { outline-color: var(--violet-bright); }

/* ---------------------------------------------------------------- cookie consent */
/* Always dark, so it reads the same over light and dark pages. z-index sits
   below the sticky header (100) so the open mobile menu covers it. */
.cookie-banner {
  position: fixed;
  z-index: 90;
  left: 1rem;
  bottom: 1rem;
  width: min(25rem, calc(100% - 2rem));
  padding: 1.35rem 1.4rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: var(--ink-2);
  color: var(--on-dark-muted);
  box-shadow: 0 30px 80px rgba(8, 6, 18, 0.28);
  font-size: 0.875rem;
  line-height: 1.6;
}
.cookie-banner .cookie-title { margin-bottom: 0.5rem; color: var(--on-dark); font-size: 0.95rem; font-weight: 700; }
.cookie-banner .cookie-title:focus { outline: none; }
.cookie-actions { margin-top: 1.05rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* Accept is the filled violet button. Reject must keep the same size, position
   on the same row, and readable contrast: rejecting has to be as easy as
   accepting for the consent to be valid. Only the fill may differ. */
.cookie-btn {
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-dark);
  font: 650 0.88rem/1 var(--font);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cookie-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.55); }
.cookie-btn-accept { border-color: var(--violet); background: var(--violet); color: #fff; }
.cookie-btn-accept:hover { border-color: #6849df; background: #6849df; }
.cookie-note { margin-top: 0.85rem; font-size: var(--fs-xs); }
.cookie-settings {
  padding: 0;
  min-height: 24px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
}
.cookie-settings:hover { color: #fff; }
/* Both of these always sit on a dark surface. */
.cookie-banner :focus-visible, .cookie-settings:focus-visible { outline-color: var(--violet-bright); }


/* ---------------------------------------------------------------- 480 */
@media (min-width: 480px) {
  .hero-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .hero-trust li { display: flex; flex-direction: column; gap: 0.15rem; }
  .stat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .system-core { width: 118px; height: 118px; border-radius: 28px; }
  .system-core svg { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------- 768 */
@media (min-width: 768px) {
  :root { --gutter: 2rem; --header-h: 72px; }
  .header-cta { display: inline-flex; }
  .hero-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .value-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entry-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-brief-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-brief-list > div { padding: 0 var(--s5); border-top: 0; border-left: 1px solid var(--line); }
  .service-brief-list > div:first-child { padding-left: 0; border-left: 0; }
  .value-points li { padding: 0 var(--s5); border-top: 0; border-left: 1px solid var(--line); }
  .value-points li:first-child { padding-left: 0; border-left: 0; }
  .card-grid, .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assess-track { grid-auto-columns: calc((100% - var(--s4)) / 2.15); }
  .card { padding: var(--s6); }
  .cta-band { padding: var(--s8) var(--s7); }
  .contact-card { padding: var(--s8) var(--s7); }
  .assess-card { padding: var(--s7); }
  .nf-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand-block { grid-column: 1 / -1; }
  .diagram { padding: var(--s6); }
}

/* ---------------------------------------------------------------- 1024 */
@media (min-width: 1024px) {
  .desktop-nav { display: block; }
  .nav-toggle, .mobile-menu, .js .mobile-menu.open { display: none; }
  html:not(.js) .site-header { position: sticky; }
  .hero { padding-block: var(--s9) var(--s10); }
  .hero-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--s8); }
  .hero-visual { max-width: none; }
  .value-strip .wrap { grid-template-columns: minmax(0, 0.55fr) minmax(0, 2.45fr); align-items: center; gap: var(--s7); }
  .stat-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-grid:has(> :nth-child(3):last-child), .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section-head-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.8fr); gap: var(--s4) var(--s9); align-items: end; max-width: none; }
  .section-head-split > * + * { margin-top: 0; }
  .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps::before { content: ''; position: absolute; top: 25px; left: 25px; right: calc(25% - 25px); height: 1px; background: linear-gradient(90deg, rgba(147, 123, 244, 0.35), rgba(147, 123, 244, 0.8), rgba(147, 123, 244, 0.35)); }
  .steps li { display: block; padding: 0 var(--s6) 0 0; }
  .steps li:not(:last-child)::before { display: none; }
  .step-number { margin-bottom: var(--s5); }
  .steps h3 { padding-top: 0; }
  .principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .principles li + li { padding: 0 0 0 var(--s4); border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.09); }
  .assess-track { grid-auto-columns: calc((100% - 3 * var(--s4)) / 3.25); }
  .scroller-track { --fade: 56px; }
  .why-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--s9); align-items: center; }
  .solution-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s8); }
  .contact-card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); align-items: center; }
  .footer-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr); }
  .footer-brand-block { grid-column: auto; }
  .page-hero { padding-block: var(--s8) var(--s9); }
}

/* ---------------------------------------------------------------- 1280 */
@media (min-width: 1280px) {
  .cta-band { padding: var(--s8); }
}

/* ---------------------------------------------------------------- motion off */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Forced colours: keep borders visible where backgrounds carry structure. */
@media (forced-colors: active) {
  .is-disabled, .solutions-panel a.is-disabled .solutions-link-label { color: GrayText; opacity: 1; }
  .card, .capability-card, .assess-tile, .why-panel, .cta-band, .ai-panel, .diagram, .callout, .step-number { border: 1px solid CanvasText; }
  .dg-band, .dg-marker { fill: Highlight; }
}