/* DigiAssess — US marketing site
   Brand: Inter, Digi Blue #0066FF, neutral scale per Visual Identity guide. */

:root {
  /* Brand */
  --blue: #0066ff;
  --blue-print: #0066b3;
  --blue-deep: #0047b3;
  --blue-deep-2: #1d6fff;
  --cyan: #06b6d4;
  --sky: #0ea5e9;
  --teal: #18be7f;
  --warning: #ff9700;
  --error: #fb4f49;

  /* Neutrals */
  --ink-900: #030814;
  --ink-800: #121d30;
  --ink-700: #29354a;
  --ink-500: #646e7e;
  --line: #d4d6dc;
  --line-soft: #e6e9ef;
  --bg-100: #f0f2f6;
  --bg-50: #f9fafb;
  --surface: #f8f9fe;
  --white: #ffffff;

  /* Semantic tints (used only where they carry meaning) */
  --tint-ops: #eef4ff;        /* operations / integrity */
  --tint-ops-2: #e0ecff;
  --tint-clinical: #e8f8f8;   /* competency / clinical */
  --tint-intel: #f1f0ff;      /* intelligence */
  --tint-intel-ink: #4b4fc9;
  --tint-warm: #f7f5f1;       /* human / customer */
  --mist: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%);

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Geometry */
  --r-data: 8px;
  --r-panel: 22px;
  --r-human: 32px;
  --shadow-sm: 0 1px 2px rgba(3, 8, 20, .05), 0 2px 8px rgba(3, 8, 20, .04);
  --shadow-md: 0 2px 6px rgba(3, 8, 20, .05), 0 16px 40px -12px rgba(18, 29, 48, .16);
  --shadow-lg: 0 30px 80px -24px rgba(0, 71, 179, .28);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--white);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid rgba(0, 102, 255, .45); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 { color: var(--ink-900); margin: 0; letter-spacing: -0.022em; line-height: 1.12; font-weight: 700; }
h1 { font-size: clamp(42px, 5.4vw, 64px); letter-spacing: -0.035em; line-height: 1.04; font-weight: 800; }
h2 { font-size: clamp(30px, 3.3vw, 42px); letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 2.1vw, 28px); }
h4 { font-size: 19px; letter-spacing: -0.012em; line-height: 1.3; }
p { margin: 0; }
p + p { margin-top: 14px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.lede { font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-500); max-width: 680px; }
.section-head { max-width: 800px; }
.section-head h2 { margin-top: 14px; }
.section-head .lede { margin-top: 16px; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }
.center .eyebrow::before { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink-900); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em;
  border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
  text-decoration: none !important; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 22px -8px rgba(0, 102, 255, .6); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: #fff; color: var(--ink-900); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-900); }
.btn-light { background: #fff; color: var(--blue-deep); }
.btn-light:hover { background: var(--tint-ops); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; color: var(--blue); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.scrolled { border-color: var(--line-soft); box-shadow: 0 6px 24px -18px rgba(3, 8, 20, .3); }
.nav { display: flex; align-items: center; height: 68px; gap: 28px; }
.brand { display: inline-flex; flex: none; }
.brand img { height: 32px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: 2px; margin: 0 auto; padding: 0; list-style: none; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px;
  border: 0; background: none; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink-800);
}
.nav-link:hover, .nav-item.open > .nav-link { background: var(--bg-100); text-decoration: none; }
.nav-link svg { width: 12px; height: 12px; transition: transform .2s; color: var(--ink-500); }
.nav-item.open > .nav-link svg { transform: rotate(180deg); }
.nav-cta { flex: none; display: flex; gap: 10px; align-items: center; }
.nav-cta .btn { min-height: 42px; padding: 0 18px; font-size: 14.5px; }

.mega {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px);
  width: min(680px, 92vw); padding: 14px;
  background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: var(--shadow-md);
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 10px;
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
.nav-item.open > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-links { display: grid; gap: 2px; padding: 4px; margin: 0; list-style: none; }
.mega-links a { display: block; padding: 11px 12px; border-radius: 10px; color: var(--ink-800); }
.mega-links a:hover { background: var(--surface); text-decoration: none; }
.mega-links strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-900); }
.mega-links span { display: block; font-size: 13.5px; color: var(--ink-500); line-height: 1.45; margin-top: 2px; }
.mega-feature {
  border-radius: 12px; padding: 18px; background: var(--mist); display: flex; flex-direction: column; gap: 8px;
  color: var(--ink-800);
}
.mega-feature small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.mega-feature b { font-size: 16px; color: var(--ink-900); line-height: 1.35; letter-spacing: -0.01em; }
.mega-feature p { font-size: 13.5px; color: var(--ink-500); line-height: 1.5; }
.mega-feature a { margin-top: auto; font-size: 14px; font-weight: 600; }
.mega-h { margin: 2px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.mega.mega--plat { width: min(1000px, 94vw); grid-template-columns: 1fr 1.05fr .85fr; }
.mega.mega--more { width: min(340px, 92vw); grid-template-columns: 1fr; }
@media (min-width: 981px) { .nav { position: relative; } .nav-item:has(> .mega--plat) { position: static; } .mega.mega--plat { top: calc(100% - 4px); } }
@media (min-width: 981px) { .nav-menu { gap: 6px; } .nav-cta .btn { min-height: 44px; padding: 0 22px; font-weight: 700; box-shadow: 0 8px 18px -8px rgba(0, 102, 255, .55); } }

.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { display: block; width: 18px; height: 2px; background: var(--ink-900); border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Sections ---------- */
section { position: relative; }
.pad { padding-block: clamp(72px, 9vw, 112px); }
.pad-lg { padding-block: clamp(84px, 11vw, 140px); }
.pad-sm { padding-block: clamp(48px, 6vw, 72px); }
.bg-surface { background: var(--surface); }
.bg-ops { background: var(--tint-ops); }
.bg-clinical { background: var(--tint-clinical); }
.bg-intel { background: var(--tint-intel); }
.bg-warm { background: var(--tint-warm); }

/* Architectural geometry: notched top / stepped bottom */
.notch-top { clip-path: polygon(0 48px, 38% 48px, calc(38% + 48px) 0, 100% 0, 100% 100%, 0 100%); margin-top: -48px; padding-top: calc(clamp(72px, 9vw, 112px) + 48px); }
.step-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 72% calc(100% - 56px), 72% 100%, 0 100%); }

/* ---------- Hero ---------- */
.hero { overflow: hidden; background: #fff; }
/* The approved hero artwork already fades to white on its left, so it keeps its natural ratio and sits right-aligned. */
.hero-media { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: max(min(84vw, 1360px), 1080px); pointer-events: none; }
.hero-media picture, .hero-media img { width: 100%; }
.hero-media img { height: auto; }
.hero-plane { /* stepped architectural plane under the fold */
  position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(240, 247, 255, 0) 0%, #f0f7ff 100%);
  clip-path: polygon(0 60%, 30% 60%, 34% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-inner { position: relative; z-index: 1; display: grid; align-items: center; min-height: min(760px, calc(100svh - 74px)); padding-block: 72px 88px; }
.hero-copy { max-width: 560px; }
.hero-copy h1 { margin-top: 18px; }
.hero-copy h1 .accent { color: var(--blue); }
.hero-copy .lede { margin-top: 22px; font-size: 19px; color: var(--ink-700); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--ink-800); background: #fff; border: 1px solid var(--line-soft);
}
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.chip.dmode i { background: var(--cyan); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- Logo strip ---------- */
.trust-strip { border-block: 1px solid var(--line-soft); background: #fff; }
.trust-strip .wrap { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 32px; padding-block: 26px; }
.trust-strip p { font-size: 14px; color: var(--ink-500); line-height: 1.45; }
.trust-strip p b { display: block; color: var(--ink-900); font-weight: 600; font-size: 15px; }
.logos { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0; padding: 0; list-style: none; }
.logos li { flex: 1 1 0; display: flex; justify-content: center; }
.logos img { width: 64px; height: 64px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .72; transition: filter .25s, opacity .25s; }
.logos li:hover img { filter: none; opacity: 1; }

/* ---------- Belief ---------- */
.belief { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.belief h2 { margin-top: 14px; max-width: 560px; }
.belief .body { margin-top: 20px; max-width: 560px; color: var(--ink-500); }
.benefits { display: grid; gap: 10px; margin-top: 34px; padding: 0; list-style: none; }
.benefit {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line-soft);
  border-radius: 6px 20px 20px 20px; box-shadow: var(--shadow-sm);
}
.benefit .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.benefit .ico svg { width: 22px; height: 22px; }
.benefit h4 { font-size: 17px; }
.benefit p { font-size: 15px; color: var(--ink-500); margin-top: 2px; line-height: 1.5; }
.belief-visual { position: relative; }
.belief-visual img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 30% center; border-radius: 120px var(--r-human) var(--r-human) var(--r-human); }
.belief-visual .tag {
  position: absolute; left: -28px; bottom: 36px; max-width: 270px;
  background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-md);
  font-size: 14px; color: var(--ink-700); line-height: 1.45;
}
.belief-visual .tag b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 4px; }

/* ---------- Transformation panel ---------- */
.shift { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.shift-head { position: sticky; top: 120px; }
.shift-head h2 { margin-top: 14px; }
.shift-head .lede { margin-top: 16px; }
.shift-table { border: 1px solid var(--line-soft); border-radius: var(--r-panel); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.shift-row { display: grid; grid-template-columns: 1fr 36px 1.15fr; align-items: center; gap: 12px; padding: 17px 24px; border-top: 1px solid var(--line-soft); }
.shift-row:first-child { border-top: 0; }
.shift-row.head { background: var(--bg-50); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); padding-block: 13px; }
.shift-row .from { color: var(--ink-500); font-size: 15.5px; }
.shift-row .to { color: var(--ink-900); font-weight: 600; font-size: 15.5px; }
.shift-row .arr { color: var(--blue); display: grid; place-items: center; }
.shift-row .arr svg { width: 18px; height: 18px; }
.shift-row:not(.head):hover { background: var(--surface); }

/* ---------- Evidence convergence ---------- */
.converge { margin-top: 56px; position: relative; }
.streams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.stream {
  position: relative; text-align: left; width: 100%;
  padding: 24px 22px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s, transform .3s var(--ease);
  color: inherit; min-height: 228px; display: flex; flex-direction: column;
}
.stream:hover, .stream[aria-expanded="true"] { border-color: rgba(0, 102, 255, .35); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.stream .num { font-size: 12px; font-weight: 600; letter-spacing: .12em; color: var(--ink-500); }
.stream h3 { font-size: 24px; margin-top: 18px; }
.stream .what { font-size: 15px; color: var(--ink-500); margin-top: 6px; line-height: 1.5; }
.stream .methods { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.stream .methods span { font-size: 12.5px; font-weight: 500; padding: 4px 9px; border-radius: 6px; background: var(--bg-100); color: var(--ink-700); transition: background .25s, color .25s; }
.stream:hover .methods span, .stream[aria-expanded="true"] .methods span { background: var(--tint-ops); color: var(--blue-deep); }
.stream .bar { position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c, var(--blue)); }
.converge-lines { display: block; width: 100%; height: 110px; }
.converge-lines path { fill: none; stroke: url(#lineGrad); stroke-width: 2; stroke-dasharray: 6 7; }
.js .converge-lines path { stroke-dashoffset: 0; animation: dash 14s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -260; } }
.learner-node {
  margin: 0 auto; width: min(560px, 100%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  padding: 18px 22px; border-radius: 18px; background: linear-gradient(135deg, var(--blue) 0%, #3882f6 100%); color: #fff;
  box-shadow: var(--shadow-lg);
}
.learner-node .ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.learner-node .ico svg { width: 24px; height: 24px; }
.learner-node b { display: block; font-size: 18px; letter-spacing: -0.01em; }
.learner-node span { font-size: 14px; opacity: .85; }
.learner-node .pulse { display: flex; gap: 4px; }
.learner-node .pulse i { width: 6px; border-radius: 3px; background: rgba(255, 255, 255, .75); }
.converge-foot { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- Environments ---------- */
.env { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.env h2 { margin-top: 14px; }
.env .lede { margin-top: 16px; }
.tabs { display: grid; gap: 8px; margin-top: 30px; }
.tab {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; text-align: left;
  padding: 14px 16px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: var(--ink-700);
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.tab .ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--ink-500); border: 1px solid var(--line-soft); transition: background .25s, color .25s; }
.tab .ico svg { width: 20px; height: 20px; }
.tab b { display: block; color: var(--ink-900); font-size: 16px; font-weight: 600; }
.tab span { display: block; font-size: 14.5px; color: var(--ink-500); line-height: 1.45; margin-top: 2px; }
.tab:hover { background: rgba(255, 255, 255, .6); }
.tab[aria-selected="true"] { background: #fff; border-color: var(--line-soft); box-shadow: var(--shadow-md); }
.tab[aria-selected="true"] .ico { background: var(--blue); color: #fff; border-color: var(--blue); }
.env-visual { position: relative; border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-lg); background: #fff; }
.env-visual img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.env-mask { position: absolute; inset: 0; }
.env-mask i {
  position: absolute; border-radius: 12px; background: rgba(240, 244, 252, .78);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.env-mask i.on { background: rgba(255, 255, 255, 0); box-shadow: 0 0 0 3px var(--blue); }
.env-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; justify-content: center; }
.env-caption p { background: rgba(3, 8, 20, .78); color: #fff; font-size: 14px; padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
.env-foot { margin-top: 26px; }

/* ---------- Offline signature moment ---------- */
.offline { text-align: center; }
.offline .lede { margin: 16px auto 0; }
.device { margin: 56px auto 0; width: min(760px, 100%); }
.device-screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px 18px 6px 6px; background: var(--ink-800); padding: 14px;
  box-shadow: 0 40px 80px -30px rgba(18, 29, 48, .45);
}
.device-base { height: 16px; margin: 0 -7%; background: linear-gradient(180deg, #dfe3ea 0%, #b9bfca 100%); border-radius: 0 0 18px 18px; position: relative; }
.device-base::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 18%; height: 6px; background: #c9ced7; border-radius: 0 0 8px 8px; }
.exam { height: 100%; border-radius: 8px; background: #fff; display: grid; grid-template-rows: auto 1fr auto; text-align: left; overflow: hidden; }
.exam-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-500); }
.exam-top b { color: var(--ink-900); font-weight: 600; }
.exam-top .spacer { flex: 1; }
.conn {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #e7f8f0; color: #0d8a5a; transition: background .4s, color .4s;
}
.conn i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.conn[data-state="lost"] { background: #fff1e0; color: #b86a00; }
.conn[data-state="offline"] { background: var(--tint-ops); color: var(--blue-deep); }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); background: var(--bg-100); padding: 5px 10px; border-radius: 6px; }
.exam-body { padding: 18px 20px; display: grid; gap: 10px; align-content: start; font-size: 14px; }
.exam-body .q { color: var(--ink-900); font-weight: 600; font-size: 15px; line-height: 1.45; }
.exam-body .opt { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--ink-700); transition: border-color .3s, background .3s; }
.exam-body .opt i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; transition: border .3s; }
.exam-body .opt.sel { border-color: var(--blue); background: var(--tint-ops); }
.exam-body .opt.sel i { border: 4.5px solid var(--blue); }
.exam-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--ink-500); }
.saved { display: inline-flex; align-items: center; gap: 6px; color: #0d8a5a; font-weight: 600; }
.saved svg { width: 14px; height: 14px; }
.steps-track { display: flex; gap: 6px; }
.steps-track i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-soft); }
.steps-track i.done { background: var(--blue); }
.offline-states { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 28px auto 0; padding: 0; list-style: none; }
.offline-states li { font-size: 13.5px; font-weight: 500; color: var(--ink-500); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-soft); background: #fff; transition: color .3s, border-color .3s, background .3s; }
.offline-states li.on { color: var(--blue-deep); border-color: rgba(0, 102, 255, .35); background: var(--tint-ops); }
.proof-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 900px; margin: 44px auto 0; padding: 0; list-style: none; }
.proof-chips li { padding: 16px 18px; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); font-size: 15px; color: var(--ink-700); text-align: left; display: flex; gap: 10px; align-items: flex-start; }
.proof-chips svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 3px; }
.offline-foot { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.replay { border: 0; background: none; color: var(--ink-500); font-size: 14px; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; padding: 8px; }
.replay:hover { color: var(--ink-900); }
.replay svg { width: 15px; height: 15px; }

/* ---------- Lifecycle canvas ---------- */
.lifecycle { background: linear-gradient(180deg, #fff 0%, var(--tint-ops) 100%); }
.ribbon { margin-top: 44px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; padding: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); list-style: none; }
.ribbon button {
  width: 100%; border: 0; background: transparent; border-radius: 999px; padding: 11px 6px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-500); position: relative; transition: background .3s, color .3s;
}
.ribbon button:hover { color: var(--ink-900); }
.ribbon button[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: 0 6px 16px -6px rgba(0, 102, 255, .6); }
.ribbon button .n { font-size: 11px; opacity: .6; margin-right: 6px; font-variant-numeric: tabular-nums; }
.canvas { margin-top: 18px; display: grid; grid-template-columns: .9fr 1.4fr; background: #fff; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); overflow: hidden; min-height: 470px; }
.canvas-copy { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; }
.canvas-copy .stage { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.canvas-copy h3 { margin-top: 12px; }
.canvas-copy p { margin-top: 14px; color: var(--ink-500); font-size: 16px; }
.canvas-copy ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.canvas-copy li { display: flex; gap: 10px; font-size: 15px; color: var(--ink-800); }
.canvas-copy li svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 3px; }
.canvas-copy .link-arrow { margin-top: auto; padding-top: 26px; }
.canvas-media { position: relative; background: var(--bg-100); }
.canvas-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-swap { transition: opacity .32s var(--ease), transform .32s var(--ease); }
.panel-swap.out { opacity: 0; transform: translateY(12px); }

/* ---------- Outcomes ---------- */
.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.outcomes h2 { margin-top: 14px; }
.outcomes .lede { margin-top: 16px; }
.outcome-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ochip {
  border: 1px solid rgba(6, 182, 212, .35); background: #fff; color: #08708a; border-radius: 999px;
  padding: 9px 15px; font-size: 14.5px; font-weight: 600; transition: background .25s, color .25s, border-color .25s;
}
.ochip:hover { border-color: var(--cyan); }
.ochip[aria-pressed="true"] { background: #0891b2; color: #fff; border-color: #0891b2; }
.ochip-detail { margin-top: 18px; min-height: 52px; font-size: 15.5px; color: var(--ink-700); max-width: 520px; border-left: 3px solid var(--cyan); padding: 2px 0 2px 16px; }
.outcomes-visual { position: relative; }
.outcomes-visual img { border-radius: var(--r-human) var(--r-human) var(--r-human) 8px; width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; box-shadow: var(--shadow-md); }
.outcomes-visual .flag {
  position: absolute; right: -18px; top: 28px; background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-md);
  display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--ink-500);
}
.outcomes-visual .flag b { display: block; color: var(--ink-900); font-size: 15px; }
.outcomes-visual .flag i { width: 36px; height: 36px; border-radius: 10px; background: var(--tint-clinical); color: #0891b2; display: grid; place-items: center; }
.outcomes-visual .flag svg { width: 18px; height: 18px; }

/* ---------- AI ---------- */
.ai { background: var(--tint-intel); overflow: hidden; }
.ai::before { /* large translucent geometric block */
  content: ""; position: absolute; right: -8%; top: -20%; width: 52%; height: 140%;
  background: linear-gradient(160deg, rgba(120, 118, 255, .10), rgba(120, 118, 255, 0) 70%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.ai-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.ai .eyebrow { color: var(--tint-intel-ink); }
.ai h2 { margin-top: 14px; }
.ai .lede { margin-top: 16px; }
.ai-grid { row-gap: 28px; }
.ai-lower { grid-column: 1 / -1; }
.ai-flow { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; padding-top: 34px; }
.ai-flow::before { content: ""; position: absolute; left: 12%; right: 12%; top: 14px; height: 2px; background: linear-gradient(90deg, rgba(75, 79, 201, .15), rgba(75, 79, 201, .5), rgba(75, 79, 201, .15)); }
.ai-step { position: relative; background: #fff; border-radius: 16px; padding: 18px 16px; border: 1px solid rgba(75, 79, 201, .14); box-shadow: 0 10px 30px -18px rgba(75, 79, 201, .45); }
.ai-step .human {
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tint-intel-ink); color: var(--tint-intel-ink); display: grid; place-items: center;
}
.ai-step .human svg { width: 14px; height: 14px; }
.ai-step { padding: 20px 20px; }
.ai-step b { display: block; color: var(--ink-900); font-size: 17px; }
.ai-step span { display: block; font-size: 14.5px; color: var(--ink-500); line-height: 1.45; margin-top: 4px; }
.ai-legend { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; color: var(--ink-500); }
.ai-legend i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--tint-intel-ink); display: inline-block; }
.ai-visual img { width: 100%; border-radius: var(--r-panel); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.2; object-fit: cover; }
.ai-foot { margin-top: 30px; }

/* ---------- Accreditation before/after ---------- */
.accred-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; }
.accred-head h2 { margin-top: 14px; }
.accred-head .lede { justify-self: end; }
.ba { margin-top: 48px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; }
.ba-col { border-radius: var(--r-panel); padding: 26px; position: relative; overflow: hidden; }
.ba-before { background: var(--bg-50); border: 1px dashed var(--line); }
.ba-after { background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); display: grid; grid-template-rows: auto auto 1fr; }
.ba-label { display: inline-flex; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.ba-before .ba-label { background: #fff; color: var(--ink-500); border: 1px solid var(--line); }
.ba-after .ba-label { background: var(--tint-ops); color: var(--blue-deep); }
.scatter { position: relative; height: 300px; margin-top: 18px; }
.doc {
  position: absolute; width: 150px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: 12.5px; color: var(--ink-500); line-height: 1.35;
}
.doc b { display: block; color: var(--ink-800); font-size: 13px; margin-bottom: 6px; }
.doc .lines i { display: block; height: 5px; border-radius: 3px; background: var(--bg-100); margin-top: 5px; }
.doc .lines i:nth-child(2) { width: 80%; } .doc .lines i:nth-child(3) { width: 60%; }
.doc.xls b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: #1f9d55; margin-right: 6px; }
.doc.mail b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--warning); margin-right: 6px; }
.doc.pdf b::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--error); margin-right: 6px; }
.ba-before p.note { position: absolute; left: 26px; right: 26px; bottom: 22px; font-size: 14px; color: var(--ink-500); }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; padding: 0; list-style: none; }
.flow li { position: relative; padding: 12px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line-soft); font-size: 13px; color: var(--ink-700); line-height: 1.35; }
.flow li b { display: block; font-size: 14px; color: var(--ink-900); }
.flow li:not(:last-child)::after { content: ""; position: absolute; right: -7px; top: 50%; width: 6px; height: 2px; background: var(--blue); }
.ba-after figure { margin: 18px 0 0; border-radius: 12px; overflow: hidden; position: relative; min-height: 200px; }
.ba-after figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.accred-foot { margin-top: 30px; }

/* ---------- Ecosystem ---------- */
.eco { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.eco-visual img { width: 100%; border-radius: var(--r-panel); }
.eco h2 { margin-top: 14px; }
.eco .lede { margin-top: 16px; }
.eco-rail { margin-top: 28px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.eco-rail .node { text-align: center; padding: 14px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); font-size: 14px; font-weight: 600; color: var(--ink-900); }
.eco-rail .node.core { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 10px 24px -10px rgba(0, 102, 255, .7); }
.eco-rail svg { width: 18px; height: 18px; color: var(--blue); }
.eco-list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.eco-list li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--bg-100); color: var(--ink-700); }
.eco-foot { margin-top: 28px; }

/* ---------- Trust band ---------- */
.trust-band { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: center; border: 1px solid var(--line-soft); border-top: 3px solid var(--blue); border-radius: 10px; padding: clamp(28px, 4vw, 48px); background: #fff; box-shadow: var(--shadow-sm); }
.trust-band h2 { font-size: clamp(28px, 3vw, 36px); margin-top: 12px; }
.trust-band .lede { margin-top: 14px; font-size: 16.5px; }
.badges { display: flex; gap: 14px; margin-top: 24px; }
.badges img { width: 84px; height: 84px; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.controls li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px; border-radius: 8px; background: var(--bg-50); }
.controls .ico { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--ink-800); }
.controls .ico svg { width: 18px; height: 18px; }
.controls b { display: block; font-size: 15px; color: var(--ink-900); }
.controls span { display: block; font-size: 13.5px; color: var(--ink-500); line-height: 1.45; margin-top: 2px; }
.trust-foot { margin-top: 24px; }

/* ---------- Scale (the one saturated proof moment) ---------- */
.scale { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-deep-2) 100%); color: #fff; overflow: hidden; }
.scale::before { content: ""; position: absolute; right: -6%; top: 0; bottom: 0; width: 46%; background: rgba(255, 255, 255, .06); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.scale::after { content: ""; position: absolute; right: 18%; top: 0; bottom: 0; width: 18%; background: rgba(255, 255, 255, .05); clip-path: polygon(40% 0, 100% 0, 60% 100%, 0 100%); }
.scale .wrap { position: relative; z-index: 1; }
.scale .eyebrow { color: #bfe0ff; }
.scale h2 { color: #fff; margin-top: 14px; max-width: 640px; }
.metrics { margin: 52px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, .22); }
.metrics li { padding: 26px 24px 28px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.metrics li:not(:nth-child(3n+1)) { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .22); }
.metrics b { display: block; font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.metrics span { display: block; margin-top: 10px; font-size: 15px; color: #d6e6ff; font-weight: 500; }

/* ---------- Customer story ---------- */
.story { display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; border-radius: var(--r-human); overflow: hidden; box-shadow: var(--shadow-md); background: #fff; }
.story-art { position: relative; min-height: 420px; background: var(--ink-800); color: #fff; padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.story-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(0, 102, 255, .55) 0%, rgba(0, 102, 255, 0) 60%); }
.story-art::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 320px; height: 320px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, .14); transform: rotate(18deg); box-shadow: 0 0 0 40px rgba(255, 255, 255, .03), 0 0 0 80px rgba(255, 255, 255, .02); }
.story-art > * { position: relative; z-index: 1; }
.story-art small { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #bfe0ff; }
.story-art .who { font-size: clamp(34px, 4vw, 48px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.story-art .who span { display: block; font-size: 15px; font-weight: 500; letter-spacing: 0; color: #c9d6ea; margin-top: 12px; }
.story-copy { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.story-copy h3 { font-size: clamp(24px, 2.4vw, 32px); }
.story-copy p { margin-top: 16px; color: var(--ink-500); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pills span { padding: 8px 14px; border-radius: 999px; background: var(--tint-ops); color: var(--blue-deep); font-size: 14px; font-weight: 600; }
.story-copy .link-arrow { margin-top: auto; padding-top: 28px; }

/* ---------- Final CTA ---------- */
.final { background: var(--mist); border-radius: var(--r-human); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 72px); text-align: center; position: relative; overflow: hidden; }
.final::before { content: ""; position: absolute; left: -40px; top: -40px; width: 220px; height: 220px; background: rgba(0, 102, 255, .06); clip-path: polygon(0 0, 100% 0, 0 100%); }
.final::after { content: ""; position: absolute; right: 0; bottom: 0; width: 280px; height: 160px; background: rgba(0, 102, 255, .07); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.final h2 { position: relative; max-width: 760px; margin: 0 auto; }
.final p { position: relative; max-width: 620px; margin: 18px auto 0; font-size: 18px; color: var(--ink-700); }
.final .actions { position: relative; display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 32px; }
.final .promise { position: relative; margin-top: 26px; font-size: 14px; color: var(--ink-500); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: #aab3c2; }
.foot-top { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; padding-block: 64px 48px; }
.foot-brand img { height: 28px; width: auto; }
.foot-brand p { margin-top: 18px; font-size: 15px; max-width: 300px; line-height: 1.55; }
.foot-brand .belief-line { margin-top: 18px; color: #fff; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.foot-col h4 { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.foot-col ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: #aab3c2; font-size: 14.5px; }
.foot-col a:hover { color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.foot-bottom ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.foot-bottom a { color: #aab3c2; }

/* =========================================================
   INNER PAGES
   ========================================================= */
.nav-link[aria-current="page"], .mega-links a[aria-current="page"] strong { color: var(--blue); }
.crumbs-bar { font-size: 13.5px; color: var(--ink-500); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs-bar a { color: var(--ink-500); }
.crumbs-bar a:hover { color: var(--ink-900); }
.crumbs-bar [aria-current] { color: var(--ink-900); font-weight: 500; }
.crumbs-bar .sep { opacity: .5; }

.ihero { position: relative; overflow: hidden; }
.ihero h1 { font-size: clamp(38px, 4.4vw, 52px); letter-spacing: -0.032em; line-height: 1.06; }
.ihero .lede { margin-top: 20px; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-700); }
.ihero .hero-ctas { margin-top: 30px; }
.ihero .crumbs-bar { margin-bottom: 28px; }

/* Platform hero: centered statement over a product canvas */
.ph { background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%); padding-block: 44px 0; }
.ph-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.ph-copy .crumbs-bar { justify-content: center; }
.ph-copy .eyebrow::before { display: none; }
.ph-copy .lede { margin-inline: auto; max-width: 660px; }
.ph-copy .hero-ctas { justify-content: center; }
.ph-canvas { position: relative; margin: 52px auto 0; max-width: 1120px; }
.ph-canvas img { width: 100%; border-radius: var(--r-panel) var(--r-panel) 0 0; background: #fff; box-shadow: 0 -10px 60px -30px rgba(0, 71, 179, .35); }
.float-group { position: absolute; display: grid; gap: 8px; }
.float-group.left { left: -12px; top: 18%; }
.float-group.right { right: -12px; top: 30%; }
.float-group small { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); padding-left: 4px; }
.float-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff;
  box-shadow: var(--shadow-md); font-size: 14px; font-weight: 600; color: var(--ink-900); white-space: nowrap;
}
.float-chip i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.float-chip i svg { width: 12px; height: 12px; }
.float-chip.ok i { background: #e7f8f0; color: #0d8a5a; }
.float-chip.cy i { background: var(--tint-clinical); color: #0891b2; }

/* Integrity hero: cool blue field with one angular band */
.ih { background: var(--tint-ops); padding-block: 44px 96px; }
.ih::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 58%; background: linear-gradient(160deg, #dbe8ff 0%, #eef4ff 70%); clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.ih .wrap { position: relative; }
.ih-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.ih-visual { position: relative; }
.ih-visual img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 80%; border-radius: var(--r-panel); background: #fff; box-shadow: var(--shadow-lg); }
.ih-visual .float-chip { position: absolute; }
.ih-visual .f1 { left: -22px; top: 12%; }
.ih-visual .f2 { right: -18px; top: 6%; }
.ih-visual .f3 { left: -10px; bottom: 14%; }
.ih-visual .f4 { right: 8%; bottom: -18px; }

/* Health hero: offset side panel, soft cyan */
.hh { padding-block: 44px 96px; background: #fff; }
.hh::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44%; background: linear-gradient(180deg, #e3f7f8 0%, #f2fbfb 100%); border-radius: 0 0 0 64px; }
.hh .wrap { position: relative; }
.hh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hh .eyebrow { color: #0891b2; }
.hh-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 120px var(--r-human) var(--r-human) var(--r-human); box-shadow: var(--shadow-lg); }
.hh .chips .chip i { background: #0891b2; }

/* Section rhythm helpers */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split.wide-l { grid-template-columns: 1.1fr .9fr; }
.split.wide-r { grid-template-columns: .85fr 1.15fr; }
.split h2 { margin-top: 14px; }
.split .lede { margin-top: 16px; }
.media-panel { width: 100%; border-radius: var(--r-panel); box-shadow: var(--shadow-md); background: #fff; }
.media-human { width: 100%; border-radius: var(--r-human) var(--r-human) var(--r-human) 8px; box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; object-fit: cover; }
.check-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink-800); }
.check-list svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 3px; }
.section-foot { margin-top: 30px; }

/* Buttons used as cards: top-align content (buttons center vertically by default) */
.stage6, .path, .hs-stop, .epa-item, .stream { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.arc-step { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }

/* Six-stage platform lifecycle band */
.stages6 { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft); background: #fff; box-shadow: var(--shadow-sm); }
.stage6 { position: relative; text-align: left; border: 0; background: #fff; padding: 22px 20px 24px; border-left: 1px solid var(--line-soft); color: inherit; transition: background .3s; }
.stage6:first-child { border-left: 0; }
.stage6 .n { font-size: 12px; font-weight: 600; color: var(--ink-500); letter-spacing: .1em; }
.stage6 b { display: block; font-size: 20px; color: var(--ink-900); margin-top: 8px; letter-spacing: -0.015em; }
.stage6 .sum { display: block; font-size: 14px; color: var(--ink-500); margin-top: 4px; line-height: 1.45; }
.stage6 ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.stage6 li { font-size: 13.5px; color: var(--ink-700); padding-left: 14px; position: relative; line-height: 1.4; }
.stage6 li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--blue); }
.stage6::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.stage6:hover, .stage6.on { background: var(--surface); }
.stage6:hover::after, .stage6.on::after { transform: scaleX(1); }

/* Generic tabbed canvas (data-tabs) */
[role="tabpanel"][hidden] { display: none !important; }
.panel-in { animation: panelIn .32s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Platform pathways */
.paths { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.path {
  text-align: left; border: 1px solid transparent; border-radius: 20px; padding: 24px 22px; color: inherit; position: relative;
  background: var(--pt, var(--tint-ops)); transition: box-shadow .3s, border-color .3s, transform .3s var(--ease);
}
.path .q { font-size: 13px; font-weight: 600; color: var(--pc, var(--blue)); letter-spacing: .02em; }
.path b { display: block; font-size: 22px; color: var(--ink-900); margin-top: 10px; letter-spacing: -0.02em; }
.path .d { display: block; font-size: 15px; color: var(--ink-700); margin-top: 8px; line-height: 1.5; }
.path[aria-selected="true"] { border-color: var(--pc, var(--blue)); box-shadow: var(--shadow-md); background: #fff; transform: translateY(-3px); }
.path[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; background: #fff; border-right: 1px solid var(--pc); border-bottom: 1px solid var(--pc); transform: translateX(-50%) rotate(45deg); }
.path-panel { margin-top: 18px; display: grid; grid-template-columns: .9fr 1.1fr; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-md); }
.path-panel .copy { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; }
.path-panel h3 { font-size: clamp(22px, 2vw, 26px); }
.path-panel p { color: var(--ink-500); margin-top: 12px; }
.proof-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.proof-terms span { font-size: 13px; font-weight: 500; padding: 5px 10px; border-radius: 6px; background: var(--bg-100); color: var(--ink-800); }
.path-panel .link-arrow { margin-top: auto; padding-top: 24px; }
.path-panel .media { position: relative; min-height: 380px; background: var(--bg-50); }
.path-panel .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.path-panel .media img.contain { object-fit: contain; padding: 20px; background: #fff; }

/* Learner evidence journey (platform) */
.journey { margin-top: 48px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-sm); }
.journey-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #3882f6); color: #fff; display: grid; place-items: center; font-weight: 700; }
.journey-head b { display: block; color: var(--ink-900); font-size: 17px; }
.journey-head span { font-size: 14px; color: var(--ink-500); }
.journey-head .tag { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); background: var(--bg-100); padding: 5px 10px; border-radius: 6px; }
.track { position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line-soft); }
.track .fill { position: absolute; left: 0; top: 16px; height: 2px; width: 0; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: width 1.6s var(--ease); }
.journey.in .track .fill { width: 100%; }
.ev { position: relative; padding-top: 44px; }
.ev .dot { position: absolute; top: 6px; left: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--c); display: grid; place-items: center; }
.ev .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ev small { font-size: 12px; color: var(--ink-500); font-weight: 600; letter-spacing: .04em; }
.ev b { display: block; font-size: 15px; color: var(--ink-900); margin-top: 4px; line-height: 1.3; }
.ev span { display: block; font-size: 13px; color: var(--ink-500); margin-top: 4px; line-height: 1.4; }
.ev .kind { display: inline-block; margin-top: 8px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 5px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.js .journey .ev { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d); }
.js .journey.in .ev { opacity: 1; transform: none; }
.journey-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--ink-500); }
.journey-foot b { color: var(--ink-900); }

/* Stakeholder value row */
.values { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.value { padding: 20px; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); }
.value b { display: block; font-size: 16px; color: var(--ink-900); }
.value span { display: block; font-size: 14px; color: var(--ink-500); margin-top: 4px; line-height: 1.5; }

/* Integrity arc */
.arc { margin-top: 44px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; position: relative; }
.arc::before { content: ""; position: absolute; left: 8%; right: 8%; top: 34px; height: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); opacity: .35; }
.arc-step { position: relative; border: 0; background: transparent; text-align: center; padding: 0 6px 12px; color: inherit; }
.arc-step .ico { width: 68px; height: 68px; margin: 0 auto; border-radius: 20px; background: #fff; border: 1px solid var(--line-soft); display: grid; place-items: center; color: var(--ink-700); box-shadow: var(--shadow-sm); transition: all .3s var(--ease); }
.arc-step .ico svg { width: 26px; height: 26px; }
.arc-step b { display: block; margin-top: 14px; font-size: 15.5px; color: var(--ink-900); }
.arc-step small { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.arc-step[aria-selected="true"] .ico { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-4px); box-shadow: 0 14px 30px -12px rgba(0, 102, 255, .65); }
.arc-step.proctor .ico { border-style: dashed; }
.arc-detail { margin-top: 26px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; background: #fff; border-radius: var(--r-panel); border: 1px solid var(--line-soft); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md); }
.arc-detail h3 { font-size: 24px; }
.arc-detail p { margin-top: 10px; color: var(--ink-500); }
.arc-detail .cap { margin-top: 18px; display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--blue-deep); background: var(--tint-ops); padding: 7px 12px; border-radius: 999px; }
.arc-detail .cap svg { width: 14px; height: 14px; }
.arc-detail img { width: 100%; border-radius: 14px; }

.record { background: var(--ink-800); color: #c9d6ea; border-radius: 14px; padding: 18px 20px; font-size: 13.5px; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-md); }
.record header { display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 600; font-size: 13px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.record header span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8fb6ff; }
.record ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.record li { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.record li:last-child { border-bottom: 0; }
.record time { color: #8fa3c0; }
.record b { color: #fff; font-weight: 500; }
.record em { font-style: normal; font-size: 11.5px; font-weight: 600; color: #6ee7b7; }
.record em.warn { color: #fbbf24; }

/* Offline technical moment */
.sync-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.sync-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; background: #fff; border: 1px solid var(--line-soft); color: var(--ink-500); transition: all .3s; }
.sync-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .3s; }
.sync-pill.on { color: var(--ink-900); border-color: rgba(0, 102, 255, .3); }
.sync-pill.on i { background: var(--blue); }
.sync-pill.ok.on i { background: var(--teal); }

/* Risk slider */
.risk { margin-top: 44px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }
.risk-control { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow-sm); }
.risk-control label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.risk-level { margin-top: 10px; font-size: 28px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.02em; }
.risk-desc { margin-top: 6px; color: var(--ink-500); font-size: 15.5px; min-height: 48px; }
.risk input[type="range"] { width: 100%; margin-top: 24px; accent-color: var(--blue); height: 28px; cursor: pointer; }
.risk-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-500); margin-top: 4px; }
.risk-note { margin-top: 22px; font-size: 13.5px; color: var(--ink-500); border-left: 3px solid var(--line); padding-left: 12px; }
.controls-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.controls-stack li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); transition: opacity .35s, background .35s, border-color .35s; opacity: .45; }
.controls-stack li .ico { width: 36px; height: 36px; border-radius: 9px; background: var(--bg-100); display: grid; place-items: center; color: var(--ink-500); transition: all .35s; }
.controls-stack li .ico svg { width: 18px; height: 18px; }
.controls-stack li b { font-size: 15px; color: var(--ink-900); display: block; }
.controls-stack li span { font-size: 13.5px; color: var(--ink-500); }
.controls-stack li em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-500); }
.controls-stack li.on { opacity: 1; border-color: rgba(0, 102, 255, .28); }
.controls-stack li.on .ico { background: var(--blue); color: #fff; }
.controls-stack li.on em { color: #0d8a5a; }

/* Continuity before/after */
.cont { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cont-col { border-radius: var(--r-panel); padding: 28px; }
.cont-col.bad { background: #fff7f2; border: 1px dashed #f3c4a4; }
.cont-col.good { background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); }
.cont-col h3 { font-size: 20px; }
.cont-col ol { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.cont-col li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 15px; color: var(--ink-700); align-items: baseline; }
.cont-col li time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.cont-col.bad li:last-child { color: #b54708; font-weight: 600; }
.cont-col.good li:last-child { color: #0d8a5a; font-weight: 600; }
.statement { margin-top: 26px; text-align: center; font-size: clamp(20px, 2vw, 24px); font-weight: 600; color: var(--ink-900); letter-spacing: -0.015em; }

/* Route cards */
.routes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.route { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); color: inherit; text-decoration: none !important; transition: box-shadow .3s, transform .3s var(--ease), border-color .3s; }
.route:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(0, 102, 255, .3); }
.route small { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.route b { font-size: 24px; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.2; }
.route span { color: var(--ink-500); font-size: 15.5px; }
.route .link-arrow { margin-top: 8px; }

/* Health: evidence journey timeline */
.hs-timeline { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.hs-timeline::before { content: ""; position: absolute; left: 4%; right: 4%; top: 30px; height: 2px; background: linear-gradient(90deg, #0066ff, #06b6d4, #18be7f, #ff9700); opacity: .4; }
.hs-stop { position: relative; text-align: left; border: 0; background: transparent; color: inherit; padding: 0; }
.hs-stop .circle { width: 60px; height: 60px; border-radius: 50%; background: #fff; border: 2px solid var(--c); display: grid; place-items: center; color: var(--c); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-sm); transition: all .3s var(--ease); }
.hs-stop[aria-selected="true"] .circle { background: var(--c); color: #fff; transform: scale(1.06); box-shadow: 0 12px 26px -10px var(--c); }
.hs-stop b { display: block; margin-top: 16px; font-size: 19px; color: var(--ink-900); }
.hs-stop .when { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-500); letter-spacing: .04em; margin-top: 2px; }
.hs-stop .what { display: block; font-size: 14.5px; color: var(--ink-500); margin-top: 6px; line-height: 1.5; }
.hs-panel { margin-top: 30px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 0; background: #fff; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); overflow: hidden; }
.hs-panel .copy { padding: clamp(24px, 4vw, 40px); }
.hs-panel h3 { font-size: 24px; }
.hs-panel p { margin-top: 10px; color: var(--ink-500); }
.hs-panel .media { position: relative; min-height: 340px; }
.hs-panel .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Health: station circuit */
.circuit-wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; margin-top: 44px; align-items: stretch; }
.circuit-media { border-radius: var(--r-panel); overflow: hidden; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); }
.circuit-media img { width: 100%; }
.evidence-feed { background: #fff; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); padding: 24px; display: flex; flex-direction: column; }
.evidence-feed .head { display: flex; align-items: center; gap: 12px; }
.evidence-feed .head .avatar { width: 40px; height: 40px; font-size: 14px; background: linear-gradient(135deg, #0891b2, #06b6d4); }
.evidence-feed .head b { display: block; font-size: 15.5px; color: var(--ink-900); }
.evidence-feed .head span { font-size: 13px; color: var(--ink-500); }
.feed { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.feed li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--bg-50); font-size: 14px; color: var(--ink-800); }
.feed li .st { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--c, #0891b2); }
.feed li small { display: block; font-size: 12px; color: var(--ink-500); }
.feed li em { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 5px; background: #e7f8f0; color: #0d8a5a; }
.feed li em.dev { background: #fff4e5; color: #b86a00; }
.js .feed li { opacity: 0; transform: translateX(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); transition-delay: var(--d); }
.js .evidence-feed.in .feed li { opacity: 1; transform: none; }
.feed-foot { margin-top: auto; padding-top: 18px; font-size: 13px; color: var(--ink-500); }
.ops-row { margin-top: 18px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ops-row span { text-align: center; font-size: 13px; font-weight: 500; padding: 10px 6px; border-radius: 8px; background: var(--tint-clinical); color: #08708a; }
.product-cards { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Health: EPA progression */
.epa { margin-top: 44px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }
.epa-list { display: grid; gap: 8px; align-content: start; }
.epa-item { text-align: left; border: 1px solid var(--line-soft); background: #fff; border-radius: 12px; padding: 14px 16px; color: inherit; transition: all .25s; }
.epa-item b { display: block; font-size: 15px; color: var(--ink-900); }
.epa-item small { font-size: 12px; color: var(--ink-500); font-weight: 600; letter-spacing: .06em; }
.epa-bar { margin-top: 10px; height: 8px; border-radius: 4px; background: var(--bg-100); position: relative; overflow: hidden; }
.epa-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #06b6d4, #0066ff); }
.epa-item[aria-selected="true"] { border-color: #0891b2; box-shadow: var(--shadow-md); }
.epa-detail { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); box-shadow: var(--shadow-md); padding: clamp(24px, 3vw, 36px); }
.epa-detail h3 { font-size: 22px; }
.levels { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.levels span { text-align: center; font-size: 12px; font-weight: 600; padding: 8px 4px; background: var(--bg-100); color: var(--ink-500); }
.levels span:first-child { border-radius: 8px 0 0 8px; } .levels span:last-child { border-radius: 0 8px 8px 0; }
.levels span.done { background: #cdeff3; color: #08708a; }
.levels span.now { background: #0891b2; color: #fff; }
.sources { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sources li { padding: 12px 14px; border-radius: 8px; background: var(--bg-50); border: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-800); }
.sources li small { display: block; font-size: 12px; color: var(--ink-500); margin-top: 2px; }
.sources li.gap { background: #fffaf2; border-color: #f5d9ad; }
.epa-detail { display: flex; flex-direction: column; }
.epa-next { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--ink-500); border-top: 1px solid var(--line-soft); }
.epa-next b { color: var(--ink-900); }
.epa-next .g b { color: #b86a00; }
.epa-next span:last-child { flex-basis: 100%; color: var(--ink-800); font-weight: 500; }
.illustrative { margin-top: 16px; font-size: 12.5px; color: var(--ink-500); }

/* ---------- Higher Education ---------- */
.heh { padding-block: 44px 96px; background: linear-gradient(180deg, #fff 0%, #f7f9ff 100%); }
.heh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: #fff; clip-path: polygon(0 100%, 0 70%, 62% 70%, 66% 0, 100% 0, 100% 100%); }
.heh .wrap { position: relative; z-index: 1; }
.heh-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.heh-visual { position: relative; }
.heh-visual img { width: 100%; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 8px var(--r-panel) var(--r-panel) var(--r-panel); box-shadow: var(--shadow-lg); }
.heh-visual .float-chip { position: absolute; }
.heh-visual .f1 { left: -20px; top: 10%; } .heh-visual .f2 { right: -16px; top: 22%; } .heh-visual .f3 { left: 8%; bottom: -18px; } .heh-visual .f4 { right: 10%; bottom: -18px; }
.proof-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; font-size: 14px; color: var(--ink-500); }
.proof-line b { color: var(--ink-900); }

.disc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.disc-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 600; color: var(--ink-700); transition: all .2s; }
.disc-tab:hover { border-color: var(--ink-900); }
.disc-tab[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.disc-stage { margin-top: 18px; border-radius: var(--r-panel) var(--r-panel) 0 0; background: #fff; border: 1px solid var(--line-soft); border-bottom: 0; padding: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; min-height: 250px; }
.disc-stage h3 { font-size: 24px; }
.disc-stage p { margin-top: 8px; color: var(--ink-500); }
.disc-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.disc-methods div { padding: 14px; border-radius: 8px; background: var(--bg-50); border: 1px solid var(--line-soft); }
.disc-methods b { display: block; font-size: 14.5px; color: var(--ink-900); }
.disc-methods span { font-size: 13px; color: var(--ink-500); }
.gov-layer { border-radius: 0 0 var(--r-panel) var(--r-panel); background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-deep-2) 100%); color: #fff; padding: 18px clamp(22px, 3vw, 34px); display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.gov-layer strong { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #bfe0ff; margin-right: 6px; }
.gov-layer span { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; }
.gov-layer span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9cc2ff; }

.pmap { margin-top: 44px; display: grid; grid-template-columns: 1fr 64px 1fr; align-items: center; gap: 0; }
.pmap-col { display: grid; gap: 10px; }
.pmap-col > small { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.course { text-align: left; border: 1px solid var(--line-soft); background: #fff; border-radius: 12px; padding: 14px 16px; color: inherit; transition: all .25s; display: block; width: 100%; }
.course b { display: block; font-size: 15.5px; color: var(--ink-900); }
.course > span { font-size: 13px; color: var(--ink-500); }
.course .clos { display: none; margin-top: 10px; gap: 6px; flex-wrap: wrap; }
.course .clos i { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 5px; background: var(--tint-ops); color: var(--blue-deep); }
.course[aria-pressed="true"] { border-color: var(--blue); box-shadow: var(--shadow-md); }
.course[aria-pressed="true"] .clos { display: flex; }
.pmap-arrow { display: grid; place-items: center; color: var(--blue); }
.pmap-arrow svg { width: 28px; height: 28px; }
.prog-panel { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 22px; box-shadow: var(--shadow-sm); }
.prog-panel h3 { font-size: 18px; }
.plo { margin-top: 14px; padding: 8px 10px; border-radius: 8px; transition: background .25s; }
.plo .row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-800); }
.plo .row b { font-variant-numeric: tabular-nums; }
.plo .bar { margin-top: 6px; height: 8px; border-radius: 4px; background: var(--bg-100); overflow: hidden; }
.plo .bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, #4b6cb7, #0066ff); }
.plo.hl { background: var(--tint-ops); }
.plo.hl .row { font-weight: 600; }

.insights { display: grid; gap: 10px; }
.insight { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); }
.insight .dot { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--c, var(--blue)); }
.insight b { display: block; font-size: 15px; color: var(--ink-900); }
.insight span { font-size: 14px; color: var(--ink-500); line-height: 1.5; }

.flow3 { margin-top: 40px; display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: stretch; gap: 14px; }
.flow3 .node { border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line-soft); padding: 22px; box-shadow: var(--shadow-sm); }
.flow3 .node.core { background: linear-gradient(135deg, var(--blue) 0%, #3882f6 100%); color: #d9e7ff; border: 0; box-shadow: var(--shadow-lg); }
.flow3 .node small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.flow3 .node.core small { color: #bfe0ff; }
.flow3 .node b { display: block; font-size: 20px; color: var(--ink-900); margin-top: 6px; letter-spacing: -0.015em; }
.flow3 .node.core b { color: #fff; }
.flow3 .node ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.flow3 .node li::before { content: "– "; opacity: .6; }
.flow3 .arrow { display: grid; place-items: center; color: var(--blue); }
.flow3 .arrow svg { width: 24px; height: 24px; }
.touch { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.touch span { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); color: var(--ink-700); }

/* ---------- Professional & Awarding ---------- */
.pah { padding-block: 44px 96px; background: var(--ink-900); color: #c7d2e3; }
.pah::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 52%; background: linear-gradient(160deg, rgba(0, 102, 255, .35), rgba(0, 102, 255, .05)); clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
.pah .wrap { position: relative; }
.pah h1 { color: #fff; }
.pah .lede { color: #c7d2e3; }
.pah .eyebrow { color: #8fb6ff; }
.pah .crumbs-bar, .pah .crumbs-bar a { color: #8fa3c0; }
.pah .crumbs-bar [aria-current] { color: #fff; }
.pah .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.pah .btn-ghost:hover { border-color: #fff; }
.pah-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.pah-visual { position: relative; }
.pah-visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); }
.pah-visual .float-chip { position: absolute; }
.pah-visual .f1 { left: -18px; top: 12%; } .pah-visual .f2 { right: -14px; top: 8%; } .pah-visual .f3 { left: -10px; bottom: 16%; } .pah-visual .f4 { right: 8%; bottom: -18px; }

.net { margin-top: 44px; }
.net-nodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; padding-bottom: 46px; }
.net-nodes::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px); opacity: .5; }
.net-node { position: relative; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px; text-align: center; box-shadow: var(--shadow-sm); }
.net-node::after { content: ""; position: absolute; left: 50%; bottom: -47px; width: 2px; height: 46px; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); opacity: .5; }
.net-node b { display: block; font-size: 15.5px; color: var(--ink-900); }
.net-node span { display: block; font-size: 13px; color: var(--ink-500); margin-top: 2px; }
.net-node .ping { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); margin-bottom: 8px; box-shadow: 0 0 0 0 rgba(24, 190, 127, .5); animation: ping 2.4s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(24, 190, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(24, 190, 127, 0); } }
.command { position: relative; margin: 0 auto; max-width: 760px; background: var(--ink-800); color: #c9d6ea; border-radius: var(--r-panel); padding: 22px 26px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; }
.command::before { content: ""; position: absolute; left: 50%; top: -2px; width: 2px; height: 2px; }
.command strong { color: #fff; font-size: 18px; letter-spacing: -0.01em; }
.command .stats { display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
.command .stats b { display: block; color: #fff; font-size: 20px; font-variant-numeric: tabular-nums; }
.command p { grid-column: 1 / -1; font-size: 13px; color: #8fa3c0; }

.standard { margin-top: 44px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: center; }
.std-card { border-radius: var(--r-panel); background: linear-gradient(135deg, var(--blue) 0%, #3882f6 100%); color: #dce9ff; padding: 26px; box-shadow: var(--shadow-lg); }
.std-card small { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #bfe0ff; }
.std-card b { display: block; color: #fff; font-size: 22px; margin-top: 6px; letter-spacing: -0.015em; }
.std-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.std-card li { display: flex; gap: 8px; } .std-card li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.locs { display: grid; gap: 10px; }
.loc { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: var(--shadow-sm); position: relative; }
.loc::before { content: ""; position: absolute; left: -20px; top: 50%; width: 20px; height: 2px; background: var(--blue); opacity: .4; }
.loc b { font-size: 15.5px; color: var(--ink-900); }
.loc span { font-size: 13.5px; color: var(--ink-500); grid-column: 1; }
.loc em { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--tint-ops); color: var(--blue-deep); white-space: nowrap; }

.score { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); box-shadow: var(--shadow-md); padding: 24px; }
.score-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.score-top .big { font-size: 40px; font-weight: 800; color: var(--ink-900); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.score-top .meta b { display: block; color: var(--ink-900); font-size: 16px; }
.score-top .meta span { font-size: 13.5px; color: var(--ink-500); }
.score-top .pass { margin-left: auto; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #e7f8f0; color: #0d8a5a; }
.score .toggle { margin-top: 18px; border: 1px dashed var(--line); background: var(--bg-50); border-radius: 10px; width: 100%; padding: 12px; font-size: 14.5px; font-weight: 600; color: var(--blue); }
.score .toggle:hover { border-color: var(--blue); }
.layers4 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.layers4[hidden] { display: none; }
.layers4 div { padding: 14px; border-radius: 8px; background: var(--bg-50); border: 1px solid var(--line-soft); }
.layers4 b { display: block; font-size: 14.5px; color: var(--ink-900); }
.layers4 span { font-size: 13px; color: var(--ink-500); }

/* ---------- Products ---------- */
.prh { padding-block: 44px 40px; background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.prh .ph-copy { text-align: left; margin: 0; max-width: 760px; }
.prh .ph-copy .crumbs-bar { justify-content: flex-start; }
.prh .ph-copy .eyebrow::before { display: inline-block; }
.prod-tabs { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.prod-tab { text-align: left; border: 1px solid var(--line-soft); border-radius: 18px; padding: 20px 22px; background: #fff; color: inherit; display: flex; flex-direction: column; gap: 6px; transition: all .25s var(--ease); position: relative; overflow: hidden; }
.prod-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc); transform: scaleY(0); transition: transform .3s var(--ease); }
.prod-tab small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); }
.prod-tab b { font-size: 24px; color: var(--ink-900); letter-spacing: -0.02em; }
.prod-tab span { font-size: 14.5px; color: var(--ink-500); }
.prod-tab[aria-selected="true"] { background: var(--pt); border-color: transparent; box-shadow: var(--shadow-md); }
.prod-tab[aria-selected="true"]::before { transform: scaleY(1); }
.prod-panel { margin-top: 14px; display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); overflow: hidden; }
.prod-panel .copy { padding: clamp(26px, 4vw, 44px); display: flex; flex-direction: column; }
.prod-panel h2 { font-size: clamp(26px, 2.6vw, 34px); }
.prod-panel p { margin-top: 12px; color: var(--ink-500); }
.prod-panel .check-list { margin-top: 18px; }
.prod-panel .actions { margin-top: auto; padding-top: 26px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.prod-panel .media { position: relative; min-height: 420px; background: var(--bg-50); }
.prod-panel .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.caps { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.caps.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .caps.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .caps.four { grid-template-columns: 1fr; } }
.cap-card { padding: 22px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid var(--line-soft); }
.cap-card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.cap-card .ico svg { width: 21px; height: 21px; }
.cap-card b { display: block; font-size: 18px; color: var(--ink-900); margin-top: 14px; }
.cap-card small { display: block; font-size: 13px; font-weight: 600; color: var(--blue); margin-top: 2px; }
.cap-card span { display: block; font-size: 14.5px; color: var(--ink-500); margin-top: 8px; line-height: 1.5; }

.layer-diagram { margin-top: 44px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-sm); }
.ld-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ld-row span { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--bg-50); color: var(--ink-800); }
.ld-row span.major { background: var(--tint-ops); border-color: rgba(0, 102, 255, .25); color: var(--blue-deep); }
.ld-flow { height: 36px; margin: 6px auto; width: 2px; background: repeating-linear-gradient(180deg, var(--blue) 0 6px, transparent 6px 12px); opacity: .5; }
.ld-core { text-align: center; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-deep-2) 100%); color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.ld-core span { display: block; font-weight: 500; font-size: 13.5px; color: #cfe0ff; margin-top: 4px; }
.ld-out { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ld-out div { text-align: center; padding: 12px 8px; border-radius: 8px; background: var(--tint-intel); color: var(--tint-intel-ink); font-size: 14px; font-weight: 600; }

@media (max-width: 980px) {
  .heh-grid, .pah-grid, .disc-stage, .standard, .prod-panel { grid-template-columns: 1fr; }
  .heh::after, .pah::before { display: none; }
  .heh-visual .float-chip, .pah-visual .float-chip { position: static; margin: 10px 8px 0 0; }
  .pmap { grid-template-columns: 1fr; gap: 14px; }
  .pmap-arrow { transform: rotate(90deg); }
  .flow3 { grid-template-columns: 1fr; }
  .flow3 .arrow { transform: rotate(90deg); }
  .net-nodes { grid-template-columns: repeat(2, 1fr); padding-bottom: 20px; }
  .net-nodes::after, .net-node::after { display: none; }
  .command { grid-template-columns: 1fr; }
  .command .stats { justify-content: flex-start; }
  .loc::before { display: none; }
  .prod-tabs { grid-template-columns: 1fr; }
  .prod-panel .media { min-height: 260px; order: -1; }
  .caps { grid-template-columns: 1fr 1fr; }
  .ld-out { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .disc-methods, .layers4, .caps { grid-template-columns: 1fr; }
  .net-nodes { grid-template-columns: 1fr; }
}

/* ---------- Trust & Security ---------- */
.th { padding-block: 44px 88px; background: linear-gradient(180deg, #fff 0%, var(--tint-ops) 100%); }
.th::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: rgba(0, 102, 255, .05); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
.th .wrap { position: relative; z-index: 1; }
.th-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.assure { background: #fff; border: 1px solid var(--line-soft); border-top: 3px solid var(--blue); border-radius: 12px; padding: 26px; box-shadow: var(--shadow-md); display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.assure img { width: 96px; height: 96px; }
.assure small { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.assure b { display: block; font-size: 20px; color: var(--ink-900); margin-top: 4px; }
.assure p { font-size: 14.5px; color: var(--ink-500); margin-top: 6px; line-height: 1.5; }
.assure a { display: inline-block; margin-top: 10px; font-size: 14.5px; font-weight: 600; }

.stack { margin-top: 40px; display: grid; gap: 8px; }
.layer { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.layer[open] { border-color: rgba(0, 102, 255, .3); box-shadow: var(--shadow-md); }
.layer summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; }
.layer summary::-webkit-details-marker { display: none; }
.layer .n { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.layer .n svg { width: 20px; height: 20px; }
.layer summary b { display: block; font-size: 17px; color: var(--ink-900); }
.layer summary span { font-size: 14.5px; color: var(--ink-500); }
.layer .plus { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-500); transition: transform .25s; }
.layer .plus svg { width: 14px; height: 14px; }
.layer[open] .plus { transform: rotate(180deg); }
.layer .body { padding: 0 20px 20px 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.layer .body li { font-size: 14.5px; color: var(--ink-700); }
.layer .body ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.layer .body p { grid-column: 1 / -1; font-size: 13px; color: var(--ink-500); }

.resp { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-soft); border-radius: var(--r-panel); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.resp > div { padding: clamp(22px, 3vw, 32px); }
.resp > div + div { border-left: 1px solid var(--line-soft); background: var(--surface); }
.resp h3 { font-size: 19px; display: flex; gap: 10px; align-items: center; }
.resp h3 i { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--bg-100); color: var(--ink-500); }
.resp > div + div h3 i { background: var(--tint-ops); color: var(--blue-deep); }
.resp ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.resp li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--ink-800); line-height: 1.5; }
.resp li svg { width: 18px; height: 18px; color: var(--blue); margin-top: 3px; }

.boundary { margin-top: 44px; display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 18px; align-items: center; }
.sys { display: grid; gap: 10px; }
.sys span { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line-soft); font-size: 15px; font-weight: 600; color: var(--ink-900); box-shadow: var(--shadow-sm); }
.sys span::after { content: ""; width: 28px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 5px, transparent 5px 9px); opacity: .6; }
.sys.right span { flex-direction: row-reverse; }
.gov-ring { position: relative; border: 2px dashed rgba(0, 102, 255, .45); border-radius: 28px; padding: 26px 22px 20px; background: rgba(238, 244, 255, .6); text-align: center; }
.gov-ring > small { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fff; padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); border: 1px solid rgba(0, 102, 255, .3); white-space: nowrap; }
.gov-ring .core { border-radius: 16px; background: linear-gradient(135deg, var(--blue) 0%, #3882f6 100%); color: #fff; padding: 20px; font-weight: 700; font-size: 18px; box-shadow: var(--shadow-lg); }
.gov-ring .core span { display: block; font-size: 13px; font-weight: 500; color: #d6e6ff; margin-top: 4px; }
.gov-ring ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gov-ring li { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: #fff; color: var(--blue-deep); border: 1px solid rgba(0, 102, 255, .2); }

/* ---------- Customer Success ---------- */
.ch { padding-block: 44px 72px; background: var(--tint-warm); }
.ch::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34%; height: 100%; background: rgba(0, 102, 255, .06); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.ch .wrap { position: relative; z-index: 1; }
.ch .lede { max-width: 640px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.filter { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14.5px; font-weight: 600; color: var(--ink-700); }
.filter:hover { border-color: var(--ink-900); }
.filter[aria-pressed="true"] { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.stories { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stories .scard.feature { grid-column: span 2; }
@media (max-width: 980px) { .stories .scard.feature { grid-column: auto; } }
.scard { border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); padding: 24px; display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none !important; transition: box-shadow .25s, transform .25s var(--ease); }
a.scard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.scard .tagrow { display: flex; gap: 6px; flex-wrap: wrap; }
.scard .tag { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; background: var(--bg-100); color: var(--ink-500); }
.scard .tag.out { background: #e7f8f0; color: #0d8a5a; }
.scard b { font-size: 22px; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.2; }
.scard .inst { font-size: 14px; font-weight: 600; color: var(--blue); }
.scard p { font-size: 15px; color: var(--ink-500); }
.scard .pills { margin-top: auto; padding-top: 8px; }
.scard.feature { background: var(--ink-800); border-color: transparent; color: #c9d6ea; position: relative; overflow: hidden; }
.scard.feature::before { content: ""; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(0, 102, 255, .45) 0%, rgba(0, 102, 255, 0) 60%); }
.scard.feature > * { position: relative; }
.scard.feature b { color: #fff; font-size: 28px; }
.scard.feature .inst { color: #9cc2ff; }
.scard.feature p { color: #c9d6ea; }
.scard.feature .tag { background: rgba(255, 255, 255, .12); color: #dbe7ff; }
.scard.feature .tag.out { background: rgba(24, 190, 127, .2); color: #8ef0c4; }
.scard.feature .pills span { background: rgba(255, 255, 255, .12); color: #fff; }
.scard.empty { background: transparent; border-style: dashed; box-shadow: none; justify-content: center; }
.scard[hidden] { display: none; }

.cs-story { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(28px, 5vw, 64px); }
.cs-side { position: sticky; top: 110px; align-self: start; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 24px; box-shadow: var(--shadow-sm); }
.cs-side dl { margin: 0; display: grid; gap: 14px; }
.cs-side dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.cs-side dd { margin: 2px 0 0; font-size: 15px; color: var(--ink-900); font-weight: 500; }
.ba-strip { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line-soft); }
.ba-strip > div { padding: 22px; }
.ba-strip > div:first-child { background: var(--bg-50); }
.ba-strip > div:last-child { background: var(--tint-ops); }
.ba-strip small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.ba-strip > div:last-child small { color: var(--blue-deep); }
.ba-strip ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; color: var(--ink-800); }
.cs-block { margin-top: 36px; }
.cs-block h3 { font-size: 22px; }
.cs-block p { margin-top: 10px; color: var(--ink-500); max-width: 680px; }
.quote-pending { margin-top: 36px; border-left: 3px solid var(--line); padding: 6px 0 6px 18px; font-size: 14px; color: var(--ink-500); }
.logo-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.logo-grid div { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.logo-grid img { width: 56px; height: 56px; object-fit: contain; }
.logo-grid span { font-size: 14px; font-weight: 600; color: var(--ink-900); line-height: 1.3; }

/* ---------- Company ---------- */
.coh { padding-block: 56px 96px; background: #fff; }
.coh-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.mosaic { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mosaic div { border-radius: 14px; padding: 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; font-size: 13.5px; font-weight: 600; color: var(--ink-800); background: var(--bg-50); border: 1px solid var(--line-soft); }
.mosaic div small { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 4px; }
.mosaic .t1 { background: var(--tint-ops); } .mosaic .t2 { background: var(--tint-clinical); } .mosaic .t3 { background: var(--tint-intel); }
.mosaic .core { grid-column: 1 / -1; background: linear-gradient(135deg, var(--blue-deep), var(--blue-deep-2)); color: #fff; border: 0; min-height: 110px; font-size: 20px; letter-spacing: -0.015em; }
.mosaic .core small { color: #bfe0ff; }
.manifesto { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.manifesto .big { font-size: clamp(28px, 3vw, 40px); line-height: 1.25; font-weight: 600; color: var(--ink-900); letter-spacing: -0.022em; margin-top: 18px; }
.manifesto .big em { font-style: normal; color: var(--blue); }
.manifesto p.body { margin-top: 22px; color: var(--ink-500); max-width: 600px; }
.beliefs { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.belief-card { padding: 24px; border-radius: 6px 20px 20px 20px; background: #fff; border: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.belief-card .num { font-size: 13px; font-weight: 700; color: var(--blue); }
.belief-card b { font-size: 19px; color: var(--ink-900); letter-spacing: -0.015em; }
.belief-card span { font-size: 15px; color: var(--ink-500); line-height: 1.55; }
.belief-card a { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 600; }
.belief-card.lead { background: var(--ink-900); border-color: transparent; }
.belief-card.lead b { color: #fff; font-size: 24px; }
.belief-card.lead span { color: #aab3c2; }

@media (max-width: 980px) {
  .th-grid, .resp, .boundary, .stories, .cs-story, .coh-grid, .manifesto { grid-template-columns: 1fr; }
  .th::after, .ch::after { display: none; }
  .resp > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
  .sys span::after { display: none; }
  .cs-side { position: static; }
  .logo-grid, .beliefs { grid-template-columns: 1fr 1fr; }
  .layer .body { padding-left: 20px; grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .assure { grid-template-columns: 1fr; }
  .ba-strip, .logo-grid, .beliefs { grid-template-columns: 1fr; }
  .mosaic { grid-template-columns: 1fr 1fr; }
}

/* ---------- Product pages ---------- */
.dph { padding-block: 44px 96px; background: var(--tint-warm); }
.dph::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38%; background: linear-gradient(180deg, #ecebff 0%, #f4f3ff 100%); border-radius: 0 0 64px 0; }
.dph .wrap { position: relative; }
.dph .hh-grid { grid-template-columns: 1fr 1fr; }
.dph .hh-visual img { border-radius: var(--r-human) 120px var(--r-human) var(--r-human); }
.dph .eyebrow { color: var(--tint-intel-ink); }
.dph .chips .chip i { background: var(--tint-intel-ink); }
@media (max-width: 980px) { .dph::before { display: none; } .dph .hh-grid { grid-template-columns: 1fr; } .dph .hh-visual { order: 2; } }
.steps3 { display: grid; gap: 10px; }
.steps3 div { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); }
.steps3 i { font-style: normal; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--blue); }
.steps3 b { display: block; font-size: 16px; color: var(--ink-900); }
.steps3 span { font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.off-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: center; margin-top: 44px; }
.off-grid .device { margin: 0; width: 100%; }
.std-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: var(--ink-900); color: #c9d6ea; font-size: 14px; margin-bottom: 14px; }
.std-banner b { color: #fff; }
.std-banner span { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12.5px; font-weight: 600; color: #dbe7ff; }

.ring { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.st-btn { position: relative; text-align: left; border: 1px solid var(--line-soft); background: #fff; border-radius: 14px; padding: 16px; color: inherit; display: flex; flex-direction: column; gap: 4px; transition: all .25s; }
.st-btn .no { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--c, #0891b2); }
.st-btn b { font-size: 15px; color: var(--ink-900); margin-top: 6px; }
.st-btn small { font-size: 12.5px; color: var(--ink-500); }
.st-btn[aria-selected="true"] { border-color: var(--c, #0891b2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ring-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-500); padding: 8px 4px 0; }
.ring-note::before { content: ""; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, #0891b2 0 6px, transparent 6px 12px); opacity: .5; order: 2; }
.spec { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 24px; box-shadow: var(--shadow-md); }
.spec small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0891b2; }
.spec h3 { font-size: 22px; margin-top: 6px; }
.spec dl { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec dl div { padding: 12px; border-radius: 8px; background: var(--bg-50); border: 1px solid var(--line-soft); }
.spec dt { font-size: 12px; color: var(--ink-500); }
.spec dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-900); }

.rot { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-panel); background: #fff; box-shadow: var(--shadow-sm); }
.rot table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.rot th, .rot td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--line-soft); }
.rot th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); background: var(--bg-50); }
.rot td:first-child, .rot th:first-child { text-align: left; font-weight: 600; color: var(--ink-900); }
.rot td span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-weight: 700; font-size: 13px; color: #fff; background: var(--c); }
.readiness { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; }
.readiness ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.readiness li { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--ink-800); padding: 10px 12px; border-radius: 8px; background: var(--bg-50); }
.readiness li em { font-style: normal; font-size: 12.5px; font-weight: 600; color: #0d8a5a; }
.readiness li em.pending { color: #b86a00; }
.publish { margin-top: 4px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 14.5px; background: #fff4e5; color: #b86a00; transition: background .3s, color .3s; }
.publish.ready { background: #e7f8f0; color: #0d8a5a; }
.publish i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }

.rubric { background: #fff; border: 10px solid var(--ink-800); border-radius: 30px; padding: 18px; box-shadow: var(--shadow-lg); max-width: 460px; margin-left: auto; }
.rubric header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-500); padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.rubric header b { color: var(--ink-900); font-size: 15px; }
.crit { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.crit p { font-size: 14.5px; color: var(--ink-900); font-weight: 600; }
.crit .rscale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.crit .rscale span { text-align: center; font-size: 12px; padding: 8px 4px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-500); }
.crit .rscale span.on { background: #0891b2; border-color: #0891b2; color: #fff; font-weight: 600; }
.rubric .ai-note { margin-top: 12px; font-size: 12.5px; color: var(--tint-intel-ink); background: var(--tint-intel); border-radius: 8px; padding: 10px 12px; }
.rubric textarea { width: 100%; margin-top: 12px; font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; resize: none; color: var(--ink-700); }

.collapse { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 0; align-items: center; margin-top: 40px; }
.chips6 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips6 div { padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-800); display: flex; justify-content: space-between; gap: 8px; }
.chips6 div em { font-style: normal; font-size: 12px; font-weight: 600; color: #0d8a5a; }
.chips6 div em.dev { color: #b86a00; }
.profile { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 22px; box-shadow: var(--shadow-md); }
.profile h3 { font-size: 18px; }
.profile .plo .bar i { background: linear-gradient(90deg, #06b6d4, #0066ff); }

.phone { width: 300px; max-width: 100%; margin: 0 auto; border-radius: 40px; background: var(--ink-900); padding: 12px; box-shadow: var(--shadow-lg); }
.phone-screen { border-radius: 30px; background: var(--bg-50); overflow: hidden; }
.phone-top { padding: 18px 18px 10px; }
.phone-top small { font-size: 12px; color: var(--ink-500); }
.phone-top b { display: block; font-size: 17px; color: var(--ink-900); }
.ev-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 18px 14px; scrollbar-width: none; }
.ev-cards::-webkit-scrollbar { display: none; }
.ev-card { flex: 0 0 84%; scroll-snap-align: center; background: #fff; border-radius: 18px; padding: 16px; border: 1px solid var(--line-soft); }
.ev-card small { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c, var(--blue)); }
.ev-card b { display: block; font-size: 16px; color: var(--ink-900); margin-top: 6px; }
.ev-card p { font-size: 13px; color: var(--ink-500); margin-top: 6px; line-height: 1.45; }
.ev-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ev-card .meta span { font-size: 11.5px; padding: 3px 8px; border-radius: 6px; background: var(--bg-100); color: var(--ink-700); }
.phone-btn { margin: 0 18px 18px; display: block; text-align: center; padding: 12px; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 600; font-size: 14.5px; }
.swipe-hint { text-align: center; font-size: 12.5px; color: var(--ink-500); margin-top: 12px; }

.validate { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; align-items: start; }
.vcard { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 22px; box-shadow: var(--shadow-sm); }
.vcard small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.vcard h3 { font-size: 19px; margin-top: 6px; }
.vcard p { font-size: 14.5px; color: var(--ink-500); margin-top: 8px; }
.vcard .crit .rscale span { cursor: default; }
.status-track { display: flex; gap: 6px; margin-top: 16px; }
.status-track span { flex: 1; text-align: center; font-size: 12.5px; font-weight: 600; padding: 8px 4px; border-radius: 8px; background: var(--bg-100); color: var(--ink-500); transition: all .3s; }
.status-track span.done { background: #e7f8f0; color: #0d8a5a; }
.status-track span.now { background: var(--blue); color: #fff; }
.vcard .actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.vcard .stamp { margin-top: 12px; font-size: 12.5px; color: var(--ink-500); font-variant-numeric: tabular-nums; }

.nodes { position: relative; margin-top: 44px; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; }
.nodes svg.links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.entry { background: #fff; border: 1px solid var(--line-soft); border-radius: 18px; padding: 20px; box-shadow: var(--shadow-md); position: relative; z-index: 1; }
.entry small { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #0d8a5a; }
.entry b { display: block; font-size: 17px; color: var(--ink-900); margin-top: 6px; }
.entry p { font-size: 14px; color: var(--ink-500); margin-top: 6px; }
.comps { display: grid; gap: 12px; position: relative; z-index: 1; grid-column: 3; }
.comp { padding: 14px 16px; border-radius: 12px; background: var(--tint-intel); border: 1px solid rgba(75, 79, 201, .18); }
.comp b { display: block; font-size: 15px; color: var(--ink-900); }
.comp span { font-size: 13px; color: var(--tint-intel-ink); }

@media (max-width: 980px) {
  .off-grid, .collapse, .validate { grid-template-columns: 1fr; }
  .collapse .pmap-arrow { transform: rotate(90deg); padding: 10px 0; }
  .nodes { grid-template-columns: 1fr; gap: 14px; }
  .nodes svg.links { display: none; }
  .comps { grid-column: auto; }
  .rubric { margin: 0 auto; }
}
@media (max-width: 640px) {
  .ring { grid-template-columns: 1fr 1fr; }
  .spec dl, .chips6 { grid-template-columns: 1fr; }
}

/* ---------- Governance & Intelligence pages (existing-site additions) ---------- */
.tree { margin-top: 40px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
.tree > div { position: relative; padding: 18px 16px; background: #fff; border: 1px solid var(--line-soft); border-left: 0; }
.tree > div:first-child { border-left: 1px solid var(--line-soft); border-radius: 12px 0 0 12px; }
.tree > div:last-child { border-radius: 0 12px 12px 0; background: var(--blue); border-color: var(--blue); color: #fff; }
.tree > div:not(:last-child)::after { content: ""; position: absolute; right: -9px; top: 50%; width: 16px; height: 16px; background: inherit; border-top: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); transform: translateY(-50%) rotate(45deg); z-index: 1; }
.tree small { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.tree b { display: block; font-size: 17px; color: var(--ink-900); margin-top: 4px; }
.tree span { display: block; font-size: 13px; color: var(--ink-500); margin-top: 4px; line-height: 1.45; }
.tree > div:last-child small, .tree > div:last-child span { color: #d6e6ff; }
.tree > div:last-child b { color: #fff; }

.pipe { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pipe li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); font-size: 14.5px; font-weight: 600; color: var(--ink-800); }
.pipe li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11.5px; background: var(--tint-ops); color: var(--blue); }
.pipe li.end { background: var(--blue); border-color: var(--blue); color: #fff; }
.pipe li.end i { background: rgba(255, 255, 255, .2); color: #fff; }
.pipe .arr { color: var(--ink-500); font-weight: 400; }
.quality-layer { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.quality-layer span { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 6px; background: #e7f8f0; color: #0d8a5a; }

.qflow { margin-top: 36px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.qflow div { text-align: center; padding: 16px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line-soft); }
.qflow div b { display: block; font-size: 15px; color: var(--ink-900); }
.qflow div span { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 4px; line-height: 1.4; }
.qflow div.cur { border-color: var(--blue); box-shadow: var(--shadow-md); }
.qcard { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px 20px; }
.qcard p { font-size: 15px; color: var(--ink-900); font-weight: 500; }
.qcard .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.qcard .tags span { font-size: 12px; padding: 4px 9px; border-radius: 6px; background: var(--bg-100); color: var(--ink-700); }

.role-rail { margin-top: 36px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.role-rail div { padding: 14px 12px; border-radius: 12px 12px 0 0; background: #fff; border: 1px solid var(--line-soft); border-bottom: 0; text-align: center; }
.role-rail b { display: block; font-size: 14.5px; color: var(--ink-900); }
.role-rail span { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 4px; line-height: 1.4; }
.role-bar { border-radius: 0 0 14px 14px; background: linear-gradient(135deg, var(--blue-deep), var(--blue-deep-2)); color: #fff; padding: 14px 18px; display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.role-bar strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #bfe0ff; }

.conflicts { display: grid; gap: 8px; }
.conflict { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-800); transition: all .3s; }
.conflict small { display: block; font-size: 12.5px; color: var(--ink-500); }
.conflict em { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: #fff1f0; color: #b42318; white-space: nowrap; }
.conflict.ok em { background: #e7f8f0; color: #0d8a5a; }

.seatmap { background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 22px; box-shadow: var(--shadow-sm); }
.seat-rules { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.seat-rule { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.seat-rule[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.seats { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.seats i { aspect-ratio: 1; border-radius: 6px; background: var(--bg-100); border: 1px solid var(--line-soft); transition: background .35s, border-color .35s; }
.seats i.a { background: #0066ff; border-color: #0066ff; }
.seats i.b { background: #06b6d4; border-color: #06b6d4; }
.seats i.c { background: #ff9700; border-color: #ff9700; }
.seat-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-500); }
.seat-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; background: var(--c); vertical-align: -1px; }
.seat-note { margin-top: 10px; font-size: 14px; color: var(--ink-800); font-weight: 500; min-height: 22px; }

.rtimeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rtimeline li { position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: start; padding: 0 0 22px; }
.rtimeline li:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line-soft); }
.rtimeline .dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; background: var(--c, var(--blue)); }
.rtimeline b { display: block; font-size: 16px; color: var(--ink-900); padding-top: 2px; }
.rtimeline span { display: block; font-size: 14px; color: var(--ink-500); margin-top: 2px; }
.rtimeline em { font-style: normal; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 6px; background: var(--bg-100); color: var(--ink-700); white-space: nowrap; margin-top: 4px; }
.rtimeline .score { font-variant-numeric: tabular-nums; }

.formats { margin-top: 36px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fgroup { border-radius: 14px; background: #fff; border: 1px solid var(--line-soft); padding: 18px; }
.fgroup small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c, var(--blue)); }
.fgroup b { display: block; font-size: 17px; color: var(--ink-900); margin-top: 4px; }
.fgroup ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fgroup li { font-size: 13.5px; color: var(--ink-700); padding-left: 12px; position: relative; line-height: 1.4; }
.fgroup li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 2px; background: var(--c, var(--blue)); }
.formats.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .formats.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .formats.four { grid-template-columns: 1fr; } }
.ev-strip { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-radius: 12px; background: var(--tint-ops); }
.ev-strip strong { font-size: 13px; color: var(--blue-deep); margin-right: 6px; }
.ev-strip span { font-size: 13.5px; padding: 5px 11px; border-radius: 999px; background: #fff; color: var(--ink-800); font-weight: 500; }

.tax { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.tax span { font-size: 13.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; background: var(--tint-intel); color: var(--tint-intel-ink); }

.iqm { border: 1px solid var(--line-soft); border-radius: var(--r-panel); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.iqm table { width: 100%; border-collapse: collapse; font-size: 14px; }
.iqm th, .iqm td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.iqm th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); background: var(--bg-50); }
.iqm td:first-child { font-weight: 600; color: var(--ink-900); }
.iqm .flag { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 5px; }
.iqm .ok { background: #e7f8f0; color: #0d8a5a; } .iqm .warn { background: #fff4e5; color: #b86a00; } .iqm .bad { background: #fff1f0; color: #b42318; }
.metric-defs { display: grid; gap: 8px; }
.metric-defs details { background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 16px; }
.metric-defs summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--ink-900); }
.metric-defs p { font-size: 14px; color: var(--ink-500); margin-top: 6px; }

.fw-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.fw-tab { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14.5px; font-weight: 600; color: var(--ink-700); text-align: left; }
.fw-tab small { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-500); }
.fw-tab[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.fw-tab[aria-selected="true"] small { color: #aab3c2; }
.fw-flow { margin-top: 16px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.fw-flow .base { border-radius: 16px; padding: 20px; background: linear-gradient(135deg, var(--blue-deep), var(--blue-deep-2)); color: #d6e6ff; font-size: 14px; }
.fw-flow .base b { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; }
.fw-flow .out { border-radius: 16px; padding: 20px; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); }
.fw-flow .out b { display: block; font-size: 18px; color: var(--ink-900); }
.fw-flow .out p { font-size: 14.5px; color: var(--ink-500); margin-top: 6px; }
.fw-flow .arrow { color: var(--blue); }
.fw-flow .arrow svg { width: 26px; height: 26px; }

.di { margin-top: 40px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.di-col { border-radius: var(--r-panel); padding: 22px; background: #fff; border: 1px solid var(--line-soft); }
.di-col small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.di-col b { display: block; font-size: 19px; color: var(--ink-900); margin-top: 4px; }
.di-col ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-700); }
.di-mid { text-align: center; font-weight: 700; color: var(--ink-900); font-size: 15px; }
.di-mid i { display: block; width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 16px; background: var(--blue); color: #fff; font-style: normal; font-size: 26px; line-height: 56px; }

.aipanel { margin-top: 40px; display: grid; grid-template-columns: 1fr 120px 1fr; align-items: center; }
.aipanel .side { border-radius: var(--r-panel); padding: 22px; border: 1px solid var(--line-soft); background: #fff; box-shadow: var(--shadow-sm); }
.aipanel .side.aiside { background: var(--tint-intel); border-color: rgba(75, 79, 201, .2); }
.aipanel small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tint-intel-ink); }
.aipanel .side:not(.aiside) small { color: var(--blue); }
.aipanel b { display: block; font-size: 17px; color: var(--ink-900); margin-top: 6px; }
.aipanel p { font-size: 14.5px; color: var(--ink-700); margin-top: 8px; }
.aipanel .link { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.aipanel .link i { display: block; height: 2px; margin: 8px 6px; background: linear-gradient(90deg, var(--tint-intel-ink), var(--blue)); }

/* ---------- Trust: deployment ---------- */
.deploy-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 36px; }
.deploy-tab { text-align: left; border: 1px solid var(--line-soft); background: #fff; border-radius: 16px; padding: 18px 20px; color: inherit; display: flex; flex-direction: column; gap: 4px; transition: all .25s; }
.deploy-tab b { font-size: 18px; color: var(--ink-900); }
.deploy-tab span { font-size: 14px; color: var(--ink-500); }
.deploy-tab[aria-selected="true"] { border-color: var(--blue); box-shadow: var(--shadow-md); background: var(--tint-ops); }
.deploy-panel { margin-top: 14px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: 24px; display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: center; }
.deploy-panel p { color: var(--ink-500); font-size: 15px; margin-top: 8px; }
.stackviz { display: grid; gap: 6px; }
.stackviz div { padding: 12px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; background: var(--bg-50); border: 1px solid var(--line-soft); color: var(--ink-800); }
.stackviz div em { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 5px; }
.stackviz .da em { background: var(--tint-ops); color: var(--blue-deep); }
.stackviz .inst em { background: #fff4e5; color: #b86a00; }
.lifecycle6 { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.lifecycle6 li { padding: 16px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line-soft); text-align: center; position: relative; }
.lifecycle6 li b { display: block; font-size: 15px; color: var(--ink-900); }
.lifecycle6 li span { display: block; font-size: 12.5px; color: var(--ink-500); margin-top: 4px; line-height: 1.4; }
.lifecycle6 li::after { content: "→"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); color: var(--blue); font-size: 13px; z-index: 1; }
.lifecycle6 li:last-child::after { content: "↻"; }
.modes3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.mode { padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line-soft); }
.mode small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.mode b { display: block; font-size: 18px; color: var(--ink-900); margin-top: 4px; }
.mode p { font-size: 14.5px; color: var(--ink-500); margin-top: 8px; }
.sovereign { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-700); }
.sovereign span { padding: 6px 12px; border-radius: 999px; background: var(--bg-100); font-weight: 500; }

/* ---------- Resources ---------- */
.res-feature { margin-top: 30px; display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--r-panel); overflow: hidden; background: var(--ink-800); color: #c9d6ea; text-decoration: none !important; box-shadow: var(--shadow-md); }
.res-feature .art { position: relative; min-height: 280px; background: linear-gradient(140deg, var(--blue-deep), var(--blue-deep-2)); overflow: hidden; }
.res-feature .art::before { content: ""; position: absolute; right: -40px; top: 30px; width: 260px; height: 260px; border-radius: 40px; border: 2px solid rgba(255, 255, 255, .18); transform: rotate(18deg); }
.res-feature .art::after { content: ""; position: absolute; left: 30px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.res-feature .art ul { position: absolute; left: 30px; top: 30px; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; z-index: 1; }
.res-feature .art li { font-size: 13.5px; font-weight: 600; color: #fff; padding: 7px 12px; border-radius: 8px; background: rgba(255, 255, 255, .14); display: flex; gap: 8px; align-items: center; }
.res-feature .copy { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.res-feature small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8fb6ff; }
.res-feature b { font-size: clamp(22px, 2.2vw, 28px); color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
.res-feature p { font-size: 15px; }
.res-feature .link-arrow { color: #fff; margin-top: auto; }
.res-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.res-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid var(--line-soft); color: inherit; text-decoration: none !important; transition: box-shadow .25s, transform .25s var(--ease); }
.res-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.res-card[hidden] { display: none; }
.res-card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-500); }
.res-card .type { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--tint-ops); color: var(--blue-deep); }
.res-card .type.arch { background: var(--tint-intel); color: var(--tint-intel-ink); }
.res-card .type.cs { background: #e7f8f0; color: #0d8a5a; }
.res-card .type.arc { background: var(--bg-100); color: var(--ink-500); }
.res-card b { font-size: 17.5px; color: var(--ink-900); line-height: 1.3; letter-spacing: -0.01em; }
.res-card p { font-size: 14.5px; color: var(--ink-500); line-height: 1.5; }
.res-card .go { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--blue); }
.res-empty { margin-top: 16px; padding: 22px; border-radius: 14px; border: 1px dashed var(--line); color: var(--ink-500); font-size: 15px; }

/* ---------- Professional: sector selector ---------- */
.sector-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.sector-panel { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--r-panel); padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-sm); }
.sector-panel h3 { font-size: 22px; }
.sector-panel p { color: var(--ink-500); margin-top: 8px; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.funnel li { padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #fff; background: var(--blue); }
.funnel li:nth-child(2) { margin: 0 6%; background: #1d6fff; } .funnel li:nth-child(3) { margin: 0 12%; background: #3882f6; } .funnel li:nth-child(4) { margin: 0 18%; background: #06b6d4; } .funnel li:nth-child(5) { margin: 0 24%; background: #18be7f; }

/* ---------- Company: vision & how we work ---------- */
.vision { text-align: center; padding-block: clamp(64px, 8vw, 104px); }
.vision small { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.vision p.words { margin-top: 18px; font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; color: var(--ink-900); }
.vision p.words span:nth-child(2) { color: var(--blue); }
.vision p.words span:nth-child(3) { color: var(--teal); }
.vision p.sub { margin: 18px auto 0; max-width: 620px; color: var(--ink-500); font-size: 17px; }
.howlist { list-style: none; margin: 24px 0 0; padding: 0; columns: 2; column-gap: 28px; }
.howlist li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 15.5px; color: var(--ink-800); font-weight: 500; }
.howlist li::before { content: "—"; color: var(--blue); margin-right: 10px; }

@media (max-width: 980px) {
  .tree { grid-template-columns: 1fr; }
  .tree > div, .tree > div:first-child, .tree > div:last-child { border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 14px; }
  .tree > div:not(:last-child)::after { right: 50%; top: auto; bottom: -9px; transform: translateX(50%) rotate(135deg); }
  .qflow, .role-rail { grid-template-columns: repeat(3, 1fr); }
  .role-rail div { border-radius: 12px; border-bottom: 1px solid var(--line-soft); }
  .formats { grid-template-columns: 1fr 1fr; }
  .fw-flow, .di, .aipanel, .deploy-panel, .res-feature, .sector-panel { grid-template-columns: 1fr; }
  .fw-flow .arrow, .di-mid i { transform: rotate(90deg); justify-self: center; }
  .aipanel .link { padding: 10px 0; }
  .deploy-tabs, .modes3 { grid-template-columns: 1fr; }
  .lifecycle6 { grid-template-columns: repeat(3, 1fr); }
  .lifecycle6 li::after { display: none; }
  .res-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .qflow, .role-rail, .lifecycle6 { grid-template-columns: 1fr 1fr; }
  .formats, .res-grid { grid-template-columns: 1fr; }
  .seats { grid-template-columns: repeat(8, 1fr); }
  .howlist { columns: 1; }
  .iqm { overflow-x: auto; } .iqm table { min-width: 520px; }
}

/* Grid children may shrink below their content's intrinsic width (prevents long labels widening columns) */
.fw-flow > *, .di > *, .aipanel > *, .deploy-panel > *, .res-feature > *, .sector-panel > *, .off-grid > *, .validate > *, .collapse > *, .nodes > *, .th-grid > *, .coh-grid > *, .manifesto > *, .cs-story > *, .stories > *, .ih-grid > *, .hh-grid > *, .heh-grid > *, .pah-grid > *, .split > *, .cta-band > *, .prod-panel > *, .path-panel > * { min-width: 0; }
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; padding-block: 12px; }
}

/* Bottom CTA band (inner pages) */
.cta-band { background: var(--mist); border-radius: var(--r-human); padding: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: 0; bottom: 0; width: 240px; height: 140px; background: rgba(0, 102, 255, .07); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.cta-band h2 { font-size: clamp(28px, 3vw, 36px); }
.cta-band p { margin-top: 12px; color: var(--ink-700); }
.cta-band .actions { display: grid; gap: 12px; justify-items: start; position: relative; z-index: 1; }
.cta-band .sub-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 980px) {
  .float-group, .ph-canvas .float-group { position: static; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
  .float-group small { width: 100%; text-align: center; }
  .ih-grid, .hh-grid, .split, .split.wide-l, .split.wide-r, .path-panel, .arc-detail, .risk, .cont, .routes, .hs-panel, .circuit-wrap, .epa, .cta-band { grid-template-columns: 1fr; }
  .ih::before, .hh::before { display: none; }
  .ih-visual .float-chip { position: static; margin: 10px 8px 0 0; }
  .stages6 { grid-template-columns: repeat(2, 1fr); }
  .stage6:nth-child(odd) { border-left: 0; }
  .stage6 { border-top: 1px solid var(--line-soft); }
  .paths { grid-template-columns: 1fr; }
  .path[aria-selected="true"]::after { display: none; }
  .path-panel .media { min-height: 260px; order: -1; }
  .track { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .track::before, .track .fill { display: none; }
  .values { grid-template-columns: 1fr 1fr; }
  .arc { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .arc::before { display: none; }
  .hs-timeline { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .hs-timeline::before { display: none; }
  .hs-panel .media { min-height: 260px; order: -1; }
  .ops-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .stages6 { grid-template-columns: 1fr; }
  .stage6 { border-left: 0; }
  .track { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr; }
  .arc { grid-template-columns: repeat(2, 1fr); }
  .product-cards { grid-template-columns: 1fr; }
  .sources { grid-template-columns: 1fr; }
  .controls-stack li { grid-template-columns: 32px 1fr; }
  .controls-stack li em { grid-column: 2; }
}

/* ---------- Demo page ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-500); margin-left: 12px; padding-left: 20px; border-left: 1px solid var(--line-soft); }
.crumbs a { color: var(--ink-500); }
.crumbs [aria-current] { color: var(--ink-900); font-weight: 500; }
.demo-wrap { background: linear-gradient(180deg, #fff 0%, var(--tint-ops) 100%); overflow: hidden; }
.demo-wrap::before { content: ""; position: absolute; right: 0; top: 0; width: 46%; height: 70%; background: rgba(0, 102, 255, .05); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 70%); }
.demo { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.demo-h1 { font-size: clamp(38px, 4.4vw, 52px); margin-top: 16px; }
.demo-intro .lede { margin-top: 18px; }
.demo-points { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.demo-points li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15px; color: var(--ink-500); line-height: 1.5; }
.demo-points svg { width: 20px; height: 20px; color: var(--blue); margin-top: 2px; }
.demo-points b { display: block; color: var(--ink-900); font-size: 16px; }
.demo-proof { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--line); }
.demo-proof div { padding: 18px 12px 0 0; }
.demo-proof b { display: block; font-size: 22px; color: var(--ink-900); letter-spacing: -0.02em; }
.demo-proof span { font-size: 13.5px; color: var(--ink-500); }
.demo-card { background: #fff; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-lg); padding: clamp(24px, 4vw, 40px); }
.form-title { font-size: 22px; margin-bottom: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.field > span, .field legend { font-size: 14px; font-weight: 600; color: var(--ink-800); padding: 0; margin-bottom: 6px; }
.field legend small { font-weight: 400; color: var(--ink-500); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; color: var(--ink-900); background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; min-height: 46px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 102, 255, .14); }
.field [aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 4px rgba(251, 79, 73, .12); }
.interest { display: flex; flex-wrap: wrap; gap: 8px; }
.interest label { position: relative; }
.interest input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.interest span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; color: var(--ink-700); transition: all .2s; }
.interest input:checked + span { background: var(--tint-ops); border-color: rgba(0, 102, 255, .45); color: var(--blue-deep); font-weight: 600; }
.interest input:focus-visible + span { outline: 3px solid rgba(0, 102, 255, .45); outline-offset: 2px; }
.submit { width: 100%; margin-top: 4px; }
.fine { margin-top: 14px; font-size: 13px; color: var(--ink-500); }
.form-error { margin: 0 0 14px; padding: 12px 14px; border-radius: 8px; background: #fff1f0; color: #b42318; font-size: 14.5px; }
.form-done { text-align: center; padding: 32px 8px; }
.form-done:focus { outline: none; }
.done-ico { width: 56px; height: 56px; border-radius: 50%; background: #e7f8f0; color: #0d8a5a; display: inline-grid; place-items: center; }
.done-ico svg { width: 26px; height: 26px; }
.form-done h2 { font-size: 26px; margin-top: 18px; }
.form-done p { margin: 12px auto 22px; color: var(--ink-500); max-width: 420px; }
@media (max-width: 980px) { .demo { grid-template-columns: 1fr; } .crumbs { display: none; } }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; gap: 0; } .demo-proof b { font-size: 18px; } }

/* ---------- Reveal (only hides when JS is present) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav-menu .nav-link { padding: 0 9px; font-size: 14px; }
  .nav-cta .btn-ghost { display: none; }
}
@media (max-width: 980px) {
  .device-base { margin: 0 -3%; }
  /* backdrop-filter would make the header the containing block for the fixed menu panel */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .menu-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav-menu {
    position: fixed; inset: 68px 0 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 32px; overflow-y: auto; margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  .menu-open .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-item { border-bottom: 1px solid var(--line-soft); }
  .nav-link { width: 100%; justify-content: space-between; height: 56px; font-size: 16px; padding: 0 4px; }
  .mega { position: static; transform: none; width: 100%; box-shadow: none; border: 0; padding: 0 0 12px; grid-template-columns: 1fr; display: none; opacity: 1; visibility: visible; }
  .nav-item.open > .mega { display: grid; transform: none; }
  .mega-feature { display: none; }
  .nav-menu .mobile-cta { display: grid; gap: 10px; padding-top: 20px; border: 0; }
  .menu-open { overflow: hidden; }

  .hero { display: flex; flex-direction: column; }
  .hero-media { position: relative; right: auto; top: auto; transform: none; width: 100%; order: 2; }
  .hero-plane { display: none; }
  .hero-inner { min-height: 0; padding-block: 48px 8px; }
  .hero-copy { max-width: 640px; }

  .trust-strip .wrap { grid-template-columns: 1fr; gap: 14px; }
  .logos { flex-wrap: wrap; justify-content: flex-start; gap: 14px 18px; }
  .logos li { flex: 0 0 auto; }
  .logos img { width: 52px; height: 52px; }

  .belief, .shift, .env, .outcomes, .ai-grid, .eco, .trust-band, .accred-head { grid-template-columns: 1fr; }
  .shift-head { position: static; }
  .accred-head .lede { justify-self: start; }
  .belief-visual { max-width: 520px; }
  .belief-visual .tag { left: 16px; }
  .streams { grid-template-columns: repeat(2, 1fr); }
  .converge-lines { display: none; }
  .learner-node { margin-top: 20px; }
  .canvas { grid-template-columns: 1fr; }
  .canvas-media { aspect-ratio: 3 / 2; order: -1; }
  .ba { grid-template-columns: 1fr; }
  .ribbon { grid-template-columns: repeat(7, auto); overflow-x: auto; border-radius: 16px; justify-content: start; scrollbar-width: none; }
  .ribbon::-webkit-scrollbar { display: none; }
  .ribbon button { padding: 10px 14px; white-space: nowrap; }
  .outcomes-visual .flag { right: 12px; }
  .story { grid-template-columns: 1fr; }
  .story-art { min-height: 260px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .notch-top { clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); margin-top: -24px; padding-top: calc(clamp(72px, 9vw, 112px) + 24px); }
  .step-bottom { clip-path: none; }
}
@media not all and (max-width: 980px) { .nav-menu .mobile-cta { display: none; } }
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-copy .lede { font-size: 17px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .streams { grid-template-columns: 1fr; }
  .stream { min-height: 0; }
  .proof-chips { grid-template-columns: 1fr; }
  .ai-flow { grid-template-columns: 1fr 1fr; row-gap: 46px; }
  .ai-flow::before { display: none; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:not(:last-child)::after { display: none; }
  .scatter { height: 250px; }
  .doc { width: 128px; }
  .eco-rail { grid-template-columns: 1fr; }
  .eco-rail svg { transform: rotate(90deg); justify-self: center; }
  .controls { grid-template-columns: 1fr; }
  .badges img { width: 68px; height: 68px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics li, .metrics li:not(:nth-child(3n+1)) { padding: 22px 12px 22px 0; border-left: 0; }
  .metrics li:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .22); }
  .belief-visual .tag { position: relative; left: auto; bottom: auto; margin: -40px 16px 0; }
  .outcomes-visual .flag { position: relative; right: auto; top: auto; margin: -28px 16px 0; width: fit-content; }
  .device-base { margin: 0 -3%; }
  .exam-body { padding: 12px; gap: 7px; font-size: 12.5px; }
  .exam-body .q { font-size: 13px; }
  .exam-body .opt { padding: 6px 9px; }
  .exam-body .opt:nth-child(n+4) { display: none; }
  .exam-top { font-size: 11.5px; gap: 8px; padding: 9px 10px; flex-wrap: wrap; }
  .exam-top .course { display: none; }
  .foot-top { grid-template-columns: 1fr; }
}

/* ---------- Articles, case studies, legal ---------- */
.wrap.narrow { max-width: 920px; }
.art-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 36px); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.art-hero .eyebrow { margin-top: 26px; }
.art-hero h1 { margin-top: 14px; font-size: clamp(32px, 4.2vw, 48px); max-width: 22ch; text-wrap: balance; }
.art-meta { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-500); }
.art-cover { margin: clamp(24px, 3vw, 40px) auto 0; }
.art-cover img { width: 100%; height: auto; border-radius: var(--r-panel); border: 1px solid var(--line-soft); }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 5vw, 72px); padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 88px); max-width: 1160px; }
.art-aside { display: grid; gap: 18px; align-content: start; position: sticky; top: 96px; }
.art-toc { padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--r-data); background: #fff; font-size: 14px; }
.art-toc b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 10px; }
.art-toc ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--ink-500); }
.art-toc a { color: var(--ink-700); }
.art-toc a:hover { color: var(--blue); }
.art-side-cta { padding: 22px; border-radius: 6px 18px 18px 18px; background: var(--mist); font-size: 14.5px; }
.art-side-cta b { color: var(--ink-900); font-size: 16.5px; }
.art-side-cta p { margin: 8px 0 16px; color: var(--ink-700); }
.prose { min-width: 0; font-size: 17.5px; line-height: 1.72; color: var(--ink-700); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 1.9em; scroll-margin-top: 96px; }
.prose h3 { font-size: 21px; margin-top: 1.6em; line-height: 1.3; }
.prose h4 { font-size: 18px; margin-top: 1.4em; line-height: 1.35; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose > :first-child { margin-top: 0; }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: .45em; margin-bottom: 0; }
.prose li::marker { color: var(--blue); }
.prose strong { color: var(--ink-900); font-weight: 600; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-soft); display: block; margin-inline: auto; }
.prose figure { margin-inline: 0; }
.prose figcaption { font-size: 14px; color: var(--ink-500); margin-top: 8px; text-align: center; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue); color: var(--ink-800); font-size: 19px; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin-block: 2em; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-data); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.prose th { background: var(--surface); color: var(--ink-900); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }
.prose .faq { display: grid; gap: 10px; }
.prose details { border: 1px solid var(--line-soft); border-radius: var(--r-data); background: #fff; }
.prose summary { cursor: pointer; padding: 16px 18px; font-weight: 600; color: var(--ink-900); line-height: 1.45; }
.prose details > div { padding: 0 18px 16px; }
.prose details > div > * + * { margin-top: .8em; }
.res-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 22px 24px; border-radius: 6px 18px 18px 18px; background: var(--mist); font-size: 15.5px; line-height: 1.55; }
.res-cta b { color: var(--ink-900); }
.res-cta p { margin-top: 4px !important; }
.res-cta .btn { flex: none; text-decoration: none; }
@media (max-width: 980px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  .art-aside { position: static; }
  .art-toc { display: none; }
}
@media (max-width: 640px) {
  .prose { font-size: 16.5px; }
  .res-cta { flex-direction: column; align-items: flex-start; }
}
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: #fff; }

/* ---------- Homepage hero: Connected Evidence Flow ----------
   Layers (back to front): .hf-bg shapes → .hf-svg connectors → cards → evidence → copy.
   Connector geometry is measured from the live layout in assets/js/hero-flow.js. */
.hf { background: #fff; }
.hf-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hf-bg span { position: absolute; display: block; transition: opacity 1.1s var(--ease); }
.hf-field { /* pale radial field behind the assessment cards */
  left: calc(var(--hf-cx, 72%) - 380px); top: calc(var(--hf-cy, 30%) - 380px); width: 760px; height: 760px; border-radius: 50%;
  background: radial-gradient(closest-side, #0066ff, rgba(0, 102, 255, 0)); opacity: .045;
}
.hf-rect { /* large translucent offset rectangle behind Evidence */
  left: var(--hf-rx, 58%); top: var(--hf-ry, 46%); width: var(--hf-rw, 420px); height: var(--hf-rh, 300px);
  background: #0066ff; opacity: .025; border-radius: 4px;
}
.hf-plane { /* soft clipped plane under the outputs */
  left: var(--hf-px, 40%); top: var(--hf-py, 80%); width: var(--hf-pw, 900px); height: 420px;
  background: #0066ff; opacity: .022; border-radius: 52% 48% 0 0 / 100% 100% 0 0;
}
.hf-bg .is-hot { opacity: .055; }
.hf-bg .hf-field.is-hot { opacity: .075; }

.hf-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: clamp(32px, 4.5vw, 72px);
  align-items: start; padding-block: clamp(48px, 5vw, 72px) clamp(56px, 5.5vw, 80px);
}
.hf .hero-copy { position: relative; z-index: 4; padding-top: var(--hf-copy-shift, 0px); }
.hf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hf-visual { position: relative; z-index: 2; width: 100%; max-width: 640px; justify-self: end; padding-top: var(--hf-vis-shift, 0px); --cw: 176px; }

/* Connectors */
.hf-path {
  fill: none; stroke: var(--blue); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; visibility: hidden; opacity: .45;
  transition: stroke-dashoffset var(--dur, .6s) cubic-bezier(.55, .05, .25, 1), opacity .45s ease;
}
.hf-path.is-drawn { stroke-dashoffset: 0; visibility: visible; }
.hf-path.is-hot { opacity: .95; }
.hf.has-focus .hf-path { opacity: .2; }
.hf.has-focus .hf-path.is-lit { opacity: .95; }
.hf-node { fill: #fff; stroke: var(--blue); stroke-width: 1.5; opacity: 0; transition: opacity .3s; }
.hf-node.is-on { opacity: 1; }
.hf-origin { opacity: 0; transition: opacity .3s; }
.hf-origin.is-on { opacity: 1; }
.hf-origin circle { fill: var(--blue); }
.hf-origin .halo { opacity: .14; transform-box: fill-box; transform-origin: center; }
.hf-origin.is-pulse .halo { animation: hf-ping .9s var(--ease) 1; }
.hf-pulse circle { fill: var(--blue); }
.hf-pulse .halo { opacity: .16; }
@keyframes hf-ping { 0% { transform: scale(.4); opacity: .4; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1); opacity: .14; } }
@keyframes hf-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Assessment cards */
.hf-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: start; row-gap: 64px; }
.hf-card {
  position: relative; width: var(--cw); min-height: 106px; padding: 14px 16px 16px;
  background: #fff; border: 1px solid #dde3ee; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(3, 8, 20, .04), 0 10px 24px -16px rgba(18, 29, 48, .2);
  transition: transform .32s var(--ease), border-color .32s, box-shadow .32s;
}
.hf-card:nth-child(2) { margin-top: 26px; justify-self: end; }
.hf-card:nth-child(3) { margin-left: 28px; }
.hf-card:nth-child(4) { margin-top: 18px; margin-right: 28px; justify-self: end; }
.hf-card-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 10px; }
.hf-card-top .hf-ic { grid-column: 1 / -1; }
.hf-ic { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface); color: #7d8696; transition: color .32s, background .32s; }
.hf-ic svg, .hf-core svg, .hf-outputs svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hf-card b { font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-900); }
.hf-num { font-size: 11.5px; font-weight: 600; color: #9aa3b2; font-variant-numeric: tabular-nums; }
.hf-lines { display: grid; gap: 7px; margin-top: 12px; }
.hf-lines i { display: block; height: 4px; border-radius: 2px; background: #edf1f7; position: relative; overflow: hidden; }
.hf-lines i:nth-child(1) { width: 88%; } .hf-lines i:nth-child(2) { width: 64%; } .hf-lines i:nth-child(3) { width: 42%; }
.hf-lines i:first-child::after { content: ""; position: absolute; inset: 0; background: var(--blue); opacity: .55; transform: scaleX(0); transform-origin: left; transition: transform .34s var(--ease); }
.hf-card.is-on { border-color: rgba(0, 102, 255, .24); }
.hf-card.is-on .hf-ic { color: var(--blue); background: var(--tint-ops); }
.hf-card.is-on .hf-lines i:first-child::after { transform: scaleX(1); }
.hf-card.is-hit, .hf-card.is-focus { transform: translateY(-3px); border-color: rgba(0, 102, 255, .5); box-shadow: 0 1px 2px rgba(3, 8, 20, .04), 0 16px 30px -18px rgba(0, 102, 255, .45); }
.hf-card.is-soft { border-color: rgba(0, 102, 255, .38); }

/* Evidence panel: the visual destination */
.hf-evidence {
  position: relative; z-index: 3; display: flex; flex-direction: column; width: 280px; min-height: 226px; margin: 50px auto 0; padding: 20px 22px 22px;
  background: #fff; border: 1px solid #d3dcec; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(3, 8, 20, .05), 0 24px 48px -30px rgba(18, 29, 48, .3);
  transition: border-color .45s, box-shadow .45s;
}
.hf-kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.hf-ev-title { margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink-900); }
.hf-ev-sub { margin-top: 6px; font-size: 15px; color: var(--ink-500); }
.hf-core { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--tint-ops); color: #7d8696; transition: color .4s; }
.hf-core svg { width: 22px; height: 22px; }
.hf-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: auto; padding-top: 24px; }
.hf-bars i { display: block; height: 6px; border-radius: 3px; background: #e8edf6; position: relative; overflow: hidden; }
.hf-bars i::after { content: ""; position: absolute; inset: 0; background: var(--blue); opacity: .85; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) calc(var(--k) * 80ms); }
.hf-evidence.is-on { border-color: rgba(0, 102, 255, .42); box-shadow: 0 1px 2px rgba(3, 8, 20, .05), 0 24px 52px -26px rgba(0, 102, 255, .34); }
.hf-evidence.is-on .hf-core { color: var(--blue); }
.hf-evidence.is-on .hf-bars i::after { transform: scaleX(1); }
.hf-evidence.is-pop .hf-core { animation: hf-pop .55s var(--ease) 1; }
.hf-evidence.is-focus { border-color: rgba(0, 102, 255, .6); }

/* Outputs */
.hf-outputs { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hf-outputs li {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 11px 12px; min-height: 48px;
  background: #fff; border: 1px solid #dde3ee; border-radius: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink-800);
  transition: border-color .35s, background .35s, color .35s, transform .32s var(--ease);
}
.hf-outputs svg { flex: none; color: #7d8696; transition: color .35s; }
.hf-outputs li.is-on { border-color: rgba(0, 102, 255, .3); }
.hf-outputs li.is-on svg { color: var(--blue); }
.hf-outputs li[data-hf="intel"].is-on { background: #f2f7ff; border-color: rgba(0, 102, 255, .5); color: var(--blue-deep); }
.hf-outputs li.is-focus { transform: translateY(-2px); border-color: rgba(0, 102, 255, .55); }

/* Tablet: visual moves below the copy, cards get smaller */
@media (min-width: 1100px) and (max-width: 1279px) { .hf-visual { --cw: 168px; } .hf-evidence { width: 264px; } }
@media (max-width: 1099px) {
  .hf-stage { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding-block: 48px 64px; }
  .hf .hero-copy { max-width: 640px; padding-top: 0; }
  .hf-visual { justify-self: center; padding-top: 0; }
}
/* Mobile: dedicated 2×2 → Evidence → outputs composition */
@media (max-width: 700px) {
  .hf-stage { row-gap: 20px; }
  .hf-visual { --cw: auto; padding: 40px 14px 0; }
  .hf-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-content: stretch; column-gap: 16px; row-gap: 44px; }
  .hf-card, .hf-card:nth-child(n) { width: auto; margin: 0; justify-self: stretch; min-height: 96px; padding: 13px 14px 14px; }
  .hf-evidence { width: auto; min-height: 0; margin-top: 44px; }
  .hf-outputs { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 36px 0 0 36px; }
  .hf-outputs li { font-size: 15px; }
}
@media (max-width: 430px) {
  .hf-card b { font-size: 13px; letter-spacing: .08em; }
  .hf-num { display: none; }
  .hf-lines i:nth-child(3) { display: none; }
  .hf-ev-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf-path, .hf-card, .hf-evidence, .hf-bars i::after, .hf-lines i::after, .hf-bg span { transition: none !important; }
}

/* ---------- Homepage: product ecosystem (tabs via [data-tabs]) ---------- */
.pe { background: linear-gradient(180deg, #f5f9ff 0%, #edf4ff 100%); overflow: hidden; }
.pe-bg { position: absolute; right: -6%; top: 10%; width: 58%; height: 74%; background: rgba(0, 102, 255, .045); clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.pe .wrap { position: relative; }
.pe-tabs { margin-top: 44px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pe-tab {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-height: 204px; padding: 20px 18px 22px;
  background: #fff; border: 1px solid #dbe3ef; border-radius: 10px; color: inherit; box-shadow: 0 1px 2px rgba(3, 8, 20, .04);
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s, background .25s;
}
.pe-tab:hover { transform: translateY(-3px); border-color: #b7c7e2; box-shadow: 0 12px 26px -18px rgba(18, 29, 48, .3); }
.pe-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); transition: background .25s, color .25s; }
.pe-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pe-tab b { margin-top: 18px; font-size: 19px; line-height: 1.22; letter-spacing: -0.015em; color: var(--ink-900); }
.pe-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink-500); }
.pe-desc::before { content: ""; display: block; width: 28px; height: 2px; border-radius: 2px; background: rgba(0, 102, 255, .38); margin-bottom: 12px; }
.pe-tab[aria-selected="true"] { background: var(--blue-deep); border-color: var(--blue-deep); box-shadow: 0 20px 40px -22px rgba(0, 71, 179, .65); }
.pe-tab[aria-selected="true"] b { color: #fff; }
.pe-tab[aria-selected="true"] .pe-desc { color: rgba(255, 255, 255, .8); }
.pe-tab[aria-selected="true"] .pe-desc::before { background: rgba(255, 255, 255, .55); }
.pe-tab[aria-selected="true"] .pe-ic { background: rgba(255, 255, 255, .14); color: #fff; }
.pe-panel {
  margin-top: 28px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 56px); align-items: center;
  padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid #dbe3ef; border-radius: 22px; box-shadow: var(--shadow-sm);
}
.pe-copy h3 { margin-top: 14px; font-size: clamp(26px, 2.4vw, 32px); }
.pe-copy p { margin-top: 14px; font-size: 17px; color: var(--ink-700); }
.pe-proof { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pe-proof li { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); background: var(--tint-ops); padding: 7px 10px; border-radius: 6px; }
.pe-media { margin: 0; }
.pe-media img { width: 100%; border-radius: 14px; border: 1px solid var(--line-soft); }
.pe-foot { margin-top: 28px; }
/* Evidence-flow diagram for products without approved imagery */
.pd { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; background: linear-gradient(135deg, #f4f8ff 0%, #e7f1ff 100%); border: 1px solid #dbe6f6; overflow: hidden; }
.pd svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pd path { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: .5; vector-effect: non-scaling-stroke; }
.pd-in {
  position: absolute; left: 6%; width: 32%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: #fff; border: 1px solid #dbe3ef; border-radius: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; line-height: 1.25; color: var(--ink-800);
  box-shadow: 0 8px 18px -14px rgba(18, 29, 48, .35);
}
.pd-in i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.pd-out { position: absolute; left: 62%; width: 32%; top: 50%; transform: translateY(-50%); padding: 18px; background: #fff; border: 1px solid rgba(0, 102, 255, .45); border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(0, 102, 255, .45); }
.pd-out small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.pd-out b { display: block; margin-top: 6px; font-size: clamp(17px, 1.8vw, 22px); line-height: 1.2; color: var(--ink-900); text-transform: uppercase; letter-spacing: .02em; }

/* ---------- Homepage: who DigiAssess is for ---------- */
.au { background: #fdfcfa; overflow: hidden; }
.au-bg { position: absolute; left: -6%; top: 24%; width: 50%; height: 62%; background: rgba(0, 102, 255, .035); clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 0 100%); pointer-events: none; }
.au .wrap { position: relative; }
.au-br { display: block; }
.au-grid { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px 48px; align-items: start; }
.au-grid > :nth-child(even) { margin-top: 64px; }
.au-item { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 26px; align-items: center; }
.au-item.flip .au-media { order: 2; }
.au-media { margin: 0; position: relative; }
.au-media img { position: relative; z-index: 1; width: 100%; object-fit: cover; }
.au-he img { aspect-ratio: 4 / 3; border-radius: 6px 24px 24px 24px; }                                   /* landscape */
.au-hs .au-media { padding: 0 14px 14px 0; }                                                          /* offset corner */
.au-hs .au-media::before { content: ""; position: absolute; inset: 14px 0 0 14px; background: rgba(0, 102, 255, .12); border-radius: 18px; }
.au-hs img { aspect-ratio: 1 / 1; border-radius: 18px; }
.au-pa img { aspect-ratio: 3 / 4; object-position: 35% center; border-radius: 4px; }                    /* editorial crop */
.au-pa .au-media::before { content: ""; position: absolute; left: 0; top: -12px; width: 56px; height: 3px; background: var(--blue); border-radius: 2px; }
.au-q img { aspect-ratio: 5 / 4; border-radius: 110px 16px 110px 16px / 80px 16px 80px 16px; }       /* soft asymmetric mask */
.au-copy h3 { font-size: 24px; line-height: 1.2; }
.au-copy p { margin-top: 10px; font-size: 16px; color: var(--ink-700); }
.au-tags { list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.au-tags li { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-deep); background: #fff; border: 1px solid rgba(0, 102, 255, .22); padding: 5px 9px; border-radius: 5px; }

/* ---------- Homepage: customer evidence carousel ---------- */
.cx { background: linear-gradient(180deg, #f6f8fb 0%, #edf1f7 100%); overflow: hidden; }
.cx-bg { position: absolute; right: -8%; bottom: 0; width: 62%; height: 72%; background: rgba(41, 53, 74, .045); clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.cx .wrap { position: relative; }
.cx-carousel { position: relative; margin-top: 48px; --cw: min(820px, 76vw); --step: calc(var(--cw) * .57); }
.cx-carousel:focus-visible { outline: none; }
.cx-track { position: relative; height: var(--cx-h, 480px); }
.cx-card {
  position: absolute; left: 50%; top: 0; width: var(--cw); height: 100%; display: flex; flex-direction: column; padding: 32px 36px;
  background: #fff; border: 1px solid #dde3ee; border-radius: 20px; box-shadow: 0 30px 60px -38px rgba(18, 29, 48, .4);
  transform: translateX(calc(-50% + var(--off, 0) * var(--step))) scale(var(--s, 1)); opacity: var(--o, 1); z-index: var(--z, 1);
  transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .3s, border-color .3s;
}
.cx-card:not(.is-active) { cursor: pointer; }
.cx-card:not(.is-active):hover { border-color: #b7c7e2; }
.cx-frcr { background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%); }
.cx-top { display: flex; align-items: center; gap: 14px; }
.cx-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.cx-mark { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.cx-mark svg { width: 24px; height: 24px; }
.cx-top b { display: block; font-size: 16.5px; color: var(--ink-900); }
.cx-top span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.cx-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 22px; }
.cx-main h3 { font-size: clamp(22px, 2.2vw, 27px); line-height: 1.2; }
.cx-main p { margin-top: 12px; font-size: 16px; color: var(--ink-700); }
.cx-tags { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px; }
.cx-tags li { font-size: 13px; font-weight: 500; color: var(--ink-800); background: var(--surface); border: 1px solid var(--line-soft); padding: 6px 11px; border-radius: 999px; }
/* UPM: transformation */
.cx-shift { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cx-shift li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.cx-shift li + li::before { content: ""; position: absolute; left: 28px; top: -15px; width: 1.5px; height: 14px; background: var(--blue); opacity: .55; }
.cx-shift small { grid-column: 1; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.cx-shift b { grid-column: 1; font-size: 15.5px; color: var(--ink-900); }
.cx-shift li > span { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; align-items: flex-end; }
.cx-shift li:nth-child(2) { border-color: rgba(0, 102, 255, .4); }
.cx-shift li:nth-child(3) { background: var(--blue-deep); border-color: var(--blue-deep); }
.cx-shift li:nth-child(3) small { color: rgba(255, 255, 255, .72); }
.cx-shift li:nth-child(3) b { color: #fff; }
.frag i { width: 9px; height: 9px; border: 1.5px solid #9aa3b2; border-radius: 2px; }
.frag i:nth-child(odd) { transform: translateY(-4px) rotate(14deg); }
.frag i:nth-child(even) { transform: translateY(3px) rotate(-10deg); margin-left: 3px; }
.joined { gap: 2px !important; }
.joined i { width: 10px; height: 10px; border-radius: 2px; background: var(--blue); opacity: .75; }
.rising { gap: 3px !important; height: 22px; }
.rising i { width: 5px; border-radius: 1px; background: #fff; }
.rising i:nth-child(1) { height: 8px; } .rising i:nth-child(2) { height: 12px; } .rising i:nth-child(3) { height: 17px; } .rising i:nth-child(4) { height: 22px; }
/* RAKMHSU: metrics */
.cx-rak .cx-body { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.cx-metrics { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; }
.cx-metrics div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 16px 18px; background: #fff; }
.cx-metrics dd { margin: 0; font-size: clamp(25px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.cx-metrics dt { margin-top: 6px; font-size: 13.5px; color: var(--ink-500); }
/* Sajil: operational proof */
.cx-proof { list-style: none; margin: 0; padding: 0; }
.cx-proof li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.cx-proof li:first-child { border-top: 1px solid var(--line-soft); }
.cx-proof .ck { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.cx-proof .ck svg { width: 16px; height: 16px; }
.cx-proof b { font-size: 17px; color: var(--ink-900); }
/* FRCR: outcomes */
.cx-outcomes { list-style: none; margin: 0; padding: 0; }
.cx-outcomes li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.cx-outcomes span { font-size: 13px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.cx-outcomes b { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-900); }
.cx-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.cx-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; color: var(--ink-900); transition: border-color .2s, transform .2s var(--ease); }
.cx-btn:hover { border-color: var(--ink-900); }
.cx-btn svg { width: 18px; height: 18px; }
.cx-prev svg { transform: rotate(180deg); }
.cx-count { min-width: 64px; text-align: center; font-size: 14px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.cx-count b { color: var(--ink-900); }
.cx-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 30px; }
.link-arrow.muted { color: var(--ink-700); }

/* Responsive */
@media (max-width: 1180px) {
  .pe-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pe-tab { min-height: 0; }
  .au-item, .au-item.flip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .au-item.flip .au-media { order: 0; }
  .au-pa img { aspect-ratio: 4 / 3; }
}
@media (max-width: 1099px) {
  .cx-carousel { --cw: min(660px, 84vw); --step: calc(var(--cw) * .54); }
  .cx-body { grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
}
@media (max-width: 900px) {
  .pe-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .au-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .au-grid > :nth-child(even) { margin-top: 0; }
  /* Mobile carousel: one card per view, native swipe with scroll snap */
  .cx-track { height: auto !important; display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 18px; scrollbar-width: none; }
  .cx-track::-webkit-scrollbar { display: none; }
  .cx-card { position: relative; left: auto; flex: 0 0 calc(100% - 2 * var(--gutter)); height: auto; padding: 22px 20px; scroll-snap-align: center; transform: none !important; opacity: 1 !important; cursor: auto !important; }
  .cx-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-metrics div { padding: 14px 12px; }
  .cx-metrics dd { font-size: min(5.6vw, 28px); }
  .cx-metrics dt { font-size: 12.5px; }
  .cx-body { margin-top: 16px; gap: 18px; }
  .cx-main h3 { font-size: 21px; }
  .cx-main p { font-size: 15px; margin-top: 8px; }
  .cx-shift { gap: 10px; }
  .cx-shift li { padding: 9px 12px; }
  .cx-shift li + li::before { top: -11px; height: 10px; }
  .cx-tags { margin-top: 16px; padding-top: 14px; gap: 6px; }
  .cx-tags li { font-size: 12.5px; padding: 5px 9px; }
  .cx-proof li, .cx-outcomes li { padding: 12px 0; }
  .cx-outcomes b { font-size: 17px; }
  .cx-controls { margin-top: 12px; }
}
@media (max-width: 640px) {
  .pe-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .pe-tabs::-webkit-scrollbar { display: none; }
  .pe-tab { flex: 0 0 72%; max-width: 250px; padding: 16px; scroll-snap-align: start; }
  .pe-tab:hover { transform: none; }
  .pe-tab b { font-size: 17.5px; margin-top: 14px; }
  .pe-panel { padding: 20px; border-radius: 18px; }
  .pd-in { font-size: 11px; padding: 7px 8px; gap: 6px; letter-spacing: .04em; }
  .pd-out { padding: 12px; }
  .pd-out small { font-size: 10px; }
  .pd { aspect-ratio: 4 / 3.4; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-card, .pe-tab { transition: none !important; }
  .cx-track { scroll-behavior: auto; }
}

/* ---------- Homepage: sector cards (replaces the 2×2 audience grid) ---------- */
.au { background: #f1efea; }
.au-bg { display: none; }
.sec-wrap { margin-top: 48px; }
/* The row starts on the content edge and bleeds off the right side of the viewport */
.sec-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: none;
  margin-right: calc((100vw - min(100vw, var(--wrap))) / -2 - var(--gutter)); padding: 4px var(--gutter) 8px 0;
}
.sec-track::-webkit-scrollbar { display: none; }
.sec-card {
  --c1: #0066ff; --c2: #0047b3;
  position: relative; isolation: isolate; flex: 0 0 clamp(290px, 30vw, 380px); min-height: 540px; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 32px 30px 30px; color: #fff; text-decoration: none !important; overflow: hidden;
  background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px));
  transition: transform .3s var(--ease), filter .3s;
}
.sec-card:nth-child(even) { clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px); }
.sec-hs { --c1: #0891b2; --c2: #0b4f7a; }
.sec-pa { --c1: #1f3a68; --c2: #0b1426; }
.sec-q  { --c1: #3b5bdb; --c2: #1e2a8a; }
.sec-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .15; mix-blend-mode: luminosity; transition: opacity .4s, transform .6s var(--ease); }
.sec-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3, 8, 20, 0) 40%, rgba(3, 8, 20, .35) 100%); }
.sec-card:hover { transform: translateY(-3px); }
.sec-card:hover .sec-bg { opacity: .24; transform: scale(1.04); }
.sec-card:focus-visible { outline: 3px solid rgba(0, 102, 255, .55); outline-offset: 3px; }
.sec-top { display: flex; align-items: center; gap: 12px; }
.sec-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.sec-ic svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sec-kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.sec-name { margin-top: 22px; font-size: 25px; line-height: 1.18; letter-spacing: -0.02em; font-weight: 700; color: #fff; }
.sec-copy { margin-top: 14px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.sec-proof { margin-top: auto; padding-top: 28px; border-bottom: 1px solid rgba(255, 255, 255, .28); padding-bottom: 18px; }
.sec-proof b { display: block; font-size: clamp(28px, 2.6vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; }
.sec-proof span { display: block; margin-top: 8px; font-size: 15.5px; font-weight: 600; color: rgba(255, 255, 255, .88); }
.sec-go { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sec-go svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.sec-card:hover .sec-go svg { transform: translateX(4px); }
.sec-controls { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.sec-prev svg { transform: rotate(180deg); }
.sec-controls[hidden] { display: none; }
@media (max-width: 700px) {
  .sec-card { flex-basis: 82vw; min-height: 500px; padding: 26px 24px; }
  .sec-name { font-size: 23px; }
  .sec-copy { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sec-card, .sec-bg { transition: none !important; } .sec-track { scroll-behavior: auto; } }

/* ---------- Customer evidence: fanned deck (overrides the earlier 3-card stack) ---------- */
.cx-carousel { --cw: min(760px, 60vw); }
.cx-card {
  transform: translateX(calc(-50% + var(--x, 0px))) scale(var(--s, 1));
  background: var(--tint, #fff); border-color: rgba(18, 29, 48, .06); border-radius: 18px;
  box-shadow: 0 18px 44px -26px rgba(18, 29, 48, .35);
  transition: transform .5s var(--ease), opacity .4s var(--ease), box-shadow .3s;
}
.cx-card:nth-child(odd) { --tint: #e8f5f7; }
.cx-card:nth-child(even) { --tint: #f0f1f4; }
.cx-card.is-active { box-shadow: 0 30px 70px -30px rgba(18, 29, 48, .45); }
.cx-card:not(.is-active) > * { pointer-events: none; }
.cx-card.is-far { pointer-events: none; }
.cx-frcr { background: var(--tint); }
.cx-shift li, .cx-tags li { background: rgba(255, 255, 255, .75); }
.cx-metrics div { background: rgba(255, 255, 255, .8); }
.cx-clone { visibility: visible; }
@media (max-width: 1099px) { .cx-carousel { --cw: min(600px, 74vw); } }
@media (max-width: 700px) {
  .cx-clone { display: none !important; }
  .cx-card { transform: none !important; }
}
.cx-btn:disabled { opacity: .35; cursor: default; }
.cx-btn:disabled:hover { border-color: var(--line); }

/* Product logos (from the DigiAssess brochure) in the homepage product selector */
.pe-ic { width: auto; height: 44px; background: none; border-radius: 0; justify-content: start; }
.pe-ic img { height: 44px; width: auto; max-width: 72px; object-fit: contain; transition: filter .25s; }
.pe-tab[aria-selected="true"] .pe-ic { background: none; }
.pe-tab[aria-selected="true"] .pe-ic img { filter: brightness(0) invert(1); }
@media (max-width: 640px) { .pe-ic, .pe-ic img { height: 38px; } }

/* Products page: brochure product logos */
.prod-tab { padding-right: 76px; }
.prod-logo { position: absolute; top: 20px; right: 20px; height: 40px; width: auto; max-width: 52px; object-fit: contain; }
.cap-card .ico.logo { width: auto; height: 42px; background: none; border-radius: 0; justify-content: start; }
.cap-card .ico.logo img { height: 42px; width: auto; max-width: 64px; object-fit: contain; }
@media (max-width: 640px) { .prod-tab { padding-right: 68px; } .prod-logo { height: 34px; top: 18px; right: 16px; } }

/* ---------- Homepage product ecosystem: folder tabs + one large panel (overrides the card selector) ---------- */
.pe { background: #f1efea; }
.pe-bg { display: none; }
.pe-tabs {
  margin-top: 40px; display: flex; gap: 0; align-items: flex-end; position: relative; z-index: 2;
  overflow-x: auto; scrollbar-width: none; padding-top: 6px;
}
.pe-tabs::-webkit-scrollbar { display: none; }
.pe-tab {
  flex: 1 1 0; min-width: 118px; min-height: 0; margin-right: -12px; padding: 12px 22px 11px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 0; border-radius: 12px 12px 0 0; box-shadow: none; color: rgba(255, 255, 255, .78);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  transition: background .25s, color .25s, padding .25s;
}
.pe-tab:nth-child(3n + 1) { background: #123f9a; z-index: 3; }
.pe-tab:nth-child(3n + 2) { background: #1a34a8; z-index: 2; }
.pe-tab:nth-child(3n) { background: #0f2c74; z-index: 1; }
.pe-tab:hover { transform: none; border: 0; box-shadow: none; color: #fff; filter: brightness(1.12); }
.pe-tab .pe-ic, .pe-tab .pe-ic img { height: 24px; }
.pe-tab .pe-ic img { max-width: 40px; filter: brightness(0) invert(1); opacity: .85; }
.pe-tab b { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.25; color: inherit; }
.pe-tab .pe-desc { display: none; }
.pe-tab[aria-selected="true"] { background: #0b5bd3; color: #fff; z-index: 5; padding-top: 16px; box-shadow: none; }
.pe-tab[aria-selected="true"] .pe-ic img { opacity: 1; }
.pe-tab[aria-selected="true"] b { color: #fff; }

.pe-panel {
  position: relative; z-index: 1; margin-top: 0; overflow: hidden;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(28px, 4vw, 64px);
  padding: clamp(32px, 4.5vw, 64px); min-height: 460px;
  background: radial-gradient(120% 90% at 100% 100%, rgba(6, 182, 212, .35) 0%, rgba(6, 182, 212, 0) 55%), linear-gradient(160deg, #0b5bd3 0%, #0047b3 55%, #0a3a9a 100%);
  border: 0; border-radius: 0 0 22px 22px; box-shadow: 0 30px 60px -40px rgba(0, 71, 179, .6); color: #fff;
}
.pe-panel::before { /* soft geometric plane */
  content: ""; position: absolute; right: -8%; top: -20%; width: 55%; height: 140%; background: rgba(255, 255, 255, .05);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none;
}
.pe-panel > * { position: relative; }
.pe-panel .eyebrow { color: rgba(255, 255, 255, .85); }
.pe-panel .eyebrow::before { background: rgba(255, 255, 255, .6); }
.pe-kicker { display: block; margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.pe-copy h3 { margin-top: 16px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 800; color: #fff; }
.pe-copy p { margin-top: 18px; font-size: 17px; color: rgba(255, 255, 255, .88); }
.pe-proof li { color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); }
.pe-copy .link-arrow {
  margin-top: 4px; padding: 12px 20px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: background .2s;
}
.pe-copy .link-arrow:hover { background: rgba(255, 255, 255, .26); }
.pe-media { position: relative; }
.pe-media img { border: 0; border-radius: 14px; box-shadow: 0 26px 50px -24px rgba(3, 8, 20, .55); background: #fff; }
.pe-badge {
  position: absolute; z-index: 2; top: -14px; right: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; color: var(--ink-900); font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 26px -12px rgba(3, 8, 20, .45);
}
.pe-badge img { width: auto; height: 20px; max-width: 32px; border-radius: 0; box-shadow: none; background: none; }
.pe .pd { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 26px 50px -24px rgba(3, 8, 20, .5); }
.pe .pd path { stroke: #fff; opacity: .55; }
.pe .pd-in { border-color: transparent; }
.pe .pd-in i { background: var(--blue); }
.pe .pd-out { border-color: transparent; box-shadow: 0 18px 40px -18px rgba(3, 8, 20, .5); }
.pe-foot { margin-top: 30px; }

@media (max-width: 1180px) {
  .pe-tabs { grid-template-columns: none; }
  .pe-tab { flex: 0 0 132px; }
}
@media (max-width: 900px) {
  .pe-tabs { grid-template-columns: none; }
  .pe-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pe-badge { top: -12px; right: 12px; }
}
@media (max-width: 640px) {
  .pe-tabs { display: flex; margin-inline: 0; padding: 6px 0 0; scroll-snap-type: x proximity; }
  .pe-tab { flex: 0 0 124px; max-width: none; padding: 11px 20px 10px 12px; scroll-snap-align: start; }
  .pe-tab[aria-selected="true"] { padding-top: 14px; }
  .pe-panel { padding: 26px 22px 28px; border-radius: 0 0 18px 18px; }
  .pe-copy h3 { font-size: 30px; }
  .pe-copy p { font-size: 16px; }
}
.pe-tab { min-height: 68px; }
.pe-tab[aria-selected="true"] { min-height: 74px; }
#pt-fluency b { text-transform: none; letter-spacing: .03em; font-size: 12.5px; }
#pt-tably { flex-grow: 1.9; }
#pt-portfolio, #pt-scanner { flex-grow: 1.15; }
.pe-copy h3 { font-size: clamp(28px, 2.7vw, 38px); }
@media (max-width: 1180px) { #pt-tably { flex: 0 0 200px; } }
@media (max-width: 640px) { #pt-tably { flex: 0 0 190px; } .pe-copy h3 { font-size: 28px; } }
.pe .pd .pe-badge { top: 14px; right: 14px; }
.pe-tab { height: 78px; min-height: 0; min-width: 96px; }
.pe-tab[aria-selected="true"] { height: 86px; min-height: 0; }
@media (max-width: 1180px) { .pe-tab { min-width: 0; } }
.pe-tab:last-child { margin-right: 0; }

/* Product ecosystem: wider stage, separated tabs, one colour per product */
.pe .wrap { max-width: 1480px; }
.pe-tabs { gap: 5px; }
.pe-tab, .pe-tab:last-child { margin-right: 0; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 0 100%); padding: 12px 18px 11px 12px; }
.pe-tab:nth-child(n) { z-index: auto; background: linear-gradient(rgba(3, 8, 20, .22), rgba(3, 8, 20, .22)), var(--pc); }
.pe-tab:hover { filter: none; background: linear-gradient(rgba(3, 8, 20, .08), rgba(3, 8, 20, .08)), var(--pc); }
.pe-tab[aria-selected="true"] { background: var(--pc); z-index: 2; }
#pt-core, #product-core           { --pc: #0b5bd3; }
#pt-ossai, #product-ossai         { --pc: #0e7490; }
#pt-portfolio, #product-portfolio { --pc: #4b4fc9; }
#pt-epa, #product-epa             { --pc: #6d3fc8; }
#pt-heba, #product-heba           { --pc: #2f3d99; }
#pt-survey, #product-survey       { --pc: #0b7a99; }
#pt-q360, #product-q360           { --pc: #1d4ed8; }
#pt-fluency, #product-fluency     { --pc: #8a3fb8; }
#pt-scanner, #product-scanner     { --pc: #155e75; }
#pt-tably, #product-tably         { --pc: #3f4f8f; }
.pe-panel {
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(160deg, var(--pc) 0%, color-mix(in srgb, var(--pc) 72%, #030814) 100%);
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--pc) 80%, transparent);
}
.pe .pd-in i { background: var(--pc); }
.pe .pd-out small { color: var(--pc); }

/* Hero: fit the whole flow in one screen. Outputs sit beside Evidence; vertical rhythm follows the window height. */
.hf-stage { padding-block: clamp(20px, 5vh, 64px) clamp(24px, 5.5vh, 72px); }
.hf-cards { row-gap: clamp(36px, 6.5vh, 64px); }
.hf-card { min-height: 0; padding: 13px 15px 14px; }
.hf-lines { margin-top: 10px; gap: 6px; }
.hf-lines i:nth-child(3) { display: none; }
.hf-base { display: flex; align-items: center; justify-content: center; gap: clamp(32px, 4vw, 52px); margin-top: clamp(28px, 4.5vh, 50px); }
.hf-base .hf-evidence { margin: 0; flex: none; width: 264px; min-height: clamp(172px, 23vh, 226px); }
.hf-base .hf-outputs { margin: 0; flex: 0 1 196px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hf-base .hf-outputs li { min-height: 44px; padding: 9px 12px; }
@media (min-width: 1100px) and (max-width: 1279px) { .hf-base .hf-evidence { width: 240px; } .hf-base { gap: 32px; } }
@media (max-width: 700px) {
  .hf-base { display: block; margin-top: 0; }
  .hf-base .hf-evidence { width: auto; min-height: 0; margin-top: 44px; }
  .hf-base .hf-outputs { margin: 36px 0 0 36px; }
  .hf-base .hf-outputs li { min-height: 48px; }
  .hf-lines i:nth-child(3) { display: block; }
}
.hf-base { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3vw, 40px); }
.hf-base .hf-evidence { grid-column: 2; }
.hf-base .hf-outputs { grid-column: 3; width: 100%; max-width: 200px; }
@media (max-width: 700px) { .hf-base { display: block; } .hf-base .hf-outputs { max-width: none; width: auto; } }

/* Hero: compliance row (icons from the DigiAssess brochure) */
.hf-trust { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hf-trust li { display: flex; align-items: center; gap: 10px; }
.hf-trust img { height: 30px; width: auto; flex: none; }
.hf-trust span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--ink-500); line-height: 1.25; }
.hf-trust b { font-size: 14px; color: var(--ink-900); }
.hf-trust .more a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.hf-trust .more svg { width: 14px; height: 14px; }
/* Uniform chips: one height for content and delivery-mode chips */
.hf .chip { height: 34px; padding: 0 13px; }
@media (max-width: 430px) { .hf-trust { gap: 12px 18px; } .hf-trust .more { flex-basis: 100%; } }
/* Hero copy: vertical rhythm follows window height so copy + compliance row fit one screen */
.hf .hero-copy h1 { margin-top: clamp(10px, 1.8vh, 18px); font-size: min(clamp(42px, 5.4vw, 64px), 8.4vh); }
.hf .hero-copy .lede { margin-top: clamp(12px, 2.2vh, 22px); }
.hf .chips { margin-top: clamp(14px, 2.6vh, 26px); }
.hf .hero-ctas { margin-top: clamp(18px, 3.4vh, 34px); }
.hf-trust { margin-top: clamp(14px, 2.6vh, 26px); padding-top: clamp(12px, 1.8vh, 18px); }
@media (max-width: 1099px) { .hf .hero-copy h1 { font-size: clamp(42px, 5.4vw, 64px); } }
.hf-stage { padding-top: clamp(16px, 4vh, 64px); }

/* ---------- Feature pages (features/*.html) ---------- */
.fp-hero { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.fp-hero-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fp-hero h1 { margin-top: 14px; font-size: clamp(34px, 4vw, 52px); text-wrap: balance; }
.fp-hero .lede { margin-top: 18px; color: var(--ink-700); }
.fp-hero .hero-ctas { margin-top: 28px; }
.fp-visual { margin: 0; }
.fp-visual > img { width: 100%; height: auto; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); background: #fff; }
.fp-visual.pd { aspect-ratio: 16 / 10; box-shadow: var(--shadow-md); }
.fp-steps { padding: clamp(24px, 3vw, 36px); border-radius: var(--r-panel); background: linear-gradient(135deg, #f4f8ff 0%, #e7f1ff 100%); border: 1px solid #dbe6f6; box-shadow: var(--shadow-md); }
.fp-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.fp-steps li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid #dbe3ef; border-radius: 12px; }
.fp-steps li + li::before { content: ""; position: absolute; left: 33px; top: -13px; width: 2px; height: 12px; background: var(--blue); opacity: .45; }
.fp-steps li span { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); font-size: 13px; font-weight: 700; }
.fp-steps li:last-child span { background: var(--blue); color: #fff; }
.fp-steps b { font-size: 17px; color: var(--ink-900); }
.fp-steps figcaption { margin-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.fp-cv { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fp-card { padding: clamp(24px, 3vw, 36px); border-radius: 6px 22px 22px 22px; background: #fff; border: 1px solid var(--line-soft); }
.fp-card p { font-size: 17px; color: var(--ink-700); }
.fp-card p + p, .fp-card .fp-list + p, .fp-card p + .fp-list { margin-top: 12px; }
.fp-label { display: inline-block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.fp-solution { background: var(--blue-deep); border-color: var(--blue-deep); }
.fp-solution .fp-label { color: rgba(255, 255, 255, .75); }
.fp-solution p, .fp-solution li { color: #fff; }
.fp-solution .fp-list svg { color: #8fc0ff; }
.fp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink-700); }
.fp-list svg, .fp-ben svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--blue); }
.fp-subs { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fp-sub { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: 6px 18px 18px 18px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.fp-sub:hover { transform: translateY(-3px); border-color: #c9d6ea; box-shadow: var(--shadow-md); }
.fp-sub figure { margin: 0; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.fp-sub figure img { width: 100%; height: auto; display: block; }
.fp-sub-body { padding: 22px 22px 24px; }
.fp-num { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.fp-sub h3 { margin-top: 8px; font-size: 19px; line-height: 1.3; }
.fp-sub p { margin-top: 8px; font-size: 15px; color: var(--ink-500); line-height: 1.55; }
.fp-value { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.fp-value b, .fp-ex b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.fp-value p { margin-top: 4px; color: var(--ink-800); }
.fp-value .fp-list { margin-top: 6px; }
.fp-value .fp-list li { font-size: 14.5px; }
.fp-ben { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.fp-ben li { display: flex; gap: 8px; font-size: 14.5px; color: var(--ink-700); }
.fp-ben svg { margin-top: 3px; }
.fp-adv { margin-top: 14px !important; padding: 12px 14px; border-radius: 10px; background: var(--tint-ops); color: var(--blue-deep) !important; font-size: 14.5px !important; }
.fp-adv b { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.fp-ex { margin-top: 14px; }
.fp-ex p { margin-top: 4px; }
.fp-ex .fp-list li { font-size: 14.5px; }
.fp-subs.with-img .fp-sub.has-img { grid-row: span 2; }
.fp-outcomes { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fp-out-head h2 { margin-top: 14px; }
.fp-buyers { margin-top: 26px; }
.fp-buyers b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.fp-buyers ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fp-buyers li { padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-soft); font-size: 14px; color: var(--ink-800); }
.fp-out-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-out-grid li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line-soft); }
.fp-out-grid .ico { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--tint-ops); color: var(--blue); }
.fp-out-grid .ico svg { width: 17px; height: 17px; }
.fp-out-grid b { display: block; font-size: 16.5px; color: var(--ink-900); line-height: 1.35; }
.fp-out-grid span:not(.ico) { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-500); }
.fp-why h2 { margin-top: 14px; }
.fp-contrast { margin-top: 30px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.fp-contrast > div { padding: 26px; border-radius: 18px; }
.fp-contrast span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fp-contrast ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fp-before { background: var(--bg-100); }
.fp-before span { color: var(--ink-500); }
.fp-before li { font-size: 16px; color: var(--ink-700); padding-left: 16px; position: relative; }
.fp-before li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 2px; background: var(--ink-500); }
.fp-after { background: var(--blue-deep); }
.fp-after span { color: rgba(255, 255, 255, .75); }
.fp-after ul { grid-template-columns: 1fr 1fr; }
.fp-after li { display: flex; gap: 8px; font-size: 16px; color: #fff; }
.fp-after svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: #8fc0ff; }
.fp-statement { margin-top: 26px; max-width: 900px; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; color: var(--ink-800); }
.fp-statement b { color: var(--ink-900); }
.fp-focus { margin-top: 20px; padding: 24px; border-radius: 18px; background: var(--tint-ops); }
.fp-focus span { font-size: 15px; font-weight: 700; color: var(--blue-deep); }
.fp-focus ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fp-focus li { display: flex; gap: 8px; font-size: 15.5px; color: var(--ink-800); }
.fp-focus svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--blue); }
.fp-rel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; }
.fp-rel-head h2 { font-size: clamp(26px, 2.6vw, 32px); }
.fp-rel { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fp-rel-card, .fo-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid var(--line-soft); color: inherit; text-decoration: none !important; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.fp-rel-card:hover, .fo-card:hover { transform: translateY(-3px); border-color: #c9d6ea; box-shadow: var(--shadow-md); }
.fp-rel-card b, .fo-card b { font-size: 17.5px; line-height: 1.3; color: var(--ink-900); }
.fp-rel-card span, .fo-card span { font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }
.fp-rel-card .go, .fo-card .go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
.fp-rel-card .go svg, .fo-card .go svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.fp-rel-card:hover .go svg, .fo-card:hover .go svg { transform: translateX(3px); }

/* ---------- Features overview (features.html) ---------- */
.fo-hero { padding-block: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.fo-hero-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fo-hero h1 { margin-top: 14px; font-size: clamp(36px, 4.4vw, 56px); text-wrap: balance; }
.fo-hero .lede { margin-top: 18px; color: var(--ink-700); }
.fo-hero .hero-ctas { margin-top: 28px; }
.fo-index { list-style: none; margin: 0; padding: 10px; border-radius: var(--r-panel); background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-md); }
.fo-index a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px; color: var(--ink-900); font-weight: 600; font-size: 15.5px; text-decoration: none !important; }
.fo-index a:hover { background: var(--surface); }
.fo-index a span { font-size: 12.5px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.fo-index small { margin-left: auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: var(--tint-ops); color: var(--blue-deep); font-size: 12.5px; font-weight: 700; text-align: center; }
.fo-nav { position: sticky; top: 68px; z-index: 20; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-block: 1px solid var(--line-soft); }
.fo-nav ul { list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.fo-nav ul::-webkit-scrollbar { display: none; }
.fo-nav a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-700); text-decoration: none !important; }
.fo-nav a:hover { background: var(--tint-ops); color: var(--blue-deep); }
.fo-pillar { scroll-margin-top: 140px; }
.fo-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fo-grid.flip > :first-child { order: 2; }
.fo-n { font-size: 14px; font-weight: 700; color: var(--blue); letter-spacing: .08em; }
.fo-intro h2 { margin-top: 10px; }
.fo-intro p { margin-top: 14px; font-size: 17px; color: var(--ink-700); }
.fo-media { margin: 24px 0 0; }
.fo-media img { width: 100%; height: auto; border-radius: var(--r-panel); border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); background: #fff; }
.fo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fo-note { margin-bottom: 16px; padding: 18px 20px; border-radius: 14px; background: var(--tint-ops); font-size: 15.5px; color: var(--ink-800); }

/* ---------- Comparison (comparison.html) ---------- */
.cmp-hero { padding-block: clamp(36px, 5vw, 64px) clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.cmp-hero h1 { margin-top: 14px; max-width: 22ch; font-size: clamp(36px, 4.4vw, 56px); text-wrap: balance; }
.cmp-hero .lede { margin-top: 18px; color: var(--ink-700); }
.cmp-hero .hero-ctas { margin-top: 28px; }
.cmp-sum { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cmp-sum-card { padding: 24px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid var(--line-soft); display: grid; gap: 14px; align-content: start; }
.cmp-sum-card h3 { font-size: 19px; line-height: 1.3; }
.cmp-sum-card small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cmp-sum-card p { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.cmp-sum-card .d { padding: 14px 16px; border-radius: 12px; background: var(--blue-deep); }
.cmp-sum-card .d small { color: rgba(255, 255, 255, .75); }
.cmp-sum-card .d p { color: #fff; }
.cmp-sum-card .t { padding: 0 16px; }
.cmp-sum-card .t small { color: var(--ink-500); }
.cmp-sum-card .t p { color: var(--ink-500); }
.cmp-tabs { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cmp-tabs button { text-align: left; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line-soft); background: #fff; color: inherit; transition: border-color .2s, box-shadow .2s, background .2s; }
.cmp-tabs button b { display: block; font-size: 17px; color: var(--ink-900); }
.cmp-tabs button small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-500); }
.cmp-tabs button:hover { border-color: #b7c7e2; }
.cmp-tabs button[aria-selected="true"] { background: var(--blue-deep); border-color: var(--blue-deep); box-shadow: 0 18px 36px -22px rgba(0, 71, 179, .6); }
.cmp-tabs button[aria-selected="true"] b { color: #fff; }
.cmp-tabs button[aria-selected="true"] small { color: rgba(255, 255, 255, .78); }
.cmp-panel { margin-top: 24px; }
.cmp-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 26px 28px; border-radius: 18px; background: #fff; border: 1px solid var(--line-soft); }
.cmp-panel-head h3 { font-size: clamp(22px, 2.2vw, 28px); }
.cmp-panel-head p { margin-top: 10px; max-width: 760px; font-size: 16px; color: var(--ink-700); }
.cmp-stats { margin: 0; display: flex; gap: 12px; }
.cmp-stats div { min-width: 120px; padding: 12px 16px; border-radius: 12px; background: var(--tint-ops); display: flex; flex-direction: column-reverse; }
.cmp-stats dd { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--blue-deep); line-height: 1.1; }
.cmp-stats dt { font-size: 12.5px; color: var(--ink-500); }
.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.cmp-toggle { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--ink-900); }
.cmp-toggle:hover { border-color: var(--ink-900); }
.cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--ink-500); }
.cmp-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -8px; vertical-align: -1px; }
.cmp-legend i.d { background: var(--blue); } .cmp-legend i.part { background: #f5a524; } .cmp-legend i.no { background: #c3c9d4; }
.cmp-cat { margin-top: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line-soft); overflow: hidden; }
.cmp-cat summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 17px; font-weight: 700; color: var(--ink-900); }
.cmp-cat summary::-webkit-details-marker { display: none; }
.cmp-cat summary::after { content: ""; margin-left: 4px; width: 9px; height: 9px; border-right: 2px solid var(--ink-500); border-bottom: 2px solid var(--ink-500); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.cmp-cat[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.cmp-cat summary small { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.cmp-table { border-top: 1px solid var(--line-soft); }
.cmp-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.cmp-row > span { padding: 13px 20px; font-size: 15px; line-height: 1.5; border-bottom: 1px solid var(--line-soft); }
.cmp-row:last-child > span { border-bottom: 0; }
.cmp-headrow > span { padding-block: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); background: var(--surface); }
.cmp-headrow > span:nth-child(2) { color: var(--blue-deep); background: #eaf2ff; }
.cmp-row .f { font-weight: 600; color: var(--ink-900); }
.cmp-row .d { display: flex; gap: 8px; color: var(--ink-800); background: #f7faff; }
.cmp-row .d svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--blue); }
.cmp-row .c { color: var(--ink-700); }
.cmp-row em { font-style: normal; }
.cmp-row .lbl { display: none; }
.cmp-row .c.no { color: var(--ink-500); }
.cmp-row .c.no em::before { content: "×"; display: inline-block; width: 14px; margin-right: 6px; font-weight: 700; color: #9aa3b2; }
.cmp-row .c.part em::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #f5a524; vertical-align: 1px; }
.cmp-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-500); }
.cmp-close { padding: clamp(28px, 4vw, 48px); border-radius: var(--r-human); background: var(--ink-900); color: #fff; }
.cmp-close h2 { color: #fff; }
.cmp-close p { margin-top: 14px; max-width: 820px; font-size: 18px; color: rgba(255, 255, 255, .82); }

/* Responsive */
@media (max-width: 1100px) {
  .fp-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .fp-hero-grid, .fo-hero-grid, .fp-cv, .fp-outcomes, .fo-grid, .fp-contrast { grid-template-columns: minmax(0, 1fr); }
  .fo-grid.flip > :first-child { order: 0; }
  .cmp-panel-head { grid-template-columns: minmax(0, 1fr); }
  .fp-focus ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .fp-subs, .fp-rel, .cmp-sum, .fp-out-grid { grid-template-columns: minmax(0, 1fr); }
  .fp-subs.with-img .fp-sub.has-img { grid-row: auto; }
  .fp-after ul, .fp-focus ul { grid-template-columns: minmax(0, 1fr); }
  .cmp-tabs { grid-template-columns: minmax(0, 1fr); }
  .fo-nav { top: 68px; }
  /* Comparison rows become stacked cards */
  .cmp-headrow { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .cmp-row > span { border: 0; padding: 4px 16px; }
  .cmp-row .d { flex-wrap: wrap; background: none; }
  .cmp-row .lbl { display: block; flex-basis: 100%; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
  .cmp-stats div { min-width: 0; flex: 1; }
}
/* Header with seven menu items: tighten spacing between the mobile breakpoint and full desktop */
@media not all and (max-width: 980px) { @media (max-width: 1240px) {
  .nav { gap: 14px; }
  .brand img { height: 26px; width: auto; }
  .nav-menu .nav-link { padding: 0 11px; font-size: 14px; gap: 4px; }
  .nav-cta .btn { padding: 0 14px; font-size: 13.5px; min-height: 40px; }
} }
.fp-hero h1 { font-size: clamp(32px, 3.5vw, 46px); }
.cmp-cat summary small { white-space: nowrap; }
.cmp-row .d em { flex: 1; min-width: 0; }
@media (max-width: 700px) { .cmp-cat summary { font-size: 16px; padding: 14px 16px; } }

/* ---------- Design refinement pass ---------- */
/* Typography: balanced headlines, no orphans in body copy */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
.lede { line-height: 1.6; }
/* Motion: one calm entrance, shorter travel */
.js .reveal { transform: translateY(10px); transition-duration: .5s; }
/* Focus: clearer ring on interactive surfaces */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(0, 102, 255, .5); outline-offset: 3px; }
/* Capability icons */
.fp-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, #eef4ff 0%, #dfeaff 100%); color: var(--blue); flex: none; }
.fp-ic-svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fp-sub .fp-ic { margin-bottom: 14px; }
.fp-sub h3 { margin-top: 0; }
.fp-sub:hover .fp-ic { background: var(--blue); color: #fff; }
.fp-sub .fp-ic { transition: background .25s, color .25s; }
.fo-card .fp-ic, .fp-rel-card .fp-ic { width: 40px; height: 40px; margin-bottom: 6px; }
.fo-card:hover .fp-ic, .fp-rel-card:hover .fp-ic { background: var(--blue); color: #fff; }
/* Illustrations */
.illo { margin: 0; }
.illo img, .cmp-illo img { width: 100%; height: auto; display: block; }
.cmp-hero-grid { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.cmp-hero-grid .eyebrow { margin-top: 0; }
.cmp-illo { margin: 0; }
.fp-visual > img[src$=".svg"] { border: 0; box-shadow: none; background: none; }
@media (max-width: 900px) { .cmp-hero-grid { grid-template-columns: minmax(0, 1fr); } .cmp-illo { max-width: 560px; } }
.cmp-hero-grid h1 { font-size: clamp(34px, 3.6vw, 50px); }

/* Resource cards: topic illustration thumbnails */
.res-card { overflow: hidden; }
.res-thumb { display: block; margin: -22px -22px 8px; aspect-ratio: 16 / 9; overflow: hidden; background: #f3f7ff; border-bottom: 1px solid var(--line-soft); }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.res-card:hover .res-thumb img { transform: scale(1.03); }
/* Article and legal covers drawn from the illustration set */
.art-illo img { border: 0; background: #f3f7ff; }
.legal-illo { max-width: 620px; }
.legal-illo img { background: none; }
.demo-illo { margin: 18px 0 6px; max-width: 420px; }
@media (max-width: 980px) { .demo-illo { max-width: 360px; } }
.foot-trust { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.foot-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px 6px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .85); }
.foot-trust img { height: 18px; width: auto; filter: brightness(0) invert(1); opacity: .9; }
.shift-illo { margin-top: 28px; max-width: 440px; }
@media (max-width: 980px) { .shift-illo { max-width: 380px; } }

/* ---------- Uniform hero visuals ---------- */
:root { --wrap: 1320px; }
@media (min-width: 1100px) {
  .ih-grid, .heh-grid, .hh-grid, .pah-grid, .coh-grid, .fp-hero-grid, .cmp-hero-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(40px, 4.5vw, 72px); }
  .ihero h1, .fp-hero h1, .cmp-hero-grid h1 { font-size: clamp(36px, 3.4vw, 50px); }
}
.ih-visual img, .heh-visual img, .hh-visual img, .pah-visual img, .fp-visual > img, .co-illo img, .cmp-illo img { width: 100%; height: auto; }

/* ---------- Illustration info chips ---------- */
.illo-fig { position: relative; }
.illo-chip { position: absolute; z-index: 2; font-size: 13.5px; padding: 7px 13px 7px 9px; }
.illo-chip i svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illo-chip.mute i { background: var(--bg-100); color: var(--ink-500); }
.illo-chip.c1 { left: -3%; top: 7%; }
.illo-chip.c2 { right: -3%; top: 34%; }
.illo-chip.c3 { left: 8%; bottom: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .illo-chip { animation: chipIn .7s var(--ease) both, chipBob 6s ease-in-out infinite; }
  .illo-chip.c1 { animation-delay: .5s, 1.2s; }
  .illo-chip.c2 { animation-delay: .8s, 3.2s; }
  .illo-chip.c3 { animation-delay: 1.1s, 2.2s; }
}
@keyframes chipIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes chipBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (max-width: 700px) {
  .illo-chip { font-size: 12px; padding: 5px 10px 5px 7px; gap: 6px; }
  .illo-chip i { width: 18px; height: 18px; }
  .illo-chip.c1 { left: 0; } .illo-chip.c2 { right: 0; } .illo-chip.c3 { left: 4%; }
}
/* Wide screens: hero visuals extend toward the window edge (text stays on the content grid) */
@media (min-width: 1400px) {
  .ih-visual, .heh-visual, .hh-visual, .pah-visual, .fp-hero .fp-visual, .co-illo, .cmp-illo {
    margin-right: max(-160px, calc((100vw - var(--wrap)) / -2 + 32px)) !important;
  }
}
@media (min-width: 1100px) { .dph .hh-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); } }

/* Chips sit on the illustration corners, clear of the drawn content */
.illo-chip.c1 { left: -2%; top: -3%; right: auto; bottom: auto; }
.illo-chip.c2 { right: -2%; bottom: -3%; left: auto; top: auto; }
.illo-chip.c3 { right: 2%; top: -3%; left: auto; bottom: auto; }
@media (max-width: 700px) { .illo-chip.c1 { left: 0; } .illo-chip.c2 { right: 0; } .illo-chip.c3 { display: none; } }
@media (max-width: 1100px) { .illo-chip.c1 { left: 0; } .illo-chip.c2 { right: 0; bottom: 0; } .illo-chip.c3 { right: 0; } }

/* Product tabs: a white rule separates inactive tabs from the panel; the active tab breaks through it */
.pe-tabs { padding-bottom: 4px; background: linear-gradient(to top, #fff 0, #fff 4px, transparent 4px); }
.pe-tab { border-bottom: 0; }
.pe-tab[aria-selected="true"] { margin-bottom: -4px; height: 90px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.pe-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pc); }
.pe-tab { position: relative; }
.pe-panel { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35), 0 30px 60px -40px color-mix(in srgb, var(--pc) 80%, transparent); }

/* ---------- Human-in-the-loop scenes: a person, cycling information cards and step progress ---------- */
.hil { position: relative; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hil-stage { position: relative; }
.hil-stage > img { width: 100%; height: auto; display: block; border-radius: 24px; box-shadow: var(--shadow-md); }
.hil-stack { position: absolute; right: 3%; top: 7%; width: min(48%, 300px); aspect-ratio: 5 / 3; }
.hil-card {
  position: absolute; inset: 0 auto auto 0; width: 100%; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 40px -18px rgba(18, 48, 95, .35), 0 0 0 1px rgba(214, 224, 240, .9); backdrop-filter: blur(6px); opacity: 0;
}
.hil-card .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.hil-card b { display: block; margin-top: 4px; font-size: 16px; line-height: 1.3; color: var(--ink-900); }
.hil-card .sub { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-500); }
.hil-card .meter { display: block; margin-top: 10px; height: 6px; border-radius: 3px; background: #e8edf6; overflow: hidden; }
.hil-card .meter i { display: block; height: 100%; width: var(--w, 70%); border-radius: 3px; background: linear-gradient(90deg, #1a75ff, #0047b3); }
.hil-card .tick { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: #18be7f; color: #fff; vertical-align: -4px; }
.hil-card .tick svg, .hil-fixed .av svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hil-card .stars { display: block; margin-top: 8px; color: #f5a524; letter-spacing: 2px; font-size: 15px; }
.hil-card:first-child { opacity: 1; }
.hil-fixed { position: absolute; left: 3%; bottom: 6%; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -18px rgba(18, 48, 95, .35), 0 0 0 1px rgba(214, 224, 240, .9); }
.hil-fixed .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-deep); color: #fff; flex: none; }
.hil-fixed b { display: block; font-size: 14px; color: var(--ink-900); line-height: 1.25; }
.hil-fixed span span { display: block; font-size: 12.5px; color: var(--ink-500); }
.hil-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hil-steps li { position: relative; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-500); }
.hil-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: #dfe6f2; }
.hil-steps li::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; border-radius: 2px; background: var(--blue); }
.hil-steps li:first-child { color: var(--ink-900); }
.hil-steps li:first-child::after { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .hil-card { animation: hilCard 12s var(--ease) infinite both; }
  .hil-card:nth-child(2) { animation-delay: 4s; }
  .hil-card:nth-child(3) { animation-delay: 8s; }
  .hil-steps li { animation: hilStepText 12s linear infinite both; }
  .hil-steps li::after { animation: hilStepBar 12s linear infinite both; }
  .hil-steps li:nth-child(2), .hil-steps li:nth-child(2)::after { animation-delay: 4s; }
  .hil-steps li:nth-child(3), .hil-steps li:nth-child(3)::after { animation-delay: 8s; }
  .hil-steps li:first-child::after { width: 0; }
  .hil-fixed { animation: chipBob 6s ease-in-out infinite; }
}
@keyframes hilCard {
  0% { opacity: 0; transform: translateY(16px) scale(.97); }
  4% { opacity: 1; transform: none; }
  30% { opacity: 1; transform: none; }
  34% { opacity: 0; transform: translateY(-12px) scale(.98); }
  100% { opacity: 0; transform: translateY(-12px) scale(.98); }
}
@keyframes hilStepBar { 0% { width: 0; } 33.3% { width: 100%; } 33.4%, 100% { width: 0; } }
@keyframes hilStepText { 0%, 33.3% { color: var(--ink-900); } 33.4%, 100% { color: var(--ink-500); } }
@media (max-width: 700px) {
  .hil-stack { width: 62%; right: 2%; top: 4%; }
  .hil-card { padding: 10px 12px; }
  .hil-card b { font-size: 14px; }
  .hil-card .sub { display: none; }
  .hil-fixed { padding: 7px 10px 7px 7px; }
  .hil-fixed .av { width: 26px; height: 26px; }
  .hil-fixed span span { display: none; }
  .hil-steps li { font-size: 12.5px; }
}
/* Keep cycling cards clear of the person (head sits at 38-51% of the scene width) */
.hil-stack { width: min(44%, 300px); }
.demo-illo.hil { max-width: 520px; }
@media (max-width: 700px) {
  .hil-stack { width: 58%; top: auto; bottom: 4%; right: 3%; aspect-ratio: auto; height: 34%; }
  .hil-fixed { display: none; }
}

/* Product tabs, reference style: plain rounded tabs; only the active tab gets the angled cut */
.pe-tabs { gap: 6px; }
.pe-tab, .pe-tab:last-child { clip-path: none; border-radius: 12px 12px 0 0; padding: 12px 14px 11px; }
.pe-tab[aria-selected="true"] { border-radius: 14px 0 0 0; z-index: 3; box-shadow: none; }
.pe-tab[aria-selected="true"]::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -30px; width: 34px; background: var(--pc);
  transform: skewX(18deg); transform-origin: bottom left; border-right: 3px solid #fff; border-top-right-radius: 4px; pointer-events: none;
}
.pe-tab[aria-selected="true"] + .pe-tab { padding-left: 34px; }
.pe-tab:last-child[aria-selected="true"]::before { display: none; }
.pe-tab:last-child[aria-selected="true"] { border-radius: 14px 14px 0 0; }

/* Human-in-the-loop scenes use real photos: keep the frame 4:3 and let the cards sit on the photo */
.hil-stage > img { aspect-ratio: 4 / 3; object-fit: cover; background: #e8eef8; }
.hil--fr .hil-fixed { left: auto; right: 3%; }

/* 404 page */
.nf { padding: clamp(64px, 10vw, 120px) 0; }
.nf-wrap { max-width: 760px; text-align: center; }
.nf h1 { font-size: clamp(34px, 5vw, 54px); margin: 10px 0 14px; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 28px 0 40px; }
.nf-links { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid #e3e9f3; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; text-align: left; }

/* ===== Feature capabilities explorer (.fx): one colored panel at a time instead of a long stack ===== */
.fx-hint { margin: 10px 0 0; color: var(--ink-500); font-size: 15px; }
.fx { display: grid; grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 34px; }
.fx-list { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 96px; padding: 8px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-soft); }
.fx-tab { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; cursor: pointer; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink-700); transition: background .25s, color .25s; }
.fx-tab:hover { background: var(--bg-50); color: var(--ink-900); }
.fx-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fx-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg-100); font-size: 12px; font-weight: 700; color: var(--ink-500); transition: background .25s, color .25s; }
.fx-tab[aria-selected="true"] { background: var(--fxc, #0b5bd3); color: #fff; box-shadow: 0 12px 26px -14px var(--fxc, #0b5bd3); }
.fx-tab[aria-selected="true"] .fx-n { background: rgba(255,255,255,.2); color: #fff; }
.fx-tab[aria-selected="true"]::after { content: ""; position: absolute; right: -14px; top: 50%; width: 12px; height: 12px; background: var(--fxc, #0b5bd3); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.fx-list:has(.fx-tab:nth-child(4n+2)[aria-selected="true"]) { --fxc: #0e7490; }
.fx-list:has(.fx-tab:nth-child(4n+3)[aria-selected="true"]) { --fxc: #5b3fc8; }
.fx-list:has(.fx-tab:nth-child(4n+4)[aria-selected="true"]) { --fxc: #2f3d99; }
.fx-list:has(.fx-tab:nth-child(4n+1)[aria-selected="true"]) { --fxc: #0b5bd3; }
/* All panels share one cell: the tallest sets the height, so switching never moves the page */
.fx-panels { display: grid; }
.fx-panel { grid-area: 1 / 1; display: grid; gap: 26px; align-content: start; padding: clamp(24px, 3vw, 38px); border-radius: 26px; color: var(--ink-800);
  --t1: #eef4ff; --t2: #f8fbff; --tc: #0b5bd3; background: radial-gradient(120% 90% at 100% 0%, var(--t1) 0%, var(--t2) 60%, #fff 100%); box-shadow: inset 0 0 0 1px rgba(11, 91, 211, .08), var(--shadow-sm); }
.fx-panel[role="tabpanel"][hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; }
.fx-panel.has-img { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
.fx-panel.tone-teal { --t1: #e3f6f4; --t2: #f6fcfb; --tc: #0e7490; }
.fx-panel.tone-violet { --t1: #efeaff; --t2: #faf8ff; --tc: #5b3fc8; }
.fx-panel.tone-indigo { --t1: #e8ebfb; --t2: #f7f8fe; --tc: #2f3d99; }
.fx-body { min-width: 0; }
.fx-body .fp-ic { background: var(--tc); color: #fff; margin-bottom: 14px; }
.fx-count { float: right; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tc); }
.fx-body h3 { margin: 0 0 8px; font-size: clamp(22px, 2.1vw, 27px); line-height: 1.2; color: var(--ink-900); }
.fx-desc { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-700); }
.fx-body .fp-ben { margin-top: 16px; }
.fx-body .fp-ben svg { color: var(--tc); }
.fx-call { margin-top: 16px; padding: 14px 16px 14px 18px; border-radius: 14px; border-left: 4px solid; font-size: 14.5px; line-height: 1.55; color: var(--ink-700); }
.fx-call > b { display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.fx-call p { margin: 0; } .fx-call p + p { margin-top: 6px; }
.fx-call .fp-list { margin: 6px 0 0; }
.fx-value { background: #e9f8f1; border-color: #18be7f; } .fx-value > b { color: #0b7a52; }
.fx-adv { background: #eaf2ff; border-color: #0066ff; } .fx-adv > b { color: #0047b3; }
.fx-ex { background: #fff6e8; border-color: #f5a524; } .fx-ex > b { color: #a65f00; }
.fx-media { margin: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); background: #fff; position: sticky; top: 110px; }
.fx-media img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .fx-panel:not([hidden]) .fx-body > * { animation: fxIn .5s var(--ease) both; }
  .fx-panel:not([hidden]) .fx-body > :nth-child(3) { animation-delay: .04s; }
  .fx-panel:not([hidden]) .fx-body > :nth-child(4) { animation-delay: .08s; }
  .fx-panel:not([hidden]) .fx-body > :nth-child(n+5) { animation-delay: .14s; }
  .fx-panel:not([hidden]) .fx-media { animation: fxMedia .6s var(--ease) both; }
  @keyframes fxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes fxMedia { from { opacity: 0; transform: scale(.97) translateX(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1100px) { .fx-panel.has-img { grid-template-columns: 1fr; } .fx-media { position: static; max-width: 560px; } }
@media (max-width: 860px) {
  .fx { grid-template-columns: 1fr; gap: 16px; }
  .fx-list { position: sticky; top: 64px; z-index: 5; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px; scrollbar-width: none; }
  .fx-list::-webkit-scrollbar { display: none; }
  .fx-tab { flex: none; scroll-snap-align: start; padding: 10px 12px; font-size: 14px; max-width: 240px; }
  .fx-tab[aria-selected="true"]::after { display: none; }
  /* On phones only the active panel takes space */
  .fx-panel[role="tabpanel"][hidden] { display: none !important; }
}

/* Balanced two-column sections: the shorter column stays in view (sticky) or centers, so no side is left empty */
@media (min-width: 1000px) {
  .fo-intro { position: sticky; top: 96px; }
  .fo-grid > :last-child { align-self: center; }
  .cs-story { align-items: start; }
  .cs-side { position: sticky; top: 100px; }
  .fp-out-head { position: sticky; top: 100px; }
}
/* Feature overview cards: keep descriptions to three lines so long pillars stay compact (full text is on each feature page) */
.fo-card > span:not(.go):not(.fp-ic) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Story blocks (homepage): related sections as tabs with tinted panels and an autoplay progress bar ===== */
.st-block .st-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 16px 0 24px; }
.st-tab { all: unset; box-sizing: border-box; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; cursor: pointer;
  background: #fff; box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-sm); transition: background .3s, box-shadow .3s, transform .3s var(--ease); --tc: #0b5bd3; --soft: #eaf2ff; }
.st-tab:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line-soft), var(--shadow-md); }
.st-tab:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }
.st-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--soft); color: var(--tc); transition: background .3s, color .3s; }
.st-ic svg { width: 21px; height: 21px; }
.st-txt b { display: block; font-size: 16px; line-height: 1.3; color: var(--ink-900); }
.st-txt small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-500); }
.st-tab[aria-selected="true"] { background: var(--tc); box-shadow: 0 18px 36px -18px var(--tc); }
.st-tab[aria-selected="true"] .st-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.st-tab[aria-selected="true"] b, .st-tab[aria-selected="true"] small { color: #fff; }
.st-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255, 255, 255, .75); }
.st-block.st-run .st-tab[aria-selected="true"] .st-bar { animation: stBar var(--st-ms, 11s) linear forwards; }
@keyframes stBar { to { width: 100%; } }
.tone-teal { --tc: #0e7490; --soft: #e3f6f4; } .tone-violet { --tc: #5b3fc8; --soft: #efeaff; }
.tone-indigo { --tc: #2f3d99; --soft: #e8ebfb; } .tone-blue { --tc: #0b5bd3; --soft: #eaf2ff; } .tone-navy { --tc: #1b2a4a; --soft: #eef1f6; }
/* Panels share one grid cell so autoplay never shifts the page */
.st-panels { display: grid; }
.st-panel { grid-area: 1 / 1; position: relative; overflow: hidden; border-radius: 30px; padding: clamp(26px, 4vw, 56px);
  background: radial-gradient(90% 80% at 100% 0%, var(--soft) 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, color-mix(in srgb, var(--soft) 55%, #fff) 0%, #fff 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 12%, transparent); }
.st-panel[role="tabpanel"][hidden] { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; }
.st-panel > .wrap { max-width: none; width: auto; margin: 0; padding-inline: 0; }
.st-panel h2 { margin-top: 14px; } .st-panel .lede { margin-top: 16px; }
.st-panel .eyebrow { color: var(--tc); }
.st-panel::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--soft); opacity: .7; pointer-events: none; z-index: 0; }
.st-panel > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .st-panel:not([hidden]) { animation: stIn .6s var(--ease); }
  @keyframes stIn { from { opacity: 0; transform: translateY(14px) scale(.995); } to { opacity: 1; transform: none; } }
}
@media (max-width: 760px) {
  .st-block .st-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; }
  .st-block .st-tabs::-webkit-scrollbar { display: none; }
  .st-tab { flex: 0 0 78%; scroll-snap-align: start; }
  .st-panel { border-radius: 22px; }
  .st-panel[role="tabpanel"][hidden] { display: none !important; }
}
.st-ic svg[viewBox] { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Color-coded key phrases (<mark class="hl">): a marker stroke that draws in when the text is revealed =====
   blue = key concept · green (.hl-g) = outcome/benefit · violet (.hl-v) = AI with human judgment · amber (.hl-a) = risk/responsibility */
mark.hl { --hl: rgba(0, 102, 255, .16); --hl-ink: #0047b3; color: inherit; font-weight: 600; padding: 0 .12em; margin: 0 -.06em; border-radius: .2em;
  background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.hl-g { --hl: rgba(24, 190, 127, .2); --hl-ink: #0b7a52; }
mark.hl-v { --hl: rgba(91, 63, 200, .17); --hl-ink: #5b3fc8; }
mark.hl-a { --hl: rgba(245, 165, 36, .26); --hl-ink: #a65f00; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal mark.hl { background-size: 0% 100%; transition: background-size 1.1s var(--ease) .45s; }
  .js .reveal.in mark.hl { background-size: 100% 100%; }
}
/* On dark bands the marker stays visible but lighter */
.trust-band mark.hl, .cta-band mark.hl, [class*="dark"] mark.hl { --hl: rgba(143, 192, 255, .28); }
/* Scene variant: cards at the bottom (for photos where faces fill the top of the frame) */
.hil--sb .hil-stack { top: auto; bottom: 5%; }
.hil--sb .hil-fixed { left: 3%; right: auto; bottom: auto; top: 5%; }



/* =====================================================================================================
   Hero system v3 (all pages except the homepage)
   - Fits one screen: compact top spacing and a visual height cap (--hv-h), text and visual centred on one axis.
   - Each page picks a treatment with data-hv: tilt | leaf | stack | bleed | rise | float, so heroes vary.
   - Floating labels (.float-chip) hover on the visual's edges with a gentle bob.
   ===================================================================================================== */
.ihero { --hv-h: clamp(320px, calc(100svh - 300px), 520px); padding-block: clamp(18px, 2.4vw, 30px) clamp(40px, 4.5vw, 64px) !important; }
.ihero .crumbs-bar { margin-bottom: clamp(16px, 2.2vw, 28px); }
.ihero .fp-hero-grid, .ihero .cmp-hero-grid { margin-top: 0; }
.ihero :is(.ih-grid, .heh-grid, .hh-grid, .pah-grid, .coh-grid, .fp-hero-grid, .cmp-hero-grid) { align-items: center; }
@media (min-width: 1100px) {
  .ihero h1, .fp-hero h1, .cmp-hero-grid h1 { font-size: clamp(36px, 3.1vw, 48px); }
  .ihero .lede { margin-top: 16px; }
  .ihero .hero-ctas { margin-top: 24px; }
}
/* visuals stay on the content grid unless they deliberately bleed */
.ihero [data-hv] { position: relative; isolation: isolate; margin: 0; }
.ihero [data-hv]:not([data-hv="bleed"]) { margin-right: 0 !important; }
.ihero [data-hv] > img { display: block; width: 100%; height: auto; max-height: var(--hv-h); object-fit: cover; aspect-ratio: auto; }

/* --- tilt: 3D perspective panel with a white bezel; straightens on hover --- */
.ihero [data-hv="tilt"] { perspective: 1700px; padding: 26px 8px 30px; }
.ihero [data-hv="tilt"]::before { content: ""; position: absolute; inset: 4% -4% 2% 8%; z-index: -1; border-radius: 40%; background: radial-gradient(closest-side, rgba(0, 102, 255, .28), transparent); filter: blur(30px); }
.ihero [data-hv="tilt"] > img { border-radius: 18px; border: 6px solid #fff; background: #fff; transform-origin: 40% 50%;
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(.8deg); transition: transform 1.1s var(--ease);
  box-shadow: 46px 50px 90px -40px rgba(18, 48, 95, .55), 0 0 0 1px rgba(18, 48, 95, .08); }
.ihero [data-hv="tilt"]:hover > img { transform: rotateY(-5deg) rotateX(2deg) rotateZ(0); }
.pah [data-hv="tilt"] > img { border-color: rgba(255, 255, 255, .9); box-shadow: 46px 50px 90px -40px rgba(0, 0, 0, .8); }

/* --- leaf: big curved corners, a dashed outline ring and an accent disc --- */
.ihero [data-hv="leaf"] { padding: 22px; }
.ihero [data-hv="leaf"] > img { aspect-ratio: 5 / 4; border-radius: 170px 30px 170px 30px; box-shadow: 0 40px 80px -40px rgba(18, 48, 95, .5); }
.ihero [data-hv="leaf"]::before { content: ""; position: absolute; inset: 6px; z-index: -1; border: 2px dashed rgba(14, 116, 144, .4); border-radius: 180px 40px 180px 40px; transform: rotate(-2.5deg); }
.ihero [data-hv="leaf"]::after { content: ""; position: absolute; z-index: -1; width: 34%; aspect-ratio: 1; right: -4%; top: -6%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #9fe3e6, #0e7490); opacity: .35; }
.dph [data-hv="leaf"] > img { border-radius: 30px 170px 30px 170px; }
.dph [data-hv="leaf"]::before { border-radius: 40px 180px 40px 180px; transform: rotate(2.5deg); }
.dph [data-hv="leaf"]::after { right: auto; left: -4%; background: radial-gradient(circle at 30% 30%, #c9c3ff, #5b3fc8); }

/* --- stack: the image on top of two tinted cards fanned behind it --- */
.ihero [data-hv="stack"] { padding: 22px 28px 34px 18px; }
.ihero [data-hv="stack"]::before { content: ""; position: absolute; inset: 40px 0 6px 44px; z-index: -1; border-radius: 26px; background: linear-gradient(135deg, #0b5bd3, #5b3fc8); transform: rotate(4.5deg); opacity: .92; }
.ihero [data-hv="stack"]::after { content: ""; position: absolute; inset: 12px 22px 24px 4px; z-index: -1; border-radius: 26px; background: #dce8ff; transform: rotate(-3deg); }
.ihero [data-hv="stack"] > img { border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(18, 48, 95, .55), 0 0 0 1px rgba(18, 48, 95, .06); }
/* human-in-the-loop scenes in a hero use the stack treatment around the photo */
.ihero .hil { max-width: calc(var(--hv-h) * 4 / 3 + 40px); margin-inline: auto !important; }
.ihero .hil .hil-stage { isolation: isolate; }
.ihero .hil .hil-stage::before { content: ""; position: absolute; inset: 26px -18px -14px 30px; z-index: -1; border-radius: 26px; background: linear-gradient(135deg, #0b5bd3, #5b3fc8); transform: rotate(3.5deg); opacity: .9; }
.ihero .hil .hil-stage::after { content: ""; position: absolute; inset: -12px 10px 10px -14px; z-index: -1; border-radius: 26px; background: #dce8ff; transform: rotate(-2.5deg); }
.ihero .hil .hil-steps { margin-top: 10px; }

/* --- bleed: runs to the window edge, rounded only where it meets the copy --- */
.ihero [data-hv="bleed"] { margin-right: calc(-1 * (max(0px, (100vw - var(--wrap)) / 2) + var(--gutter))) !important; }
.ihero [data-hv="bleed"] > img { height: var(--hv-h); max-height: none; object-fit: cover; object-position: left center; border-radius: 30px 0 0 30px;
  box-shadow: -30px 40px 80px -40px rgba(18, 48, 95, .45); }
.ihero [data-hv="bleed"]::before { content: ""; position: absolute; left: -22px; top: 10%; bottom: 10%; width: 6px; border-radius: 6px; background: linear-gradient(#0066ff, #5b3fc8); }

/* --- rise (platform): the wide canvas tipped back like a screen --- */
.ihero .ph-canvas[data-hv="rise"] { perspective: 2000px; }
.ihero .ph-canvas[data-hv="rise"] > img { transform: rotateX(14deg); transform-origin: 50% 100%; border-radius: 24px 24px 0 0; box-shadow: 0 -30px 80px -30px rgba(0, 71, 179, .4); transition: transform 1.2s var(--ease); }
.ihero .ph-canvas[data-hv="rise"]:hover > img { transform: rotateX(4deg); }

/* --- float (illustrations): a soft glow and a slow drift --- */
.ihero [data-hv="float"]::before { content: ""; position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 102, 255, .2), transparent); filter: blur(24px); }

@media (prefers-reduced-motion: no-preference) {
  .ihero [data-hv="leaf"]::before { animation: hvSway 12s ease-in-out infinite; }
  .ihero [data-hv="float"] > img, .ihero [data-hv="leaf"] > img, .ihero [data-hv="stack"] > img { animation: hvDrift 9s ease-in-out infinite; }
  @keyframes hvSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(1.5deg) scale(1.01); } }
  @keyframes hvDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
}

/* --- floating labels on the visual's edges --- */
.ihero [data-hv] .float-chip { position: absolute; z-index: 4; margin: 0; font-size: 13.5px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink-900);
  box-shadow: 0 0 0 1px rgba(11, 91, 211, .1), 0 18px 34px -16px rgba(18, 48, 95, .5); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ihero [data-hv] .f1 { left: -30px; top: 14%; right: auto; bottom: auto; }
.ihero [data-hv] .f2 { right: -22px; top: 2%; left: auto; bottom: auto; }
.ihero [data-hv] .f3 { left: -18px; bottom: 12%; right: auto; top: auto; }
.ihero [data-hv] .f4 { right: 6%; bottom: -6px; left: auto; top: auto; }
.ihero [data-hv="bleed"] .f2 { right: auto; left: -40px; top: 44%; }
.ihero [data-hv="bleed"] .f4 { right: auto; left: 26%; bottom: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .ihero [data-hv] .float-chip { animation: chipIn .7s var(--ease) both, chipBob 6s ease-in-out infinite; }
  .ihero [data-hv] .f1 { animation-delay: .5s, 1s; } .ihero [data-hv] .f2 { animation-delay: .8s, 2.6s; }
  .ihero [data-hv] .f3 { animation-delay: 1.1s, 1.8s; } .ihero [data-hv] .f4 { animation-delay: 1.4s, 3.4s; }
}

/* --- tablets and phones: flatter treatments, labels wrap under the visual --- */
@media (max-width: 980px) {
  .ihero { --hv-h: 420px; }
  .ihero [data-hv] { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
  .ihero [data-hv] .float-chip { position: static; animation: none; max-width: 100%; }
  .ihero [data-hv="tilt"] > img { transform: rotateY(-6deg) rotateX(3deg); }
  .ihero [data-hv="bleed"] { margin-right: calc(-1 * var(--gutter)) !important; }
  .ihero [data-hv="leaf"] > img { border-radius: 110px 24px 110px 24px; }
  .ihero [data-hv="leaf"]::before { display: none; }
}
@media (max-width: 600px) {
  .ihero { --hv-h: 300px; }
  .ihero [data-hv="tilt"] > img { transform: none; }
  .ihero [data-hv="stack"]::before, .ihero [data-hv="stack"]::after { inset: 14px 4px 10px 14px; }
  .ihero .ph-canvas[data-hv="rise"] > img { transform: none; }
}

/* =====================================================================================================
   Fine-tune pass: tighter rhythm, header edge, upfront chapters, scroll-spy navs
   ===================================================================================================== */
/* Vertical rhythm: less empty space between sections */
.pad { padding-block: clamp(52px, 6vw, 84px); }
.pad-lg { padding-block: clamp(60px, 7.5vw, 100px); }

/* Header: a soft shadow edge at all times, stronger once the page scrolls */
.site-header { border-bottom: 1px solid rgba(18, 29, 48, .06); box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 10px 28px -20px rgba(3, 8, 20, .35); }
.site-header.scrolled { box-shadow: 0 12px 32px -18px rgba(3, 8, 20, .4); }

/* Homepage: trust badges sit with the customer logos */
.trust-strip .ts-assure { grid-column: 1 / -1; margin: 0; padding: 16px 0 0; border-top: 1px dashed var(--line-soft); justify-content: center; gap: 12px 40px; }
/* Homepage "seven shifts": balance the illustration column with the table */
.shift { align-items: center; }
.shift-illo { max-width: 360px; margin-top: 20px; }

/* ---- Upfront chapters (.st-chapters): every panel visible, a sticky chapter bar tracks reading progress ---- */
.st-chapters .st-rail { position: sticky; top: 76px; z-index: 12; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px;
  margin: 12px 0 18px; padding: 8px; border-radius: 20px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--line-soft), 0 16px 30px -24px rgba(18, 48, 95, .45); }
.st-chapters .st-tab { padding: 9px 12px; gap: 12px; border-radius: 14px; background: transparent; box-shadow: none; text-decoration: none !important; }
.st-chapters .st-tab:hover { transform: none; background: var(--bg-50); box-shadow: none; }
.st-chapters .st-ic { width: 36px; height: 36px; border-radius: 10px; }
.st-chapters .st-ic svg { width: 19px; height: 19px; }
.st-chapters .st-txt b { font-size: 15px; }
.st-chapters .st-txt small { font-size: 12.5px; }
.st-chapters .st-tab[aria-current="true"] { background: var(--tc); box-shadow: 0 12px 26px -16px var(--tc); }
.st-chapters .st-tab[aria-current="true"] .st-ic { background: rgba(255, 255, 255, .18); color: #fff; }
.st-chapters .st-tab[aria-current="true"] b, .st-chapters .st-tab[aria-current="true"] small { color: #fff; }
.st-chapters .st-bar { width: calc(var(--p, 0) * 100%); animation: none !important; background: rgba(255, 255, 255, .8); }
.st-chapters .st-tab:not([aria-current="true"]) .st-bar { background: var(--tc); opacity: .35; height: 2px; }
.st-chapters .st-panels { display: flex; flex-direction: column; gap: 18px; }
.st-chapters .st-panel { grid-area: auto; scroll-margin-top: 190px; padding: clamp(24px, 3.2vw, 46px); animation: none !important; }
@media (max-width: 760px) {
  .st-chapters .st-rail { top: 64px; display: flex; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -.5); }
  .st-chapters .st-rail::-webkit-scrollbar { display: none; }
  .st-chapters .st-tab { flex: 0 0 auto; }
  .st-chapters .st-txt small { display: none; }
  .st-chapters .st-panel { scroll-margin-top: 140px; }
}

/* ---- Feature capabilities: all visible, the left list is a sticky index with progress ---- */
.fx-panels { display: flex; flex-direction: column; gap: 16px; }
.fx-panel { grid-area: auto; scroll-margin-top: 110px; padding: clamp(22px, 2.6vw, 32px); }
.fx-panel .fx-body > *, .fx-panel .fx-media { animation: none !important; }
.fx-tab { text-decoration: none !important; }
.fx-tab[aria-current="true"] { color: #fff; box-shadow: 0 12px 26px -14px var(--fxc, #0b5bd3);
  background: linear-gradient(90deg, rgba(255, 255, 255, .16) calc(var(--p, 0) * 100%), transparent 0), var(--fxc, #0b5bd3); }
.fx-tab[aria-current="true"] .fx-n { background: rgba(255, 255, 255, .2); color: #fff; }
.fx-tab[aria-current="true"]::after { content: ""; position: absolute; right: -14px; top: 50%; width: 12px; height: 12px; background: var(--fxc, #0b5bd3); transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
.fx-list:has(.fx-tab:nth-child(4n+1)[aria-current="true"]) { --fxc: #0b5bd3; }
.fx-list:has(.fx-tab:nth-child(4n+2)[aria-current="true"]) { --fxc: #0e7490; }
.fx-list:has(.fx-tab:nth-child(4n+3)[aria-current="true"]) { --fxc: #5b3fc8; }
.fx-list:has(.fx-tab:nth-child(4n+4)[aria-current="true"]) { --fxc: #2f3d99; }
.fx-list { max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 860px) {
  .fx-list { max-height: none; overflow-y: visible; }
  .fx-tab[aria-current="true"]::after { display: none; }
}

/* ---- Features overview: the pillar bar shows where you are and scrolls with arrows ---- */
.fo-nav { box-shadow: 0 12px 26px -22px rgba(18, 48, 95, .4); }
.fo-nav .wrap { position: relative; }
.fo-nav ul { scroll-behavior: smooth; }
.fo-nav a { transition: background .25s, color .25s, box-shadow .25s; }
.fo-nav a[aria-current="true"] { background: var(--blue); color: #fff; box-shadow: 0 10px 22px -12px rgba(0, 102, 255, .7); }
.fo-nav.spy-over ul { padding-inline: 44px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
.spy-arrow { display: none; position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fff; color: var(--ink-800); box-shadow: 0 0 0 1px var(--line-soft), 0 8px 18px -8px rgba(18, 48, 95, .45); place-items: center; }
.spy-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.spy-arrow:hover { background: var(--blue); color: #fff; }
.spy-over .spy-arrow { display: grid; }
.spy-prev { left: calc(var(--gutter) - 4px); } .spy-next { right: calc(var(--gutter) - 4px); }
.spy-start .spy-prev, .spy-end .spy-next { opacity: .35; pointer-events: none; }
.fo-pillar { scroll-margin-top: 140px; }
/* Capability panels: the heading spans the panel; image, benefits and colored callouts flow into two
   self-balancing columns, so neither side is left with empty space */
.fx-panel, .fx-panel.has-img { display: block; }
.fx-body { columns: 2; column-gap: 28px; }
.fx-body > .fp-ic, .fx-body > .fx-count, .fx-body > h3, .fx-body > .fx-desc { column-span: all; }
.fx-body > .fx-desc { margin-bottom: 16px; }
.fx-body > .fx-media, .fx-body > .fp-ben, .fx-body > .fx-call { break-inside: avoid; display: block; }
.fx-body > .fp-ben { margin-top: 0; padding-bottom: 6px; }
.fx-body > .fx-call:first-of-type { margin-top: 0; }
.fx-body > .fx-media { position: static; max-width: none; margin: 0 0 16px; }
.fx-body > .fx-media img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 760px) { .fx-body { columns: 1; } }
.fx-list { overflow-x: hidden; }

/* ===== Hide-on-scroll header: slides up while scrolling down, back down on scroll up =====
   --hdr is the space the header currently occupies; sticky page bars sit just below it and slide with it. */
:root { --hdr-h: 68px; --hdr: var(--hdr-h); }
html.hdr-off { --hdr: 0px; }
.site-header { transition: transform .38s var(--ease), box-shadow .25s, border-color .2s; }
.site-header.hdr-hidden { transform: translateY(-100%); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.fo-nav, .st-chapters .st-rail, .fx-list, .fo-intro, .cs-side, .fp-out-head, .art-aside, .shift-head, .fx-media { transition: top .38s var(--ease); }
.fo-nav { top: var(--hdr); }
.st-chapters .st-rail { top: calc(var(--hdr) + 2px); }
.fx-list { top: calc(var(--hdr) + 22px); }
.art-aside { top: calc(var(--hdr) + 22px); }
.shift-head { top: calc(var(--hdr) + 46px); }
@media (min-width: 1000px) {
  .fo-intro { top: calc(var(--hdr) + 22px); }
  .cs-side, .fp-out-head { top: calc(var(--hdr) + 26px); }
}
@media (max-width: 860px) { .fx-list { top: var(--hdr); } }
@media (max-width: 760px) { .st-chapters .st-rail { top: var(--hdr); } }

/* ===== Floating actions shown while the header is hidden (Request a Demo + round menu button) ===== */
.hdr-float { position: fixed; top: 18px; right: max(18px, calc((100vw - var(--wrap)) / 2 + var(--gutter) - 8px)); z-index: 60; display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-14px) scale(.96); pointer-events: none; transition: opacity .3s var(--ease), transform .38s var(--ease); }
html.hdr-off .hdr-float { opacity: 1; transform: none; pointer-events: auto; }
.hf-demo { display: inline-flex; align-items: center; height: 50px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 15px; letter-spacing: .01em;
  color: #fff !important; text-decoration: none !important; background: linear-gradient(100deg, #0047b3 0%, #0066ff 45%, #6d3fc8 100%);
  box-shadow: 0 14px 30px -12px rgba(0, 71, 179, .6); transition: transform .25s var(--ease), box-shadow .25s; }
.hf-demo:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(0, 71, 179, .7); }
.hf-menu { position: relative; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; background: #121d30; box-shadow: 0 14px 30px -12px rgba(3, 8, 20, .6);
  transition: transform .25s var(--ease), background .25s; }
.hf-menu:hover { transform: scale(1.06); background: #0047b3; }
.hf-menu:focus-visible, .hf-demo:focus-visible { outline: 3px solid rgba(0, 102, 255, .45); outline-offset: 3px; }
.hf-menu span, .hf-menu span::before, .hf-menu span::after { position: absolute; left: 50%; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: #fff; content: ""; }
.hf-menu span { top: 50%; margin-top: -1px; }
.hf-menu span::before { top: -6px; left: 0; margin-left: 0; }
.hf-menu span::after { top: 6px; left: 0; margin-left: 0; }
@media (max-width: 600px) {
  .hdr-float { top: 12px; right: 12px; gap: 8px; }
  .hf-demo { height: 42px; padding: 0 18px; font-size: 14px; }
  .hf-menu { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .hdr-float { transition: opacity .2s; transform: none; } }

/* =====================================================================================================
   PHONE EDITION (<= 760px): its own reading rhythm, not a squeezed desktop.
   Type scale, 44px tap targets, swipe rows for card grids, swipe decks for chapters and capabilities,
   compact resource list, full-screen menu sheet, bottom action dock and a folding footer.
   ===================================================================================================== */
/* Menu sheet (all small screens): full height under the header, big rows, pinned demo button */
@media (max-width: 980px) {
  .nav-menu { inset: var(--hdr-h, 74px) 0 0 !important; height: auto; padding: 8px var(--gutter) calc(110px + env(safe-area-inset-bottom)); background: #fff; }
  .menu-open .nav-menu { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .nav-link { font-size: 17px; font-weight: 600; color: var(--ink-900); }
  .nav-link svg { transition: transform .25s var(--ease); }
  .nav-item.open > .nav-link svg { transform: rotate(180deg); }
  .nav-item.open > .nav-link { color: var(--blue); }
  .mega { padding: 0 0 14px 4px; }
  .mega-links { display: grid; gap: 2px; }
  .mega-links a { padding: 10px 12px; border-radius: 12px; border-left: 3px solid transparent; }
  .mega-links a:active, .mega-links a:hover { background: var(--bg-50); border-left-color: var(--blue); }
  .mega-links a span { font-size: 13px; }
  .nav-menu .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #fff 30%); }
  .nav-menu .mobile-cta .btn { height: 52px; font-size: 16px; justify-content: center; }
}

@media (max-width: 760px) {
  /* Type scale */
  body { font-size: 16px; }
  .ihero h1, .hero h1, .fp-hero h1, .cmp-hero-grid h1 { font-size: clamp(30px, 8.6vw, 36px) !important; line-height: 1.1; letter-spacing: -.025em; }
  h2 { font-size: clamp(25px, 7vw, 30px); line-height: 1.15; }
  h3 { font-size: 19px; }
  .lede, .ihero .lede { font-size: 16.5px; line-height: 1.6; }
  .eyebrow { font-size: 12.5px; letter-spacing: .12em; }
  main :is(small, .tag, .meta, .type, .kind, dt, th, .flag, .lbl, .timer, .done, .dev, .hf-kicker, figcaption) { font-size: 12.5px; }

  /* Rhythm */
  .pad { padding-block: 44px; }
  .pad-lg { padding-block: 52px; }
  .section-head { margin-bottom: 18px; }

  /* Tap targets */
  .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
  .crumbs-bar a { display: inline-block; padding-block: 8px; }
  .site-footer .foot-col a { display: block; padding: 10px 0; }
  .btn { min-height: 48px; }

  /* Hero: copy first, full-width actions, visual below */
  .ihero { padding-block: 14px 36px !important; }
  .ihero .hero-ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .ihero .hero-ctas .btn { width: 100%; justify-content: center; }
  .ihero [data-hv], .ihero .hil { margin-top: 8px; }
  .ihero [data-hv] { flex-wrap: wrap; }

  /* Card grids become swipe rows: the next card peeks in, so the row reads as swipeable */
  :is(.fo-cards, .streams, .controls, .stages6, .formats, .values, .cmp-sum, .stories, .caps, .beliefs, .fp-rel, .fp-out-grid) {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 16px !important; scroll-padding-inline: var(--gutter);
    grid-template-columns: none !important; }
  :is(.fo-cards, .streams, .controls, .stages6, .formats, .values, .cmp-sum, .stories, .caps, .beliefs, .fp-rel, .fp-out-grid)::-webkit-scrollbar { display: none; }
  :is(.fo-cards, .streams, .controls, .stages6, .formats, .values, .cmp-sum, .stories, .caps, .beliefs, .fp-rel, .fp-out-grid) > * {
    flex: 0 0 84%; scroll-snap-align: start; margin: 0 !important; min-width: 0; }
  :is(.controls, .fp-out-grid, .values, .stages6) > * { flex-basis: 74%; }
  .stages6 > * { border: 1px solid var(--line-soft) !important; border-radius: 16px; }
  .logo-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Swipe decks (chapters and capabilities) */
  .m-deck { display: flex !important; flex-direction: row !important; gap: 0 !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; align-items: flex-start; transition: height .35s var(--ease); }
  .m-deck::-webkit-scrollbar { display: none; }
  .m-deck > * { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; margin: 0 !important; }
  .st-chapters .m-deck > .st-panel { border-radius: 22px; }
  .m-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .m-pager[hidden] { display: none; }
  .m-pager button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-soft); background: #fff; color: var(--ink-900); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
  .m-pager button:disabled { opacity: .35; }
  .m-pager svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .m-count { font-weight: 700; font-size: 15px; color: var(--ink-900); min-width: 52px; text-align: center; }
  .m-hint { font-size: 12.5px; color: var(--ink-500); letter-spacing: .08em; text-transform: uppercase; }
  .st-chapters .st-rail, .fx-list { scroll-behavior: smooth; }
  .fx-list { position: sticky; top: var(--hdr); z-index: 6; }

  /* Resources: a compact list instead of tall cards */
  .res-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
  .res-card { display: grid !important; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; padding: 10px !important; align-items: start; }
  .res-card .res-thumb { grid-row: 1 / span 2; margin: 0 !important; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
  .res-card .res-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .res-card .meta { margin: 0 !important; }
  .res-card b { font-size: 15.5px; line-height: 1.35; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .res-card p, .res-card .go { display: none !important; }

  /* Footer folds into an accordion */
  .site-footer .foot-col h4 { display: flex; justify-content: space-between; align-items: center; min-height: 48px; margin: 0; cursor: pointer; border-top: 1px solid rgba(255, 255, 255, .12); }
  .site-footer .foot-col h4::after { content: "+"; font-size: 22px; font-weight: 400; opacity: .7; transition: transform .25s var(--ease); }
  .site-footer .foot-col.m-open h4::after { transform: rotate(45deg); }
  .site-footer .foot-col ul { display: none; padding-bottom: 8px; }
  .site-footer .foot-col.m-open ul { display: block; }

  /* Bottom action dock while the header is away (replaces the top-right pair on phones) */
  .hdr-float { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; right: 12px; gap: 8px; padding: 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line-soft), 0 18px 40px -16px rgba(3, 8, 20, .45);
    transform: translateY(20px); }
  .hdr-float .hf-demo { flex: 1; justify-content: center; height: 46px; }
  .hdr-float .hf-menu { width: 46px; height: 46px; flex: none; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 760px) {
  .site-footer a { display: inline-block; padding-block: 10px; }
  .fx-count { font-size: 12.5px; }
}
@media (max-width: 760px) { html, body { overflow-x: clip; } }

/* =====================================================================================================
   PHONE EDITION v2 (<= 760px): Docebo-style flow. Everything stacks full width (no cut-off cards, no swipe
   rows, no tap-to-reveal), and sections and cards rise in as you scroll. The header keeps its standard phone layout.
   ===================================================================================================== */
@media (max-width: 760px) {
  /* --- Undo swipe rows: full-width stacked cards --- */
  :is(.fo-cards, .streams, .controls, .stages6, .formats, .values, .cmp-sum, .stories, .caps, .beliefs, .fp-rel, .fp-out-grid, .ev-cards, .sec-track, .cx-track) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; overflow: visible !important;
    margin-inline: 0 !important; padding: 0 !important; transform: none !important; width: auto !important; scroll-snap-type: none; }
  :is(.fo-cards, .streams, .controls, .stages6, .formats, .values, .cmp-sum, .stories, .caps, .beliefs, .fp-rel, .fp-out-grid, .ev-cards, .sec-track, .cx-track) > * {
    flex: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; transform: none; opacity: 1; visibility: visible; position: relative !important; left: auto !important; }
  /* Short, uniform cards pair up two per row */
  :is(.controls, .values, .fp-out-grid, .metrics) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .controls > li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px !important; }
  .m-pager { display: none !important; }

  /* --- Tab groups: hidden tablists, every panel shown with its label; shared-display tabs wrap --- */
  .m-hide { display: none !important; }
  [role="tabpanel"].m-shown { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; transform: none !important; }
  [role="tabpanel"].m-shown + [role="tabpanel"].m-shown { margin-top: 18px; }
  .m-tab-label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
  .m-tab-label::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  [role="tablist"].m-wrap { display: flex !important; flex-wrap: wrap !important; overflow: visible !important; gap: 8px !important; margin-inline: 0 !important; padding-inline: 0 !important; mask-image: none !important; -webkit-mask-image: none !important; }
  [role="tablist"].m-wrap > [role="tab"] { flex: 0 1 auto !important; min-width: 0 !important; width: auto !important; white-space: normal; }

  /* --- Chapter bar, pillar nav and capability index: no sideways scrolling --- */
  .st-chapters .st-rail { position: static; display: flex; flex-wrap: wrap; overflow: visible; margin: 10px 0 16px; padding: 6px; gap: 6px; }
  .st-chapters .st-tab { flex: 1 1 140px; padding: 8px 10px; }
  .st-chapters .st-txt small { display: none; }
  .st-chapters .st-panels { display: grid !important; gap: 16px !important; height: auto !important; overflow: visible !important; }
  .st-chapters .st-panel { scroll-margin-top: 90px; }
  .fo-nav { position: static; }
  .fo-nav ul { flex-wrap: wrap; overflow: visible; padding: 12px 0 !important; mask-image: none !important; -webkit-mask-image: none !important; }
  .fo-nav .spy-arrow { display: none !important; }
  .fx-list { display: none !important; }
  .fx { display: block; }
  .fx-panels { display: grid !important; gap: 14px !important; height: auto !important; overflow: visible !important; }
  .filters, .res-filters, .chips { flex-wrap: wrap !important; overflow: visible !important; }

  /* --- Motion: cards rise in one after another; images unveil --- */
  @media (prefers-reduced-motion: no-preference) {
    .m-phone .m-card { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .6s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
    .m-phone .m-card.m-in { opacity: 1; transform: none; }
    .m-phone .js .reveal, .js.m-phone .reveal { transform: translateY(22px); transition-duration: .65s; }
    .js.m-phone .reveal.in { transform: none; }
    .js.m-phone :is(figure, .media-human, .hil-stage) img { clip-path: inset(0 0 0 0 round 20px); }
    .js.m-phone .reveal:not(.in) :is(figure img, img.media-human) { clip-path: inset(10% 6% 10% 6% round 20px); }
    .js.m-phone :is(figure, .hil-stage) img, .js.m-phone img.media-human { transition: clip-path 1s var(--ease) .1s; }
  }

}
/* Phones: products as stacking cards (each sticks near the top and the next slides over it) */
@media (max-width: 760px) {
  .m-phone .pe-panel.m-shown { position: sticky !important; top: calc(var(--hdr) + 14px + var(--k, 0) * 8px); z-index: calc(1 + var(--k, 0));
    display: block !important; padding: 22px 20px 20px !important; margin-top: 14px; border-radius: 24px; min-height: 0;
    box-shadow: 0 -12px 30px -16px rgba(3, 8, 20, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset; transition: top .38s var(--ease); }
  .m-phone .pe-panel.m-shown > .m-tab-label { display: none; }
  .m-phone .pe-panel .pe-media { display: none !important; }
  .m-phone .pe-panel .pe-copy { padding: 0 !important; }
  .m-phone .pe-panel h3 { font-size: 21px; margin-top: 8px; }
  .m-phone .pe-panel p { font-size: 15px; }
  .m-phone .pe-panel .pe-proof { flex-wrap: wrap; }
  .m-phone #products .m-card { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  /* products: let the cards stick, and give each its product colour */
  .m-phone #products { overflow: clip; }
  .m-phone .pe-panel.m-shown { background: linear-gradient(155deg, var(--pc, #0b5bd3) 0%, color-mix(in srgb, var(--pc, #0b5bd3) 72%, #000) 100%) !important; color: #fff; }
  .m-phone .pe-panel.m-shown :is(h3, p, .eyebrow, .pe-kicker, .link-arrow) { color: #fff !important; }
  .m-phone .pe-panel.m-shown .pe-proof li { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .25); }
  /* comparison: feature name across, the two answers side by side */
  .cmp-row.cmp-headrow { display: none !important; }
  .cmp-row:not(.cmp-headrow) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: 8px; row-gap: 6px; padding: 12px 0 !important; }
  .cmp-row > .f { grid-column: 1 / -1; padding: 0 2px !important; font-weight: 700; }
  .cmp-row > .d, .cmp-row > .c { padding: 9px 10px !important; border-radius: 12px; font-size: 13.5px; line-height: 1.45; }
  .cmp-row > .d { background: #eaf2ff; }
  .cmp-row > .c { background: var(--bg-50); }
  .cmp-row .lbl { display: block; margin-bottom: 3px; font-style: normal; font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
  .cmp-row > .d svg { display: none; }
}
@media (max-width: 760px) { .m-phone .pe-panel .pe-proof { display: none !important; } .m-phone .pe-panel .link-arrow { margin-top: 6px; } }
@media (max-width: 760px) {
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .logo-grid > * { min-width: 0; overflow-wrap: anywhere; }
  .fp-out-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .epa-detail { max-width: 100%; }
}

/* ---- Phone fixes from the spill scan (<= 760px only) ---- */
@media (max-width: 760px) {
  /* trust controls: one per row (icon + text) so text never runs into the next card */
  .controls { grid-template-columns: minmax(0, 1fr) !important; }
  .controls > li { display: grid !important; grid-template-columns: 36px minmax(0, 1fr) !important; align-items: start; gap: 12px; }
  .controls > li > * { min-width: 0; }
  /* chapter chips: titles wrap inside the chip */
  .st-chapters .st-tab { min-width: 0; }
  .st-chapters .st-txt { min-width: 0; flex: 1 1 auto; }
  .st-chapters .st-txt b { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  /* health sciences: EPA detail and activity feed fit their column */
  .epa { grid-template-columns: minmax(0, 1fr) !important; }
  .epa-detail, .epa-detail > * { min-width: 0; max-width: 100%; }
  .epa-detail .levels { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .feed > li { width: auto !important; margin-inline: 0 !important; transform: none !important; grid-template-columns: 30px minmax(0, 1fr) auto !important; }
  .feed > li > * { min-width: 0; }
}
@media (max-width: 760px) { .m-phone details .plus { display: none; } .m-phone details > summary { cursor: default; } }

/* Platform hero: show the whole lifecycle image (flat, uncropped) with the two label groups floating beside it */
.ihero .ph-canvas[data-hv="rise"] { perspective: none; }
.ihero .ph-canvas[data-hv="rise"] > img { transform: none !important; max-height: none !important; height: auto; object-fit: contain; aspect-ratio: auto;
  border-radius: 22px !important; border: 6px solid #fff; box-shadow: 0 40px 80px -40px rgba(0, 71, 179, .45), 0 0 0 1px rgba(18, 48, 95, .06) !important; }
.ihero .ph-canvas[data-hv="rise"]:hover > img { transform: none !important; }
@media (prefers-reduced-motion: no-preference) { .ihero .ph-canvas[data-hv="rise"] > img { animation: hvDrift 10s ease-in-out infinite; } }
@media (min-width: 981px) {
  .ph-canvas .float-group { z-index: 4; }
  .ph-canvas .float-group.left { left: -84px; top: 12%; }
  .ph-canvas .float-group.right { right: -84px; top: 30%; }
  .ph-canvas .float-group small { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); justify-self: start; box-shadow: 0 0 0 1px var(--line-soft); }
}
@media (min-width: 981px) and (max-width: 1300px) { .ph-canvas .float-group.left { left: -24px; } .ph-canvas .float-group.right { right: -24px; } }
/* Demo page: keep space between the heading and the scene */
.demo-illo.hil { margin: 22px 0 8px; }
/* Feature capability panels: spacing between benefits and colour callouts in the same column */
.fx-body > .fp-ben { margin-bottom: 14px; padding-bottom: 0; }
.fx-body > .fx-call, .fx-body > .fx-call:first-of-type { margin-top: 0; margin-bottom: 14px; }
/* Platform hero: its chips live in two stacked groups, not at the image corners */
.ihero .ph-canvas .float-group .float-chip { position: static !important; inset: auto !important; margin: 0 !important; max-width: none; justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
  .ihero .ph-canvas .float-group .float-chip { animation: chipIn .7s var(--ease) both, chipBob 6s ease-in-out infinite; }
  .ihero .ph-canvas .float-group .float-chip:nth-of-type(2) { animation-delay: .6s, 1.8s; }
  .ihero .ph-canvas .float-group .float-chip:nth-of-type(3) { animation-delay: .8s, 2.6s; }
  .ihero .ph-canvas .float-group .float-chip:nth-of-type(4) { animation-delay: 1s, 3.4s; }
}
h2 + .res-cta { margin-top: 18px; }
/* Platform hero: space between the buttons and the image; label groups level and symmetric */
.ihero .ph-canvas[data-hv] { margin: clamp(36px, 4vw, 52px) auto 0 !important; }
@media (min-width: 981px) {
  .ph-canvas .float-group.left, .ph-canvas .float-group.right { top: 18%; }
  .ph-canvas .float-group.left { left: -56px; right: auto; }
  .ph-canvas .float-group.right { right: -56px; left: auto; justify-items: end; }
  .ph-canvas .float-group.right small, .ph-canvas .float-group.right .float-chip { justify-self: end; }
}
@media (min-width: 981px) and (max-width: 1300px) { .ph-canvas .float-group.left { left: -16px; } .ph-canvas .float-group.right { right: -16px; } }

/* Demo form honeypot: kept out of sight and out of the tab order */
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ===== Homepage hero: keyword H1 (small label + display line) and the positioning statement ===== */
.hero-copy .hero-h1 { margin-top: 0 !important; }
.hero-h1 .hero-kicker { display: flex; margin: 0 0 clamp(10px, 1.8vh, 18px); line-height: 1.45; }
.hero-h1 .hero-display { display: block; }
.hero-points { list-style: none; margin: clamp(14px, 2.2vh, 24px) 0 0; padding: 0; display: grid; gap: clamp(8px, 1.3vh, 12px); max-width: 600px; }
.hero-points li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(16px, 1.25vw, 17.5px); line-height: 1.5; color: var(--ink-700); }
.hero-points b { color: var(--ink-900); font-weight: 600; }
.hp-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -1px; border-radius: 9px; background: var(--tint-ops); color: var(--blue); }
.hp-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-points.reveal li { opacity: 0; transform: translateX(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .js .hero-points.reveal.in li { opacity: 1; transform: none; }
  .js .hero-points.reveal.in li:nth-child(2) { transition-delay: .08s; } .js .hero-points.reveal.in li:nth-child(3) { transition-delay: .16s; } .js .hero-points.reveal.in li:nth-child(4) { transition-delay: .24s; }
}

/* ===== Floating "Request a Demo" + menu: sticky tab bars stop below them instead of sliding underneath ===== */
@media (min-width: 761px) { html.hdr-off { --hdr: 80px; } }

/* ===== Homepage: AI proctoring with human review ===== */
.proct { background: linear-gradient(180deg, #fff 0%, var(--surface) 100%); }
.proct-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.proct .eyebrow { color: #5b3fc8; }
.proct-steps { list-style: none; counter-reset: ps; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.proct-steps li { counter-increment: ps; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.proct-steps li::before { content: counter(ps, decimal-leading-zero); grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #efeaff; color: #5b3fc8; font-weight: 700; font-size: 13px; }
.proct-steps b { font-size: 16.5px; color: var(--ink-900); }
.proct-steps span { font-size: 15px; color: var(--ink-500); line-height: 1.5; }
.proct-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.proct-console { position: relative; margin: 0; padding: 16px; border-radius: 26px; overflow: hidden; color: #dbe4f3;
  background: radial-gradient(80% 60% at 100% 0%, rgba(91, 63, 200, .35), transparent 70%), linear-gradient(160deg, #13203d 0%, #0b1428 100%);
  box-shadow: 0 40px 80px -40px rgba(18, 29, 48, .7), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 4px 14px; font-size: 13px; }
.pc-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.pc-live i { width: 8px; height: 8px; border-radius: 50%; background: #fb4f49; box-shadow: 0 0 0 4px rgba(251, 79, 73, .2); }
.pc-meta { color: #8fa3c0; }
.pc-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pc-grid { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pc-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 104px; padding: 56px 10px 10px; border-radius: 14px;
  background: linear-gradient(160deg, #1d2d50 0%, #152240 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pc-av { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(143, 192, 255, .14); color: #8fc0ff; }
.pc-av svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pc-tile b { font-size: 12.5px; color: #fff; font-weight: 600; }
.pc-st { font-size: 12px; color: #6fd3a6; }
.pc-tile.flag { box-shadow: inset 0 0 0 2px #f5a524; }
.pc-tile.flag .pc-st { color: #f7b84a; font-weight: 600; }
.pc-side { display: flex; flex-direction: column; gap: 12px; }
.pc-stack { position: relative; flex: 1; min-height: 150px; }
.pc-card { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--ink-900); box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .6); }
.pc-card .k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b3fc8; }
.pc-card b { font-size: 15.5px; line-height: 1.35; }
.pc-card .sub { font-size: 13px; color: var(--ink-500); }
.pc-card + .pc-card { opacity: 0; }
.pc-human { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pc-hico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #5b3fc8; color: #fff; }
.pc-hico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pc-human b { display: block; font-size: 14px; color: #fff; }
.pc-human small { display: block; font-size: 12.5px; color: #8fa3c0; }
.pc-note { margin-top: 10px; font-size: 12px; color: #7d8fae; text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  .pc-live i { animation: pcBlink 1.6s ease-in-out infinite; }
  @keyframes pcBlink { 50% { opacity: .35; } }
  .pc-tile.flag::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: pcRing 2.4s ease-out infinite; }
  @keyframes pcRing { 0% { box-shadow: 0 0 0 0 rgba(245, 165, 36, .55); } 100% { box-shadow: 0 0 0 12px rgba(245, 165, 36, 0); } }
  .pc-grid::before { content: ""; position: absolute; left: 0; right: 0; height: 40px; top: 0; z-index: 1; pointer-events: none; border-radius: 14px;
    background: linear-gradient(180deg, transparent, rgba(143, 192, 255, .14), transparent); animation: pcScan 4.5s ease-in-out infinite; }
  @keyframes pcScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--scan, 200px))); } }
  .pc-card { opacity: 0; animation: pcCard 12s var(--ease) infinite; }
  .pc-card:nth-child(2) { animation-delay: 4s; } .pc-card:nth-child(3) { animation-delay: 8s; }
  @keyframes pcCard { 0% { opacity: 0; transform: translateY(12px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-10px); } }
}
@media (max-width: 980px) { .proct-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .pc-body { grid-template-columns: minmax(0, 1fr); }
  .pc-head { flex-wrap: wrap; }
  .pc-tile { min-height: 96px; padding: 52px 8px 9px; }
  .pc-stack { min-height: 128px; }
}
/* proctoring: balance the columns (steps two per row, larger console tiles) */
@media (min-width: 981px) {
  .proct-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
  .pc-tile { min-height: 132px; padding-top: 70px; }
  .pc-av { width: 46px; height: 46px; top: 16px; }
  .pc-av svg { width: 25px; height: 25px; }
  .pc-stack { min-height: 190px; }
  .pc-card { padding: 18px; gap: 6px; }
  .pc-card b { font-size: 17px; }
  .proct-console { padding: 20px; }
}
@media (min-width: 981px) {
  .proct-grid { align-items: stretch; }
  .proct-console { display: flex; flex-direction: column; }
  .pc-body { flex: 1; }
  .pc-grid { grid-auto-rows: 1fr; }
}
@media (min-width: 981px) {
  .proct-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
  .pc-body { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .pc-card { inset: 0 0 auto 0; }
  .pc-tile b { white-space: nowrap; }
}
/* proctoring console: tiles at natural height, a short sample incident log fills the column */
.pc-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pc-log { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.pc-log li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 1.45; color: #b9c6dc; }
.pc-log time { color: #6f84a6; font-variant-numeric: tabular-nums; }
.pc-log li.warn span { color: #f7c46a; }
@media (min-width: 981px) {
  .pc-grid { grid-auto-rows: auto; }
  .pc-tile { min-height: 120px; padding-top: 66px; }
  .pc-main { justify-content: space-between; }
  .pc-log { flex: 1; align-content: center; }
}

/* ===== Pinned tab bars take over from the floating actions (replaces the 80px offset approach) ===== */
@media (min-width: 761px) {
  html.hdr-off { --hdr: 0px; }
  html.subnav-stuck .hdr-float { opacity: 0 !important; pointer-events: none !important; transform: translateY(-14px) scale(.96) !important; }
}
.bar-actions { display: none; }
@media (min-width: 761px) {
  .is-stuck .bar-actions { display: flex; align-items: center; gap: 8px; }
  @media (prefers-reduced-motion: no-preference) { .is-stuck .bar-actions { animation: barIn .35s var(--ease) both; } }
  @keyframes barIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
  .bar-demo { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 700;
    color: #fff !important; text-decoration: none !important; background: linear-gradient(100deg, #0047b3 0%, #0066ff 50%, #6d3fc8 100%); box-shadow: 0 8px 18px -10px rgba(0, 71, 179, .7); }
  .bar-demo:hover { filter: brightness(1.08); }
  .bar-menu { position: relative; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; background: #121d30; }
  .bar-menu:hover { background: #0047b3; }
  .bar-menu span, .bar-menu span::before, .bar-menu span::after { position: absolute; left: 50%; width: 16px; height: 2px; margin-left: -8px; border-radius: 2px; background: #fff; content: ""; }
  .bar-menu span { top: 50%; margin-top: -1px; }
  .bar-menu span::before { top: -5px; left: 0; margin-left: 0; } .bar-menu span::after { top: 5px; left: 0; margin-left: 0; }
  .bar-demo:focus-visible, .bar-menu:focus-visible { outline: 3px solid rgba(0, 102, 255, .45); outline-offset: 2px; }

  /* Features pillar bar */
  .fo-nav.is-stuck { box-shadow: 0 14px 30px -20px rgba(18, 48, 95, .45); }
  .fo-nav .bar-actions { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); }
  .fo-nav.is-stuck ul { margin-right: 236px; }
  .fo-nav.is-stuck .spy-next { right: calc(var(--gutter) + 230px); }

  /* Chapter bars */
  .st-chapters .st-rail.is-stuck { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) auto; box-shadow: 0 0 0 1px var(--line-soft), 0 16px 34px -20px rgba(18, 48, 95, .5); }
  .st-chapters .st-rail .bar-actions { padding: 0 4px 0 6px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .st-chapters .st-rail.is-stuck .st-txt small { display: none; }
}

/* ===== Footer: "Ask AI about DigiAssess" ===== */
.ask-ai { padding-block: 48px 4px; text-align: center; }
.ask-ai-title { margin: 0 0 24px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ask-ai-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 24px; }
.ask-ai-btn { display: block; color: #aab3c2 !important; text-decoration: none !important; border-radius: 50%; }
.ask-ai-btn img { display: block; object-fit: contain; box-sizing: content-box; width: 28px; height: 28px; padding: 14px; border-radius: 50%; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: transform .3s var(--ease), background .3s, box-shadow .3s; }
.ask-ai-btn:hover svg, .ask-ai-btn:focus-visible svg { transform: translateY(-3px) scale(1.06); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 14px 26px -12px rgba(0, 102, 255, .55); }
.ask-ai-btn:focus-visible { outline: 2px solid #8fc0ff; outline-offset: 5px; }
.ask-ai + .foot-top { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 44px; padding-top: 48px; }
@media (max-width: 760px) {
  .ask-ai { padding-block: 36px 4px; }
  .ask-ai-list { gap: 12px 8px; }
  .ask-ai-btn img { width: 24px; height: 24px; padding: 12px; }
  .ask-ai + .foot-top { margin-top: 28px; padding-top: 12px; }
  }
@media (prefers-reduced-motion: reduce) { .ask-ai-btn img { transition: none; } }

/* =====================================================================================================
   Product detail pages: spec sections (.pp-*). Each section carries a tone (.pp-tone-*) that sets the product colour.
   Source: _import/product-pages.css (appended to assets/css/site.css by _import/product-pages.ps1)
   ===================================================================================================== */
.pp-tone-teal { --pc: #0e7490; --pc2: #0b5568; --pcs: #e4f6f7; --pcl: #bfe3e8; }
.pp-tone-indigo { --pc: #4b4fc9; --pc2: #343aa3; --pcs: #eceeff; --pcl: #cfd2fa; }
.pp-tone-cyan { --pc: #0b7a99; --pc2: #08586f; --pcs: #e1f3f9; --pcl: #b9e1ee; }
.pp-tone-blue { --pc: #1d4ed8; --pc2: #1b3ba6; --pcs: #e8efff; --pcl: #c5d5fb; }
.pp-tone-violet { --pc: #5b3fc8; --pc2: #432c9c; --pcs: #efeaff; --pcl: #d6cbf6; }
.pp-tone-amber { --pc: #b45309; --pc2: #8a3f06; --pcs: #fff3e1; --pcl: #f3d9ae; }
.pp-tone-navy { --pc: #2f3d99; --pc2: #1f2a73; --pcs: #e8ebfb; --pcl: #c8cef0; }
.pp-sec { position: relative; padding-block: clamp(52px, 6vw, 88px); }
.pp-sec .eyebrow { color: var(--pc); }
.pp-head { max-width: 780px; margin: 0 0 clamp(26px, 3vw, 40px); }
.pp-head h2 { margin-top: 12px; }
.pp-list-title { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.pp-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--pcs); color: var(--pc); margin-bottom: 14px; transition: background .3s, color .3s, transform .3s var(--ease); }
.pp-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-ic-solid { background: var(--pc); color: #fff; }
.pp-ck { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pcs); color: var(--pc); }
.pp-ck svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-ck-lg { width: 38px; height: 38px; margin-bottom: 14px; background: var(--pc); color: #fff; }
.pp-ck-lg svg { width: 19px; height: 19px; }

/* hero (new pages): tint follows the product */
.pp-hero.hh::before { background: linear-gradient(180deg, var(--pcs) 0%, #fff 100%); }
.pp-hero.hh .eyebrow { color: var(--pc); }
.pp-hero.hh .chips .chip i { background: var(--pc); }
.pp-sub2 { margin-top: 12px; max-width: 640px; font-size: 16.5px; line-height: 1.6; color: var(--ink-700); }
@media (min-width: 1100px) { .pp-hero.hh h1 { font-size: clamp(32px, 2.9vw, 44px); } .pp-hero .chips { margin-top: 20px; } .pp-hero .hero-ctas { margin-top: 26px; } }

/* intro (existing pages): the spec's positioning statement */
.pp-intro { background: linear-gradient(180deg, #fff 0%, var(--pcs) 100%); }
.pp-intro-wrap { max-width: 920px; text-align: center; }
.pp-intro h2 { margin-top: 12px; }
.pp-intro .lede { margin: 16px auto 0; }
.pp-intro .chips { justify-content: center; margin-top: 24px; }
.pp-intro .chip i { background: var(--pc); }

/* 1 · challenges */
.pp-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pp-lead h2 { margin-top: 12px; }
.pp-quote { margin: 26px 0 0; padding: 22px 24px 22px 26px; border-radius: 20px; border-left: 4px solid var(--pc); background: linear-gradient(135deg, var(--pcs), #fff); }
.pp-quote p { margin: 0; font-size: 17.5px; line-height: 1.6; font-weight: 500; color: var(--ink-800); }
.pp-pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-pains li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-sm); font-size: 15px; line-height: 1.45; color: var(--ink-800); }
.pp-pains li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pp-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fdecec; color: #d64545; }
.pp-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

/* 2 · platform chain */
.pp-platform { background: linear-gradient(180deg, #fff 0%, var(--pcs) 100%); }
.pp-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 14px; }
.pp-chain li { position: relative; margin-right: 40px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 999px; background: #fff; font-weight: 600; font-size: 15.5px; color: var(--ink-900);
  box-shadow: 0 0 0 1px var(--pcl), 0 8px 18px -14px rgba(18, 48, 95, .5); transition: background .35s, color .35s, transform .35s var(--ease), box-shadow .35s; }
.pp-chain li:last-child { margin-right: 0; }
.pp-chain li:not(:last-child)::after { content: ""; position: absolute; right: -34px; top: 50%; width: 28px; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, var(--pcl) 0 5px, transparent 5px 9px); }
.pp-chain li:not(:last-child)::before { content: ""; position: absolute; right: -35px; top: 50%; width: 8px; height: 8px; border-top: 2px solid var(--pc); border-right: 2px solid var(--pc); transform: translateY(-50%) rotate(45deg); }
.pp-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pcs); color: var(--pc); font-size: 13px; font-weight: 700; transition: background .35s, color .35s; }
.pp-chain li.on, .pp-chain li:hover { background: var(--pc); color: #fff; transform: translateY(-3px); box-shadow: 0 16px 30px -16px var(--pc); }
.pp-chain li.on .pp-n, .pp-chain li:hover .pp-n { background: rgba(255, 255, 255, .22); color: #fff; }
.pp-support { margin-top: 34px; }
.pp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pp-tags li { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl); font-size: 14px; font-weight: 600; color: var(--ink-700); }

/* 3 · lifecycle steps */
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 30px 14px; }
.pp-cols-3 { --c: 3; } .pp-cols-4 { --c: 4; } .pp-cols-5 { --c: 5; } .pp-cols-6 { --c: 6; }
.pp-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; text-align: center; padding: 0 6px; }
.pp-sn { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--pc); font-weight: 800; font-size: 16px;
  box-shadow: 0 0 0 2px var(--pcl), 0 10px 20px -12px rgba(18, 48, 95, .5); transition: background .35s, color .35s, transform .35s var(--ease), box-shadow .35s; }
.pp-steps li b { font-size: 15px; line-height: 1.35; color: var(--ink-900); font-weight: 600; max-width: 150px; }
.pp-steps li::before { content: ""; position: absolute; top: 26px; left: calc(50% + 32px); right: calc(-50% + 32px); height: 2px; background: repeating-linear-gradient(90deg, var(--pcl) 0 6px, transparent 6px 11px); }
.pp-steps li:last-child::before, .pp-cols-3 li:nth-child(3n)::before, .pp-cols-4 li:nth-child(4n)::before, .pp-cols-5 li:nth-child(5n)::before { display: none; }
.pp-steps li.on .pp-sn, .pp-steps li:hover .pp-sn { background: var(--pc); color: #fff; transform: scale(1.1); box-shadow: 0 0 0 4px var(--pcs), 0 16px 28px -14px var(--pc); }

/* 4 · capability cards, 11 · why cards */
.pp-cards { display: grid; gap: 18px; }
.pp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-card { padding: 26px 26px 28px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s; }
.pp-card h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.pp-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-500); }
.pp-card:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px var(--pcl), 0 26px 44px -26px rgba(18, 48, 95, .45); }
.pp-card:hover .pp-ic { background: var(--pc); color: #fff; }
.pp-cards-why .pp-card { background: linear-gradient(180deg, #fff 0%, var(--pcs) 130%); }
.pp-caps { background: #fff; }

/* 5 · tiles */
.pp-fit { background: var(--pcs); }
.pp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pp-tile { position: relative; overflow: hidden; padding: 26px 26px 28px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -30px rgba(18, 48, 95, .5); transition: transform .35s var(--ease); }
.pp-tile::after { content: ""; position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; background: var(--pcs); transition: transform .5s var(--ease); }
.pp-tile > * { position: relative; z-index: 1; }
.pp-tile h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
.pp-tile p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-500); }
.pp-tile:hover { transform: translateY(-4px); }
.pp-tile:hover::after { transform: scale(1.5); }

/* 6 · evidence path band */
.pp-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 32px; color: #dbe4f3; overflow: hidden;
  background: radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--pc) 60%, transparent), transparent 70%), linear-gradient(160deg, var(--pc2) 0%, #0b1428 100%); box-shadow: 0 40px 80px -44px rgba(8, 18, 45, .8); }
.pp-band .eyebrow { color: #bcd2f5; }
.pp-band h2 { margin-top: 12px; color: #fff; }
.pp-band p { margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: #cfd9ec; }
.pp-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-path li { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 14px; font-weight: 600; font-size: 15.5px; color: #fff;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .35s, transform .35s var(--ease), color .35s; }
.pp-path li:not(:last-child)::after { content: ""; position: absolute; left: 29px; bottom: -10px; width: 2px; height: 10px; background: rgba(255, 255, 255, .35); }
.pp-path .pp-n { background: rgba(255, 255, 255, .16); color: #fff; }
.pp-path li.on, .pp-path li:hover { background: #fff; color: var(--pc2); transform: translateX(6px); }
.pp-path li.on .pp-n, .pp-path li:hover .pp-n { background: var(--pc); color: #fff; }

/* 7 · dashboard tiles */
.pp-live-sec { background: var(--surface); }
.pp-dash { border-radius: 26px; background: #fff; overflow: hidden; box-shadow: var(--shadow-lg), 0 0 0 1px var(--line-soft); }
.pp-dash-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--pcs); }
.pp-dash-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; } .pp-dash-bar i:nth-child(2) { background: #ffc14d; } .pp-dash-bar i:nth-child(3) { background: #4cd697; }
.pp-dash-bar span { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.pp-dash-grid { display: grid; gap: 1px; background: var(--line-soft); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-dc-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-dc-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-dtile { background: #fff; padding: 24px 24px 26px; }
.pp-dtile h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.pp-dtile p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-500); }
.pp-spark { display: flex; align-items: flex-end; gap: 6px; height: 52px; margin-bottom: 16px; }
.pp-spark i { flex: 1; max-width: 14px; height: var(--h, 50%); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #fff)); transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .js .pp-dash.reveal:not(.in) .pp-spark i { transform: scaleY(.15); opacity: .4; }
  .pp-dash.in .pp-spark i { transition: transform .9s var(--ease), opacity .6s; transition-delay: calc(var(--k, 0) * 70ms); }
  .pp-spark i:nth-child(2) { --k: 1; } .pp-spark i:nth-child(3) { --k: 2; } .pp-spark i:nth-child(4) { --k: 3; } .pp-spark i:nth-child(5) { --k: 4; } .pp-spark i:nth-child(6) { --k: 5; } .pp-spark i:nth-child(7) { --k: 6; }
}

/* 8 · standardization checklist */
.pp-feat { background: #fff; }
.pp-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pp-checks li { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--pcs); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ink-900);
  transition: transform .3s var(--ease), box-shadow .3s, background .3s; }
.pp-checks li .pp-ck { background: #fff; }
.pp-checks li:hover { transform: translateY(-3px); background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 18px 30px -20px rgba(18, 48, 95, .5); }

/* 9 · insights dashboard */
.pp-intel { background: linear-gradient(180deg, var(--pcs) 0%, #fff 100%); }
.pp-insights { border-radius: 28px; padding: clamp(18px, 2.4vw, 28px); color: #dbe4f3; background: radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--pc) 45%, transparent), transparent 70%), linear-gradient(160deg, #13203d 0%, #0b1428 100%); box-shadow: 0 40px 80px -44px rgba(8, 18, 45, .8); }
.pp-ins-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 4px 16px; font-size: 13px; }
.pp-ins-head .pp-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.pp-ins-head .pp-live i { width: 8px; height: 8px; border-radius: 50%; background: #4cd697; box-shadow: 0 0 0 4px rgba(76, 214, 151, .2); }
.pp-ins-note { color: #8fa3c0; }
.pp-ins-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pp-ins-list li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: #e8eefa;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); transition: background .35s, transform .35s var(--ease); }
.pp-ins-ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: color-mix(in srgb, var(--pc) 40%, #fff); transition: background .35s, color .35s; }
.pp-ins-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-ins-list li.on, .pp-ins-list li:hover { background: rgba(255, 255, 255, .15); transform: translateY(-2px); }
.pp-ins-list li.on .pp-ins-ic, .pp-ins-list li:hover .pp-ins-ic { background: var(--pc); color: #fff; }

/* 10 · ecosystem */
.pp-eco-card { padding: clamp(28px, 4vw, 56px); border-radius: 32px; text-align: center; color: #cdd8ea;
  background: radial-gradient(60% 70% at 50% 0%, color-mix(in srgb, var(--pc) 40%, transparent), transparent 75%), linear-gradient(160deg, #101c3a 0%, #0b1428 100%); box-shadow: 0 40px 80px -44px rgba(8, 18, 45, .85); }
.pp-eco-card .eyebrow { color: #bcd2f5; }
.pp-eco-card h2 { margin: 12px auto 0; max-width: 820px; color: #fff; }
.pp-eco-chain { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 14px; }
.pp-eco-chain li { position: relative; margin-right: 34px; }
.pp-eco-chain li:last-child { margin-right: 0; }
.pp-eco-chain li > a, .pp-eco-chain li > span { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; font-weight: 600; font-size: 15.5px; color: #fff !important; text-decoration: none !important;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .35s, transform .35s var(--ease), box-shadow .35s; }
.pp-eco-chain li:not(:last-child)::after { content: ""; position: absolute; right: -25px; top: 50%; width: 8px; height: 8px; border-top: 2px solid rgba(255, 255, 255, .5); border-right: 2px solid rgba(255, 255, 255, .5); transform: translateY(-50%) rotate(45deg); }
.pp-eco-chain li.is-self > span { background: var(--pc); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 16px 30px -14px var(--pc); }
.pp-eco-chain li.on > a, .pp-eco-chain li.on > span, .pp-eco-chain li > a:hover { background: rgba(255, 255, 255, .22); transform: translateY(-3px); }
.pp-eco-chain li.is-self.on > span { background: var(--pc); }
.pp-eco-text { margin: 30px auto 0; max-width: 820px; font-size: 17px; line-height: 1.7; color: #cfd9ec; }

/* closing statement (existing pages) and final call to action (new pages) */
.pp-closing { background: linear-gradient(180deg, #fff, var(--pcs)); }
.pp-closing-wrap { max-width: 860px; text-align: center; }
.pp-closing .lede { margin: 16px auto 0; max-width: 760px; }
.pp-cta { background: linear-gradient(135deg, var(--pcs) 0%, #e0f2fe 100%); }
.pp-cta::after { background: color-mix(in srgb, var(--pc) 10%, transparent); }

@media (max-width: 1100px) {
  .pp-checks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-ins-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-dash-grid:not(.pp-dc-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pp-split, .pp-band { grid-template-columns: minmax(0, 1fr); }
  .pp-cards-3, .pp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-steps { --c: 3 !important; }
  .pp-steps li::before { display: none !important; }
  .pp-chain li { margin-right: 0; }
  .pp-chain li::after, .pp-chain li::before { display: none !important; }
  .pp-chain { gap: 10px; }
}
@media (max-width: 760px) {
  .pp-sec { padding-block: 44px; }
  .pp-cards-3, .pp-tiles, .pp-pains, .pp-checks, .pp-ins-list { grid-template-columns: minmax(0, 1fr) !important; }
  .pp-pains li:last-child:nth-child(odd) { grid-column: auto; }
  .pp-steps { --c: 2 !important; gap: 22px 10px; }
  .pp-dash-grid, .pp-dash-grid:not(.pp-dc-2) { grid-template-columns: minmax(0, 1fr) !important; }
  .pp-eco-chain { flex-direction: column; row-gap: 12px; }
  .pp-eco-chain li { margin-right: 0; }
  .pp-eco-chain li:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -11px; transform: translateX(-50%) rotate(135deg); }
  .pp-card, .pp-tile { padding: 22px; }
  .pp-band, .pp-eco-card { border-radius: 24px; }
  .pp-path li:hover, .pp-path li.on { transform: none; }
}
/* products menu: nine entries, laid out in two columns on desktop */
@media (min-width: 981px) {
  .mega.mega--wide { width: min(900px, 94vw); grid-template-columns: 1.75fr 1fr; }
  .mega--wide .mega-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; }
}
/* long product heroes: tighter text so the buttons stay on the first screen */
@media (min-width: 1100px) {
  .pp-hero.hh h1 { font-size: clamp(30px, 2.6vw, 40px); }
  .pp-hero .lede { font-size: 16px; line-height: 1.55; margin-top: 12px; }
  .pp-sub2 { font-size: 15px; line-height: 1.55; margin-top: 8px; }
  .pp-hero .chips { gap: 6px; margin-top: 16px; }
  .pp-hero .chip { font-size: 12.5px; padding: 5px 10px; }
  .pp-hero .hero-ctas { margin-top: 20px; }
}

/* chains laid out as even grids: no arrow dangling at the end of a wrapped row */
.pp-chain[class*="pp-cols-"] { display: grid; grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 16px 44px; align-items: stretch; }
.pp-chain[class*="pp-cols-"] li { margin-right: 0; border-radius: 18px; padding: 10px 16px 10px 10px; }
.pp-chain[class*="pp-cols-"] li:not(:last-child)::after { right: -38px; width: 30px; }
.pp-chain[class*="pp-cols-"] li:not(:last-child)::before { right: -39px; }
.pp-chain.pp-cols-3 li:nth-child(3n)::after, .pp-chain.pp-cols-3 li:nth-child(3n)::before,
.pp-chain.pp-cols-4 li:nth-child(4n)::after, .pp-chain.pp-cols-4 li:nth-child(4n)::before,
.pp-chain.pp-cols-5 li:nth-child(5n)::after, .pp-chain.pp-cols-5 li:nth-child(5n)::before { display: none; }
.pp-eco-chain[class*="pp-cols-"] { display: grid; grid-template-columns: repeat(var(--c, 4), minmax(0, 1fr)); gap: 16px 36px; justify-items: stretch; }
.pp-eco-chain[class*="pp-cols-"] li { margin-right: 0; }
.pp-eco-chain[class*="pp-cols-"] li > a, .pp-eco-chain[class*="pp-cols-"] li > span { display: flex; justify-content: center; text-align: center; }
.pp-eco-chain.pp-cols-4 li:nth-child(4n)::after, .pp-eco-chain.pp-cols-5 li:nth-child(5n)::after, .pp-eco-chain.pp-cols-3 li:nth-child(3n)::after { display: none; }
@media (max-width: 980px) {
  .pp-chain[class*="pp-cols-"] { --c: 2; gap: 12px; }
  .pp-chain[class*="pp-cols-"] li::after, .pp-chain[class*="pp-cols-"] li::before { display: none !important; }
  .pp-eco-chain[class*="pp-cols-"] { --c: 2; }
  .pp-eco-chain[class*="pp-cols-"] li::after { display: none; }
}
@media (max-width: 560px) {
  .pp-chain[class*="pp-cols-"], .pp-eco-chain[class*="pp-cols-"] { --c: 1; }
}

/* brochure pages: DigiScanner, fluENcy, EPA tracking */
.pp-tone-rose { --pc: #be185d; --pc2: #9d174d; --pcs: #fdecf3; --pcl: #f6c6da; }
.pp-lede { margin: 0 0 26px; max-width: 760px; font-size: 18px; line-height: 1.65; color: var(--ink-700); }
.pp-note { margin: 22px 0 0; max-width: 820px; font-size: 14px; line-height: 1.6; color: var(--ink-500); }
.pp-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-tags-lg li { padding: 11px 20px; font-size: 15.5px; }
.pp-cefr { margin-top: 12px; }
.pp-card-list .pp-tags { margin: 14px 0 0; }
.pp-card-foot { margin-top: 14px !important; font-size: 14px !important; font-weight: 600; color: var(--pc) !important; }
.pp-steps-d li p { margin: 0; max-width: 170px; font-size: 13.5px; line-height: 1.5; color: var(--ink-500); }
.pp-steps-d li b { max-width: 170px; }
/* before/after figures */
.pp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pp-stat { padding: 24px 22px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 20px 40px -30px rgba(18, 48, 95, .5); }
.pp-stat small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.pp-stat-vs { display: flex; align-items: center; gap: 10px; margin: 14px 0 12px; flex-wrap: wrap; }
.pp-stat-vs s { font-size: 20px; font-weight: 600; color: var(--ink-400, #8b96ab); text-decoration-thickness: 2px; }
.pp-stat-vs svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--pc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-stat-vs b { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--pc); letter-spacing: -.01em; }
.pp-stat p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-500); }
/* comparison table */
.pp-table { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 20px 40px -30px rgba(18, 48, 95, .45); }
.pp-tr { display: grid; grid-template-columns: 1.1fr 1.5fr 1.5fr; }
.pp-tr + .pp-tr { border-top: 1px solid var(--line-soft); }
.pp-tr > * { padding: 16px 22px; font-size: 15.5px; line-height: 1.5; }
.pp-th { background: var(--pcs); }
.pp-th > * { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.pp-tr b { color: var(--ink-900); font-weight: 600; }
.pp-bad { color: var(--ink-500); }
.pp-good { color: var(--ink-900); font-weight: 600; background: linear-gradient(90deg, var(--pcs), transparent 140%); }
.pp-tag { display: none; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); margin-bottom: 2px; }
/* institutional voices */
.pp-voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pp-voice { margin: 0; padding: 28px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 22px 44px -32px rgba(18, 48, 95, .5); display: flex; flex-direction: column; gap: 14px; }
.pp-voice small { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.pp-voice blockquote { margin: 0; }
.pp-voice p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-800); }
.pp-voice figcaption { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--ink-500); }
/* fluENcy hero visual */
.pp-skillviz { padding: 22px; border-radius: 26px; background: linear-gradient(160deg, #fff, var(--pcs)); box-shadow: inset 0 0 0 1px var(--pcl), 0 34px 60px -34px rgba(18, 48, 95, .55); }
.pp-sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pp-sv-grid span { display: flex; align-items: center; gap: 10px; padding: 26px 18px; border-radius: 18px; background: #fff; font-weight: 700; font-size: 18px; color: var(--ink-900); box-shadow: 0 0 0 1px var(--pcl), 0 14px 26px -20px var(--pc); }
.pp-sv-grid i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 5px var(--pcs); }
.pp-sv-cefr { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: var(--pc); color: #fff; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pp-sv-cefr b { font-size: 14px; letter-spacing: .1em; }
.pp-sv-cefr ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.pp-sv-cefr li { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .2); font-size: 13.5px; font-weight: 700; }
@media (max-width: 1100px) { .pp-cards-4, .pp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .pp-cards-4, .pp-stats, .pp-voice-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .pp-tr { grid-template-columns: 1fr; }
  .pp-th { display: none; }
  .pp-tr > * { padding: 10px 18px; }
  .pp-tr b { padding-top: 16px; }
  .pp-tr .pp-tag { display: block; }
  .pp-stat-vs b { font-size: 25px; }
  .pp-voice { padding: 22px; }
}

/* partner page */
.pp-partner-hero { padding-bottom: clamp(36px, 5vw, 64px); }
.pp-partner-grid { align-items: start; margin-top: 12px; }
.pp-partner-hero h1 { font-size: clamp(30px, 3.4vw, 46px); }
.pp-form-sub { margin: -8px 0 20px; font-size: 15px; line-height: 1.55; color: var(--ink-500); }
.pp-login { position: relative; display: inline-block; margin-bottom: 18px; }
.pp-login summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--pc); box-shadow: inset 0 0 0 1px var(--pcl); }
.pp-login summary::-webkit-details-marker { display: none; }
.pp-login summary:hover, .pp-login[open] summary { background: var(--pcs); }
.pp-login summary:focus-visible { outline: 2px solid var(--pc); outline-offset: 2px; }
.pp-login summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.pp-login[open] summary svg { transform: rotate(180deg); }
.pp-login ul { position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); min-width: 250px; margin: 0; padding: 8px; list-style: none; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px -20px rgba(18, 48, 95, .45), inset 0 0 0 1px var(--line-soft); }
.pp-login li a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink-800); text-decoration: none; }
.pp-login li a:hover, .pp-login li a:focus-visible { background: var(--pcs); color: var(--pc); }
.pp-note-top { margin: -8px 0 26px; }
.pp-tiles-life { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 28px; gap: 14px; }
.pp-tiles-life .pp-tile { padding: 22px 20px; }
.pp-tiles-life .pp-tile h3 { font-size: 17px; }
.pp-tiles-life .pp-tile p { font-size: 14.5px; }
.pp-market { display: flex; flex-direction: column; }
.pp-market p { flex: 1; margin-bottom: 14px !important; }
.pp-mk-tag { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
@media (max-width: 1100px) { .pp-tiles-life { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pp-tiles-life { grid-template-columns: minmax(0, 1fr) !important; } .pp-login ul { min-width: 220px; } }

/* =====================================================================================================
   Motion + data visualisation layer (explore pages). Motion lives behind `no-preference`; without it every
   figure, chart and list simply shows its final state. JS side: assets/js/pp-motion.js
   ===================================================================================================== */
.pp-progress { position: fixed; left: 0; top: 0; z-index: 95; width: 100%; height: 3px; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; background: linear-gradient(90deg, var(--pc, #1d4ed8), var(--pc2, #4b45d8)); box-shadow: 0 0 10px var(--pc, #1d4ed8); }
.pp-sec { isolation: isolate; overflow-x: clip; }
.pp-sec::before { content: ""; position: absolute; z-index: -1; right: -8%; top: 6%; width: min(46vw, 520px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pc) 9%, transparent), transparent 68%); translate: 0 calc((var(--p, .5) - .5) * -90px); }
.pp-sec:nth-of-type(even)::before { right: auto; left: -10%; top: 30%; }

/* ---------- hero: drifting aurora, headline by word, pointer parallax ---------- */
.pp-hero { position: relative; isolation: isolate; overflow-x: clip; }
.pp-aurora { position: absolute; z-index: -1; inset: -18% -8% -10%; pointer-events: none; filter: blur(14px); opacity: .9;
  background: radial-gradient(38% 46% at 16% 30%, color-mix(in srgb, var(--pc) 17%, transparent), transparent 72%), radial-gradient(34% 44% at 84% 22%, color-mix(in srgb, var(--pc2) 15%, transparent), transparent 72%), radial-gradient(30% 38% at 62% 96%, color-mix(in srgb, var(--pc) 11%, transparent), transparent 72%); }
.pp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.pp-w > i { display: inline-block; font-style: normal; }
.pp-hero .hh-visual img, .pp-skillviz, .pp-hero .demo-card { translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -7px); transition: translate .5s var(--ease); }
.pp-aurora { translate: calc(var(--px, 0) * 14px) calc(var(--py, 0) * 10px); }
@keyframes ppw { from { transform: translateY(108%) rotate(3deg); } to { transform: none; } }
@keyframes ppdrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.08); } }
@keyframes pppop { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes pppopb { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
@keyframes ppsheen { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes pppulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pc) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes ppdash { to { stroke-dashoffset: -28; } }
@keyframes pppulsering { 0% { r: 9; opacity: .6; } 100% { r: 24; opacity: 0; } }
@keyframes ppwave { 0%, 100% { filter: none; } 50% { filter: brightness(1.18) saturate(1.2); } }
@keyframes ppstair { from { transform: scaleY(0); } }
@keyframes ppline { from { transform: scaleX(0); } }
@keyframes ppfill { from { transform: scaleX(0); } }
@keyframes pphalo { from { r: 40; opacity: .3; } to { r: 74; opacity: 0; } }
@keyframes ppcefr { 0%, 28%, 100% { opacity: .55; background: rgba(255, 255, 255, .2); } 6%, 16% { opacity: 1; background: rgba(255, 255, 255, .5); } }

/* ---------- section headings: an accent draws in ---------- */
.pp-head h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 16px; border-radius: 4px; background: linear-gradient(90deg, var(--pc), var(--pc2)); transform-origin: 0 50%; }

/* ---------- pointer light on cards ---------- */
.pp-card, .pp-tile, .pp-stat, .pp-voice, .pp-dtile, .pp-save, .pp-race, .pp-hm { position: relative; }
.pp-card::after, .pp-stat::after, .pp-voice::after, .pp-save::after, .pp-race::after, .pp-hm::after, .pp-dtile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pc) 13%, transparent), transparent 70%); }
.pp-card:hover::after, .pp-stat:hover::after, .pp-voice:hover::after, .pp-save:hover::after, .pp-race:hover::after, .pp-hm:hover::after, .pp-dtile:hover::after { opacity: 1; }
.pp-tile:hover { box-shadow: 0 26px 46px -30px color-mix(in srgb, var(--pc) 60%, transparent); }

/* ---------- call to action ---------- */
.pp-cta { position: relative; overflow: hidden; isolation: isolate; }
.pp-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%); transform: translateX(-130%); }

/* ---------- charts inside the dashboard tiles ---------- */
.pp-spark > svg, .pp-spark > .pp-gauge, .pp-spark > .pp-prog { width: 100%; height: 100%; }
.pp-line { overflow: visible; }
.pp-line .pp-area { fill: color-mix(in srgb, var(--pc) 14%, transparent); stroke: none; }
.pp-line .pp-stroke { fill: none; stroke: var(--pc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.pp-line .pp-dot { fill: #fff; stroke: var(--pc); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.pp-gauge { position: relative; display: grid; place-items: center; width: 52px !important; }
.pp-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pp-gauge circle { fill: none; stroke-width: 5; }
.pp-gauge .g-bg { stroke: var(--pcs); }
.pp-gauge .g-fg { stroke: var(--pc); stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.pp-gauge b { position: relative; font-size: 12.5px; color: var(--pc); }
.pp-prog { display: grid; align-content: center; gap: 8px; }
.pp-prog span { display: block; height: 9px; border-radius: 9px; background: var(--pcs); overflow: hidden; }
.pp-prog i { display: block; height: 100%; width: var(--w); border-radius: 9px; background: linear-gradient(90deg, var(--pc), color-mix(in srgb, var(--pc) 50%, #fff)); transform-origin: 0 50%; }
.pp-prog span:nth-child(2) i { opacity: .72; --k: 1; } .pp-prog span:nth-child(3) i { opacity: .5; --k: 2; }

/* ---------- figures: before -> after ---------- */
.pp-stat s { text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat 0 56% / 100% 2px; }
.pp-stat-vs b { display: inline-block; }
.pp-cmpbar { display: grid; gap: 6px; margin: 0 0 14px; }
.pp-cmpbar span { display: block; height: 8px; border-radius: 8px; background: var(--pcs); overflow: hidden; }
.pp-cmpbar i { display: block; height: 100%; width: var(--w); border-radius: 8px; transform-origin: 0 50%; }
.pp-cmpbar .o { background: #c9d0de; }
.pp-cmpbar .n { background: linear-gradient(90deg, var(--pc), var(--pc2)); min-width: 6px; }
.pp-save { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: center; margin-top: 18px; padding: clamp(24px, 3.4vw, 40px); border-radius: 26px; background: linear-gradient(135deg, var(--pcs), #fff 70%); box-shadow: inset 0 0 0 1px var(--pcl), 0 24px 48px -34px rgba(18, 48, 95, .5); }
.pp-ring-wrap { position: relative; width: clamp(150px, 16vw, 190px); aspect-ratio: 1; }
.pp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pp-ring circle { fill: none; stroke-width: 9; }
.pp-ring .bg { stroke: #fff; } .pp-ring .fg { stroke: var(--pc); stroke-linecap: round; stroke-dasharray: 92 100; }
.pp-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pp-ring-c b { font-size: clamp(30px, 3.4vw, 40px); line-height: 1; color: var(--pc); font-weight: 800; }
.pp-ring-c small { margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.pp-save-k { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.pp-save h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 10px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; }
.pp-save h3 s { color: var(--ink-400, #8b96ab); text-decoration-thickness: 2px; font-weight: 600; font-size: .7em; }
.pp-save h3 svg { width: .8em; height: .8em; fill: none; stroke: var(--pc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pp-save h3 > span { color: var(--pc); }
.pp-save p { margin: 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: var(--ink-500); }
.pp-save p b { color: var(--ink-900); }

/* ---------- the clock (DigiScanner) ---------- */
.pp-race { display: grid; gap: 22px; padding: clamp(22px, 3vw, 38px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 30px 60px -40px rgba(18, 48, 95, .55); }
.pp-lane-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pp-lane-h > b { font-size: 17px; color: var(--ink-900); }
.pp-clock { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -.01em; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.pp-clock.now { color: var(--pc); }
.pp-track { position: relative; height: 14px; margin: 16px 0 76px; border-radius: 14px; background: var(--pcs); }
.pp-lane.good .pp-track { margin-bottom: 64px; }
.pp-track .fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transform-origin: 0 50%; }
.pp-track .slow { width: 100%; background: repeating-linear-gradient(115deg, #b9c2d3 0 10px, #c9d0de 10px 20px); }
.pp-track .fast { width: 1.6%; min-width: 14px; background: linear-gradient(90deg, var(--pc), var(--pc2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc) 18%, transparent); }
.pp-track u { position: absolute; top: 0; left: var(--x); text-decoration: none; }
.pp-track u em { position: absolute; left: -6px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #b9c2d3; }
.pp-track u span { position: absolute; top: 24px; left: 0; transform: translateX(-12px); width: 150px; font-size: 12.5px; line-height: 1.4; color: var(--ink-500); }
.pp-track u:last-of-type span { transform: translateX(calc(-100% + 12px)); text-align: right; }
.pp-track u.flag em { background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 28%, transparent); left: -3px; }
.pp-track u.flag span { width: 230px; font-weight: 600; color: var(--pc); transform: none; left: -3px; text-align: left; }
.pp-lane-f { margin: 0; font-size: 14.5px; color: var(--ink-500); }

/* ---------- fluENcy: radar, CEFR rail, staircase ---------- */
.pp-skillviz { padding: 18px 18px 20px; }
.pp-radar { display: block; width: 100%; height: auto; max-height: 340px; overflow: visible; }
.pp-radar .r { fill: none; stroke: var(--pcl); stroke-width: 1; }
.pp-radar .ax { stroke: var(--pcl); stroke-width: 1; }
.pp-radar .base { fill: none; stroke: var(--pc); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .55; }
.pp-radar .now { fill: color-mix(in srgb, var(--pc) 24%, transparent); stroke: var(--pc); stroke-width: 2.6; stroke-linejoin: round; }
.pp-radar .dot { fill: #fff; stroke: var(--pc); stroke-width: 3; }
.pp-radar text { font-size: 15px; font-weight: 700; fill: var(--ink-800); }
.pp-sv-key { display: flex; gap: 18px; justify-content: center; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.pp-sv-key i { display: inline-block; width: 18px; height: 0; margin-right: 7px; vertical-align: middle; border-top: 2px dashed var(--pc); opacity: .7; }
.pp-sv-key i.k1 { border-top-style: solid; border-top-width: 4px; opacity: 1; }
.pp-stair { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; height: 300px; }
.pp-stair li { height: var(--h); position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: 16px 14px; border-radius: 18px 18px 8px 8px; transform-origin: 50% 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 10%, #fff), #fff); box-shadow: inset 0 0 0 1px var(--pcl); transition: background .4s, color .4s, box-shadow .4s, translate .4s var(--ease); }
.pp-stair li::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: var(--pc); opacity: .5; }
.pp-stair-b b { display: block; font-size: clamp(20px, 2.4vw, 28px); line-height: 1; color: var(--pc); font-weight: 800; }
.pp-stair-b small { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.pp-stair li.on, .pp-stair li:hover { background: linear-gradient(180deg, var(--pc), var(--pc2)); box-shadow: 0 22px 36px -22px var(--pc); translate: 0 -6px; }
.pp-stair li.on b, .pp-stair li:hover b, .pp-stair li.on small, .pp-stair li:hover small { color: #fff; }
.pp-stair li.on::before, .pp-stair li:hover::before { background: #fff; opacity: .8; }

/* ---------- EPA heatmap ---------- */
.pp-hm { padding: clamp(20px, 3vw, 34px); border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 28px 54px -38px rgba(18, 48, 95, .55); }
.pp-hm-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-500); }
.pp-hm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.pp-hm-legend em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.pp-hm-legend i, .pp-hm-row i { display: block; border-radius: 8px; }
.pp-hm-legend i { width: 14px; height: 14px; }
.pp-hm i.c0 { background: var(--pcs); box-shadow: inset 0 0 0 1px var(--pcl); }
.pp-hm i.c1 { background: color-mix(in srgb, var(--pc) 28%, #fff); }
.pp-hm i.c2 { background: color-mix(in srgb, var(--pc) 62%, #fff); }
.pp-hm i.c3 { background: linear-gradient(135deg, var(--pc), var(--pc2)); }
.pp-hm-grid { display: grid; gap: 8px; }
.pp-hm-row { display: grid; grid-template-columns: 64px repeat(5, minmax(0, 1fr)); gap: 8px; align-items: center; }
.pp-hm-row i { height: clamp(22px, 3vw, 32px); }
.pp-hm-l { font-size: 12.5px; font-weight: 700; color: var(--ink-500); }
.pp-hm-cols b { font-size: 12.5px; text-align: center; color: var(--ink-500); font-weight: 700; }

/* ---------- partner network ---------- */
.pp-hub { margin: 0 0 30px; padding: clamp(12px, 2vw, 26px); border-radius: 28px; background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--pc) 7%, #fff), #fff 80%); box-shadow: inset 0 0 0 1px var(--pcl); }
.pp-hub svg { display: block; width: 100%; height: auto; max-height: 340px; overflow: visible; }
.pp-hub .ln { stroke: var(--pcl); stroke-width: 2; stroke-dasharray: 5 9; transition: stroke .3s, stroke-width .3s; }
.pp-hub .core rect { fill: var(--pc); } .pp-hub .core text { fill: #fff; font-size: 16px; font-weight: 800; }
.pp-hub .halo { fill: none; stroke: var(--pc); stroke-width: 2; opacity: .18; }
.pp-hub .nd .pt { fill: #fff; stroke: var(--pc); stroke-width: 3.5; transition: fill .3s, r .3s; }
.pp-hub .nd .pulse { fill: var(--pc); opacity: 0; }
.pp-hub .nd text { font-size: 14.5px; font-weight: 700; fill: var(--ink-800); transition: fill .3s; }
.pp-hub .nd.hl .pt { fill: var(--pc); r: 11; } .pp-hub .nd.hl text { fill: var(--pc); }
.pp-hub .ln.hl { stroke: var(--pc); stroke-width: 3; }
.pp-hub.has-hl .nd:not(.hl) { opacity: .45; } .pp-hub.has-hl .ln:not(.hl) { opacity: .35; }
.pp-market.hl { box-shadow: 0 0 0 2px var(--pc), 0 26px 46px -30px color-mix(in srgb, var(--pc) 60%, transparent); }

/* ---------- motion (only when the visitor has not asked for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pp-aurora { animation: ppdrift 16s ease-in-out infinite alternate; }
  .pp-w > i { transform: translateY(108%); animation: ppw .85s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
  .pp-head h2::after { transform: scaleX(0); transition: transform .9s var(--ease) .3s; }
  .pp-head h2.in::after { transform: scaleX(1); }
  .js .pp-card.reveal:not(.in), .js .pp-tile.reveal:not(.in), .js .pp-stat.reveal:not(.in), .js .pp-voice.reveal:not(.in), .js .pp-save.reveal:not(.in), .js .pp-race.reveal:not(.in), .js .pp-hm.reveal:not(.in), .js .pp-hub.reveal:not(.in) { transform: translateY(30px) scale(.96); filter: blur(5px); }
  .pp-card.reveal, .pp-tile.reveal, .pp-stat.reveal, .pp-voice.reveal, .pp-save.reveal, .pp-race.reveal, .pp-hm.reveal, .pp-hub.reveal { transition: opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease), box-shadow .35s; transition-delay: var(--d, 0ms); }
  .js .pp-chain.reveal:not(.in) li, .js .pp-steps.reveal:not(.in) li, .js .pp-eco-chain.reveal:not(.in) li { opacity: 0; }
  .pp-chain.in li, .pp-steps.in li, .pp-eco-chain.in li { animation: pppop .65s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  .pp-band.in .pp-path li, .pp-insights.in .pp-ins-list li { animation: pppop .6s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 80ms + 250ms); }
  .pp-steps.in .pp-sn { animation: pppopb .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 250ms); }
  .pp-steps li::before { transform-origin: 0 50%; }
  .pp-steps.in li::before { animation: ppline .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 400ms); }
  .js .pp-dash.reveal:not(.in) .pp-line .pp-stroke { stroke-dashoffset: 1; }
  .js .pp-dash.reveal:not(.in) .pp-line .pp-area, .js .pp-dash.reveal:not(.in) .pp-line .pp-dot { opacity: 0; }
  .pp-dash.in .pp-line .pp-stroke { transition: stroke-dashoffset 1.4s var(--ease) .2s; }
  .pp-dash.in .pp-line .pp-area, .pp-dash.in .pp-line .pp-dot { transition: opacity .8s ease 1.1s; }
  .js .pp-dash.reveal:not(.in) .g-fg { stroke-dasharray: 0 100; } .pp-dash.in .g-fg { transition: stroke-dasharray 1.4s var(--ease) .2s; }
  .js .pp-dash.reveal:not(.in) .pp-prog i { transform: scaleX(0); } .pp-dash.in .pp-prog i { transition: transform 1.1s var(--ease); transition-delay: calc(var(--k, 0) * 120ms + .15s); }
  .js .pp-stat.reveal:not(.in) s { background-size: 0 2px; } .pp-stat.in s { transition: background-size .8s var(--ease) .55s; }
  .js .pp-stat.reveal:not(.in) .pp-cmpbar i { transform: scaleX(0); } .pp-stat.in .pp-cmpbar i { transition: transform 1.3s var(--ease); } .pp-stat.in .pp-cmpbar .n { transition-delay: .45s; }
  .pp-stat.in .pp-stat-vs b { animation: pppopb .75s var(--ease) 1s backwards; }
  .js .pp-save.reveal:not(.in) .pp-ring .fg { stroke-dasharray: 0 100; } .pp-save.in .pp-ring .fg { transition: stroke-dasharray 1.8s var(--ease) .2s; }
  .js .pp-race.reveal:not(.in) .fill { transform: scaleX(0); }
  .pp-race.in .fill.slow { animation: ppfill 3.4s linear .3s backwards; } .pp-race.in .fill.fast { animation: ppfill .5s var(--ease) .3s backwards; }
  .js .pp-race.reveal:not(.in) .pp-track u { opacity: 0; }
  .pp-race.in .pp-track u { animation: pppop .5s var(--ease) backwards; animation-delay: calc(var(--x) * .034s + .3s); }
  .pp-race.in .pp-track u.flag { animation-delay: .9s; }
  .pp-race.in .pp-track u.flag em { animation: pppulse 2.4s 1.4s infinite; }
  .pp-sv-cefr li { opacity: .55; animation: ppcefr 8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 520ms); }
  .js .pp-stair.reveal:not(.in) li { transform: scaleY(0); } .pp-stair.in li { animation: ppstair .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms + .1s); }
  .js .pp-hm.reveal:not(.in) .pp-hm-row i { transform: scale(.2); opacity: 0; }
  .pp-hm.in .pp-hm-row i { transition: transform .6s var(--ease), opacity .5s; transition-delay: var(--d, 0ms); }
  .pp-hm.in .pp-hm-row i.c3 { animation: ppwave 4.6s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) + 1.8s); }
  .pp-hub .ln { animation: ppdash 1.8s linear infinite; }
  .pp-hub .halo { animation: pphalo 3.2s ease-out infinite; } .pp-hub .halo.h2 { animation-delay: 1.6s; }
  .pp-hub .nd .pulse { animation: pppulsering 3s ease-out infinite; animation-delay: calc(var(--i, 0) * .45s); }
  .pp-cta.in::after { animation: ppsheen 6.5s ease-in-out 1.2s infinite; }
  .pp-cta .btn-primary { animation: pppulse 3s ease-out 1.5s infinite; }
}
@media (max-width: 980px) { .pp-save { grid-template-columns: minmax(0, 1fr); justify-items: start; } .pp-stair { height: 260px; } }
@media (max-width: 760px) {
  .pp-sec::before { display: none; }
  .pp-track { margin-bottom: 20px; } .pp-track u span { display: none; } .pp-track u.flag span { display: block; top: 22px; width: 190px; }
  .pp-lane.good .pp-track { margin-bottom: 56px; } 
  .pp-stair { gap: 6px; height: 220px; } .pp-stair li { padding: 12px 6px; } .pp-stair-b small { display: none; }
  .pp-hm-row { grid-template-columns: 44px repeat(5, minmax(0, 1fr)); gap: 5px; } .pp-hm-l, .pp-hm-cols b { font-size: 11px; }
  .pp-hub .nd text { font-size: 17px; } .pp-hub .core text { font-size: 18px; }
}

/* =====================================================================================================
   vx: second-generation information visualisation (replaces the card / numbered-circle / chip sections)
   Behaviour: assets/js/pp-motion.js ([data-cycle], [data-audit], [data-feed], .vx-lit). Everything renders in a
   readable final state without the script and with reduced motion.
   ===================================================================================================== */
.vx-stage { --mt: rgba(255, 255, 255, .22); --ml: #cfd9ec; --mh: #fff; --mb: #0a1226; position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; padding: clamp(24px, 4vw, 56px); color: #dbe4f3;
  background: radial-gradient(90% 100% at 100% 0%, color-mix(in srgb, var(--pc) 50%, transparent), transparent 62%), radial-gradient(60% 80% at 0 100%, color-mix(in srgb, var(--pc2) 45%, transparent), transparent 70%), linear-gradient(160deg, var(--pc2) 0%, #0a1226 100%); box-shadow: 0 44px 90px -50px rgba(8, 18, 45, .85); }
.vx-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent); }
.vx-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.vx-live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: vxlive 2s ease-out infinite; }
.vx-stage .vx-live, .vx-screen .vx-live { color: #bcd2f5; }
@keyframes vxlive { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
@keyframes vxspin { to { transform: rotate(360deg); } }
@keyframes vxdraw { from { stroke-dashoffset: 1; } }
@keyframes vxfade { from { opacity: 0; } }
@keyframes vxprog { to { width: 100%; } }
@keyframes vxswap { from { opacity: 0; transform: translateY(8px); } }

/* ---------- metro ---------- */
.vx-metro { --T: 8s; --mt: var(--pcl); --ml: var(--ink-500); --mh: var(--ink-900); --mb: #fff; list-style: none; margin: 34px 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); min-height: 170px; }
.pp-band .vx-metro { --mt: rgba(255, 255, 255, .25); --ml: #cfd9ec; --mh: #fff; --mb: #0a1226; }
.vx-metro::before { content: ""; position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: calc(50% - 1.5px); height: 3px; border-radius: 3px; background: var(--mt); }
.vx-metro::after { content: ""; position: absolute; top: calc(50% - 5px); left: calc(50% / var(--n)); width: 110px; height: 10px; border-radius: 10px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--pc)); box-shadow: 0 0 18px var(--pc); }
.vx-metro li { position: relative; }
.vx-metro .st { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 4px; background: var(--mb); border: 3px solid var(--pc); transform: rotate(45deg); }
.vx-metro .lb { position: absolute; left: 50%; width: 180%; transform: translateX(-50%); text-align: center; font-size: 15.5px; line-height: 1.35; font-weight: 600; color: var(--ml); }
.vx-metro li:nth-child(odd) .lb { bottom: calc(50% + 24px); } .vx-metro li:nth-child(even) .lb { top: calc(50% + 24px); }
.vx-metro li:hover .lb { color: var(--mh); }
.vx-metro li:hover .st { background: var(--pc); }
@media (prefers-reduced-motion: no-preference) {
  .vx-metro::after { animation: vxrun var(--T) linear infinite; }
  .vx-metro .st { animation: vxst var(--T) ease-out infinite; animation-delay: calc(var(--i) / (var(--n) - 1) * var(--T) - .25s); }
  .vx-metro .lb { animation: vxlb var(--T) ease-out infinite; animation-delay: calc(var(--i) / (var(--n) - 1) * var(--T) - .25s); }
  @keyframes vxrun { from { left: calc(50% / var(--n) - 40px); opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } to { left: calc(100% - 50% / var(--n) - 70px); opacity: 0; } }
  @keyframes vxst { 0%, 14%, 100% { background: var(--mb); transform: rotate(45deg) scale(1); box-shadow: none; } 3%, 9% { background: var(--pc); transform: rotate(45deg) scale(1.55); box-shadow: 0 0 0 9px color-mix(in srgb, var(--pc) 24%, transparent); } }
  @keyframes vxlb { 0%, 14%, 100% { color: var(--ml); } 3%, 9% { color: var(--mh); } }
  .js .vx-metro.reveal:not(.in) li { opacity: 0; } .vx-metro.in li { animation-name: vxpopm; }
}
@keyframes vxpopm { from { opacity: 0; transform: translateY(10px); } }
.vx-metro--v { grid-template-columns: 1fr; grid-auto-rows: 58px; min-height: 0; margin: 0; padding-left: 38px; }
.vx-metro--v::before { left: 7px; right: auto; top: 29px; bottom: 29px; width: 3px; height: auto; }
.vx-metro--v::after { left: 5px; top: 29px; width: 7px; height: 90px; background: linear-gradient(180deg, transparent, var(--pc)); }
.vx-metro--v .st { left: -31px; top: 50%; }
.vx-metro--v li { display: flex; align-items: center; }
.vx-metro--v .lb { position: static; transform: none; width: auto; text-align: left; font-size: 16.5px; }
@media (prefers-reduced-motion: no-preference) { .vx-metro--v::after { animation: vxrunv var(--T) linear infinite; } @keyframes vxrunv { from { top: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } to { top: calc(100% - 90px - 0px); opacity: 0; } } }
@media (max-width: 860px) {
  .vx-metro { grid-template-columns: 1fr; grid-auto-rows: 58px; min-height: 0; margin-top: 22px; padding-left: 38px; }
  .vx-metro::before { left: 7px; right: auto; top: 29px; bottom: 29px; width: 3px; height: auto; }
  .vx-metro::after { left: 5px; top: 29px; width: 7px; height: 90px; background: linear-gradient(180deg, transparent, var(--pc)); animation-name: vxrunv; }
  .vx-metro .st { left: -31px; top: 50%; }
  .vx-metro li { display: flex; align-items: center; }
  .vx-metro .lb, .vx-metro li:nth-child(odd) .lb, .vx-metro li:nth-child(even) .lb { position: static; transform: none; width: auto; text-align: left; }
}

/* ---------- ticker ---------- */
.vx-ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.vx-ticker-in { display: flex; width: max-content; }
.vx-ticker-row { display: flex; flex: none; align-items: center; }
.vx-ticker-row span { display: inline-flex; align-items: center; white-space: nowrap; padding-right: 30px; font-size: clamp(28px, 4.6vw, 58px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pc) 75%, #fff); }
.vx-ticker-row span:nth-child(even) { color: var(--ink-900); -webkit-text-stroke: 0; }
.vx-ticker-row span::after { content: ""; flex: none; width: 12px; height: 12px; margin-left: 30px; border-radius: 3px; background: var(--pc); transform: rotate(45deg); }
.vx-band-wrap { margin-top: clamp(26px, 4vw, 48px); }
.vx-supports { margin-top: 38px; }
.vx-supports .vx-ticker-row span { font-size: clamp(18px, 2.3vw, 28px); }
.vx-supports .vx-ticker-row span::after { width: 8px; height: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .vx-ticker-in { animation: vxtick 46s linear infinite; } .vx-ticker--rev .vx-ticker-in { animation-direction: reverse; } .vx-supports .vx-ticker-in { animation-duration: 60s; }
  .vx-ticker:hover .vx-ticker-in { animation-play-state: paused; }
  @keyframes vxtick { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .vx-ticker-in { width: auto; flex-wrap: wrap; } .vx-ticker-row + .vx-ticker-row { display: none; } .vx-ticker-row { flex-wrap: wrap; row-gap: 6px; } }

/* ---------- friction ---------- */
.vx-friction { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.vx-friction li { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line-soft); font-size: 17px; line-height: 1.45; font-weight: 500; color: var(--ink-800); transition: padding .35s var(--ease); }
.vx-friction li:hover { padding-left: 14px; }
.vx-brk { position: relative; display: flex; justify-content: space-between; align-items: center; height: 20px; width: 62px; }
.vx-brk b { width: 18px; height: 18px; border-radius: 6px; border: 2px solid #e0556b; background: #fff; transition: border-color .3s; }
.vx-brk::before { content: ""; position: absolute; left: 20px; right: 20px; top: 50%; border-top: 2px dashed #e0556b; opacity: .55; transition: opacity .3s; }
.vx-brk::after { content: "×"; position: absolute; left: 50%; top: 50%; translate: -50% -56%; font-size: 17px; font-weight: 800; line-height: 1; color: #e0556b; transition: opacity .25s; }
.vx-friction li:hover .vx-brk b { border-color: var(--pc); } .vx-friction li:hover .vx-brk::before { border-top-style: solid; border-color: var(--pc); opacity: 1; } .vx-friction li:hover .vx-brk::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .vx-brk::before { animation: vxflick 3.2s steps(1) infinite; animation-delay: calc(var(--d, 0ms) * 4); }
  .vx-brk::after { animation: vxspark 3.2s ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * 4); }
  @keyframes vxflick { 0%, 100% { opacity: .5; } 38% { opacity: .12; } 44% { opacity: .7; } 70% { opacity: .2; } 74% { opacity: .6; } }
  @keyframes vxspark { 0%, 100% { scale: 1; } 40% { scale: 1.35; } 50% { scale: .8; } }
}

/* ---------- ring ---------- */
.vx-ringwrap { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.vx-ring { position: relative; width: 100%; aspect-ratio: 1; }
.vx-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vx-ring .trk { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 2; }
.vx-ring .trk.in { stroke: rgba(255, 255, 255, .09); stroke-dasharray: 3 9; }
.vx-ring .arc { fill: none; stroke: color-mix(in srgb, var(--pc) 35%, #fff); stroke-width: 4; stroke-linecap: round; transform-origin: 200px 200px; transform: rotate(-90deg); stroke-dasharray: calc(var(--p, .1) * 100) 100; transition: stroke-dasharray .9s var(--ease); }
.vx-ring .sweep { transform-origin: 200px 200px; } .vx-ring .sweep path { fill: rgba(255, 255, 255, .05); }
.vx-ring .dt { cursor: pointer; }
.vx-ring .dt .pt { fill: #0a1226; stroke: rgba(255, 255, 255, .55); stroke-width: 2.5; transition: fill .4s, stroke .4s; }
.vx-ring .dt .halo { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .5s, transform .6s var(--ease); }
.vx-ring .dt.is-past .pt { stroke: color-mix(in srgb, var(--pc) 40%, #fff); fill: color-mix(in srgb, var(--pc) 60%, #0a1226); }
.vx-ring .dt.is-on .pt { fill: #fff; stroke: color-mix(in srgb, var(--pc) 60%, #fff); }
.vx-ring .dt.is-on .halo { opacity: .2; transform: scale(1.25); }
.vx-ring-c { position: absolute; inset: 23%; display: grid; place-content: center; gap: 10px; text-align: center; }
.vx-ring-c small { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #bcd2f5; }
.vx-ring-c small b { color: #fff; font-variant-numeric: tabular-nums; }
.vx-ring-c strong { font-size: clamp(20px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.vx-ring-c p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #cfd9ec; }
.vx-ring-c .swap { animation: vxswap .5s var(--ease); }
.vx-ring-list { list-style: none; margin: 0; padding: 0; }
.vx-ring-list li { position: relative; padding: 13px 0 13px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 17px; font-weight: 600; color: rgba(219, 228, 243, .55); cursor: pointer; transition: color .35s, padding .35s var(--ease); }
.vx-ring-list li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 2px; background: rgba(255, 255, 255, .4); transition: width .4s var(--ease), background .3s; }
.vx-ring-list li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--pc) 40%, #fff)); }
.vx-ring-list li:hover { color: #fff; } .vx-ring-list li.is-on { color: #fff; padding-left: 34px; } .vx-ring-list li.is-on::before { width: 22px; background: #fff; }
.vx-ring-list li.is-on::after { animation: vxprog var(--cyc, 2800ms) linear forwards; }
@media (prefers-reduced-motion: no-preference) { .vx-ring .sweep { animation: vxspin 10s linear infinite; } }
@media (max-width: 900px) { .vx-ringwrap { grid-template-columns: minmax(0, 1fr); } .vx-ring { max-width: 420px; margin-inline: auto; } .vx-ring-c { inset: 22%; } .vx-ring-c p { display: none; } }

/* ---------- stack (accordion) ---------- */
.vx-stack { border-top: 1px solid var(--pcl); }
.vx-row { position: relative; border-bottom: 1px solid var(--pcl); cursor: pointer; outline: none; }
.vx-row header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; }
.vx-row h3 { margin: 0; font-size: clamp(24px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -.025em; color: #7d8799; transition: color .45s, transform .5s var(--ease); }
.vx-row:hover h3 { color: var(--ink-700); } .vx-row.is-on h3 { color: var(--ink-900); transform: translateX(12px); }
.vx-plus { position: relative; flex: none; width: 24px; height: 24px; }
.vx-plus::before, .vx-plus::after { content: ""; position: absolute; left: 3px; right: 3px; top: 11px; height: 2px; border-radius: 2px; background: var(--pc); transition: transform .45s var(--ease); }
.vx-plus::after { transform: rotate(90deg); } .vx-row.is-on .vx-plus::after { transform: rotate(0); } .vx-row.is-on .vx-plus::before { transform: rotate(180deg); }
.vx-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); } .vx-row.is-on .vx-body { grid-template-rows: 1fr; }
.vx-body > div { overflow: hidden; }
.vx-body p { margin: 0 0 22px 16px; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--ink-500); }
.vx-inline { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 20px 16px; padding: 0; }
.vx-inline li { font-size: 15.5px; font-weight: 600; color: var(--ink-700); } .vx-inline li + li::before { content: "/"; margin: 0 12px; color: var(--pc); }
.vx-foot { font-weight: 700; color: var(--pc) !important; font-size: 15px !important; }
.vx-prog { position: absolute; left: 0; bottom: -1px; height: 3px; width: 0; background: linear-gradient(90deg, var(--pc), var(--pc2)); }
.vx-row.is-on .vx-prog, .vx-metrics li.is-on .vx-prog { animation: vxprog var(--cyc, 4600ms) linear forwards; }

/* ---------- ledger ---------- */
.vx-ledger { border-top: 1px solid var(--pcl); }
.vx-lrow { position: relative; display: grid; grid-template-columns: 44px minmax(0, .9fr) minmax(0, 1.3fr); gap: 26px; align-items: start; padding: 32px 4px; border-bottom: 1px solid var(--pcl); transition: padding .45s var(--ease), background .4s; }
.vx-lrow::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--pc), var(--pc2)); transition: width .8s var(--ease); }
.vx-lrow:hover::before { width: 100%; } .vx-lrow:hover { padding-left: 14px; background: linear-gradient(90deg, var(--pcs), transparent 60%); }
.vx-gl { width: 42px; height: 42px; fill: none; stroke: var(--pc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.vx-gl * { stroke-dasharray: 240; stroke-dashoffset: 0; }
.vx-lrow h3 { margin: 0; font-size: clamp(21px, 2.3vw, 29px); line-height: 1.2; letter-spacing: -.015em; color: var(--ink-900); }
.vx-lrow p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--ink-500); }
@media (prefers-reduced-motion: no-preference) {
  .js .vx-lrow.reveal:not(.in) .vx-gl * { stroke-dashoffset: 240; } .vx-lrow.in .vx-gl * { transition: stroke-dashoffset 1.6s var(--ease) .25s; }
}
@media (max-width: 760px) { .vx-lrow { grid-template-columns: 38px minmax(0, 1fr); gap: 14px 16px; } .vx-lrow > div { grid-column: 1 / -1; } .vx-gl { width: 34px; height: 34px; } }

/* ---------- manifest ---------- */
.vx-manifest { border-top: 1px solid var(--pcl); }
.vx-mrow { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 40px; align-items: baseline; padding: clamp(26px, 4vw, 52px) 0; border-bottom: 1px solid var(--pcl); }
.vx-mrow h3 { margin: 0; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; }
.vx-mrow h3 span { background: linear-gradient(90deg, var(--ink-900) 0 50%, #c3cbda 50% 100%) 100% 0 / 200% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.1s var(--ease); }
.js .vx-mrow:not(.vx-lit) h3 span { background-position: 100% 0; }
.vx-mrow p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-500); }
@media (max-width: 860px) { .vx-mrow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- audit ---------- */
.vx-audit { padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 28px 56px -40px rgba(18, 48, 95, .5); }
.vx-audit-h { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.vx-audit-n { justify-self: end; font-size: 14px; font-weight: 700; color: var(--ink-500); font-variant-numeric: tabular-nums; } .vx-audit-n b { font-size: 22px; color: var(--pc); }
.vx-audit-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--pcs); overflow: hidden; }
.vx-audit-bar i { display: block; height: 100%; width: var(--w, 100%); border-radius: 6px; background: linear-gradient(90deg, var(--pc), var(--pc2)); transition: width .5s var(--ease); }
.vx-audit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.vx-audit li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px dashed var(--pcl); font-size: 16.5px; font-weight: 600; color: var(--ink-500); transition: color .35s; }
.vx-audit li svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: #fff; border: 2px solid var(--pcl); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; transition: background .3s, border-color .3s, stroke-dashoffset .5s var(--ease) .1s; }
.vx-audit li.done { color: var(--ink-900); } .vx-audit li.done svg { background: var(--pc); border-color: var(--pc); stroke-dashoffset: 0; }
@media (max-width: 860px) { .vx-audit ul { grid-template-columns: minmax(0, 1fr); } }

/* ---------- feed ---------- */
.vx-feed { max-width: 840px; margin-inline: auto; }
.vx-feed-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #bcd2f5; }
.vx-feed-list { list-style: none; margin: 0; padding: 0; position: relative; }
.vx-feed-list li { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; padding: 15px 20px; border-radius: 18px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-size: 17px; font-weight: 600; }
.vx-feed-list svg { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: rgba(255, 255, 255, .13); fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vx-feed-list span { flex: 1; }
.vx-feed-list em { font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3ddc97; }
.vx-feed.is-live .vx-feed-list { height: 440px; }
.vx-feed.is-live .vx-feed-list li { position: absolute; left: 0; right: 0; top: 0; margin: 0; height: 70px; transform: translateY(calc(var(--r) * 90px)) scale(calc(1 - var(--r) * .035)); opacity: calc(1 - var(--r) * .19); transition: transform .9s var(--ease), opacity .9s; }
.vx-feed.is-live .vx-feed-list li:not(.is-new) em { visibility: hidden; }

/* ---------- voices ---------- */
.vx-vstage { display: grid; }
.vx-voice { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
.vx-voice.is-on { opacity: 1; visibility: visible; }
.vx-voice blockquote { position: relative; margin: 0; padding-top: 54px; }
.vx-voice blockquote::before { content: "\201C"; position: absolute; left: -4px; top: -6px; font-size: 110px; line-height: 1; font-weight: 800; color: var(--pc); opacity: .35; }
.vx-voice p { margin: 0; max-width: 1020px; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.5; letter-spacing: -.01em; font-weight: 600; color: var(--ink-900); }
.vx-voice figcaption { margin-top: 24px; font-size: 15px; font-weight: 600; color: var(--ink-500); }
.vx-vtabs { list-style: none; display: flex; flex-wrap: wrap; gap: 0 36px; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--pcl); }
.vx-vtabs li { position: relative; padding: 16px 2px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7d8799; cursor: pointer; transition: color .3s; outline: none; }
.vx-vtabs li.is-on, .vx-vtabs li:hover { color: var(--ink-900); } .vx-vtabs .vx-prog { top: -1px; bottom: auto; }
.vx-vtabs li.is-on .vx-prog { animation: vxprog var(--cyc, 9000ms) linear forwards; }

/* ---------- market rows (partner) ---------- */
.vx-market .vx-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--pc); text-decoration: none; }
.vx-market .vx-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); } .vx-market .vx-link:hover svg { transform: translateX(4px); }
.vx-market.hl { background: linear-gradient(90deg, var(--pcs), transparent 70%); padding-left: 14px; }
.vx-market.hl::before { width: 100%; }

/* ---------- orbit ---------- */
.vx-eco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.vx-eco-copy .eyebrow { color: #bcd2f5; } .vx-eco-copy h2 { margin: 12px 0 18px; color: #fff; } .vx-eco-copy p { margin: 0; font-size: 17.5px; line-height: 1.65; color: #cfd9ec; }
.vx-orbit { position: relative; container-type: size; width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; }
.vx-core { position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%; width: 25cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; text-align: center; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 60%, #fff), var(--pc)); box-shadow: 0 0 0 1.6cqw rgba(255, 255, 255, .08), 0 0 7cqw color-mix(in srgb, var(--pc) 75%, transparent); }
.vx-core b { font-size: 3.7cqw; font-weight: 800; color: #fff; padding: 0 1cqw; }
.vx-orb-ring { position: absolute; inset: 26%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .28); } .vx-orb-ring.r2 { inset: 0; border: 1px solid rgba(255, 255, 255, .1); }
.vx-wave { position: absolute; left: 50%; top: 50%; width: 25cqw; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--pc) 60%, #fff); opacity: 0; }
.vx-spin { position: absolute; inset: 0; }
.vx-sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); }
.vx-spoke { position: absolute; left: 0; top: -1px; width: 24cqw; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .04)); }
.vx-sat-p { position: absolute; left: 24cqw; top: 0; transform: rotate(calc(-1 * var(--a))); }
.vx-sat-c { translate: -50% -50%; text-align: center; }
.vx-sat-c a, .vx-sat-c span { display: grid; justify-items: center; gap: 1.2cqw; width: max-content; max-width: 21cqw; text-align: center; font-size: max(13px, 2.4cqw); font-weight: 700; color: #fff; text-decoration: none; }
.vx-sat-c a::before, .vx-sat-c span::before { content: ""; width: 3.6cqw; height: 3.6cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1cqw rgba(255, 255, 255, .18), 0 0 4cqw color-mix(in srgb, var(--pc) 80%, transparent); transition: transform .3s var(--ease), background .3s; }
.vx-sat-c a:hover::before { transform: scale(1.3); background: color-mix(in srgb, var(--pc) 30%, #fff); } .vx-sat-c a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .vx-wave { animation: vxwave 4.4s ease-out infinite; } .vx-wave.w2 { animation-delay: 2.2s; }
  @keyframes vxwave { 0% { scale: 1; opacity: .55; } 100% { scale: 3.5; opacity: 0; } }
  .vx-spin { animation: vxspin 80s linear infinite; } .vx-sat-c { animation: vxspin 80s linear infinite reverse; }
  .vx-orbit:hover .vx-spin, .vx-orbit:hover .vx-sat-c { animation-play-state: paused; }
}
@media (max-width: 900px) { .vx-eco { grid-template-columns: minmax(0, 1fr); } }

/* ---------- console ---------- */
.vx-console { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.3fr); gap: clamp(18px, 3vw, 44px); align-items: stretch; }
.vx-metrics { list-style: none; margin: 0; padding: 0; align-content: start; border-top: 1px solid var(--pcl); }
.vx-metrics li { position: relative; padding: 18px 16px 20px 24px; border-bottom: 1px solid var(--pcl); cursor: pointer; outline: none; }
.vx-metrics li::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--pcl); transition: background .3s; } .vx-metrics li.is-on::before { background: var(--pc); }
.vx-metrics b { display: block; font-size: 18px; color: var(--ink-500); transition: color .3s; } .vx-metrics li:hover b, .vx-metrics li.is-on b { color: var(--ink-900); }
.vx-metrics span { display: block; max-height: 0; opacity: 0; overflow: hidden; font-size: 15px; line-height: 1.55; color: var(--ink-500); transition: max-height .55s var(--ease), opacity .4s, margin .4s; }
.vx-metrics li.is-on span { max-height: 130px; opacity: 1; margin-top: 7px; }
.vx-screen { display: flex; flex-direction: column; min-height: 380px; border-radius: 26px; overflow: hidden; color: #dbe4f3; background: linear-gradient(165deg, var(--pc2), #0a1226 92%); box-shadow: 0 40px 80px -44px rgba(8, 18, 45, .8); }
.vx-screen-h { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #bcd2f5; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.vx-screen-b { position: relative; flex: 1; }
.vx-plot { position: absolute; inset: 0; margin: 0; padding: 20px 22px 24px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.vx-plot.is-on { opacity: 1; visibility: visible; }
.vx-plot small { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #bcd2f5; }
.vx-plot svg { flex: 1; width: 100%; min-height: 0; margin-top: 8px; overflow: visible; }
.vx-plot .gl { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.vx-plot .ln { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.vx-plot .cur { stroke: rgba(255, 255, 255, .3); stroke-dasharray: 3 5; } .vx-plot .pt { fill: #fff; } .vx-plot .pu { fill: #fff; opacity: .3; }
.vx-plot .br { fill: rgba(255, 255, 255, .26); transform-box: fill-box; transform-origin: center bottom; } .vx-plot .br.hi { fill: #fff; }
.vx-plot .g-bg { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 18; stroke-linecap: round; } .vx-plot .g-fg { fill: none; stroke: #fff; stroke-width: 18; stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.vx-plot .g-t { font-size: 46px; font-weight: 800; fill: #fff; }
.vx-plot .hm { fill: rgba(255, 255, 255, .08); transform-box: fill-box; transform-origin: center; } .vx-plot .hm.c1 { fill: rgba(255, 255, 255, .2); } .vx-plot .hm.c2 { fill: rgba(255, 255, 255, .42); } .vx-plot .hm.c3 { fill: rgba(255, 255, 255, .92); }
@media (prefers-reduced-motion: no-preference) {
  .vx-plot.is-on .ln { animation: vxdraw 1.5s var(--ease) both; } .vx-plot.is-on .ar { animation: vxfade 1.2s .6s both; }
  .vx-plot.is-on .pu { animation: vxpu 2s 1.2s ease-out infinite; } @keyframes vxpu { from { r: 5; opacity: .5; } to { r: 18; opacity: 0; } }
  .vx-plot.is-on .br { animation: vxbar .9s var(--ease) both; animation-delay: calc(var(--k) * 50ms); } @keyframes vxbar { from { transform: scaleY(0); } }
  .vx-plot.is-on .g-fg { animation: vxgauge 1.5s var(--ease) both; } @keyframes vxgauge { from { stroke-dasharray: 0 100; } }
  .vx-plot.is-on .hm { animation: vxcell .6s var(--ease) both; animation-delay: calc(var(--k) * 38ms); } @keyframes vxcell { from { opacity: 0; transform: scale(.3); } }
}
@media (max-width: 900px) { .vx-console { grid-template-columns: minmax(0, 1fr); } .vx-screen { min-height: 320px; } }

/* ---------- journey curve, wheel, radar ---------- */
.vx-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.vx-curve .ar { fill: color-mix(in srgb, var(--pc) 9%, transparent); } .vx-curve .ln { fill: none; stroke: var(--pc); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; }
.vx-curve .stop line { stroke: var(--pcl); stroke-dasharray: 3 6; } .vx-curve .stop circle { fill: #fff; stroke: var(--pc); stroke-width: 4; } .vx-curve .stop text { font-size: 21px; font-weight: 700; fill: var(--ink-800); }
.vx-curve .runner { fill: var(--pc); filter: drop-shadow(0 0 8px var(--pc)); }
@media (prefers-reduced-motion: no-preference) {
  .vx-curve.in .ln { animation: vxdraw 2.2s var(--ease) both; }
  .js .vx-curve.reveal:not(.in) .stop { opacity: 0; } .vx-curve.in .stop { animation: vxpopm .7s var(--ease) both; animation-delay: calc(var(--i) * .45s + .3s); }
}
@media (max-width: 760px) { .vx-curve .stop text { font-size: 28px; } }
.vx-wheel { display: block; width: 100%; height: auto; overflow: visible; }
.vx-wheel .q path:first-child { fill: var(--pc); transition: filter .35s, transform .5s var(--ease); transform-origin: 170px 170px; }
.vx-wheel .q:nth-of-type(2) path:first-child { fill: color-mix(in srgb, var(--pc) 82%, #fff); } .vx-wheel .q:nth-of-type(3) path:first-child { fill: color-mix(in srgb, var(--pc) 72%, #0a1226); } .vx-wheel .q:nth-of-type(4) path:first-child { fill: color-mix(in srgb, var(--pc) 90%, #0a1226); }
.vx-wheel .q { cursor: pointer; outline: none; } .vx-wheel .q:hover path:first-child, .vx-wheel .q.is-on path:first-child { filter: brightness(1.18); transform: scale(1.045); }
.vx-wheel .ic { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .vx-wheel .q text { font-size: 15px; font-weight: 700; fill: #fff; pointer-events: none; }
.vx-wheel .hub { fill: #fff; filter: drop-shadow(0 8px 14px rgba(8, 18, 45, .25)); } .vx-wheel .hub-t { font-size: 21px; font-weight: 800; fill: var(--pc2); } .vx-wheel .hub-s { font-size: 9.6px; font-weight: 700; fill: var(--ink-500); }
.vx-wheel .orb { fill: var(--pc); filter: drop-shadow(0 0 6px var(--pc)); }
@media (prefers-reduced-motion: no-preference) { .vx-wheel--auto .q { animation: vxq 8s ease-in-out infinite; } .vx-wheel--auto .q:nth-of-type(2) { animation-delay: 2s; } .vx-wheel--auto .q:nth-of-type(3) { animation-delay: 6s; } .vx-wheel--auto .q:nth-of-type(4) { animation-delay: 4s; } @keyframes vxq { 0%, 30%, 100% { opacity: 1; } 12% { opacity: 1; filter: brightness(1.22); } 40%, 90% { opacity: .9; } } }
.vx-skills { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.vx-skill-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pcl); }
.vx-skill-list li { position: relative; padding: 22px 4px 22px 26px; border-bottom: 1px solid var(--pcl); cursor: pointer; }
.vx-skill-list li::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 3px; background: var(--pcl); transition: background .3s; } .vx-skill-list li.is-on::before { background: var(--pc); }
.vx-skill-list b { display: block; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.02em; line-height: 1.1; color: #7d8799; transition: color .4s; } .vx-skill-list li.is-on b { color: var(--ink-900); }
.vx-skill-list .vx-inline { margin: 10px 0 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; } .vx-skill-list li.is-on .vx-inline { max-height: 90px; opacity: 1; }
.vx-skill-list .vx-prog { bottom: -1px; }
@media (max-width: 900px) { .vx-skills { grid-template-columns: minmax(0, 1fr); } .vx-skills .vx-wheel { max-width: 400px; margin-inline: auto; } }
.vx-radar { display: block; width: 100%; max-width: 460px; height: auto; margin-inline: auto; overflow: visible; }
.vx-radar text { font-size: 14px; font-weight: 700; fill: var(--ink-800); }
.vx-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.vx-trio > div { padding: 26px 26px 6px 0; } .vx-trio > div + div { padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .18); }
.vx-trio b { display: block; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.vx-trio small { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #bcd2f5; }
@media (max-width: 760px) { .vx-trio { grid-template-columns: minmax(0, 1fr); } .vx-trio > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .18); } }
.vx-note { max-width: 640px; margin: 26px 0 0; font-size: 18px; line-height: 1.65; color: var(--ink-500); }

/* ---------- hero points ---------- */
.vx-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.vx-points li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--ink-800); }
.vx-points i { position: absolute; left: 4px; top: .52em; width: 10px; height: 10px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 16%, transparent); }
@media (prefers-reduced-motion: no-preference) { .vx-points i { animation: vxfloat 4.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.55s); } @keyframes vxfloat { 0%, 100% { transform: translate(0, 0); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pc) 16%, transparent); } 50% { transform: translate(2px, -4px); box-shadow: 0 0 0 7px color-mix(in srgb, var(--pc) 6%, transparent); } } }

/* ---------- fluENcy extras ---------- */
.vx-ring-lede { max-width: 640px; margin: 0 0 30px; font-size: 19px; line-height: 1.6; color: #cfd9ec; }
.vx-inline--lg { margin: 0 0 4px; } .vx-inline--lg li { font-size: clamp(20px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.01em; }
.vx-skills--radar { align-items: center; }
.vx-hero-wheel { padding: clamp(8px, 2vw, 22px); }
.vx-hero-wheel .vx-wheel { max-width: 520px; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(18, 48, 95, .22)); }

/* =====================================================================================================
   Per-page design languages ("pg-" themes). Each product page has its own typography, surface, hero and signature
   components, so no two pages share a template. Shared motion rules (pp-*, vx-*) stay above.
   ===================================================================================================== */
.hx-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(14px, 2.4vw, 30px) 0 clamp(34px, 5vw, 62px); }
.hx-visual { min-width: 0; }
.hx .hx-text h1 { margin: 14px 0 0; line-height: 1.04; }
.hx .hx-text .lede { margin-top: 16px; }
.hx .vx-points { margin-top: 18px; }
.hx .hero-ctas { margin-top: 24px; }
.pg .pp-aurora, .pg .pp-sec::before { display: none; }
.pg .pp-head h2::after { content: none; }
@media (max-width: 900px) { .hx-grid { grid-template-columns: minmax(0, 1fr); } .hx-visual { max-width: 520px; } }

/* ============================================ DigiSurvey: friendly, hand-made ============================================ */
.pg-sv { --sv-ink: #0d3b4c; --sv-coral: #e8590c; background: #f5fbfd radial-gradient(#cfe5ec 1px, transparent 1.2px) 0 0 / 24px 24px; }
.pg-sv main :is(h1, h2, h3) { font-family: 'Nunito', Inter, system-ui, sans-serif; letter-spacing: -.02em; }
.pg-sv main h1 { font-weight: 900; font-size: clamp(30px, 3.6vw, 48px); color: var(--sv-ink); }
.pg-sv main h2 { font-weight: 900; color: var(--sv-ink); }
.pg-sv .eyebrow { font-family: 'Caveat', cursive; font-size: 27px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sv-coral); }
.pg-sv .eyebrow::before { content: none; }
.pg-sv .pp-sec { background: transparent; }
.hx-sv { background: linear-gradient(180deg, #e3f6fb 0%, transparent 100%); }
.sv-hv { position: relative; min-height: 420px; display: grid; place-items: center; }
.sv-card { position: relative; width: min(360px, 88%); padding: 26px 26px 22px; border: 3px solid var(--sv-ink); border-radius: 22px; background: #fff; box-shadow: 9px 9px 0 var(--sv-ink); rotate: -2deg; }
.sv-card small { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0b7a99; }
.sv-card b { display: block; margin: 6px 0 22px; font-family: 'Nunito', sans-serif; font-size: 26px; color: var(--sv-ink); }
.tape { position: absolute; left: 50%; top: -14px; width: 84px; height: 26px; translate: -50% 0; rotate: -3deg; background: rgba(255, 224, 138, .8); box-shadow: 0 1px 0 rgba(0, 0, 0, .08); }
.sv-scale { position: relative; display: flex; justify-content: space-between; align-items: center; height: 30px; }
.sv-scale::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: #cfe5ec; }
.sv-scale i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--sv-ink); }
.sv-scale .knob { position: absolute; left: 0; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -4px; border-radius: 50%; background: var(--sv-coral); border: 3px solid var(--sv-ink); box-shadow: 0 4px 0 rgba(13, 59, 76, .25); }
.sv-scale-l { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: #5a7f8c; }
.sv-count { margin-top: 20px; padding-top: 14px; border-top: 2px dashed #cfe5ec; font-size: 15px; font-weight: 700; color: var(--sv-ink); }
.sv-count span { font-family: 'Nunito', sans-serif; font-size: 30px; font-weight: 900; color: #0b7a99; } .sv-count em { float: right; font-style: normal; font-size: 11px; color: #7b98a3; }
.sv-bub { position: absolute; max-width: 190px; margin: 0; padding: 12px 16px; border: 3px solid var(--sv-ink); border-radius: 20px 20px 20px 4px; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.25; color: var(--sv-ink); box-shadow: 5px 5px 0 var(--sv-ink); }
.sv-bub.b1 { left: -2%; top: 6%; background: #ffe08a; rotate: -5deg; } .sv-bub.b2 { right: -2%; top: 30%; background: #bdeccf; rotate: 4deg; border-radius: 20px 20px 4px 20px; } .sv-bub.b3 { left: 4%; bottom: 4%; background: #ffc9b8; rotate: 3deg; }
.sv-hand { max-width: 880px; margin: 0; font-family: 'Caveat', cursive; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.25; font-weight: 600; color: var(--sv-ink); }
.sv-intro { padding-block: 10px 6px; }
.sv-quote { max-width: 760px; margin: 18px 0 34px; padding-left: 18px; border-left: 5px solid #ffd166; font-size: 19px; line-height: 1.6; font-weight: 600; color: #315765; }
.sv-notes { list-style: none; margin: 0; padding: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 26px; }
.sv-notes li { position: relative; padding: 30px 22px 24px; rotate: var(--rot); box-shadow: 0 16px 20px -14px rgba(13, 59, 76, .55); transition: rotate .35s var(--ease), translate .35s var(--ease), box-shadow .35s; }
.sv-notes li[data-c="0"] { background: #fff1a8; } .sv-notes li[data-c="1"] { background: #c9f2dd; } .sv-notes li[data-c="2"] { background: #ffd9c7; } .sv-notes li[data-c="3"] { background: #cfe8ff; }
.sv-notes li:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 26px 26px -16px rgba(13, 59, 76, .6); z-index: 2; }
.sv-notes p { margin: 0; font-family: 'Caveat', cursive; font-size: 27px; line-height: 1.12; font-weight: 700; color: var(--sv-ink); }
.sv-notes .tape { top: -12px; width: 68px; height: 22px; }
.sv-flow .sv-wave svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-wave .w1 { fill: none; stroke: #0b7a99; stroke-width: 5; stroke-linecap: round; } .sv-wave .w2 { fill: none; stroke: #ffd166; stroke-width: 5; stroke-linecap: round; opacity: .7; }
.sv-wave .wn line { stroke: var(--sv-ink); stroke-width: 2; stroke-dasharray: 3 4; } .sv-wave .wn circle { fill: #fff; stroke: var(--sv-ink); stroke-width: 4; }
.sv-wave .wn text { font-family: 'Nunito', sans-serif; font-size: 19px; font-weight: 800; fill: var(--sv-ink); } .sv-wave .wr { fill: var(--sv-coral); stroke: var(--sv-ink); stroke-width: 3; }
.sv-wave-list { display: none; list-style: none; margin: 0; padding: 0; } .sv-wave-list li { padding: 12px 0 12px 26px; border-left: 4px solid #0b7a99; font-family: 'Nunito', sans-serif; font-weight: 800; font-size: 18px; color: var(--sv-ink); }
.sv-who { margin: 26px 0 0; font-size: 17px; line-height: 1.7; color: #315765; } .sv-who b { font-family: 'Caveat', cursive; font-size: 26px; color: var(--sv-coral); margin-right: 6px; }
.sv-likert { display: grid; gap: 4px; }
.sv-lk-key { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-bottom: 18px; font-size: 13px; font-weight: 700; color: #4b6e7c; }
.sv-lk-key i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; } .sv-lk-key em { margin-left: auto; font-style: normal; font-size: 11px; color: #7b98a3; }
.sv-lk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 46px; gap: 14px 28px; align-items: center; padding: 18px 0; border-top: 2px dashed #cfe5ec; }
.sv-lk-t b { display: block; font-family: 'Nunito', sans-serif; font-size: 19px; color: var(--sv-ink); } .sv-lk-t span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: #4b6e7c; }
.sv-lk-bar { display: flex; height: 26px; overflow: hidden; border: 3px solid var(--sv-ink); border-radius: 14px; background: #fff; }
.sv-lk-bar i { display: block; width: var(--w); transform-origin: 0 50%; } .sv-lk-bar .k0, .sv-lk-key .k0 i { background: #e4572e; } .sv-lk-bar .k1, .sv-lk-key .k1 i { background: #f4a261; } .sv-lk-bar .k2, .sv-lk-key .k2 i { background: #d5dde0; } .sv-lk-bar .k3, .sv-lk-key .k3 i { background: #5bc0de; } .sv-lk-bar .k4, .sv-lk-key .k4 i { background: #0b7a99; }
.sv-lk-avg { font-family: 'Nunito', sans-serif; font-size: 24px; font-weight: 900; color: #0b7a99; text-align: right; }
.sv-bubbles { display: flex; flex-wrap: wrap; gap: 18px 16px; justify-content: center; padding: 10px 0; }
.sv-bubbles .b { position: relative; margin: 0; max-width: 100%; border: 3px solid var(--sv-ink); border-radius: 26px 26px 26px 6px; box-shadow: 5px 5px 0 var(--sv-ink); font-family: 'Nunito', sans-serif; font-weight: 800; color: var(--sv-ink); transition: translate .3s var(--ease), box-shadow .3s; }
.sv-bubbles .b span { display: block; padding: 14px 22px; }
.sv-bubbles .b.s { font-size: 16px; } .sv-bubbles .b.m { font-size: 20px; } .sv-bubbles .b.l { font-size: 26px; border-radius: 34px 34px 34px 6px; }
.sv-bubbles .b[data-c="0"] { background: #ffe08a; } .sv-bubbles .b[data-c="1"] { background: #bdeccf; } .sv-bubbles .b[data-c="2"] { background: #ffc9b8; } .sv-bubbles .b[data-c="3"] { background: #cfe8ff; }
.sv-bubbles .b:nth-child(even) { border-radius: 26px 26px 6px 26px; } .sv-bubbles .b:hover { translate: -2px -4px; box-shadow: 8px 9px 0 var(--sv-ink); }
.pg-sv .vx-ringwrap, .pg-sv .vx-stage { --pc: #0b7a99; }
.pg-sv .vx-stage { border: 3px solid var(--sv-ink); border-radius: 30px; box-shadow: 9px 9px 0 var(--sv-ink); background: linear-gradient(160deg, #0b7a99, #0d3b4c); }
.pg-sv .vx-stage::before { content: none; }
.pg-sv .vx-ledger .vx-lrow h3, .pg-sv .vx-row h3, .pg-sv .vx-mrow h3 { font-family: 'Nunito', sans-serif; font-weight: 900; }
.pg-sv .vx-audit { border: 3px solid var(--sv-ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--sv-ink); }
.pg-sv .vx-audit li svg { border-radius: 50%; }
.pg-sv .pp-band { border: 3px solid var(--sv-ink); border-radius: 30px; box-shadow: 9px 9px 0 var(--sv-ink); }
.pg-sv .vx-orbit .vx-core { box-shadow: 0 0 0 1.6cqw rgba(255, 255, 255, .12); }
@media (max-width: 900px) { .sv-wave svg { display: none; } .sv-wave-list { display: block; } .sv-lk-row { grid-template-columns: minmax(0, 1fr) 46px; } .sv-lk-bar { grid-column: 1 / -1; grid-row: 2; } .sv-bub { max-width: 150px; font-size: 13px; } }
@media (prefers-reduced-motion: no-preference) {
  .sv-scale .knob { animation: svknob 7s var(--ease) infinite; } @keyframes svknob { 0%, 8% { left: 0; } 30%, 44% { left: calc(50% - 14px); } 62%, 80% { left: calc(100% - 24px); } 100% { left: 0; } }
  .sv-bub { animation: svbob 5s ease-in-out infinite; } .sv-bub.b2 { animation-delay: -1.6s; } .sv-bub.b3 { animation-delay: -3s; } @keyframes svbob { 50% { translate: 0 -9px; } }
  .sv-bubbles .b { animation: svbob2 var(--bob, 4s) ease-in-out infinite; animation-delay: calc(var(--d, 0ms) * -3); } @keyframes svbob2 { 50% { translate: 0 -6px; } }
  .sv-wave .w2 { stroke-dasharray: 4 14; animation: ppdash 2.4s linear infinite; }
  .js .sv-wave.reveal:not(.in) .wn { opacity: 0; } .sv-wave.in .wn { animation: pppopb .7s var(--ease) backwards; animation-delay: calc(var(--i) * .22s); }
  .js .sv-likert .sv-lk-row:not(.in) .sv-lk-bar i { transform: scaleX(0); } .sv-lk-row.in .sv-lk-bar i { transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0ms) + .2s); }
  .sv-notes li.reveal { transition: opacity .7s var(--ease), translate .35s var(--ease), rotate .35s var(--ease), box-shadow .35s; }
  .js .sv-notes li.reveal:not(.in) { transform: translateY(30px); }
}

/* ============================================ Q360: blueprint, engineered ============================================ */
.pg-q3 { --q3-ink: #0f2a5c; --fm: 'IBM Plex Mono', ui-monospace, monospace; background: #f2f6fc linear-gradient(#dfe7f4 1px, transparent 1px) 0 0 / 28px 28px; }
.pg-q3::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #dfe7f4 1px, transparent 1px) 0 0 / 28px 28px; }
.pg-q3 main :is(h1, h2, h3) { font-family: 'IBM Plex Sans', Inter, system-ui, sans-serif; font-weight: 600; letter-spacing: -.015em; color: var(--q3-ink); }
.pg-q3 main h1 { font-size: clamp(32px, 4vw, 52px); font-weight: 700; }
.pg-q3 .eyebrow { font-family: var(--fm); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; color: #1d4ed8; } .pg-q3 .eyebrow::before { content: "[ "; width: auto; height: auto; background: none; margin-right: 2px; } .pg-q3 .eyebrow::after { content: " ]"; }
.pg-q3 .pp-sec { background: transparent; }
.hx-q3 { border-bottom: 2px solid var(--q3-ink); background: rgba(242, 246, 252, .85); }
.pg-q3 .vx-points li { font-family: var(--fm); font-size: 14px; font-weight: 500; color: var(--q3-ink); } .pg-q3 .vx-points i { height: 12px; width: 12px; top: .35em; border: 2px solid #1d4ed8; background: none; border-radius: 0; }
.q3-hv { position: relative; max-width: 460px; margin-inline: auto; }
.q3-hv svg { display: block; width: 100%; height: auto; }
.q3-hv .ring { fill: none; stroke: var(--q3-ink); stroke-width: 1.2; stroke-dasharray: 3 7; transform-origin: 200px 200px; } .q3-hv .ring.in { stroke: #1d4ed8; stroke-dasharray: 10 6; }
.q3-hv .q path { fill: #fff; stroke: var(--q3-ink); stroke-width: 2.5; } .q3-hv .q1 path { fill: #dbe7ff; } .q3-hv .q2 path { fill: #b9d0ff; } .q3-hv .q3 path { fill: #1d4ed8; }
.q3-hv .q text { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; fill: var(--q3-ink); } .q3-hv .q3 text { fill: #fff; }
.q3-hv .hub { fill: var(--q3-ink); } .q3-hv .ht { font-family: 'IBM Plex Sans', sans-serif; font-size: 24px; font-weight: 700; fill: #fff; }
.q3-hv .hand { transform-origin: 200px 200px; } .q3-hv .hand line { stroke: #d92d20; stroke-width: 3; } .q3-hv .hand circle { fill: #d92d20; }
.q3-dim { display: block; position: relative; height: 22px; margin-top: 8px; border-left: 2px solid var(--q3-ink); border-right: 2px solid var(--q3-ink); } .q3-dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--q3-ink); }
.q3-sheet { border: 2px solid var(--q3-ink); background: #fff; box-shadow: 8px 8px 0 rgba(15, 42, 92, .14); }
.q3-sh-h { display: flex; justify-content: space-between; gap: 16px; padding: 10px 18px; background: var(--q3-ink); color: #fff; font-family: var(--fm); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.q3-sheet ul { list-style: none; margin: 0; padding: 8px 18px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.q3-sheet li { padding: 11px 0 11px 22px; border-bottom: 1px solid #d3ddef; position: relative; font-weight: 600; color: var(--q3-ink); } .q3-sheet li::before { content: "\25B8"; position: absolute; left: 0; color: #1d4ed8; }
.q3-quote { max-width: 760px; margin: 12px 0 28px; padding: 14px 18px; border: 1px solid var(--q3-ink); background: #fff; font-size: 17px; line-height: 1.6; color: var(--q3-ink); }
.q3-ncr { border: 2px solid var(--q3-ink); background: #fff; }
.q3-ncr .r { display: grid; grid-template-columns: 84px minmax(0, 1fr) 118px; align-items: center; border-top: 1px solid #c8d4ea; } .q3-ncr .r:first-child { border-top: 0; }
.q3-ncr .h { background: var(--q3-ink); color: #fff; font-family: var(--fm); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .q3-ncr .r > span { padding: 13px 16px; }
.q3-ncr .id { font-family: var(--fm); font-size: 13px; font-weight: 600; color: #1d4ed8; } .q3-ncr .ob { font-weight: 500; color: var(--q3-ink); }
.q3-ncr .st { position: relative; height: 100%; } .q3-ncr .st b { position: absolute; left: 16px; top: 50%; translate: 0 -50%; padding: 4px 10px; font-family: var(--fm); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.q3-ncr .o { background: #fde8e6; color: #b42318; border: 1px solid #b42318; } .q3-ncr .c { background: #dcf5e7; color: #067647; border: 1px solid #067647; opacity: 0; }
.q3-bp svg { display: block; width: 100%; height: auto; border: 2px solid var(--q3-ink); background: #fff; }
.q3-bp .grid { stroke: none; } .q3-bp pattern path { stroke: #d8e3f5; stroke-width: 1; }
.q3-bp .mod rect { fill: #fff; stroke: var(--q3-ink); stroke-width: 2; } .q3-bp .mod .crn { fill: none; stroke: #1d4ed8; stroke-width: 3; }
.q3-bp .mod text { font-family: 'IBM Plex Sans', sans-serif; font-size: 18px; font-weight: 600; fill: var(--q3-ink); } .q3-bp .mod .ix { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; fill: #1d4ed8; }
.q3-bp .wire { fill: none; stroke: #1d4ed8; stroke-width: 2.5; stroke-dasharray: 7 7; }
.q3-bp-list { display: none; list-style: none; margin: 0; padding: 0; border: 2px solid var(--q3-ink); background: #fff; } .q3-bp-list li { padding: 12px 16px; border-top: 1px solid #c8d4ea; font-weight: 600; color: var(--q3-ink); } .q3-bp-list b { margin-right: 10px; font-family: var(--fm); font-size: 12px; color: #1d4ed8; }
.q3-sup { margin: 22px 0 0; font-family: var(--fm); font-size: 14px; color: var(--q3-ink); } .q3-sup b { margin-right: 8px; text-transform: uppercase; letter-spacing: .06em; color: #1d4ed8; }
.q3-gantt { position: relative; border: 2px solid var(--q3-ink); background: #fff; padding: 8px 20px 12px; }
.q3-g-row { display: grid; grid-template-columns: minmax(150px, 270px) minmax(0, 1fr); gap: 18px; align-items: center; padding: 9px 0; border-bottom: 1px solid #e2eaf6; } .q3-g-row:last-child { border-bottom: 0; }
.q3-g-l { font-size: 15px; font-weight: 600; color: var(--q3-ink); }
.q3-g-t { position: relative; height: 20px; background: repeating-linear-gradient(90deg, #d3ddef 0 1px, transparent 1px calc(100% / 12)); }
.q3-g-t i { position: absolute; left: var(--s); width: var(--w); top: 3px; bottom: 3px; background: repeating-linear-gradient(135deg, #1d4ed8 0 6px, #3b6df0 6px 12px); transform-origin: 0 50%; border: 1.5px solid var(--q3-ink); }
.q3-g-grid { display: none; }
.pg-q3 .vx-ledger--index .vx-gl { display: none; } .pg-q3 .vx-ledger--index, .pg-ig .vx-ledger--index { counter-reset: rw; border-top: 2px solid var(--q3-ink); }
.vx-ledger--index .vx-lrow { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); border-bottom: 1px solid #c8d4ea; } .vx-ledger--index .vx-lrow h3::before { counter-increment: rw; content: "SPEC-" counter(rw, decimal-leading-zero); display: block; margin-bottom: 6px; font: 500 12px/1 var(--fm, monospace); letter-spacing: .08em; color: var(--pc); }
.q3-dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border: 2px solid var(--q3-ink); background: #fff; }
.q3-dial { position: relative; margin: 0; padding: 26px 22px 22px; text-align: center; border-right: 1px solid #c8d4ea; border-bottom: 1px solid #c8d4ea; }
.q3-dial svg { display: block; width: 180px; max-width: 100%; margin: 0 auto; overflow: visible; } .q3-dial .arc { fill: none; stroke: #dbe4f4; stroke-width: 9; stroke-linecap: round; } .q3-dial .tk line { stroke: var(--q3-ink); stroke-width: 1.5; }
.q3-dial .needle { transform-origin: 60px 62px; transform: rotate(var(--v)); } .q3-dial .needle line { stroke: #d92d20; stroke-width: 2.6; stroke-linecap: round; } .q3-dial .needle circle { fill: var(--q3-ink); }
.q3-d-v { margin: 4px 0 8px; font-family: var(--fm); font-size: 26px; font-weight: 600; color: var(--q3-ink); }
.q3-dial figcaption b { display: block; font-size: 16.5px; color: var(--q3-ink); } .q3-dial figcaption span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: #4a5f86; }
.q3-dial .led { position: absolute; right: 14px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 8px #12b76a; }
.q3-form { position: relative; border: 2px solid var(--q3-ink); background: #fff; padding: 20px 26px 12px; }
.q3-f-h { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; align-items: center; margin-bottom: 14px; font-family: var(--fm); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--q3-ink); } .q3-f-n b { font-size: 20px; color: #1d4ed8; }
.q3-form .vx-audit-bar { grid-column: 1 / -1; height: 6px; border-radius: 0; background: #dbe4f4; } .q3-form .vx-audit-bar i { border-radius: 0; background: #1d4ed8; }
.q3-form ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.q3-form li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid #d3ddef; font-weight: 600; color: #6b7fa6; transition: color .3s; } .q3-form li.done { color: var(--q3-ink); }
.q3-form .bx { flex: none; width: 24px; height: 24px; border: 2px solid var(--q3-ink); background: #fff; display: grid; place-items: center; } .q3-form .bx svg { width: 18px; height: 18px; fill: none; stroke: #1d4ed8; stroke-width: 3.2; stroke-linecap: square; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .4s var(--ease); } .q3-form li.done .bx svg { stroke-dashoffset: 0; }
.q3-stamp { position: absolute; right: 34px; top: 12px; opacity: 0; scale: 1.7; rotate: -13deg; transition: opacity .3s, scale .35s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.q3-stamp span { display: block; padding: 6px 16px; border: 4px double #1d4ed8; border-radius: 4px; font-family: var(--fm); font-size: 22px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #1d4ed8; background: rgba(255, 255, 255, .6); }
.q3-form.all .q3-stamp { opacity: .92; scale: 1; }
.pg-q3 .vx-stage { border: 2px solid var(--q3-ink); border-radius: 0; box-shadow: 10px 10px 0 rgba(15, 42, 92, .18); background: var(--q3-ink); } .pg-q3 .vx-stage::before { opacity: .35; }
.pg-q3 .vx-stack { border-top: 2px solid var(--q3-ink); } .pg-q3 .vx-row { border-bottom-color: #c8d4ea; } .pg-q3 .vx-row h3 { font-weight: 600; }
.pg-q3 .vx-feed-list li { border-radius: 0; font-family: var(--fm); font-size: 14.5px; }
.pg-q3 .pp-band { border-radius: 0; border: 2px solid var(--q3-ink); }
.pg-q3 .vx-screen, .pg-q3 .vx-console .vx-screen { border-radius: 0; }
@media (max-width: 900px) { .q3-bp svg { display: none; } .q3-bp-list { display: block; } .q3-sheet ul, .q3-form ul { grid-template-columns: minmax(0, 1fr); } .q3-g-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } .q3-ncr .r { grid-template-columns: 70px minmax(0, 1fr); } .q3-ncr .st { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .q3-hv .ring { animation: vxspin 60s linear infinite; } .q3-hv .ring.in { animation-duration: 40s; animation-direction: reverse; } .q3-hv .hand { animation: vxspin 12s linear infinite; }
  .q3-bp .wire { animation: ppdash 1.6s linear infinite; } .js .q3-bp.reveal:not(.in) .mod { opacity: 0; } .q3-bp.in .mod { animation: pppop .6s var(--ease) backwards; animation-delay: calc(var(--i) * .12s); }
  .q3-ncr .o { animation: ncO 7s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); } .q3-ncr .c { animation: ncC 7s ease-in-out infinite; animation-delay: calc(var(--i) * .7s); }
  @keyframes ncO { 0%, 38% { opacity: 1; } 46%, 90% { opacity: 0; } 98%, 100% { opacity: 1; } } @keyframes ncC { 0%, 38% { opacity: 0; } 46%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
  .js .q3-gantt.reveal:not(.in) .q3-g-t i { transform: scaleX(0); } .q3-gantt.in .q3-g-t i { transition: transform .9s var(--ease); transition-delay: calc(var(--i) * .14s + .2s); }
  .js .q3-dials .q3-dial:not(.in) .needle { transform: rotate(-90deg); } .q3-dial.in .needle { transition: transform 1.6s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--d, 0ms) + .3s); }
  .q3-dial .led { animation: q3led 2.4s ease-in-out infinite; } @keyframes q3led { 50% { opacity: .35; } }
}

/* ============================================ HEBA AI: dark studio ============================================ */
.pg-he { --ink-900: #f4f1ff; --ink-800: #e7e2ff; --ink-700: #d2cbf7; --ink-500: #aaa3d6; --ink-400: #8f88bf; --line-soft: rgba(255, 255, 255, .12); --pcl: rgba(167, 139, 250, .3); --pcs: rgba(124, 58, 237, .16); --surface: #0a0820; --he-glow: #a78bfa;
  background: #0a0820; color: #cfc8f4; }
.pg-he main :is(h1, h2, h3) { font-family: 'Sora', Inter, system-ui, sans-serif; letter-spacing: -.025em; color: #f4f1ff; }
.pg-he main h1 { font-weight: 700; font-size: clamp(34px, 4.8vw, 62px); }
.pg-he .eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; letter-spacing: .1em; color: #b9a7ff; } .pg-he .eyebrow::before { background: #b9a7ff; }
.pg-he .lede, .pg-he p { color: #bdb6e6; }
.pg-he .pp-sec { background: transparent; border-top: 1px solid rgba(255, 255, 255, .06); }
.pg-he .pp-sec:nth-of-type(odd) { background: radial-gradient(70% 90% at 85% 0%, rgba(124, 58, 237, .14), transparent 70%); }
.pg-he .crumbs-bar, .pg-he .crumbs-bar a { color: #aaa3d6; }
.hx-he { background: radial-gradient(60% 80% at 50% 0%, rgba(124, 58, 237, .32), transparent 70%); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hx--center .hx-center { max-width: 920px; margin: 0 auto; padding: clamp(10px, 2vw, 24px) 0 clamp(44px, 6vw, 80px); text-align: center; }
.hx--center .hero-ctas { justify-content: center; }
.he-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 28% 70%, #c4b5fd, transparent), radial-gradient(1.6px 1.6px at 46% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 63% 58%, #c4b5fd, transparent), radial-gradient(1.4px 1.4px at 78% 24%, #fff, transparent), radial-gradient(1.2px 1.2px at 90% 66%, #c4b5fd, transparent), radial-gradient(1px 1px at 6% 84%, #fff, transparent), radial-gradient(1px 1px at 55% 90%, #fff, transparent); }
.he-prompt { display: flex; align-items: center; gap: 12px; max-width: 700px; margin: 26px auto 0; padding: 16px 18px; border: 1px solid rgba(167, 139, 250, .4); border-radius: 16px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 6px rgba(124, 58, 237, .08), 0 30px 60px -30px rgba(124, 58, 237, .6); text-align: left; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15.5px; color: #efeaff; }
.he-prompt .spark { flex: none; width: 22px; height: 22px; background: linear-gradient(135deg, #c4b5fd, #7c3aed); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.he-prompt .txt { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; } .he-prompt .caret { flex: none; width: 2px; height: 1.2em; background: #c4b5fd; margin-left: -8px; } .he-prompt .go { margin-left: auto; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #7c3aed; color: #fff; font-size: 18px; }
.he-net .he-neural svg { display: block; width: 100%; height: auto; overflow: visible; }
.he-neural .ed { fill: none; stroke: rgba(167, 139, 250, .38); stroke-width: 1.6; } .he-neural .pk { fill: #d8ccff; filter: drop-shadow(0 0 5px #a78bfa); }
.he-neural .core .c { fill: #5b21b6; stroke: #c4b5fd; stroke-width: 2; } .he-neural .core .h1, .he-neural .core .h2 { fill: none; stroke: #a78bfa; stroke-width: 1.5; opacity: .3; } .he-neural .core text { font-family: 'Sora', sans-serif; font-size: 22px; font-weight: 700; fill: #fff; }
.he-neural .nd circle { fill: #0a0820; stroke: #a78bfa; stroke-width: 3; } .he-neural .nd text { font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 600; fill: #e7e2ff; }
.he-n-list { display: none; list-style: none; margin: 0; padding: 0; } .he-n-list li { padding: 12px 0 12px 20px; border-left: 2px solid #7c3aed; color: #e7e2ff; font-weight: 600; }
.he-sup { margin: 24px 0 0; color: #bdb6e6; } .he-sup b { margin-right: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #b9a7ff; }
.he-chat { max-width: 860px; margin-inline: auto; border: 1px solid rgba(167, 139, 250, .3); border-radius: 22px; background: #110e2c; box-shadow: 0 40px 80px -40px rgba(124, 58, 237, .6); overflow: hidden; }
.he-c-h { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #bdb6e6; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; } .he-c-h i { width: 10px; height: 10px; border-radius: 50%; background: #3a3566; } .he-c-h span { margin-left: 10px; letter-spacing: .06em; }
.he-c-log { list-style: none; margin: 0; padding: 22px 22px 8px; display: grid; gap: 14px; }
.he-c-log li { display: grid; gap: 4px; max-width: 78%; } .he-c-log li.a { justify-self: start; } .he-c-log li.u { justify-self: end; text-align: right; }
.he-c-log .who { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8f88bf; }
.he-c-log p { margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 16.5px; line-height: 1.5; font-weight: 500; } .he-c-log .a p { background: #261d5c; color: #efeaff; border-top-left-radius: 4px; } .he-c-log .u p { background: #7c3aed; color: #fff; border-top-right-radius: 4px; }
.he-c-in { display: flex; align-items: center; justify-content: space-between; margin: 12px 18px 18px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; color: #8f88bf; font-family: 'JetBrains Mono', monospace; font-size: 14px; } .he-c-in .send { width: 28px; height: 28px; border-radius: 9px; background: #7c3aed; }
.he-chat.ready .he-c-log li { opacity: 0; translate: 0 12px; } .he-chat.ready .he-c-log li.on { opacity: 1; translate: 0 0; transition: opacity .5s, translate .5s var(--ease); }
.he-console .vx-metrics { border-top-color: rgba(255, 255, 255, .14); } .he-console .vx-metrics li { border-bottom-color: rgba(255, 255, 255, .12); } .he-console .vx-metrics b { color: #8f88bf; } .he-console .vx-metrics li:hover b, .he-console .vx-metrics li.is-on b { color: #fff; } .he-console .vx-metrics span { color: #bdb6e6; } .he-console .vx-metrics li::before { background: rgba(255, 255, 255, .18); }
.he-console .vx-screen { border: 1px solid rgba(167, 139, 250, .35); background: #110e2c; border-radius: 22px; }
.vx-plot .sl { fill: rgba(237, 232, 255, .78); transform-box: fill-box; transform-origin: 0 50%; } .vx-plot .cu { fill: #c4b5fd; } .vx-plot .cb { fill: rgba(255, 255, 255, .1); } .vx-plot .cf { fill: #a78bfa; transform-box: fill-box; transform-origin: 0 50%; }
.vx-feed--ai .vx-feed-list li { border-radius: 12px; background: rgba(124, 58, 237, .12); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3); font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; }
.pg-he .vx-ledger, .pg-he .vx-stack, .pg-he .vx-manifest { border-top-color: rgba(255, 255, 255, .16); } .pg-he .vx-lrow, .pg-he .vx-row, .pg-he .vx-mrow { border-bottom-color: rgba(255, 255, 255, .12); }
.pg-he .vx-lrow h3 { color: #f4f1ff; } .pg-he .vx-gl { stroke: #b9a7ff; } .pg-he .vx-lrow:hover { background: linear-gradient(90deg, rgba(124, 58, 237, .18), transparent 60%); }
.pg-he .vx-row h3 { color: #6f689f; } .pg-he .vx-row.is-on h3 { color: #fff; } .pg-he .vx-body p { color: #bdb6e6; }
.pg-he .vx-mrow h3 span { background: linear-gradient(90deg, #f4f1ff 0 50%, #4b4580 50% 100%) 100% 0 / 200% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; } .js .pg-he .vx-mrow:not(.vx-lit) h3 span { background-position: 100% 0; }
.pg-he .vx-audit { background: #110e2c; box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .3); } .pg-he .vx-audit li { color: #8f88bf; border-bottom-color: rgba(255, 255, 255, .14); } .pg-he .vx-audit li.done { color: #f4f1ff; } .pg-he .vx-audit li svg { background: #110e2c; border-color: rgba(255, 255, 255, .25); } .pg-he .vx-audit-bar { background: rgba(255, 255, 255, .1); }
.pg-he .pp-band { background: linear-gradient(160deg, #2a1d6e, #0a0820); }
.pg-he .vx-stage { background: radial-gradient(90% 100% at 100% 0%, rgba(124, 58, 237, .5), transparent 62%), #110e2c; border: 1px solid rgba(167, 139, 250, .25); }
.pg-he .cta-band { background: linear-gradient(135deg, #5b21b6, #1e1b4b); }
.pg-he .pp-quote, .pg-he .vx-friction li { color: #e7e2ff; } .pg-he .vx-friction, .pg-he .vx-friction li { border-color: rgba(255, 255, 255, .12); } .pg-he .pp-quote { background: rgba(124, 58, 237, .14); }
@media (max-width: 900px) { .he-neural svg { display: none; } .he-n-list { display: block; } .he-c-log li { max-width: 92%; } }
@media (prefers-reduced-motion: no-preference) {
  .he-stars { animation: hetw 6s ease-in-out infinite alternate; } @keyframes hetw { from { opacity: .55; } to { opacity: 1; } }
  .he-prompt .caret { animation: hecar 1s steps(1) infinite; } @keyframes hecar { 50% { opacity: 0; } }
  .he-neural .core .h1 { animation: pphalo 3.6s ease-out infinite; } .he-neural .core .h2 { animation: pphalo 3.6s 1.8s ease-out infinite; } .he-neural .nd circle { animation: henode 3s ease-in-out infinite; } @keyframes henode { 50% { fill: #5b21b6; } }
  .vx-plot.is-on .sl { animation: hesl 1.1s var(--ease) both; animation-delay: calc(var(--k) * 110ms); } @keyframes hesl { from { transform: scaleX(0); } }
  .vx-plot.is-on .cu { animation: hecar 1s steps(1) infinite; } .vx-plot.is-on .cf { animation: hesl 1.4s var(--ease) .8s both; }
}

/* ============================================ Reportly: editorial paper ============================================ */
.pg-rp { --rp-ink: #1c1a16; --rp-rule: #cdbf9f; --rp-amber: #b45309; background: #faf6ec; }
.pg-rp main :is(h1, h2, h3) { font-family: 'Fraunces', Georgia, serif; font-weight: 800; letter-spacing: -.02em; color: var(--rp-ink); font-variation-settings: 'opsz' 96; }
.pg-rp main h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; }
.pg-rp main h3 { font-weight: 700; }
.pg-rp .eyebrow { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--rp-amber); } .pg-rp .eyebrow::before { content: "\00A7"; width: auto; height: auto; background: none; margin-right: 6px; font-style: normal; }
.pg-rp .pp-sec { background: transparent; border-top: 3px double var(--rp-rule); }
.pg-rp .lede, .pg-rp p { color: #4d463a; }
.pg-rp .hx-rp { background: transparent; }
.rp-hv { position: relative; height: 420px; max-width: 460px; margin-inline: auto; }
.rp-hv .sheet { position: absolute; width: 76%; height: 88%; left: 12%; top: 6%; border: 1px solid #d8ccb0; background: #fffdf7; box-shadow: 0 20px 40px -22px rgba(60, 40, 10, .5); }
.rp-hv .s1 { rotate: -9deg; translate: -14% 2%; } .rp-hv .s2 { rotate: 6deg; translate: 12% 0; }
.rp-hv .s3 { padding: 26px 24px; rotate: -1.5deg; background: #fff; }
.rp-hv .hd { display: block; width: 60%; height: 18px; margin-bottom: 14px; background: var(--rp-ink); } .rp-hv .ln { display: block; height: 7px; margin: 0 0 9px; background: #e4dbc6; } .rp-hv .w1 { width: 100%; } .rp-hv .w2 { width: 86%; } .rp-hv .w3 { width: 62%; margin-bottom: 20px; }
.rp-hv svg { display: block; width: 100%; height: auto; overflow: visible; } .rp-hv .bars rect { fill: #e7c98d; transform-box: fill-box; transform-origin: center bottom; } .rp-hv .bars rect:nth-child(4) { fill: var(--rp-amber); } .rp-hv .ln2 { fill: none; stroke: var(--rp-ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; }
.rp-hv .mk { position: absolute; left: 20px; top: 24px; width: 66%; height: 20px; background: rgba(255, 209, 102, .55); mix-blend-mode: multiply; }
.rp-stand { max-width: 860px; margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.4; font-weight: 600; color: var(--rp-ink) !important; } .rp-stand::first-letter { float: left; margin: 6px 12px 0 0; font-size: 3.4em; line-height: .8; font-weight: 800; color: var(--rp-amber); }
.rp-quote { max-width: 720px; margin: 10px 0 30px; font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.5; font-style: italic; color: #5b5242 !important; }
.rp-strike { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 54px; }
.rp-strike li { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--rp-rule); font-family: 'Fraunces', Georgia, serif; font-size: 23px; line-height: 1.3; font-weight: 600; color: #6a6252; }
.rp-strike span { background: linear-gradient(177deg, transparent 47%, #d6402b 47% 53%, transparent 53%) no-repeat 0 0 / 100% 100%; }
.rp-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: x; }
.rp-toc li { display: flex; align-items: baseline; gap: 14px; padding: 14px 10px; border-bottom: 1px solid #e6dcc4; transition: background .3s, padding .35s var(--ease); }
.rp-toc li:hover { background: rgba(255, 209, 102, .22); padding-left: 20px; }
.rp-toc .n { flex: none; width: 46px; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 700; font-size: 20px; color: var(--rp-amber); } .rp-toc .t { font-family: 'Fraunces', Georgia, serif; font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; color: var(--rp-ink); }
.rp-toc .dots { flex: 1; min-width: 24px; align-self: flex-end; margin-bottom: 7px; border-bottom: 2px dotted #bfae86; } .rp-toc .pg { flex: none; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; color: #7a6a4a; }
.rp-app { margin-top: 26px; padding: 18px 22px; border: 1px solid var(--rp-rule); background: #fffdf7; } .rp-app b { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 17px; color: var(--rp-amber); } .rp-app p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.7; }
.rp-spine { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 60px; }
.rp-spine li { position: relative; break-inside: avoid; padding: 0 0 26px 40px; border-left: 2px solid var(--rp-ink); margin-left: 8px; } .rp-spine li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; background: #faf6ec; border: 3px solid var(--rp-ink); transition: background .3s; } .rp-spine li:hover::before { background: var(--rp-amber); }
.rp-spine .k { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--rp-amber); } .rp-spine h3 { margin: 4px 0 0; font-size: 23px; line-height: 1.25; }
.rp-spread { --pc: #b45309; }
.rp-spread .vx-metrics { border-top: 3px double var(--rp-rule); } .rp-spread .vx-metrics li { border-bottom: 1px solid #e6dcc4; } .rp-spread .vx-metrics b { font-family: 'Fraunces', Georgia, serif; font-size: 20px; color: #7a6a4a; } .rp-spread .vx-metrics li.is-on b, .rp-spread .vx-metrics li:hover b { color: var(--rp-ink); } .rp-spread .vx-metrics span { color: #5b5242; } .rp-spread .vx-metrics li.is-on::before { background: var(--rp-amber); } .rp-spread .vx-prog { background: var(--rp-amber); }
.rp-spread .vx-screen { border: 1px solid #d8ccb0; border-radius: 3px; background: #fffdf7; color: var(--rp-ink); box-shadow: 12px 14px 0 -4px rgba(120, 90, 30, .12), 0 30px 50px -34px rgba(60, 40, 10, .55); } .rp-spread .vx-screen-h { border-bottom: 1px solid #e6dcc4; color: #7a6a4a; font-family: 'IBM Plex Mono', ui-monospace, monospace; } .rp-spread .vx-live { color: var(--rp-amber); }
.rp-spread .vx-plot small { color: #7a6a4a; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 14px; letter-spacing: 0; text-transform: none; } .rp-spread .vx-plot small::before { content: "Fig. "; }
.rp-spread .vx-plot .gl { stroke: #e8dfc9; } .rp-spread .vx-plot .ln { stroke: var(--rp-ink); } .rp-spread .vx-plot .pt { fill: var(--rp-amber); } .rp-spread .vx-plot .pu { fill: var(--rp-amber); } .rp-spread .vx-plot .cur { stroke: #bfae86; } .rp-spread .vx-plot .ar { fill: rgba(180, 83, 9, .12) !important; }
.rp-spread .vx-plot .br { fill: #e7c98d; } .rp-spread .vx-plot .br.hi { fill: var(--rp-amber); } .rp-spread .vx-plot .g-bg { stroke: #eadfca; } .rp-spread .vx-plot .g-fg { stroke: var(--rp-amber); } .rp-spread .vx-plot .g-t { fill: var(--rp-ink); font-family: 'Fraunces', serif; }
.rp-spread .vx-plot .hm { fill: #f1e9d8; } .rp-spread .vx-plot .hm.c1 { fill: #f0cf8a; } .rp-spread .vx-plot .hm.c2 { fill: #e29b3a; } .rp-spread .vx-plot .hm.c3 { fill: #b45309; }
.rp-find { padding: 24px 28px 8px; border: 1px solid var(--rp-rule); background: #fffdf7; }
.rp-mast { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 3px double var(--rp-ink); } .rp-mast span { font-family: 'Fraunces', Georgia, serif; font-size: 34px; font-weight: 800; font-variant: small-caps; letter-spacing: .04em; color: var(--rp-ink); } .rp-mast i { flex: 1; height: 0; }
.rp-find ol { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 38px; column-rule: 1px solid var(--rp-rule); }
.rp-find li { break-inside: avoid; margin: 0 0 22px; } .rp-find .k { display: block; margin-bottom: 5px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-amber); } .rp-find p { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--rp-ink); } .rp-find li:first-child p { font-size: 28px; line-height: 1.15; }
.pg-rp .vx-ledger, .pg-rp .vx-stack, .pg-rp .vx-manifest, .pg-rp .vx-audit ul { border-color: var(--rp-rule); } .pg-rp .vx-lrow, .pg-rp .vx-row, .pg-rp .vx-mrow { border-bottom-color: var(--rp-rule); }
.pg-rp .vx-mrow h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 800; } .pg-rp .vx-row h3 { font-family: 'Fraunces', Georgia, serif; }
.pg-rp .vx-audit { border-radius: 3px; background: #fffdf7; box-shadow: inset 0 0 0 1px var(--rp-rule); } .pg-rp .vx-audit li svg { border-radius: 2px; } .pg-rp .vx-audit li { border-bottom-color: #e6dcc4; }
.pg-rp .vx-stage { border-radius: 3px; background: linear-gradient(160deg, #5a3406, #1c1a16); } .pg-rp .pp-band { border-radius: 3px; background: linear-gradient(160deg, #6b3d0b, #1c1a16); } .pg-rp .cta-band { border-radius: 3px; background: linear-gradient(135deg, #8a3f06, #1c1a16); }
@media (max-width: 900px) { .rp-strike, .rp-spine, .rp-find ol { columns: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .rp-hv .sheet { animation: rpsheet 9s ease-in-out infinite alternate; } .rp-hv .s2 { animation-delay: -3s; } .rp-hv .s3 { animation-delay: -6s; } @keyframes rpsheet { to { translate: 0 -8px; } }
  .rp-hv .s1 { animation-name: rpsheet1; } @keyframes rpsheet1 { to { translate: -14% -8px; } } .rp-hv .s2 { animation-name: rpsheet2; } @keyframes rpsheet2 { to { translate: 12% -10px; } }
  .rp-hv .bars rect { animation: rpgrow 1.1s var(--ease) both; animation-delay: calc(var(--k) * 90ms + .5s); } @keyframes rpgrow { from { transform: scaleY(0); } } .rp-hv .ln2 { animation: vxdraw 2.4s var(--ease) 1s both; } .rp-hv .mk { animation: rpmk 1.2s var(--ease) .3s both; transform-origin: 0 50%; } @keyframes rpmk { from { transform: scaleX(0); } }
  .js .rp-strike li.reveal:not(.in) span { background-size: 0 100%; } .rp-strike li.in span { transition: background-size .9s var(--ease) .5s; }
  .js .rp-toc.reveal:not(.in) li { opacity: 0; translate: -14px 0; } .rp-toc.in li { transition: opacity .6s, translate .6s var(--ease), background .3s, padding .35s var(--ease); transition-delay: calc(var(--i) * 70ms); }
}
.he-quote { max-width: 760px; margin: 12px 0 30px; font-size: 19px; line-height: 1.6; color: #cfc8f4 !important; }
.he-marq { display: grid; gap: 6px; margin-inline: calc(var(--gutter, 0px) * -1); }
.he-marq .vx-ticker-row span { color: transparent; -webkit-text-stroke: 1.4px #8f7bff; font-family: 'Sora', sans-serif; font-size: clamp(26px, 3.6vw, 46px); font-weight: 700; } .he-marq .vx-ticker-row span:nth-child(even) { color: #f4f1ff; -webkit-text-stroke: 0; } .he-marq .vx-ticker-row span::after { background: #a78bfa; }

/* ============================================ INTEGER: systems, terminal ============================================ */
.pg-ig { --ig-ink: #0b1b36; --ig-sig: #16c79a; --fm: 'JetBrains Mono', ui-monospace, monospace; background: #eef2f7; }
.pg-ig main :is(h1, h2, h3) { font-family: 'Space Grotesk', Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -.03em; color: var(--ig-ink); }
.pg-ig main h1 { font-size: clamp(34px, 4.4vw, 58px); }
.pg-ig .eyebrow { font-family: var(--fm); font-size: 12.5px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: #0b7a99; } .pg-ig .eyebrow::before { content: "// "; width: auto; height: auto; background: none; margin-right: 0; }
.pg-ig .pp-sec { background: transparent; }
.hx-ig { background: linear-gradient(180deg, #e3eaf4, #eef2f7); border-bottom: 1px solid #cdd7e6; }
.pg-ig .vx-points li { font-family: var(--fm); font-size: 14px; } .pg-ig .vx-points i { background: var(--ig-sig); }
.ig-hv { padding: 16px; border-radius: 14px; background: var(--ig-ink); box-shadow: 0 40px 70px -40px rgba(11, 27, 54, .8); }
.ig-hv svg { display: block; width: 100%; height: auto; } .ig-hv .pipe { fill: none; stroke: #2c4a7a; stroke-width: 2; stroke-dasharray: 5 6; } .ig-hv .sysn rect { fill: #101f3d; stroke: #3a5a8f; stroke-width: 1.5; } .ig-hv .sysn text { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: #cfe0ff; } .ig-hv .sysn.main rect { fill: #0f3d3a; stroke: var(--ig-sig); } .ig-hv .sysn.main text { fill: #b6ffe9; font-weight: 600; }
.ig-hv .hubn rect { fill: #17305a; stroke: #5b8de6; stroke-width: 2; } .ig-hv .hubn text { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; fill: #fff; } .ig-hv .pkt { fill: var(--ig-sig); filter: drop-shadow(0 0 4px var(--ig-sig)); } .ig-hv .pkt.o { fill: #ffd166; }
.ig-code { margin: 10px 4px 2px; font-family: var(--fm); font-size: 12.5px; line-height: 1.8; color: #cfe0ff; white-space: pre-wrap; } .ig-code .ok { color: var(--ig-sig); } .ig-code .dim { color: #6f86b0; }
.ig-flags { margin: 0; font-family: var(--fm); font-size: 15px; line-height: 2; color: var(--ig-ink); } .ig-flags::before { content: "$ integer connect "; color: #0b7a99; } .ig-flags span { margin-right: 10px; padding: 2px 8px; border: 1px dashed #8aa3c8; color: #0b5d7a; }
.ig-intro { padding-block: 14px 8px; }
.ig-quote { max-width: 760px; margin: 12px 0 26px; padding-left: 16px; border-left: 3px solid var(--ig-sig); font-size: 18px; line-height: 1.6; color: #24395f; }
.ig-term { border-radius: 12px; overflow: hidden; background: #0b1b36; box-shadow: 0 30px 60px -36px rgba(11, 27, 54, .8); }
.ig-t-h { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #14284a; } .ig-t-h i { width: 11px; height: 11px; border-radius: 50%; background: #3a5a8f; } .ig-t-h span { margin-left: 10px; font-family: var(--fm); font-size: 12.5px; color: #8fa8d4; }
.ig-term ol { list-style: none; margin: 0; padding: 18px 20px; display: grid; gap: 10px; }
.ig-term li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; font-family: var(--fm); font-size: 14.5px; line-height: 1.5; color: #cfe0ff; } .ig-term .lv { font-weight: 600; color: #ff7a6b; } .ig-term li:nth-child(3n+2) .lv { color: #ffb84d; } .ig-term .cur .lv { color: var(--ig-sig); }
.ig-term .caret { display: inline-block; width: 9px; height: 1.1em; vertical-align: -3px; background: var(--ig-sig); }
.ig-bus { position: relative; padding: 6px 0; }
.ig-bus .spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; translate: -50% 0; background: #c3d0e4; border-radius: 4px; overflow: hidden; }
.ig-b-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); align-items: center; padding: 11px 0; }
.ig-b-row .br { position: relative; grid-column: 2; grid-row: 1; height: 2px; background: #8aa3c8; } .ig-b-row .br::before { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ig-sig); border: 2px solid #fff; } .ig-b-row.l .br::before { right: -5px; } .ig-b-row.r .br::before { left: -5px; }
.ig-b-row .nd { grid-row: 1; padding: 13px 18px; border: 1.5px solid var(--ig-ink); background: #fff; font-family: var(--fm); font-size: 14.5px; font-weight: 600; color: var(--ig-ink); box-shadow: 4px 4px 0 rgba(11, 27, 54, .12); } .ig-b-row .nd b { font-weight: 600; }
.ig-b-row.l .nd { grid-column: 1; justify-self: end; text-align: right; } .ig-b-row.r .nd { grid-column: 3; justify-self: start; }
.ig-sup { margin: 22px 0 0; font-family: var(--fm); font-size: 14px; color: #24395f; } .ig-sup b { margin-right: 8px; color: #0b7a99; }
.ig-build { border-radius: 12px; background: #0b1b36; padding: 12px 22px; box-shadow: 0 30px 60px -36px rgba(11, 27, 54, .8); }
.ig-build ol { list-style: none; margin: 0; padding: 0; } .ig-build li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 140px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: var(--fm); font-size: 14.5px; color: #cfe0ff; } .ig-build li:last-child { border-bottom: 0; }
.ig-build .ok { color: var(--ig-sig); font-weight: 600; } .ig-build .bar { position: relative; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; } .ig-build .bar::after { content: ""; position: absolute; inset: 0; background: var(--ig-sig); transform-origin: 0 50%; }
.ig-panel { max-width: 860px; border: 1.5px solid var(--ig-ink); background: #fff; padding: 20px 26px 10px; box-shadow: 8px 8px 0 rgba(11, 27, 54, .12); }
.ig-p-h { display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; margin-bottom: 8px; font-family: var(--fm); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ig-ink); } .ig-p-n b { font-size: 18px; color: #0b7a99; } .ig-panel .vx-audit-bar { grid-column: 1 / -1; height: 4px; border-radius: 0; background: #d6e0ef; } .ig-panel .vx-audit-bar i { background: var(--ig-sig); border-radius: 0; }
.ig-panel ul { list-style: none; margin: 0; padding: 0; } .ig-panel li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px dashed #c3d0e4; font-weight: 600; color: #6b7fa6; transition: color .3s; } .ig-panel li.done { color: var(--ig-ink); }
.ig-panel .sw { flex: none; position: relative; width: 46px; height: 26px; border-radius: 13px; background: #c3d0e4; transition: background .3s; } .ig-panel .sw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: translate .3s var(--ease); } .ig-panel li.done .sw { background: var(--ig-sig); } .ig-panel li.done .sw i { translate: 20px 0; }
.ig-layers { display: grid; gap: 0; }
.ig-layers .tier.top { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ig-layers .sys { position: relative; padding: 13px 20px; border: 1.5px solid var(--ig-ink); background: #fff; font-family: var(--fm); font-size: 14px; font-weight: 600; color: var(--ig-ink); box-shadow: 4px 4px 0 rgba(11, 27, 54, .12); } .ig-layers .sys a { color: inherit; text-decoration: none; } .ig-layers .sys a:hover { color: #0b7a99; text-decoration: underline; }
.ig-layers .top .sys::after { content: ""; position: absolute; left: 50%; top: 100%; height: 34px; width: 2px; translate: -50% 0; background: #8aa3c8; } .ig-layers .bot .sys::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 34px; width: 2px; translate: -50% 0; background: #8aa3c8; }
.ig-layers .pk { position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin-left: -4px; border-radius: 2px; background: var(--ig-sig); box-shadow: 0 0 6px var(--ig-sig); }
.ig-layers .tier.mid { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 34px 0; padding: 18px 24px; background: var(--ig-ink); color: #fff; box-shadow: 0 30px 50px -30px rgba(11, 27, 54, .7); } .ig-layers .mid b { font-family: 'Space Grotesk', sans-serif; font-size: 24px; letter-spacing: -.02em; } .ig-layers .mid em { font-style: normal; font-family: var(--fm); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #8fe9cf; }
.ig-layers .flow { flex: 1; height: 6px; background: repeating-linear-gradient(90deg, var(--ig-sig) 0 10px, transparent 10px 22px); opacity: .85; } .ig-layers .flow.r { background: repeating-linear-gradient(90deg, #5b8de6 0 10px, transparent 10px 22px); }
.ig-layers .bot { display: flex; justify-content: center; } .ig-layers .sys.main { padding: 15px 40px; background: #e8fff7; border-color: #0f766e; }
.ig-console .vx-screen { background: #0b1b36; border-radius: 12px; } .ig-console .vx-plot .br { fill: rgba(22, 199, 154, .35); } .ig-console .vx-plot .br.hi { fill: var(--ig-sig); } .ig-console .vx-plot .ln { stroke: var(--ig-sig); } .ig-console .vx-plot .hm.c1 { fill: rgba(22, 199, 154, .25); } .ig-console .vx-plot .hm.c2 { fill: rgba(22, 199, 154, .55); } .ig-console .vx-plot .hm.c3 { fill: var(--ig-sig); } .ig-console .vx-plot small, .ig-console .vx-screen-h { font-family: var(--fm); }
.ig-console .vx-metrics b { font-family: var(--fm); font-size: 16px; } .ig-console .vx-metrics li.is-on::before { background: var(--ig-sig); } .ig-console .vx-prog { background: var(--ig-sig); }
.pg-ig .vx-stage { border-radius: 12px; background: var(--ig-ink); } .pg-ig .pp-band { border-radius: 12px; background: var(--ig-ink); } .pg-ig .cta-band { background: var(--ig-ink); }
.pg-ig .vx-ledger--index { border-top: 2px solid var(--ig-ink); } .pg-ig .vx-ledger--index .vx-lrow { border-bottom-color: #c3d0e4; } .pg-ig .vx-ledger--index .vx-gl { display: none; }
.pg-ig .vx-feed-list li { border-radius: 6px; font-family: var(--fm); font-size: 14.5px; } .pg-ig .vx-mrow h3 { font-family: 'Space Grotesk', sans-serif; } .pg-ig .vx-stack { border-top-color: var(--ig-ink); } .pg-ig .vx-row { border-bottom-color: #c3d0e4; }
@media (max-width: 860px) { .ig-b-row { grid-template-columns: 30px minmax(0, 1fr); } .ig-bus .spine { left: 14px; } .ig-b-row .br { grid-column: 1; grid-row: 1; width: 100%; } .ig-b-row.l .nd, .ig-b-row.r .nd { grid-column: 2; justify-self: start; text-align: left; } .ig-b-row.l .br::before { right: auto; left: -5px; } .ig-build li { grid-template-columns: 40px minmax(0, 1fr); } .ig-build .bar { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ig-bus .spine::after { content: ""; position: absolute; left: 0; width: 100%; height: 60px; background: linear-gradient(180deg, transparent, var(--ig-sig)); animation: igspine 3.2s linear infinite; } @keyframes igspine { from { top: -60px; } to { top: 100%; } }
  .js .ig-bus.reveal:not(.in) .ig-b-row { opacity: 0; } .ig-bus.in .ig-b-row { animation: pppop .6s var(--ease) backwards; animation-delay: calc(var(--i) * .1s); }
  .ig-b-row .br::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 2px; background: var(--ig-sig); animation: igbr 2.6s linear infinite; animation-delay: calc(var(--i) * .3s); } .ig-b-row.l .br::after { left: 0; } .ig-b-row.r .br::after { right: 0; animation-name: igbr2; } @keyframes igbr { from { translate: 0 0; opacity: 0; } 15% { opacity: 1; } to { translate: 46px 0; opacity: 0; } } @keyframes igbr2 { from { translate: 0 0; opacity: 0; } 15% { opacity: 1; } to { translate: -46px 0; opacity: 0; } }
  .js .ig-term.reveal:not(.in) li { opacity: 0; } .ig-term.in li { animation: igln .01s steps(1) backwards; animation-delay: calc(var(--i) * .5s + .2s); } @keyframes igln { from { opacity: 0; } } .ig-term .caret { animation: hecar 1s steps(1) infinite; }
  .ig-layers .top .sys .pk { animation: igpk 2.4s linear infinite; animation-delay: calc(var(--i) * .35s); } @keyframes igpk { from { translate: 0 0; opacity: 0; } 20% { opacity: 1; } to { translate: 0 34px; opacity: 0; } }
  .ig-layers .flow { animation: igflow 1s linear infinite; background-size: 22px 100%; } @keyframes igflow { to { background-position: 22px 0; } } .ig-layers .flow.r { animation-direction: reverse; }
  .js .ig-build.reveal:not(.in) .bar::after { transform: scaleX(0); } .js .ig-build.reveal:not(.in) .ok { opacity: 0; } .ig-build.in .bar::after { animation: ppfill 1s var(--ease) backwards; animation-delay: calc(var(--i) * .35s + .2s); } .ig-build.in .ok { animation: vxfade .4s backwards; animation-delay: calc(var(--i) * .35s + 1s); }
}

/* ============================================ DigiScanner: paper and scanning ============================================ */
.pg-sc { --sc-ink: #2a1b0b; --sc-or: #e8590c; --sc-paper: #f7f0e2; background: #f7f0e2; }
.pg-sc main :is(h1, h2, h3) { font-family: 'Archivo', Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em; color: var(--sc-ink); }
.pg-sc main h1 { font-size: clamp(36px, 4.8vw, 64px); font-weight: 900; }
.pg-sc .eyebrow { font-family: 'Courier Prime', 'Courier New', monospace; font-weight: 700; font-size: 13px; letter-spacing: .12em; color: var(--sc-or); } .pg-sc .eyebrow::before { background: var(--sc-or); }
.pg-sc .pp-sec { background: transparent; border-top: 2px dashed #d7c7a4; }
.hx-sc { background: radial-gradient(60% 90% at 85% 20%, rgba(232, 89, 12, .12), transparent 70%); }
.sc-hv { position: relative; height: 430px; max-width: 420px; margin-inline: auto; }
.sc-sheet { position: absolute; left: 9%; top: 4%; width: 78%; height: 90%; padding: 34px 26px; background: #fff; border-radius: 3px; box-shadow: 0 26px 40px -22px rgba(42, 27, 11, .5); rotate: -3deg; overflow: hidden; }
.sc-sheet.b2 { left: 15%; top: 8%; rotate: 4deg; background: #fffaf0; z-index: -1; box-shadow: 0 14px 24px -14px rgba(42, 27, 11, .4); }
.sc-sheet .hw { display: block; height: 7px; margin: 0 0 16px; border-radius: 6px; background: #2f4fd0; opacity: .7; } .sc-sheet .h1 { width: 84%; } .sc-sheet .h2 { width: 96%; } .sc-sheet .h3 { width: 70%; } .sc-sheet .h4 { width: 90%; } .sc-sheet .h5 { width: 52%; }
.sc-sheet .sk { display: block; width: 100%; margin-top: 18px; fill: none; stroke: #2f4fd0; stroke-width: 2.6; stroke-linecap: round; opacity: .8; }
.sc-sheet .digit { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: repeating-linear-gradient(0deg, rgba(232, 89, 12, .2) 0 1px, transparent 1px 8px), repeating-linear-gradient(90deg, rgba(232, 89, 12, .2) 0 1px, transparent 1px 8px), rgba(232, 89, 12, .06); }
.sc-sheet .beam { position: absolute; left: -4%; right: -4%; top: 0; height: 4px; background: var(--sc-or); box-shadow: 0 0 18px 6px rgba(232, 89, 12, .55); }
.sc-sheet .ok { position: absolute; right: 18px; bottom: 22px; padding: 6px 12px; border: 3px solid var(--sc-or); border-radius: 4px; font-family: 'Courier Prime', monospace; font-size: 15px; font-weight: 700; text-transform: uppercase; color: var(--sc-or); rotate: -9deg; opacity: .9; }
.pg-sc .vx-stage, .pg-sc .pp-band { border-radius: 4px; background: linear-gradient(160deg, #6b2c06, #2a1b0b); box-shadow: 0 26px 50px -30px rgba(42, 27, 11, .8); }
.sc-strips { list-style: none; margin: 0; padding: 6px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
.sc-strips li { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 22px 18px 34px; background: #fffaf0; border: 2px dashed #cdb88e; rotate: var(--rot); transition: rotate .3s var(--ease), translate .3s var(--ease); }
.sc-strips li::before, .sc-strips li::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: #f7f0e2; border: 2px dashed #cdb88e; } .sc-strips li::before { top: -11px; } .sc-strips li::after { bottom: -11px; }
.sc-strips li:hover { rotate: 0deg; translate: 0 -3px; } .sc-strips .no { flex: none; font-family: 'Courier Prime', monospace; font-size: 15px; font-weight: 700; color: var(--sc-or); } .sc-strips p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; color: var(--sc-ink); }
@media (max-width: 800px) { .sc-strips { grid-template-columns: minmax(0, 1fr); } }
.sc-film { position: relative; padding: 36px 0; background: #1d130a; border-radius: 4px; box-shadow: 0 26px 50px -30px rgba(42, 27, 11, .8); }
.sc-film::before, .sc-film::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(90deg, transparent 0 14px, #f7f0e2 14px 28px, transparent 28px 44px); opacity: .85; } .sc-film::before { top: 11px; } .sc-film::after { bottom: 11px; }
.sc-reel { overflow-x: auto; padding: 0 22px; scrollbar-width: thin; } .sc-reel ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.sc-reel li { position: relative; flex: 1 0 196px; background: #2c1f12; border: 2px solid #4a3722; transition: border-color .4s, background .4s, translate .4s var(--ease); cursor: pointer; outline: none; }
.sc-reel li.is-on { background: #3a2916; border-color: var(--sc-or); translate: 0 -6px; } .sc-reel .fr { padding: 24px 20px 28px; } .sc-reel .no { font-family: 'Courier Prime', monospace; font-size: 14px; font-weight: 700; color: var(--sc-or); }
.sc-reel h3 { margin: 10px 0 8px; font-size: 21px; line-height: 1.2; color: #fff7e8 !important; } .sc-reel p { margin: 0; font-size: 15px; line-height: 1.55; color: #d9c8a8 !important; } .sc-reel .vx-prog { background: var(--sc-or); }
.pg-sc .pp-stat, .pg-sc .pp-save, .pg-sc .pp-race, .pg-sc .pp-table { border-radius: 4px; background: #fffaf0; box-shadow: inset 0 0 0 2px #d7c7a4; } .pg-sc .pp-save { background: #fffaf0; }
.pg-sc .vx-lrow, .pg-sc .vx-row, .pg-sc .vx-mrow { border-bottom: 2px dashed #d7c7a4; } .pg-sc .vx-ledger, .pg-sc .vx-stack, .pg-sc .vx-manifest { border-top: 2px dashed #d7c7a4; }
.pg-sc .vx-row h3, .pg-sc .vx-mrow h3 { font-family: 'Archivo', sans-serif; font-weight: 900; } .pg-sc .vx-audit { border-radius: 4px; background: #fffaf0; box-shadow: inset 0 0 0 2px #d7c7a4; } .pg-sc .vx-audit li svg { border-radius: 3px; }
.pg-sc .vx-metro { --pc: var(--sc-or); } .pg-sc .vx-voice p { font-family: 'Archivo', sans-serif; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .sc-sheet .beam { animation: scbeam 4.4s ease-in-out infinite alternate; } .sc-sheet .digit { animation: scdig 4.4s ease-in-out infinite alternate; clip-path: inset(0 0 0 0); } @keyframes scbeam { from { top: 0; } to { top: calc(100% - 4px); } } @keyframes scdig { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  .sc-sheet .ok { animation: scok 4.4s ease-in-out infinite alternate; } @keyframes scok { 0%, 70% { opacity: 0; scale: 1.5; } 90%, 100% { opacity: .9; scale: 1; } }
  .sc-sheet:not(.b2) { animation: scfloat 7s ease-in-out infinite alternate; } @keyframes scfloat { to { translate: 0 -8px; } }
}

/* ============================================ fluENcy: voice and language ============================================ */
.pg-fl { --fl-ink: #3a0d24; background: #fff7f4; }
.pg-fl main :is(h1, h2, h3) { font-family: 'Bricolage Grotesque', Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -.035em; color: var(--fl-ink); }
.pg-fl main h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1; }
.pg-fl .eyebrow { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: .04em; text-transform: none; font-size: 15px; color: #be185d; } .pg-fl .eyebrow::before { height: 3px; border-radius: 3px; }
.pg-fl .pp-sec { background: transparent; }
.pg-fl .pp-sec:nth-of-type(even) { background: #ffeef1; }
.fl-wave { display: grid; gap: 26px; }
.fl-w-track { position: relative; height: 150px; padding-bottom: 44px; }
.fl-wave .base, .fl-wave .lit { position: absolute; left: 0; right: 0; top: 0; height: 106px; display: flex; align-items: center; gap: 3px; }
.fl-wave i { flex: 1; min-width: 2px; height: var(--h); border-radius: 3px; background: #efc9d3; } .fl-wave .lit { clip-path: inset(0 calc((1 - (.04 + (var(--n) * var(--p, .17) - 1) * .92 / (var(--n) - 1))) * 100%) 0 0); transition: clip-path .9s var(--ease); } .fl-wave .lit i { background: #be185d; }
.fl-marks { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; }
.fl-marks .m { position: absolute; top: 0; translate: -50% 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #9b6b7c; }
.fl-marks .m::before { content: ""; display: block; width: 3px; height: 14px; margin: 0 auto 4px; background: #d9aab9; transition: background .3s, height .3s; } .fl-marks .m span { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; white-space: nowrap; transition: color .3s; }
.fl-marks .m.is-on::before, .fl-marks .m.is-past::before { background: #be185d; } .fl-marks .m.is-on::before { height: 22px; } .fl-marks .m.is-on span { color: var(--fl-ink); }
.fl-w-cap { max-width: 640px; } .fl-w-cap small { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #be185d; } .fl-w-cap strong { display: block; margin: 6px 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -.03em; color: var(--fl-ink); } .fl-w-cap p { margin: 0; font-size: 19px; line-height: 1.55; color: #6b4251; }
.fl-w-cap .swap { animation: vxswap .5s var(--ease); }
@media (max-width: 760px) { .fl-marks .m span { display: none; } .fl-marks .m.is-on span { display: block; position: absolute; left: 50%; translate: -50% 0; } .fl-wave i { gap: 1px; } }
.pg-fl .vx-stage, .pg-fl .pp-band { border-radius: 40px 40px 40px 8px; } .pg-fl .vx-skills .vx-wheel { filter: drop-shadow(0 24px 30px rgba(190, 24, 93, .22)); }
.pg-fl .vx-stair li { border-radius: 24px 24px 6px 6px; } .pg-fl .cta-band { border-radius: 36px 36px 36px 8px; }

/* ============================================ EPA: clinical chart ============================================ */
.pg-ep { --ep-ink: #111; --ep-red: #ff0000; --ep-amber: #ffc000; --ep-green: #00b050; background: #fff; }
.pg-ep main :is(h1, h2, h3) { font-family: inherit; font-weight: 700; letter-spacing: .005em; text-transform: uppercase; color: var(--ep-ink); }
.pg-ep main h1 { font-size: clamp(40px, 5.2vw, 72px); line-height: .98; } .pg-ep main h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.02; }
.pg-ep .eyebrow { font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: .16em; color: #4b4fc9; }
.pg-ep .pp-sec { background: transparent; border-top: 2px solid var(--ep-ink); }
.hx-ep { background: linear-gradient(180deg, #f1f2ff, #fff); }
.ep-hv { position: relative; display: flex; align-items: flex-end; height: 360px; max-width: 480px; margin-inline: auto; border-bottom: 3px solid var(--ep-ink); }
.ep-hv .stp { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 14px 14px; border: 2px solid var(--ep-ink); border-bottom: 0; color: #111; font-family: inherit; } .ep-hv .stp b { font-size: 26px; text-transform: uppercase; line-height: 1; } .ep-hv .stp span { margin-top: 4px; font-size: 17px; font-weight: 600; line-height: 1.1; }
.ep-hv .s1 { height: 38%; background: var(--ep-red); } .ep-hv .s2 { height: 68%; background: var(--ep-amber); border-left: 0; } .ep-hv .s3 { height: 98%; background: var(--ep-green); border-left: 0; color: #fff; }
.ep-hv .walker { position: absolute; left: 8%; bottom: 100%; width: 26px; height: 26px; margin-bottom: -26px; border-radius: 50%; background: #111; box-shadow: 0 0 0 5px #fff, 0 0 0 7px #111; }
.ep-matrix { border: 2px solid var(--ep-ink); background: #fff; }
.ep-m-legend { display: grid; grid-template-columns: 1.1fr 1.4fr 2fr 1.4fr; border-bottom: 2px solid var(--ep-ink); font-family: inherit; font-size: clamp(15px, 1.6vw, 21px); font-weight: 700; text-align: center; } .ep-m-legend span { padding: 12px 10px; border-left: 2px solid var(--ep-ink); } .ep-m-legend .h { border-left: 0; text-transform: none; } .ep-m-legend .l1 { background: var(--ep-red); } .ep-m-legend .l2 { background: var(--ep-amber); } .ep-m-legend .l3 { background: var(--ep-green); color: #fff; }
.ep-m-scroll { overflow-x: auto; } .ep-matrix table { width: 100%; min-width: 880px; border-collapse: collapse; table-layout: fixed; }
.ep-matrix caption { padding: 14px 10px 10px; font-family: inherit; font-size: clamp(24px, 3vw, 38px); font-weight: 700; text-align: center; letter-spacing: .01em; color: #111; }
.ep-matrix th, .ep-matrix td { border: 1.5px solid var(--ep-ink); } .ep-matrix thead th { padding: 8px 4px; font-family: inherit; font-size: 20px; font-weight: 700; text-align: center; color: #111; line-height: 1.05; }
.ep-matrix thead .yr { width: 190px; position: relative; text-align: left; padding: 6px 8px; background: linear-gradient(to top right, transparent calc(50% - 1px), #111 50%, transparent calc(50% + 1px)); } .ep-matrix .yr .a { display: block; text-align: right; } .ep-matrix .yr .b { display: block; font-size: 17px; }
.ep-matrix tbody th { padding: 8px 10px; text-align: left; background: #fff; font-family: inherit; font-size: 17px; line-height: 1.15; color: #111; } .ep-matrix tbody th b { display: block; font-weight: 700; } .ep-matrix tbody th span { display: block; font-weight: 600; font-size: 15.5px; color: #333; }
.ep-matrix td { height: 46px; background: #fff; } .ep-matrix td.L1 { background: var(--ep-red); } .ep-matrix td.L2 { background: var(--ep-amber); } .ep-matrix td.L3 { background: var(--ep-green); } .ep-matrix td.mix { background: linear-gradient(90deg, var(--ep-red) 0 58%, var(--ep-amber) 58%); } .ep-matrix td.mix i { display: none; }
.ep-m-note { margin: 0; padding: 14px 18px; border-top: 2px solid var(--ep-ink); font-size: 14.5px; line-height: 1.55; color: #444; }
.pg-ep .vx-stack, .pg-ep .vx-ledger, .pg-ep .vx-manifest { border-top: 2px solid var(--ep-ink); } .pg-ep .vx-row, .pg-ep .vx-lrow, .pg-ep .vx-mrow { border-bottom: 1px solid #111; } .pg-ep .vx-row h3, .pg-ep .vx-mrow h3, .pg-ep .vx-lrow h3 { font-family: inherit; text-transform: uppercase; font-weight: 700; }
.pg-ep .vx-stage, .pg-ep .pp-band { border-radius: 0; background: #111; } .pg-ep .cta-band { border-radius: 0; background: #111; } .pg-ep .vx-audit { border-radius: 0; box-shadow: inset 0 0 0 2px #111; } .pg-ep .vx-audit li svg { border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ep-hv .walker { animation: epwalk 9s ease-in-out infinite; } @keyframes epwalk { 0%, 8% { left: 8%; translate: 0 calc(-38% * 0 + 0px); bottom: 38%; } 33% { left: 14%; bottom: 38%; } 40%, 58% { left: 46%; bottom: 68%; } 68%, 88% { left: 80%; bottom: 98%; } 100% { left: 8%; bottom: 38%; } }
  .js .ep-matrix.reveal:not(.in) td { opacity: 0; scale: .6; } .ep-matrix.in td { transition: opacity .5s, scale .5s var(--ease); transition-delay: var(--d, 0ms); }
}
@media (max-width: 760px) { .ep-m-legend { grid-template-columns: 1fr 1fr; } .ep-m-legend .h { grid-column: 1 / -1; border-bottom: 2px solid #111; } }

/* ============================================ Partner: editorial ============================================ */
.pg-pt { --pt-ink: #10224a; background: #fbf9f4; }
.pg-pt main :is(h1, h2, h3) { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; letter-spacing: -.01em; color: var(--pt-ink); }
.pg-pt main h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; } .pg-pt main h2 { font-size: clamp(30px, 3.4vw, 46px); }
.pg-pt .eyebrow { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: #1d4ed8; }
.pg-pt .pp-sec { background: transparent; border-top: 1px solid #d9d3c3; }
.pg-pt .vx-lrow h3, .pg-pt .vx-row h3 { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.pg-pt .vx-stage, .pg-pt .pp-band { border-radius: 8px; } .pg-pt .cta-band { border-radius: 8px; }

/* ============================================ OSSAI: station circuit ============================================ */
.os-circuit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.os-circuit svg { display: block; width: 100%; height: auto; overflow: visible; } .os-circuit .trk { fill: none; stroke: #0e7490; stroke-width: 3; opacity: .55; } .os-circuit .trk.in { stroke-dasharray: 4 9; opacity: .3; stroke-width: 2; }
.os-circuit .st rect { fill: #fff; stroke: #0e7490; stroke-width: 2.5; } .os-circuit .st text { font-size: 13px; font-weight: 700; fill: #0b5568; } .os-circuit .cand { fill: #e11d48; filter: drop-shadow(0 0 6px #e11d48); }
.os-circuit .mid { font-size: 22px; font-weight: 800; fill: #0b5568; } .os-circuit .mid.s { font-size: 14px; font-weight: 600; fill: #4b7f8c; }
.os-c-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid #0e7490; } .os-c-list li { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid #bfe3e8; font-size: 16.5px; font-weight: 600; color: #0b3d4a; } .os-c-list b { flex: none; width: 34px; color: #0e7490; }
@media (max-width: 900px) { .os-circuit { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { .js .os-circuit.reveal:not(.in) .st { opacity: 0; } .os-circuit.in .st { animation: pppopb .6s var(--ease) backwards; animation-delay: calc(var(--i) * .15s); } }

/* ============================================ DigiPortfolio: journal ============================================ */
.dp-journal ol { list-style: none; margin: 0; padding: 0 0 0 40px; position: relative; } .dp-journal ol::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; background: repeating-linear-gradient(180deg, #4b4fc9 0 8px, transparent 8px 14px); }
.dp-journal li { position: relative; padding: 0 0 28px; } .dp-journal .mk { position: absolute; left: -40px; top: 2px; width: 26px; height: 26px; border-radius: 50% 50% 50% 4px; background: #fff; border: 3px solid #4b4fc9; rotate: -45deg; }
.dp-journal .en { padding: 18px 22px; background: #fffef8; border: 1px solid #e6e2d0; box-shadow: 0 14px 22px -18px rgba(75, 79, 201, .6); background-image: repeating-linear-gradient(180deg, transparent 0 31px, #ece8d8 31px 32px); }
.dp-journal small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #4b4fc9; } .dp-journal p { margin: 6px 0 0; font-size: 20px; line-height: 1.5; color: #2b2a52; }
@media (prefers-reduced-motion: no-preference) { .js .dp-journal.reveal:not(.in) li { opacity: 0; translate: 0 18px; } .dp-journal.in li { transition: opacity .6s, translate .6s var(--ease); transition-delay: calc(var(--i) * .12s); } }
.fl-lede { max-width: 640px; margin: 0 0 26px; font-size: 19px; line-height: 1.6; color: #6b4251; }
.sc-quote { max-width: 760px; margin: 12px 0 26px; padding-left: 16px; border-left: 4px solid var(--sc-or); font-size: 18px; line-height: 1.6; color: #4a3820; }

/* fixes: dark HEBA page keeps the site header and footer on their own palette; command-queue style chat */
.pg-he .site-header, .pg-he .site-footer, .pg-he .mega { --ink-900: #030814; --ink-800: #121d30; --ink-700: #29354a; --ink-500: #646e7e; --line-soft: #e6e9ef; }
.he-chat .he-c-log { gap: 12px; padding: 22px 24px 8px; }
.he-chat .he-c-log li { max-width: 100%; }
.he-chat .he-c-log li p { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: #1d1650; color: #efeaff; font-family: 'Sora', sans-serif; font-size: clamp(19px, 2.3vw, 27px); font-weight: 600; letter-spacing: -.02em; }
.he-chat .he-c-log .sp { flex: none; width: 18px; height: 18px; background: linear-gradient(135deg, #c4b5fd, #7c3aed); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.he-chat .he-c-log .sh { display: block; height: 3px; margin: 8px 6px 0; border-radius: 3px; background: linear-gradient(90deg, #7c3aed, #c4b5fd); transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) { .he-chat.ready li.on .sh { animation: ppfill 1s var(--ease) backwards; } }

/* metro: the first and last station labels stay inside the section */
.vx-metro:not(.vx-metro--v) li:first-child .lb { left: 0; transform: none; text-align: left; width: 140%; }
.vx-metro:not(.vx-metro--v) li:last-child .lb { left: auto; right: 0; transform: none; text-align: right; width: 140%; }
@media (max-width: 860px) { .vx-metro li:first-child .lb, .vx-metro li:last-child .lb { left: auto; right: auto; width: auto; text-align: left; } }

/* ---- fixes: hero text column stays compact so the hero image keeps its place ---- */
.pp-hero .vx-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
@media (max-width: 560px) { .pp-hero .vx-points { grid-template-columns: minmax(0, 1fr); } }

/* ---- fixes: problem rows use a calm broken-link mark (no cross, no flicker) ---- */
.vx-brk::after { content: none !important; animation: none !important; }
.vx-brk::before { animation: none !important; opacity: .8; border-top-color: #9aa8bd; }
.vx-brk b { border-color: #9aa8bd; background: #fff; }
.vx-friction li:hover .vx-brk b { border-color: var(--pc); }
.vx-friction li:hover .vx-brk::before { border-top-style: solid; border-top-color: var(--pc); opacity: 1; }

/* ---- EPA progress table: clean grid, same colour code (red = Level-1, amber = Level-2, green = Level-3, white = not assessed) ---- */
.ep-matrix { border: 0; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px #e3e6ef, 0 28px 56px -36px rgba(18, 29, 48, .4); font-family: inherit; }
.ep-matrix .ep-m-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 16px 24px; border-bottom: 1px solid #e3e6ef; background: #f8f9fe; font-size: 14px; font-weight: 600; text-align: left; }
.ep-matrix .ep-m-legend span { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: #1b2540; font-size: 14px; }
.ep-matrix .ep-m-legend .h { margin-right: 8px; font-weight: 700; color: #5b6784; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.ep-matrix .ep-m-legend .l1::before, .ep-matrix .ep-m-legend .l2::before, .ep-matrix .ep-m-legend .l3::before { content: ""; width: 18px; height: 18px; border-radius: 5px; }
.ep-matrix .ep-m-legend .l1::before { background: #ff0000; } .ep-matrix .ep-m-legend .l2::before { background: #ffc000; } .ep-matrix .ep-m-legend .l3::before { background: #00b050; }
.ep-matrix .ep-m-legend .l1, .ep-matrix .ep-m-legend .l2, .ep-matrix .ep-m-legend .l3 { background: none; color: #1b2540; }
.ep-matrix .ep-m-scroll { padding: 0 18px 8px; }
.ep-matrix table { min-width: 940px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.ep-matrix caption { padding: 22px 6px 14px; text-align: left; font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.015em; color: #0f1b3d; }
.ep-matrix th, .ep-matrix td { border: 0; }
.ep-matrix thead th { padding: 6px 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; color: #4b5875; background: none; }
.ep-matrix thead .yr { width: 214px; padding-left: 10px; text-align: left; background: none; }
.ep-matrix .yr .a { display: inline; text-align: left; } .ep-matrix .yr .b { display: inline; font-size: inherit; } .ep-matrix .yr .a::before { content: "MD Year / "; } .ep-matrix .yr .b { display: none; }
.ep-matrix tbody th { position: sticky; left: 0; z-index: 1; padding: 6px 10px 6px 10px; background: #fff; text-align: left; border-radius: 8px; }
.ep-matrix tbody th b { display: block; font-size: 14.5px; font-weight: 700; color: #0f1b3d; } .ep-matrix tbody th span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #5b6784; }
.ep-matrix td { height: 46px; padding: 0; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1.5px #e3e6ef; text-align: center; vertical-align: middle; }
.ep-matrix td b { font-size: 13px; font-weight: 800; }
.ep-matrix td.L1 { background: #ff0000; box-shadow: none; } .ep-matrix td.L1 b { color: #fff; }
.ep-matrix td.L2 { background: #ffc000; box-shadow: none; } .ep-matrix td.L2 b { color: #3a2a00; }
.ep-matrix td.L3 { background: #00b050; box-shadow: none; } .ep-matrix td.L3 b { color: #fff; }
.ep-matrix td.mix { background: none; box-shadow: none; }
.ep-matrix .mxw { display: flex; height: 46px; border-radius: 7px; overflow: hidden; } .ep-matrix .mxw b { display: grid; place-items: center; } .ep-matrix .mxw b:first-child { width: 58%; background: #ff0000; color: #fff; } .ep-matrix .mxw b:last-child { width: 42%; background: #ffc000; color: #3a2a00; }
.ep-matrix tbody tr:hover th b { color: #4b4fc9; } .ep-matrix tbody tr:hover td { filter: brightness(.95); } .ep-matrix td:hover { box-shadow: 0 0 0 2px #0f1b3d; position: relative; z-index: 2; }
.ep-matrix .ep-m-note { padding: 14px 24px 18px; border-top: 1px solid #e3e6ef; font-size: 14px; color: #4b5875; }
.js .ep-matrix.reveal:not(.in) td { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: no-preference) { .ep-matrix td { animation: epcell .5s var(--ease) both; animation-delay: var(--d, 0ms); } @keyframes epcell { from { opacity: 0; transform: scale(.7); } } }

/* ---- problem rows: warning mark, calm transition ---- */
.vx-friction li { grid-template-columns: 40px minmax(0, 1fr); }
.vx-brk { width: 28px; height: 28px; }
.vx-brk::before, .vx-brk::after { content: none !important; }
.vx-brk b { display: none; }
.vx-brk svg { width: 26px; height: 26px; fill: rgba(245, 158, 11, .16); stroke: #d97706; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s, fill .3s, transform .35s var(--ease); }
.vx-friction li:hover .vx-brk svg { stroke: var(--pc); fill: color-mix(in srgb, var(--pc) 14%, transparent); transform: translateY(-2px) scale(1.08); }

/* ---- light background designs behind the animated sections ---- */
.pp-platform::after, .pp-feat::after, .pp-live-sec::after, .pp-fit::after, .pp-caps::after, .pp-why::after, .pp-problems::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pp-platform::after { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--pc) 26%, transparent) 1.2px, transparent 1.7px) 0 0 / 28px 28px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent); opacity: .7; }
.pp-feat::after { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pc) 9%, transparent) 0 1px, transparent 1px 24px); -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 75%); }
.pp-live-sec::after { background: linear-gradient(color-mix(in srgb, var(--pc) 9%, transparent) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(90deg, color-mix(in srgb, var(--pc) 9%, transparent) 1px, transparent 1px) 0 0 / 52px 52px; -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 85%); }
.pp-fit::after { background: repeating-radial-gradient(circle at 94% 12%, transparent 0 52px, color-mix(in srgb, var(--pc) 11%, transparent) 52px 53px); -webkit-mask-image: radial-gradient(circle at 94% 12%, #000, transparent 58%); mask-image: radial-gradient(circle at 94% 12%, #000, transparent 58%); }
.pp-caps::after { background: radial-gradient(55% 55% at 6% 0%, color-mix(in srgb, var(--pc) 10%, transparent), transparent 70%), radial-gradient(45% 45% at 100% 100%, color-mix(in srgb, var(--pc2) 8%, transparent), transparent 70%); }
.pp-why::after { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--pc) 7%, transparent) 0 1px, transparent 1px 96px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.pp-problems::after { background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--pc) 20%, transparent) 1.1px, transparent 1.6px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(60% 80% at 0% 60%, #000, transparent 75%); mask-image: radial-gradient(60% 80% at 0% 60%, #000, transparent 75%); opacity: .7; }

/* ---- fluENcy page content ---- */
.fl-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(26px, 5vw, 72px); align-items: start; }
.fl-big { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--ink-900); }
.fl-sub { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-500); }
.fl-lede { max-width: 700px; margin: 0 0 8px; font-size: 19px; line-height: 1.6; color: var(--ink-700); }
.fl-skillgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.fl-sk { position: relative; padding: 30px 30px 28px 96px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--pcl), 0 24px 44px -34px rgba(18, 48, 95, .45); }
.fl-sk::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--pc), var(--pc2)); }
.fl-sk-ic { position: absolute; left: 28px; top: 30px; width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--pcs); fill: none; stroke: var(--pc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fl-sk h3 { margin: 0 0 12px; font-size: 26px; letter-spacing: -.02em; }
.fl-sk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fl-sk li { position: relative; padding-left: 18px; font-size: 17px; font-weight: 600; color: var(--ink-700); } .fl-sk li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 3px; background: var(--pc); opacity: .75; }
.fl-phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 8px; border-top: 1px solid var(--pcl); }
.fl-phases > div { padding: 20px 22px 6px 0; } .fl-phases > div + div { padding-left: 22px; border-left: 1px solid var(--pcl); }
.fl-phases b { display: block; font-size: 20px; letter-spacing: -.01em; color: var(--ink-900); } .fl-phases span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--ink-500); }
@media (max-width: 900px) { .fl-split { grid-template-columns: minmax(0, 1fr); } .fl-skillgrid { grid-template-columns: minmax(0, 1fr); } .fl-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-phases > div:nth-child(3) { padding-left: 0; border-left: 0; } .fl-sk { padding: 26px 24px 24px 86px; } }
@media (max-width: 560px) { .fl-phases { grid-template-columns: minmax(0, 1fr); } .fl-phases > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--pcl); } }

/* ---- hero: the picture stays level with the top of the text column ---- */
.pp-hero.hh .hh-grid { align-items: start; }
@media (min-width: 901px) { .pp-hero.hh .hh-visual { margin-top: 4px; } }

/* ---- marketing pictures inside inner pages ---- */
.pp-shot-sec { padding-block: clamp(40px, 5vw, 72px); }
.pp-shot-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(26px, 5vw, 76px); align-items: center; }
.pp-shot-wrap.is-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.pp-shot-wrap.is-flip .pp-shot-copy { order: 2; }
.pp-shot-copy h2 { margin: 12px 0 16px; }
.pp-shot-copy p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-500); }
.pp-shot { position: relative; margin: 0; isolation: isolate; }
.pp-shot::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border-radius: 28px; background: linear-gradient(135deg, var(--pcs), color-mix(in srgb, var(--pc) 14%, #fff)); }
.pp-shot.reveal { transition-property: opacity, transform; }
.pp-shot img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -34px rgba(18, 29, 48, .55), 0 0 0 1px rgba(18, 29, 48, .06); background: #fff; transition: transform .6s var(--ease); }
.pp-shot:hover img { transform: translateY(-4px) scale(1.01); }
@media (max-width: 900px) { .pp-shot-wrap, .pp-shot-wrap.is-flip { grid-template-columns: minmax(0, 1fr); } .pp-shot-wrap.is-flip .pp-shot-copy { order: 0; } .pp-shot::before { inset: 12px -8px -12px 12px; } }

/* ---- partner page: dot-matrix world map ---- */
.pp-world { position: relative; margin: 0 0 30px; padding: clamp(10px, 2vw, 26px); border-radius: 28px; overflow: hidden; background: radial-gradient(75% 90% at 50% 45%, color-mix(in srgb, var(--pc) 9%, #fff), #fff 82%); box-shadow: inset 0 0 0 1px var(--pcl); }
.pp-world svg { display: block; width: 100%; height: auto; max-height: none; overflow: visible; }
.pp-world .land { fill: none; stroke: color-mix(in srgb, var(--pc) 30%, #d5dded); stroke-width: 4.2; stroke-linecap: round; }
.pp-world .arc { fill: none; stroke: var(--pc); stroke-width: 1.7; stroke-dasharray: 4 7; opacity: .6; }
.pp-world .nd .pt { fill: var(--pc); stroke: #fff; stroke-width: 3; transition: r .25s; }
.pp-world .nd .pulse { fill: var(--pc); opacity: 0; }
.pp-world .nd text { font-size: 19px; font-weight: 800; fill: var(--ink-900); paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; transition: fill .25s; }
.pp-world .nd.hl .pt { r: 10; } .pp-world .nd.hl text { fill: var(--pc); }
.pp-world.has-hl .nd:not(.hl) { opacity: .5; }
@media (max-width: 700px) { .pp-world .nd text { font-size: 30px; stroke-width: 7px; } .pp-world .land { stroke-width: 5; } }
@media (prefers-reduced-motion: no-preference) {
  .pp-world .arc { animation: ppdash 2s linear infinite; }
  .pp-world .nd .pulse { animation: pppulsering 3s ease-out infinite; animation-delay: calc(var(--i, 0) * .45s); }
  .js .pp-world.reveal:not(.in) .land { opacity: 0; } .pp-world .land { transition: opacity 1.4s ease; }
}

/* products overview: link on the capability cards that have a detail page */
.cap-card .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: none; }
.cap-card .go svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.cap-card .go:hover svg { transform: translateX(3px); }

/* ---------- Utility bar (Partner With Us / Partner Login) ----------
   Sits at the very top of the header. The header is sticky with a negative top offset, so this bar scrolls away with the page
   while the main menu stays pinned (and keeps its hide-on-scroll behaviour); --hdr-h excludes the bar (see site.js). */
:root { --ubar: 0px; }  /* the separate Partner Login strip is gone; Partner Login now sits beside Request a Demo */
.site-header { top: calc(-1 * var(--ubar)); }
.util-bar { height: var(--ubar); background: linear-gradient(90deg, #0b4fd6 0%, #4b45d8 55%, #7b5cf0 100%); color: #fff; }
.util-in { height: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.util-link, .util-login > summary { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer; list-style: none; padding: 4px 2px; border-radius: 6px; }
.util-login > summary::-webkit-details-marker { display: none; }
.util-link:hover, .util-login > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.util-link:focus-visible, .util-login > summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.util-login { position: relative; }
.util-login svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.util-login[open] svg { transform: rotate(180deg); }
.util-login ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; min-width: 260px; margin: 0; padding: 8px; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -18px rgba(3, 8, 20, .45), 0 0 0 1px rgba(18, 29, 48, .08); }
.util-login li a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--ink-800); text-decoration: none; }
.util-login li a:hover, .util-login li a:focus-visible { background: #eef3ff; color: var(--blue); }
.mobile-util { display: none; }
/* Partner Login inside the main navigation, immediately before Request a Demo */
.nav-cta .util-login > summary { color: var(--ink-800); font-size: 14.5px; padding: 8px 10px; }
.nav-cta .util-login > summary:hover { color: var(--blue); text-decoration: none; }
.nav-cta .util-login > summary:focus-visible { outline: 2px solid var(--blue); }
.nav-cta .util-login ul { top: calc(100% + 12px); z-index: 120; }
.nav-cta .util-login { margin-right: 4px; }
/* Partner Login joined the main navigation, so tighten it a little on narrower desktops and tablets to keep the header on one row */
@media (max-width: 1220px) and (min-width: 981px) {
  .nav { gap: 12px; }
  .nav-menu .nav-link { padding: 0 10px; font-size: 14px; }
  .nav-cta { gap: 4px; }
  .nav-cta .util-login > summary { font-size: 13.5px; padding: 6px 6px; white-space: nowrap; }
  .nav-cta .btn { padding: 0 13px; font-size: 13.5px; white-space: nowrap; }
  .brand img { width: 140px; height: auto; }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .nav { gap: 8px; }
  .nav-menu .nav-link { padding: 0 8px; font-size: 13.5px; }
  .nav-cta .util-login > summary { font-size: 13px; padding: 6px 4px; gap: 3px; } .nav-cta .util-login > summary svg { width: 12px; height: 12px; }
  .nav-cta .btn { padding: 0 11px; font-size: 13px; }
  .brand img { width: 128px; }
}
.mobile-util .util-login > summary { color: var(--ink-800); font-size: 16px; padding: 14px 0; } .mobile-util .util-login ul { position: static; box-shadow: none; padding: 0 0 8px 8px; min-width: 0; }
@media (max-width: 980px) {
  .mobile-util { display: block; }
}

/* footer: balanced columns (Products lists its links in three columns) */
@media (min-width: 981px) {
  .foot-top { grid-template-columns: 1.15fr .85fr .85fr 2.5fr .85fr; }
  .foot-col--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 22px; }
}
@media (max-width: 980px) { .foot-col--wide { grid-column: 1 / -1; } .foot-col--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; } }
@media (max-width: 640px) { .foot-col--wide ul { grid-template-columns: minmax(0, 1fr); } }

/* ===== Homepage hero: keyword H1 + "Make Learning Visible." tagline ===== */
.hf .hero-copy .hero-tagline { margin: 0 0 clamp(8px, 1.4vh, 14px); font-size: clamp(15px, 1.25vw, 18px); font-weight: 700; letter-spacing: .02em; color: var(--ink-700); }
.hf .hero-copy .hero-tagline .accent { color: var(--blue); }
.hf .hero-copy .hero-h1 { font-size: inherit; line-height: 1.04; }
.hf .hero-copy .hero-h1 .hero-display { display: block; font-size: min(clamp(30px, 3.3vw, 46px), 6.1vh); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink-900); text-wrap: balance; }
.hf .hero-copy .hero-h1 .hero-sub { display: block; margin-top: clamp(6px, 1vh, 12px); font-size: min(clamp(18px, 1.6vw, 24px), 3.2vh); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink-500); }
@media (max-width: 1099px) { .hf .hero-copy .hero-h1 .hero-display { font-size: clamp(32px, 4.6vw, 48px); } }

/* homepage hero: the headline starts level with the top of the hero visual (no downward shift) */
.hf .hero-copy { padding-top: 0 !important; }

/* Solutions overview page */
.sol-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sol-card { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; background: #fff; border: 1px solid var(--line-soft); border-radius: 22px; color: inherit; text-decoration: none; box-shadow: 0 10px 30px -20px rgba(0, 71, 179, .35); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.sol-card:hover { transform: translateY(-6px); border-color: #9cc0ff; box-shadow: 0 24px 44px -24px rgba(0, 71, 179, .5); }
.sol-card small { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.sol-card h3 { font-size: 24px; }
.sol-card p { margin: 0; color: var(--ink-500); line-height: 1.6; }
.sol-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sol-chips span { padding: 6px 12px; border-radius: 999px; background: var(--tint-ops); color: var(--blue-deep); font-size: 13px; font-weight: 600; }
.sol-card .link-arrow { margin-top: auto; padding-top: 12px; }
@media (max-width: 900px) { .sol-grid { grid-template-columns: minmax(0, 1fr); } }
/* Mobile polish */
@media (max-width: 820px) {
  .link-arrow, .sub-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-col a, .legal-links a { display: inline-block; padding-block: 6px; }
  .hv-chip b, .float-chip b { font-size: 11px; }
}

/* ---- Homepage: continuous assessment loop (one connected racetrack) ---- */
.cl { background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%); }
.lp { margin-top: 36px; }
.lp-canvas { position: relative; max-width: 1180px; margin: 0 auto; }
.lp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.lp-base { fill: none; stroke: #d6e4ff; stroke-width: 3; }
.lp-flow { fill: none; stroke: #9cc0ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 16; opacity: .9; }
.lp-trail { fill: none; stroke: url(#lpg); stroke-width: 5; stroke-linecap: round; }
.lp-trail-glow { stroke-width: 9; opacity: .55; }
.lp-dot-halo { fill: rgba(0, 102, 255, .22); }
.lp-dot-core { fill: #fff; stroke: var(--blue); stroke-width: 4; }
.lp-node { color: #fff; }
.lp-disc { fill: var(--blue); transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease), filter .5s; filter: saturate(.7); }
.lp-n2 .lp-disc { fill: var(--cyan); } .lp-n3 .lp-disc { fill: #7a5cff; } .lp-n4 .lp-disc { fill: #1d6fff; } .lp-n5 .lp-disc { fill: #0fb5c9; }
.lp-ico { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lp-halo { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0; color: var(--blue); transform-box: fill-box; transform-origin: center; }
.lp-bdg { fill: #fff; stroke: #bcd5ff; stroke-width: 2; }
.lp-node text { font: 700 13px var(--font); fill: var(--blue); }
.lp-node.is-on .lp-disc { transform: scale(1.14); filter: none; }
.lp-node.is-on .lp-halo { opacity: .7; animation: lppulse 1.4s ease-out infinite; }
.lp-node.is-on .lp-bdg { stroke: var(--blue); }

.lp-steps { list-style: none; margin: 0; padding: 0; position: absolute; left: 5%; width: 90%; top: 31%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lp-step { padding: 0 12px; text-align: center; transition: opacity .5s; opacity: .62; }
.lp-step.is-on { opacity: 1; }
.lp-step h3 { font-size: 20px; margin-bottom: 6px; }
.lp-step p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-500); }
.lp-step.is-on h3 { color: var(--blue-deep); }
.lp-mic { display: none; }

.lp-badge { position: absolute; left: 50%; top: 82.3%; transform: translate(-50%, -50%); margin: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 11px 22px; background: #fff; border: 1px solid #cfe0ff; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--blue-deep); box-shadow: 0 8px 24px -14px rgba(0, 71, 179, .5); transition: box-shadow .5s, border-color .5s; }
.lp-badge svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-badge span, .lp-badge em { font-style: normal; color: var(--ink-500); font-weight: 500; }
.lp.is-return .lp-badge { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(0, 102, 255, .12), 0 8px 24px -14px rgba(0, 71, 179, .5); }
.lp.is-return .lp-badge svg { animation: lpspin 1.6s linear infinite; }
.lp.is-static .lp-dot, .lp.is-static .lp-trail { display: none; }

@keyframes lppulse { 0% { transform: scale(.85); opacity: .75; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes lpspin { to { transform: rotate(360deg); } }
@keyframes lpdrip { 0% { background-position: 0 -40px; } 100% { background-position: 0 40px; } }

/* narrow screens: vertical flow, the connecting line fills as each step takes its turn */
@media (max-width: 900px) {
  .lp-svg { display: none; }
  .lp-steps { position: static; width: auto; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 520px; margin: 0 auto; }
  .lp-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; text-align: left; padding: 0 0 26px; opacity: .7; }
  .lp-step::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 3px; border-radius: 3px; background: #d6e4ff; }
  .lp-step.is-on::before { background: linear-gradient(180deg, var(--blue), var(--cyan), var(--blue)) 0 0 / 100% 80px; animation: lpdrip 1.1s linear infinite; }
  .lp-step.is-past::before { background: var(--blue); }
  .lp-mic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; transition: transform .4s var(--ease); }
  .lp-mic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .lp-n2.lp-mic { background: var(--cyan); } .lp-n3.lp-mic { background: #7a5cff; } .lp-n5.lp-mic { background: #0fb5c9; }
  .lp-step.is-on .lp-mic { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(0, 102, 255, .16); }
  .lp-step h3 { font-size: 18px; margin: 4px 0 4px; }
  .lp-badge { position: static; transform: none; margin: 8px auto 0; width: max-content; max-width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .lp-node.is-on .lp-halo, .lp.is-return .lp-badge svg, .lp-step.is-on::before { animation: none; } }

/* Solutions overview: four across; Schools & K-12 detail page */
.sol-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sol-grid--4 .sol-card { padding: 28px 22px; }
.sol-grid--4 .sol-card h3 { font-size: 21px; }
@media (max-width: 1100px) { .sol-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sol-grid--4 { grid-template-columns: minmax(0, 1fr); } }

.k12-grid { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k12-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k12-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; gap: 16px; }
.k12-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.k12-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 26px 22px; box-shadow: 0 10px 30px -22px rgba(0, 71, 179, .35); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.k12-card:hover { transform: translateY(-4px); border-color: #b9d1ff; box-shadow: 0 22px 40px -24px rgba(0, 71, 179, .45); }
.k12-card h3 { font-size: 18px; margin: 14px 0 8px; }
.k12-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-500); }
.k12-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--tint-ops); color: var(--blue); }
.k12-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.k12-tag { margin: 36px 0 0; text-align: center; font-size: clamp(17px, 2vw, 21px); font-weight: 700; letter-spacing: -.01em; color: var(--blue-deep); }
.k12-qt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 34px; }
.k12-qt > b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.k12-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.k12-chips li { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid #cfe0ff; color: var(--blue-deep); font-size: 13.5px; font-weight: 600; }
.k12-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.k12-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.k12-split--flip > :first-child { order: 0; }
.k12-split .lede { margin-top: 16px; }
.k12-split .k12-tag { text-align: left; }
.k12-fig { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -34px rgba(0, 71, 179, .5); background: #fff; }
.k12-fig img { display: block; width: 100%; height: auto; }
.k12-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; }
.k12-list li { position: relative; padding-left: 22px; }
.k12-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 102, 255, .14); }
.k12-list b { display: block; font-size: 16.5px; color: var(--ink-900); margin-bottom: 2px; }
.k12-list span { color: var(--ink-500); font-size: 15px; line-height: 1.55; }
.k12-flow { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; counter-reset: k; }
.k12-flow::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #cfe0ff, var(--blue), #cfe0ff); }
.k12-step { position: relative; text-align: center; padding: 0 6px; }
.k12-num { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; box-shadow: 0 0 0 6px #fff, 0 10px 20px -8px rgba(0, 102, 255, .6); }
.k12-step h3 { font-size: 17px; margin: 16px 0 6px; }
.k12-step p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-500); }
.k12-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.k12-panel { background: #fff; border: 1px solid var(--line-soft); border-radius: 20px; padding: 26px; }
.k12-panel small { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.k12-trust { max-width: 860px; margin: 0 auto; text-align: center; padding: 48px 36px; border-radius: 28px; background: linear-gradient(135deg, #eef4ff, #e4f6fb); border: 1px solid #d6e6ff; }
.k12-trust h2 { margin: 12px 0 14px; }
.k12-trust p { margin: 0 auto; max-width: 680px; color: var(--ink-700); line-height: 1.65; }
.k12-trust .k12-who { margin-top: 22px; font-weight: 700; color: var(--blue-deep); }
@media (max-width: 1100px) { .k12-grid, .k12-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k12-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k12-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; } .k12-flow::before { display: none; } }
@media (max-width: 900px) { .k12-split, .k12-split--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; } .k12-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .k12-grid, .k12-grid--3, .k12-grid--5, .k12-grid--2 { grid-template-columns: minmax(0, 1fr); } .k12-flow { grid-template-columns: minmax(0, 1fr); } .k12-trust { padding: 34px 20px; } }
/* Solutions overview: animated background + sector rows */
.sv-hero { position: relative; overflow: hidden; padding-bottom: 72px; background: linear-gradient(180deg, #f3f8ff 0%, #fff 100%); }
.sv-hero > .wrap { position: relative; z-index: 1; }
.sv-hero-in { max-width: 860px; margin: 0 auto; text-align: center; padding-top: 28px; }
.sv-hero-in .lede { margin: 18px auto 0; max-width: 720px; }
.sv-sub { margin: 14px auto 0; max-width: 700px; color: var(--ink-500); line-height: 1.65; }
.sv-hero .k12-tag { margin-top: 26px; }
.sv-jump { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sv-jump a { display: inline-block; padding: 9px 16px; border-radius: 999px; background: rgba(255, 255, 255, .85); border: 1px solid #cfe0ff; color: var(--blue-deep); font-weight: 600; font-size: 14px; text-decoration: none; backdrop-filter: blur(6px); transition: background .25s, transform .25s; }
.sv-jump a:hover { background: #fff; transform: translateY(-2px); }
.sv-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sv-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.sv-orb.o1 { width: 520px; height: 520px; left: -120px; top: -160px; background: #9cc0ff; }
.sv-orb.o2 { width: 460px; height: 460px; right: -100px; top: 10%; background: #8de8f5; opacity: .5; }
.sv-orb.o3 { width: 380px; height: 380px; left: 38%; bottom: -200px; background: #cdbfff; opacity: .5; }
.sv-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(0, 102, 255, .22) 1.3px, transparent 1.6px); background-size: 30px 30px; -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 75%); opacity: .55; }
.sv-chip { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(255, 255, 255, .9); border: 1px solid #d6e4ff; color: var(--blue); box-shadow: 0 14px 30px -16px rgba(0, 71, 179, .5); }
.sv-chip svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sv-chip.c1 { left: 7%; top: 22%; } .sv-chip.c2 { right: 8%; top: 18%; color: #7a5cff; } .sv-chip.c3 { left: 14%; bottom: 14%; color: #0aa5bd; }
.sv-chip.c4 { right: 14%; bottom: 18%; } .sv-chip.c5 { left: 3%; top: 56%; width: 44px; height: 44px; color: #7a5cff; } .sv-chip.c6 { right: 3%; top: 54%; width: 44px; height: 44px; color: #0aa5bd; }
.sv-ring { position: absolute; width: 760px; max-width: 120%; left: 50%; top: 52%; transform: translate(-50%, -50%); fill: none; }
.sv-ring circle { stroke: #c4d8ff; stroke-width: 1; stroke-dasharray: 3 7; }
.sv-ring .orbit { fill: var(--blue); stroke: none; transform-origin: 200px 200px; }
.sv-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(0, 102, 255, .18) 1.2px, transparent 1.5px); background-size: 28px 28px; -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); opacity: .6; }
.sv-shared { position: relative; overflow: hidden; } .sv-shared > .wrap { position: relative; }
.sv-sectors { position: relative; }

.sv-rows { display: grid; gap: 28px; margin-top: 52px; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px; background: #fff; border: 1px solid var(--line-soft); border-radius: 28px; box-shadow: 0 24px 60px -40px rgba(0, 71, 179, .45); position: relative; overflow: hidden; }
.sv-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.sv-row--flip .sv-copy { order: 2; }
.sv-copy { position: relative; }
.sv-num { position: absolute; right: -4px; top: -26px; font-size: 120px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px #d6e4ff; pointer-events: none; }
.sv-kick { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.sv-copy h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.2; margin-bottom: 14px; }
.sv-name { display: block; font-size: 15px; font-weight: 700; color: var(--ink-500); letter-spacing: 0; margin-bottom: 8px; }
.sv-copy p { margin: 0 0 12px; color: var(--ink-500); line-height: 1.65; }
.sv-copy .k12-chips { margin: 18px 0 22px; }
.sv-vis { position: relative; margin: 0; border-radius: 22px; overflow: hidden; background: #eef4ff; aspect-ratio: 4 / 3; }
.sv-vis img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.sv-row:hover .sv-vis img { transform: scale(1.04); }
.sv-vis-glow { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); }
.sv-chain { text-align: center; font-size: clamp(15px, 1.8vw, 20px); font-weight: 700; color: var(--ink-900); margin: 28px 0 0; letter-spacing: .02em; text-transform: uppercase; }
.sv-chain i { font-style: normal; color: var(--blue); margin: 0 8px; }
.sv-vgrid .k12-card { position: relative; overflow: hidden; }
.sv-vgrid .k12-card::after { content: ""; position: absolute; inset: auto -30% -60% -30%; height: 80%; background: radial-gradient(closest-side, rgba(0, 102, 255, .10), transparent); opacity: 0; transition: opacity .4s; }
.sv-vgrid .k12-card:hover::after { opacity: 1; }
.sv-flow::before { background: linear-gradient(90deg, #cfe0ff, var(--blue), var(--cyan), var(--blue), #cfe0ff); background-size: 200% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .sv-orb.o1 { animation: svdrift 18s ease-in-out infinite; } .sv-orb.o2 { animation: svdrift 22s ease-in-out -6s infinite reverse; } .sv-orb.o3 { animation: svdrift 20s ease-in-out -11s infinite; }
  .sv-grid { animation: svpan 30s linear infinite; }
  .sv-dots { animation: svpan 40s linear infinite; }
  .sv-chip { animation: svfloat 7s ease-in-out infinite; } .sv-chip.c2 { animation-delay: -1.5s; } .sv-chip.c3 { animation-delay: -3s; animation-duration: 8s; } .sv-chip.c4 { animation-delay: -4.5s; } .sv-chip.c5 { animation-delay: -2.2s; animation-duration: 9s; } .sv-chip.c6 { animation-delay: -5.5s; animation-duration: 6.5s; }
  .sv-ring { animation: svspin 60s linear infinite; } .sv-ring .orbit { animation: none; }
  .sv-vis-glow { animation: svsheen 5.5s ease-in-out infinite; } .sv-row:nth-child(2) .sv-vis-glow { animation-delay: 1.4s; } .sv-row:nth-child(3) .sv-vis-glow { animation-delay: 2.8s; } .sv-row:nth-child(4) .sv-vis-glow { animation-delay: 4.2s; }
  .sv-flow::before { animation: svflow 6s linear infinite; }
  .sv-num { animation: svnum 6s ease-in-out infinite; }
  @keyframes svdrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.12); } }
  @keyframes svpan { to { background-position: 30px 30px; } }
  @keyframes svfloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(4deg); } }
  @keyframes svspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
  @keyframes svsheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
  @keyframes svflow { to { background-position: -200% 0; } }
  @keyframes svnum { 0%, 100% { -webkit-text-stroke-color: #d6e4ff; } 50% { -webkit-text-stroke-color: #9cc0ff; } }
}
@media (max-width: 1000px) { .sv-row, .sv-row--flip { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px; } .sv-row--flip .sv-copy { order: 0; } .sv-num { font-size: 84px; top: -18px; } }
@media (max-width: 700px) { .sv-chip.c1, .sv-chip.c2, .sv-chip.c5, .sv-chip.c6 { display: none; } .sv-chip.c3 { left: 4%; bottom: 6%; } .sv-chip.c4 { right: 4%; bottom: 8%; } .sv-row { padding: 22px; border-radius: 22px; } .sv-orb { filter: blur(50px); } .sv-sub { font-size: 15px; } }
.sv-hero h1 .accent { color: var(--blue); }

.sv-num { font-size: 96px; top: -40px; right: 0; z-index: 0; } .sv-copy > *:not(.sv-num) { position: relative; z-index: 1; }

/* Trust strip: even alignment on desktop and mobile */
.trust-strip .logos { align-items: center; }
.trust-strip .logos li { min-width: 0; }
.trust-strip .ts-assure { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)) ; justify-content: center; justify-items: start; align-items: center; column-gap: 56px; row-gap: 14px; }
.trust-strip .ts-assure .more { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 900px) {
  .trust-strip .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: center; padding-block: 28px; }
  .trust-strip .logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; align-items: center; gap: 18px 8px; }
  .trust-strip .logos li { flex: none; width: 100%; justify-content: center; }
  .trust-strip .logos img { width: 56px; height: 56px; }
}
@media (max-width: 640px) {
  .trust-strip .ts-assure { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; justify-items: center; padding-top: 20px; }
  .trust-strip .ts-assure li { flex-direction: column; text-align: center; gap: 8px; }
  .trust-strip .ts-assure span { align-items: center; text-align: center; }
  .trust-strip .ts-assure b { font-size: 13.5px; }
  .trust-strip .ts-assure span { font-size: 12px; }
  .trust-strip .ts-assure .more { margin-top: 4px; }
}
@media (max-width: 360px) { .trust-strip .logos img { width: 46px; height: 46px; } }
/* Homepage hero chips: even 4 x 2 grid (2 x 4 on small phones) */
.hf .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 560px; }
.hf .chips .chip { width: 100%; justify-content: center; padding: 0 10px; white-space: nowrap; }
@media (max-width: 520px) { .hf .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } }

/* partner logos and integration groups */
.pt-logos { list-style: none; margin: 34px auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pt-logos li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 190px; padding: 28px 24px 22px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 60, 160, .1), 0 22px 40px -28px rgba(10, 50, 140, .45); }
.pt-logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; }
.pt-logos b { font-size: 14px; font-weight: 700; color: var(--ink-700); letter-spacing: .01em; }
.ig-groups { margin-top: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.ig-group { display: flex; flex-direction: column; padding: 24px 24px 26px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 60, 160, .1), 0 18px 34px -26px rgba(10, 50, 140, .4); }
.ig-group h3 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.ig-group ul { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; align-content: start; }
.ig-group li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 118px; padding: 20px 14px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 60, 160, .1); }
.ig-group li img { display: block; width: auto; height: auto; max-width: 150px; max-height: 40px; object-fit: contain; }
.ig-group li span { font-size: 12.5px; font-weight: 600; color: var(--ink-500); text-align: center; }
.pt-hero-logos { margin-top: 34px; max-width: 560px; } .pt-hero-label { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.pt-hero-logos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pt-hero-logos li { display: grid; place-items: center; height: 84px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 60, 160, .1), 0 14px 28px -22px rgba(10, 50, 140, .45); }
.pt-hero-logos img { display: block; max-width: 100%; max-height: 36px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 520px) { .pt-hero-logos ul { gap: 8px; } .pt-hero-logos li { height: 62px; padding: 8px; border-radius: 14px; } .pt-hero-logos img { max-height: 24px; } }
.ig-hero-logos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ig-hero-logos li { display: grid; place-items: center; height: 46px; padding: 0 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 60, 160, .1), 0 12px 24px -18px rgba(10, 50, 140, .45); }
.ig-hero-logos img { display: block; height: 20px; width: auto; max-width: none; } .ig-hero-logos li:last-child img { height: 24px; }
@media (max-width: 520px) { .ig-hero-logos li { height: 42px; padding: 0 12px; } .ig-hero-logos img { height: 17px; } .ig-hero-logos li:last-child img { height: 21px; } }
.ig-note { margin: 18px 0 0; font-size: 12.5px; color: var(--ink-500); }
@media (max-width: 860px) { .ig-groups { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pt-logos { grid-template-columns: 1fr; } .ig-groups { grid-template-columns: 1fr; } }

/* psychometric methods (definition list) */
.psy-dl { margin: 28px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.psy-dl dt { padding: 18px 0 4px; font-size: 17px; font-weight: 700; color: var(--ink-900); border-top: 0; }
.psy-dl dd { margin: 0; padding: 0 0 18px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); line-height: 1.6; max-width: 70ch; }
.psy-links { margin-top: 22px; color: var(--ink-700); }
/* contextual related-links sentence */
.ctx-links { margin: 28px 0 0; padding: 14px 18px; border-left: 3px solid var(--blue); background: var(--bg-50, #f6f9ff); border-radius: 0 12px 12px 0; color: var(--ink-700); line-height: 1.6; font-size: 15.5px; }
.ctx-links a { font-weight: 600; }
.ctx-wrap { padding-top: 12px; padding-bottom: 12px; }
/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) * var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh * var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* accessibility panel (inserted into assets/css/site.css before the homepage hero block by _import/seo/install-a11y.js) */
.a11y-fab { position: fixed; z-index: 9000; left: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: #0b4fe0; color: #fff; box-shadow: 0 12px 26px -10px rgba(5, 30, 120, .7), 0 0 0 3px #fff; }
.a11y-fab:hover { background: #0a43bf; } .a11y-fab:focus-visible { outline: 3px solid #ff9f1a; outline-offset: 3px; }
.a11y-ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.a11y-panel { position: fixed; z-index: 9001; left: 16px; bottom: 78px; width: min(380px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 100px)); overflow: auto; border-radius: 22px; background: #eef3ff; box-shadow: 0 30px 70px -20px rgba(3, 20, 90, .6), 0 0 0 1px rgba(10, 60, 200, .12); color: #0b1b3f; font: 500 14px/1.35 Inter, system-ui, sans-serif; }
.a11y-panel[hidden], .a11y-modal[hidden] { display: none; }
.a11y-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: linear-gradient(135deg, #0b55e6, #0a3bb3); color: #fff; }
.a11y-head h1 { margin: 0 auto 0 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.a11y-hbtn { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; } .a11y-hbtn:hover { background: rgba(255, 255, 255, .28); } .a11y-hbtn .a11y-ic { width: 20px; height: 20px; } .a11y-hbtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.a11y-group { margin: 12px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 60, 200, .08); }
.a11y-group h2 { margin: 2px 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #3a4b69; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-opt { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; border: 1px solid #dbe5fb; border-radius: 12px; background: #f6f9ff; color: #0b1b3f; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.a11y-opt.wide { grid-column: 1 / -1; }
.a11y-opt:hover { border-color: #0b55e6; background: #eef4ff; } .a11y-opt:focus-visible { outline: 3px solid #ff9f1a; outline-offset: 2px; }
.a11y-opt.on { background: #0b55e6; border-color: #0b55e6; color: #fff; }
.a11y-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0b55e6; box-shadow: 0 0 0 1px #dbe5fb; } .a11y-opt.on .a11y-ico { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; } .a11y-ico .a11y-ic { width: 18px; height: 18px; }
.a11y-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.a11y-foot { margin: 0 12px 12px; font-size: 12px; color: #52607a; text-align: center; }
.a11y-modal { position: fixed; inset: 0; z-index: 9100; display: grid; place-items: center; padding: 16px; background: rgba(5, 14, 46, .6); }
.a11y-modal-card { width: min(560px, 100%); max-height: min(80vh, 680px); display: flex; flex-direction: column; border-radius: 20px; background: #fff; color: #0b1b3f; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .6); font: 500 15px/1.5 Inter, system-ui, sans-serif; }
.a11y-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e3ebfa; } .a11y-modal-head h2 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.a11y-modal-close { padding: 8px 16px; border: 0; border-radius: 99px; background: #0b55e6; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .a11y-modal-close:focus-visible { outline: 3px solid #ff9f1a; outline-offset: 2px; }
.a11y-modal-body { overflow: auto; padding: 8px 20px 20px; } .a11y-modal-body h3 { margin: 16px 0 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #3a4b69; } .a11y-modal-body ul { margin: 0; padding: 0; list-style: none; } .a11y-modal-body li { margin: 0; } .a11y-modal-body a { display: block; padding: 7px 0; color: #0b55e6; font-weight: 600; text-decoration: none; } .a11y-modal-body a:hover { text-decoration: underline; }
.a11y-struct .lv2 { padding-left: 16px; } .a11y-struct .lv3 { padding-left: 32px; } .a11y-struct .lv1 a { font-weight: 800; color: #0b1b3f; }

/* the preference classes (set on <html>) */
html.a11y-lh body *, html.a11y-lh body { line-height: 1.85 !important; }
html.a11y-left body :where(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, dd, dt, summary, label) { text-align: left !important; }
html.a11y-font body, html.a11y-font body * { font-family: Verdana, "Atkinson Hyperlegible", Arial, sans-serif !important; letter-spacing: .01em !important; }
html.a11y-noimg body img, html.a11y-noimg body picture, html.a11y-noimg body video, html.a11y-noimg body canvas { opacity: 0 !important; }
html.a11y-pause *, html.a11y-pause *::before, html.a11y-pause *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-links body a:not(.a11y-fab):not(.btn) { background: #fff200 !important; color: #000 !important; text-decoration: underline !important; text-underline-offset: 3px !important; outline: 2px solid #000; outline-offset: 1px; }
html.a11y-links body .btn { outline: 3px solid #fff200; outline-offset: 2px; text-decoration: underline !important; }
html.a11y-focus *:focus, html.a11y-focus *:focus-visible { outline: 4px solid #ff6a00 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important; }
.a11y-mask { position: fixed; left: 0; right: 0; z-index: 9050; background: rgba(0, 0, 0, .72); pointer-events: none; } .a11y-mask-top { top: 0; height: 40vh; } .a11y-mask-bottom { bottom: 0; top: 60vh; }
@media (max-width: 700px) { .a11y-fab { width: 46px; height: 46px; bottom: 84px; } .a11y-panel { bottom: 138px; max-height: calc(100vh - 160px); } }
@media (prefers-reduced-motion: no-preference) { .a11y-panel { animation: a11y-in .18s ease-out; } @keyframes a11y-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }

/* the panel, its button and its dialogs stay at normal size while the page text is enlarged */
html.a11y-zoom .a11y-fab, html.a11y-zoom .a11y-panel, html.a11y-zoom .a11y-modal { zoom: calc(1 / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-panel { max-height: calc((100vh - 100px) / var(--a11y-z, 1)); }
html.a11y-zoom .a11y-modal-card { max-height: calc(80vh / var(--a11y-z, 1)); }

/* ---- mobile fixes (begin) ---- */
/* the header's rounded backing extends 16px past the nav row, which made every page scroll sideways between 700px and 1320px wide */
@media (max-width: 1320px) { .site-header .nav::before { inset: 6px 0; } }
@media (max-width: 700px) {
  .a11y-fab { width: 42px; height: 42px; bottom: 90px; left: 10px; transition: opacity .25s, transform .25s; }
  .a11y-fab.a11y-away { opacity: 0; transform: scale(.7); pointer-events: none; }
}
@media (max-width: 560px) {
  /* chapter tabs: one per row, words are never split */
  .st-chapters .st-rail, .m-phone .st-chapters .st-rail { flex-direction: column; flex-wrap: nowrap; }
  .st-chapters .st-tab, .m-phone .st-chapters .st-tab { flex: 0 0 auto; width: 100%; }
  .st-chapters .st-txt b { overflow-wrap: normal; word-break: normal; hyphens: none; }
  /* decorative numerals sat on top of the section labels */
  .sv-num { display: none; }
  .pp-ring-c small { font-size: 10px; letter-spacing: .02em; max-width: 90px; line-height: 1.2; }
  .ai-flow { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 400px) {
  /* OSSAI rubric card: the four rating buttons forced the card wider than a 320px screen */
  .rubric { border-width: 6px; padding: 12px; border-radius: 24px; }
  .crit .rscale { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .crit .rscale span { font-size: 10.5px; padding: 8px 2px; overflow-wrap: anywhere; }
}
/* ---- mobile fixes (end) ---- */

/* ---- website corrections (begin) ---- */
/* Type scale: item titles, rows, tickers and statements stay clearly smaller than the section title (h2: 30 to 42px). Applies to every product and solution page. */
.vx-mrow h3 { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.12; letter-spacing: -.02em; }
.vx-row h3 { font-size: clamp(20px, 2.1vw, 28px); }
.vx-lrow h3 { font-size: clamp(19px, 1.9vw, 25px); }
.vx-ticker-row span { font-size: clamp(20px, 2.5vw, 32px); }
.he-marq .vx-ticker-row span { font-size: clamp(20px, 2.4vw, 30px); }
.vx-supports .vx-ticker-row span { font-size: clamp(16px, 1.7vw, 22px); }
.vx-ticker-row span::after { width: 9px; height: 9px; margin-left: 22px; }
.vx-ticker-row span { padding-right: 22px; }
.vx-skill-list b { font-size: clamp(20px, 2.2vw, 28px); }
.vx-trio b, .vx-inline--lg { font-size: clamp(18px, 1.9vw, 24px); }
.vx-voice p { font-size: clamp(18px, 1.8vw, 24px); }
.pp-save h3 { font-size: clamp(22px, 2.4vw, 30px); }
.manifesto .big { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; }
.belief h2 { font-size: clamp(26px, 2.7vw, 36px); max-width: 600px; }
.fl-big { font-size: clamp(20px, 2.2vw, 28px); }
.story-art .who { font-size: clamp(26px, 2.6vw, 32px); }
.pe-copy h3 { font-size: clamp(24px, 2.4vw, 30px); }
.vx-mrow { padding: clamp(20px, 2.6vw, 34px) 0; }
@media (max-width: 560px) { .vx-ticker-row span { font-size: 19px; } .vx-mrow h3 { font-size: 22px; } }
/* features: capability detail under each pillar */
.fo-cap { margin-top: 18px; padding: 20px 22px; border-radius: 6px 18px 18px 18px; background: #fff; border: 1px solid var(--line-soft); }
.fo-cap > b { display: block; margin-bottom: 12px; font-size: 15px; color: var(--ink-900); }
.fo-cap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fo-cap li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }
.fo-cap li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 2px; background: var(--blue); transform: rotate(45deg); }
.fo-cap li span { color: var(--ink-900); font-weight: 600; }
/* article extras: byline, lead, tables, risk callouts, download box */
.art-byline { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-700, #33466f); } .art-byline b { color: var(--ink-900); } .art-byline span { color: var(--ink-500); font-size: 13px; }
.art-lead { font-size: 19px; line-height: 1.6; color: var(--ink-900); font-weight: 500; }
.prose .art-table { overflow-x: auto; margin: 22px 0; border: 1px solid var(--line-soft); border-radius: 12px; } .prose .art-table table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; } .prose .art-table th { background: #eef4ff; color: var(--ink-900); text-align: left; padding: 10px 12px; font-weight: 700; } .prose .art-table td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-700, #33466f); }
.prose .art-risk { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 18px 0; padding: 14px 18px; border-radius: 12px; background: #fff7ec; border: 1px solid #f6d9b0; } .prose .art-risk b { color: #9a5412; } .prose .art-risk span { color: var(--ink-700, #33466f); font-size: 14.5px; }
.prose blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; color: var(--ink-500); }
.dl-box--art { margin: 26px 0; max-width: none; }
/* wide tables use the full article width; on phones every row becomes a labelled card */
.art-layout:has(.art-table--wide) { grid-template-columns: minmax(0, 1fr); }
.art-layout:has(.art-table--wide) .prose > :not(.art-table):not(.art-table--wide) { max-width: 760px; }
.art-layout:has(.art-table--wide) .art-aside { position: static; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; margin-top: 8px; }
.prose .art-table--wide table { min-width: 0; table-layout: auto; }
.prose .art-table--wide th, .prose .art-table--wide td { padding: 12px 14px; }
@media (max-width: 700px) {
  .art-layout:has(.art-table--wide) .art-aside { grid-template-columns: minmax(0, 1fr); }
  .prose .art-table, .prose .table-wrap { overflow: visible; border: 0; }
  .prose table.tbl-stack, .prose table.tbl-stack tbody, .prose table.tbl-stack thead, .prose table.tbl-stack tr, .prose table.tbl-stack td { display: block; width: 100%; min-width: 0; }
  .prose table.tbl-stack tr.tbl-head, .prose table.tbl-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table.tbl-stack tr { margin: 0 0 12px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; overflow: hidden; }
  .prose table.tbl-stack td { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
  .prose table.tbl-stack td:last-child { border-bottom: 0; }
  .prose table.tbl-stack td::before { content: attr(data-label); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-500); }
  .prose table.tbl-stack td:first-child { display: block; background: #eef4ff; font-weight: 700; color: var(--ink-900); } .prose table.tbl-stack td:first-child::before { content: none; }
  .prose table.tbl-stack td.is-empty { display: none; }
  .prose table.tbl-stack td p { margin: 0; }
  /* checklist rows: item, then Yes / No / N/A tick boxes in one line */
  .prose table.tbl-check tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 10px 14px; }
  .prose table.tbl-check td, .prose table.tbl-check td.is-empty { display: block; width: auto; padding: 0; border: 0; background: none; }
  .prose table.tbl-check td:first-child { flex: 1 1 100%; background: none; font-weight: 600; padding-bottom: 4px; }
  .prose table.tbl-check td:not(:first-child):not(:last-child)::before { content: attr(data-label) " \2610"; font-size: 14px; font-weight: 600; color: var(--ink-700); letter-spacing: 0; }
  .prose table.tbl-check td:last-child { display: none; }
}
.prose .art-more { margin: 4px 0 18px; font-size: 14px; font-style: italic; color: var(--ink-500); } .prose .art-more-box { margin: 28px 0 0; padding: 18px 22px; border-radius: 14px; background: #eef4ff; border: 1px solid #cfe0ff; } .prose .art-more-box b { color: var(--ink-900); } .prose .art-more-box p { margin: 6px 0 0; font-size: 15px; }
/* placed section images */
.sect-pic { margin: 0 0 22px; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: var(--shadow-md), 0 0 0 1px var(--line-soft); } .sect-pic img { display: block; width: 100%; height: auto; }
.pic-stack { display: grid; gap: 18px; align-content: start; min-width: 0; } .pic-stack > .sect-pic { margin: 0; }
.sect-pic--two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; background: none; box-shadow: none; border-radius: 0; overflow: visible; } .sect-pic--two img { border-radius: 14px; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-soft); }
section > .wrap > .sect-pic, .pad-tight .sect-pic { max-width: none; margin: 34px 0 30px; } .pad-tight { padding-block: 8px 28px; }
.mega-feature .mf-img { display: block; width: 100%; height: 0; flex: 1 1 150px; min-height: 150px; margin: 10px 0 8px; border-radius: 12px; object-fit: cover; object-position: center; }
.mega-feature .mf-img.mf-contain { object-fit: contain; background: #fff; }
@media (max-width: 560px) { .pic-stack { display: grid; gap: 18px; align-content: start; min-width: 0; } .pic-stack > .sect-pic { margin: 0; }
.sect-pic--two { grid-template-columns: 1fr; } }
/* product screens galleries */
.pshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; } .pshot-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pshot { margin: 0; padding: 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm), 0 0 0 1px var(--line-soft); } .pshot img { display: block; width: 100%; height: auto; border-radius: 10px; } .pshot figcaption { margin: 10px 4px 2px; font-size: 14px; line-height: 1.45; color: var(--ink-500); }
@media (max-width: 900px) { .pshot-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .pshot-grid, .pshot-grid--3 { grid-template-columns: minmax(0, 1fr); } }
/* product pages: one uniform hero image frame (whole image visible, no tilt, drift or floating chips) */
@media (min-width: 981px) { .ihero:has(> .wrap .pv-hero) :is(.hh-grid, .ih-grid, .heh-grid, .pah-grid) { grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); } }
.ihero .pv-hero[data-hv] > img { aspect-ratio: auto; height: auto; max-height: none; width: 100%; object-fit: fill; padding: 0; background: transparent; border: 0; border-radius: 80px 24px 80px 24px; animation: none; box-shadow: 0 34px 60px -34px rgba(18, 48, 95, .55); }
.dph::before { left: auto; right: 0; border-radius: 0 0 0 64px; }
.dph .pv-hero[data-hv] > img { border-radius: 80px 24px 80px 24px; }
.dph .pv-hero[data-hv]::before { border-radius: 110px 34px 110px 34px; transform: rotate(-2.5deg); }
.dph .pv-hero[data-hv]::after { left: auto; right: -4%; background: radial-gradient(circle at 30% 30%, #9fe3e6, #0e7490); }
@media (max-width: 980px) { .ihero .pv-hero[data-hv] > img { border-radius: 56px 18px 56px 18px; } }
/* client logos: one looping horizontal slider everywhere (second half of each list is a hidden duplicate for the loop) */
.logo-slider { position: relative; overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-slider .logos, .logo-slider .logo-grid { display: flex !important; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 0; width: max-content; margin: 0; grid-template-columns: none !important; }
.logo-slider .logos li { flex: none; width: auto; padding: 0 clamp(14px, 2vw, 26px); justify-content: center; }
.logo-slider .logos img { width: 96px; height: 96px; filter: none; opacity: 1; }
.logo-slider--cards { margin-top: 36px; }
.logo-slider--cards .logo-grid { margin-top: 0; }
.logo-slider--cards .logo-grid > div { flex: none; width: 300px; margin-right: 12px; grid-template-columns: 76px 1fr; }
.logo-slider--cards .logo-grid img { width: 76px; height: 76px; }
@media (prefers-reduced-motion: no-preference) {
  .logo-slider .logos, .logo-slider .logo-grid { animation: logoSlide 48s linear infinite; }
  .logo-slider:hover .logos, .logo-slider:hover .logo-grid, .logo-slider:focus-within .logos { animation-play-state: paused; }
  @keyframes logoSlide { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .logo-slider { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-slider [aria-hidden="true"] { display: none !important; }
}
@media (max-width: 900px) { .trust-strip .logo-slider .logos { display: flex !important; } .logo-slider .logos img { width: 80px; height: 80px; } .logo-slider--cards .logo-grid > div { width: 270px; } }
/* smallest text raised to 12px for legibility */
.mega-h, .ribbon button .n, .float-group small, .ev .kind, .record header span, .record em, .scard .tag, .mosaic div small, .ev-card small, .ev-card .meta span, .entry small, .tree small, .fw-tab small, .hf-num, .hf-kicker, .pd-out small, .au-tags li, .cx-shift small, .pe-tab b, .fp-value b, .fp-ex b, .fp-adv b, .cmp-sum-card small, .cmp-row .lbl, .hil-card .k, .pp-tag, .vx-feed-list em, .sv-count em, .sv-lk-key em, .he-c-log .who, .rp-find .k, .crit .rscale span, .hc-modes li.lbl, .hc-card small, .hc-card .ch em, .hc-card .ch u, .hc-card .pl, .c-photo .bd small, .hc-trust span, .hc-ai .tag, .hc-ai .ms small, .hc-ai .ill, .pd-in, .pp-ring-c small, .ringw strong small, .exam-top, .hv-chip b, .float-chip b, .pp-hm-l, .pp-hm-cols b, .q3-ncr .st b { font-size: 12px !important; }
/* design polish: soft surfaces, goal picker, product tour, customer logos */
.bg-surface { background: linear-gradient(180deg, #f8faff 0%, #eef3fc 100%); }
.section-head h2, .pad-lg > .wrap > h2, .pad > .wrap > h2 { letter-spacing: -.034em; line-height: 1.08; }
.lede { color: #4a5873; }
.eyebrow { letter-spacing: .14em; }
.goals { background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%); }
.goal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.goal { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 22px 54px; border-radius: 24px; background: #fff; border: 1px solid rgba(18, 48, 95, .08); box-shadow: 0 18px 40px -28px rgba(18, 48, 95, .35); color: var(--ink-700); text-decoration: none; transition: transform .25s var(--ease, ease), box-shadow .25s, border-color .25s; }
.goal:hover, .goal:focus-visible { transform: translateY(-5px); border-color: rgba(11, 91, 211, .35); box-shadow: 0 28px 50px -26px rgba(11, 91, 211, .45); }
.goal b { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink-900); }
.goal > span:not(.goal-ic) { font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }
.goal-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #e6efff, #efe9ff); color: var(--blue); } .goal-ic svg { width: 24px; height: 24px; }
.goal-go { position: absolute; left: 22px; bottom: 20px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; transition: transform .25s; } .goal-go svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }
.goal:hover .goal-go { transform: translateX(6px); }
@media (max-width: 980px) { .goal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .goal-grid { grid-template-columns: 1fr; } }
.tour { background: linear-gradient(180deg, #f4f8ff 0%, #e7f6f3 100%); overflow: hidden; }
.tour .eyebrow { color: var(--blue); }
.tour-box { max-width: 1240px; margin: 30px auto 0; container-type: inline-size; }
.tour-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.tour-tabs button { appearance: none; position: relative; overflow: hidden; border: 1px solid rgba(18, 48, 95, .14); background: #fff; color: var(--ink-700); font: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tour-tabs button:hover { border-color: rgba(11, 91, 211, .45); }
.tour-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; border-color: var(--blue); }
.tour-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .85); transform-origin: left; transform: scaleX(0); }
.tour-run .tour-tabs button[aria-selected="true"]::after { animation: tourBar var(--tour-dur, 5200ms) linear forwards; } @keyframes tourBar { to { transform: scaleX(1); } }
.tour-stage { --cw: min(660px, 78cqw); position: relative; height: calc(var(--cw) * .667 + 96px); }
.tour-stage figure { position: absolute; top: 0; left: 50%; width: var(--cw); margin: 0; padding: 14px 14px 12px; border-radius: 26px; background: #fff; border: 1px solid rgba(18, 48, 95, .08); box-shadow: 0 30px 60px -34px rgba(18, 48, 95, .45); transition: transform .8s cubic-bezier(.22, .8, .24, 1), opacity .8s ease, filter .8s ease; transform: translateX(-50%); cursor: default; }
.tour-stage figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(18, 48, 95, .07); }
.tour-stage figcaption { margin-top: 12px; text-align: center; font-size: 15.5px; font-weight: 600; color: var(--ink-900); min-height: 22px; }
.tour-stage figure[data-d="0"] { z-index: 5; }
.tour-stage figure[data-d="1"], .tour-stage figure[data-d="-1"] { z-index: 4; opacity: .96; filter: saturate(.9); cursor: pointer; }
.tour-stage figure[data-d="1"] { transform: translateX(calc(-50% + 46%)) scale(.88); } .tour-stage figure[data-d="-1"] { transform: translateX(calc(-50% - 46%)) scale(.88); }
.tour-stage figure[data-d="2"], .tour-stage figure[data-d="-2"] { z-index: 3; opacity: .7; filter: saturate(.8); cursor: pointer; }
.tour-stage figure[data-d="2"] { transform: translateX(calc(-50% + 82%)) scale(.76); } .tour-stage figure[data-d="-2"] { transform: translateX(calc(-50% - 82%)) scale(.76); }
.tour-stage figure[data-d="x"] { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) scale(.7); }
.tour-stage figure:not([data-d="0"]) figcaption { opacity: .75; }
.tour-ctl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 760px) {
  .tour-stage { --cw: 88cqw; }
  .tour-stage figure[data-d="1"] { transform: translateX(calc(-50% + 62%)) scale(.84); } .tour-stage figure[data-d="-1"] { transform: translateX(calc(-50% - 62%)) scale(.84); }
  .tour-stage figure[data-d="2"], .tour-stage figure[data-d="-2"] { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .tour-stage figure { transition: none; } }
.scard .inst { display: flex; align-items: center; gap: 10px; } .inst-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(18, 48, 95, .1); }
.scard { transition: transform .25s, box-shadow .25s; } .scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 24px 44px -28px rgba(18, 48, 95, .4)); }
.scale { background: linear-gradient(135deg, #0a2559 0%, #0b4fc0 58%, #5b3fc8 100%); }
.metrics b { background: linear-gradient(180deg, #fff 30%, #b9d4ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* DigiScanner scroll hero: copy on top, the video card below grows to full width on scroll while the copy fades away */
.sh, .ihero.sh { --p: 0; position: relative; overflow: visible !important; background: linear-gradient(180deg, #fff5e3 0%, #fff 100%); }
.sh-pin { position: relative; }
.sh-copy { position: relative; z-index: 2; text-align: center; padding-top: clamp(18px, 2.4vw, 30px); }
.sh-copy .crumbs-bar { justify-content: center; } .sh-copy .eyebrow::before { display: none; } .sh-copy .lede { margin-inline: auto; } .sh-copy .vx-points, .sh-copy .hero-ctas { justify-content: center; }
.sh-copy .pp-sub2 { margin: 6px auto 0; text-align: center; }
.sh-copy .vx-points { display: flex !important; flex-wrap: wrap; gap: 6px 22px; margin: 14px auto 0; padding: 0; list-style: none; max-width: 760px; } .sh-copy .vx-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; margin: 0; }
.sh-copy .hero-ctas { margin-top: 18px; }
.sh-copy h1 { margin-inline: auto; max-width: 18ch; font-size: clamp(2.4rem, 4.4vw, 3.7rem); line-height: 1.04; letter-spacing: -.035em; margin-top: 14px; }
.sh-dim { display: none; }
.sh-media { margin: 36px auto 0; width: min(960px, 92%); } .sh-media .vid-play, .sh-media iframe, .sh-media video { width: 100%; }
.sh-media video { display: block; aspect-ratio: 16 / 9; background: #000; border-radius: 26px; }
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .sh-on { height: 260vh; background: #fff5e3; }
  .sh-on .sh-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; container-type: inline-size; }
  .sh-on .sh-dim { display: block; position: absolute; inset: 0; z-index: 0; background: #0c0a05; opacity: var(--p); }
  .sh-on .sh-copy { max-width: none; width: 100%; margin: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; padding: 40px 0 150px max(var(--gutter, 24px), calc((100cqw - 1240px) / 2)); opacity: max(0, calc(1 - var(--p) * 2.4)); transform: translateY(calc(var(--p) * -60px)); will-change: opacity, transform; }
  .sh-on .sh-copy { --gut: max(24px, (100cqw - 1240px) / 2); --w0: min(48cqw, 720px); --cw: max(440px, calc(100cqw - 2 * var(--gut) - var(--w0) - 56px)); }
  .sh-on .sh-copy > * { max-width: var(--cw); }
  .sh-on .sh-copy .crumbs-bar, .sh-on .sh-copy .vx-points, .sh-on .sh-copy .hero-ctas { justify-content: flex-start; }
  .sh-on .sh-copy .vx-points { margin: 14px 0 0; }
  .sh-on .sh-copy .eyebrow::before { display: inline-block; } .sh-on .sh-copy .lede, .sh-on .sh-copy h1, .sh-on .sh-copy .pp-sub2 { margin-inline: 0; text-align: left; }
  .sh-on .sh-copy h1 { font-size: clamp(2.3rem, 3.4vw, 3.5rem); max-width: var(--cw); }
  .sh-on.sh-done .sh-copy { pointer-events: none; visibility: hidden; }
  .sh-on .sh-media { --gut: max(24px, (100cqw - 1240px) / 2); --w0: min(48cqw, 720px); --w1: min(100cqw, 177.78vh);
    position: absolute; z-index: 1; margin: 0; max-width: none;
    width: calc(var(--w0) + (var(--w1) - var(--w0)) * var(--p));
    left: calc((100cqw - var(--gut) - var(--w0)) + ((100cqw - var(--w1)) / 2 - (100cqw - var(--gut) - var(--w0))) * var(--p));
    top: calc(((100vh - 190px - var(--w0) * .5625) / 2 + 40px) + (max(0px, (100vh - 56.25cqw) / 2) - ((100vh - 190px - var(--w0) * .5625) / 2 + 40px)) * var(--p)); }
  .sh-on .sh-media .vid-play, .sh-on .sh-media iframe, .sh-on .sh-media video { border-radius: calc(26px * (1 - var(--p))); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, calc(.5 * (1 - var(--p)))); }
}
.vid { position: relative; }
.vid iframe.vid-auto, .vid video.vid-auto { pointer-events: none; }
.vid iframe.vid-auto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; opacity: 0; transition: opacity .9s ease; } .vid iframe.vid-auto.vid-live { opacity: 1; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0c0a05; border-radius: inherit; }
.vid-play .vid-btn, .vid-play .vid-cap { position: relative; z-index: 1; }
.vid-auto-on .vid-btn, .vid-auto-on .vid-cap { display: none; }
.vid-play:has(.vid-poster) { background: #fff; } .vid-play:has(.vid-poster)::before { display: none; } .vid-play:has(.vid-poster) .vid-cap { display: none; }
.vid-play[aria-hidden="true"] { pointer-events: none; }
/* video controls */
.vid-ctl { position: absolute; right: 16px; bottom: 16px; z-index: 3; display: flex; gap: 8px; }
.vid-ctl button { appearance: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: rgba(12, 10, 5, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); display: inline-flex; align-items: center; gap: 7px; }
.vid-ctl button svg { width: 18px; height: 18px; fill: currentColor; } .vid-ctl .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vid-ctl button:hover, .vid-ctl button:focus-visible { background: rgba(12, 10, 5, .88); }
.vid:fullscreen { width: 100vw !important; height: 100vh !important; max-width: none; margin: 0; border-radius: 0; background: #000; display: grid; place-items: center; left: auto !important; top: auto !important; transform: none !important; position: relative !important; }
.vid:fullscreen iframe, .vid:fullscreen video { width: min(100vw, 177.78vh) !important; height: auto; border-radius: 0 !important; box-shadow: none !important; }
.vid:fullscreen iframe.vid-auto { position: static; aspect-ratio: 16 / 9; } .vid:fullscreen .vid-play { display: none; }
@media (max-width: 560px) { .vid-ctl { right: 10px; bottom: 10px; } }
/* "Illustrative" disclaimers stay available to screen readers but are not shown */
.illustrative, .illu-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
section > .wrap > .sect-pic.sect-pic--md { max-width: 900px; margin-inline: auto; }
.story-art > .story-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.story-art:has(.story-img)::before { background: linear-gradient(180deg, rgba(8, 20, 48, .6) 0%, rgba(8, 20, 48, .12) 42%, rgba(8, 20, 48, .82) 100%); z-index: 0; }
.story-art:has(.story-img)::after { display: none; }
/* click-to-load video */
.vid { max-width: 960px; margin: 32px auto 0; }
.vid-play, .vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 26px; box-shadow: 0 40px 80px -40px rgba(18, 48, 95, .55); }
.vid-play { position: relative; appearance: none; cursor: pointer; color: #fff; font: inherit; overflow: hidden; background: radial-gradient(90% 120% at 15% 10%, #3a2a0a 0%, #1b1405 55%, #0c0a05 100%); display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; }
.vid-play::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 60% at 80% 90%, rgba(245, 158, 11, .35), transparent); }
.vid-btn { position: relative; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #b45309; box-shadow: 0 0 0 10px rgba(255, 255, 255, .18); transition: transform .25s, box-shadow .25s; } .vid-btn svg { width: 36px; height: 36px; fill: currentColor; margin-left: 4px; }
.vid-play:hover .vid-btn, .vid-play:focus-visible .vid-btn { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(255, 255, 255, .22); }
.vid-cap { position: relative; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: -.02em; } .vid-cap small { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #f5d9a8; }
.vid-note { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--ink-500); } .vid-note a { color: var(--blue); font-weight: 600; }
/* shorter homepage: compact capability row and product grid */
.cap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.cap-grid .goal { min-height: 0; }
@media (max-width: 1100px) { .cap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cap-grid { grid-template-columns: 1fr; } }
/* resources hero: when a format is chosen from the menu the featured card shows that item's picture */
.res-feature .art:has(> img) { display: grid; place-items: center; padding: 0; background: #eaf2ff; }
.res-feature .art > img { display: block; width: 100%; height: 100%; max-height: 320px; object-fit: contain; }
/* pointer cursor only on the link text of card-style links (the whole card still opens its page) */
:is(.res-card, .res-feature, .fp-rel-card, .fo-card, .scard, .goal, .route, .sec-card, .cap-card) { cursor: default; }
:is(.res-card, .res-feature, .fp-rel-card, .fo-card, .scard, .goal, .route, .sec-card, .cap-card) :is(b, strong, h3, h4, .go, .link-arrow, .goal-go, .sec-go) { cursor: pointer; }
/* environments: a sideways, snake-style route; the stop in the middle is enlarged */
.rm { --stop-w: 520px; background: linear-gradient(180deg, #f3f7ff 0%, #fff 70%); overflow: hidden; }
@media (max-width: 700px) { .rm { --stop-w: 84vw; } }
.rm-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.rm-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border-radius: 999px; border: 1px solid var(--line-soft); background: #fff; color: var(--ink-900); transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.rm-pill:hover { border-color: rgba(11, 91, 211, .4); }
.rm-pill .ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint-ops, #eaf2ff); color: var(--blue); } .rm-pill .ico svg { width: 18px; height: 18px; }
.rm-pill b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.rm-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 14px 26px -16px rgba(11, 91, 211, .7); }
.rm-pill.on .ico { background: rgba(255, 255, 255, .2); color: #fff; }
.rm-scroller { position: relative; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-inline: calc((100% - var(--stop-w)) / 2); scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -3px; }
.rm-scroller::-webkit-scrollbar { display: none; }
.rm-scroller.dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.rm-canvas { position: relative; width: calc(var(--n) * var(--stop-w)); height: 760px; }
.rm-road { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rm-road path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.rm-bed { stroke: #d6e4fb; stroke-width: 22px; }
.rm-line { stroke: #fff; stroke-width: 3px; stroke-dasharray: 2 14; }
.rm-stops { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.rm-stop { position: relative; flex: 0 0 var(--stop-w); height: 100%; scroll-snap-align: center; }
.rm-node { position: absolute; left: 50%; top: var(--ny); width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue); border: 3px solid #cfe0fb; box-shadow: 0 10px 24px -10px rgba(18, 48, 95, .5); transition: transform .5s cubic-bezier(.22, .8, .24, 1), background .4s, color .4s, border-color .4s; z-index: 2; }
.rm-node svg { width: 26px; height: 26px; }
.rm-stop.on .rm-node { transform: scale(1.3); background: var(--blue); color: #fff; border-color: #fff; box-shadow: 0 0 0 8px rgba(11, 91, 211, .18), 0 16px 30px -12px rgba(11, 91, 211, .7); }
.rm-card { position: absolute; left: 50%; width: calc(var(--stop-w) - 160px); border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line-soft); box-shadow: 0 24px 44px -34px rgba(18, 48, 95, .55); transform: translateX(-50%) scale(.84); opacity: .55; transition: transform .6s cubic-bezier(.22, .8, .24, 1), opacity .5s ease, box-shadow .5s ease; z-index: 1; }
.rm-down { top: 350px; transform-origin: 50% 0; } .rm-up { bottom: 365px; transform-origin: 50% 100%; }
.rm-stop.on .rm-card { transform: translateX(-50%) scale(1); opacity: 1; box-shadow: 0 34px 60px -34px rgba(11, 91, 211, .55); }
.rm-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rm-text { padding: 14px 18px 18px; }
.rm-text small { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--blue); }
.rm-text h3 { margin: 4px 0 4px; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink-900); }
.rm-text p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-500); }
.rm-traveller { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #ff8a3d; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(255, 138, 61, .25), 0 6px 14px rgba(0, 0, 0, .25); z-index: 3; pointer-events: none; will-change: transform; }
.rm-foot { display: flex; justify-content: center; margin-top: 10px; }
.rm-hint { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--ink-500); } .rm-h-pin { display: none; }
@media (max-width: 700px) { .rm-card { width: calc(var(--stop-w) - 40px); } .rm-pill b { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .rm-scroller { scroll-behavior: auto; } .rm-card, .rm-node { transition: none; } }
/* roadmap, scroll-driven mode (desktop, motion allowed): the section pins, the page scroll moves a camera along the route and zooms into each stop */
.rm-progress { height: 3px; margin: 14px auto 0; max-width: 360px; border-radius: 3px; background: #dbe6f7; overflow: hidden; display: none; } .rm-progress i { display: block; height: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }
.rm-pin { overflow: visible; }
.rm-pin .rm-track { height: calc(100vh + var(--rm-len, 300vh)); }
.rm-pin .rm-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding-top: 88px; overflow: hidden; }
.rm-pin .rm-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 520px at calc(15% - var(--rmx, 0) * .06px) 30%, rgba(11, 91, 211, .08), transparent 70%), radial-gradient(620px 620px at calc(88% - var(--rmx, 0) * .04px) 78%, rgba(255, 138, 61, .08), transparent 70%); }
.rm-pin .rm-nav { margin-top: 0; position: relative; z-index: 2; }
.rm-pin .rm-progress { display: block; position: relative; z-index: 2; width: 100%; }
.rm-pin .rm-scroller { flex: 1; min-height: 0; margin-bottom: 40px; overflow: hidden; padding: 0; scroll-snap-type: none; scroll-behavior: auto; }
.rm-pin .rm-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.rm-pin .rm-card { transition: transform .6s cubic-bezier(.22, .8, .24, 1), opacity .5s ease, box-shadow .5s ease; }
.rm-pin .rm-stop.on .rm-node::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(11, 91, 211, .45); animation: rmPulse 1.8s ease-out infinite; }
@keyframes rmPulse { from { transform: scale(.75); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.rm-pin .rm-hint { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; z-index: 2; } .rm-pin .rm-h-swipe { display: none; } .rm-pin .rm-h-pin { display: inline; }
/* mobile polish: narrow multi-column grids stack, tiny diagram labels get a readable floor, the roadmap becomes a straight swipe row */
.vx-core b { font-size: max(12px, 3.7cqw); }
@media (max-width: 480px) {
  .qflow, .role-rail, .values, .lifecycle6, .journey .track { grid-template-columns: 1fr; }
  .rtimeline li { grid-template-columns: 40px minmax(0, 1fr); } .rtimeline li > :nth-child(3) { grid-column: 2; }
  .vx-feed-list li { flex-wrap: wrap; gap: 4px 10px; }
}
@media (max-width: 700px) {
  .rm-canvas { height: 540px; }
  .rm-road, .rm-traveller { display: none; }
  .rm-canvas::before { content: ""; position: absolute; left: 0; right: 0; top: 92px; border-top: 10px solid #d6e4fb; border-radius: 10px; }
  .rm-canvas::after { content: ""; position: absolute; left: 0; right: 0; top: 96px; height: 2px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 16px); }
  .rm-stop { --ny: 97px !important; }
  .rm-card, .rm-up, .rm-down { top: 170px; bottom: auto; transform-origin: 50% 0; }
}
@media (max-width: 980px) { body:has(.menu-toggle[aria-expanded="true"]) .a11y-fab { opacity: 0; pointer-events: none; } }
/* condensed phone pages: folded sections, product swipe row, resources "show all" */
.m-fold-wrap, .res-more-wrap { display: none; }
@media (max-width: 760px) {
  [data-m-fold]:not(.m-open) { display: none !important; }
  .m-fold-wrap { display: block; padding: 8px var(--gutter, 20px) 28px; text-align: center; }
  .m-fold-btn { width: 100%; max-width: 420px; justify-content: center; }
  .res-more-wrap { display: block; margin-top: 18px; text-align: center; } .res-more-wrap .btn { width: 100%; max-width: 420px; }
  .m-phone .m-swipe { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter, 20px); padding: 4px var(--gutter, 20px) 14px; margin: 18px calc(-1 * var(--gutter, 20px)) 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .m-phone .m-swipe::-webkit-scrollbar { display: none; }
  .m-phone .m-swipe .pe-panel.m-shown { position: relative !important; top: auto !important; flex: 0 0 84%; scroll-snap-align: start; margin: 0 !important; }
  .m-swipe-hint { margin: 0 0 6px; text-align: center; font-size: 14px; color: var(--ink-500); }
}
/* phones: tall card stacks as sideways swipe rows */
@media (max-width: 760px) {
  .m-swiperow { display: flex !important; grid-template-columns: none !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 4px var(--gutter) 14px !important; margin-inline: calc(-1 * var(--gutter)) !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: stretch; }
  .m-swiperow::-webkit-scrollbar { display: none; }
  .m-swiperow > * { flex: 0 0 82%; max-width: none !important; width: auto !important; margin: 0 !important; scroll-snap-align: start; }
  .m-swiperow > [hidden] { display: none !important; }
}
/* phones: sections collapse to heading + short lead-in with a Show details button */
@media (max-width: 760px) {
  .m-acc:not(.m-acc-open) { padding-block: 30px !important; }
  .m-acc:not(.m-acc-open) :is(.section-head, .wrap > div:first-child) :is(.lede, p) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .m-acc-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; margin: 18px auto 0; }
  .m-acc-btn::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
  .m-acc-open .m-acc-btn::after { transform: rotate(-135deg) translateY(-2px); }
  .m-acc-body { margin-top: 22px; } .m-acc-body[hidden] { display: none; }
  .m-acc-whole { margin-top: 0; } .m-acc-open > .m-acc-head { display: none; }
  .m-acc-head { padding-block: 0; } .m-acc-title { margin: 10px 0 8px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--ink-900); }
  .m-acc:not(.m-acc-open) .m-acc-lede { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px; }
  .m-acc-close { margin-top: 28px; }
}
/* hero: the slide name sits under the monitor (supporting line is hidden to save space) */
@media (min-width: 1001px) {
  .hv-art { position: relative; }
  .hv-art .hv-cap { position: static; min-height: 0; margin-top: 0; justify-content: flex-end; }
  .hv-art .hv-captext { position: absolute; right: 1%; top: 77%; width: 24%; min-width: 150px; max-width: 190px; gap: 0; text-align: left; }
  .hv-art .hv-name { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.25; }
  .hv-art .hv-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* case studies */
.prose .cs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 22px; }
.prose .cs-kpis > div { padding: 18px 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line-soft); border-top: 4px solid var(--blue); box-shadow: 0 14px 28px -24px rgba(18, 48, 95, .5); }
.prose .cs-kpis b { display: block; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--ink-900); letter-spacing: -.01em; }
.prose .cs-kpis span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-500); }
.prose .cs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.prose .cs-cards > div { padding: 18px 20px; border-radius: 16px; background: var(--bg-50, #f6f8fb); border: 1px solid var(--line-soft); border-top: 3px solid var(--blue); }
.prose .cs-cards b { display: block; font-size: 17px; line-height: 1.35; color: var(--ink-900); }
.prose .cs-cards p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-700); }
.prose .cs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; margin-top: 18px; }
.prose .cs-two h3 { margin-top: 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); }
.prose .cs-quote { margin: 26px 0 0; padding: 24px 28px; border-radius: 18px; background: #0f2a4a; color: #e8f0fb; position: relative; }
.prose .cs-quote::before { content: "“"; position: absolute; left: 22px; top: 6px; font-size: 64px; line-height: 1; color: #6fa8ff; font-family: Georgia, serif; }
.prose .cs-quote p { margin: 0; padding-left: 34px; font-size: 18px; line-height: 1.65; color: #fff; }
.prose .cs-quote footer { margin-top: 14px; padding-left: 34px; font-size: 14.5px; color: #b7c8e2; }
.prose .cs-quote footer b { display: block; color: #ffd27a; font-size: 15.5px; }
.prose .cs-tbl-wrap { margin-top: 18px; overflow-x: auto; border-radius: 14px; border: 1px solid var(--line-soft); }
.prose .cs-tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; min-width: 520px; }
.prose .cs-tbl th { text-align: left; padding: 12px 16px; background: #0f2a4a; color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.prose .cs-tbl td { padding: 12px 16px; border-top: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-700); }
.prose .cs-tbl tbody tr:nth-child(even) td { background: #f6f9fd; }
.prose .cs-fig { margin: 24px 0 0; } .prose .cs-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-500); text-align: center; }
.prose .cs-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; padding: 16px 20px; border-radius: 14px; background: var(--bg-50, #f6f8fb); border: 1px solid var(--line-soft); font-size: 15.5px; }
.prose .cs-meta span b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 2px; }
.prose .cs-note { padding: 14px 18px; border-radius: 12px; background: #eaf2ff; color: var(--ink-800, #1b2b45); font-size: 15.5px; }
@media (max-width: 640px) { .prose .cs-two { grid-template-columns: 1fr; } .prose .cs-quote { padding: 22px 20px; } .prose .cs-quote p, .prose .cs-quote footer { padding-left: 0; padding-top: 0; } .prose .cs-quote::before { position: static; display: block; height: 34px; } }
.cs-quote-lite { margin: 30px 0 0; padding: 20px 24px; border-left: 4px solid var(--blue); border-radius: 0 16px 16px 0; background: var(--tint-ops, #eaf2ff); }
.cs-quote-lite p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-900); font-weight: 500; }
.cs-quote-lite footer { margin-top: 10px; font-size: 14.5px; color: var(--ink-500); } .cs-quote-lite footer b { color: var(--ink-900); margin-right: 6px; }
/* release notes */
.rn-tools { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; margin-top: 30px; }
.rn-search { flex: 1 1 320px; max-width: 420px; }
.rn-search input { width: 100%; font: inherit; font-size: 15px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-900); }
.rn-search input:focus-visible { outline: 3px solid rgba(11, 91, 211, .35); outline-offset: 2px; border-color: var(--blue); }
.rn-list { padding-bottom: 20px; }
.rn-year { padding: 34px 0 8px; }
.rn-year[hidden], .rn-entry[hidden], .rn-items li[hidden], .rn-none[hidden] { display: none; }
.rn-yh { font-size: clamp(34px, 4.2vw, 52px); letter-spacing: -.02em; margin: 0 0 18px; color: var(--ink-900); }
.rn-entry { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 36px; padding: 24px 0; border-top: 1px solid var(--line); }
.rn-when { font-weight: 700; color: var(--blue); font-size: 15.5px; position: relative; padding-left: 22px; align-self: start; }
.rn-when::before { content: ""; position: absolute; left: 0; top: .35em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(11, 91, 211, .14); }
.rn-when-note { color: var(--ink-700); }
.rn-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rn-items li { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px; align-items: baseline; line-height: 1.6; color: var(--ink-700); }
.rn-items li.nt { grid-template-columns: minmax(0, 1fr); padding-left: 20px; }
.rn-items li.nt::before { content: ""; position: absolute; left: 2px; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .55; }
.rn-text { min-width: 0; font-size: 16px; } .rn-text b { color: var(--ink-900); }
.rn-tag { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: #e8f1ff; color: #0b4aa8; }
.rn-none { padding: 40px 0; text-align: center; color: var(--ink-700); }
@media (max-width: 760px) { .rn-entry { grid-template-columns: 1fr; gap: 12px; } .rn-items li { grid-template-columns: 1fr; } .rn-search { max-width: none; } }
/* hero: text column sits at the top of the grid (no blank band under the breadcrumb) */
@media (min-width: 981px) { .ihero:has(> .wrap .pv-hero) :is(.hh-grid, .ih-grid, .heh-grid, .pah-grid) { align-items: start; } .ihero:has(> .wrap .pv-hero) :is(.hh-grid, .ih-grid, .heh-grid, .pah-grid) > :first-child { padding-top: clamp(0px, 2vw, 28px); } .ihero:has(> .wrap .pv-hero) .pv-hero { margin-top: 0; } }
/* downloadable comparison */
.dl-box { display: flex; align-items: center; gap: 18px; max-width: 780px; margin: 28px auto 0; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); text-align: left; }
.dl-box > div { flex: 1; min-width: 0; } .dl-box b { display: block; font-size: 16px; color: var(--ink-900); } .dl-box > div span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-500); }
.dl-ic { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #eef4ff; color: var(--blue); } .dl-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .dl-box { flex-direction: column; align-items: flex-start; } .dl-box .btn { width: 100%; justify-content: center; } }
/* technology partners above the footer */
.tech-band { background: #fff; border-bottom: 1px solid var(--line-soft); padding: 26px 0 28px; }
.tech-title { margin: 0 0 14px; text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); }
.tech-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px clamp(28px, 5vw, 64px); list-style: none; margin: 0; padding: 0; }
.tech-logos li { display: flex; align-items: center; } .tech-logos img { height: 34px; width: auto; max-width: 150px; object-fit: contain; opacity: .85; transition: opacity .2s, filter .2s; } .tech-logos img:hover { opacity: 1; }
/* footer social links */
.foot-social { display: flex; gap: 10px; list-style: none; margin: 18px 0 0; padding: 0; }
.foot-social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background .2s, color .2s, border-color .2s; }
.foot-social a:hover, .foot-social a:focus-visible { background: #fff; color: #0b2a6b; border-color: #fff; }
.foot-social svg { width: 18px; height: 18px; fill: currentColor; } .foot-social svg.ig { fill: none; stroke: currentColor; stroke-width: 2; } .foot-social svg.ig circle:last-child { fill: currentColor; stroke: none; }
/* delivery strip under the hero holds five items now */
.hc-modes { flex-wrap: wrap; row-gap: 8px; }
/* trust strip on desktop: one compact row of assurance badges (title and note side by side, "More" in the same row) so the whole strip sits inside the first screen */
@media (min-width: 901px) {
  .trust-strip .wrap { padding-block: 14px; gap: 10px 32px; }
  .trust-strip .logos li { max-height: 76px; } .trust-strip .logos img { max-height: 72px; width: auto; }
  .trust-strip .ts-assure { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 36px; padding-top: 10px; }
  .trust-strip .ts-assure li { flex-direction: row; gap: 8px; } .trust-strip .ts-assure li > a { display: flex; flex-direction: row; align-items: center; gap: 8px; }
  .trust-strip .ts-assure .more { grid-column: auto; flex: none; }
}
/* Examly delivery environments: heading on top, a wide auto-advancing slider, and the five environments as a row of tabs underneath */
.env-wide { display: block; max-width: 1040px; }
.env-wide .env-head { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.env-wide .env-head .lede { margin-inline: auto; }
.env-wide .std-banner { justify-content: center; margin-bottom: 18px; }
.env-wide .env-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.env-wide .env-tabs .tab { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; height: 100%; }
.env-wide .env-tabs .tab > span:last-child b { font-size: 15px; } .env-wide .env-tabs .tab > span:last-child > span { font-size: 13px; }
.env-wide .env-tabs .tab[aria-selected="true"] { border-color: var(--blue); }
@media (max-width: 900px) { .env-wide .env-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.env-slider { aspect-ratio: 16 / 9; }
.env-slider .env-slides { position: absolute; inset: 0; }
.env-slider .env-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.env-slider .env-slide.on { opacity: 1; }
.env-slider .env-slide img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.env-slider .env-tag { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--ink-900); font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px -8px rgba(18, 48, 95, .4); }
.env-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink-900); box-shadow: 0 8px 22px -8px rgba(18, 48, 95, .5); cursor: pointer; z-index: 2; }
.env-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.env-nav:hover { background: #fff; color: var(--blue); }
.env-prev { left: 12px; } .env-next { right: 12px; }
/* All Features: cards are the same size in every section, and a long section can fold behind a button */
.fo-cards { align-items: stretch; } .fo-cards > .fo-card { min-height: 282px; }
@media (min-width: 981px) { .fo-grid.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } .fo-card[hidden] { display: none; }
.fo-more { margin-top: 14px; }
/* AI-Assisted Evaluation hero: the floating status cards sit at the top-left corner of the image */
.hil[data-scene="evaluator"] .hil-stack { right: auto; left: 3%; }
/* every page hero (desktop): the same height, filling the first screen under the header so the hero is seen on its own; content centred */
@media (min-width: 981px) {
  .ihero:not(.nf, .sh) { min-height: min(calc(100vh - 70px), 860px); display: flex; flex-direction: column; justify-content: center; }
  .ihero:not(.nf, .sh) > .wrap { width: 100%; }
}
/* homepage hero: the H1 is "Make Learning Visible"; the old headline becomes the sub-heading under it */
.hv-copy h1.hv-h1 { font-size: min(42px, 7.4cqw); line-height: 1.12; white-space: nowrap; }
.hv-copy p.hv-mlv { margin-top: 12px; font-size: 20px; line-height: 1.3; color: #0b1b3f; }
.hv-copy p.hv-sub.hv-sub2 { margin-top: 12px; }
@media (max-width: 560px) { .hv-copy h1.hv-h1 { font-size: min(32px, 7.2vw) !important; } .hv-copy p.hv-mlv { font-size: 17px; } .hv-copy p.hv-mlv .hv-type { white-space: normal; } }
/* ---- website corrections (end) ---- */

/* Homepage hero, "Cascade": headline first, interface cards peeking from the bottom; scrolling lifts them into a cluster, the header becomes a floating pill,
   the backdrop turns deep blue and the Academic Intelligence dashboard rises into one large framed screen. The hero is pinned (sticky) for the length of that story.
   Desktop (1025px+, 560px+ tall) is scroll-driven by assets/js/hero-cascade.js; tablet, phone, short windows and reduced motion get the composed end state instead. */
.hc { --navy: #0b1b3f; --hh: var(--hdr-h, 69px); position: relative; overflow: visible; margin-top: calc(var(--hh) * -1); background: #eef2ff; }
.hc-pin { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(28px, 5vw, 56px); }
.hc-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(80% 55% at 50% 0%, #f7f9ff 0%, rgba(247, 249, 255, 0) 70%), linear-gradient(180deg, #f1f4ff 0%, #e6edff 60%, #dbe6ff 100%); }
.hc-blob { display: none; position: absolute; right: -18vw; bottom: -42vw; width: 78vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #3b82ff, #0b55e6 55%, #0a3bb3); transform: scale(.18); transform-origin: 70% 70%; opacity: .95; }
.hc-blue { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; opacity: 1; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); mask-image: linear-gradient(180deg, transparent, #000 40%); background: radial-gradient(70% 60% at 80% 100%, rgba(120, 190, 255, .55), rgba(120, 190, 255, 0) 70%), linear-gradient(180deg, #2f78ff 0%, #0b4fe0 55%, #0a2f9c 100%); }
.hc-blue::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 16px); -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 100%); mask-image: linear-gradient(180deg, transparent 20%, #000 100%); }

/* copy */
.hc-copy { position: relative; z-index: 3; padding: calc(var(--hh) + clamp(22px, 4.2vh, 44px)) 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform, opacity; }
.hc-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 clamp(12px, 1.8vh, 18px); padding: 7px 16px 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 1px rgba(0, 102, 255, .16), 0 8px 18px -12px rgba(0, 60, 200, .4); font-size: 14px; font-weight: 700; color: var(--blue); letter-spacing: .01em; }
.hc-eyebrow svg { width: 15px; height: 15px; fill: var(--blue); }
.hc-h1 { margin: 0; max-width: 1120px; font-size: clamp(34px, min(3.9vw, 6vh), 58px); line-height: 1.07; letter-spacing: -.035em; font-weight: 400; text-wrap: balance; }
.hc-h1 b { font-weight: 700; } .hc-sub b { font-weight: 700; color: var(--navy); }
.hc-h1 .hero-display { display: block; } .hc-h1 .navy { color: var(--navy); } .hc-h1 .accent { color: var(--blue); }
.hc-sub { margin: clamp(12px, 1.8vh, 18px) auto 0; max-width: 940px; font-size: clamp(15px, min(1.2vw, 2.2vh), 18px); line-height: 1.5; color: var(--ink-500); text-wrap: balance; }
.hc-ctas { margin-top: clamp(18px, 3vh, 28px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hc-modes { list-style: none; margin: clamp(14px, 2.2vh, 22px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: center; align-items: center; }
.hc-modes li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-700); } .hc-modes li.lbl { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); }
.hc-modes svg { width: 17px; height: 17px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* floating cards (home positions are the cluster; the script lifts them in from below) */
.hc-cards { display: none; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hc-card { position: absolute; background: #fff; border-radius: 16px; box-shadow: 0 22px 44px -20px rgba(8, 40, 130, .5), 0 0 0 1px rgba(20, 60, 160, .07); font-size: 12.5px; color: #3a4b69; text-align: left; will-change: transform, opacity; }
.hc-card b { color: var(--navy); font-weight: 700; } .hc-card small { display: block; color: #52607a; font-size: 11.5px; }
.hc-card .ch { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; white-space: nowrap; overflow: hidden; } .hc-card .ch em { overflow: hidden; text-overflow: ellipsis; } .hc-card .ch i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); display: grid; place-items: center; } .hc-card .ch i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hc-card .ch b { font-size: 13.5px; } .hc-card .ch em { font-style: normal; font-weight: 600; color: #5b6a86; font-size: 11.5px; } .hc-card .ch u { margin-left: auto; text-decoration: none; font-weight: 800; font-size: 11px; color: var(--blue); background: #e9f0ff; padding: 3px 8px; border-radius: 99px; }
.hc-card .q { margin: 0; padding: 2px 14px 8px; font-weight: 700; color: var(--navy); line-height: 1.35; font-size: 13px; }
.hc-card .op { margin: 0 14px 6px; padding: 7px 10px; border: 1px solid #e3ecfa; border-radius: 10px; background: #f8fbff; display: flex; align-items: center; gap: 8px; } .hc-card .op.on { border-color: #2563eb; background: #eef4ff; color: var(--navy); font-weight: 600; } .hc-card .op s { width: 10px; height: 10px; border-radius: 50%; background: #2563eb; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1.5px #2563eb; }
.hc-card .ft { display: flex; gap: 6px; padding: 8px 14px 14px; flex-wrap: nowrap; } .hc-card .pl { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--c, #2563eb); color: #fff; font-weight: 800; font-size: 11px; white-space: nowrap; } .hc-card .pl svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .hc-card .pl.g { background: color-mix(in srgb, var(--c, #2563eb) 12%, #fff); color: var(--c, #2563eb); }
.hc-card .rw { display: grid; grid-template-columns: 1fr 74px 24px; align-items: center; gap: 8px; padding: 5px 14px; font-weight: 600; color: var(--navy); } .hc-card .rw div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; } .hc-card .rw s { height: 12px; border-radius: 4px; background: #e8eefb; } .hc-card .rw s.on { background: #7c3aed; } .hc-card .rw em { font-style: normal; font-weight: 800; color: #7c3aed; text-align: right; }
.hc-card .ck { display: flex; align-items: center; gap: 8px; margin: 0 14px 6px; padding: 6px 10px; border: 1px solid #e3ecfa; border-radius: 10px; background: #f8fbff; color: var(--navy); } .hc-card .ck u { flex: none; width: 15px; height: 15px; border-radius: 4px; border: 2px solid #b8cbe9; display: grid; place-items: center; } .hc-card .ck u svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } .hc-card .ck.on u { background: #0d9488; border-color: #0d9488; } .hc-card .ck.on u svg { opacity: 1; }
.c-osce .ck:last-child { margin-bottom: 14px; }
.c-photo { padding: 0; overflow: hidden; } .c-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .c-photo .bd { position: absolute; left: 10px; bottom: 10px; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 7px 12px 7px 10px; border-radius: 11px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 18px -8px rgba(8, 20, 50, .5); } .c-photo .bd i { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, #fff); } .c-photo .bd b { font-size: 12px; line-height: 1.1; } .c-photo .bd small { font-size: 10.5px; }
.c-outcome { padding: 14px 14px 10px; } .c-outcome .rg { display: flex; align-items: center; gap: 12px; } .ringw { position: relative; flex: none; width: 62px; height: 62px; } .ringw svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; } .ringw circle { fill: none; stroke-width: 9; } .ringw .t { stroke: #dbe6fb; } .ringw .v { stroke: var(--blue); stroke-linecap: round; } .ringw strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; letter-spacing: -.04em; color: var(--navy); } .ringw strong small { display: inline; font-size: 10px; color: #52607a; }
.c-outcome b { font-size: 13px; line-height: 1.2; display: block; } .c-outcome .spark { display: block; width: 100%; height: 46px; margin-top: 8px; }
.c-chip { display: flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: 14px; } .c-chip i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c); display: grid; place-items: center; } .c-chip i svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .c-chip b { font-size: 12.5px; display: block; line-height: 1.2; }
/* the four scene cards: they wait in the corners of the first screen (see hero-cascade.js) and travel to this tidy, non-overlapping row. They float gently. */
.hc-cards { --cw: clamp(210px, 15.5vw, 300px); --gap: clamp(60px, 5.6vw, 112px); --ch: calc(var(--cw) / 1.4); }
.c-photo { width: var(--cw); aspect-ratio: 1.4; animation: hcfloat 6.4s ease-in-out infinite; }
.c-p-theory { left: calc(50% - 2 * var(--cw) - 1.5 * var(--gap)); } .c-p-practical { left: calc(50% - var(--cw) - .5 * var(--gap)); animation-duration: 7.2s; animation-delay: -2s; }
.c-p-clinical { left: calc(50% + .5 * var(--gap)); animation-duration: 6.8s; animation-delay: -4s; } .c-p-workplace { left: calc(50% + var(--cw) + 1.5 * var(--gap)); animation-duration: 7.6s; animation-delay: -1s; }
@keyframes hcfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) { .c-photo { animation: none; } }
.c-photo .bd b { font-size: 13px; } .c-photo .bd small { font-size: 11px; }
.hc-trust { list-style: none; margin: clamp(12px, 1.8vh, 18px) 0 0; padding: clamp(10px, 1.4vh, 14px) 0 0; border-top: 1px solid rgba(20, 60, 160, .12); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 30px; }
.hc-trust li { display: flex; align-items: center; gap: 9px; } .hc-trust img { height: 26px; width: auto; flex: none; }
.hc-trust span { display: flex; flex-direction: column; font-size: 11.5px; color: var(--ink-500); line-height: 1.2; text-align: left; } .hc-trust b { font-size: 13px; color: var(--ink-900); }
.hc-trust .more a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; } .hc-trust .more svg { width: 13px; height: 13px; }

/* Academic Intelligence overview on the first screen */
.hc-ai { --aw: clamp(420px, 34vw, 660px); display: block; position: relative; z-index: 3; margin: clamp(16px, 2.4vh, 26px) auto 0; width: min(var(--aw), calc(100% - 32px)); padding: 16px 22px 14px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); box-shadow: inset 0 0 0 1px rgba(0, 80, 220, .16); text-align: left; color: #3a4b69; text-decoration: none; }
.hc-ai .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); } .hc-ai .tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(0, 102, 255, .16); }
.hc-ai > b { display: block; margin-top: 6px; font-size: clamp(15px, 1.35vw, 19px); font-weight: 500; letter-spacing: -.02em; color: var(--navy); } .hc-ai > b em { font-style: normal; font-weight: 800; }
.hc-ai .ms { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; gap: 4px 18px; margin-top: 12px; } .hc-ai .ms > span:not(.ringw) { display: flex; flex-direction: column; } .hc-ai .ms strong { font-size: clamp(16px, 1.5vw, 22px); letter-spacing: -.03em; color: var(--navy); line-height: 1.1; } .hc-ai .ms small { font-size: 11.5px; color: #52607a; line-height: 1.25; }
.hc-ai .ringw { width: 52px; height: 52px; } .hc-ai .ringw strong { font-size: 14px; } .hc-ai .ms > span:nth-child(2) strong { display: none; } .hc-ai .ms > span:nth-child(2) { justify-content: center; } .hc-ai .ms > span:nth-child(2) small { font-weight: 700; color: var(--navy); }
.hc-ai .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--blue); } .hc-ai .go svg { width: 13px; height: 13px; }
/* the large view of a card: its insights beside it (positioned by the script) */
.hc-ins { display: none; position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; flex-direction: column; justify-content: center; gap: .7em; padding: 1.2em 1.3em; border-radius: 18px; background: rgba(255, 255, 255, .95); box-shadow: 0 40px 80px -34px rgba(2, 14, 80, .7), 0 0 0 1px rgba(255, 255, 255, .6); container-type: inline-size; font-size: clamp(10px, .82vw, 13.5px); color: #3a4b69; text-align: left; will-change: transform, opacity; }
.hc-ins .ins-h { display: flex; align-items: center; gap: .6em; } .hc-ins .ins-h i { width: .8em; height: .8em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--c) 22%, #fff); } .hc-ins .ins-h b { font-size: 1.5em; letter-spacing: -.02em; color: var(--navy); } .hc-ins .ins-h small { color: #52607a; font-weight: 600; }
.hc-ins .ins-big strong { display: block; font-size: 3em; line-height: 1; letter-spacing: -.05em; color: var(--c); } .hc-ins .ins-big small { display: block; margin-top: .3em; color: #52607a; }
.hc-ins .ins-r { display: grid; gap: .35em; } .hc-ins .ins-r > span:first-child { display: flex; justify-content: space-between; font-weight: 600; color: var(--navy); } .hc-ins .ins-r em { font-style: normal; font-weight: 800; color: var(--c); }
.ins-bar { display: block; height: .5em; border-radius: 9px; background: #e3ebfa; overflow: hidden; } .ins-bar i { display: block; height: 100%; background: var(--c); border-radius: inherit; transform-origin: 0 50%; }
.hc-ins .ins-ft { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .3em; } .hc-ins .pl { padding: .4em 1em; border-radius: 99px; background: var(--c); color: #fff; font-weight: 800; font-size: .9em; } .hc-ins .pl.g { background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }

/* the dashboard */
.hc-screen { --dw: min(1180px, 84vw); position: relative; z-index: 4; margin: clamp(24px, 4vw, 40px) auto 0; width: min(1180px, calc(100% - 32px)); height: clamp(380px, 52vw, 560px); display: flex; border-radius: 18px; overflow: hidden; background: #f6f8ff; container-type: inline-size; box-shadow: 0 60px 100px -40px rgba(2, 14, 70, .7), 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 10px rgba(255, 255, 255, .14); font-size: clamp(9px, 1.04cqw, 13px); color: #3a4b69; will-change: transform; }
.hc-screen .dsb { flex: none; width: 5.6em; background: linear-gradient(180deg, #0b1b3f, #0a2a6e); display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding: 1.4em 0; } .dsb .lg { width: 2.2em; height: 2.2em; border-radius: .6em; background: linear-gradient(135deg, #3b82ff, #7aa8ff); margin-bottom: .8em; } .dsb span:not(.lg) { width: 2.6em; height: 2.6em; border-radius: .8em; display: grid; place-items: center; color: #8ea6d8; } .dsb span.on { background: rgba(255, 255, 255, .14); color: #fff; } .dsb svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dmain { flex: 1; min-width: 0; padding: 1.5em 1.8em; display: flex; flex-direction: column; gap: 1.2em; }
.dtop { display: flex; align-items: center; gap: 1.2em; } .dtop b { display: block; font-size: 1.7em; letter-spacing: -.02em; color: var(--navy); } .dtop small { font-size: 1em; color: #52607a; } .dsearch { margin-left: auto; width: 24em; padding: .85em 1.1em; border-radius: .9em; background: #fff; box-shadow: 0 0 0 1px rgba(20, 60, 160, .1); color: #66758f; } .dbtn { padding: .85em 1.3em; border-radius: .9em; background: var(--blue); color: #fff; font-weight: 800; } .dav { width: 2.8em; height: 2.8em; border-radius: 50%; background: linear-gradient(135deg, #c9d9ff, #7aa8ff); }
.dstats { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 1em; } .stat { background: #fff; border-radius: 1.1em; padding: 1.1em 1.3em; box-shadow: 0 0 0 1px rgba(20, 60, 160, .08), 0 14px 24px -20px rgba(10, 50, 140, .5); display: flex; flex-direction: column; justify-content: center; gap: .35em; } .stat small { font-size: 1em; color: #52607a; font-weight: 600; } .stat strong { font-size: 2.3em; letter-spacing: -.04em; color: var(--navy); line-height: 1; }
.stat.big { flex-direction: row; align-items: center; gap: 1.2em; } .stat.big .ringw { width: 6em; height: 6em; } .stat.big .ringw strong { font-size: 1.9em; } .stat.big b { font-size: 1.15em; display: block; color: var(--navy); }
.bar { display: block; height: .5em; border-radius: 9px; background: #e3ebfa; overflow: hidden; } .bar i { display: block; height: 100%; background: var(--c, var(--blue)); border-radius: inherit; transform-origin: 0 50%; } .bar.g i { background: #16a34a; } .bar.v i { background: #7c3aed; }
.dgrid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 1em; } .panel { background: #fff; border-radius: 1.1em; padding: 1.1em 1.3em; box-shadow: 0 0 0 1px rgba(20, 60, 160, .08), 0 14px 24px -20px rgba(10, 50, 140, .5); display: flex; flex-direction: column; gap: .7em; min-height: 0; } .panel > b { font-size: 1.2em; color: var(--navy); } .panel > small { margin-top: -.5em; color: #52607a; }
.ev .er { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: .45em 0; border-top: 1px solid #edf1fb; } .hc-screen .er .th { padding: 0; margin: 0; position: relative; display: block; width: 3.6em; height: 3.6em; max-height: 3.6em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .22em color-mix(in srgb, var(--c) 40%, #fff); } .hc-screen .er .th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .er .tx b { color: var(--navy); font-size: 1.1em; } .er .tx b em { font-style: normal; font-weight: 500; color: #5b6a86; } .er .tx small { display: block; color: #52607a; margin-bottom: .35em; } .er strong { font-size: 1.9em; letter-spacing: -.03em; color: var(--c); white-space: nowrap; min-width: 3.4em; text-align: right; }
.cols { flex: 1; min-height: 6em; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8em; align-items: end; } .cols span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .35em; } .cols i { display: block; flex: none; width: 100%; border-radius: .5em .5em 0 0; background: linear-gradient(180deg, #5aa2ff, var(--blue)); transform-origin: 50% 100%; } .cols small { color: #52607a; font-weight: 700; }
.rp .ck { display: flex; align-items: center; gap: .7em; color: var(--navy); font-weight: 600; padding: .35em 0; } .rp .ck u { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: #16a34a; display: grid; place-items: center; text-decoration: none; } .rp .ck u svg { width: 1em; height: 1em; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } .rp .exp { margin-top: auto; align-self: flex-start; padding: .6em 1.2em; border-radius: .8em; background: var(--blue); color: #fff; font-weight: 800; }

/* header becomes a floating pill while the hero is on screen (paint only, so nothing shifts) */
.site-header .nav { position: relative; } .site-header .nav::before { content: ""; position: absolute; inset: 6px max(-16px, calc((100% - 100vw) / 2 + 1px)); border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -18px rgba(3, 20, 90, .5), 0 0 0 1px rgba(20, 60, 160, .08); opacity: 0; transition: opacity .3s; z-index: -1; pointer-events: none; }
html.hc-pill .site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; box-shadow: none; }
html.hc-pill .site-header .nav::before { opacity: 1; }

/* scroll-driven version: wide, tall-enough windows with scripts on. The script adds hc-static instead when it cannot run the story (reduced motion, no GSAP). */
@media (min-width: 1025px) and (min-height: 560px) {
  html.js .hc:not(.hc-static) { height: calc(100svh + 480vh); }
  html.js .hc:not(.hc-static) .hc-pin { position: sticky; top: 0; height: 100svh; padding-bottom: 0; }
  html.js .hc:not(.hc-static) .hc-copy { position: absolute; left: 0; right: 0; top: 0; }
  html.js .hc:not(.hc-static) .hc-cards, html.js .hc:not(.hc-static) .hc-blob { display: block; }
  html.js .hc:not(.hc-static) .hc-ai { position: absolute; left: 50%; bottom: clamp(18px, 4vh, 40px); margin: 0 0 0 calc(var(--aw) / -2); width: var(--aw); }
  html.js .hc:not(.hc-static) .hc-ins { display: flex; }
  html.js .hc:not(.hc-static) .hc-blue { top: 0; height: auto; opacity: 0; -webkit-mask-image: none; mask-image: none; }
  html.js .hc:not(.hc-static) .hc-screen { position: absolute; left: 50%; top: calc(var(--hh) + 22px); margin: 0 0 0 calc(var(--dw) / -2); width: var(--dw); height: min(calc(100svh - var(--hh) - 44px), 660px); transform: translateY(110vh); }
}
@media (max-width: 1024px) { .hc-h1 { font-size: clamp(30px, 5vw, 46px); } .hc-screen { font-size: clamp(8px, 1.4cqw, 12px); } }
@media (max-width: 700px) {
  .hc-h1 { font-size: clamp(30px, 8.4vw, 38px); } .hc-sub { font-size: 15px; }
  .hc-screen { height: auto; flex-direction: column; font-size: clamp(8.5px, 2.5cqw, 12px); }
  .hc-screen .dsb { width: auto; flex-direction: row; justify-content: space-around; padding: .9em 1em; gap: .6em; } .dsb .lg { margin: 0; }
  .dsearch, .dbtn { display: none; } .dstats { grid-template-columns: 1fr 1fr; } .stat.big { grid-column: 1 / -1; } .dgrid { grid-template-columns: 1fr; } .dmain { padding: 1em; }
  .dgrid .panel:not(.ev) { display: none; }
}
/* once the backdrop is deep blue, the header sits on it in the same blue with light text and a white logo */
html.hc-dark .site-header .nav::before { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .28); }
html.hc-dark .site-header .brand img { filter: brightness(0) invert(1); }
html.hc-dark .site-header .nav-link, html.hc-dark .site-header .nav-cta .util-login > summary { color: #fff; }
html.hc-dark .site-header .nav-link svg, html.hc-dark .site-header .util-login svg { color: #fff; }
html.hc-dark .site-header .nav-link:hover, html.hc-dark .site-header .nav-item.open > .nav-link { background: rgba(255, 255, 255, .16); }
html.hc-dark .site-header .nav-cta .btn-primary { background: #fff; color: #0b4fe0; box-shadow: 0 8px 18px -8px rgba(0, 20, 90, .5); }
html.hc-dark .site-header .nav::before, html.hc-pill .site-header .nav::before { transition: opacity .3s, background .3s; }
/* snake / milestone layout: cards alternate above and below the path; detail panels open on the free side of each card */
.c-p-theory, .c-p-clinical { top: calc(37% - var(--ch) / 2); } .c-p-practical, .c-p-workplace { top: calc(63% - var(--ch) / 2); }
.hc-snake { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hc-snake path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; }
.c-photo::after { content: attr(data-n); position: absolute; top: -12px; right: -12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0b4fe0; font-weight: 800; font-size: 14px; box-shadow: 0 8px 16px -6px rgba(0, 20, 90, .6), 0 0 0 4px rgba(255, 255, 255, .28); }
.c-photo { overflow: visible; } .c-photo img { border-radius: 16px; }

.hc-ins .ins-r > span:first-child { gap: .6em; white-space: nowrap; }

.hc-ins .ins-ft { flex-wrap: nowrap; } .hc-ins .pl { white-space: nowrap; padding: .35em .8em; font-size: .85em; } .hc-ins .ins-h { flex-wrap: wrap; row-gap: .1em; }

/* the road: a wide translucent lane with a bright centre line, drawn behind the cards */
.hc-snake path.road { stroke: rgba(255, 255, 255, .2); stroke-width: 58; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 0 rgba(255,255,255,.3)); }
.hc-snake path:not(.road) { stroke: rgba(255, 255, 255, .85); stroke-width: 3; }
.c-p-theory, .c-p-clinical { top: calc(35% - var(--ch) / 2); } .c-p-practical, .c-p-workplace { top: calc(65% - var(--ch) / 2); }
.hc-ins, .hc-snake, .hc-cards { pointer-events: none; } .hc-trust li > a { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; } .hc-trust li > a:hover b { color: var(--blue); }

.hc-trust .more a { color: var(--blue); }

/* nothing of the scroll story shows until the script has laid it out (no flash of cards in their resting row) */
@media (min-width: 1025px) and (min-height: 560px) {
  html.js .hc:not(.hc-static):not(.hc-ready) .hc-cards, html.js .hc:not(.hc-static):not(.hc-ready) .hc-ins, html.js .hc:not(.hc-static):not(.hc-ready) .hc-screen { visibility: hidden; }
}
/* the road sits behind every card */
.hc-snake { z-index: 0; } .hc-card { z-index: 1; }
.hc-ins .ins-ill { margin: 0; font-size: .78em; color: #66758f; letter-spacing: .02em; } .hc-ai .ill { display: block; margin-top: 8px; font-size: 11px; color: #66758f; }

.hc-ai .go { text-decoration: none; } .hc-ai .go:hover { text-decoration: underline; }

/* slim delivery strip under the hero */
.hc-strip { position: relative; z-index: 3; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: center; }
.hc-strip .hc-modes { margin: 0; }
/* first screen: calm, one idea */
@media (min-width: 1025px) and (min-height: 560px) { html.js .hc:not(.hc-static) .hc-copy { padding-top: calc(var(--hh) + clamp(36px, 7vh, 80px)); } html.js .hc:not(.hc-static) .hc-ctas { margin-top: clamp(22px, 3.4vh, 34px); } }
.hc-sub { max-width: 760px; }



/* ---- solutions hero ---- */
.hv { position: relative; overflow: hidden; background: #fff; font-family: Montserrat, Inter, system-ui, sans-serif; color: #0b1b3f; padding: clamp(28px, 5vh, 64px) 0 clamp(24px, 4vh, 48px); }
.hv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 3.5vw, 64px); align-items: center; }
.hv-copy { max-width: 560px; }
.hv-tag { margin: 0 0 14px; font-size: 14.4px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.hv-tag::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; border-radius: 2px; background: #cfe0ff; }
.hv-h1 { margin: 0; font-size: 33.1px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: #0b1b3f; font-family: inherit; }
.hv-mlv { margin: 16px 0 0; font-size: 20px; font-weight: 700; color: var(--blue); }
.hv-sub { margin: 18px 0 0; font-size: 14.4px; line-height: 1.6; font-weight: 400; color: #0b1b3f; max-width: 520px; }
.hv-ctas { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } .hv-ctas .btn { font-family: inherit; font-size: 16px; font-weight: 600; }
.hv-art { position: relative; width: 100%; }
.hv-stage { position: relative; width: 100%; aspect-ratio: 640 / 520; } .hv-still, .hv-slide svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .hv-slide .rv, .hv-slide .tk { transform-box: fill-box; }
.hv-slides { position: absolute; inset: 0; } .hv-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; } .hv-slide:first-child { opacity: 1; visibility: visible; }
.hv-badges { position: absolute; right: 2%; bottom: 3%; width: 46%; height: 64px; }
.hv-bd { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; opacity: 0; visibility: hidden; } .hv-bd:first-child { opacity: 1; visibility: visible; }
.hv-bd .ic { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, #fff); } .hv-bd .ic svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hv-bd .tx { display: flex; flex-direction: column; line-height: 1.2; text-align: left; } .hv-bd small { font-size: 14.4px; font-weight: 400; color: #52607a; } .hv-bd b { font-size: 16px; font-weight: 700; color: #0b1b3f; }
.hv-dots { display: flex; justify-content: center; gap: 12px; margin-top: 6px; }
.hv-dot { position: relative; width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; background: #c3d3f3; cursor: pointer; transition: background .2s, transform .2s; } .hv-dot[aria-current="true"] { background: #0b2a6b; transform: scale(1.25); } .hv-dot::after { content: ""; position: absolute; inset: -10px; } .hv-dot:focus-visible { outline: 3px solid #ff9f1a; outline-offset: 4px; }
html:not(.js) .hv-slide:first-child, .hv-art.is-still .hv-slide:first-child { opacity: 1; visibility: visible; }
/* slim delivery strip under the hero */
.hc-strip { position: relative; z-index: 3; padding: 14px 24px; background: #fff; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: center; }
.hc-strip .hc-modes { margin: 0; }
@media (max-width: 1000px) { .hv-grid { grid-template-columns: 1fr; } .hv-copy { max-width: 680px; } .hv-art { max-width: 640px; margin: 0 auto; } }
@media (max-width: 560px) { .hv-h1 { font-size: 26px; } .hv-ctas .btn { flex: 1 1 100%; justify-content: center; } .hv-badges { width: 62%; } .hv-bd .ic { width: 46px; height: 46px; } .hv-bd .ic svg { width: 22px; height: 22px; } .hv-bd small { font-size: 12px; } .hv-bd b { font-size: 13.5px; } }





















/* ---- world art ---- */
.hv-copy { container-type: inline-size; } .hv-type { display: block; min-height: 1.3em; margin-top: .1em; font-size: min(.86em, 5.6cqw); line-height: 1.25; white-space: nowrap; color: var(--blue, #0b55e6); } .hv-caret { display: inline-block; width: 3px; height: .88em; margin-left: 3px; vertical-align: -.08em; background: currentColor; animation: hvblink 1s steps(1) infinite; } @keyframes hvblink { 50% { opacity: 0; } } .hv-type.is-static .hv-caret, html.a11y-pause .hv-caret { display: none; } @media (prefers-reduced-motion: reduce) { .hv-caret { display: none; } }
.hv-mlv { position: relative; padding-top: 14px; margin-top: 12px; } .hv-mlv::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 3px; border-radius: 2px; background: var(--blue, #0b55e6); }
.hv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); } @media (min-width: 1200px) { .hv-grid { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); } } @media (min-width: 1340px) { .hv-art { margin-right: -36px; } } .hv-copy { max-width: 540px; }
.hv-stage { position: relative; width: 100%; aspect-ratio: 1448 / 1086; margin: -26px 0 -22px; } .hv-stage { container-type: inline-size; } .hv-world { text-rendering: geometricPrecision; } .hv-stage, .hv-cap { position: relative; z-index: 1; }
@container (max-width: 480px) { .hv-world .t2 { display: none; } }
.hv-world { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hv-world .sc, .hv-world .am { opacity: 0; } .hv-world .sc[data-i="0"], .hv-world .am[data-i="0"] { opacity: 1; }
.hv-world [data-a="pop"], .hv-world [data-a="sx"], .hv-world [data-a="wave"] { transform-box: fill-box; }
.hv-cap { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 10px; min-height: 84px; }
.hv-captext { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hv-name { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: #0b1b3f; } .hv-line { font-size: 14.4px; line-height: 1.5; font-weight: 400; color: #52607a; }
.hv-ctrl { display: flex; align-items: center; gap: 12px; flex: none; padding-bottom: 6px; } .hv-ctrl .hv-dots { margin: 0; }
.hv-pp { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1.5px solid #c3d3f3; border-radius: 50%; background: #fff; color: #0b2a6b; cursor: pointer; } .hv-pp:hover { background: #eef4ff; } .hv-pp:focus-visible { outline: 3px solid #ff9f1a; outline-offset: 3px; } .hv-pp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .hv-pp .p2 { display: none; fill: currentColor; } .hv-pp[aria-pressed="true"] .p1 { display: none; } .hv-pp[aria-pressed="true"] .p2 { display: inline; }
.hv-art.is-still .hv-ctrl .hv-pp { display: none; }
@media (max-width: 1000px) { .hv-grid { grid-template-columns: 1fr; } .hv-copy { max-width: 680px; } .hv-art { max-width: 640px; margin: 0 auto; } .hv-stage { margin: -2% 0 -5%; } .hv-name { font-size: 26px; } .hv-world .opt2 { display: none; } }
@media (max-width: 560px) { .hv-stage { margin: -14px -10px -8px; } .hv-cap { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; margin-top: 12px; } .hv-captext { min-height: 78px; } .hv-name { font-size: 21px; } .hv-line { font-size: 13.5px; } .hv-ctrl { justify-content: center; padding: 4px 0 0; } .hv-pp { width: 36px; height: 36px; } .hv-world .ambs, .hv-world .am-stat { display: none; } }

/* v3.0.2 mobile navigation fixes */
.mobile-menu-close-row { display:none; }
@media (max-width:980px) {
  .mobile-menu-close-row { display:block; list-style:none; border-bottom:1px solid var(--line-soft,#e5e7eb); }
  .mobile-menu-close { width:100%; display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:8px 4px; border:0; background:#fff; color:var(--ink-900,#111827); font:inherit; font-size:14px; font-weight:600; line-height:1.2; cursor:pointer; }
  .mobile-menu-close svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
  .nav-menu { top:var(--hdr-h,68px)!important; bottom:auto!important; height:auto!important; max-height:calc(100dvh - var(--hdr-h,68px))!important; overflow-y:auto!important; overscroll-behavior:contain; padding:8px var(--gutter,16px) calc(84px + env(safe-area-inset-bottom))!important; background:#fff!important; }
  .menu-open .nav-menu { visibility:visible!important; opacity:1!important; transform:none!important; }
  .nav-menu .mobile-cta { position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:5; padding:12px var(--gutter,16px) calc(12px + env(safe-area-inset-bottom))!important; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 28%)!important; }
  .nav-menu .nav-item { flex:0 0 auto; }
  .nav-menu .mega { max-height:none; }
  body.menu-open { overflow:hidden!important; }
}


/* DigiAssess 3.0.3: mobile navigation overlay recovery */
@media (max-width: 980px) {
  body.menu-open { overflow: hidden !important; }
  body.menu-open .site-header,
  body.menu-open .site-header.hdr-hidden,
  body.menu-open .site-header.util-hidden {
    position: relative !important; top: auto !important; transform: none !important;
    will-change: auto !important; overflow: visible !important; height: auto !important; min-height: 0 !important;
  }
  body.menu-open .site-header .nav,
  body.menu-open .site-header.hdr-hidden .nav {
    position: relative !important; height: 64px !important; min-height: 64px !important;
    transform: none !important; opacity: 1 !important; overflow: visible !important;
  }
  body.menu-open .site-header .nav-menu,
  body.menu-open .site-header.hdr-hidden .nav-menu {
    position: fixed !important; inset: 64px 0 0 !important; width: 100vw !important;
    height: auto !important; max-height: calc(100dvh - 64px) !important; margin: 0 !important;
    padding: 8px var(--gutter, 16px) calc(84px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important;
    overscroll-behavior: contain !important; background: #fff !important; opacity: 1 !important;
    visibility: visible !important; transform: none !important; z-index: 1301 !important;
  }
  body.menu-open .site-header .nav-menu .mobile-menu-close-row {
    display: block !important; position: sticky !important; top: 0 !important; z-index: 5 !important;
    margin: -8px calc(-1 * var(--gutter, 16px)) 4px !important;
    padding: 8px var(--gutter, 16px) !important; background: #fff !important; border-bottom: 1px solid #e5eaf2 !important;
  }
  body.menu-open .site-header .nav-menu .mobile-menu-close {
    display: flex !important; width: 100% !important; min-height: 44px !important; align-items: center !important;
    justify-content: space-between !important; border: 0 !important; background: transparent !important;
    color: #172b4d !important; font: inherit !important; font-weight: 600 !important;
  }
  body.menu-open .site-header .nav-menu .mobile-cta {
    position: fixed !important; z-index: 10 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; margin: 0 !important; padding: 10px var(--gutter, 16px) calc(10px + env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 20%) !important;
  }
  body.menu-open .hdr-float { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}