/* Sustainable Talent: site stylesheet (single source of truth)
   Migrated from index.html inline block on 2026-05-16. */

:root,
[data-theme='light'] {
  --bg: #f5f3ee;
  --surface: #fffdfa;
  --surface-2: #eef1ff;
  --surface-elevated: #ffffff;
  --studio-warm: #f5f3ee;
  --studio-cream: #fff7ea;
  --glass: rgba(255, 253, 250, .74);
  --glass-strong: rgba(255, 253, 250, .88);
  --text: #061F3D;
  --muted: #46546d;
  --faint: #7d8799;
  --line: rgba(11, 31, 59, .13);
  --line-strong: rgba(11, 31, 59, .22);
  --primary: #061F3D;
  --primary-2: #142b56;
  --accent: #6366f1;
  --link: #4f46e5;
  --link-hover: #6366f1;
  --system-violet: #6C4DFF;
  --system-indigo: #5b54f2;
  --system-violet-hi: #6C4DFF;
  --system-indigo-hi: #6366f1;
  --system-navy: #071426;
  --system-panel: #061F3D;
  --system-line: rgba(99, 102, 241, .22);
  --system-grid: rgba(11, 31, 59, .045);
  --system-glow: rgba(124, 92, 255, .22);
  --inverse: #f5f3ee;
  --shadow: 0 24px 80px rgba(11, 31, 59, .10);
  --btn-bg: var(--surface);
  --btn-text: var(--text);
  --btn-line: var(--line);
  --field-bg: rgba(255, 255, 255, .92);
  --field-text: #061F3D;
  --field-line: rgba(11, 31, 59, .14);
  --field-placeholder: rgba(11, 31, 59, .48);
  --badge-bg: #d8e2ff;
  --badge-text: #142b56;
  --on-dark: #f5f3ee;
  --on-dark-muted: rgba(245, 243, 238, .76);
  --on-dark-faint: rgba(245, 243, 238, .58);
  --on-dark-line: rgba(245, 243, 238, .16);
  --font-display: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: clamp(.75rem, .7rem + .25vw, .875rem);
  --text-sm: clamp(.875rem, .8rem + .35vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + .75vw, 1.45rem);
  --text-xl: clamp(1.6rem, 1.15rem + 1.8vw, 2.75rem);
  --text-hero: clamp(3.05rem, .95rem + 3.55vw, 4.1rem);
  --type-display-weight: 700;
  --type-label-weight: 600;
  --type-body-weight: 400;
  --leading-display: 1;
  --leading-heading: 1.08;
  --leading-body: 1.58;
  --tracking-display: -.038em;
  --tracking-heading: -.026em;
  --tracking-body: -.008em;
  --tracking-label: .075em;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --radius: 1.4rem;
  --radius-sm: .8rem;
}

[data-theme='dark'] {
  --bg: #070b1a;
  --surface: #0f1d36;
  --surface-2: #172b55;
  --surface-elevated: #142747;
  --glass: rgba(20, 39, 71, .68);
  --glass-strong: rgba(20, 39, 71, .86);
  --text: #f3f5fb;
  --muted: #c8cee0;
  --faint: #8e98b2;
  --line: rgba(245, 248, 255, .14);
  --line-strong: rgba(245, 248, 255, .26);
  --primary: #a5b4fc;
  --primary-2: #c7d2fe;
  --accent: #a5b4fc;
  --link: #c7d2fe;
  --link-hover: #e0e7ff;
  --system-line: rgba(165, 180, 252, .28);
  --system-grid: rgba(245, 248, 255, .045);
  --inverse: #061F3D;
  --shadow: 0 24px 80px rgba(0, 0, 0, .55);
  --btn-bg: rgba(245, 248, 255, .06);
  --btn-text: #f3f5fb;
  --btn-line: rgba(245, 248, 255, .18);
  --field-bg: rgba(245, 248, 255, .07);
  --field-text: #f3f5fb;
  --field-line: rgba(245, 248, 255, .22);
  --field-placeholder: rgba(245, 248, 255, .52);
  --badge-bg: rgba(165, 180, 252, .18);
  --badge-text: #e0e7ff;
}
:root { color-scheme: light dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }
	    html { scroll-behavior: smooth; }
	    body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--tracking-body);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), transparent 28rem),
    radial-gradient(circle at 7% 0%, rgba(36, 104, 178, .20), transparent 38rem),
    radial-gradient(circle at 90% 4%, rgba(99, 102, 241, .18), transparent 36rem),
    radial-gradient(circle at 86% 16%, rgba(255, 226, 184, .32), transparent 32rem),
    radial-gradient(circle at 46% 18%, rgba(141, 189, 255, .12), transparent 32rem),
    var(--bg);
  color: var(--text);
  transition: background-color .35s ease, color .35s ease;
	      -webkit-font-smoothing: antialiased;
	      overflow-x: hidden;
	    }
[data-theme='dark'] body {
  background:
    radial-gradient(circle at 8% 0%, rgba(36, 104, 178, .20), transparent 36rem),
    radial-gradient(circle at 92% 2%, rgba(124, 92, 255, .12), transparent 34rem),
    radial-gradient(circle at 45% 18%, rgba(216, 232, 255, .08), transparent 30rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
	    button, a.button { font: inherit; }
	    .container { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; }
	    @keyframes ambient-drift {
	      0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .72; }
	      50% { transform: translate3d(1.5rem, -1rem, 0) scale(1.04); opacity: .92; }
	    }
	    @keyframes line-flow {
	      0% { background-position: 0% 50%; opacity: .45; }
	      50% { opacity: .95; }
	      100% { background-position: 200% 50%; opacity: .45; }
	    }
	    @keyframes node-pulse {
	      0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .18), 0 18px 44px rgba(11, 31, 59, .12); }
	      50% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0), 0 24px 56px rgba(11, 31, 59, .18); }
	    }
	    @keyframes reveal-fade {
	      to { opacity: 1; filter: blur(0); }
	    }
	    @keyframes st-orbit-drift-one {
	      0%, 100% { transform: rotate(-18deg) translate3d(0, 0, 0) scale(1); }
	      50% { transform: rotate(-16deg) translate3d(.28rem, -.18rem, 0) scale(1.012); }
	    }
	    @keyframes st-orbit-drift-two {
	      0%, 100% { transform: rotate(17deg) translate3d(0, 0, 0) scale(1); }
	      50% { transform: rotate(19deg) translate3d(-.22rem, .2rem, 0) scale(1.016); }
	    }
	    @keyframes st-connector-breathe {
	      0%, 100% { opacity: .42; filter: blur(0); }
	      50% { opacity: .78; filter: blur(.15px); }
	    }
	    @keyframes st-node-signal {
	      0%, 100% {
	        transform: translate3d(0, 0, 0);
	        border-color: rgba(245, 243, 238, .16);
	        background: linear-gradient(135deg, rgba(245,243,238,.12), rgba(245,243,238,.055));
	        box-shadow: 0 18px 60px rgba(0,0,0,.22);
	        color: rgba(245, 243, 238, .82);
	      }
	      12% {
	        transform: translate3d(0, -1px, 0);
	        border-color: rgba(196, 181, 253, .46);
	        background: linear-gradient(135deg, rgba(245,243,238,.18), rgba(124,92,255,.14));
	        box-shadow: 0 0 0 1px rgba(196,181,253,.16), 0 18px 62px rgba(124,92,255,.24);
	        color: #f5f3ee;
	      }
	      24% {
	        transform: translate3d(0, 0, 0);
	        border-color: rgba(245, 243, 238, .16);
	        background: linear-gradient(135deg, rgba(245,243,238,.12), rgba(245,243,238,.055));
	        box-shadow: 0 18px 60px rgba(0,0,0,.22);
	        color: rgba(245, 243, 238, .82);
	      }
	    }
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(18px);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--space-4), 2.8vw, var(--space-7));
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.brand-emblem {
  width: 34px;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  border-radius: .5rem;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.54), transparent 34%),
    linear-gradient(135deg, var(--accent), var(--primary));
  color: #ffffff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: -.08em;
  box-shadow: 0 10px 24px rgba(11, 31, 59, .18);
}
.brand-text {
  color: var(--text);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 24px rgba(11, 31, 59, .16);
}
.brand-wordmark {
  width: clamp(188px, 15vw, 238px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(11, 31, 59, .08));
}
[data-theme='dark'] .brand-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0, 0, 0, .2));
}
.nav-links { display: flex; align-items: center; gap: clamp(var(--space-3), 1.4vw, var(--space-5)); color: var(--muted); font-size: clamp(.94rem, .9rem + .16vw, 1.02rem); font-weight: 600; letter-spacing: -.018em; }
.nav-links a:hover { color: var(--text); }
.menu-dropdown {
  position: relative;
  display: none;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.menu-dropdown summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.menu-dropdown summary::-webkit-details-marker { display: none; }
.menu-dropdown summary::after {
  content: "⌄";
  margin-left: .55rem;
  color: var(--accent);
  font-size: .95rem;
  line-height: 1;
}
.menu-dropdown[open] summary {
  border-color: color-mix(in oklab, var(--text) 26%, transparent);
  box-shadow: 0 18px 50px rgba(11, 31, 59, .12);
}
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-3));
  width: min(680px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .95);
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .16), transparent 16rem),
    color-mix(in oklab, var(--surface) 96%, transparent);
  box-shadow: 0 28px 90px rgba(11, 31, 59, .16);
  backdrop-filter: blur(18px);
  z-index: 30;
}
.menu-panel a {
  display: grid;
  gap: .22rem;
  min-height: 88px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  color: var(--text);
  align-content: start;
}
.menu-panel a span {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.01em;
}
.nav-actions { display: flex; align-items: center; gap: .55rem; }
.theme {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); cursor: pointer;
  font-size: .9rem;
}
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 40px; padding: 0 1rem;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: .9rem; letter-spacing: -.012em;
  white-space: nowrap;
}
.button.primary { background: var(--primary); color: var(--inverse); border-color: var(--primary); box-shadow: 0 10px 24px rgba(11, 31, 59, .16); }
.nav-actions a.button {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
}
.announcement-bar {
  display: none;
}
.announcement-bar {
  display: block;
  background: #e8f0ff;
  color: #061F3D;
  border-bottom: 1px solid rgba(11, 31, 59, .12);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -.015em;
}
.announcement-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
}
.announcement-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 .62rem;
  border-radius: 999px;
  background: #d8e2ff;
  color: #142b56;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .02em;
}
.announcement-inner a {
  color: #4f46e5;
  font-weight: 800;
  white-space: nowrap;
}
.nav {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(245, 243, 238, .42));
  border-bottom-color: rgba(11, 31, 59, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .48), 0 18px 70px rgba(11, 31, 59, .055);
  color: #061F3D;
}
.nav-links {
  color: rgba(11, 31, 59, .74);
}
.nav-links a:hover {
  color: #061F3D;
}
.brand-wordmark {
  filter: drop-shadow(0 10px 24px rgba(11, 31, 59, .10));
}
.brand-emblem {
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.55), transparent 34%),
    linear-gradient(135deg, #f5f3ee, #b8c6ff 48%, #6C4DFF);
  color: #061F3D;
}
.brand-text {
  color: #061F3D;
}
.brand-logo {
  border-radius: .45rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.theme,
.nav-actions .button {
  background: rgba(255, 255, 255, .42);
  border-color: rgba(11, 31, 59, .11);
  color: #061F3D;
}
.hero {
  padding-top: clamp(var(--space-20), 8vw, var(--space-24));
}
.nav-actions .button.primary {
  background: #6C4DFF;
  border-color: #6C4DFF;
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(124, 92, 255, .32);
}
.menu-dropdown summary {
  background: rgba(255, 255, 255, .42);
  border-color: rgba(11, 31, 59, .11);
  color: #061F3D;
}
.menu-panel {
  background: #08172a;
  border-color: rgba(245, 243, 238, .14);
}
.menu-panel a {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(245, 243, 238, .12);
  color: #f5f3ee;
}
.menu-panel a span {
  color: rgba(245, 243, 238, .62);
}
	    .hero {
	      position: relative;
	      padding: clamp(var(--space-12), 8vw, var(--space-24)) 0 var(--space-16);
	      overflow: hidden;
	    }
.hero .container {
  position: relative;
  z-index: 1;
}
	    .hero::before,
	    .hero::after {
	      content: "";
	      position: absolute;
	      pointer-events: none;
	      border-radius: 999px;
	      filter: blur(8px);
	      z-index: -1;
	      animation: ambient-drift 14s cubic-bezier(.4, 0, .2, 1) infinite;
	    }
	    .hero::before {
	      width: min(38vw, 540px);
	      aspect-ratio: 1;
	      right: -10vw;
	      top: 8rem;
	      background: radial-gradient(circle, rgba(99, 102, 241, .18), transparent 68%);
	    }
	    .hero::after {
	      width: min(42vw, 620px);
	      aspect-ratio: 1;
	      left: -16vw;
	      bottom: 8rem;
	      background: radial-gradient(circle, rgba(36, 104, 178, .18), transparent 70%);
	      animation-delay: -6s;
	    }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .65fr);
  gap: clamp(var(--space-6), 4vw, var(--space-12));
  align-items: end;
  padding-top: clamp(330px, 28vw, 400px);
}
.hero-enterprise-image {
  position: absolute;
  z-index: 0;
  top: clamp(1.2rem, 3.4vw, 3.4rem);
  left: clamp(1rem, 5vw, 5rem);
  width: min(880px, 62vw);
  border-radius: calc(var(--radius) * 1.4);
  overflow: hidden;
  box-shadow: 0 48px 138px rgba(11, 31, 59, .18);
  opacity: .98;
  transform: translateY(-.6rem);
  pointer-events: none;
  filter: saturate(1.08) contrast(1.04);
}
.hero-enterprise-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg, transparent 0 61%, rgba(99,102,241,.30) 61% 61.35%, transparent 61.35% 100%),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.72) 0 .22rem, transparent .26rem),
    radial-gradient(circle at 66% 42%, rgba(99,102,241,.72) 0 .18rem, transparent .22rem),
    radial-gradient(circle at 79% 48%, rgba(255,226,184,.72) 0 .18rem, transparent .22rem);
  background-size: auto, auto, auto, auto;
  mix-blend-mode: screen;
  opacity: .28;
}
.hero-enterprise-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 0%, rgba(245, 243, 238, .10) 48%, rgba(245, 243, 238, .58) 100%),
    linear-gradient(90deg, rgba(245, 243, 238, .10), transparent 45%);
}
.hero-enterprise-image img,
.hero-enterprise-image video {
  width: 100%;
  height: auto;
  display: block;
}
.hero-enterprise-image video {
  aspect-ratio: 1440 / 640;
  object-fit: cover;
}
.hero-system-frame {
  position: absolute;
  inset: clamp(.75rem, 1.6vw, 1.35rem);
  z-index: 3;
  border: 1px solid rgba(245,243,238,.24);
  border-radius: calc(var(--radius) * .95);
  pointer-events: none;
  opacity: .72;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(245,243,238,.10) 1px, transparent 1px);
  background-size: 58px 58px;
  mix-blend-mode: screen;
}
.hero-system-frame::before,
.hero-system-frame::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,243,238,.58), rgba(99,102,241,.62), transparent);
}
.hero-system-frame::before { top: 30%; }
.hero-system-frame::after { bottom: 28%; }
.frame-chip,
.frame-node,
.frame-panel {
  position: absolute;
  border: 1px solid rgba(245,243,238,.26);
  background: rgba(7,22,45,.32);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.frame-chip {
  top: 6%;
  left: 5%;
  border-radius: 999px;
  color: rgba(245,243,238,.78);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .36rem .58rem;
}
.frame-panel {
  right: 5%;
  bottom: 8%;
  width: min(190px, 26%);
  min-height: 66px;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(99,102,241,.34) 0 3px, transparent 3px),
    rgba(7,22,45,.34);
}
.frame-panel span {
  display: block;
  margin: .62rem .72rem .22rem;
  width: 42%;
  height: 4px;
  border-radius: 999px;
  background: rgba(245,243,238,.70);
}
.frame-panel span:nth-child(2) { width: 70%; opacity: .42; }
.frame-panel span:nth-child(3) { width: 54%; opacity: .34; }
.frame-node {
  width: .46rem;
  height: .46rem;
  border-radius: 999px;
  background: rgba(245,243,238,.86);
  box-shadow: 0 0 22px rgba(99,102,241,.62);
}
.frame-node:nth-of-type(2) { left: 28%; top: 31%; }
.frame-node:nth-of-type(3) { left: 57%; top: 30%; background: rgba(255,226,184,.88); }
.frame-node:nth-of-type(4) { left: 72%; bottom: 27%; background: rgba(99,102,241,.86); }
.frame-node:nth-of-type(5) { left: 38%; bottom: 28%; }
.eyebrow {
  color: var(--accent);
  font-weight: var(--type-label-weight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  margin-bottom: var(--space-6);
}
		    h1, h2, h3 { font-family: var(--font-display); font-weight: var(--type-display-weight); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
		    h1 { max-width: 900px; font-size: var(--text-hero); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.desktop-break { display: none; }
@media (min-width: 901px) {
  .desktop-break { display: block; }
  .executive-brief { transform: translateY(-11.25rem); }
}
h2 { font-size: var(--text-xl); max-width: 820px; font-weight: 600; line-height: 1.06; letter-spacing: -.018em; }
h3 { font-size: var(--text-lg); }
.hero p { margin-top: var(--space-6); max-width: 760px; color: var(--muted); font-size: var(--text-lg); line-height: 1.46; letter-spacing: -.015em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
	    .executive-brief {
	      border: 1px solid var(--line);
	      border-radius: calc(var(--radius) * 1.15);
	      background:
	        linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.36) 45%, rgba(255,255,255,.76)),
	        radial-gradient(circle at 82% 12%, rgba(99, 102, 241, .18), transparent 15rem),
	        radial-gradient(circle at 12% 88%, rgba(36, 104, 178, .14), transparent 17rem),
	        linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface-2) 50%, transparent)),
	        var(--surface);
	      padding: var(--space-4);
	      box-shadow: 0 36px 110px rgba(11, 31, 59, .14), inset 0 1px 0 rgba(255,255,255,.72);
	      position: relative;
	      overflow: hidden;
	    }
	    .executive-brief::before {
	      content: "";
	      position: absolute;
	      inset: 0;
	      background-image:
	        linear-gradient(90deg, rgba(11,31,59,.045) 1px, transparent 1px);
	      background-size: 42px 42px;
	      mask-image: radial-gradient(circle at 62% 46%, #000 0 42%, transparent 72%);
	      opacity: .65;
	      pointer-events: none;
	    }
	    .executive-brief::after {
	      content: "";
	      position: absolute;
	      inset: auto -16% -24% 24%;
	      height: 220px;
	      background:
	        radial-gradient(circle, rgba(99, 102, 241, .22), transparent 66%),
	        radial-gradient(circle at 70% 30%, rgba(36, 104, 178, .14), transparent 55%);
	      pointer-events: none;
	    }
	    .executive-brief > * { position: relative; z-index: 1; }
.brief-label {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-xs);
  margin-bottom: var(--space-3);
}
.executive-brief h2 {
  font-size: clamp(1.35rem, 1.02rem + .92vw, 1.92rem);
  line-height: 1.06;
  letter-spacing: var(--tracking-heading);
  max-width: 520px;
  margin-bottom: var(--space-3);
}
.hero .brief-copy {
  margin-top: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.36;
  letter-spacing: -.012em;
  max-width: 100%;
}
	    .brief-list {
	      display: grid;
	      grid-template-columns: repeat(3, minmax(0, 1fr));
	      gap: .45rem;
	      margin-top: var(--space-3);
	      position: relative;
	      z-index: 1;
	    }
	    .brief-system {
	      display: none;
	    }
	    .brief-system::before,
	    .brief-system::after {
	      content: "";
	      position: absolute;
	      left: 0;
	      right: 0;
	      height: 1px;
	      background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .75), rgba(36, 104, 178, .52), transparent);
	      background-size: 200% 100%;
	      animation: line-flow 4.8s linear infinite;
	    }
	    .brief-system::before { top: 34%; }
	    .brief-system::after { top: 66%; animation-delay: -2.1s; }
	    .system-node {
	      position: absolute;
	      display: grid;
	      place-items: center;
	      min-width: 74px;
	      min-height: 30px;
	      padding: .28rem .55rem;
	      border-radius: 999px;
	      border: 1px solid rgba(255,255,255,.72);
	      background: rgba(255,255,255,.82);
	      backdrop-filter: blur(14px);
	      color: var(--text);
	      font-size: .64rem;
	      font-weight: 700;
	      letter-spacing: var(--tracking-label);
	      text-transform: uppercase;
	      animation: node-pulse 4.4s ease-in-out infinite;
	      z-index: 1;
	      box-shadow: 0 14px 40px rgba(11, 31, 59, .10);
	    }
	    .system-node:nth-child(1) { top: 12%; left: 0; animation-delay: -.8s; }
	    .system-node:nth-child(2) { bottom: 12%; left: 0; animation-delay: -1.6s; }
	    .system-node:nth-child(3) { top: 12%; right: 0; animation-delay: -2.4s; }
	    .system-node:nth-child(4) { bottom: 12%; right: 0; animation-delay: -3.2s; }
	    .system-hub {
	      position: absolute;
	      inset: 50% auto auto 50%;
	      transform: translate(-50%, -50%);
	      width: 64px;
	      height: 64px;
	      border-radius: 50%;
	      display: grid;
	      place-items: center;
	      text-align: center;
	      border: 1px solid color-mix(in oklab, var(--accent) 48%, var(--line));
	      background:
	        radial-gradient(circle at 34% 24%, rgba(255,255,255,.78), transparent 24%),
	        radial-gradient(circle at 70% 76%, rgba(99, 102, 241, .38), transparent 42%),
	        linear-gradient(145deg, var(--primary), #123967 72%);
	      color: var(--inverse);
	      font-family: var(--font-display);
	      font-size: .56rem;
	      font-weight: 700;
	      line-height: 1.05;
	      letter-spacing: var(--tracking-heading);
	      box-shadow: 0 18px 42px rgba(11, 31, 59, .20), 0 0 0 6px rgba(255,255,255,.40);
	      z-index: 2;
	    }
.brief-list div {
  display: grid;
  gap: .25rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .5rem .48rem;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  color: var(--muted);
  font-size: .72rem;
}
.brief-list strong {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  font-size: .74rem;
  line-height: 1.15;
}
.brief-list span {
  display: none;
}
.proof-strip {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  color: var(--muted);
}
.signal-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.signal {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface) 72%, transparent);
  padding: var(--space-4);
}
.signal span {
  display: block;
  color: var(--accent);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.signal strong {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}
.proof-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
	    .proof-card.hero-proof {
	      grid-template-columns: 1.15fr .85fr;
	      align-items: center;
	    }
.proof-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.proof-stat {
  border-left: 1px solid var(--line);
  padding-left: var(--space-4);
}
.proof-stat:first-child {
  border-left: 0;
  padding-left: 0;
}
.proof-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  color: var(--text);
}
.proof-stat span {
  display: block;
  margin-top: 0;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.25;
  font-weight: 700;
}
.logo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.hero {
  padding: clamp(var(--space-6), 4.5vw, var(--space-10)) 0 clamp(var(--space-8), 5vw, var(--space-12));
  background:
    radial-gradient(circle at 68% 4%, rgba(124, 92, 255, .22), transparent 24rem),
    radial-gradient(circle at 4% 18%, rgba(37, 99, 235, .13), transparent 30rem),
    linear-gradient(180deg, #f8f7f3 0%, #eef2ff 46%, #f5f3ee 100%);
  color: #061F3D;
  border-top: 0;
}
.st-infra-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 5 / 4;
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 243, 238, .12);
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 50% 42%, rgba(124,92,255,.18), transparent 15rem),
    linear-gradient(145deg, rgba(245, 243, 238, .08), rgba(245, 243, 238, .035));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 34px 100px rgba(0,0,0,.20);
  overflow: hidden;
  contain: layout paint;
}
.st-infra-visual::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(245, 243, 238, .13);
  border-radius: 999px;
  transform: rotate(-18deg);
  animation: st-orbit-drift-one 24s ease-in-out infinite;
}
.st-infra-visual::after {
  content: "";
  position: absolute;
  inset: 24% 14%;
  border: 1px solid rgba(124, 92, 255, .28);
  border-radius: 999px;
  transform: rotate(17deg);
  animation: st-orbit-drift-two 28s ease-in-out infinite;
}
.st-infra-core {
  position: relative;
  z-index: 2;
  width: clamp(176px, 20vw, 265px);
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(var(--space-5), 2vw, var(--space-7));
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.26), rgba(255,255,255,.08) 16%, transparent 34%),
    radial-gradient(circle at 72% 76%, rgba(124,92,255,.36), transparent 42%),
    linear-gradient(145deg, #0d2444, #071426 74%);
  color: #f5f3ee;
  box-shadow:
    0 0 0 1px rgba(245,243,238,.12),
    0 34px 110px rgba(124,92,255,.24),
    0 20px 70px rgba(0,0,0,.28);
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .86rem + .48vw, 1.28rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
}
.st-infra-core small {
  display: block;
  margin-top: var(--space-2);
  color: rgba(245, 243, 238, .58);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.st-infra-node {
  position: absolute;
  z-index: 3;
  padding: .5rem .7rem;
  border: 1px solid rgba(245, 243, 238, .16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(245,243,238,.12), rgba(245,243,238,.055));
  color: rgba(245, 243, 238, .82);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  animation: st-node-signal 18s ease-in-out infinite;
}
.st-infra-node:nth-of-type(1) { top: 12%; left: 4%; animation-delay: 0s; }
.st-infra-node:nth-of-type(2) { top: 16%; right: 4%; animation-delay: 4.5s; }
.st-infra-node:nth-of-type(3) { bottom: 18%; left: 4%; animation-delay: 9s; }
.st-infra-node:nth-of-type(4) { bottom: 12%; right: 4%; animation-delay: 13.5s; }
.st-infra-line {
  position: absolute;
  z-index: 1;
  width: 78%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,92,255,.56), transparent);
  opacity: .78;
  animation: st-connector-breathe 16s ease-in-out infinite;
}
.st-infra-line.one { transform: rotate(-18deg); }
.st-infra-line.two { transform: rotate(18deg); }
.st-infra-caption {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: rgba(245, 243, 238, .62);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.st-orbit-card {
  border: 1px solid rgba(11, 31, 59, .10);
  border-radius: 1.35rem;
  padding: clamp(var(--space-4), 2.2vw, var(--space-5));
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(18px);
  color: #061F3D;
  box-shadow: 0 28px 90px rgba(11, 31, 59, .10);
}
.st-orbit-card .eyebrow {
  color: rgba(11, 31, 59, .56);
}
.st-orbit-card h2 {
  max-width: 14ch;
  font-size: clamp(1.85rem, 1.08rem + 2.45vw, 3.7rem);
  font-weight: 600;
  line-height: 1.01;
  letter-spacing: -.028em;
  color: #061F3D;
}
.st-orbit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.st-orbit-grid span {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(11, 31, 59, .09);
  border-radius: 1rem;
  padding: var(--space-3);
  background: rgba(255, 255, 255, .52);
  color: rgba(11, 31, 59, .66);
  font-size: var(--text-sm);
  line-height: 1.3;
}
.st-orbit-grid strong {
  display: block;
  color: #061F3D;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, .98rem + .46vw, 1.42rem);
  line-height: 1;
  letter-spacing: -.04em;
}
.st-operating-layer {
  padding: clamp(var(--space-6), 4vw, var(--space-10)) 0 clamp(var(--space-10), 6vw, var(--space-16));
  background:
    radial-gradient(circle at 76% 0%, rgba(124, 92, 255, .10), transparent 24rem),
    linear-gradient(180deg, #f5f3ee 0%, #f8f7f3 100%);
  border-bottom: 1px solid rgba(11,31,59,.08);
}
.st-layer-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11,31,59,.08);
  border-radius: calc(var(--radius) * 1.25);
  padding: clamp(var(--space-6), 4.8vw, var(--space-10));
  background:
    radial-gradient(circle at 20% 10%, rgba(124,92,255,.12), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(238,242,255,.72));
  background-size: auto, auto;
  box-shadow: 0 28px 90px rgba(11, 31, 59, .07);
}
.st-layer-panel::before {
  content: "";
  position: absolute;
  inset: 54% 7% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.42), transparent);
  pointer-events: none;
}
.st-layer-head {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(var(--space-7), 5.4vw, var(--space-12));
  align-items: center;
  position: relative;
  z-index: 1;
}
.st-layer-head h2 {
  max-width: 15ch;
  font-size: clamp(2.2rem, 1.1rem + 2.7vw, 4.25rem);
  line-height: .98;
  letter-spacing: -.032em;
}
.st-layer-head p {
  max-width: 560px;
  margin-top: var(--space-4);
  color: rgba(11, 31, 59, .68);
  font-size: clamp(1.03rem, .95rem + .24vw, 1.16rem);
  line-height: 1.48;
  font-weight: 500;
  letter-spacing: -.018em;
}
.st-layer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
  margin-bottom: clamp(var(--space-4), 2.8vw, var(--space-6));
}
.st-layer-actions .button {
  min-height: 44px;
  padding-inline: var(--space-5);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: -.018em;
}
.st-layer-actions .button:not(.primary) {
  background: rgba(255,255,255,.64);
  border-color: rgba(11,31,59,.10);
  color: #061F3D;
}
.st-layer-dashboard {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border: 1px solid rgba(11, 31, 59, .09);
  border-radius: 1.2rem;
  padding: var(--space-4);
  background:
    radial-gradient(circle at 76% 18%, rgba(124,92,255,.16), transparent 16rem),
    linear-gradient(145deg, rgba(255,255,255,.90), rgba(238,242,255,.74));
  background-size: auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 24px 70px rgba(11, 31, 59, .07);
}
.st-layer-dashboard::before {
  content: "";
  position: absolute;
  inset: 15% 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.42), transparent);
}
.st-dashboard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  color: rgba(11,31,59,.58);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.st-dashboard-top strong {
  color: #061F3D;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .72vw, 1.72rem);
  letter-spacing: -.045em;
  text-transform: none;
}
.st-dashboard-status {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 999px;
  padding: .48rem .68rem;
  background: rgba(255,255,255,.58);
  color: rgba(11,31,59,.62);
  white-space: nowrap;
}
.st-dashboard-status::before {
  content: "";
  width: .46rem;
  height: .46rem;
  border-radius: 999px;
  background: #6C4DFF;
  box-shadow: 0 0 0 5px rgba(124,92,255,.12);
}
.st-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.st-dashboard-card {
  min-height: 92px;
  border: 1px solid rgba(11,31,59,.08);
  border-radius: .95rem;
  padding: var(--space-3);
  background: rgba(255,255,255,.68);
  box-shadow: 0 16px 42px rgba(11,31,59,.045);
}
.st-dashboard-card span {
  display: block;
  color: rgba(11,31,59,.52);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.st-dashboard-card strong {
  display: block;
  margin-top: var(--space-3);
  color: #061F3D;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
  letter-spacing: -.045em;
  line-height: .95;
}
.st-dashboard-card small {
  display: block;
  margin-top: .55rem;
  color: rgba(11,31,59,.58);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
}
.st-dashboard-card.wide {
  grid-column: 1 / -1;
  min-height: 104px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: var(--space-4);
  align-items: end;
}
.st-dashboard-bars {
  display: grid;
  gap: .52rem;
  align-self: stretch;
  align-content: center;
}
.st-dashboard-bars i {
  display: block;
  height: .5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,102,241,.28), rgba(124,92,255,.74));
}
.st-dashboard-bars i:nth-child(2) { width: 74%; opacity: .72; }
.st-dashboard-bars i:nth-child(3) { width: 52%; opacity: .48; }
.st-dashboard-bars i:first-child { width: 92%; }
.st-dashboard-foot {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.st-dashboard-foot span {
  border: 1px solid rgba(11,31,59,.075);
  border-radius: 999px;
  padding: .62rem .7rem;
  background: rgba(255,255,255,.52);
  color: rgba(11,31,59,.62);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}
.st-dashboard-note {
  margin-top: var(--space-3);
  border: 1px solid rgba(99,102,241,.13);
  border-radius: .95rem;
  padding: .78rem .9rem;
  background: rgba(255, 255, 255, .58);
  color: rgba(11,31,59,.66);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .018em;
  text-align: center;
}
.st-layer-flow {
  position: relative;
  z-index: 1;
  margin-top: clamp(var(--space-7), 4.4vw, var(--space-10));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.st-layer-step {
  position: relative;
  min-height: 180px;
  /* 3-row grid: number badge / bold label / description.
     Rows 1 & 2 are fixed-size so labels share a baseline across all cards;
     row 3 grows freely so descriptions can wrap to 1/2/3 lines without
     pushing the label up. Fixes the Govern misalignment (2026-05). */
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-3);
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: 1.1rem;
  padding: var(--space-4);
  background: rgba(255,255,255,.66);
  box-shadow: 0 18px 54px rgba(11,31,59,.055);
}
.st-layer-step > div {
  display: contents;
}
.st-layer-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-3) * -1);
  width: var(--space-3);
  height: 1px;
  background: rgba(99,102,241,.42);
}
.st-layer-step:last-child::after { display: none; }
.st-layer-step b {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--system-violet), var(--system-indigo));
  color: #fff;
  font-size: var(--text-xs);
  box-shadow: 0 14px 32px rgba(99,102,241,.24);
}
.st-layer-step strong {
  display: block;
  color: #061F3D;
  font-family: var(--font-display);
  font-size: clamp(1.42rem, 1.06rem + 1.08vw, 2.08rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}
.st-layer-step span {
  color: rgba(11,31,59,.72);
  font-size: clamp(.95rem, .9rem + .12vw, 1.02rem);
  line-height: 1.34;
  font-weight: 600;
}
.st-section-lede {
  display: grid;
  grid-template-columns: .82fr 1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: end;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}
.st-section-lede h2 {
  max-width: 13.5ch;
  font-size: clamp(2.45rem, 1.18rem + 3.9vw, 5.65rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.032em;
}
.st-section-lede p {
  color: var(--muted);
  font-size: clamp(1.02rem, .94rem + .28vw, 1.18rem);
  line-height: 1.55;
}
.st-section-link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-5);
  color: var(--accent);
  font-weight: 800;
  letter-spacing: -.018em;
}
.st-section-link::after {
  content: "→";
  margin-left: .55rem;
  transition: transform .2s ease;
}
.st-section-link:hover::after {
  transform: translateX(3px);
}
.st-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
#model .st-platform-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.st-platform-card {
  position: relative;
  overflow: hidden;
  min-height: 232px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: 1.25rem;
  padding: var(--space-6);
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .08), transparent 12rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(248,248,252,.82));
  box-shadow: 0 20px 64px rgba(11, 31, 59, .055);
}
.st-platform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,31,59,.032) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(135deg, transparent, #000 22%, #000 72%, transparent);
  pointer-events: none;
}
.st-platform-card::after {
  content: "";
  position: absolute;
  width: 9rem;
  height: 1px;
  right: 1.25rem;
  top: 1.25rem;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.46));
  transform: rotate(-18deg);
  pointer-events: none;
}
.st-platform-card > * { position: relative; z-index: 1; }
.st-platform-card.featured {
  grid-column: span 2;
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .16), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(233,237,255,.76));
  color: #061F3D;
  border-color: rgba(124, 92, 255, .14);
}
.st-platform-card span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.st-platform-card.featured span,
.st-platform-card.featured p {
  color: rgba(11, 31, 59, .62);
}
.st-platform-card h3 {
  max-width: 18ch;
  font-size: clamp(1.52rem, 1.08rem + 1.35vw, 2.5rem);
  line-height: .98;
  letter-spacing: -.05em;
}
.st-platform-card.featured h3 {
  max-width: 15ch;
  font-size: clamp(2rem, 1.1rem + 2.75vw, 4.05rem);
  color: #061F3D;
}
.st-platform-card p {
  color: var(--muted);
  line-height: 1.45;
  font-size: var(--text-sm);
}
#model .st-platform-card {
  min-height: 178px;
  padding: clamp(var(--space-4), 2.6vw, var(--space-5));
  gap: var(--space-4);
}
#model .st-platform-card h3 {
  max-width: 11ch;
  font-size: clamp(1.42rem, 1.02rem + 1.05vw, 2.1rem);
}
#model .st-platform-card p {
  max-width: 24ch;
}
.st-sequence {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: calc(var(--radius) * 1.25);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  background:
    radial-gradient(circle at 8% 8%, rgba(124, 92, 255, .10), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(238,242,255,.72));
  box-shadow: 0 28px 90px rgba(11, 31, 59, .07);
}
.st-sequence::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,31,59,.034) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 34% 40%, #000, transparent 72%);
  pointer-events: none;
}
.st-sequence::after {
  content: "";
  position: absolute;
  width: 54%;
  height: 34%;
  right: 8%;
  top: 24%;
  border: 1px solid rgba(99,102,241,.16);
  border-radius: 999px;
  transform: rotate(8deg);
  pointer-events: none;
}
.st-sequence > * { position: relative; z-index: 1; }
.st-sequence-intro {
  margin-top: var(--space-5);
  color: var(--muted);
}
.st-sequence-list {
  display: grid;
  gap: var(--space-3);
}
.st-sequence-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: 1rem;
  padding: var(--space-5);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 16px 42px rgba(11, 31, 59, .045);
}
.st-sequence-row b {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(124, 92, 255, .12);
  color: #5b45e8;
  font-size: var(--text-xs);
}
.st-sequence-row strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.75rem);
  line-height: 1;
  letter-spacing: -.042em;
}
.st-sequence-row span {
  display: block;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.operator-system {
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(var(--space-7), 5vw, var(--space-12));
  background:
    radial-gradient(circle at 80% 12%, rgba(124, 92, 255, .14), transparent 18rem),
    radial-gradient(circle at 18% 92%, rgba(11, 31, 59, .07), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(238,242,255,.72));
}
.operator-system h2 {
  max-width: 13ch;
}
.operator-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.operator-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid rgba(11,31,59,.08);
  border-radius: 999px;
  padding: .58rem .82rem;
  background: rgba(255,255,255,.62);
  color: rgba(11,31,59,.70);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(11,31,59,.04);
}
.operator-pullquote {
  margin-top: var(--space-6);
  border-left: 3px solid #6C4DFF;
  padding-left: var(--space-4);
  color: #061F3D;
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + .45vw, 1.38rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.035em;
  max-width: 34rem;
}
.operator-pullquote span {
  display: block;
  margin-top: var(--space-3);
  color: rgba(11,31,59,.54);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}
.operator-map {
  position: relative;
  min-height: 500px;
  border: 1px solid rgba(11,31,59,.08);
  border-radius: 1.35rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(124,92,255,.18), transparent 15rem),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(245,247,255,.66));
  background-size: auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 24px 70px rgba(11,31,59,.07);
}
.operator-map::before,
.operator-map::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events: none;
}
.operator-map::before {
  width: 78%;
  height: 42%;
}
.operator-map::after {
  width: 58%;
  height: 70%;
  transform: translate(-50%, -50%) rotate(18deg);
}
.operator-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(11rem, 18vw, 15rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: var(--space-5);
  text-align: center;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.34), transparent 22%),
    radial-gradient(circle at 72% 72%, rgba(124,92,255,.44), transparent 30%),
    linear-gradient(145deg, #061F3D, #111a48 70%, #080f24);
  color: #fff;
  box-shadow: 0 34px 90px rgba(11,31,59,.22), 0 0 70px rgba(124,92,255,.18);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.operator-hub strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, .92rem + .5vw, 1.32rem);
  line-height: 1.03;
  letter-spacing: -.04em;
}
.operator-hub span {
  display: block;
  margin-top: var(--space-2);
  color: rgba(245,243,238,.68);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.operator-node {
  position: absolute;
  z-index: 3;
  min-width: 112px;
  border: 1px solid rgba(11,31,59,.10);
  border-radius: 999px;
  padding: .7rem .92rem;
  background: rgba(255,255,255,.74);
  color: rgba(11,31,59,.78);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 16px 44px rgba(11,31,59,.07);
  backdrop-filter: blur(16px);
}
.operator-node.one { left: 7%; top: 12%; }
.operator-node.two { right: 8%; top: 13%; }
.operator-node.three { left: 9%; top: 38%; }
.operator-node.four { right: 8%; top: 39%; }
.operator-node.five { left: 10%; bottom: 18%; }
.operator-node.six { right: 10%; bottom: 18%; }
.operator-node.accent {
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  border-color: rgba(124,92,255,.22);
  background: rgba(245,243,238,.88);
  color: #5b45e8;
}
.operator-caption {
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: 1px solid rgba(11,31,59,.08);
  padding-top: var(--space-4);
  color: rgba(11,31,59,.58);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero::before,
.hero::after {
  display: none;
}
.sequoia-hero-center {
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
}
.sequoia-hero-center .eyebrow {
  color: #8ea2ff;
  margin-bottom: var(--space-5);
}
.sequoia-hero-center h1 {
  max-width: 1040px;
  font-size: clamp(3.05rem, 1.2rem + 5.4vw, 6.25rem);
  line-height: .93;
  letter-spacing: -.064em;
  color: #f5f3ee;
}
.sequoia-hero-center p {
  max-width: 760px;
  margin-top: var(--space-8);
  color: rgba(245, 243, 238, .86);
  font-size: clamp(1.08rem, .96rem + .48vw, 1.35rem);
  line-height: 1.5;
  letter-spacing: -.018em;
}
.sequoia-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
.sequoia-hero-actions .button {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(245, 243, 238, .18);
  color: #f5f3ee;
}
.sequoia-hero-actions .button.primary {
  background: #6C4DFF;
  border-color: #6C4DFF;
  color: #ffffff;
}
.proof-carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(var(--space-24), 11vw, var(--space-32));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(284px, 360px);
  gap: var(--space-4);
  overflow-x: auto;
  padding: 0 max(1rem, calc((100vw - 1200px) / 2)) var(--space-8);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.proof-carousel::-webkit-scrollbar {
  display: none;
}
.proof-tile {
  min-height: 276px;
  border: 1px solid rgba(245, 243, 238, .18);
  border-radius: 1.35rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  color: #f5f3ee;
  scroll-snap-align: start;
  position: relative;
  box-shadow: 0 34px 100px rgba(0, 0, 0, .26);
  isolation: isolate;
}
.proof-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.34), transparent 32%),
    radial-gradient(circle at 85% 8%, rgba(124, 92, 255, .18), transparent 12rem);
  opacity: .62;
  z-index: -1;
}
.proof-tile.video {
  grid-column: span 2;
  min-width: min(620px, 78vw);
}
.proof-tile video,
.proof-tile img {
  width: 100%;
  height: 100%;
  min-height: 236px;
  object-fit: cover;
  display: block;
}
.proof-tile.logo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .20), transparent 13rem),
    linear-gradient(145deg, #fbfbff, #edf0ff 74%);
  color: #061F3D;
}
.proof-tile.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .16), transparent 12rem),
    linear-gradient(145deg, #fbfbff, #e9edff);
  color: #061F3D;
}
.proof-tile.featured-proof {
  background:
    radial-gradient(circle at 82% 8%, rgba(216, 222, 255, .18), transparent 13rem),
    radial-gradient(circle at 20% 100%, rgba(124, 92, 255, .20), transparent 15rem),
    linear-gradient(145deg, #061F3D, #13294d);
  color: #f5f3ee;
  border-color: rgba(245, 243, 238, .20);
}
.proof-tile.dark {
  background:
    radial-gradient(circle at 82% 8%, rgba(124, 92, 255, .28), transparent 12rem),
    linear-gradient(145deg, #061F3D, #13294d);
  color: #f5f3ee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
}
.proof-tile .quote-mark {
  color: #6C4DFF;
  font-size: 3.4rem;
  line-height: .8;
  font-weight: 800;
}
.proof-tile.featured-proof .quote-mark {
  color: #d8deff;
}
.proof-tile blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, .98rem + .48vw, 1.42rem);
  line-height: 1.1;
  letter-spacing: -.04em;
  max-width: 16.5ch;
}
.proof-tile.featured-proof blockquote {
  max-width: 15ch;
}
.proof-tile.logo blockquote,
.proof-tile.dark blockquote {
  max-width: 18ch;
}
.proof-tile footer {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in oklab, currentColor 16%, transparent);
  font-size: var(--text-xs);
  color: color-mix(in oklab, currentColor 74%, transparent);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -.01em;
}
.proof-tile .tile-logo {
  width: auto;
  max-width: 132px;
  max-height: 38px;
  min-height: 0;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  align-self: flex-start;
}
.proof-tile.dark .tile-logo {
  max-width: 112px;
  max-height: 34px;
  mix-blend-mode: normal;
  filter: brightness(1.08);
}
.partner-line {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
  color: #d8deff;
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: -.01em;
}
.sequoia-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  border-top: 1px solid rgba(245, 243, 238, .16);
  border-bottom: 1px solid rgba(245, 243, 238, .16);
}
.sequoia-stat {
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  border-left: 1px solid rgba(245, 243, 238, .16);
  text-align: center;
}
.sequoia-stat:first-child {
  border-left: 0;
}
.sequoia-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.05rem + 3vw, 4.3rem);
  line-height: .9;
  color: #f5f3ee;
  letter-spacing: -.055em;
}
.sequoia-stat span {
  display: block;
  margin-top: var(--space-3);
  color: rgba(245, 243, 238, .68);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.25;
}
.sequoia-footnote {
  margin: var(--space-4) auto 0;
  max-width: 720px;
  text-align: center;
  color: rgba(245, 243, 238, .54);
  font-size: var(--text-xs);
}
.platform-section {
  background: #f5f3ee;
}
.platform-lede {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(var(--space-8), 7vw, var(--space-16));
  align-items: start;
}
.platform-lede h2 {
  max-width: 900px;
  font-size: clamp(2.4rem, 1.2rem + 4vw, 5.7rem);
  line-height: .95;
  letter-spacing: -.06em;
}
.platform-lede p {
  color: var(--muted);
  font-size: clamp(1.05rem, .96rem + .36vw, 1.25rem);
  line-height: 1.55;
  max-width: 650px;
}
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
}
.benefit-item {
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}
.benefit-item h3 {
  max-width: 280px;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.benefit-item p {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.solutions-panel {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(var(--space-8), 6vw, var(--space-14, 3.5rem));
  align-items: start;
}
.solution-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.solution-row {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--line);
}
.solution-row span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.solution-row h3 {
  font-size: clamp(1.45rem, 1.05rem + 1.35vw, 2.55rem);
  letter-spacing: -.046em;
}
.solution-row p {
  margin-top: var(--space-3);
  color: var(--muted);
  max-width: 620px;
}
.client-impact {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: calc(var(--radius) * 1.25);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  background:
    radial-gradient(circle at 82% 8%, rgba(124, 92, 255, .34), transparent 23rem),
    radial-gradient(circle at 12% 92%, rgba(99, 102, 241, .18), transparent 19rem),
    linear-gradient(145deg, #08182f 0%, #061F3D 52%, #11164a 100%);
  box-shadow: 0 36px 120px rgba(11, 31, 59, .22);
}
.client-impact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, #000, transparent 72%);
  pointer-events: none;
}
.client-impact::after {
  content: "";
  position: absolute;
  width: 44%;
  height: 28%;
  right: 7%;
  top: 12%;
  border: 1px solid rgba(191, 197, 255, .16);
  border-radius: 999px;
  transform: rotate(-9deg);
  pointer-events: none;
}
.client-impact .eyebrow {
  color: rgba(216, 222, 255, .76);
}
.client-impact > * { position: relative; z-index: 1; }
.client-impact-copy h2 {
  color: #fff;
  font-size: clamp(2.15rem, 1.12rem + 3.2vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.client-impact-copy p {
  margin-top: var(--space-5);
  color: rgba(235, 238, 255, .78);
  font-size: clamp(1.02rem, .96rem + .18vw, 1.14rem);
  line-height: 1.52;
}
.client-impact .st-section-link {
  color: #fff;
}
.client-impact .st-section-link::after {
  color: #9f8cff;
}
.proof-signal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.client-impact-copy .proof-signal-grid {
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}
.proof-signal {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 1rem;
  padding: var(--space-4);
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
  backdrop-filter: blur(16px);
}
.proof-signal span {
  color: rgba(191, 197, 255, .72);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.proof-signal strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1rem, .96rem + .36vw, 1.28rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.resource-card {
  min-height: 228px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .08), transparent 10rem),
    rgba(255, 255, 255, .76);
  color: var(--text);
  box-shadow: 0 18px 56px rgba(11, 31, 59, .055);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.resource-card:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 92, 255, .24);
  box-shadow: 0 28px 84px rgba(11, 31, 59, .09);
}
.resource-card::after {
  content: attr(data-action);
  color: #5b45e8;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.resource-card span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.resource-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.resource-card small {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.35;
}
#proof .resource-card {
  min-height: 190px;
}
.cinematic-card {
  position: relative;
  overflow: hidden;
  margin-top: clamp(var(--space-10), 6vw, var(--space-16));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.1);
  background:
    radial-gradient(circle at 28% 18%, rgba(245, 243, 238, .14), transparent 15rem),
    radial-gradient(circle at 78% 16%, rgba(124, 92, 255, .24), transparent 18rem),
    linear-gradient(145deg, #061d2f, #061F3D 54%, #081320);
  color: #f5f3ee;
  box-shadow: 0 34px 120px rgba(11, 31, 59, .18);
}
.infrastructure-visual {
  min-height: 420px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-8);
  align-items: stretch;
  padding: clamp(var(--space-6), 5vw, var(--space-10));
}
.visual-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  position: relative;
  z-index: 2;
}
.visual-copy h3 {
  max-width: 520px;
  font-size: clamp(2rem, 1.2rem + 2.8vw, 4.6rem);
  line-height: .94;
  letter-spacing: -.06em;
}
.visual-copy p {
  color: rgba(245, 243, 238, .72);
  max-width: 520px;
}
.visual-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.visual-tags span {
  border: 1px solid rgba(245, 243, 238, .16);
  border-radius: 999px;
  padding: .46rem .72rem;
  background: rgba(255, 255, 255, .06);
  color: rgba(245, 243, 238, .78);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.signal-map {
  position: relative;
  min-height: 360px;
  border: 1px solid rgba(245, 243, 238, .12);
  border-radius: calc(var(--radius) * .9);
  background:
    radial-gradient(circle at 48% 50%, rgba(216, 222, 255, .14), transparent 13rem),
    rgba(255, 255, 255, .04);
  background-size: auto, auto;
  overflow: hidden;
  isolation: isolate;
}
.signal-map::before,
.signal-map::after {
  content: "";
  position: absolute;
  inset: 16% 8%;
  border: 1px solid rgba(216, 222, 255, .28);
  border-radius: 50%;
  transform: rotate(-12deg);
}
.signal-map::after {
  inset: 24% 14%;
  border-color: rgba(124, 92, 255, .34);
  transform: rotate(18deg);
}
.map-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 158px;
  height: 158px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 243, 238, .22);
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.78), transparent 20%),
    linear-gradient(145deg, rgba(245, 243, 238, .94), rgba(184, 198, 255, .92) 46%, rgba(124, 92, 255, .86));
  color: #061d2f;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.04em;
  box-shadow: 0 26px 90px rgba(124, 92, 255, .28);
  z-index: 3;
}
.map-node {
  position: absolute;
  display: grid;
  gap: .2rem;
  min-width: 130px;
  padding: .7rem .8rem;
  border: 1px solid rgba(245, 243, 238, .16);
  border-radius: .9rem;
  background: rgba(6, 20, 38, .72);
  color: #f5f3ee;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .24);
  backdrop-filter: blur(14px);
  z-index: 2;
}
.map-node strong {
  font-size: .82rem;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.map-node span {
  color: rgba(245, 243, 238, .56);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.map-node:nth-child(2) { top: 10%; left: 8%; }
.map-node:nth-child(3) { top: 16%; right: 7%; }
.map-node:nth-child(4) { bottom: 12%; left: 10%; }
.map-node:nth-child(5) { bottom: 14%; right: 8%; }
.category-shift {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: stretch;
}
.shift-copy h2 {
  font-size: clamp(2.3rem, 1.18rem + 4vw, 5.35rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.shift-copy p {
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: clamp(1.04rem, .95rem + .35vw, 1.22rem);
  max-width: 620px;
}
.shift-board {
  display: grid;
  gap: var(--space-4);
}
.shift-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--space-5), 3vw, var(--space-8));
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}
.shift-card.old {
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.42)),
    color-mix(in oklab, var(--surface) 84%, transparent);
}
.shift-card.new {
  background:
    radial-gradient(circle at 82% 10%, rgba(245, 243, 238, .16), transparent 16rem),
    radial-gradient(circle at 16% 100%, rgba(124, 92, 255, .26), transparent 16rem),
    #061F3D;
  color: #f5f3ee;
  border-color: transparent;
  box-shadow: 0 30px 90px rgba(11, 31, 59, .18);
}
.shift-card span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.shift-card.new span {
  color: #d8deff;
}
.shift-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.1rem + 2.5vw, 4rem);
  line-height: .96;
  letter-spacing: -.06em;
}
.operating-layer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: clamp(var(--space-8), 5vw, var(--space-12));
}
.operator-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  background:
    radial-gradient(circle at 82% 8%, rgba(124, 92, 255, .12), transparent 12rem),
    color-mix(in oklab, var(--surface) 88%, transparent);
}
.operator-card span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.operator-card h3 {
  font-size: clamp(1.42rem, 1.05rem + 1.1vw, 2.2rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.operator-card p {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.industry-cloud {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: center;
}
.industry-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.industry-list span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 var(--space-4);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: -.015em;
}
.market-move {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(var(--space-8), 6vw, var(--space-16));
  align-items: start;
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: calc(var(--radius) * 1.25);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 92, 255, .09), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(238,242,255,.62));
  box-shadow: 0 28px 90px rgba(11, 31, 59, .065);
}
.market-move::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,31,59,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 80% 20%, #000, transparent 70%);
  pointer-events: none;
}
.market-move::after {
  content: "";
  position: absolute;
  width: 20rem;
  aspect-ratio: 1;
  right: -5rem;
  bottom: -8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,.66), transparent 24%), linear-gradient(145deg, rgba(11,31,59,.12), rgba(99,102,241,.08));
  opacity: .55;
  pointer-events: none;
}
.market-move > * { position: relative; z-index: 1; }
.move-list {
  display: grid;
  gap: var(--space-3);
  border-top: 0;
}
.move-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid rgba(11, 31, 59, .08);
  border-radius: 1rem;
  background: rgba(255,255,255,.70);
}
.move-item strong {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .75vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -.038em;
}
.move-item span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.proof-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: 0;
}
.proof-wall .testimonial-card {
  min-height: 218px;
  border-radius: 1.25rem;
  padding: clamp(var(--space-5), 2.6vw, var(--space-6));
  border-color: rgba(255, 255, 255, .12);
  background:
    radial-gradient(circle at 92% 0%, rgba(124, 92, 255, .14), transparent 13rem),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.055));
  box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px);
}
.proof-wall .testimonial-card:first-child {
  min-height: 214px;
  grid-column: span 2;
  grid-row: auto;
  background:
    radial-gradient(circle at 78% 0%, rgba(124, 92, 255, .28), transparent 18rem),
    radial-gradient(circle at 18% 100%, rgba(216, 222, 255, .12), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
  color: #fff;
  border-color: rgba(191, 197, 255, .18);
}
.proof-wall .testimonial-card:first-child blockquote {
  color: #fff;
  font-size: clamp(1.28rem, 1rem + .92vw, 1.72rem);
  line-height: 1.14;
  max-width: 100%;
}
.proof-wall .testimonial-card:first-child .testimonial-logo {
  display: block;
  max-width: 128px;
  max-height: 42px;
  margin-bottom: var(--space-6);
}
.proof-wall .testimonial-card:first-child footer,
.proof-wall .testimonial-card:first-child footer strong {
  color: rgba(235, 238, 255, .78);
}
.proof-wall .testimonial-card:not(:first-child) blockquote {
  color: rgba(255, 255, 255, .94);
  font-size: clamp(1.05rem, .94rem + .36vw, 1.28rem);
  line-height: 1.14;
  letter-spacing: -.038em;
}
.proof-wall .testimonial-logo {
  max-width: 132px;
  max-height: 38px;
  padding: .42rem .68rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .92);
  mix-blend-mode: normal;
  object-fit: contain;
}
.proof-wall .testimonial-card footer {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(235, 238, 255, .64);
  font-size: .95rem;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -.012em;
}
.proof-wall .testimonial-card footer strong {
  color: #fff;
  font-size: 1rem;
}
section {
  padding: clamp(var(--space-10), 6vw, var(--space-16)) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
  position: relative;
}
section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 0;
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 226, 184, .18), transparent 22rem),
    radial-gradient(circle at 8% 12%, rgba(99, 102, 241, .10), transparent 24rem);
  opacity: .78;
  z-index: -1;
}
.section-head { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-8); }
.section-head::after {
  content: "";
  width: min(220px, 46vw);
  height: 1px;
  background: linear-gradient(90deg, rgba(99,102,241,.78), rgba(36,104,178,.34), transparent);
}
.section-head p { color: var(--muted); max-width: 720px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.card {
  min-height: 250px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 0%, rgba(255, 226, 184, .20), transparent 13rem),
    radial-gradient(circle at 8% 100%, rgba(99, 102, 241, .10), transparent 14rem),
    var(--glass-strong);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 24px 80px rgba(11, 31, 59, .075);
  overflow: hidden;
  position: relative;
}
.trust-section .card {
  min-height: 330px;
  justify-content: flex-end;
  isolation: isolate;
}
.trust-section .card > * {
  position: relative;
  z-index: 2;
}
.trust-section .card::before {
  content: "";
  position: absolute;
  inset: var(--space-5) var(--space-5) auto;
  height: 150px;
  border-radius: calc(var(--radius) * .85);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
  background:
    linear-gradient(120deg, transparent 0 34%, rgba(245,243,238,.20) 34% 34.5%, transparent 34.5% 100%),
    linear-gradient(72deg, transparent 0 57%, rgba(99,102,241,.36) 57% 57.5%, transparent 57.5% 100%),
    radial-gradient(circle at 22% 72%, rgba(99,102,241,.72) 0 .30rem, transparent .34rem),
    radial-gradient(circle at 46% 44%, rgba(245,243,238,.82) 0 .24rem, transparent .29rem),
    radial-gradient(circle at 78% 28%, rgba(255,226,184,.82) 0 .28rem, transparent .32rem),
    radial-gradient(circle at 50% 50%, rgba(99,102,241,.18), transparent 5.4rem),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 28px 72px rgba(11,31,59,.13);
  opacity: .94;
  z-index: 0;
  display: none;
}
.trust-section .card:nth-child(2)::before {
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(99,102,241,.34) 20% 20.4%, transparent 20.4% 48%, rgba(255,226,184,.34) 48% 48.4%, transparent 48.4% 76%, rgba(99,102,241,.34) 76% 76.4%, transparent 76.4% 100%),
    radial-gradient(circle at 20% 58%, rgba(99,102,241,.70) 0 .28rem, transparent .32rem),
    radial-gradient(circle at 48% 36%, rgba(245,243,238,.80) 0 .24rem, transparent .28rem),
    radial-gradient(circle at 76% 68%, rgba(255,226,184,.78) 0 .26rem, transparent .30rem),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
  background-size: auto, auto, auto, auto, auto;
}
.trust-section .card:nth-child(3)::before {
  background:
    linear-gradient(135deg, transparent 0 32%, rgba(245,243,238,.22) 32% 32.5%, transparent 32.5% 100%),
    repeating-linear-gradient(90deg, rgba(245,243,238,.10) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(99,102,241,.16) 0 1px, transparent 1px 38px),
    radial-gradient(circle at 32% 50%, rgba(255,226,184,.78) 0 .28rem, transparent .32rem),
    radial-gradient(circle at 72% 50%, rgba(99,102,241,.70) 0 .26rem, transparent .30rem),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
}
.card::after {
  content: "";
  position: absolute;
  inset: auto var(--space-6) 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .68), transparent);
}
.card.highlight {
  background:
    radial-gradient(circle at 18% 8%, rgba(245, 243, 238, .16), transparent 16rem),
    radial-gradient(circle at 82% 8%, rgba(124, 92, 255, .24), transparent 16rem),
    var(--text);
  color: var(--bg);
  border-color: transparent;
}
.card.highlight p { color: color-mix(in oklab, var(--bg) 72%, transparent); }
.card p, .split p, .case p, .persona p { color: var(--muted); margin-top: var(--space-4); }
.number { color: var(--accent); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.buyer-diagram {
  position: absolute;
  inset: var(--space-5) var(--space-5) auto;
  height: 150px;
  border-radius: calc(var(--radius) * .85);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--line));
  display: grid;
  grid-template-columns: 1fr;
  gap: .48rem;
  align-content: center;
  padding: .9rem;
  background:
    radial-gradient(circle at 52% 50%, rgba(99,102,241,.20), transparent 7rem),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
  background-size: auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 26px 70px rgba(11,31,59,.12);
  z-index: 1;
}
.buyer-diagram::before,
.buyer-diagram::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, rgba(99,102,241,.66), rgba(255,226,184,.48));
  transform: translateX(-50%);
}
.buyer-diagram::before { top: 39%; }
.buyer-diagram::after { bottom: 39%; }
.buyer-diagram span,
.buyer-diagram b {
  position: relative;
  z-index: 1;
  display: block;
  border: 1px solid rgba(245,243,238,.16);
  border-radius: 999px;
  padding: .38rem .58rem;
  color: rgba(245,243,238,.72);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  background: rgba(255,255,255,.07);
}
.buyer-diagram span,
.buyer-diagram b {
  font-size: .66rem;
  letter-spacing: .07em;
}
.buyer-diagram b {
  color: #fffdfa;
  background:
    linear-gradient(90deg, rgba(99,102,241,.34) 0 3px, transparent 3px),
    rgba(255,255,255,.10);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
.model-visual {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1.16fr .84fr;
  gap: var(--space-4);
  align-items: stretch;
  position: relative;
}
.model-visual::before {
  content: "";
  position: absolute;
  inset: 50% 32% auto 32%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.72), rgba(255,226,184,.54), transparent);
  background-size: 200% 100%;
  animation: line-flow 4.8s linear infinite;
  z-index: 2;
  pointer-events: none;
}
.operating-orb {
  position: relative;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  overflow: hidden;
  padding: var(--space-6);
  background:
    radial-gradient(circle at 50% 50%, rgba(99,102,241,.20), transparent 15rem),
    linear-gradient(135deg, #06142a 0%, #061F3D 52%, #172f58 100%);
  background-size: auto, 38px 38px, 38px 38px, auto;
  box-shadow: 0 38px 118px rgba(11, 31, 59, .15);
}
.flow-map {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 370px;
  display: grid;
  grid-template-columns: .84fr .96fr .84fr;
  gap: var(--space-5);
  align-items: center;
}
.flow-column {
  display: grid;
  gap: var(--space-3);
}
.flow-label {
  color: rgba(245,243,238,.64);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.flow-item {
  min-height: 58px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(245,243,238,.14);
  border-radius: 14px;
  padding: .82rem .92rem;
  background: rgba(255,255,255,.07);
  color: rgba(245,243,238,.76);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.flow-column.fragmented .flow-item {
  opacity: .74;
  border-style: dashed;
}
.flow-column.governed .flow-item {
  background:
    linear-gradient(90deg, rgba(99,102,241,.42) 0 3px, transparent 3px),
    rgba(255,255,255,.09);
  color: #fffdfa;
}
.flow-core {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 32px;
  border: 1px solid rgba(245,243,238,.24);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.34), transparent 4rem),
    radial-gradient(circle at 50% 76%, rgba(99,102,241,.48), transparent 8rem),
    linear-gradient(145deg, rgba(245,243,238,.18), rgba(99,102,241,.16));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 28px 80px rgba(0,0,0,.22);
}
.flow-core::before,
.flow-core::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--space-8);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,226,184,.82), rgba(99,102,241,.78));
}
.flow-core::before { right: 100%; transform: translateY(-50%); }
.flow-core::after { left: 100%; transform: translateY(-50%) rotate(180deg); }
.flow-core span {
  display: block;
  color: rgba(245,243,238,.66);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.flow-core strong {
  display: block;
  max-width: 230px;
  color: #fffdfa;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1rem + 1.35vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
}
.flow-note {
  display: block;
  margin-top: var(--space-3);
  color: rgba(245,243,238,.58);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.25;
}
@media (max-width: 900px) {
  .flow-map {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .flow-core::before,
  .flow-core::after {
    display: none;
  }
  .flow-core {
    min-height: 160px;
  }
  .flow-column {
    gap: .55rem;
  }
  .flow-item {
    min-height: 42px;
    font-size: .72rem;
  }
}
.outcome-strip {
  display: grid;
  gap: var(--space-3);
}
.outcome-tile {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-5);
  background:
    linear-gradient(90deg, rgba(99,102,241,.34) 0 3px, transparent 3px),
    radial-gradient(circle at 88% 0%, rgba(255, 226, 184, .24), transparent 11rem),
    var(--glass-strong);
  box-shadow: 0 18px 60px rgba(11, 31, 59, .065);
}
.outcome-tile span {
  display: block;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.outcome-tile strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + .9vw, 2rem);
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.pillar-card {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.15);
  padding: var(--space-6);
  padding-top: calc(var(--space-6) + 156px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
  background:
    radial-gradient(circle at 68% 16%, rgba(255, 226, 184, .26), transparent 12rem),
    radial-gradient(circle at 12% 100%, rgba(99, 102, 241, .14), transparent 14rem),
    color-mix(in oklab, var(--surface) 88%, transparent);
  box-shadow: 0 24px 84px rgba(11, 31, 59, .075);
  isolation: isolate;
}
.pillar-card::before {
  content: "";
  position: absolute;
  inset: var(--space-5) var(--space-5) auto;
  height: 138px;
  border-radius: calc(var(--radius) * .85);
  background:
    radial-gradient(circle at 50% 50%, rgba(245,243,238,.86) 0 .30rem, transparent .34rem),
    linear-gradient(90deg, transparent 0 18%, rgba(99,102,241,.36) 18% 18.5%, transparent 18.5% 100%),
    linear-gradient(0deg, transparent 0 42%, rgba(255,226,184,.32) 42% 42.5%, transparent 42.5% 100%),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
  background-size: auto, auto, auto, 30px 30px, 30px 30px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 26px 70px rgba(11,31,59,.12);
  z-index: 0;
  display: none;
}
.pillar-card::after {
  content: "";
  position: absolute;
  left: calc(var(--space-5) + 18%);
  right: calc(var(--space-5) + 18%);
  top: calc(var(--space-5) + 69px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,226,184,.72), rgba(99,102,241,.66), transparent);
  background-size: 200% 100%;
  animation: line-flow 4.8s linear infinite;
  z-index: 1;
}
.pillar-card:nth-child(2)::before {
  background:
    radial-gradient(circle at 34% 44%, rgba(245,243,238,.82) 0 .28rem, transparent .32rem),
    radial-gradient(circle at 66% 58%, rgba(255,226,184,.70) 0 .24rem, transparent .28rem),
    linear-gradient(90deg, transparent 0 34%, rgba(99,102,241,.34) 34% 34.5%, transparent 34.5% 66%, rgba(255,226,184,.28) 66% 66.5%, transparent 66.5% 100%),
    repeating-linear-gradient(90deg, rgba(245,243,238,.08) 0 1px, transparent 1px 24px),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
}
.pillar-card:nth-child(3)::before {
  background:
    linear-gradient(135deg, transparent 0 37%, rgba(99,102,241,.40) 37% 37.5%, transparent 37.5% 100%),
    linear-gradient(58deg, transparent 0 52%, rgba(245,243,238,.20) 52% 52.4%, transparent 52.4% 100%),
    radial-gradient(circle at 28% 66%, rgba(255,226,184,.74) 0 .25rem, transparent .30rem),
    radial-gradient(circle at 72% 32%, rgba(245,243,238,.82) 0 .28rem, transparent .34rem),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
}
.pillar-card:nth-child(4)::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,226,184,.76) 0 .30rem, transparent .34rem),
    radial-gradient(circle at 50% 50%, rgba(99,102,241,.18), transparent 4rem),
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
  background-size: auto, auto;
}
.pillar-card > * {
  position: relative;
  z-index: 2;
}
.pillar-diagram {
  position: absolute;
  inset: var(--space-5) var(--space-5) auto;
  height: 138px;
  border-radius: calc(var(--radius) * .85);
  border: 1px solid rgba(245,243,238,.12);
  display: grid;
  gap: .38rem;
  align-content: center;
  padding: .78rem;
  background:
    linear-gradient(145deg, rgba(7,22,45,.98), rgba(20,43,78,.86));
  background-size: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 26px 70px rgba(11,31,59,.12);
  z-index: 1;
}
.pillar-diagram::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,226,184,.68), rgba(99,102,241,.68), transparent);
  transform: translateY(-50%);
}
.pillar-diagram span,
.pillar-diagram b {
  position: relative;
  display: block;
  border-radius: 999px;
  padding: .34rem .48rem;
  border: 1px solid rgba(245,243,238,.15);
  background: rgba(255,255,255,.07);
  color: rgba(245,243,238,.72);
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
}
.pillar-diagram span,
.pillar-diagram b {
  font-size: .62rem;
  letter-spacing: .07em;
}
.pillar-diagram b {
  background:
    linear-gradient(90deg, rgba(99,102,241,.34) 0 3px, transparent 3px),
    rgba(255,255,255,.10);
  color: #fffdfa;
}
.pillar-card:nth-child(2),
.pillar-card:nth-child(4) {
  transform: translateY(var(--space-6));
}
.pillar-card span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.pillar-card h3 {
  font-size: clamp(1.55rem, 1.1rem + 1.25vw, 2.5rem);
  max-width: 260px;
  margin-top: var(--space-2);
}
.pillar-card p {
  color: var(--muted);
  margin-top: var(--space-4);
}
.architecture {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.25);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.architecture-top {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-8);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  background:
    radial-gradient(circle at 88% 0%, rgba(99, 102, 241, .14), transparent 20rem),
    color-mix(in oklab, var(--surface-2) 52%, transparent);
}
.architecture-top p { color: var(--muted); margin-top: var(--space-5); }
.layer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.layer {
  min-height: 260px;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  border-left: 1px solid var(--line);
}
.layer:first-child { border-left: 0; }
.layer h3 { font-size: clamp(1.35rem, 1rem + 1vw, 2rem); }
.layer p { color: var(--muted); margin-top: var(--space-4); }
.system-snapshot {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-4);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background:
    radial-gradient(circle at 18% 12%, rgba(36, 104, 178, .12), transparent 18rem),
    color-mix(in oklab, var(--surface) 82%, transparent);
}
.snapshot-board {
  display: grid;
  gap: var(--space-3);
}
.snapshot-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-4);
}
.snapshot-row span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.snapshot-row strong {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
}
.snapshot-row small {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.snapshot-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}
.snapshot-panel p { color: color-mix(in oklab, var(--bg) 72%, transparent); margin-top: var(--space-4); }
.snapshot-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.snapshot-metric {
  border: 1px solid color-mix(in oklab, var(--bg) 16%, transparent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  background: color-mix(in oklab, var(--bg) 8%, transparent);
}
.snapshot-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
.snapshot-metric span {
  color: color-mix(in oklab, var(--bg) 66%, transparent);
  font-size: var(--text-xs);
}
.workflows {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-4);
}
.workflow-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: var(--surface);
  min-height: 260px;
}
.workflow-card.featured {
  background: var(--primary-2);
  color: var(--inverse);
}
.workflow-card.featured p,
.workflow-card.featured li { color: color-mix(in oklab, var(--inverse) 74%, transparent); }
.workflow-card p { color: var(--muted); margin-top: var(--space-4); }
.check-list {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  color: var(--muted);
}
.check-list li {
  border-top: 1px solid var(--line);
  padding-top: var(--space-3);
}
.standard-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
.standard {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.standard span {
  display: block;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
	    .standard p { color: var(--muted); margin-top: var(--space-3); }
	    .stance-grid {
	      display: grid;
	      grid-template-columns: repeat(3, 1fr);
	      gap: var(--space-4);
	    }
	    .stance-card {
	      min-height: 260px;
	      border: 1px solid var(--line);
	      border-radius: var(--radius);
	      background:
	        linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface-2) 38%, transparent));
	      padding: var(--space-6);
	      display: flex;
	      flex-direction: column;
	      justify-content: space-between;
	      gap: var(--space-8);
	    }
	    .stance-card span {
	      color: var(--accent);
	      font-size: var(--text-xs);
	      font-weight: 700;
	      letter-spacing: var(--tracking-label);
	      text-transform: uppercase;
	    }
	    .stance-card p {
	      color: var(--muted);
	      margin-top: var(--space-4);
	    }
	    .stance-card.featured {
	      background: var(--text);
	      color: var(--bg);
	      border-color: transparent;
	      box-shadow: var(--shadow);
	    }
	    .stance-card.featured p { color: color-mix(in oklab, var(--bg) 72%, transparent); }
.operating-rail {
  margin-top: var(--space-4);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  background:
    radial-gradient(circle at 82% 0%, rgba(99, 102, 241, .16), transparent 20rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface-2) 54%, transparent));
  box-shadow: var(--shadow);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--space-8);
  align-items: center;
  overflow: hidden;
  position: relative;
}
.operating-rail::before {
  content: "";
  position: absolute;
  inset: 50% 8% auto 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .72), rgba(36, 104, 178, .42), transparent);
  background-size: 200% 100%;
  animation: line-flow 6s linear infinite;
}
.rail-copy { position: relative; z-index: 1; }
.rail-copy p { color: var(--muted); margin-top: var(--space-4); max-width: 520px; }
.rail-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.rail-step {
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .68);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 18px 42px rgba(11, 31, 59, .07);
}
.rail-step span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.rail-step strong {
  font-family: var(--font-display);
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
}
	    .trust-section {
	      position: relative;
	      overflow: hidden;
	      background:
	        radial-gradient(circle at 78% 4%, rgba(255, 226, 184, .22), transparent 26rem),
	        linear-gradient(180deg, transparent, rgba(255, 253, 250, .38));
	    }
	    .trust-section::before {
	      content: "";
	      position: absolute;
	      pointer-events: none;
	      width: min(46vw, 680px);
	      aspect-ratio: 1;
	      right: -18vw;
	      top: 0;
	      border-radius: 50%;
	      background: radial-gradient(circle, rgba(99, 102, 241, .12), transparent 70%);
	      animation: ambient-drift 18s ease-in-out infinite;
	    }
	    .trust-wall {
	      position: relative;
	      display: grid;
	      grid-template-columns: repeat(4, 1fr);
	      gap: var(--space-4);
	    }
	    .trust-logo {
	      min-height: 150px;
	      border: 1px solid var(--line);
	      border-radius: var(--radius);
	      background:
	        linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface-2) 40%, transparent));
	      box-shadow: var(--shadow);
	      padding: var(--space-6);
	      display: flex;
	      flex-direction: column;
	      justify-content: space-between;
	      gap: var(--space-6);
	    }
	    .trust-logo img {
	      width: auto;
	      max-width: 178px;
	      max-height: 58px;
	      object-fit: contain;
	      align-self: flex-start;
	    }
	    .trust-logo span {
	      color: var(--muted);
	      font-size: var(--text-sm);
	      line-height: 1.35;
	    }
	    .trust-proof {
	      margin-top: var(--space-4);
	      display: grid;
	      grid-template-columns: 1.15fr .85fr;
	      gap: var(--space-4);
	      position: relative;
	    }
	    .trust-statement,
	    .trust-metrics {
	      border: 1px solid var(--line);
	      border-radius: var(--radius);
	      background:
	        radial-gradient(circle at 92% 0%, rgba(255, 226, 184, .22), transparent 14rem),
	        color-mix(in oklab, var(--surface) 86%, transparent);
	      padding: var(--space-6);
	    }
	    .trust-statement h3 {
	      font-size: clamp(1.65rem, 1.1rem + 1.7vw, 3rem);
	      max-width: 780px;
	    }
	    .trust-statement p {
	      margin-top: var(--space-5);
	      color: var(--muted);
	      max-width: 760px;
	    }
	    .trust-metrics {
	      display: grid;
	      gap: var(--space-4);
	    }
	    .trust-metric {
	      border-top: 1px solid var(--line);
	      padding-top: var(--space-4);
	    }
	    .trust-metric:first-child {
	      border-top: 0;
	      padding-top: 0;
	    }
	    .trust-metric strong {
	      display: block;
	      font-family: var(--font-display);
	      font-size: clamp(1.7rem, 1rem + 2vw, 3rem);
	      line-height: 1;
	      letter-spacing: var(--tracking-heading);
	    }
	    .trust-metric span {
	      color: var(--muted);
	      font-size: var(--text-sm);
	    }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  scroll-margin-top: 120px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 250px;
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 82% 0%, rgba(99, 102, 241, .12), transparent 12rem),
    color-mix(in oklab, var(--surface) 92%, transparent);
  box-shadow: 0 20px 70px rgba(11, 31, 59, .06);
}
.testimonial-logo {
  width: auto;
  max-width: 148px;
  max-height: 34px;
  object-fit: contain;
  align-self: flex-start;
  margin-bottom: var(--space-5);
  mix-blend-mode: multiply;
}
[data-theme='dark'] .testimonial-logo {
  mix-blend-mode: normal;
  filter: brightness(1.08);
}
.testimonial-card blockquote {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .96rem + .32vw, 1.3rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-heading);
}
.testimonial-card footer {
  margin-top: var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.35;
}
.testimonial-card footer strong {
  display: block;
  color: var(--primary);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}
	    .about-grid {
	      display: grid;
	      grid-template-columns: .95fr 1.05fr;
	      gap: var(--space-4);
	      align-items: stretch;
	    }
	    .about-panel {
	      border: 1px solid var(--line);
	      border-radius: var(--radius);
	      background: var(--surface);
	      padding: clamp(var(--space-6), 4vw, var(--space-10));
	      box-shadow: var(--shadow);
	    }
	    .about-panel.dark {
	      background: var(--text);
	      color: var(--bg);
	      border-color: transparent;
	    }
	    .about-panel p { color: var(--muted); margin-top: var(--space-5); }
	    .about-panel.dark p { color: color-mix(in oklab, var(--bg) 72%, transparent); }
	    .about-list {
	      display: grid;
	      gap: var(--space-4);
	      margin-top: var(--space-6);
	    }
	    .about-list div {
	      border-top: 1px solid var(--line);
	      padding-top: var(--space-4);
	    }
.about-panel.dark .about-list div { border-color: color-mix(in oklab, var(--bg) 20%, transparent); }
.about-list strong {
  display: block;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-2);
}
.about-network {
  position: relative;
  min-height: 300px;
  margin-top: var(--space-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 45%, rgba(99, 102, 241, .18), transparent 10rem),
    radial-gradient(circle at 20% 80%, rgba(36, 104, 178, .12), transparent 11rem),
    color-mix(in oklab, var(--surface-2) 45%, transparent);
  background-size: auto, auto, auto;
  overflow: hidden;
}
.about-network::before,
.about-network::after {
  content: "";
  position: absolute;
  inset: 24% 12%;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  border-radius: 999px;
}
.about-network::after {
  inset: 36% 22%;
  transform: rotate(-12deg);
}
.network-center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 124px;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
  box-shadow: 0 22px 54px rgba(11, 31, 59, .18);
  z-index: 2;
}
.network-node {
  position: absolute;
  z-index: 3;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 90%, transparent);
  padding: .55rem .75rem;
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  box-shadow: 0 16px 42px rgba(11, 31, 59, .08);
}
.network-node:nth-child(1) { top: 12%; left: 10%; }
.network-node:nth-child(2) { top: 16%; right: 8%; }
.network-node:nth-child(3) { bottom: 18%; right: 12%; }
.network-node:nth-child(4) { bottom: 14%; left: 8%; }
.network-node:nth-child(5) { top: 47%; left: 2%; }
	    .contact-layout {
	      display: grid;
	      grid-template-columns: 1.05fr .95fr;
	      gap: var(--space-4);
	      text-align: left;
	      align-items: stretch;
	    }
	    .contact-card {
	      border: 1px solid var(--line);
	      border-radius: var(--radius);
	      background: var(--surface);
	      padding: clamp(var(--space-6), 4vw, var(--space-10));
	      box-shadow: var(--shadow);
	    }
	    .contact-card.primary-contact {
	      background:
	        radial-gradient(circle at 90% 0%, rgba(124, 92, 255, .18), transparent 20rem),
	        var(--text);
	      color: var(--bg);
	      border-color: transparent;
	    }
	    .contact-card.primary-contact p { color: color-mix(in oklab, var(--bg) 72%, transparent); }
	    .contact-card p { color: var(--muted); margin-top: var(--space-4); }
	    .contact-list {
	      list-style: none;
	      display: grid;
	      gap: var(--space-4);
	      margin-top: var(--space-8);
	    }
	    .contact-list li {
	      border-top: 1px solid var(--line);
	      padding-top: var(--space-4);
	      color: var(--muted);
	    }
	    .contact-card.primary-contact .contact-list li {
	      border-color: color-mix(in oklab, var(--bg) 20%, transparent);
	      color: color-mix(in oklab, var(--bg) 72%, transparent);
	    }
	    .contact-list strong {
	      display: block;
	      color: var(--text);
	      font-family: var(--font-display);
	      letter-spacing: var(--tracking-heading);
	      margin-bottom: var(--space-2);
	    }
.contact-card.primary-contact .contact-list strong { color: var(--bg); }
.contact-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.form-field {
  display: grid;
  gap: var(--space-2);
}
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  color: color-mix(in oklab, var(--bg) 72%, transparent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid color-mix(in oklab, var(--bg) 18%, transparent);
  border-radius: 18px;
  background: color-mix(in oklab, var(--bg) 8%, transparent);
  color: var(--bg);
  font: inherit;
  padding: .95rem 1rem;
  outline: none;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.form-field select option { color: #0b1d38; }
.form-field textarea {
  min-height: 132px;
  resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: color-mix(in oklab, var(--bg) 46%, transparent);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--bg) 12%, transparent);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .18);
}
.form-footnote {
  margin: 0;
  color: color-mix(in oklab, var(--bg) 58%, transparent);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.form-status {
  min-height: 1.2em;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
}
.contact-details {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.contact-details li {
  display: grid;
  gap: var(--space-1);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  color: var(--muted);
}
.contact-details strong {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.contact-details a { color: var(--primary); font-weight: 700; }
.visual-suite {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-4);
}
.visual-card {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  background:
    radial-gradient(circle at 15% 10%, rgba(36, 104, 178, .18), transparent 18rem),
    radial-gradient(circle at 86% 14%, rgba(99, 102, 241, .16), transparent 18rem),
    color-mix(in oklab, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}
.visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,31,59,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 74%, transparent);
  pointer-events: none;
}
.visual-card::after {
  content: "";
  position: absolute;
  inset: auto 8% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241,.72), rgba(36,104,178,.58), transparent);
  opacity: .9;
}
.visual-card > * { position: relative; z-index: 1; }
.visual-card.dark {
  background:
    radial-gradient(circle at 18% 6%, rgba(216, 232, 255, .16), transparent 18rem),
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, .18), transparent 18rem),
    var(--text);
  color: var(--bg);
  border-color: transparent;
}
.visual-card.dark p,
.visual-card.dark .visual-caption { color: color-mix(in oklab, var(--bg) 70%, transparent); }
.visual-kicker {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.visual-card h3 {
  max-width: 560px;
  margin-top: var(--space-3);
}
.visual-caption {
  color: var(--muted);
  max-width: 560px;
  margin-top: var(--space-3);
}
.global-map {
  position: relative;
  min-height: 260px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
  background:
    radial-gradient(ellipse at 24% 48%, rgba(11,31,59,.07) 0 10%, transparent 10.5%),
    radial-gradient(ellipse at 48% 42%, rgba(11,31,59,.06) 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 75% 56%, rgba(11,31,59,.06) 0 11%, transparent 11.5%),
    linear-gradient(90deg, transparent 0 15%, color-mix(in oklab, var(--primary) 10%, transparent) 15% 15.4%, transparent 15.4% 100%),
    linear-gradient(0deg, transparent 0 28%, color-mix(in oklab, var(--primary) 10%, transparent) 28% 28.4%, transparent 28.4% 100%),
    radial-gradient(circle at 28% 46%, rgba(36, 104, 178, .16), transparent 5rem),
    radial-gradient(circle at 55% 38%, rgba(99, 102, 241, .16), transparent 5rem),
    radial-gradient(circle at 74% 58%, rgba(36, 104, 178, .12), transparent 6rem),
    color-mix(in oklab, var(--surface) 72%, transparent);
}
.global-map::before,
.global-map::after {
  content: "";
  position: absolute;
  inset: 18% 10%;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, transparent);
  border-radius: 50%;
  transform: rotate(-10deg);
}
.global-map::after {
  inset: 30% 18%;
  transform: rotate(16deg);
}
.map-node {
  position: absolute;
  display: grid;
  gap: .2rem;
  min-width: 112px;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 58px rgba(11, 31, 59, .14);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
}
.map-node span {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: .68rem;
}
.map-node.one { left: 8%; top: 16%; }
.map-node.two { left: 42%; top: 38%; }
.map-node.three { right: 8%; bottom: 14%; }
.control-board {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid color-mix(in oklab, var(--bg) 18%, transparent);
  border-radius: var(--radius);
  background:
    color-mix(in oklab, var(--bg) 8%, transparent);
  background-size: auto;
}
.control-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid color-mix(in oklab, var(--bg) 16%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  backdrop-filter: blur(12px);
}
.control-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(124, 92, 255, .10);
}
.control-row strong {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.control-row span {
  color: color-mix(in oklab, var(--bg) 64%, transparent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.talentos-showcase {
  margin-top: var(--space-6);
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  background:
    radial-gradient(circle at 86% 0%, rgba(99, 102, 241, .18), transparent 20rem),
    radial-gradient(circle at 10% 100%, rgba(36, 104, 178, .13), transparent 22rem),
    color-mix(in oklab, var(--surface) 88%, transparent);
  box-shadow: 0 34px 110px rgba(11, 31, 59, .13);
  overflow: hidden;
}
.console-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line);
}
.console-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.console-tabs span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem .7rem;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.console-tabs span.active {
  background: var(--text);
  color: var(--bg);
  border-color: transparent;
}
.console-body {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-4);
  padding: var(--space-6);
  background-image:
    linear-gradient(90deg, rgba(11,31,59,.038) 1px, transparent 1px);
  background-size: 42px 42px;
}
.console-stack {
  display: grid;
  gap: var(--space-3);
}
.console-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 12%, rgba(99, 102, 241,.12), transparent 6rem),
    var(--surface);
  padding: var(--space-4);
  box-shadow: 0 18px 50px rgba(11, 31, 59, .06);
}
.console-card strong {
  display: block;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  margin-top: var(--space-2);
}
.console-card span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.timeline {
  display: grid;
  gap: var(--space-3);
  border-left: 1px solid var(--line);
  padding-left: var(--space-5);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.42);
  padding-block: var(--space-3);
  padding-right: var(--space-4);
}
.timeline-item {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  color: var(--muted);
  font-size: var(--text-sm);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc((var(--space-5) + 6px) * -1);
  top: 1.25rem;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(99, 102, 241, .12);
}
.timeline-item strong {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.engagement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
	      gap: var(--space-4);
}
.engagement .card { min-height: 320px; }
.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}
	    .operating-model {
	      border: 1px solid var(--line);
	      border-radius: calc(var(--radius) * 1.2);
	      background: var(--primary-2);
	      color: var(--inverse);
	      padding: var(--space-8);
	      box-shadow: var(--shadow);
	      position: relative;
	      overflow: hidden;
	    }
	    .operating-model::before {
	      content: "";
	      position: absolute;
	      inset: auto -20% -36% 18%;
	      height: 260px;
	      background: radial-gradient(circle, rgba(124, 92, 255, .22), transparent 68%);
	      animation: ambient-drift 16s ease-in-out infinite;
	    }
	    .operating-model > * { position: relative; z-index: 1; }
	    .infra-map {
	      position: relative;
	      min-height: 260px;
	      margin-top: var(--space-8);
	      border: 1px solid color-mix(in oklab, var(--inverse) 18%, transparent);
	      border-radius: var(--radius);
	      overflow: hidden;
	      background:
	        radial-gradient(circle at 52% 45%, rgba(124, 92, 255, .18), transparent 9rem),
	        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
	    }
	    .infra-map::before,
	    .infra-map::after {
	      content: "";
	      position: absolute;
	      inset: 50% 8% auto;
	      height: 1px;
	      background: linear-gradient(90deg, transparent, rgba(124, 92, 255, .72), rgba(216, 232, 255, .52), transparent);
	      background-size: 200% 100%;
	      animation: line-flow 5.8s linear infinite;
	    }
	    .infra-map::after {
	      inset: 22% 18% auto;
	      transform: rotate(18deg);
	      animation-delay: -2.4s;
	    }
	    .infra-node {
	      position: absolute;
	      display: grid;
	      place-items: center;
	      min-width: 92px;
	      min-height: 38px;
	      padding: .4rem .75rem;
	      border-radius: 999px;
	      border: 1px solid color-mix(in oklab, var(--inverse) 20%, transparent);
	      background: rgba(255,255,255,.08);
	      color: color-mix(in oklab, var(--inverse) 84%, transparent);
	      font-size: .68rem;
	      font-weight: 700;
	      letter-spacing: var(--tracking-label);
	      text-transform: uppercase;
	      backdrop-filter: blur(10px);
	    }
	    .infra-node:nth-child(1) { top: 18%; left: 8%; }
	    .infra-node:nth-child(2) { top: 62%; left: 10%; }
	    .infra-node:nth-child(3) { top: 12%; right: 8%; }
	    .infra-node:nth-child(4) { top: 66%; right: 10%; }
	    .infra-core {
	      position: absolute;
	      inset: 50% auto auto 50%;
	      transform: translate(-50%, -50%);
	      width: 136px;
	      height: 136px;
	      border-radius: 50%;
	      display: grid;
	      place-items: center;
	      text-align: center;
	      padding: var(--space-4);
	      border: 1px solid rgba(124, 92, 255, .48);
	      background:
	        radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 26%),
	        rgba(255,255,255,.08);
	      box-shadow: 0 26px 70px rgba(0, 0, 0, .24);
	      font-family: var(--font-display);
	      font-weight: 700;
	      line-height: 1.02;
	      letter-spacing: var(--tracking-heading);
	      animation: node-pulse 5.2s ease-in-out infinite;
	    }
[data-theme='dark'] .operating-model { color: var(--inverse); }
.model-list { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.model-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in oklab, var(--inverse) 20%, transparent);
}
.model-item strong { font-family: var(--font-display); letter-spacing: var(--tracking-heading); }
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.persona {
  border-left: 1px solid var(--line);
  padding-left: var(--space-4);
  min-height: 190px;
}
.case {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-6);
  background: linear-gradient(145deg, var(--surface), color-mix(in oklab, var(--surface-2) 70%, transparent));
}
.proof-module {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.25);
  background:
    radial-gradient(circle at 82% 0%, rgba(99, 102, 241, .07), transparent 24rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface-2) 28%, var(--surface)));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.proof-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 430px;
}
.proof-hero-main {
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 98%, transparent), color-mix(in oklab, var(--surface-2) 30%, var(--surface)));
  background-size: auto;
  color: var(--text);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
}
.proof-hero-main .tag { color: var(--accent); }
	    .proof-hero-main h3 {
	      font-size: clamp(2rem, 1.25rem + 2.8vw, 4.4rem);
	      max-width: 760px;
	      letter-spacing: var(--tracking-heading);
	    }
	    .proof-hero-main p {
	      color: var(--muted);
	      max-width: 720px;
	      font-size: var(--text-base);
	    }
	    .proof-dashboard {
	      display: grid;
	      grid-template-columns: 1fr 1fr;
	      gap: var(--space-3);
	      max-width: 720px;
	      margin-top: var(--space-8);
	    }
	    .proof-dashboard-panel {
	      position: relative;
	      min-height: 116px;
	      border: 1px solid var(--line);
	      border-radius: var(--radius-sm);
	      padding: var(--space-4);
	      overflow: hidden;
	      background:
	        radial-gradient(circle at 92% 0%, rgba(99, 102, 241, .08), transparent 9rem),
	        color-mix(in oklab, var(--surface) 92%, transparent);
	      box-shadow: 0 18px 48px rgba(11, 31, 59, .055);
	    }
	    .proof-dashboard-panel::after {
	      content: "";
	      position: absolute;
	      inset: auto 0 0;
	      height: 1px;
	      background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .56), transparent);
	      background-size: 200% 100%;
	      animation: line-flow 4.2s linear infinite;
	    }
	    .proof-dashboard-panel span {
	      display: block;
	      color: var(--accent);
	      font-size: .66rem;
	      font-weight: 700;
	      letter-spacing: var(--tracking-label);
	      text-transform: uppercase;
	      margin-bottom: var(--space-3);
	    }
	    .proof-dashboard-panel strong {
	      display: block;
	      font-family: var(--font-display);
	      font-size: clamp(1.35rem, 1rem + 1vw, 2rem);
	      letter-spacing: var(--tracking-display);
	      line-height: 1;
	    }
	    .proof-dashboard-panel small {
	      display: block;
	      color: var(--muted);
	      margin-top: var(--space-3);
	      font-size: var(--text-xs);
	      line-height: 1.35;
	    }
.proof-hero-side {
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background:
    radial-gradient(circle at 100% 0%, rgba(99, 102, 241, .08), transparent 18rem),
    color-mix(in oklab, var(--surface) 76%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}
.proof-hero-side h3 {
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.4rem);
  max-width: 520px;
}
.proof-points {
  display: grid;
  gap: var(--space-4);
}
.proof-point {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-2);
}
.proof-point span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.proof-point strong {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.1;
}
.proof-quote {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.proof-quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.8rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  color: var(--text);
}
.proof-quote footer {
  margin-top: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}
.proof-evidence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 78%, transparent);
}
.proof-evidence .metric {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--space-6);
}
.proof-evidence .metric + .metric {
  border-left: 1px solid var(--line);
}
.case.featured {
  min-height: 360px;
  background:
    radial-gradient(circle at 92% 12%, rgba(99, 102, 241, .24), transparent 18rem),
    radial-gradient(circle at 10% 0%, rgba(36, 104, 178, .18), transparent 16rem),
    var(--primary-2);
  color: var(--inverse);
  border-color: transparent;
}
.case.featured p { color: color-mix(in oklab, var(--inverse) 72%, transparent); }
.case.featured .tag { color: var(--accent); }
.case .tag { color: var(--primary); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-4); }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); }
.metric { padding: var(--space-5); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.metric strong { display: block; font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: var(--tracking-display); line-height: 1; }
.metric span { color: var(--muted); font-size: var(--text-sm); }
.conversation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.prompt {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}
.prompt strong {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}
.prompt p { color: var(--muted); }
.quote {
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  background: var(--text);
  color: var(--bg);
}
.quote p { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.08; letter-spacing: var(--tracking-heading); max-width: 900px; }
	    .quote footer { color: color-mix(in oklab, var(--bg) 70%, transparent); margin-top: var(--space-6); }
.brief-label,
.number,
.tag,
.visual-kicker,
.signal span,
.standard span,
.stance-card span,
.rail-step span,
.snapshot-row span,
.snapshot-metric span,
.trust-metric span,
.form-field label,
.console-tabs span,
.console-card span,
.proof-dashboard-panel span,
.proof-point span,
.case .tag,
.network-node,
.system-node,
.map-node span,
.control-row span {
  font-weight: var(--type-label-weight);
  letter-spacing: var(--tracking-label);
}
.executive-brief h2,
.trust-statement h3,
.proof-hero-main h3,
.proof-hero-side h3,
.metric strong,
.snapshot-metric strong,
.prompt strong,
.quote p,
.hero-panel strong,
.brief-list strong,
.signal strong,
.rail-step strong,
.snapshot-row strong,
.snapshot-panel h3,
.about-list strong,
.contact-list strong,
.contact-details strong,
.visual-card h3,
.console-card strong,
.timeline-item strong,
.model-item strong,
.proof-dashboard-panel strong,
.proof-point strong {
  font-weight: var(--type-display-weight);
  letter-spacing: var(--tracking-heading);
}
p,
li,
.card p,
.split p,
.case p,
.persona p,
.workflow-card p,
.trust-logo span,
.trust-statement p,
.about-panel p,
.contact-card p,
.timeline-item,
.proof-dashboard-panel small,
.note {
  line-height: var(--leading-body);
}
.final {
  text-align: center;
  border-top: 0;
}
.cta {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(245, 243, 238, .14);
  border-radius: calc(var(--radius) * 1.45);
  padding: clamp(var(--space-10), 7vw, var(--space-20));
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 92, 255, .30), transparent 18rem),
    radial-gradient(circle at 76% 22%, rgba(216, 222, 255, .14), transparent 20rem),
    radial-gradient(circle at 50% 100%, rgba(99, 102, 241, .18), transparent 22rem),
    linear-gradient(145deg, #071426 0%, #061F3D 58%, #182b55 100%);
  background-size: auto, auto, auto, auto;
  color: #f5f3ee;
  box-shadow: 0 44px 130px rgba(11, 31, 59, .24);
}
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  inset: 18% 28%;
  border: 1px solid rgba(245, 243, 238, .16);
  border-radius: 999px;
  transform: rotate(-12deg);
  pointer-events: none;
}
.cta::after {
  inset: 36% 18%;
  border-color: rgba(124, 92, 255, .34);
  transform: rotate(16deg);
}
.cta > * { position: relative; z-index: 1; }
.final h2 { margin-inline: auto; }
.final .eyebrow { color: #a99bff; }
.final p { margin: var(--space-5) auto var(--space-8); color: rgba(245, 243, 238, .76); max-width: 620px; }
.final .button.primary {
  background: #6C4DFF;
  border-color: #6C4DFF;
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(124, 92, 255, .28);
}
.note { color: var(--faint); font-size: var(--text-xs); margin-top: var(--space-4); }
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-10) 0 var(--space-8);
  background:
    linear-gradient(180deg, transparent, color-mix(in oklab, var(--surface) 58%, transparent));
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
.footer-brand {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: flex-start;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.footer-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
}
.footer-wordmark {
  width: min(240px, 74vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(11, 31, 59, .08));
}
[data-theme='dark'] .footer-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0, 0, 0, .2));
}
.footer-brand p {
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 560px;
}
.footer-brand-copy {
  display: grid;
  gap: var(--space-3);
  max-width: 620px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
.footer-links a {
  color: var(--muted);
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--text); }
.footer-meta {
  color: var(--faint);
  font-size: var(--text-xs);
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  justify-items: stretch;
}
.footer-column {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  padding: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
}
.footer-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}
.footer-column strong {
  color: var(--text);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.footer-column a:hover { color: var(--text); }
@media (max-width: 900px) {
  .nav-inner { min-height: 66px; gap: var(--space-2); }
  .brand { min-width: 150px; }
  .brand-wordmark { width: clamp(146px, 41vw, 176px); }
  .nav-links { display: none; }
  .menu-dropdown { display: block; }
  .menu-dropdown summary { min-height: 40px; padding-inline: var(--space-3); }
  .menu-panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 82px;
    width: auto;
    grid-template-columns: 1fr;
    max-height: calc(100vh - 108px);
    overflow: auto;
  }
  .menu-panel a { min-height: auto; }
  .nav-actions { gap: var(--space-2); }
  .nav-actions .button:not(.primary) { min-height: 40px; padding-inline: var(--space-4); }
  .nav-actions .button.primary { display: none; }
  .hero-grid { padding-top: 0; }
  .hero-enterprise-image {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin-bottom: var(--space-8);
    transform: none;
    opacity: 1;
  }
  @media (max-width: 640px) {
    .nav-inner { justify-content: start; gap: var(--space-2); }
    .brand { min-width: 0; margin-right: auto; }
    .brand-wordmark { width: clamp(148px, 42vw, 168px); }
    .nav-actions .button:not(.primary) { display: none; }
    .nav-actions .button.primary { display: inline-flex; }
    .theme { width: 40px; height: 40px; }
    .menu-dropdown summary { padding-inline: var(--space-4); }
    .hero { padding-top: calc(var(--space-24) + var(--space-3)); }
    h2 { font-size: clamp(2rem, 9.6vw, 3.35rem); line-height: 1.04; letter-spacing: -.016em; }
    .st-orbit-card h2,
    .st-layer-head h2,
    .st-section-lede h2,
    .client-impact-copy h2,
    .shift-copy h2,
    .final h2 { font-size: clamp(2.15rem, 10vw, 3.55rem); line-height: 1.03; letter-spacing: -.018em; }
  }
		      .grid-3, .grid-2, .personas, .metrics, .split, .conversation-grid, .proof-card.hero-proof, .proof-stat-grid, .pillar-grid, .hero-grid, .signal-strip, .proof-hero, .proof-evidence, .architecture-top, .layer-grid, .system-snapshot, .workflows, .standard-grid, .engagement, .trust-wall, .trust-proof, .stance-grid, .operating-rail, .rail-steps, .about-grid, .contact-layout, .form-grid, .visual-suite, .model-visual, .console-body, .sequoia-stats, .platform-lede, .benefit-grid, .solutions-panel, .solution-row, .client-impact, .resource-grid, .infrastructure-visual, .category-shift, .operating-layer-grid, .industry-cloud, .market-move, .move-item, .proof-wall, .proof-signal-grid, .st-section-lede, .st-platform-grid, .st-sequence, .st-layer-head, .st-layer-flow { grid-template-columns: 1fr; }
  .announcement-inner {
    min-height: auto;
    padding-block: var(--space-3);
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
  }
  .sequoia-hero-center h1 {
    font-size: clamp(3rem, 13vw, 5.4rem);
  }
  .proof-carousel {
    grid-auto-columns: minmax(238px, 84vw);
    padding-inline: 1rem;
  }
  .st-infra-visual {
    min-height: 420px;
  }
  .st-layer-panel::before,
  .st-layer-step::after {
    display: none;
  }
  .st-layer-step {
    min-height: auto;
  }
  .st-layer-dashboard {
    min-height: auto;
    margin-top: var(--space-4);
  }
  .st-dashboard-grid,
  .st-dashboard-card.wide,
  .st-dashboard-foot {
    grid-template-columns: 1fr;
  }
  .st-dashboard-top {
    align-items: flex-start;
    flex-direction: column;
  }
  .st-orbit-grid {
    grid-template-columns: 1fr;
  }
  .st-platform-card.featured {
    grid-column: auto;
  }
  .st-platform-card,
  .st-platform-card.featured {
    min-height: 240px;
  }
  #model .st-platform-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  #model .st-platform-card {
    min-height: auto;
    padding: var(--space-5);
  }
  #model .st-platform-card h3 {
    max-width: none;
  }
  #model .st-platform-card p {
    max-width: none;
  }
  .proof-tile.video {
    grid-column: auto;
    min-width: 84vw;
  }
  .sequoia-stat {
    border-left: 0;
    border-top: 1px solid rgba(245, 243, 238, .16);
  }
  .sequoia-stat:first-child {
    border-top: 0;
  }
  .solution-row {
    gap: var(--space-2);
  }
  .signal-map {
    min-height: 420px;
  }
  .map-node {
    min-width: 118px;
  }
  .proof-wall .testimonial-card:first-child {
    grid-column: auto;
    grid-row: auto;
    min-height: auto;
  }
  .proof-wall .testimonial-card:first-child blockquote {
    font-size: clamp(1.12rem, 1rem + .45vw, 1.42rem);
    line-height: 1.14;
    max-width: 100%;
  }
  .client-impact {
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .client-impact-copy p {
    font-size: 1rem;
  }
  .client-impact-copy .proof-signal-grid {
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .proof-signal {
    min-height: auto;
    gap: var(--space-2);
    padding: var(--space-4);
  }
  .proof-signal strong {
    font-size: 1rem;
    line-height: 1.12;
    letter-spacing: -.025em;
  }
  .proof-wall {
    gap: var(--space-3);
  }
  .proof-wall .testimonial-card {
    min-height: auto;
    padding: var(--space-5);
  }
  .proof-wall .testimonial-card:not(:first-child) blockquote {
    font-size: clamp(1.02rem, .94rem + .28vw, 1.18rem);
    line-height: 1.18;
  }
  .proof-wall .testimonial-card footer {
    font-size: .88rem;
  }
  .move-list {
    margin-top: var(--space-4);
  }
  .resource-grid {
    margin-top: var(--space-6);
  }
  .pillar-card:nth-child(2),
  .pillar-card:nth-child(4) { transform: none; }
  .proof-stat,
  .proof-stat:first-child {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: var(--space-3);
  }
  .proof-stat:first-child { border-top: 0; padding-top: 0; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .model-item { grid-template-columns: 1fr; }
  .snapshot-row { grid-template-columns: 1fr; }
  .snapshot-row small { white-space: normal; }
  .snapshot-metrics { grid-template-columns: 1fr; }
  .brief-list div { grid-template-columns: 1fr; }
  .layer { border-left: 0; border-top: 1px solid var(--line); }
  .layer:first-child { border-top: 0; }
  .proof-evidence .metric + .metric { border-left: 0; border-top: 1px solid var(--line); }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { flex-direction: column; gap: var(--space-5); }
	      .footer-links { justify-content: flex-start; }
  .footer-columns { grid-template-columns: 1fr; justify-items: start; }
  .footer-column { width: 100%; }
  .footer-link-grid { grid-template-columns: 1fr; }
  .hero { padding-top: var(--space-12); padding-bottom: var(--space-12); }
	      .brief-system { height: 150px; }
	      .system-node { min-width: 70px; font-size: .66rem; }
	      .system-node:nth-child(1) { top: 16%; left: 0; }
	      .system-node:nth-child(2) { bottom: 16%; left: 0; }
	      .system-node:nth-child(3) { top: 16%; right: 0; }
	      .system-node:nth-child(4) { bottom: 16%; right: 0; }
	      .system-hub { width: 72px; height: 72px; font-size: .62rem; }
	      .infra-map { min-height: 300px; }
	      .infra-core { width: 120px; height: 120px; }
	      .proof-dashboard { grid-template-columns: 1fr; }
	    }
@media (max-width: 700px) {
  .operator-system {
    gap: var(--space-7);
  }
  .operator-system h2 {
    max-width: 10.5ch;
  }
  .operator-map {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-4);
    overflow: hidden;
  }
  .operator-map::before {
    width: 104%;
    height: 44%;
    top: 52%;
  }
  .operator-map::after {
    width: 74%;
    height: 54%;
    top: 52%;
  }
  .operator-node,
  .operator-node.one,
  .operator-node.two,
  .operator-node.three,
  .operator-node.four,
  .operator-node.five,
  .operator-node.six,
  .operator-node.accent {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none !important;
    min-width: 0;
    width: 100%;
    padding: .72rem .64rem;
    font-size: .68rem;
    z-index: 3;
    order: 2;
  }
  .operator-node.accent {
    order: 0;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(210px, 100%);
  }
  .operator-hub {
    order: 1;
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    width: min(14.5rem, 78vw);
    margin: var(--space-3) auto var(--space-4);
    transform: none;
  }
  .operator-hub span {
    letter-spacing: .038em;
  }
  .operator-caption {
    order: 3;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: var(--space-4);
  }
}
	    @media (prefers-reduced-motion: reduce) {
	      *,
	      *::before,
	      *::after {
	        animation-duration: .001ms !important;
	        animation-iteration-count: 1 !important;
	        scroll-behavior: auto !important;
	      }
	    }

/* === Responsive safety net (added 2026-05) === */
html { overflow-x: hidden; }
img, svg, video, canvas, picture { max-width: 100%; height: auto; display: block; }
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }

/* Tablet: 1024 and below: tighten nav, prevent CTA collision */
@media (max-width: 1024px) {
  .nav-links { gap: var(--space-3); font-size: .92rem; }
  .nav-actions .button:not(.primary) { padding-inline: var(--space-3); }
  .nav-actions .button.primary { padding-inline: var(--space-4); font-size: .86rem; }
  .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar-card:nth-child(2),
  .pillar-card:nth-child(4) { transform: none; }
  .signal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sequoia-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sequoia-stat { border-left: 0; border-top: 1px solid rgba(245, 243, 238, .16); }
  .sequoia-stat:nth-child(-n+2) { border-top: 0; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet portrait: 900-768: soften hero, allow stacking earlier */
@media (max-width: 900px) {
  .st-infra-visual { min-height: 320px; }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .container { width: min(1200px, calc(100% - 1.5rem)); }
  .pillar-grid { grid-template-columns: 1fr; }
  .signal-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 640px) {
  .container { width: min(1200px, calc(100% - 1.25rem)); }
  .announcement-inner { padding-inline: var(--space-3); font-size: var(--text-xs); }
  .announcement-badge { font-size: .62rem; }
  .signal-strip { grid-template-columns: 1fr; }
  .brief-list { grid-template-columns: 1fr; }
  .footer-inner { padding-inline: 0; }
  .hero-actions .button { width: 100%; justify-content: center; }
}

/* Very small phones (iPhone SE / 320) */
@media (max-width: 380px) {
  .container { width: min(1200px, calc(100% - 1rem)); }
  .brand-wordmark { width: clamp(132px, 42vw, 160px); }
  h1 { letter-spacing: -.03em; }
  .button { padding: 0 .85rem; font-size: .85rem; }
  .menu-dropdown summary { padding-inline: var(--space-3); }
}

/* ===========================================================
   HOMEPAGE THEME OVERRIDES: dark-mode readability layer
   Compensates for hardcoded light-mode colors in homepage
   specific .st-* / / .trust-* / .proof-* / .operator-*
   and .testimonial-* / .about-* sections. Premium navy/violet
   identity is preserved; only surfaces, text and borders re-tone.
   =========================================================== */
html, body { transition: background-color .35s ease, color .35s ease; }

/* Body background: replace bright light gradient overlays in dark mode */
[data-theme='dark'] body {
  background:
    radial-gradient(circle at 8% 0%, rgba(36, 104, 178, .18), transparent 36rem),
    radial-gradient(circle at 92% 2%, rgba(124, 92, 255, .14), transparent 34rem),
    radial-gradient(circle at 45% 18%, rgba(216, 232, 255, .06), transparent 30rem),
    var(--bg);
}

/* Announcement bar */
[data-theme='dark'] .announcement-bar {
  background: rgba(124, 92, 255, .12);
  color: var(--text);
  border-bottom-color: var(--line);
}
[data-theme='dark'] .announcement-badge {
  background: var(--badge-bg);
  color: var(--badge-text);
}
[data-theme='dark'] .announcement-inner a { color: var(--link); }
[data-theme='dark'] .announcement-inner a:hover { color: var(--link-hover); }

/* Primary nav (glass background) */
[data-theme='dark'] .nav {
  background:
    linear-gradient(180deg, rgba(7, 11, 26, .82), rgba(7, 11, 26, .58));
  border-bottom-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .nav-links { color: var(--muted); }
[data-theme='dark'] .nav-links a:hover { color: var(--text); }
[data-theme='dark'] .brand-text { color: var(--text); }
[data-theme='dark'] .brand-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}
[data-theme='dark'] .theme,
[data-theme='dark'] .nav-actions .button:not(.primary) {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-line);
}
[data-theme='dark'] .menu-dropdown summary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-line);
}

/* Homepage hero */
[data-theme='dark'] .hero {
  background:
    radial-gradient(circle at 68% 4%, rgba(124, 92, 255, .22), transparent 24rem),
    radial-gradient(circle at 4% 18%, rgba(37, 99, 235, .14), transparent 30rem),
    linear-gradient(180deg, #0a1226 0%, #0d1838 46%, #070b1a 100%);
  color: var(--text);
}

/* st-orbit-card on right side of hero */
[data-theme='dark'] .st-orbit-card {
  background: rgba(20, 39, 71, .58);
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .45);
}
[data-theme='dark'] .st-orbit-card .eyebrow { color: var(--accent); }
[data-theme='dark'] .st-orbit-card h2 { color: var(--text); }
[data-theme='dark'] .st-orbit-grid span {
  background: rgba(245, 248, 255, .05);
  color: var(--muted);
  border-color: var(--line);
}
[data-theme='dark'] .st-orbit-grid strong { color: var(--text); }

/* Operating layer section */
[data-theme='dark'] .st-operating-layer {
  background:
    radial-gradient(circle at 76% 0%, rgba(124, 92, 255, .12), transparent 24rem),
    linear-gradient(180deg, var(--bg) 0%, #0a1226 100%);
  border-bottom-color: var(--line);
}
[data-theme='dark'] .st-layer-panel {
  background:
    radial-gradient(circle at 20% 10%, rgba(124, 92, 255, .16), transparent 18rem),
    linear-gradient(145deg, rgba(20, 39, 71, .86), rgba(15, 29, 54, .76));
  background-size: auto, auto;
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .st-layer-head h2 { color: var(--text); }
[data-theme='dark'] .st-layer-head p { color: var(--muted); }
[data-theme='dark'] .st-layer-actions .button:not(.primary) {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-line);
}
[data-theme='dark'] .st-layer-dashboard {
  background:
    radial-gradient(circle at 76% 18%, rgba(124, 92, 255, .18), transparent 16rem),
    linear-gradient(145deg, rgba(20, 39, 71, .88), rgba(15, 29, 54, .76));
  background-size: auto, auto;
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 24px 70px rgba(0,0,0,.32);
}
[data-theme='dark'] .st-dashboard-top { color: var(--muted); }
[data-theme='dark'] .st-dashboard-top strong { color: var(--text); }
[data-theme='dark'] .st-dashboard-status {
  background: rgba(245, 248, 255, .06);
  color: var(--muted);
  border-color: var(--line);
}
[data-theme='dark'] .st-dashboard-card {
  background: rgba(245, 248, 255, .045);
  border-color: var(--line);
}
[data-theme='dark'] .st-dashboard-card span,
[data-theme='dark'] .st-dashboard-card small { color: var(--muted); }
[data-theme='dark'] .st-dashboard-card strong { color: var(--text); }
[data-theme='dark'] .st-dashboard-foot span {
  background: rgba(245, 248, 255, .04);
  color: var(--muted);
  border-color: var(--line);
}
[data-theme='dark'] .st-dashboard-note {
  background: rgba(245, 248, 255, .04);
  color: var(--muted);
  border-color: var(--line);
}

/* Layer flow / steps */
[data-theme='dark'] .st-layer-step {
  background: rgba(245, 248, 255, .045);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 18px 54px rgba(0, 0, 0, .32);
}
[data-theme='dark'] .st-layer-step strong { color: var(--text); }
[data-theme='dark'] .st-layer-step span { color: var(--muted); }
/* Trust/proof logo PNGs are opaque RGB (no alpha) so the brightness(0)
   invert(1) trick fills the whole image rectangle white. In dark mode { filter: none; opacity: 1; }

/* Section lede & platform cards */
[data-theme='dark'] .st-section-lede p { color: var(--muted); }
[data-theme='dark'] .st-section-link { color: var(--link); }
[data-theme='dark'] .st-platform-card {
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .14), transparent 12rem),
    linear-gradient(145deg, rgba(20, 39, 71, .82), rgba(15, 29, 54, .74));
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 20px 64px rgba(0, 0, 0, .32);
}
[data-theme='dark'] .st-platform-card.featured {
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .22), transparent 18rem),
    linear-gradient(145deg, rgba(23, 43, 85, .88), rgba(15, 29, 54, .80));
  border-color: var(--line-strong);
}

/* Generic proof, signal & related cards */
[data-theme='dark'] .signal {
  background: rgba(245, 248, 255, .05);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .signal strong { color: var(--text); }
[data-theme='dark'] .signal span { color: var(--accent); }

[data-theme='dark'] .proof-card,
[data-theme='dark'] .proof-tile:not(.dark) {
  background:
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, .18), transparent 12rem),
    color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}
[data-theme='dark'] .proof-stat strong { color: var(--text); }
[data-theme='dark'] .proof-stat span { color: var(--muted); }
[data-theme='dark'] .proof-stat { border-left-color: var(--line); }

/* Trust section */
[data-theme='dark'] .trust-section {
  background:
    radial-gradient(circle at 78% 4%, rgba(124, 92, 255, .14), transparent 26rem),
    linear-gradient(180deg, transparent, rgba(15, 29, 54, .42));
}
[data-theme='dark'] .trust-logo {
  background:
    linear-gradient(180deg, rgba(245, 248, 255, .96), rgba(228, 232, 252, .82));
  border-color: rgba(245, 248, 255, .22);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
[data-theme='dark'] .trust-logo span { color: #354b6c; }
/* Show logos in natural brand colors on the light pill */
[data-theme='dark'] .trust-logo img { filter: none; opacity: 1; }
[data-theme='dark'] .trust-statement,
[data-theme='dark'] .trust-metrics {
  background:
    radial-gradient(circle at 92% 0%, rgba(124, 92, 255, .18), transparent 14rem),
    color-mix(in oklab, var(--surface-elevated) 90%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .trust-statement h3 { color: var(--text); }
[data-theme='dark'] .trust-statement p { color: var(--muted); }
[data-theme='dark'] .trust-metric { border-top-color: var(--line); }
[data-theme='dark'] .trust-metric strong { color: var(--text); }
[data-theme='dark'] .trust-metric span { color: var(--muted); }

/* Testimonial cards */
[data-theme='dark'] .testimonial-card {
  background:
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, .18), transparent 12rem),
    color-mix(in oklab, var(--surface-elevated) 90%, transparent);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
}
[data-theme='dark'] .testimonial-card blockquote { color: var(--text); }
[data-theme='dark'] .testimonial-card footer { color: var(--muted); }
[data-theme='dark'] .testimonial-card footer strong { color: var(--accent); }
/* Show logos in natural brand colors; place on light tile if needed */
[data-theme='dark'] .testimonial-logo {
  filter: none;
  opacity: 1;
  padding: .35rem .55rem;
  background: linear-gradient(135deg, rgba(245, 248, 255, .96), rgba(228, 232, 252, .88));
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* About panel */
[data-theme='dark'] .about-panel {
  background: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .about-panel p { color: var(--muted); }
[data-theme='dark'] .about-panel.dark { /* stays intentionally dark; on-dark colors already applied */ }
[data-theme='dark'] .about-list div { border-top-color: var(--line); }
[data-theme='dark'] .about-network {
  background:
    radial-gradient(circle at 50% 45%, rgba(124, 92, 255, .22), transparent 10rem),
    radial-gradient(circle at 20% 80%, rgba(36, 104, 178, .14), transparent 11rem),
    color-mix(in oklab, var(--surface-elevated) 86%, transparent);
  border-color: var(--line);
}

/* Operator system / map cards (dark already, leave intentionally dark) */
/* Proof-module / proof-hero */
[data-theme='dark'] .proof-hero-main,
[data-theme='dark'] .proof-dashboard-panel,
[data-theme='dark'] .proof-hero-side,
[data-theme='dark'] .proof-point,
[data-theme='dark'] .proof-quote,
[data-theme='dark'] .proof-evidence {
  background: color-mix(in oklab, var(--surface-elevated) 88%, transparent);
  border-color: var(--line);
  color: var(--text);
}

/* Operating model section already targeted with [data-theme='dark'] selector above */

/* Site footer */
[data-theme='dark'] .site-footer {
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--surface) 58%, transparent));
  border-top-color: var(--line);
}
[data-theme='dark'] .footer-brand { border-bottom-color: var(--line); }
[data-theme='dark'] .footer-brand p { color: var(--muted); }
[data-theme='dark'] .footer-links a { color: var(--muted); }
[data-theme='dark'] .footer-links a:hover { color: var(--text); }
[data-theme='dark'] .footer-meta { color: var(--faint); }
[data-theme='dark'] .footer-column {
  background: color-mix(in oklab, var(--surface-elevated) 84%, transparent);
  border-color: var(--line);
  color: var(--muted);
}
[data-theme='dark'] .footer-column strong { color: var(--text); }
[data-theme='dark'] .footer-column a { color: var(--muted); }
[data-theme='dark'] .footer-column a:hover { color: var(--text); }
[data-theme='dark'] .footer-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}

/* Generic links inside body content */
[data-theme='dark'] a:not(.button) { color: inherit; }

/* ===========================================================
   Additional homepage dark-mode coverage:
   Sections originally hardcoded against light surfaces that
   were not previously tokenized: executive-brief, operator
   system/map, market-move, industry-cloud, platform-section,
   benefit/solution rows. Premium navy/violet palette preserved.
   =========================================================== */

/* Executive brief card (hero panel) */
[data-theme='dark'] .executive-brief {
  background:
    radial-gradient(circle at 82% 12%, rgba(124, 92, 255, .22), transparent 15rem),
    radial-gradient(circle at 12% 88%, rgba(36, 104, 178, .14), transparent 17rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 92%, transparent), color-mix(in oklab, var(--surface-2) 74%, transparent));
  background-size: auto, auto, auto;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 36px 110px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme='dark'] .executive-brief h2 { color: var(--text); }
[data-theme='dark'] .hero .brief-copy { color: var(--muted); }
[data-theme='dark'] .system-node {
  background: color-mix(in oklab, var(--surface-elevated) 80%, transparent);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}

/* Operator system / map panel */
[data-theme='dark'] .operator-system {
  background:
    radial-gradient(circle at 80% 12%, rgba(124, 92, 255, .18), transparent 18rem),
    radial-gradient(circle at 18% 92%, rgba(36, 104, 178, .12), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 92%, transparent), color-mix(in oklab, var(--surface-2) 72%, transparent));
  color: var(--text);
}
[data-theme='dark'] .operator-chips span {
  background: color-mix(in oklab, var(--surface-elevated) 70%, transparent);
  color: var(--muted);
  border-color: var(--line);
}
[data-theme='dark'] .operator-pullquote {
  color: var(--text);
  border-left-color: var(--accent);
}
[data-theme='dark'] .operator-pullquote span { color: var(--muted); }
[data-theme='dark'] .operator-map {
  background:
    radial-gradient(circle at 50% 48%, rgba(124, 92, 255, .22), transparent 15rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 90%, transparent), color-mix(in oklab, var(--surface-2) 70%, transparent));
  background-size: auto, auto;
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 70px rgba(0, 0, 0, .35);
}
[data-theme='dark'] .operator-node {
  background: color-mix(in oklab, var(--surface-elevated) 78%, transparent);
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .35);
}
[data-theme='dark'] .operator-node.accent {
  background: rgba(124, 92, 255, .22);
  color: var(--primary);
  border-color: var(--line-strong);
}

/* Operator card grid */
[data-theme='dark'] .operator-card {
  background:
    radial-gradient(circle at 82% 8%, rgba(124, 92, 255, .18), transparent 12rem),
    color-mix(in oklab, var(--surface-elevated) 90%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .operator-card h3 { color: var(--text); }
[data-theme='dark'] .operator-card p { color: var(--muted); }

/* Industry cloud */
[data-theme='dark'] .industry-list span {
  background: color-mix(in oklab, var(--surface-elevated) 80%, transparent);
  color: var(--text);
  border-color: var(--line);
}

/* Market move card */
[data-theme='dark'] .market-move {
  background:
    radial-gradient(circle at 10% 0%, rgba(124, 92, 255, .14), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 90%, transparent), color-mix(in oklab, var(--surface-2) 70%, transparent));
  border-color: var(--line);
  color: var(--text);
}

/* Platform-section hardcoded #f5f3ee cream wash */
[data-theme='dark'] .platform-section {
  background:
    radial-gradient(circle at 84% 4%, rgba(124, 92, 255, .12), transparent 28rem),
    var(--bg);
}
[data-theme='dark'] .platform-lede p { color: var(--muted); }
[data-theme='dark'] .benefit-item { border-top-color: var(--line); }
[data-theme='dark'] .benefit-item h3 { color: var(--text); }
[data-theme='dark'] .benefit-item p { color: var(--muted); }
[data-theme='dark'] .solution-list { border-top-color: var(--line); }
[data-theme='dark'] .solution-row { border-bottom-color: var(--line); }
[data-theme='dark'] .solution-row h3 { color: var(--text); }
[data-theme='dark'] .solution-row p { color: var(--muted); }

/* Resource cards & related grids */
[data-theme='dark'] .resource-card,
[data-theme='dark'] .resource-tile,
[data-theme='dark'] .related-card {
  background:
    radial-gradient(circle at 82% 0%, rgba(124, 92, 255, .14), transparent 12rem),
    color-mix(in oklab, var(--surface-elevated) 88%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .resource-card p,
[data-theme='dark'] .resource-tile p,
[data-theme='dark'] .related-card p { color: var(--muted); }
[data-theme='dark'] .resource-card h3,
[data-theme='dark'] .resource-tile h3,
[data-theme='dark'] .related-card h3 { color: var(--text); }

/* Generic about-network / network-style light surfaces */
[data-theme='dark'] .architecture-top,
[data-theme='dark'] .system-snapshot,
[data-theme='dark'] .stance-grid,
[data-theme='dark'] .operating-rail {
  color: var(--text);
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Extras migrated from secondary.css (page-scoped components) === */
[data-theme='dark'] {
  --bg: #070b1a;
  --surface: #0f1d36;
  --surface-2: #172b55;
  --surface-elevated: #142747;
  --text: #f3f5fb;
  --muted: #c8cee0;
  --faint: #8e98b2;
  --line: rgba(245, 248, 255, .14);
  --line-strong: rgba(245, 248, 255, .26);
  --primary: #a5b4fc;
  --primary-2: #c7d2fe;
  --accent: #a5b4fc;
  --link: #c7d2fe;
  --link-hover: #e0e7ff;
  --system-line: rgba(165, 180, 252, .28);
  --system-grid: rgba(245, 248, 255, .045);
  --inverse: #061F3D;
  --shadow: 0 24px 80px rgba(0, 0, 0, .55);
  --btn-bg: rgba(245, 248, 255, .06);
  --btn-text: #f3f5fb;
  --btn-line: rgba(245, 248, 255, .18);
  --field-bg: rgba(245, 248, 255, .07);
  --field-text: #f3f5fb;
  --field-line: rgba(245, 248, 255, .22);
  --field-placeholder: rgba(245, 248, 255, .52);
  --badge-bg: rgba(165, 180, 252, .18);
  --badge-text: #e0e7ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}
:root { color-scheme: light dark; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--tracking-body);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), transparent 28rem),
    radial-gradient(circle at 7% 0%, rgba(36, 104, 178, .20), transparent 38rem),
    radial-gradient(circle at 90% 4%, rgba(99, 102, 241, .18), transparent 36rem),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[data-theme='dark'] body {
  background:
    radial-gradient(circle at 8% 0%, rgba(36, 104, 178, .20), transparent 36rem),
    radial-gradient(circle at 92% 2%, rgba(124, 92, 255, .12), transparent 34rem),
    var(--bg);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.container { width: min(1200px, calc(100% - 2rem)); margin-inline: auto; }
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(18px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(245, 243, 238, .42));
  border-bottom: 1px solid rgba(11, 31, 59, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .48), 0 18px 70px rgba(11, 31, 59, .055);
  color: #061F3D;
}
.nav-inner {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--space-4), 2.8vw, var(--space-7));
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex-shrink: 0;
}
.brand-logo { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; box-shadow: 0 10px 24px rgba(11, 31, 59, .16); }
.brand-wordmark {
  width: clamp(176px, 14vw, 218px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(11, 31, 59, .08));
}
[data-theme='dark'] .brand-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0, 0, 0, .2));
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-3), 1.4vw, var(--space-5));
  color: var(--muted);
  font-size: clamp(.94rem, .9rem + .16vw, 1.02rem);
  font-weight: 600;
  letter-spacing: -.018em;
}
.nav-links a { white-space: nowrap; }
.nav-links a:hover { color: var(--text); }

/* Client Portal dropdown (desktop): uses <details> for accessibility */
.nav-dropdown { position: relative; }
.nav-dropdown summary {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  list-style: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after {
  content: "⌄";
  color: var(--accent);
  font-size: .9rem;
  line-height: 1;
  transition: transform .2s ease;
}
.nav-dropdown[open] summary::after { transform: translateY(-2px) rotate(180deg); }
.nav-dropdown summary:hover { color: var(--text); }
.nav-dropdown-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + .9rem);
  transform: translateX(-50%);
  width: min(540px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .9);
  background:
    radial-gradient(circle at 90% 0%, rgba(99, 102, 241, .14), transparent 14rem),
    color-mix(in oklab, var(--surface) 97%, transparent);
  box-shadow: 0 26px 72px rgba(11, 31, 59, .18);
  backdrop-filter: blur(20px);
  z-index: 40;
}
.nav-dropdown-panel::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: color-mix(in oklab, var(--surface) 97%, transparent);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.nav-dropdown-panel a {
  display: grid;
  gap: .25rem;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  color: var(--text);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.012em;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.nav-dropdown-panel a:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  transform: translateY(-1px);
}
.nav-dropdown-panel a span {
  display: block;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.005em;
  margin-top: .15rem;
}
.nav-dropdown-panel a em {
  display: inline-block;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .25rem;
}
@media (max-width: 1024px) {
  .nav-dropdown { display: none; }
}
.menu-dropdown {
  position: relative;
  display: none;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
}
.menu-dropdown summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 .95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.menu-dropdown summary::-webkit-details-marker { display: none; }
.menu-dropdown summary::after {
  content: "⌄";
  margin-left: .55rem;
  color: var(--accent);
  font-size: .95rem;
  line-height: 1;
}
.menu-dropdown[open] summary {
  border-color: color-mix(in oklab, var(--text) 26%, transparent);
  box-shadow: 0 18px 50px rgba(11, 31, 59, .12);
}
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-3));
  width: min(680px, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .95);
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .16), transparent 16rem),
    color-mix(in oklab, var(--surface) 96%, transparent);
  box-shadow: 0 28px 90px rgba(11, 31, 59, .16);
  backdrop-filter: blur(18px);
  z-index: 30;
}
.menu-panel a {
  display: grid;
  gap: .22rem;
  min-height: 88px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--bg) 50%, transparent);
  color: var(--text);
  align-content: start;
}
.menu-panel a span {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -.01em;
}
.nav-actions { display: flex; align-items: center; gap: .55rem; }
.theme {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: .9rem;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: -.012em;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.button:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--text) 26%, transparent); }
.button.primary {
  background: linear-gradient(135deg, var(--system-violet), var(--system-indigo));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 32px rgba(99, 102, 241, .22);
}
.nav-actions a.button {
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
}
.eyebrow {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--type-display-weight);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-hero); max-width: 1000px; line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
/* Unified H2 scale: single source of truth (2026-05) */
h2 { font-size: var(--text-xl); font-weight: 600; line-height: 1.08; letter-spacing: -.018em; }
h3 { font-size: var(--text-lg); }
p { color: var(--muted); max-width: 72ch; line-height: var(--leading-body); text-wrap: pretty; }
.page-hero {
  padding: clamp(var(--space-12), 8vw, var(--space-20)) 0 var(--space-12);
}
.hero-copy {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-8);
  align-items: end;
}
.hero-copy p { font-size: var(--text-lg); margin-top: var(--space-6); }
.hero-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background:
    radial-gradient(circle at 86% 10%, rgba(99, 102, 241, .20), transparent 17rem),
    var(--surface);
  background-size: auto, auto;
  box-shadow: var(--shadow);
}
.hero-panel::before {
  content: "";
  position: absolute;
  width: 56%;
  height: 28%;
  right: 9%;
  top: 18%;
  border: 1px solid rgba(99, 102, 241, .16);
  border-radius: 999px;
  transform: rotate(-8deg);
  pointer-events: none;
}
.hero-panel::after {
  content: "";
  position: absolute;
  width: 11rem;
  aspect-ratio: 1;
  right: 12%;
  bottom: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.58), transparent 30%),
    linear-gradient(145deg, rgba(11,31,59,.90), rgba(20,43,86,.72));
  opacity: .12;
  pointer-events: none;
}
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.022em;
}
.hero-panel span {
  display: block;
  color: var(--muted);
  margin-top: var(--space-4);
}
.category-hero {
  padding: clamp(var(--space-10), 5vw, var(--space-16)) 0 clamp(var(--space-8), 4vw, var(--space-12));
}
.category-hero .hero-copy {
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  align-items: center;
}
.category-hero h1 {
  max-width: 1080px;
  font-size: var(--text-hero-sub);
}
.category-hero .hero-copy p {
  max-width: 860px;
  margin-top: var(--space-4);
  font-size: clamp(1.05rem, .96rem + .42vw, 1.32rem);
}
.category-hero .hero-panel {
  padding: clamp(var(--space-5), 2.6vw, var(--space-8));
}
.category-hero .hero-panel strong {
  font-size: clamp(1.6rem, 1.05rem + 1.8vw, 3.1rem);
}
.category-hero .hero-panel > span {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.category-proof {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.category-proof span {
  display: grid;
  gap: .18rem;
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.32;
}
.category-proof b {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  font-size: var(--text-sm);
}
section { padding: clamp(var(--space-10), 6vw, var(--space-16)) 0; }
.section-head {
  max-width: 820px;
  margin-bottom: var(--space-8);
}
.section-head p { margin-top: var(--space-5); }
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.grid.two { grid-template-columns: repeat(2, 1fr); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
}

.case-hero-logo {
  width: min(260px, 70%);
  margin-bottom: var(--space-6);
}

.case-study-band {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background:
    radial-gradient(circle at 88% 10%, rgba(99, 102, 241, .18), transparent 20rem),
    color-mix(in oklab, var(--surface) 90%, transparent);
  box-shadow: var(--shadow);
}

.case-quote {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background:
    radial-gradient(circle at 90% 0%, rgba(99, 102, 241, .16), transparent 18rem),
    color-mix(in oklab, var(--surface) 92%, transparent);
  background-size: auto, auto;
  box-shadow: var(--shadow);
}

.case-quote blockquote {
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-4);
}

.case-quote blockquote p {
  margin: 0;
  max-width: 980px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + .55vw, 1.55rem);
  line-height: 1.28;
  letter-spacing: var(--tracking-heading);
}

.case-study-band.dark {
  background:
    radial-gradient(circle at 88% 10%, rgba(99, 102, 241, .22), transparent 18rem),
    var(--primary-2);
  color: var(--inverse);
  border-color: transparent;
}

.case-study-band.dark p,
.case-study-band.dark li,
.case-study-band.dark span {
  color: color-mix(in oklab, var(--inverse) 72%, transparent);
}

.case-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.case-kpi {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: var(--surface);
  color: var(--primary-2);
}

.case-kpi strong {
  display: block;
  color: var(--primary-2);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1rem + 1.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.case-kpi span {
  display: block;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
}

.case-study-band.dark .case-kpi {
  border-color: rgba(245, 243, 238, .18);
  background: rgba(245, 243, 238, .97);
  box-shadow: 0 22px 54px rgba(2, 8, 23, .18);
}

.case-study-band.dark .case-kpi strong {
  color: #061F3D;
}

.case-study-band.dark .case-kpi span {
  color: rgba(11, 31, 59, .68);
}

/* Metric variant: amplified numerals for quantified outcomes */
.case-kpi-grid.case-kpi-grid-metrics .case-kpi strong {
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
  letter-spacing: -.04em;
  color: #6C4DFF;
}
.case-study-band.dark .case-kpi-grid-metrics .case-kpi strong {
  color: #6C4DFF;
}
.case-kpi-footnote {
  margin-top: var(--space-5);
  color: rgba(245, 243, 238, .68);
  font-size: var(--text-sm);
  line-height: 1.55;
  font-style: italic;
}

.operating-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.flow-step {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
}

.flow-step b {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--inverse);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.flow-step strong {
  display: block;
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}

.flow-step span {
  display: block;
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.dashboard-preview {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.dashboard-row {
  display: grid;
  grid-template-columns: .35fr 1fr;
  gap: var(--space-4);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.dashboard-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.dashboard-row strong {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}

.dashboard-row span {
  color: var(--muted);
}
.card.featured {
  grid-column: span 2;
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 92, 255, .18), transparent 20rem),
    var(--text);
  color: var(--bg);
  border-color: transparent;
}
.card.featured p,
.card.featured li { color: color-mix(in oklab, var(--bg) 72%, transparent); }
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.tag {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: var(--space-8);
  align-items: start;
}
.list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
}
.list li {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  color: var(--muted);
}
.list strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--space-2);
}
.dark-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 232, 255, .14), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(124, 92, 255, .18), transparent 22rem),
    linear-gradient(145deg, #071426, #061F3D 58%, #182b55);
  background-size: auto, auto, auto;
  color: var(--bg);
}
.dark-band::before,
.dark-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(245, 243, 238, .12);
  border-radius: 999px;
}
.dark-band::before {
  width: 42rem;
  height: 16rem;
  right: 6%;
  top: 12%;
  transform: rotate(-10deg);
}
.dark-band::after {
  width: 34rem;
  height: 12rem;
  right: 18%;
  bottom: 8%;
  border-color: rgba(124, 92, 255, .28);
  transform: rotate(16deg);
}
.dark-band > * { position: relative; z-index: 1; }
.dark-band p,
.dark-band li { color: color-mix(in oklab, var(--bg) 72%, transparent); }
.dark-band .list li { border-color: color-mix(in oklab, var(--bg) 18%, transparent); }
.dark-band .list strong { color: var(--bg); }
.dark-band .card:not(.featured) {
  color: var(--text);
}
.dark-band .card:not(.featured) p,
.dark-band .card:not(.featured) li {
  color: var(--muted);
}
.dark-band .card:not(.featured) .list li {
  border-color: var(--line);
}
.dark-band .card:not(.featured) .list strong {
  color: var(--text);
}
.visual-system {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: var(--space-4);
  align-items: stretch;
}
.visual-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  background:
    radial-gradient(circle at 92% 8%, rgba(99, 102, 241, .16), transparent 17rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface) 94%, transparent), color-mix(in oklab, var(--surface-2) 72%, transparent));
  box-shadow: var(--shadow);
}
.visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(11,31,59,.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 74%, transparent);
  pointer-events: none;
}
.visual-card::after {
  content: "";
  position: absolute;
  inset: auto 8% -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241,.72), rgba(36,104,178,.58), transparent);
  opacity: .9;
}
.visual-card:nth-child(2n)::before {
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 70% 30%, #000, transparent 72%);
}
.visual-card:nth-child(2n)::after {
  inset: 12% auto auto 18%;
  width: 44%;
  height: 20%;
  background: none;
  border: 1px solid rgba(99, 102, 241, .18);
  border-radius: 999px;
  transform: rotate(12deg);
}
.visual-card > * { position: relative; z-index: 1; }
.visual-card.dark {
  background:
    radial-gradient(circle at 84% 0%, rgba(124, 92, 255, .22), transparent 18rem),
    radial-gradient(circle at 10% 100%, rgba(76, 141, 211, .16), transparent 20rem),
    linear-gradient(145deg, #09182c, #102a4f);
  background-size: auto, auto, auto;
  color: #f7faff;
  border-color: rgba(255, 255, 255, .14);
}
.visual-card.dark p,
.visual-card.dark .visual-caption,
.visual-card.dark .map-label,
.visual-card.dark .signal-row span { color: rgba(247, 250, 255, .68); }
.dark-band .visual-card:not(.dark) {
  color: var(--text);
}
.dark-band .visual-card:not(.dark) p,
.dark-band .visual-card:not(.dark) .visual-caption,
.dark-band .visual-card:not(.dark) .path-step p {
  color: var(--muted);
}
.dark-band .visual-card:not(.dark) h3,
.dark-band .visual-card:not(.dark) .path-step strong {
  color: var(--text);
}
.dark-band .visual-card:not(.dark) .path-step {
  background: rgba(255, 255, 255, .88);
}
.visual-kicker {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.visual-title {
  margin-top: var(--space-3);
  max-width: 560px;
}
.visual-caption {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
}
.node-field {
  position: relative;
  min-height: 210px;
  margin-top: var(--space-6);
  display: grid;
  place-items: center;
}
.node-field::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.32) inset;
}
.node-field::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, color-mix(in oklab, var(--accent) 36%, transparent), transparent);
  transform: rotate(52deg);
}
.hub {
  position: relative;
  z-index: 2;
  width: min(180px, 48vw);
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .48), transparent 35%),
    linear-gradient(145deg, var(--text), #17416f);
  color: var(--bg);
  box-shadow: 0 22px 70px rgba(11, 31, 59, .24);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
.node-pill {
  position: absolute;
  z-index: 3;
  padding: .55rem .8rem;
  border: 1px solid rgba(165, 180, 252, .42);
  border-radius: 999px;
  background:
    radial-gradient(circle at 24% 18%, rgba(245, 243, 238, .24), transparent 36%),
    linear-gradient(135deg, rgba(11, 31, 59, .96), rgba(99, 102, 241, .88));
  backdrop-filter: blur(14px);
  color: #f5f3ee;
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 18px 56px rgba(11, 31, 59, .22);
}
.node-pill:nth-child(1) { top: 2%; left: 8%; }
.node-pill:nth-child(2) { top: 10%; right: 4%; }
.node-pill:nth-child(3) { bottom: 12%; left: 1%; }
.node-pill:nth-child(4) { bottom: 2%; right: 8%; }
.node-pill:nth-child(5) { top: 45%; left: 0; }
.compare-board,
.signal-board {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.compare-row,
.signal-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .045));
  backdrop-filter: blur(12px);
}
.compare-row strong,
.signal-row strong {
  color: #f7faff;
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-heading);
}
.compare-row span,
.signal-row span {
  color: rgba(247, 250, 255, .7);
  font-size: var(--text-sm);
}
.solution-path {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}
.path-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
}
.path-step b {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--bg);
  font-size: var(--text-sm);
}
.path-step strong {
  display: block;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
  margin-bottom: var(--space-2);
}
.map-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.map-tile {
  min-height: 112px;
  padding: var(--space-4);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  backdrop-filter: blur(12px);
}
.map-tile strong {
  display: block;
  color: #f7faff;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
  line-height: 1.05;
}
.map-label {
  display: block;
  margin-top: var(--space-2);
  color: rgba(247, 250, 255, .68);
  font-size: var(--text-sm);
}
.leader-radar {
  position: relative;
  min-height: 310px;
  margin-top: var(--space-6);
  display: grid;
  place-items: center;
}
.leader-radar::before,
.leader-radar::after {
  content: "";
  position: absolute;
  border: 1px solid color-mix(in oklab, var(--accent) 34%, transparent);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.32) inset;
}
.leader-radar::before { inset: 4%; }
.leader-radar::after { inset: 22%; }
.leader-core {
  position: relative;
  z-index: 2;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.48), transparent 34%),
    radial-gradient(circle at 70% 78%, rgba(99, 102, 241,.32), transparent 45%),
    linear-gradient(145deg, var(--text), #184879);
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}
.leader-node {
  position: absolute;
  z-index: 3;
  padding: .55rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(165, 180, 252, .42);
  background:
    radial-gradient(circle at 24% 18%, rgba(245, 243, 238, .24), transparent 36%),
    linear-gradient(135deg, rgba(11, 31, 59, .96), rgba(99, 102, 241, .88));
  backdrop-filter: blur(14px);
  color: #f5f3ee;
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: 0 18px 56px rgba(11, 31, 59, .22);
}
.leader-node:nth-child(1) { top: 4%; left: 10%; }
.leader-node:nth-child(2) { top: 12%; right: 2%; }
.leader-node:nth-child(3) { right: 7%; bottom: 13%; }
.leader-node:nth-child(4) { left: 2%; bottom: 16%; }
.leader-node:nth-child(5) { top: 45%; left: 0; }
.career-flow {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.flow-step {
  position: relative;
  min-height: 180px;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 85% 4%, rgba(99, 102, 241, .14), transparent 12rem),
    color-mix(in oklab, var(--surface) 90%, transparent);
}
.flow-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.05rem;
  width: 1.7rem;
  height: 1px;
  background: color-mix(in oklab, var(--accent) 50%, transparent);
}
.flow-step:last-child::after { display: none; }
.flow-step span {
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.operating-flow .flow-step span {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.45;
  text-transform: none;
}
.dark-band .operating-flow .flow-step span {
  color: rgba(245, 243, 238, .68);
}
.flow-step strong {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: 1.02;
  letter-spacing: var(--tracking-heading);
}
.flow-step p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.jobs-panel {
  margin-top: var(--space-4);
  scroll-margin-top: 96px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.2);
  background:
    radial-gradient(circle at 94% 0%, rgba(99, 102, 241, .12), transparent 18rem),
    color-mix(in oklab, var(--surface) 88%, transparent);
  box-shadow: var(--shadow);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
}
.jobs-panel-top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.jobs-panel-top .eyebrow { margin-bottom: var(--space-2); }
.job-list {
  display: grid;
  border-top: 1px solid var(--line);
}
.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}
.job-row strong {
  display: block;
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}
.job-row span {
  display: block;
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}
.job-row a {
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
}
.job-note {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: var(--space-5);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--space-4);
  align-items: stretch;
}
.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(var(--space-6), 4vw, var(--space-10));
  box-shadow: var(--shadow);
}
.contact-card.primary-contact {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 92, 255, .18), transparent 20rem),
    var(--text);
  color: var(--on-dark);
  border-color: transparent;
}
.contact-card.primary-contact .eyebrow { color: #c7d2fe; }
.contact-card.primary-contact h2 { color: var(--on-dark); }
.contact-card.primary-contact p { color: var(--on-dark-muted); }
.contact-card p { color: var(--muted); margin-top: var(--space-4); }
.contact-form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.hubspot-form-shell {
  position: relative;
  margin-top: var(--space-8);
  overflow: hidden;
  border: 1px solid rgba(245, 243, 238, .16);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(124,92,255,.22), transparent 16rem),
    linear-gradient(145deg, rgba(245, 243, 238, .09), rgba(245, 243, 238, .045));
  background-size: auto, auto;
  padding: clamp(var(--space-4), 3vw, var(--space-6));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 70px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}
.hubspot-form-shell::before {
  content: "Secure enterprise review request";
  position: absolute;
  top: var(--space-4);
  left: clamp(var(--space-4), 4vw, var(--space-6));
  z-index: 2;
  color: rgba(245, 243, 238, .68);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
}
.hubspot-form-shell .hs-form-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 560px;
  margin-top: calc(var(--space-6) + var(--space-2));
  border-radius: 18px;
  border: 1px solid rgba(11, 31, 59, .08);
  background: #ffffff;
  color: #061F3D;
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 18px 48px rgba(0,0,0,.22);
  padding: clamp(var(--space-3), 2vw, var(--space-4));
}
/* Branded accent stripe at top of form card: signals "embedded enterprise tool" instead of "naked third-party form" */
.hubspot-form-shell .hs-form-frame::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366F1 0%, #A5B4FC 55%, #6366F1 100%);
  z-index: 3;
  pointer-events: none;
}
.hubspot-form-shell .hs-form-frame:empty::before {
  content: "Loading the secure review form…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: #46546d;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
}
.hubspot-form-shell .hs-form-frame:empty::after {
  content: "If the form does not appear, email talent@sustainabletalent.com or call 1 (645) 202-2255.";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-5);
  padding: 0 var(--space-6);
  color: #46546d;
  font-size: var(--text-xs);
  line-height: 1.5;
  text-align: center;
}
.hubspot-form-shell iframe {
  position: relative;
  z-index: 1;
  display: block;
  width: 100% !important;
  min-height: 540px;
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  color-scheme: light;
}
/* HubSpot v4 native (non-iframe) render: ensure injected internals
   inherit readable light-card colors */
.hubspot-form-shell .hs-form-frame > *,
.hubspot-form-shell .hs-form-frame form,
.hubspot-form-shell .hs-form-frame label,
.hubspot-form-shell .hs-form-frame legend,
.hubspot-form-shell .hs-form-frame p,
.hubspot-form-shell .hs-form-frame span,
.hubspot-form-shell .hs-form-frame li,
.hubspot-form-shell .hs-form-frame fieldset { color: #061F3D; }
.hubspot-form-shell .hs-form-frame input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']),
.hubspot-form-shell .hs-form-frame select,
.hubspot-form-shell .hs-form-frame textarea {
  color: #061F3D;
  background: #ffffff;
  border: 1px solid rgba(11, 31, 59, .18);
  border-radius: 12px;
  padding: .8rem 1rem;
  font: inherit;
}
.hubspot-form-shell .hs-form-frame input::placeholder,
.hubspot-form-shell .hs-form-frame textarea::placeholder {
  color: rgba(11, 31, 59, .48);
}
.hubspot-form-shell .hs-form-frame input:focus,
.hubspot-form-shell .hs-form-frame select:focus,
.hubspot-form-shell .hs-form-frame textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .18);
}
.hubspot-form-shell .hs-form-frame button,
.hubspot-form-shell .hs-form-frame input[type='submit'] {
  background: #061F3D;
  color: #f5f3ee;
  border: 1px solid #061F3D;
  border-radius: 999px;
  padding: .8rem 1.4rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
}
.hubspot-form-shell .hs-form-frame button:hover,
.hubspot-form-shell .hs-form-frame input[type='submit']:hover {
  background: #142b56;
  border-color: #142b56;
}
.hubspot-form-shell .hs-form-frame a { color: var(--link); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.form-field {
  display: grid;
  gap: var(--space-2);
}
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  color: var(--on-dark-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.contact-card:not(.primary-contact) .form-field label { color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(245, 243, 238, .22);
  border-radius: 18px;
  background: rgba(245, 243, 238, .08);
  color: var(--on-dark);
  font: inherit;
  padding: .95rem 1rem;
  outline: none;
}
.contact-card:not(.primary-contact) .form-field input,
.contact-card:not(.primary-contact) .form-field select,
.contact-card:not(.primary-contact) .form-field textarea {
  border-color: var(--field-line);
  background: var(--field-bg);
  color: var(--field-text);
}
.form-field select option { color: #0b1d38; background: #fff; }
.form-field textarea {
  min-height: 132px;
  resize: vertical;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--on-dark-faint); }
.contact-card:not(.primary-contact) .form-field input::placeholder,
.contact-card:not(.primary-contact) .form-field textarea::placeholder { color: var(--field-placeholder); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--bg) 12%, transparent);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, .18);
}
.form-fallback {
  position: relative;
  z-index: 2;
  margin: var(--space-5) auto 0;
  max-width: 38ch;
  text-align: center;
  color: #46546d;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-4);
  background: #ffffff;
  border: 1px solid rgba(11, 31, 59, .12);
  border-radius: 14px;
}
.form-fallback a { color: var(--link); font-weight: 700; }
.form-footnote {
  margin-top: var(--space-5);
  color: var(--on-dark-muted);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.contact-card:not(.primary-contact) .form-footnote { color: var(--muted); }
.form-status {
  min-height: 1.2em;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
}
.contact-details,
.contact-list {
  list-style: none;
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.contact-details li,
.contact-list li {
  display: grid;
  gap: .2rem;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
  color: var(--muted);
}
.contact-details strong,
.contact-list strong {
  color: var(--text);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-heading);
}
.contact-details a { color: var(--primary); font-weight: 700; }
.policy-layout {
  display: grid;
  grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
.policy-index {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-5));
  display: grid;
  gap: var(--space-3);
}
.policy-index a {
  color: var(--muted);
  font-size: var(--text-sm);
  text-decoration: none;
}
.policy-index a:hover { color: var(--text); }
.policy-content {
  display: grid;
  gap: var(--space-8);
}
.policy-content section {
  margin: 0;
  padding: 0 0 var(--space-7);
  border-bottom: 1px solid var(--line);
}
.policy-content section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.policy-content h2 {
  margin: 0 0 var(--space-4);
  color: var(--text);
  /* inherits unified H2 size/line-height/tracking from global h2 */
}
.policy-content p {
  margin: var(--space-4) 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.72;
}
.policy-content p:first-of-type { margin-top: 0; }
.policy-content a,
.hero-panel a {
  color: inherit;
  font-weight: 700;
}
.cta {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(var(--space-8), 6vw, var(--space-16));
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 92, 255, .30), transparent 18rem),
    radial-gradient(circle at 76% 22%, rgba(216, 222, 255, .14), transparent 20rem),
    linear-gradient(145deg, #071426 0%, #061F3D 58%, #182b55 100%);
  background-size: auto, auto, auto;
  border: 1px solid rgba(245, 243, 238, .14);
  box-shadow: 0 44px 130px rgba(11, 31, 59, .24);
  color: #f5f3ee;
}
.cta::before,
.cta::after {
  content: "";
  position: absolute;
  inset: 18% 28%;
  border: 1px solid rgba(245, 243, 238, .16);
  border-radius: 999px;
  transform: rotate(-12deg);
  pointer-events: none;
}
.cta::after {
  inset: 36% 18%;
  border-color: rgba(124, 92, 255, .34);
  transform: rotate(16deg);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #f5f3ee; }
.cta p { color: rgba(245, 243, 238, .76); }
.cta p { margin: var(--space-5) 0 var(--space-8); }

.page-solutions .hero-panel {
  background:
    radial-gradient(circle at 18% 10%, rgba(124, 92, 255, .16), transparent 16rem),
    radial-gradient(circle at 92% 92%, rgba(99, 102, 241, .14), transparent 18rem),
    var(--surface);
  background-size: auto, auto, auto;
}
.page-solutions .hero-panel::before {
  width: 70%;
  height: 1px;
  inset: auto 12% 31%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .54), transparent);
  transform: none;
}
.page-solutions .hero-panel::after {
  width: 15rem;
  right: 8%;
  bottom: 15%;
  border-radius: 32px;
  background:
    linear-gradient(145deg, rgba(99,102,241,.22), rgba(245,243,238,.58));
  background-size: auto;
  opacity: .44;
  transform: rotate(-3deg);
}
.page-solutions .map-grid {
  position: relative;
}
.page-solutions .map-grid::before {
  content: "";
  position: absolute;
  inset: 50% 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,243,238,.22), rgba(124,92,255,.42), transparent);
}
.page-solutions .map-tile {
  position: relative;
  min-height: 132px;
}
.page-solutions .path-step {
  grid-template-columns: 52px minmax(0, 1fr);
  background:
    linear-gradient(90deg, rgba(99,102,241,.08), transparent 42%),
    color-mix(in oklab, var(--surface) 86%, transparent);
}
.page-solutions .path-step b {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--system-violet), var(--system-indigo));
  box-shadow: 0 14px 32px rgba(99,102,241,.22);
}

.page-category .hero-panel::before {
  width: 78%;
  height: 34%;
  right: -4%;
  top: 20%;
  transform: rotate(-18deg);
}
.page-category .hero-panel::after {
  width: 13rem;
  right: 10%;
  bottom: 8%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.58), transparent 30%),
    linear-gradient(145deg, rgba(99,102,241,.68), rgba(11,31,59,.88));
  opacity: .13;
}
.page-category .node-field::before {
  inset: 10% 18%;
  transform: rotate(-10deg);
}
.page-category .node-field::after {
  width: 78%;
  height: 1px;
  transform: rotate(-18deg);
}
.page-category .compare-board {
  position: relative;
  padding-left: var(--space-5);
}
.page-category .compare-board::before {
  content: "";
  position: absolute;
  left: .4rem;
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(124,92,255,.72), transparent);
}
.page-category .compare-row,
.page-category .signal-row {
  grid-template-columns: 88px minmax(0, 1fr);
}

.page-case-study .hero-panel {
  background:
    radial-gradient(circle at 76% 12%, rgba(99,102,241,.16), transparent 16rem),
    radial-gradient(circle at 12% 92%, rgba(11,31,59,.06), transparent 18rem),
    var(--surface);
  background-size: auto, auto, auto;
}
.page-case-study .hero-panel::before {
  width: 86%;
  height: 1px;
  inset: auto 7% 26%;
  border: 0;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,.52), transparent);
  transform: none;
}
.page-case-study .case-quote {
  background:
    radial-gradient(circle at 12% 6%, rgba(124, 92, 255, .14), transparent 18rem),
    radial-gradient(circle at 92% 22%, rgba(99, 102, 241, .13), transparent 20rem),
    color-mix(in oklab, var(--surface) 92%, transparent);
}
.page-case-study .operating-flow {
  position: relative;
}
.page-case-study .operating-flow::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  top: 2.45rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,243,238,.24), rgba(124,92,255,.5), transparent);
}
.page-case-study .dark-band .flow-step {
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.055));
  border-color: rgba(255,255,255,.14);
}
.page-case-study .dark-band .flow-step b {
  background: linear-gradient(135deg, var(--system-violet), var(--system-indigo));
}
.page-case-study .dashboard-preview {
  position: relative;
}
.page-case-study .dashboard-preview::before {
  content: "";
  position: absolute;
  left: .65rem;
  top: .25rem;
  bottom: .25rem;
  width: 1px;
  background: linear-gradient(transparent, rgba(99,102,241,.5), transparent);
}
.page-case-study .dashboard-row {
  position: relative;
  padding-left: var(--space-6);
}
.page-case-study .dashboard-row::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: 1.25rem;
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  background: var(--system-violet);
  box-shadow: 0 0 0 5px rgba(124,92,255,.12);
}

.about-operating-visual {
  margin-top: var(--space-8);
}
.page-about .about-node-field::before {
  inset: 18% 8%;
  border-radius: 34px;
  transform: rotate(-4deg);
}
.page-about .about-node-field::after {
  width: 86%;
  height: 1px;
  transform: rotate(0deg);
}
.page-about .about-node-field .node-pill:nth-child(1) { top: 0; left: 6%; }
.page-about .about-node-field .node-pill:nth-child(2) { top: 30%; right: 0; }
.page-about .about-node-field .node-pill:nth-child(3) { bottom: 3%; left: 10%; }
.page-about .about-node-field .node-pill:nth-child(4) { bottom: 6%; right: 7%; }
.page-about .about-node-field .node-pill:nth-child(5) { top: 43%; left: 2%; }
.page-about .visual-card:first-child {
  background:
    radial-gradient(circle at 16% 12%, rgba(99,102,241,.12), transparent 16rem),
    radial-gradient(circle at 94% 28%, rgba(124,92,255,.13), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface-2) 82%, transparent));
}

.page-contact .primary-contact {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(124,92,255,.32), transparent 19rem),
    radial-gradient(circle at 84% 18%, rgba(216,222,255,.14), transparent 20rem),
    linear-gradient(145deg, #071426, #061F3D 60%, #182b55);
  background-size: auto, auto, auto;
}
.page-contact .primary-contact::before,
.page-contact .primary-contact::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(245,243,238,.14);
  border-radius: 999px;
}
.page-contact .primary-contact::before {
  inset: 8% 18% auto 28%;
  height: 13rem;
  transform: rotate(-12deg);
}
.page-contact .primary-contact::after {
  inset: auto 14% 12% 18%;
  height: 10rem;
  border-color: rgba(124,92,255,.32);
  transform: rotate(15deg);
}
.page-contact .primary-contact > * {
  position: relative;
  z-index: 1;
}
.page-contact .contact-card:not(.primary-contact) {
  background:
    radial-gradient(circle at 92% 4%, rgba(99,102,241,.12), transparent 16rem),
    var(--surface);
  background-size: auto, auto;
}

.page-leaders .leader-radar::before {
  inset: 0 6%;
  transform: rotate(-8deg);
}
.page-leaders .leader-radar::after {
  inset: 18% 20%;
  transform: rotate(14deg);
}
.page-leaders .leader-core {
  width: 168px;
  box-shadow: 0 30px 86px rgba(11, 31, 59, .28);
}
.page-leaders .visual-card:first-child {
  background:
    radial-gradient(circle at 50% 54%, rgba(124,92,255,.10), transparent 14rem),
    radial-gradient(circle at 92% 10%, rgba(99,102,241,.14), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface) 96%, transparent), color-mix(in oklab, var(--surface-2) 76%, transparent));
}

.page-careers .jobs-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 0%, rgba(99, 102, 241, .14), transparent 18rem),
    color-mix(in oklab, var(--surface) 90%, transparent);
  background-size: auto, auto;
}
.page-careers .jobs-panel::after {
  content: "";
  position: absolute;
  width: 38rem;
  height: 12rem;
  right: -8rem;
  top: 18%;
  border: 1px solid rgba(99,102,241,.14);
  border-radius: 999px;
  transform: rotate(-10deg);
  pointer-events: none;
}
.page-careers .jobs-panel > * {
  position: relative;
  z-index: 1;
}
.page-careers .career-flow .flow-step {
  min-height: 210px;
}
.page-careers .career-flow .flow-step:nth-child(2n) {
  transform: translateY(var(--space-4));
}
.page-careers .visual-card:first-child .signal-row {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.052));
}
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-10) 0 var(--space-8);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
.footer-brand {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: flex-start;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--line);
}
.footer-mark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
}
.footer-wordmark {
  width: min(240px, 74vw);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(11, 31, 59, .08));
}
[data-theme='dark'] .footer-wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 10px 24px rgba(0, 0, 0, .2));
}
.footer-brand-copy {
  display: grid;
  gap: var(--space-3);
  max-width: 620px;
}
.footer-brand p {
  color: var(--muted);
  font-size: var(--text-sm);
  max-width: 560px;
}
.footer-meta {
  color: var(--faint);
  font-size: var(--text-xs);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  justify-items: stretch;
}
.footer-column {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  padding: var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
}
.footer-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
}
.footer-column strong {
  color: var(--text);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.footer-column a:hover { color: var(--text); }
.tag,
.visual-kicker,
.flow-step span,
.map-node span,
.console-tabs span,
.console-card span,
.leader-node,
.node-pill,
.job-row a,
.job-note,
.footer-column strong {
  font-weight: var(--type-label-weight);
  letter-spacing: var(--tracking-label);
}
.list strong,
.hero-panel strong,
.card h3,
.visual-title,
.path-step strong,
.map-tile strong,
.leader-core,
.hub,
.flow-step strong,
.job-row strong,
.footer-mark {
  font-weight: var(--type-display-weight);
  letter-spacing: var(--tracking-heading);
}
/* CTA H2: slightly tighter line-height (1.06 vs global 1.08), intentional for short, dense CTA headlines */
.cta h2 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.018em;
}
.card p,
.card li,
.list li,
.visual-caption,
.compare-row span,
.signal-row span,
.path-step p,
.map-label,
.flow-step p,
.job-row span,
.job-note,
.cta p,
.footer-brand p,
.footer-column {
  line-height: var(--leading-body);
}
@media (max-width: 1024px) {
  .nav-inner { min-height: 66px; gap: var(--space-2); }
  .brand { min-width: 150px; }
  .brand-wordmark { width: clamp(146px, 22vw, 200px); }
  .nav-links { display: none; }
  .menu-dropdown { display: block; }
  .menu-dropdown summary { min-height: 40px; padding-inline: var(--space-3); }
  .menu-panel {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: 82px;
    width: auto;
    grid-template-columns: 1fr;
    max-height: calc(100vh - 108px);
    overflow: auto;
  }
  .menu-panel a { min-height: auto; }
  .nav-actions { gap: var(--space-2); }
  .nav-actions .button:not(.primary) { min-height: 40px; padding-inline: var(--space-4); }
  .nav-actions .button.primary { display: none; }
  @media (max-width: 640px) {
    .nav-inner { justify-content: start; gap: var(--space-2); }
    .brand { min-width: 0; margin-right: auto; }
    .brand-wordmark { width: clamp(148px, 42vw, 168px); }
    .nav-actions .button:not(.primary) { display: none; }
    .nav-actions .button.primary { display: inline-flex; }
    .theme { width: 40px; height: 40px; }
    .menu-dropdown summary { padding-inline: var(--space-4); }
  }
  .hero-copy,
  .grid,
  .grid.two,
  .split,
  .contact-layout,
  .policy-layout,
  .form-grid,
  .visual-system,
  .career-flow,
  .case-kpi-grid,
  .operating-flow,
  .dashboard-row,
  .footer-inner { grid-template-columns: 1fr; }
  .category-hero .hero-copy { grid-template-columns: 1fr; }
  /* Heading sizes now handled by unified clamp() in global rules; no override needed */
  .category-hero .hero-panel { padding: var(--space-5); }
  .footer-brand { flex-direction: column; gap: var(--space-5); }
  .policy-index { position: static; }
  .footer-column { width: 100%; }
  .footer-link-grid { grid-template-columns: 1fr; }
  .visual-card { min-height: auto; }
  .case-quote blockquote {
    gap: var(--space-3);
  }
  .case-quote blockquote p {
    font-size: 1.05rem;
    line-height: 1.34;
    letter-spacing: -.018em;
  }
  .node-field,
  .leader-radar { min-height: 260px; }
  .compare-row,
  .signal-row { grid-template-columns: 1fr; }
  .map-grid { grid-template-columns: 1fr; }
  .flow-step::after { display: none; }
  .jobs-panel-top,
  .job-row { grid-template-columns: 1fr; align-items: start; }
  .jobs-panel-top { display: grid; }
  .job-row a {
    justify-self: start;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .55rem .9rem;
    background: var(--surface);
  }
  .card.featured { grid-column: auto; }
  .footer-links { justify-content: flex-start; }
  .footer-columns { grid-template-columns: 1fr; justify-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* === Responsive safety net (added 2026-05) === */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, canvas, picture { max-width: 100%; height: auto; }

/* Tablet: 1024 and below */
@media (max-width: 1024px) {
  .nav-actions .button:not(.primary) { padding-inline: var(--space-3); }
  .nav-actions .button.primary { padding-inline: var(--space-4); font-size: .86rem; }
  .grid,
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Small tablet / large phone */
@media (max-width: 768px) {
  .container { width: min(1200px, calc(100% - 1.5rem)); }
  .grid,
  .grid.three,
  .grid.four { grid-template-columns: 1fr; }
  /* Heading sizes handled by unified clamp() in global rules; line-height/tracking tuned for small viewports below */
  .page-hero h1,
  .category-hero h1 { line-height: 1.04; letter-spacing: -.022em; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-columns { grid-template-columns: 1fr; }
  .footer-link-grid { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 640px) {
  .container { width: min(1200px, calc(100% - 1.25rem)); }
  .nav-actions .button:not(.primary) { display: none; }
  .hero-actions { gap: var(--space-2); }
  .hero-actions .button { width: 100%; justify-content: center; }
  .card { padding: var(--space-5); }
  .visual-card { padding: var(--space-5); }
  .case-kpi-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; align-items: stretch; }
  .hubspot-form-shell { border-radius: 20px; padding: var(--space-3); margin-top: var(--space-6); }
  .hubspot-form-shell::before { font-size: 11px; top: var(--space-3); left: var(--space-3); }
  .hubspot-form-shell .hs-form-frame { min-height: 600px; margin-top: var(--space-6); padding: var(--space-3); }
  .hubspot-form-shell iframe { min-height: 580px; }
  .contact-card { padding: var(--space-5); }
  .contact-details li, .contact-list li { padding-top: var(--space-3); }
}

/* Very small phones */
@media (max-width: 380px) {
  .container { width: min(1200px, calc(100% - 1rem)); }
  .brand-wordmark { width: clamp(132px, 42vw, 160px); }
  .button { padding: 0 .85rem; font-size: .85rem; }
  .menu-dropdown summary { padding-inline: var(--space-3); }
  /* h1 letter-spacing inherits from global, keeps display tracking consistent */
  .hubspot-form-shell { padding: 10px; border-radius: 18px; }
  .hubspot-form-shell::before { font-size: 10px; top: 10px; left: 12px; }
  .hubspot-form-shell .hs-form-frame { min-height: 640px; padding: 10px; border-radius: 14px; }
  .hubspot-form-shell iframe { min-height: 620px; }
  .page-contact .primary-contact::before,
  .page-contact .primary-contact::after { display: none; }
}

/* ===========================================================
   THEME OVERRIDES: dark-mode readability layer
   Rules that compensate for components whose colors were
   originally hardcoded against a light surface. Keep premium
   navy/violet identity; only re-tone surfaces and inverse text.
   =========================================================== */
html, body { transition: background-color .35s ease, color .35s ease; }
.nav, .button, .card, .visual-card, .footer-column, .menu-panel,
.path-step, .flow-step, .signal, .jobs-panel, .testimonial-card,
.solution-card, .contact-card, .case-quote, .case-kpi {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Light-on-dark surfaces need an explicit elevated contrast */
[data-theme='dark'] .card {
  background: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .card p,
[data-theme='dark'] .card li,
[data-theme='dark'] .card span:not(.tag):not(.eyebrow):not(.visual-kicker) {
  color: var(--muted);
}
[data-theme='dark'] .card h3,
[data-theme='dark'] .card strong { color: var(--text); }

[data-theme='dark'] .card.featured {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 92, 255, .28), transparent 20rem),
    color-mix(in oklab, var(--surface-2) 96%, transparent);
  color: var(--text);
  border-color: var(--line-strong);
}
[data-theme='dark'] .card.featured p,
[data-theme='dark'] .card.featured li { color: var(--muted); }

[data-theme='dark'] .hero-panel,
[data-theme='dark'] .page-solutions .hero-panel,
[data-theme='dark'] .page-case-study .hero-panel {
  background:
    radial-gradient(circle at 86% 10%, rgba(124, 92, 255, .26), transparent 17rem),
    color-mix(in oklab, var(--surface-elevated) 88%, transparent);
  background-size: auto, auto;
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .hero-panel strong { color: var(--text); }
[data-theme='dark'] .hero-panel span { color: var(--muted); }

[data-theme='dark'] .case-study-band {
  background:
    radial-gradient(circle at 88% 10%, rgba(124, 92, 255, .22), transparent 20rem),
    color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .case-quote {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 92, 255, .22), transparent 18rem),
    color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  background-size: auto, auto;
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .case-quote blockquote p { color: var(--text); }

[data-theme='dark'] .case-kpi {
  background: color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  color: var(--text);
  border-color: var(--line);
}
[data-theme='dark'] .case-kpi strong { color: var(--text); }
[data-theme='dark'] .case-kpi span { color: var(--muted); }

[data-theme='dark'] .case-study-band.dark .case-kpi {
  background: color-mix(in oklab, var(--bg) 78%, #ffffff);
  border-color: var(--on-dark-line);
}

[data-theme='dark'] .flow-step,
[data-theme='dark'] .path-step {
  background: color-mix(in oklab, var(--surface-elevated) 84%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .flow-step strong,
[data-theme='dark'] .path-step strong { color: var(--text); }
[data-theme='dark'] .flow-step span,
[data-theme='dark'] .flow-step p,
[data-theme='dark'] .path-step p { color: var(--muted); }
[data-theme='dark'] .operating-flow .flow-step span,
[data-theme='dark'] .dark-band .operating-flow .flow-step span {
  color: var(--muted);
}

[data-theme='dark'] .visual-card {
  background:
    radial-gradient(circle at 92% 8%, rgba(124, 92, 255, .22), transparent 17rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 92%, transparent), color-mix(in oklab, var(--surface-2) 76%, transparent));
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .visual-card h3,
[data-theme='dark'] .visual-title { color: var(--text); }
[data-theme='dark'] .visual-card p,
[data-theme='dark'] .visual-caption { color: var(--muted); }

[data-theme='dark'] .dark-band .visual-card:not(.dark) {
  background:
    radial-gradient(circle at 92% 8%, rgba(124, 92, 255, .22), transparent 17rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-2) 88%, transparent), color-mix(in oklab, var(--surface-elevated) 70%, transparent));
  color: var(--text);
}
[data-theme='dark'] .dark-band .visual-card:not(.dark) .path-step {
  background: color-mix(in oklab, var(--surface-elevated) 78%, transparent);
}

[data-theme='dark'] .signal,
[data-theme='dark'] .jobs-panel,
[data-theme='dark'] .contact-card:not(.primary-contact),
[data-theme='dark'] .page-contact .contact-card:not(.primary-contact),
[data-theme='dark'] .footer-column {
  background: color-mix(in oklab, var(--surface-elevated) 86%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .footer-column { color: var(--muted); }
[data-theme='dark'] .footer-column strong { color: var(--text); }
[data-theme='dark'] .footer-column a { color: var(--muted); }
[data-theme='dark'] .footer-column a:hover { color: var(--text); }

/* Forms inside dark-mode pages */
[data-theme='dark'] .form-field input,
[data-theme='dark'] .form-field select,
[data-theme='dark'] .form-field textarea {
  background: var(--field-bg);
  color: var(--field-text);
  border-color: var(--field-line);
}
[data-theme='dark'] .form-field input::placeholder,
[data-theme='dark'] .form-field textarea::placeholder { color: var(--field-placeholder); }
[data-theme='dark'] .form-field select option { color: #0b1d38; background: #fff; }

/* Inputs that are placed on intentionally-dark contact-card.primary-contact
   already use on-dark colors via existing rules; keep them. */

/* Buttons: non-primary buttons should pick up dark surface */
[data-theme='dark'] .button:not(.primary) {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-line);
}
[data-theme='dark'] .button:hover {
  border-color: var(--line-strong);
}

/* Tags / pills */
[data-theme='dark'] .tag,
[data-theme='dark'] .visual-kicker,
[data-theme='dark'] .eyebrow { color: var(--accent); }

/* Menu panel: when on a dark theme, surface should be elevated */
[data-theme='dark'] .menu-panel {
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .22), transparent 16rem),
    color-mix(in oklab, var(--surface-elevated) 96%, transparent);
  border-color: var(--line);
}
[data-theme='dark'] .menu-panel a {
  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .menu-panel a span { color: var(--muted); }

[data-theme='dark'] .menu-dropdown summary {
  background: color-mix(in oklab, var(--surface-elevated) 84%, transparent);
  color: var(--text);
  border-color: var(--line);
}

/* Nav theme button */
[data-theme='dark'] .theme {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-line);
}

/* Cards/featured that override to fixed --text color: these intentionally
   become dark in light mode; in dark mode they need to keep inverse readable. */
[data-theme='dark'] .card.featured { /* already set above */ }
[data-theme='dark'] .contact-card.primary-contact { /* intentionally remains dark, no override */ }

/* Job listings */
[data-theme='dark'] .job-row a {
  color: var(--link);
}
[data-theme='dark'] .job-row a:hover { color: var(--link-hover); }

/* Policy pages */
[data-theme='dark'] .policy-index a { color: var(--muted); }
[data-theme='dark'] .policy-index a:hover { color: var(--text); }
[data-theme='dark'] .policy-content h2 { color: var(--text); }
[data-theme='dark'] .policy-content p { color: var(--muted); }

/* Compare / signal rows live on dark panels, keep but make sure colors stay correct */
[data-theme='dark'] .compare-row,
[data-theme='dark'] .signal-row,
[data-theme='dark'] .map-tile {
  border-color: var(--on-dark-line);
}

/* HubSpot shell: already dark in both themes; no change required */

/* ===========================================================
   Page-scoped dark overrides (higher-specificity rescues so
   page-specific selectors don't beat the global dark layer).
   =========================================================== */

/* Careers: page-careers .jobs-panel has its own light-mode background */
[data-theme='dark'] .page-careers .jobs-panel {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 92, 255, .18), transparent 18rem),
    color-mix(in oklab, var(--surface-elevated) 88%, transparent);
  background-size: auto, auto;
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .page-careers .career-flow .flow-step {
  background:
    radial-gradient(circle at 85% 4%, rgba(124, 92, 255, .14), transparent 12rem),
    color-mix(in oklab, var(--surface-elevated) 86%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .page-careers .visual-card:first-child .signal-row {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border-color: var(--on-dark-line);
}

/* Solutions: page-solutions hero-panel + path-step have light-mode bg */
[data-theme='dark'] .page-solutions .hero-panel {
  background:
    radial-gradient(circle at 18% 10%, rgba(124, 92, 255, .22), transparent 16rem),
    radial-gradient(circle at 92% 92%, rgba(99, 102, 241, .18), transparent 18rem),
    color-mix(in oklab, var(--surface-elevated) 90%, transparent);
  background-size: auto, auto, auto;
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .page-solutions .path-step {
  background:
    linear-gradient(90deg, rgba(124, 92, 255, .10), transparent 42%),
    color-mix(in oklab, var(--surface-elevated) 84%, transparent);
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .solution-card {
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .16), transparent 11rem),
    color-mix(in oklab, var(--surface-elevated) 88%, transparent);
  background-size: auto, auto;
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
[data-theme='dark'] .solution-card h3 { color: var(--text); }
[data-theme='dark'] .solution-card p { color: var(--muted); }

/* Case study: page-case-study scoped overrides */
[data-theme='dark'] .page-case-study .hero-panel {
  background:
    radial-gradient(circle at 76% 12%, rgba(124, 92, 255, .22), transparent 16rem),
    radial-gradient(circle at 12% 92%, rgba(124, 92, 255, .10), transparent 18rem),
    color-mix(in oklab, var(--surface-elevated) 90%, transparent);
  background-size: auto, auto, auto;
  border-color: var(--line);
  color: var(--text);
}
[data-theme='dark'] .page-case-study .case-quote {
  background:
    radial-gradient(circle at 12% 6%, rgba(124, 92, 255, .18), transparent 18rem),
    radial-gradient(circle at 92% 22%, rgba(99, 102, 241, .14), transparent 20rem),
    color-mix(in oklab, var(--surface-elevated) 92%, transparent);
  border-color: var(--line);
  color: var(--text);
}

/* About: page-about visual-card backgrounds */
[data-theme='dark'] .page-about .visual-card:first-child {
  background:
    radial-gradient(circle at 16% 12%, rgba(124, 92, 255, .14), transparent 16rem),
    radial-gradient(circle at 94% 28%, rgba(124, 92, 255, .18), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 92%, transparent), color-mix(in oklab, var(--surface-2) 72%, transparent));
  color: var(--text);
}

/* Leaders: page-leaders visual-card */
[data-theme='dark'] .page-leaders .visual-card:first-child {
  background:
    radial-gradient(circle at 50% 54%, rgba(124, 92, 255, .12), transparent 14rem),
    radial-gradient(circle at 92% 10%, rgba(99, 102, 241, .18), transparent 18rem),
    linear-gradient(145deg, color-mix(in oklab, var(--surface-elevated) 92%, transparent), color-mix(in oklab, var(--surface-2) 72%, transparent));
  color: var(--text);
}

/* Category: page-category hero-panel after pseudo (light gradient) */
[data-theme='dark'] .page-category .hero-panel::after {
  background:
    radial-gradient(circle at 30% 22%, rgba(245, 248, 255, .12), transparent 30%),
    linear-gradient(145deg, rgba(99, 102, 241, .48), rgba(11, 31, 59, .92));
  opacity: .22;
}

/* Form labels on intentionally-dark contact-card.primary-contact already
   use light on-dark colors. Keep behaviour. */

/* Logo pills on light-mode-only contexts: in dark mode {
  background: linear-gradient(135deg, rgba(245, 248, 255, .94), rgba(228, 232, 252, .88));
  color: #061F3D;
  border-color: rgba(245, 248, 255, .28);
}

/* Tag pill inside dark-band cards (light visual-card) */
[data-theme='dark'] .dark-band .card:not(.featured) .tag {
  color: var(--accent);
}

/* Section heading muted text in dark mode */
[data-theme='dark'] .section-head p { color: var(--muted); }
[data-theme='dark'] .section-head h2 { color: var(--text); }

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Accessibility: explicit color-scheme for native UI */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}

/* =========================================================================
   Enterprise Polish (2026-05-26)
   Refines H1/H2 typographic scale, image presentation, and brand palette
   alignment so the site reads as a polished enterprise property at every
   breakpoint. Lives at end of file so cascade wins without raising
   specificity. No structural HTML changes required.
   ========================================================================= */

/* Brand tokens: align fluid type and accent values to the approved palette.
   The existing #061F3D deep navy is preserved; we standardize the bright
   indigo accent to #6C4DFF and introduce neutrals from the brand spec. */
:root,
[data-theme='light'] {
  --st-navy: #061F3D;
  --st-indigo: #6C4DFF;
  --st-indigo-soft: #E9E7FF;
  --st-slate: #5E6A7D;
  --st-offwhite: #F4F5F8;

  /* Enterprise heading scale: confident but not cartoonish.
     Hero H1 caps at ~4.5rem on desktop, scales smoothly down. */
  --text-hero: clamp(2.75rem, 1.6rem + 2.6vw, 4.5rem);
  --text-hero-sub: clamp(2.4rem, 1.4rem + 2.2vw, 3.85rem);
  --text-h2:   clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  --text-h3:   clamp(1.25rem, 1.05rem + .7vw, 1.6rem);

  --leading-hero: 1.04;
  --leading-h2: 1.14;
  --tracking-hero: -.024em;
  --tracking-h2: -.016em;
}

/* Global heading rules: enterprise-refined, applied as the last layer so
   per-page selectors can still opt into something stronger if needed. */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  max-width: 22ch;
  text-wrap: balance;
  color: var(--text);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  max-width: 32ch;
  text-wrap: balance;
  color: var(--text);
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.22;
  letter-spacing: -.012em;
}

/* Section rhythm: predictable vertical spacing between H2 blocks. */
section + section > .container > h2:first-child,
section > .container > .section-head > h2 {
  margin-top: 0;
}

/* --- Hero H1 (home): refine the previously oversized 5.55rem display.
   Keeps the brand split-card layout but tones the type down to
   enterprise-appropriate weight, leading {
  font-size: clamp(2.4rem, 1.3rem + 2.4vw, 3.85rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 700;
  max-width: 24ch;
  color: var(--st-navy);
  text-wrap: balance;
}

/* Tighten the hero split grid so the right-side visual aligns to the
   text grid with intentional whitespace at every breakpoint. Panel
   height capped at a 16:10-ish enterprise hero aspect {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(var(--space-4), 2vw, var(--space-6));
  align-items: stretch;
}

/* Per-page H1: ensure pages with the page-hero treatment share the same
   refined display scale and color. */
.page-hero h1,
.category-hero h1,
.hero h1 {
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  font-weight: 600;
  max-width: 22ch;
  color: var(--text);
}

/* Mobile: stack the hero cleanly and recalibrate the H1 so it never
   feels cramped on small screens. */
@media (max-width: 900px) {
}
@media (max-width: 640px) {
  h2 { max-width: 100%; }
}

/* =========================================================================
   Global image system
   Reusable presentation rules for hero/section/card imagery so every page
   inherits consistent radius, aspect-ratio, object-fit, and responsive
   behavior. Pages can opt-in via class; the base img rule below also
   sets sensible defaults for any unclassed <img>.
   ========================================================================= */
img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Wrapper for hero/section imagery with consistent framing. */
.media,
.media-frame {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--st-offwhite);
  box-shadow: 0 28px 80px rgba(11, 31, 59, .10);
}
.media > img,
.media > video,
.media > picture > img,
.media-frame > img,
.media-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero-scale media: wider-than-tall, enterprise crop, never letterboxes
   awkwardly on mobile. */
.media--hero { aspect-ratio: 16 / 10; }
@media (max-width: 768px) { .media--hero { aspect-ratio: 4 / 3; } }

/* Section media: balanced rectangle for content rows. */
.media--section { aspect-ratio: 3 / 2; }
@media (max-width: 768px) { .media--section { aspect-ratio: 4 / 3; } }

/* Card media: square-ish thumb so card heights line up across a row. */
.media--card { aspect-ratio: 5 / 4; border-radius: var(--radius-sm); }

/* Portrait/people media: keeps faces well-positioned. */
.media--portrait { aspect-ratio: 4 / 5; object-position: center top; }
.media--portrait > img { object-position: center top; }

/* Logo media: contain (don't crop) and never stretch. */
.media--logo, .testimonial-logo, .brand-wordmark, .footer-wordmark { object-fit: contain; }

/* Honor reduced motion for any decorative img transitions. */
@media (prefers-reduced-motion: reduce) {
  .media, .media-frame { transition: none; }
}

/* =========================================================================
   Premium Refinement Layer (2026-05-26)

   Quiets the AI/SaaS-template signals across the site: theatrical orbits,
   gradient blobs, glowing pills, halos, multi-color warm body washes.
   Replaces them with restrained governance/operating-infrastructure
   surfaces: navy + off-white, single thin lavender accent lines, real
   typographic hierarchy, sharper grids, and quieter shadows.

   Lives at end of cascade so it can land non-destructively over the
   layered inline styles in individual pages. Uses higher specificity
   (body.page-X chains) where it needs to defeat per-page inline blocks.
   ========================================================================= */

/* ---- 1. Body wash: drop the warm orange + multi-color gradients.
   Keep ONE quiet lavender wash at the top right so the page still has
   a subtle brand-aligned glow without screaming SaaS template. -------- */
body {
  background:
    radial-gradient(circle at 92% -8%, rgba(108, 77, 255, .085), transparent 36rem),
    linear-gradient(180deg, #ffffff 0%, var(--st-offwhite, #F4F5F8) 100%) !important;
}
[data-theme='dark'] body {
  background:
    radial-gradient(circle at 92% -8%, rgba(108, 77, 255, .14), transparent 36rem),
    linear-gradient(180deg, #060f24 0%, #0a162d 100%) !important;
}

/* ---- 2. Home hero section: drop the orange-cream-blue triple wash that
   index.html paints on .hero. Replace with a clean off-
   white panel + a single lavender vertical hairline. ------------------ */
.hero {
  background:
    linear-gradient(180deg, #ffffff 0%, var(--st-offwhite, #F4F5F8) 100%) !important;
  border-top: 1px solid rgba(6, 31, 61, .06);
}

/* ---- 3. Home hero split: turn the left card into a flat editorial
   surface (no card-on-card sticker look), keep the right as a navy
   governance panel but kill orbit rings, blur, halo {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: clamp(var(--space-4), 3vw, var(--space-8)) !important;
}

/* Right panel: keep navy {
  border: 1px solid rgba(108, 77, 255, .18) !important;
  background:
    linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
  background-size: auto !important;
  box-shadow: 0 24px 60px rgba(6, 31, 61, .14) !important;
}

/* Quiet the visual: kill orbits, halo, pulse animations */
.st-infra-visual {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.st-infra-visual::before,
.st-infra-visual::after { display: none !important; }

.st-infra-node {
  animation: none !important;
  backdrop-filter: none !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  color: rgba(245, 248, 255, .78) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: .68rem !important;
  padding: .42rem .65rem !important;
}

/* Replace the giant gradient core circle with a flat governance card */
.st-infra-core {
  width: clamp(220px, 32vw, 300px) !important;
  aspect-ratio: auto !important;
  height: auto !important;
  padding: clamp(var(--space-5), 2.2vw, var(--space-6)) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(108, 77, 255, .28) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 50px rgba(0,0,0,.20) !important;
  font-size: clamp(.95rem, .82rem + .35vw, 1.12rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
  text-align: left !important;
}
.st-infra-core::before {
  content: "Operating layer";
  display: block;
  margin-bottom: var(--space-3);
  color: #c8baff;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Quiet the connector lines */
.st-infra-line {
  animation: none !important;
  opacity: .28 !important;
  background: linear-gradient(90deg, transparent, rgba(201, 188, 255, .42), transparent) !important;
}

/* ---- 4. Buttons: drop the violet drop-shadow glow. Solid, confident. */
.button.primary, .sequoia-hero-actions .button.primary, .final .button.primary {
  background: var(--st-indigo, #6C4DFF) !important;
  border-color: var(--st-indigo, #6C4DFF) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}
.button.primary:hover {
  background: #5b3df0 !important;
  border-color: #5b3df0 !important;
  box-shadow: 0 6px 18px rgba(108, 77, 255, .22) !important;
}
.button:not(.primary) {
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* ---- 6. Solutions hero dark panel: drop orbits + pill stickers.
   Keep the navy panel, render the workforce labels as a clean
   left-aligned governance list inside the card. ----------------------- */
.page-solutions .solutions-visual {
  background:
    linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
  background-size: auto !important;
  border-color: rgba(108, 77, 255, .18) !important;
  box-shadow: 0 24px 60px rgba(6, 31, 61, .14) !important;
}
.page-solutions .solutions-visual::before,
.page-solutions .solutions-visual::after,
.page-solutions .solution-orbit { display: none !important; }

.page-solutions .solution-pill {
  position: static !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: .8rem 0 .8rem 1.05rem !important;
  border: 0 !important;
  border-left: 2px solid rgba(108, 77, 255, .42) !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  color: rgba(245, 248, 255, .82) !important;
  text-align: left !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}
.page-solutions .solutions-visual {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  padding: clamp(var(--space-6), 3vw, var(--space-8)) clamp(var(--space-6), 3vw, var(--space-8)) !important;
  gap: var(--space-2) !important;
}
.page-solutions .solution-core {
  position: static !important;
  width: auto !important;
  aspect-ratio: auto !important;
  margin: 0 0 var(--space-4) 0 !important;
  padding: 0 0 var(--space-4) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  color: #ffffff !important;
}
.page-solutions .solution-core::before {
  content: "Operating layer";
  display: block;
  margin-bottom: var(--space-2);
  color: #c8baff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-solutions .solution-core strong {
  font-size: clamp(1.4rem, 1.05rem + 1vw, 2rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.018em !important;
  color: #ffffff !important;
}

/* ---- 7. Candidate Review system panel: drop animated orbits. ------- */
.page-candidate-review .candidate-system {
  background:
    linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
  background-size: auto !important;
  border-color: rgba(108, 77, 255, .18) !important;
  box-shadow: 0 24px 60px rgba(6, 31, 61, .14) !important;
}

/* ---- 8. About / Contact / Leaders side panels: quiet the glow halos
   and giant blob backgrounds. ---------------------------------------- */
.page-about .about-hero-panel,
.page-contact .contact-hero-panel,
.page-leaders .hero-panel,
.page-careers .hero-panel,
.page-case-study .hero-panel {
  border: 1px solid rgba(108, 77, 255, .18) !important;
  background: linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
  box-shadow: 0 24px 60px rgba(6, 31, 61, .14) !important;
  color: #ffffff !important;
}
.page-about .about-hero-panel::before,
.page-about .about-hero-panel::after,
.page-contact .contact-hero-panel::before,
.page-contact .contact-hero-panel::after { display: none !important; }
.page-careers .hero-panel,
.page-leaders .hero-panel,
.page-case-study .hero-panel {
  padding: clamp(var(--space-6), 3vw, var(--space-8)) !important;
}
.page-careers .hero-panel strong,
.page-leaders .hero-panel strong,
.page-case-study .hero-panel strong {
  color: #ffffff !important;
}
.page-careers .hero-panel span,
.page-leaders .hero-panel span,
.page-case-study .hero-panel span {
  color: rgba(245, 248, 255, .72) !important;
}

/* About hero proof badges: drop the white sticker treatment. Render as
   a clean horizontal divider list. */
.about-hero-proof span {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 var(--space-3) 0 0 !important;
  border-right: 1px solid rgba(6, 31, 61, .14) !important;
  min-height: auto !important;
  color: rgba(6, 31, 61, .66) !important;
  font-size: .68rem !important;
  letter-spacing: .12em !important;
}
.about-hero-proof span:last-child {
  border-right: 0 !important;
  padding-right: 0 !important;
}

/* ---- 9. TalentOS hero system panel: keep the dashboard but quiet the
   surrounding navy panel to match the new governance treatment. ------ */
.talentos-hero .talentos-system,
.page-talent-os .talentos-system {
  border-color: rgba(108, 77, 255, .18) !important;
  box-shadow: 0 24px 60px rgba(6, 31, 61, .14) !important;
}

/* ---- 10. Section rhythm: predictable vertical spacing for every
   section so the page reads as a cadenced editorial document, not a
   stack of templated cards. ------------------------------------------ */
main > section,
main > header + section,
.solutions-section,
.about-section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.section-head {
  max-width: 70ch;
}
.section-head .eyebrow,
.eyebrow {
  color: var(--st-indigo, #6C4DFF) !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: .72rem !important;
  margin-bottom: var(--space-3) !important;
}

/* ---- 11. Generic card decoration restraint: kill the heaviest
   shadows + multi-radial gradients on the most-reused card patterns. - */
.card,
.solution-card,
.proof-card {
  box-shadow: 0 1px 0 rgba(6, 31, 61, .05), 0 14px 40px rgba(6, 31, 61, .055) !important;
}

/* ---- 12. Focus / link styling so accents stay disciplined. -------- */
a:not(.button):hover { color: var(--st-indigo, #6C4DFF); }

/* ---- 13. Reduced motion: belt and suspenders on the decorative
   animations we just neutralized. ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .st-infra-node,
  .st-infra-line,
  .st-infra-visual::before,
  .st-infra-visual::after { animation: none !important; }
}

/* ---- 14. Mobile recalibration: keep the new restraint at small
   widths so the navy panel doesn't tower over short copy. ------------ */
@media (max-width: 900px) {
  .page-solutions .solutions-visual { min-height: 320px !important; }
}

/* =========================================================================
   Hero Panel Containment (2026-05-26 fix pass)

   After the Premium Refinement Layer landed, post-deploy QA showed the
   home and solutions navy panels extending past the viewport on desktop
   because absolute-positioned children (st-infra-node, st-infra-core, solution-pill, solution-core) still carried left/right offsets and
   transform: translate(-50%, -50%) from earlier inline styles. The
   Premium Layer's flex/static overrides were not consistently winning
   against the inline <style> blocks on every browser due to cascade
   ordering on selectors that tied on specificity.

   Strategy: force the home and solutions panels to deterministic
   flex/grid layouts where every child is in normal flow. No absolute
   positioning on content. Constrain grid tracks with minmax(0, 1fr)
   so columns can shrink {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body .st-infra-visual {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(var(--space-4), 2vw, var(--space-6)) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
}

/* Nodes: out of absolute positioning {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto auto !important;
  grid-auto-flow: row !important;
  align-content: start !important;
}
html body .st-infra-node {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  animation: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  width: 100% !important;
  padding: .55rem .75rem !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(245, 248, 255, .82) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .st-infra-node::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--st-indigo, #6C4DFF);
  box-shadow: 0 0 0 3px rgba(108, 77, 255, .14);
}

/* Connector lines: visually gone, but kept in flow as zero-size */
html body .st-infra-line {
  display: none !important;
}

/* Core "Workforce infrastructure" card: full-width flat card spanning
   both columns under the 2x2 node grid. */
html body .st-infra-core {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: clamp(var(--space-5), 2.4vw, var(--space-6)) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(108, 77, 255, .28) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  text-align: left !important;
  color: #ffffff !important;
  font-size: clamp(1rem, .85rem + .5vw, 1.2rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.012em !important;
  display: block !important;
}

/* ----- Solutions: same containment treatment. Render the visual as a
   deterministic flex column inside the column track. ------------------- */
html body .page-solutions .solutions-hero-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
html body .page-solutions .solutions-copy,
html body .page-solutions .solutions-visual {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .page-solutions .solutions-visual {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  padding: clamp(var(--space-6), 3vw, var(--space-8)) !important;
  aspect-ratio: auto !important;
}

/* Center "One accountable workforce layer" card: render as a normal
   block at the top of the panel, full width, left aligned. */
html body .page-solutions .solution-core {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: auto !important;
  margin: 0 0 var(--space-5) 0 !important;
  padding: 0 0 var(--space-5) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  place-items: initial !important;
  text-align: left !important;
  color: #ffffff !important;
}
html body .page-solutions .solution-core strong {
  display: block !important;
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
  color: #ffffff !important;
}

/* Solution pills: vertical governance list inside the panel */
html body .page-solutions .solution-pill {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: .65rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: .7rem 0 .7rem 1rem !important;
  border: 0 !important;
  border-left: 2px solid rgba(108, 77, 255, .42) !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  color: rgba(245, 248, 255, .85) !important;
  text-align: left !important;
  text-transform: uppercase !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body .page-solutions .solution-orbit { display: none !important; }

/* Tighten panel min-height on home + solutions: now that content is in
   flow {
  min-height: clamp(380px, 36vw, 480px) !important;
  max-height: clamp(440px, 42vw, 540px) !important;
}

/* Belt + suspenders: hero containers cannot overflow horizontally */
html body header.hero,
html body header.solutions-hero { overflow-x: clip; }

/* Solutions panel reading order: headline above the capabilities so the
   panel reads "One accountable workforce layer" -> 5 capability rails. */
html body .page-solutions .solution-core { order: -1 !important; }

/* =========================================================================
   Hero top breathing room + final solutions rebuild (2026-05-26 part 3)
   ========================================================================= */

/* Home hero: more top breathing room so the H1 isn't crowded by the
   sticky nav. Target ~4.5rem desktop, ~2rem mobile. */
html body .hero {
  padding-top: clamp(2rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}

/* Solutions hero: ensure clean top padding and that the rebuilt panel
   (now driven entirely by the inline <style> rewrite) doesn't collide
   with any earlier site.css overrides. */
html body.page-solutions .solutions-hero {
  padding-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}
html body.page-solutions .solutions-visual {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* =========================================================================
   Premium Pass 3 (2026-05-26): below-the-fold + conversion flow

   Refines lower-page surfaces site-wide so the whole document reads as
   premium enterprise governance, not a templated SaaS landing page.
   Focus is on the most-reused patterns: generic cards, final CTA,
   testimonials, footer columns, proof stats, section heads. Brand
   palette and prior hero/H1 fixes are preserved.
   ========================================================================= */

/* ---- 1. Generic cards: strip the peach + indigo radial washes that
   were the strongest "AI SaaS template" signal on every grid. Replace
   with a flat surface + a single 1px hairline accent at the top. ----- */
html body .card,
html body .solution-card,
html body .proof-card,
html body .testimonial-card {
  background: #ffffff !important;
  border: 1px solid rgba(6, 31, 61, .08) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(6, 31, 61, .04), 0 14px 38px rgba(6, 31, 61, .055) !important;
  overflow: hidden !important;
  position: relative !important;
}
html body .card::after,
html body .solution-card::after,
html body .testimonial-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--st-indigo, #6C4DFF) 28%, var(--st-indigo, #6C4DFF) 72%, transparent) !important;
  opacity: .42 !important;
  pointer-events: none !important;
  display: block !important;
}
[data-theme='dark'] body .card,
[data-theme='dark'] body .solution-card,
[data-theme='dark'] body .proof-card,
[data-theme='dark'] body .testimonial-card {
  background: #0e1f3b !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

/* ---- 2. Section heads: drop the decorative gradient under-line on
   .section-head::after, replace with a clean indigo eyebrow style.
   The eyebrow already exists; just neutralize the legacy decoration. - */
html body .section-head::after {
  background: rgba(6, 31, 61, .08) !important;
  width: 64px !important;
  height: 1px !important;
  opacity: .8 !important;
}
html body .section-head { gap: var(--space-3) !important; }

/* ---- 3. Final CTA panel: kill the rotating decorative rings,
   3 radial blobs, and 130px theatrical shadow. Replace with a quiet
   navy panel + a single indigo accent at the top. -------------------- */
html body .final .cta {
  background:
    linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
  background-size: auto !important;
  border: 1px solid rgba(108, 77, 255, .22) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(6, 31, 61, .14) !important;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4rem) !important;
}
html body .final .cta::before,
html body .final .cta::after { display: none !important; }
html body .final {
  padding-block: clamp(3rem, 6vw, 5.5rem) !important;
}
html body .final h2 {
  max-width: 22ch !important;
  margin-inline: auto !important;
  color: #ffffff !important;
}
html body .final p {
  color: rgba(245, 248, 255, .76) !important;
  max-width: 60ch !important;
}
html body .final .button.primary {
  background: var(--st-indigo, #6C4DFF) !important;
  border-color: var(--st-indigo, #6C4DFF) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  padding: .85rem 1.4rem !important;
}
html body .final .button.primary:hover {
  background: #5b3df0 !important;
  border-color: #5b3df0 !important;
  box-shadow: 0 6px 18px rgba(108, 77, 255, .22) !important;
}

/* ---- 4. Testimonial cards: flat surface, vertical indigo rail
   instead of the radial purple glow. Tighter blockquote. ----------- */
html body .testimonial-card {
  padding: clamp(var(--space-5), 2.2vw, var(--space-7)) !important;
  background: #ffffff !important;
}
html body .testimonial-card::before {
  content: "" !important;
  position: absolute !important;
  top: clamp(var(--space-5), 2vw, var(--space-6)) !important;
  bottom: clamp(var(--space-5), 2vw, var(--space-6)) !important;
  left: 0 !important;
  width: 2px !important;
  background: var(--st-indigo, #6C4DFF) !important;
  opacity: .5 !important;
}
html body .testimonial-card::after { display: none !important; }
html body .testimonial-card blockquote {
  color: var(--st-navy, #061F3D) !important;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem) !important;
  line-height: 1.4 !important;
  letter-spacing: -.012em !important;
  font-weight: 500 !important;
}
html body .testimonial-card footer {
  margin-top: var(--space-5) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid rgba(6, 31, 61, .08) !important;
  color: var(--st-slate, #5E6A7D) !important;
}
html body .testimonial-card footer strong {
  color: var(--st-navy, #061F3D) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
}
html body .testimonial-logo {
  max-height: 26px !important;
  mix-blend-mode: normal !important;
  filter: saturate(.85) !important;
}

/* ---- 5. Footer columns: drop the bordered/rounded sticker boxes.
   Render as flat editorial groups with a thin top divider. ---------- */
html body .site-footer {
  background: linear-gradient(180deg, transparent, var(--st-offwhite, #F4F5F8)) !important;
  border-top: 1px solid rgba(6, 31, 61, .08) !important;
  padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem) !important;
}
html body .footer-column {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-top: 1px solid rgba(6, 31, 61, .08) !important;
  padding-top: var(--space-5) !important;
}
html body .footer-column strong {
  display: block !important;
  margin-bottom: var(--space-2) !important;
  color: var(--st-navy, #061F3D) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: .82rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
html body .footer-link-grid a {
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  transition: color .18s ease !important;
}
html body .footer-link-grid a:hover {
  color: var(--st-indigo, #6C4DFF) !important;
}
html body .footer-brand {
  padding-bottom: var(--space-6) !important;
  border-bottom: 1px solid rgba(6, 31, 61, .08) !important;
}
html body .footer-wordmark { filter: none !important; }
[data-theme='dark'] body .footer-column { border-top-color: rgba(255,255,255,.08) !important; }
[data-theme='dark'] body .footer-column strong { color: #ffffff !important; }

/* ---- 6. Proof stat refinements: confident metric scale, navy text,
   thin lavender divider. -------------------------------------------- */
html body .proof-stat strong {
  font-size: clamp(1.7rem, 1.25rem + 1.2vw, 2.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.022em !important;
  color: var(--st-navy, #061F3D) !important;
  line-height: 1 !important;
}
html body .proof-stat span {
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  margin-top: .5rem !important;
  display: block !important;
}
html body .proof-stat {
  border-left-color: rgba(6, 31, 61, .12) !important;
  padding-left: clamp(var(--space-4), 2vw, var(--space-5)) !important;
}

/* ---- 8. Section rhythm: every <section> below the hero gets a
   predictable padding block so the document reads as a cadenced
   editorial flow. ---------------------------------------------------- */
html body main > section { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Eyebrow on every page is the same indigo cap */
html body .eyebrow {
  color: var(--st-indigo, #6C4DFF) !important;
  font-weight: 600 !important;
  font-size: .72rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-bottom: var(--space-3) !important;
}

/* ---- 9. Buttons in any below-the-fold CTA: same disciplined look. - */
html body main > section .button.primary,
html body .final .button.primary {
  background: var(--st-indigo, #6C4DFF) !important;
  border-color: var(--st-indigo, #6C4DFF) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: .85rem 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -.005em !important;
}
html body main > section .button.primary:hover {
  background: #5b3df0 !important;
  border-color: #5b3df0 !important;
  box-shadow: 0 6px 18px rgba(108, 77, 255, .22) !important;
}

/* ---- 10. Cap shadow intensity across the site. Nothing below the
   hero gets a 100px+ theatrical shadow. ----------------------------- */
html body .card,
html body .solution-card,
html body .proof-card,
html body .testimonial-card,
html body .visual-card,
html body .case-quote,
html body .case-kpi,
html body .contact-card {
  box-shadow: 0 1px 0 rgba(6, 31, 61, .04), 0 14px 38px rgba(6, 31, 61, .055) !important;
}

/* ---- 11. Grid spacing: tighten gaps so cards sit shoulder-to-shoulder
   like a governance table, not a sparse SaaS dashboard. ------------- */
html body .grid,
html body .grid.three,
html body .grid.four,
html body .grid-2,
html body .grid-3,
html body .solution-cards {
  gap: var(--space-4) !important;
}

/* ---- 12. Section head H2 spacing: ensure the H2 always has the
   premium scale set in PR #5/#6 (clamp 1.75-2.5rem) and a calm
   line-height for editorial readability. ---------------------------- */
html body .section-head h2,
html body section h2 {
  letter-spacing: -.018em !important;
}

/* ---- 13. Reduce decorative pseudo-elements anywhere we missed. --- */
html body .card::before,
html body .solution-card::before,
html body .proof-card::before {
  display: none !important;
}

/* ---- 14. Mobile: ensure the new card top-accent doesn't crowd
   content; testimonial rail stays. --------------------------------- */
@media (max-width: 640px) {
  html body .card,
  html body .solution-card,
  html body .testimonial-card { padding: var(--space-5) !important; }
  html body .footer-columns { gap: var(--space-6) !important; }
  html body .final .cta { padding: clamp(2rem, 6vw, 2.75rem) !important; }
}

/* =========================================================================
   Premium Pass 4 (2026-05-26): conversion flow refinement

   Targets the highest-leverage remaining template/generic patterns
   surfaced by the browser audit:
   - HubSpot placeholder copy suppression
   - Home logo bar + stats row weight upgrade
   - Closing CTA asymmetric layout
   - Solutions "4 ways" listicle -> governance table
   - Solutions Before/After/Stack/Result -> progression list
   - TalentOS stakeholder grid -> 2-column editorial table
   - Careers role grid -> 1-feature + 2x2 asymmetric
   - Contact proof chips -> proof numbers row
   - Eyebrow hierarchy: 2 weights
   ========================================================================= */

/* ---- 1. HubSpot form: suppress the "We'd love to hear from you!"
   placeholder copy that lives inside the embedded HubSpot rich-text
   block. Form fields remain visible. -------------------------------- */
html body .hs-form-frame .hs-richtext,
html body .hubspot-form-shell .hs-richtext {
  display: none !important;
}
/* If HubSpot wraps the intro in any of these legacy class names */
html body .hubspot-form-shell .hs-richtext.legal-consent-container,
html body .hubspot-form-shell .legal-consent-container.hs-richtext { display: revert !important; }

/* ---- 2. Home customer logo bar: enterprise framing. Larger logos at
   desktop, stronger label {
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* ---- 4. Closing CTA: asymmetric editorial layout. Eyebrow + headline
   on the left, support copy + CTA on the right. Less centered-template. */
html body .final .cta {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  align-items: center !important;
  text-align: left !important;
}
html body .final .cta .eyebrow {
  color: #c8baff !important;
  margin-bottom: var(--space-3) !important;
}
html body .final .cta h2 {
  margin: 0 !important;
  max-width: 18ch !important;
  text-align: left !important;
  color: #ffffff !important;
}
html body .final .cta > p,
html body .final .cta .about-next-copy {
  margin: 0 0 var(--space-5) 0 !important;
  max-width: 56ch !important;
  text-align: left !important;
  color: rgba(245, 248, 255, .78) !important;
}
html body .final .cta .button {
  width: auto !important;
  display: inline-flex !important;
}
@media (max-width: 760px) {
  html body .final .cta {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }
  html body .final .cta h2 { max-width: 22ch !important; }
}

/* ---- 5. Solutions "Four ways contractor programs break" -> a quiet
   numbered governance table. Replaces the equal 4-card grid with a
   single-column list, each row carrying a thin indigo numeral on the
   left and the headline + body on the right. ------------------------- */
html body .page-solutions .solutions-intro + .solution-cards {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(6, 31, 61, .1) !important;
}
html body .page-solutions .solutions-intro + .solution-cards > .solution-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) !important;
  gap: clamp(1rem, 3vw, 2.5rem) !important;
  align-items: start !important;
  padding: clamp(1.25rem, 2.5vw, 2rem) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(6, 31, 61, .1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .page-solutions .solutions-intro + .solution-cards > .solution-card::after {
  display: none !important;
}
html body .page-solutions .solutions-intro + .solution-cards > .solution-card .tag {
  align-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: .55rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--st-indigo, #6C4DFF) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
html body .page-solutions .solutions-intro + .solution-cards > .solution-card:nth-of-type(1) .tag::before { content: "01 - "; }
html body .page-solutions .solutions-intro + .solution-cards > .solution-card:nth-of-type(2) .tag::before { content: "02 - "; }
html body .page-solutions .solutions-intro + .solution-cards > .solution-card:nth-of-type(3) .tag::before { content: "03 - "; }
html body .page-solutions .solutions-intro + .solution-cards > .solution-card:nth-of-type(4) .tag::before { content: "04 - "; }
html body .page-solutions .solutions-intro + .solution-cards > .solution-card h3 {
  margin: 0 0 var(--space-3) 0 !important;
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.018em !important;
  color: var(--st-navy, #061F3D) !important;
}
html body .page-solutions .solutions-intro + .solution-cards > .solution-card p {
  margin: 0 !important;
  max-width: 56ch !important;
  color: var(--st-slate, #5E6A7D) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* ---- 6. Solutions Before/After/Stack/Result block: render as a
   vertical progression. The before/after/stack/result tags read as
   stage labels; the bodies indent slightly to suggest sequence. ----- */
html body .page-solutions section .solutions-section-head ~ .solution-cards,
html body .page-solutions section .solutions-section-head + .solution-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
  border-top: 0 !important;
}

/* Generic 4-row treatment for the before/after block that comes after
   "Staffing fills roles" head. We can't precisely scope by intro head,
   but the section "Staffing fills roles" has only .solution-cards and
   the cards have .tag = Before/After/Stack/Result. The PR #6 selector
   above scopes to "Four ways" only via :nth-of-type. For the second
   block we use a different layout via .solution-cards:has(.tag:contains is
   not supported; we apply via the section's own .solutions-section-head
   class which only the second block has. We rely on the fact that the
   first .solution-cards is preceded by .solutions-intro and the second
   by .solutions-section-head. -------------------------------------- */

/* ---- 7. TalentOS stakeholder grid: 2-column governance table.
   Label on the left in indigo eyebrow, body on the right. ----------- */
html body .page-talent-os .talentos-audience-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(6, 31, 61, .1) !important;
}
html body .page-talent-os .talentos-audience {
  display: grid !important;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 2fr) !important;
  gap: clamp(1rem, 3vw, 2.5rem) !important;
  align-items: baseline !important;
  padding: clamp(1rem, 2vw, 1.5rem) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(6, 31, 61, .1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .page-talent-os .talentos-audience::after {
  display: none !important;
}
html body .page-talent-os .talentos-audience strong {
  color: var(--st-indigo, #6C4DFF) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: .76rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
html body .page-talent-os .talentos-audience span {
  color: var(--st-slate, #5E6A7D) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}
@media (max-width: 760px) {
  html body .page-talent-os .talentos-audience {
    grid-template-columns: 1fr !important;
    gap: var(--space-2) !important;
  }
}

/* ---- 8. About founder attribution: SR initials block was removed
   from HTML. Make sure the attribution row sits cleanly without it. - */
html body .founder-attribution {
  display: block !important;
}
html body .founder-attribution > div {
  display: block !important;
}

/* ---- 9. Careers role grid: 1 feature + 2x2 asymmetric. The
   .role-grid .card.featured spans 2 columns at the top; the remaining
   4 cards form a compact 2x2 below. ------------------------------- */
html body .page-careers .role-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
}
html body .page-careers .role-grid .card.featured {
  grid-column: 1 / -1 !important;
  padding: clamp(var(--space-5), 3vw, var(--space-7)) !important;
}
html body .page-careers .role-grid .card.featured h3 {
  font-size: clamp(1.45rem, 1.05rem + 1.4vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  line-height: 1.2 !important;
}
html body .page-careers .role-grid .card.featured p {
  max-width: 60ch !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
}

/* ---- 10. Eyebrow hierarchy. The site uses .eyebrow on section heads,
   inside cards, and inside footer columns at the same weight. Two
   tiers reduce flatness: the section head eyebrow keeps the indigo
   accent; secondary eyebrows (inside cards / panels / hero proofs) get
   a quieter slate version. ----------------------------------------- */
html body .card .tag,
html body .solution-card .tag,
html body .role-grid .card .tag,
html body .card .eyebrow,
html body .testimonial-card .eyebrow,
html body .contact-card .eyebrow {
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  margin-bottom: var(--space-2) !important;
}

/* ---- 11. Contact hero proof: convert from chips to a 3-column proof
   numbers row (matches the home stats row pattern). --------------- */
html body .page-contact .contact-hero-proof {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(6, 31, 61, .1) !important;
  margin-top: clamp(1.5rem, 3vw, 2.4rem) !important;
  padding-top: var(--space-5) !important;
}
html body .page-contact .contact-hero-proof span {
  display: grid !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 0 var(--space-4) !important;
  border: 0 !important;
  border-left: 1px solid rgba(6, 31, 61, .1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1.45 !important;
  text-align: left !important;
  box-shadow: none !important;
}
html body .page-contact .contact-hero-proof span:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}
@media (max-width: 640px) {
  html body .page-contact .contact-hero-proof {
    grid-template-columns: 1fr !important;
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  html body .page-contact .contact-hero-proof span {
    border-left: 0 !important;
    border-top: 1px solid rgba(6, 31, 61, .1) !important;
    padding: var(--space-3) 0 !important;
  }
  html body .page-contact .contact-hero-proof span:first-child {
    border-top: 0 !important;
  }
}

/* ---- 12. Restore brand voice on form footnote etc. (no change to
   the static HTML copy, just ensures the tone reads premium). ----- */
html body .form-footnote {
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .85rem !important;
  line-height: 1.5 !important;
}

/* ---- 13. Mobile: solution governance table stacks cleanly. ----- */
@media (max-width: 760px) {
  html body .page-solutions .solutions-intro + .solution-cards > .solution-card {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }
}

/* =========================================================================
   Premium Pass 5 (2026-05-26): conversion architecture + remaining audit
   ========================================================================= */

/* ---- 1. Smooth scroll for in-page anchors (e.g. #request-review). - */
html { scroll-behavior: smooth !important; scroll-padding-top: 88px; }

/* ---- 2. Contact hero CTA row. The hero now carries two buttons:
   primary -> form anchor, secondary -> email. Style as a confident
   action row, NOT a chip strip. ------------------------------------- */
html body .page-contact .contact-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
html body .page-contact .contact-hero-actions .button {
  border-radius: 10px;
}
html body .page-contact .contact-hero-actions .button.primary {
  background: var(--st-indigo, #6C4DFF);
  border-color: var(--st-indigo, #6C4DFF);
  color: #ffffff;
  box-shadow: none;
  padding: .85rem 1.4rem;
  font-weight: 700;
}
html body .page-contact .contact-hero-actions .button.primary:hover {
  background: #5b3df0;
  border-color: #5b3df0;
}
html body .page-contact .contact-hero-actions .button:not(.primary) {
  background: transparent;
  color: var(--st-navy, #061F3D);
  border-color: rgba(6, 31, 61, .14);
  padding: .85rem 1.2rem;
  font-weight: 700;
}

/* ---- 3. SUBMIT / MATCH / OPERATOR process labels in the contact
   hero panel: visually clearly numbered process steps (not pills,
   not buttons). Numbered, justified, indigo numerals. -------------- */
html body .page-contact .contact-panel-flow {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: clamp(1rem, 2.4vw, 1.6rem) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
}
html body .page-contact .contact-panel-flow i {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: 0 var(--space-3) !important;
  border-left: 1px solid rgba(255, 255, 255, .14) !important;
  background: transparent !important;
  color: rgba(245, 248, 255, .88) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  font-style: normal !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  min-height: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
}
html body .page-contact .contact-panel-flow i:first-child {
  border-left: 0 !important;
  padding-left: 0 !important;
}
html body .page-contact .contact-panel-flow i:nth-child(1)::before { content: "01"; }
html body .page-contact .contact-panel-flow i:nth-child(2)::before { content: "02"; }
html body .page-contact .contact-panel-flow i:nth-child(3)::before { content: "03"; }
html body .page-contact .contact-panel-flow i::before {
  display: block;
  margin-bottom: .35rem;
  color: #c8baff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

/* ---- 4. Contact page "Company contact" panel: tighter trust block
   so it reads as a credibility ledger, not a filler accordion. ----- */
html body .page-contact .contact-card:not(.primary-contact) ul.contact-details {
  display: grid !important;
  gap: 0 !important;
  margin: var(--space-5) 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid rgba(6, 31, 61, .08) !important;
}
html body .page-contact .contact-card:not(.primary-contact) ul.contact-details li {
  display: grid !important;
  grid-template-columns: minmax(120px, .55fr) minmax(0, 1fr) !important;
  gap: var(--space-4) !important;
  align-items: baseline !important;
  padding: var(--space-3) 0 !important;
  border-bottom: 1px solid rgba(6, 31, 61, .06) !important;
}
html body .page-contact .contact-card:not(.primary-contact) ul.contact-details li strong {
  color: var(--st-slate, #5E6A7D) !important;
  font-family: var(--font-display) !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
html body .page-contact .contact-card:not(.primary-contact) ul.contact-details li a,
html body .page-contact .contact-card:not(.primary-contact) ul.contact-details li span {
  color: var(--st-navy, #061F3D) !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
}
html body .page-contact .contact-card:not(.primary-contact) ul.contact-list {
  display: grid !important;
  gap: var(--space-3) !important;
  margin-top: var(--space-6) !important;
  padding-top: var(--space-5) !important;
  border-top: 1px solid rgba(6, 31, 61, .08) !important;
  list-style: none !important;
}
html body .page-contact .contact-card:not(.primary-contact) ul.contact-list li {
  padding: 0 !important;
  border: 0 !important;
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
}
html body .page-contact .contact-card:not(.primary-contact) ul.contact-list li strong {
  display: block !important;
  margin-bottom: .15rem !important;
  color: var(--st-navy, #061F3D) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
}

/* ---- 5. About hero proof: differentiate from home stats. Render
   as quiet inline trust attributions with vertical pipes between
   instead of the divider columns used on home. -------------------- */
html body .page-about .about-hero-proof {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
  margin-top: clamp(1rem, 2vw, 1.5rem) !important;
  padding-top: var(--space-4) !important;
  border-top: 1px solid rgba(6, 31, 61, .08) !important;
}
html body .page-about .about-hero-proof span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 clamp(.6rem, 1.4vw, 1rem) !important;
  border: 0 !important;
  border-right: 1px solid rgba(6, 31, 61, .14) !important;
  background: transparent !important;
  color: var(--st-navy, #061F3D) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
html body .page-about .about-hero-proof span:first-child {
  padding-left: 0 !important;
}
html body .page-about .about-hero-proof span:last-child {
  border-right: 0 !important;
}

/* ---- 6. TalentOS feature cards (.talentos-card-grid): rebuild
   as a 2-column editorial shelf. Each card has a prominent uppercase
   eyebrow band on top, strong product-demo headline, body copy. ---- */
html body .page-talent-os .talentos-card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-4) !important;
}
html body .page-talent-os .talentos-card {
  position: relative !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  gap: var(--space-4) !important;
  padding: clamp(1.5rem, 2.5vw, 2rem) !important;
  border: 1px solid rgba(6, 31, 61, .08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(6, 31, 61, .04), 0 14px 38px rgba(6, 31, 61, .055) !important;
  overflow: hidden !important;
}
html body .page-talent-os .talentos-card::after {
  display: none !important;
}
html body .page-talent-os .talentos-card > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: 0 0 var(--space-3) 0 !important;
  border-bottom: 1px solid rgba(6, 31, 61, .08) !important;
  color: var(--st-indigo, #6C4DFF) !important;
  background: transparent !important;
  font-family: var(--font-display) !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}
html body .page-talent-os .talentos-card > span::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--st-indigo, #6C4DFF) !important;
  flex: 0 0 auto !important;
}
html body .page-talent-os .talentos-card strong {
  display: block !important;
  color: var(--st-navy, #061F3D) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(1.15rem, .95rem + .65vw, 1.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -.018em !important;
  margin-bottom: var(--space-3) !important;
}
html body .page-talent-os .talentos-card p {
  margin: 0 !important;
  color: var(--st-slate, #5E6A7D) !important;
  font-size: .95rem !important;
  line-height: 1.55 !important;
}
[data-theme='dark'] body .page-talent-os .talentos-card {
  background: #0e1f3b !important;
  border-color: rgba(255, 255, 255, .08) !important;
}
[data-theme='dark'] body .page-talent-os .talentos-card strong { color: #ffffff !important; }
[data-theme='dark'] body .page-talent-os .talentos-card p { color: rgba(245, 248, 255, .72) !important; }
@media (max-width: 760px) {
  html body .page-talent-os .talentos-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- 7. Solutions "Four ways" body copy hierarchy. Increase H3
   gravity, tighten body line-height, narrower body. ---------------- */
html body .page-solutions .solutions-intro + .solution-cards > .solution-card h3 {
  font-size: clamp(1.4rem, 1.05rem + 1vw, 1.85rem) !important;
}
html body .page-solutions .solutions-intro + .solution-cards > .solution-card p {
  max-width: 52ch !important;
  line-height: 1.5 !important;
}

/* ---- 8. Careers role grid: featured card now FIRST in DOM, gets
   a real CTA. Style the CTA inside the featured card cleanly. ----- */
html body .page-careers .role-grid .card.featured {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--space-3) !important;
}
html body .page-careers .role-grid .card.featured .button.primary {
  margin-top: var(--space-3) !important;
  background: var(--st-indigo, #6C4DFF) !important;
  border-color: var(--st-indigo, #6C4DFF) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: .75rem 1.25rem !important;
  font-weight: 700 !important;
}

/* ---- 9. Home stats attribution: append a small uppercase context
   line to each stat so the numerals carry mechanism {
  position: relative !important;
}

/* =========================================================================
   Premium Pass 6 (2026-05-26): CTA consistency + HubSpot suppression
   ========================================================================= */

/* ---- 1. HubSpot intro rich-text suppression. Strengthened to catch
   the most common HubSpot v2 / v3 intro markup variants without
   hiding actual form fields, labels, buttons, or legal consent.
   We hide rich-text/description blocks that appear as the leading
   children of the form. ------------------------------------------- */
html body .hubspot-form-shell .hs-form-frame > .hs-richtext,
html body .hubspot-form-shell .hs-form-frame > .hs_richtext,
html body .hubspot-form-shell .hs-form-frame > .form-richtext,
html body .hubspot-form-shell .hs-form-frame > .form-description,
html body .hubspot-form-shell .hs-form-frame > .legacy-richtext,
html body .hubspot-form-shell .hs-form-frame form > .hs-richtext:first-child,
html body .hubspot-form-shell .hs-form-frame form > .form-description:first-child,
html body .hubspot-form-shell .hs-form-frame form > div:first-child > .hs-richtext,
html body .hubspot-form-shell .hs-form-frame .hs-richtext:not(.legal-consent-container):not(.hs-form-required),
html body .hubspot-form-shell .hs-form-frame [class*="richtext"]:not(.legal-consent-container) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* Make absolutely sure legal-consent + privacy text survive */
html body .hubspot-form-shell .legal-consent-container,
html body .hubspot-form-shell .hs-form-required {
  display: revert !important;
  visibility: visible !important;
  height: auto !important;
}

/* ---- 2. Reinforce that .contact-hero-actions .button.primary uses
   the same disciplined indigo style as the rest of the site. ----- */
html body .page-contact .contact-hero-actions .button.primary { border-radius: 10px !important; }

/* =========================================================================
   Premium Pass 7 (2026-05-26): native workforce review form
   ========================================================================= */

/* Container shell: replaces .hubspot-form-shell visually on contact.html. */
html body .review-form-shell {
  position: relative;
  margin-top: var(--space-7);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(6, 31, 61, .08);
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(6, 31, 61, .04), 0 18px 48px rgba(6, 31, 61, .08);
}
html body .review-form-shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--st-indigo, #6C4DFF) 28%, var(--st-indigo, #6C4DFF) 72%, transparent);
  opacity: .55;
  pointer-events: none;
}

/* Native form layout */
html body .review-form {
  display: grid;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 3vw, var(--space-7));
}
html body .review-form-label {
  margin: 0;
  color: var(--st-indigo, #6C4DFF);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
html body .review-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 640px) {
  html body .review-form-row { grid-template-columns: 1fr; }
}
html body .review-field {
  display: grid;
  gap: .35rem;
}
html body .review-field label {
  color: var(--st-navy, #061F3D);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: -.012em;
}
html body .review-field input,
html body .review-field select,
html body .review-field textarea {
  width: 100%;
  padding: .72rem .85rem;
  border: 1px solid rgba(6, 31, 61, .14);
  border-radius: 10px;
  background: #ffffff;
  color: var(--st-navy, #061F3D);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
  appearance: none;
}
html body .review-field textarea {
  resize: vertical;
  min-height: 120px;
}
html body .review-field select {
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--st-slate, #5E6A7D) 50%),
    linear-gradient(135deg, var(--st-slate, #5E6A7D) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 50%, calc(100% - .75rem) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
html body .review-field input::placeholder,
html body .review-field textarea::placeholder {
  color: rgba(6, 31, 61, .42);
}
html body .review-field input:focus,
html body .review-field select:focus,
html body .review-field textarea:focus {
  outline: none;
  border-color: var(--st-indigo, #6C4DFF);
  box-shadow: 0 0 0 3px rgba(108, 77, 255, .14);
}
/* Only show red invalid state AFTER user has typed AND the value is invalid.
   Previously this triggered on empty required fields because they have no
   placeholder, making :not(:placeholder-shown) always true. */
html body .review-field input:user-invalid,
html body .review-field textarea:user-invalid {
  border-color: rgba(216, 64, 64, .45);
}

/* Consent + actions row */
html body .review-form-consent {
  margin: 0;
  color: var(--st-slate, #5E6A7D);
  font-size: .82rem;
  line-height: 1.5;
}
html body .review-form-consent a {
  color: var(--st-indigo, #6C4DFF);
  text-decoration: underline;
  text-underline-offset: 2px;
}
html body .review-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
html body .review-form .button.primary {
  background: var(--st-indigo, #6C4DFF);
  border: 1px solid var(--st-indigo, #6C4DFF);
  color: #ffffff;
  border-radius: 10px;
  padding: .85rem 1.4rem;
  font-weight: 700;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html body .review-form .button.primary:hover {
  background: #5b3df0;
  border-color: #5b3df0;
  box-shadow: 0 6px 18px rgba(108, 77, 255, .22);
}
html body .review-form .button.primary[disabled],
html body .review-form .button.primary[data-loading] {
  opacity: .65;
  cursor: progress;
}
html body .review-form-direct {
  color: var(--st-slate, #5E6A7D);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body .review-form-direct:hover {
  color: var(--st-indigo, #6C4DFF);
}

/* Status states */
html body .review-form-status {
  margin: 0;
  padding: 0;
  min-height: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--st-slate, #5E6A7D);
}
html body .review-form-status[data-state="pending"] {
  color: var(--st-slate, #5E6A7D);
}
html body .review-form-status[data-state="success"] {
  margin-top: var(--space-2);
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(108, 77, 255, .25);
  background: var(--st-indigo-soft, #E9E7FF);
  color: var(--st-navy, #061F3D);
  font-weight: 600;
}
html body .review-form-status[data-state="error"] {
  margin-top: var(--space-2);
  padding: .85rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(216, 64, 64, .25);
  background: rgba(216, 64, 64, .06);
  color: #8a2a2a;
}

/* Dark mode parity */
[data-theme='dark'] body .review-form-shell {
  background: #0e1f3b;
  border-color: rgba(255, 255, 255, .08);
}
[data-theme='dark'] body .review-field label { color: #ffffff; }
[data-theme='dark'] body .review-field input,
[data-theme='dark'] body .review-field select,
[data-theme='dark'] body .review-field textarea {
  background: #0a162d;
  border-color: rgba(255, 255, 255, .12);
  color: #ffffff;
}
[data-theme='dark'] body .review-field input::placeholder,
[data-theme='dark'] body .review-field textarea::placeholder {
  color: rgba(255, 255, 255, .42);
}
[data-theme='dark'] body .review-form-status[data-state="success"] {
  background: rgba(108, 77, 255, .18);
  color: #ffffff;
}
[data-theme='dark'] body .review-form-status[data-state="error"] {
  background: rgba(216, 64, 64, .14);
  color: #ffd6d6;
}

/* ======================================================================
   FORMATTING FIXES - 2026-05-29
   Comprehensive cleanup: mobile hero overflow, dark-section text contrast,
   nav alignment, footer polish, CTA consistency, spacing rhythm.
   All rules are additive/late-cascade so they override prior declarations
   without editing legacy blocks.
   ====================================================================== */

/* ---------- P0-1: Dark-band / dark-section H2 visibility ----------
   Global h2 { color: var(--text) } was overriding .dark-band container
   color, making H2s invisible on dark sections (Careers, etc.). */
.dark-band h1,
.dark-band h2,
.dark-band h3,
.dark-band .section-head h2,
.dark-band .section-head h3,
.dark-band .eyebrow,
section.dark-band > .container h1,
section.dark-band > .container h2,
section.dark-band > .container h3 {
  color: #ffffff !important;
}
.dark-band .eyebrow {
  color: rgba(233, 231, 255, .88) !important;
}
.dark-band p,
.dark-band .section-head p {
  color: rgba(245, 248, 255, .78) !important;
}
.dark-band .visual-card:not(.dark) h1,
.dark-band .visual-card:not(.dark) h2,
.dark-band .visual-card:not(.dark) h3 {
  color: var(--text) !important;
}

section h1, section h2, section h3 {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}
@media (max-width: 720px) {
  .st-infra-visual {
    min-height: 340px !important;
    transform: scale(.92);
  }
}
@media (max-width: 420px) {
  .st-infra-visual {
    transform: scale(.82);
  }
}

/* ---------- P1-1: Client Portal hero right-margin bleed ----------
   Ensure any hero on client-login stays inside the standard container. */
.page-client-login .hero > .container,
.page-client-login .page-hero > .container,
body.page-client-login main > section:first-of-type > .container,
body.page-client-login main > header > .container {
  width: min(1200px, calc(100% - 2rem)) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
.page-client-login .hero-grid, .page-client-login .hero-copy {
  width: 100%;
}

/* ---------- P1-4 + Footer polish ----------
   Lift footer-meta contrast to meet WCAG AA. */
.site-footer .footer-meta,
footer.site-footer .footer-brand-copy .footer-meta {
  color: #5E6A7D !important;
  opacity: 1 !important;
}
.site-footer .footer-brand-copy p {
  color: #061F3D !important;
}

/* ---------- P1-5: Footer copyright + legal bar (auto-injected) ----------
   We inject a copyright line via CSS pseudo-element so we don't need to
   edit every HTML file's footer. */
.site-footer .footer-inner {
  position: relative;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.site-footer::after {
  content: "© 2026 Sustainable Talent, LLC. All rights reserved.   ·   Contractor Workforce Infrastructure for Enterprise Innovation.";
  display: block;
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  border-top: 1px solid rgba(6, 31, 61, .08);
  color: #5E6A7D;
  font-size: .8rem;
  letter-spacing: .02em;
  text-align: left;
}
[data-theme='dark'] .site-footer::after {
  border-top-color: rgba(255, 255, 255, .08);
  color: rgba(245, 248, 255, .56);
}

/* ---------- P1-6: Active nav state ----------
   Each page sets a body class (e.g., body.page-about). Use it to highlight
   the matching nav link. Falls back gracefully on pages without a class. */
.nav-links a { position: relative; transition: color .15s ease; }
body.page-solutions    .nav-links a[href="solutions.html"],
body.page-about        .nav-links a[href="about.html"],
body.page-careers      .nav-links a[href="careers.html"],
body.page-contact      .nav-links a[href="contact.html"],
body.page-client-login .nav-links a[href="client-login.html"],
body.page-talent-os    .nav-links a[href="talent-os.html"],
body.page-leaders      .nav-links a[href="leaders.html"],
body.page-case-study   .nav-links a[href="mongodb-case-study.html"] {
  color: var(--text) !important;
  font-weight: 700;
}
body.page-solutions    .nav-links a[href="solutions.html"]::after,
body.page-about        .nav-links a[href="about.html"]::after,
body.page-careers      .nav-links a[href="careers.html"]::after,
body.page-contact      .nav-links a[href="contact.html"]::after,
body.page-client-login .nav-links a[href="client-login.html"]::after,
body.page-talent-os    .nav-links a[href="talent-os.html"]::after,
body.page-leaders      .nav-links a[href="leaders.html"]::after,
body.page-case-study   .nav-links a[href="mongodb-case-study.html"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 2px;
  background: #6C4DFF;
  border-radius: 2px;
}

.dark-band img[alt="MongoDB"], .dark img[alt="MongoDB"], .testimonial-card.dark img.testimonial-logo, section[class*="dark"] img[alt="MongoDB"] {
  mix-blend-mode: screen;
  background: transparent;
}
/* On dark navy hero cards, force MongoDB and similar partner logos to render
   without their embedded white plate. */
.page-case-study .hero img[alt="MongoDB"],
.page-case-study .hero-panel img[alt="MongoDB"],
.page-case-study .page-hero img[alt="MongoDB"] {
  mix-blend-mode: screen;
  filter: brightness(1.05);
  background: transparent !important;
}

/* ---------- P1-7: Suppress orphan "Next" eyebrow on closing CTA ----------
   The "NEXT" label in .final / final-cta sections reads as orphaned. Hide. */
section.final .eyebrow,
.final .container.cta > .eyebrow {
  display: none;
}

/* ---------- P1-9 + P2-10: Careers polish ----------
   Tighten the "Two paths in" list spacing, balance columns. */
.page-careers section.dark-band .list li {
  padding-block: clamp(.9rem, 1.4vw, 1.15rem) !important;
}
.page-careers .visual-card:not(.dark) {
  display: flex;
  flex-direction: column;
}
.page-careers .visual-card:not(.dark) .visual-caption {
  margin-top: auto;
}

/* ---------- P2-1: Consistent secondary (ghost) button styling ---------- */
.button:not(.primary), .nav-actions .button:not(.primary), .st-layer-actions .button:not(.primary) {
  border: 1px solid rgba(6, 31, 61, .22);
  background: #ffffff;
  color: #061F3D;
  font-weight: 600;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.button:not(.primary):hover {
  border-color: #6C4DFF;
  color: #6C4DFF;
  background: #F4F5F8;
}
[data-theme='dark'] .button:not(.primary) {
  background: rgba(255,255,255,.04);
  color: #f3f5fb;
  border-color: rgba(255,255,255,.22);
}

/* ---------- P2-6: Lift dark-card body copy ---------- */
.dark-band .visual-card.dark p,
.dark-band .visual-card.dark .signal-row span,
.dark-band .visual-card.dark .signal-row strong {
  font-size: clamp(.95rem, .9rem + .2vw, 1.02rem) !important;
  line-height: 1.5 !important;
}

/* ---------- P2-11: Contact badge pills don't fragment-wrap ---------- */
.page-contact .badge-row,
.page-contact .hero-meta,
.page-contact [class*="badge"] {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
}
.page-contact .badge-row > *,
.page-contact .hero-meta > * {
  white-space: nowrap;
}

/* ---------- P2-12: Case-study quote line-height ---------- */
.page-case-study blockquote,
.page-case-study .testimonial-card blockquote {
  line-height: 1.7 !important;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.18rem);
}

/* ---------- General rhythm: section-head spacing consistency ---------- */
.section-head {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.section-head .eyebrow + h2,
.section-head .eyebrow + h3 {
  margin-top: var(--space-3);
}

/* ---------- Hero rhythm: gap between navbar and hero kicker ---------- */
.hero,
header.hero {
  padding-top: clamp(2.5rem, 6vw, 5rem);
}

/* ---------- Hero CTAs visible above the fold (cap hero card min-height) - */
@media (min-width: 901px) {
}

/* ---------- Footer columns spacing on smaller screens ---------- */
@media (max-width: 720px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-6) var(--space-4) !important;
  }
}
@media (max-width: 480px) {
  .footer-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Mobile menu summary: add a hamburger icon ---------- */
.menu-dropdown > summary {
  list-style: none;
}
.menu-dropdown > summary::-webkit-details-marker { display: none; }
.menu-dropdown > summary::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 12px;
  margin-right: .55rem;
  vertical-align: -2px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 18px 2px;
  background-position: 0 0, 0 5px, 0 10px;
  background-repeat: no-repeat;
}

/* End formatting fixes ================================================== */

/* ---------- Footer social row ---------- */
.site-footer .footer-social {
  margin-top: var(--space-4);
  display: flex;
  gap: var(--space-3);
}
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid rgba(6, 31, 61, .14);
  border-radius: 999px;
  color: #061F3D;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.site-footer .footer-social a::before {
  content: "";
  width: 14px;
  height: 14px;
  background: #061F3D;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5.001zM3 9h4v12H3V9zm7 0h3.8v1.71h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.34c0-1.27-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21h-4V9z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5.001zM3 9h4v12H3V9zm7 0h3.8v1.71h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.34c0-1.27-.02-2.9-1.77-2.9-1.77 0-2.04 1.38-2.04 2.8V21h-4V9z'/></svg>") center/contain no-repeat;
}
.site-footer .footer-social a:hover {
  border-color: #6C4DFF;
  color: #6C4DFF;
  background: #F4F5F8;
}
.site-footer .footer-social a:hover::before {
  background: #6C4DFF;
}
[data-theme='dark'] .site-footer .footer-social a {
  color: #f3f5fb;
  border-color: rgba(255,255,255,.18);
}
[data-theme='dark'] .site-footer .footer-social a::before {
  background: #f3f5fb;
}

/* ======================================================================
   HERO + TESTIMONIAL REBUILD - 2026-05-29 (part 3)
   Kill the 540px hero max-height cap that was clipping the badge, second paragraph, and both CTAs. Let the card grow with content.
   Rebuild the proof-wall so the NVIDIA card stops dominating with
   empty space, and the 5 cards form a balanced editorial grid.
   ====================================================================== */

/* ---------- Hero: content-driven height {
  max-height: none !important;
  min-height: clamp(420px, 38vw, 520px) !important;
  overflow: visible !important;
}

/* Make the hero card grow naturally with its content */
@media (min-width: 901px) {
}

/* CTAs: ensure they're visible {
  margin-top: var(--space-6) !important;
  position: relative;
  z-index: 2;
}
html body .st-infra-core {
  grid-column: span 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 2.5vw, 2rem) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 1rem !important;
  background: rgba(255,255,255,.06) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(1rem, .9rem + .3vw, 1.18rem) !important;
  letter-spacing: -.015em !important;
  line-height: 1.15 !important;
  margin-top: var(--space-3) !important;
}

/* Each infra node: even sizing, clear hierarchy */
html body .st-infra-node {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(.85rem, 1.4vw, 1.1rem) clamp(1rem, 1.8vw, 1.4rem) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: .8rem !important;
  background: rgba(255,255,255,.05) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: clamp(.84rem, .76rem + .25vw, 1rem) !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  min-height: 56px !important;
}

/* ======================================================================
   PROOF WALL. Clean editorial layout
   Goal: featured NVIDIA quote on left as a tall card, 4 supporting cards
   on right as a 2x2 grid. All same vertical bounds, no jagged rows.
   ====================================================================== */
.proof-wall {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: var(--space-4) !important;
  align-items: stretch !important;
}

/* NVIDIA. Featured card, spans both rows */
.proof-wall .testimonial-card:first-child {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(var(--space-6), 3vw, var(--space-8)) !important;
}
.proof-wall .testimonial-card:first-child blockquote {
  font-size: clamp(1.4rem, 1.05rem + 1.05vw, 1.95rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -.022em !important;
  margin: 0 !important;
  flex: 1;
  display: flex;
  align-items: center;
}
.proof-wall .testimonial-card:first-child .testimonial-logo {
  max-width: 140px !important;
  max-height: 44px !important;
  margin-bottom: 0 !important;
}
.proof-wall .testimonial-card:first-child footer {
  margin-top: 0 !important;
}

/* The 4 supporting cards: smaller, denser, equal */
.proof-wall .testimonial-card:not(:first-child) {
  grid-column: 2 / 3 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: clamp(var(--space-4), 2vw, var(--space-5)) !important;
}
.proof-wall .testimonial-card:not(:first-child) blockquote {
  font-size: clamp(.95rem, .9rem + .2vw, 1.08rem) !important;
  line-height: 1.4 !important;
  letter-spacing: -.012em !important;
  margin: 0 !important;
}

/* Position the 4 right-column cards into the 2x2 grid */
.proof-wall .testimonial-card:nth-child(2) { grid-row: 1 / 2 !important; }
.proof-wall .testimonial-card:nth-child(3) { grid-row: 1 / 2 !important; grid-column: 3 / 4 !important; }
.proof-wall .testimonial-card:nth-child(4) { grid-row: 2 / 3 !important; }
.proof-wall .testimonial-card:nth-child(5) { grid-row: 2 / 3 !important; grid-column: 3 / 4 !important; }

/* Move to 3-column track so we can place 2x2 cleanly on the right */
.proof-wall {
  grid-template-columns: 1.4fr 1fr 1fr !important;
}
.proof-wall .testimonial-card:first-child {
  grid-column: 1 / 2 !important;
}

/* Logo plates: consistent size + vertical alignment */
.proof-wall .testimonial-logo {
  max-width: 110px !important;
  max-height: 32px !important;
  width: auto !important;
  height: 30px !important;
  object-fit: contain !important;
  padding: .35rem .55rem !important;
  background: rgba(255,255,255,.95) !important;
  border-radius: .6rem !important;
  margin-bottom: var(--space-3) !important;
}
.proof-wall .testimonial-card:first-child .testimonial-logo {
  height: 40px !important;
  max-width: 140px !important;
}

/* Footer (company name + tag). Consistent baseline */
.proof-wall .testimonial-card footer {
  padding-top: var(--space-3) !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
  font-size: .86rem !important;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.proof-wall .testimonial-card footer strong {
  font-size: .95rem !important;
}

/* ----- Tablet: collapse to 2 columns, NVIDIA full-width at top ----- */
@media (max-width: 1024px) {
  .proof-wall {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .proof-wall .testimonial-card:first-child {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 220px !important;
  }
  .proof-wall .testimonial-card:not(:first-child) {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .proof-wall .testimonial-card:nth-child(2),
  .proof-wall .testimonial-card:nth-child(3),
  .proof-wall .testimonial-card:nth-child(4),
  .proof-wall .testimonial-card:nth-child(5) {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* ----- Mobile: single column ----- */
@media (max-width: 640px) {
  .proof-wall {
    grid-template-columns: 1fr !important;
  }
  .proof-wall .testimonial-card:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ---------- Section background softening ---------- */
.trust-section,
section.trust-section {
  border-top: 0 !important;
}
.trust-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  pointer-events: none;
}

/* ---------- Client-impact left column: prevent overflow ---------- */
.client-impact .client-impact-copy {
  align-self: start;
}
.client-impact .proof-signal-grid {
  margin-top: var(--space-5) !important;
}

/* End hero + testimonial rebuild ======================================== */

/* ---------- Proof wall: cleanup. Let auto-flow place the 4 cards in 2x2 ---------- */
.proof-wall {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  grid-auto-flow: row !important;
  gap: clamp(var(--space-3), 1.4vw, var(--space-5)) !important;
}
.proof-wall .testimonial-card:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}
.proof-wall .testimonial-card:nth-child(n+2) {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Override the legacy 2-col + first-child spans-2 grid */
.proof-wall .testimonial-card:first-child blockquote {
  max-width: 22ch !important;
}

/* ======================================================================
   HERO + NVIDIA CARD POLISH - 2026-05-29 (part 4)
   ====================================================================== */

/* H1: nudge up a step so the headline lands on 3-4 lines at desktop.
   Previous clamp was too conservative; widen the max and the floor. */
@media (min-width: 901px) {
}

/* NVIDIA featured card: pull the quote up tight under the logo,
   anchor the footer at the bottom. Stop using space-between which
   pushed the logo and quote to opposite ends of the card. */
.proof-wall .testimonial-card:first-child {
  justify-content: flex-start !important;
  gap: var(--space-5) !important;
}
.proof-wall .testimonial-card:first-child .testimonial-logo {
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}
.proof-wall .testimonial-card:first-child blockquote {
  flex: 0 1 auto !important;
  align-items: flex-start !important;
  display: block !important;
  margin: 0 !important;
}
.proof-wall .testimonial-card:first-child footer {
  margin-top: auto !important;
}

/* ======================================================================
   PROOF WALL FINAL - 2026-05-29 (part 5)
   - Switch from 3-col to clean 2-col layout: NVIDIA wide on left,
     other 4 stack as 2x2 on right.
   - Restore dark translucent card backgrounds (currently rendering
     white due to base .testimonial-card bg leaking through).
   - Wider columns so quote text doesn't wrap every 1-2 words.
   ====================================================================== */

/* Reset/redo proof-wall grid to clean 2-col + 2-row */
.trust-section .proof-wall,
section .proof-wall {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: clamp(var(--space-3), 1.4vw, var(--space-4)) !important;
  align-items: stretch !important;
}

/* NVIDIA: tall feature card, left column, full height */
.trust-section .proof-wall .testimonial-card:first-child,
section .proof-wall .testimonial-card:first-child {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
}

/* Force all cards onto dark translucent background. Beat the base
   .testimonial-card white surface */
.trust-section .proof-wall .testimonial-card,
section .proof-wall .testimonial-card {
  background:
    radial-gradient(circle at 88% 0%, rgba(124, 92, 255, .14), transparent 13rem),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.trust-section .proof-wall .testimonial-card:first-child,
section .proof-wall .testimonial-card:first-child {
  background:
    radial-gradient(circle at 78% 0%, rgba(124, 92, 255, .26), transparent 18rem),
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.05)) !important;
  border-color: rgba(191, 197, 255, .22) !important;
}

/* Text colors inside cards */
.trust-section .proof-wall .testimonial-card blockquote,
section .proof-wall .testimonial-card blockquote {
  color: #ffffff !important;
}
.trust-section .proof-wall .testimonial-card footer,
section .proof-wall .testimonial-card footer {
  color: rgba(235, 238, 255, .68) !important;
  border-top-color: rgba(255, 255, 255, .14) !important;
}
.trust-section .proof-wall .testimonial-card footer strong,
section .proof-wall .testimonial-card footer strong {
  color: #ffffff !important;
}

/* Quote sizing: wider columns mean text needs to FILL them, not get squeezed */
.trust-section .proof-wall .testimonial-card:first-child blockquote,
section .proof-wall .testimonial-card:first-child blockquote {
  font-size: clamp(1.35rem, 1rem + 1vw, 1.85rem) !important;
  line-height: 1.18 !important;
  max-width: 100% !important;
}
.trust-section .proof-wall .testimonial-card:not(:first-child) blockquote,
section .proof-wall .testimonial-card:not(:first-child) blockquote {
  font-size: clamp(.95rem, .88rem + .25vw, 1.08rem) !important;
  line-height: 1.42 !important;
  max-width: 100% !important;
}

/* Logo: small translucent plate, top of card */
.trust-section .proof-wall .testimonial-logo,
section .proof-wall .testimonial-logo {
  height: 28px !important;
  max-height: 28px !important;
  max-width: 110px !important;
  width: auto !important;
  padding: .35rem .6rem !important;
  background: rgba(255, 255, 255, .92) !important;
  border-radius: .55rem !important;
  margin-bottom: var(--space-3) !important;
  align-self: flex-start !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}
.trust-section .proof-wall .testimonial-card:first-child .testimonial-logo,
section .proof-wall .testimonial-card:first-child .testimonial-logo {
  height: 36px !important;
  max-height: 36px !important;
  max-width: 130px !important;
  margin-bottom: var(--space-4) !important;
}

/* Tablet: 1 col + 2 col grid */
@media (max-width: 1024px) {
  .trust-section .proof-wall,
  section .proof-wall {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .trust-section .proof-wall .testimonial-card:first-child,
  section .proof-wall .testimonial-card:first-child {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 200px !important;
  }
}
@media (max-width: 640px) {
  .trust-section .proof-wall,
  section .proof-wall {
    grid-template-columns: 1fr !important;
  }
  .trust-section .proof-wall .testimonial-card:first-child,
  section .proof-wall .testimonial-card:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ======================================================================
   PROOF WALL - 2-COL FINAL (2026-05-29 part 6)
   3-col was too cramped because the parent .client-impact splits page
   in half. Switch to 2 columns: NVIDIA left (span 2 rows), other 4
   stack as 2x2 on right with auto-flow.
   ====================================================================== */
.trust-section .proof-wall,
section .proof-wall {
  grid-template-columns: 1.15fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  grid-auto-flow: row !important;
}
.trust-section .proof-wall .testimonial-card:first-child,
section .proof-wall .testimonial-card:first-child {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
}
.trust-section .proof-wall .testimonial-card:nth-child(n+2),
section .proof-wall .testimonial-card:nth-child(n+2) {
  grid-column: auto !important;
  grid-row: auto !important;
}

/* With wider columns, supporting card quotes can read at a normal size */
.trust-section .proof-wall .testimonial-card:not(:first-child) blockquote,
section .proof-wall .testimonial-card:not(:first-child) blockquote {
  font-size: clamp(.95rem, .88rem + .25vw, 1.05rem) !important;
  line-height: 1.45 !important;
}
.trust-section .proof-wall .testimonial-card:first-child blockquote,
section .proof-wall .testimonial-card:first-child blockquote {
  font-size: clamp(1.2rem, .95rem + .8vw, 1.65rem) !important;
  line-height: 1.22 !important;
  max-width: 28ch !important;
}

/* Tighter card padding so quote uses card width */
.trust-section .proof-wall .testimonial-card:not(:first-child),
section .proof-wall .testimonial-card:not(:first-child) {
  padding: clamp(var(--space-4), 1.8vw, var(--space-5)) !important;
}

/* ======================================================================
   HERO. DEFINITIVE BLOCK (2026-05-31, replaces all prior passes)
   One source of truth. No accumulated overrides. Balanced at every
   viewport from mobile through 1920+.
   ====================================================================== */

/* ---------- Section wrapper ---------- */
html body header.hero {
  padding-block: clamp(2rem, 4vw, 4rem) !important;
}

/* ---------- 2-col grid: image-driven height, NOT equal heights ----------
   Forcing equal heights with align-items: stretch caused Safari to
   shrink the dashboard image to fit a height shorter than its natural
   aspect, leaving giant white frames. Instead, let the right column
   be sized by the dashboard's natural aspect ratio, and have the left
   card sit naturally next to it (any height difference is intentional
   page whitespace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  grid-template-rows: auto !important;
  gap: clamp(1.5rem, 2.5vw, 2.75rem) !important;
  align-items: start !important;
  min-height: 0 !important;
}

/* Nuke any leftover infra-visual styling */
html body .st-infra-visual,
html body .st-infra-node,
html body .st-infra-core,
html body .st-infra-line { display: none !important; }

/* ---------- Tablet (1024 and below): stack to 1 column. Panel height
   is driven by the dashboard image's intrinsic aspect so there's no
   empty white frame around a shrunken image. ---------- */
@media (max-width: 1024px) {
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
}

/* End hero ============================================================ */

/* =========================================================================
   HERO REDESIGN V1. Added 2026-06-01
   Editorial, #6C4DFF accent, #5E6A7D slate, #E9E7FF lavender.
   ========================================================================= */

/* --- Hero shell --------------------------------------------------------- */
.hero.hero-v1 {
  position: relative;
  background: #FFFFFF;
  padding: clamp(72px, 12vw, 160px) 0 clamp(56px, 9vw, 120px);
  overflow: hidden;
}
.hero.hero-v1 .container.hero-inner {
  position: relative;
  z-index: 2;
  padding-left: clamp(0px, 4vw, 56px);
}
.hero-anchor-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  height: 1px;
  background: #E9E7FF;
  z-index: 1;
  pointer-events: none;
}

/* --- Asymmetric grid (12-col feel via fr units) ------------------------- */
.hero-grid-v1 {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
@media (max-width: 1023px) {
  .hero-grid-v1 {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

/* --- Left: copy column -------------------------------------------------- */

.hero-v1-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 28px;
  opacity: 0;
  animation: heroFadeIn 0.5s ease-out 0.1s forwards;
}
/* Scoped with .hero so it beats the generic '.hero h1' rule at line 7785 that
   sets font-size: var(--text-hero) and max-width: 22ch. Without this scope our
   rule loses the cascade and 'layer' orphans onto its own line. */
.hero .hero-headline,
.hero-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Tuned so 'The infrastructure layer' fits as one phrase in the desktop copy
     column. Scales down on narrow viewports. */
  font-size: clamp(38px, 3.6vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0;
  /* Remove the 22ch max-width inherited from .hero h1 so balance can work. */
  max-width: none;
  /* Browser-balanced wrapping optimizes line breaks to avoid widows/orphans. */
  text-wrap: balance;
  /* Animate the H1 as one unit (was per-line via .line spans). */
  opacity: 0;
  animation: heroFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.hero-headline .accent {
  color: #6C4DFF;
  font-weight: 600;
  display: inline;
}
.hero-subhead {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: #5E6A7D;
  max-width: 540px;
  margin: 32px 0 0;
  opacity: 0;
  animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

/* --- CTAs --------------------------------------------------------------- */
.hero-cta {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 48px;
  flex-wrap: wrap;
  opacity: 0;
  animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}
.hero-cta-primary.button.primary {
  background: #6C4DFF !important;
  border-color: #6C4DFF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  padding: 16px 28px;
  border-radius: 6px;
  font-weight: 600;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.hero-cta-primary.button.primary:hover {
  transform: translateY(-2px);
  background: #5A3DEB !important;
  box-shadow: 0 14px 28px rgba(108, 77, 255, 0.22) !important;
}
.hero-cta-secondary {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #061F3D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms ease;
}
.hero-cta-secondary span {
  display: inline-block;
  transition: transform 200ms ease;
}
.hero-cta-secondary:hover { color: #6C4DFF; }
.hero-cta-secondary:hover span { transform: translateX(4px); }

/* --- Right: MongoDB pull-quote ----------------------------------------- */
.hero-quote {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: clamp(8px, 1.5vw, 24px);
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.9s forwards;
}
.hero-quote-logo {
  height: 32px;
  width: auto;
  margin-bottom: 32px;
  /* Logos already use #061F3D fill. No filter needed */
  opacity: 1;
}
.hero-quote-text {
  margin: 0;
  padding: 0;
  border: 0;
}
.hero-quote-text p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(20px, 1.6vw, 26px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #061F3D;
  margin: 0;
  max-width: 460px;
}
.hero-quote-cite {
  display: block;
  margin-top: 24px;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-style: normal;
  color: #5E6A7D;
  letter-spacing: 0.01em;
}
.hero-quote-divider {
  display: block;
  width: 80px;
  height: 1px;
  background: #E9E7FF;
  margin: 28px 0;
}
.hero-quote-link {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #061F3D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms ease;
}
.hero-quote-link span { transition: transform 200ms ease; }
.hero-quote-link:hover { color: #6C4DFF; }
.hero-quote-link:hover span { transform: translateX(4px); }

/* --- Marquee ------------------------------------------------------------ */
.hero-marquee {
  background: #FFFFFF;
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid #F4F5F8;
}
.hero-marquee-mask {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.hero-marquee-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: heroMarquee 45s linear infinite;
}
.hero-marquee:hover .hero-marquee-track { animation-play-state: paused; }
.hero-marquee-logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
}
/* .hero-marquee-logo img rules consolidated in the enterprise-marquee block
   below (search for: 'Convert any color logo to navy'). */

/* --- Animations --------------------------------------------------------- */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Focus states (WCAG AA) -------------------------------------------- */
.hero.hero-v1 a:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,
  .hero-headline .line,
  .hero-subhead,
  .hero-cta,
  .hero-quote {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-marquee-track { animation: none !important; }
}

/* --- Mobile refinements ------------------------------------------------- */
@media (max-width: 1023px) {
  .hero-anchor-line { display: none; }
  .hero-quote { border-top: 1px solid #E9E7FF; padding-top: 40px; margin-top: 8px; }
}
@media (max-width: 640px) {
  .hero-headline { letter-spacing: -0.02em; }
  .hero-cta { gap: 20px; }
  .hero-marquee-track { gap: 56px; animation-duration: 35s; }
}


/* --- Cascade overrides: defeat .hero gradient/padding rules --- */
.hero.hero-v1 {
  background: #FFFFFF !important;
  padding: clamp(72px, 12vw, 160px) 0 clamp(56px, 9vw, 120px) !important;
  border-top: 0 !important;
}
.hero.hero-v1::before,
.hero.hero-v1::after {
  display: none !important;
  content: none !important;
}

/* === END HERO REDESIGN V1 ============================================== */


/* =========================================================================
   CUSTOMERS PAGE V1. Added 2026-06-02
   Editorial customer story rails. NO 6-up logo grid.
   Anchor story (MongoDB) + alternating asymmetric rails (NVIDIA, Amazon,
   Microsoft, Ford). Reuses hero-v1 motion + brand tokens.
   ========================================================================= */

/* --- Hero ---------------------------------------------------------------- */
.customers-hero {
  padding: clamp(72px, 11vw, 140px) 0 clamp(48px, 8vw, 96px);
}
.customers-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
@media (max-width: 1023px) {
  .customers-hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}
.customers-hero-anchor {
  padding-top: clamp(12px, 1.5vw, 28px);
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.9s forwards;
}
.customers-anchor-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 28px;
}
.customers-anchor-stats {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.customers-anchor-stats > div {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 24px;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid #E9E7FF;
}
.customers-anchor-stats > div:last-child { border-bottom: 0; padding-bottom: 0; }
.customers-anchor-stats dt {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #061F3D;
  margin: 0;
}
.customers-anchor-stats dd {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #5E6A7D;
  margin: 0;
}

/* --- Anchor story (MongoDB) ------------------------------------------- */
.customers-anchor-story {
  background: #FFFFFF;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid #E9E7FF;
}
.anchor-story-inner {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding-left: clamp(0px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) {
  .anchor-story-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 0;
  }
}
.anchor-story-meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 8px;
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) {
  .anchor-story-meta { position: static; }
}
.anchor-story-num {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
}
.anchor-story-logo {
  height: 44px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.anchor-story-industry {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #5E6A7D;
  margin: 0;
}

.anchor-story-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 20px;
}
.anchor-story-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #061F3D;
  margin: 0 0 32px;
}
.anchor-story-headline .accent { color: #6C4DFF; }
.anchor-story-lede {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0 0 40px;
  max-width: 720px;
}
.anchor-story-quote {
  margin: 0 0 40px;
  padding: 32px 0 32px 32px;
  border-left: 2px solid #6C4DFF;
  background: linear-gradient(to right, rgba(233, 231, 255, 0.4), transparent);
}
.anchor-story-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #061F3D;
  margin: 0 0 20px;
  max-width: 760px;
}
.anchor-story-quote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-style: normal;
  color: #5E6A7D;
  letter-spacing: 0.01em;
}
.anchor-story-outcomes strong {
  display: block;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #061F3D;
  margin-bottom: 20px;
}
.anchor-story-outcomes ul {
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.anchor-story-outcomes li {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #061F3D;
  padding-left: 24px;
  position: relative;
}
.anchor-story-outcomes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 12px;
  height: 1px;
  background: #6C4DFF;
}
.anchor-story-cta { padding-top: 24px; border-top: 1px solid #E9E7FF; }
.anchor-story-btn.button.primary {
  background: #6C4DFF !important;
  border-color: #6C4DFF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.anchor-story-btn.button.primary:hover {
  transform: translateY(-2px);
  background: #5A3DEB !important;
  box-shadow: 0 14px 28px rgba(108, 77, 255, 0.22) !important;
}
.anchor-story-btn span {
  display: inline-block;
  transition: transform 200ms ease;
}
.anchor-story-btn:hover span { transform: translateX(4px); }

/* --- More stories: intro + asymmetric rails ---------------------------- */
.customers-more {
  background: #F4F5F8;
  padding: clamp(80px, 10vw, 140px) 0;
}
.customers-more-intro {
  max-width: 760px;
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding-left: clamp(0px, 4vw, 56px);
}
.customers-more-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 20px;
}
.customers-more-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(32px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 20px;
}
.customers-more-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
  max-width: 720px;
}

/* Story rails. Alternating asymmetry */
.story-rail {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(48px, 6vw, 80px) clamp(0px, 4vw, 56px);
  border-top: 1px solid #E9E7FF;
  align-items: start;
}
.story-rail:last-of-type { border-bottom: 1px solid #E9E7FF; }
@media (max-width: 900px) {
  .story-rail {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Visual on right (asymmetric flip) */
.story-rail-visual-right {
  order: 2;
}
.story-rail-2 .story-rail-body,
.story-rail-4 .story-rail-body {
  order: 1;
}
@media (max-width: 900px) {
  .story-rail-visual-right,
  .story-rail-2 .story-rail-body,
  .story-rail-4 .story-rail-body {
    order: initial;
  }
}

.story-rail-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) {
  .story-rail-visual { position: static; }
}
.story-rail-logo {
  height: 36px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  align-self: flex-start;
}
.story-rail-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5E6A7D;
  letter-spacing: 0.01em;
}

.story-rail-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 0 0 20px;
}
.story-rail-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #061F3D;
  margin: 0 0 24px;
}
.story-rail-lede {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0 0 28px;
  max-width: 640px;
}
.story-rail-points {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.story-rail-points li {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #061F3D;
  padding-left: 18px;
  position: relative;
}
.story-rail-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: #6C4DFF;
}
.story-rail-link {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #061F3D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms ease;
}
.story-rail-link span {
  display: inline-block;
  transition: transform 200ms ease;
}
.story-rail-link:hover { color: #6C4DFF; }
.story-rail-link:hover span { transform: translateX(4px); }

/* --- Customer marquee variant ----------------------------------------- */
.customers-marquee {
  background: #FFFFFF;
  padding: clamp(56px, 7vw, 96px) 0;
}
.customers-marquee-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 32px;
  padding-left: clamp(0px, 4vw, 56px);
}

/* --- Customer CTA final (inherits .pricing-cta-final, light override) - */
.customers-cta-final {
  background: #061F3D;
}

/* --- Focus states (WCAG AA) ------------------------------------------- */
.customers-hero a:focus-visible,
.customers-anchor-story a:focus-visible,
.customers-more a:focus-visible,
.customers-marquee a:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .customers-hero-anchor {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* --- Story rail archetype chip (replaces individual customer logos) --- */
.story-rail-archetype {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid #E9E7FF;
  border-radius: 4px;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #6C4DFF;
  background: #FFFFFF;
}

/* === END CUSTOMERS PAGE V1 ============================================ */


/* =========================================================================
   INSIGHTS HUB + ARTICLE V1. Added 2026-06-02
   Editorial insights hub with featured anchor, list of articles, newsletter,
   and single-article reading template.
   ========================================================================= */

/* --- Insights hero ----------------------------------------------------- */
.insights-hero {
  padding: clamp(72px, 11vw, 140px) 0 clamp(48px, 8vw, 96px);
}
.insights-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
@media (max-width: 1023px) {
  .insights-hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}
.insights-hero-anchor {
  padding-top: clamp(12px, 1.5vw, 28px);
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.9s forwards;
}
.insights-anchor-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 24px;
}
.insights-anchor-topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.insights-anchor-topics a {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #061F3D;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid #E9E7FF;
  display: block;
  transition: color 200ms ease, padding 200ms ease;
}
.insights-anchor-topics a:hover {
  color: #6C4DFF;
  padding-left: 8px;
}

/* --- Featured insight (anchor) ---------------------------------------- */
.insights-featured {
  background: #FFFFFF;
  padding: clamp(72px, 9vw, 120px) 0;
  border-top: 1px solid #E9E7FF;
}
.featured-inner {
  max-width: 920px;
  padding-left: clamp(0px, 4vw, 56px);
}
.featured-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.featured-flag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #6C4DFF;
  padding: 6px 12px;
  border-radius: 99px;
}
.featured-category {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
}
.featured-read {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #5E6A7D;
  padding-left: 16px;
  border-left: 1px solid #E9E7FF;
}
.featured-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 24px;
}
.featured-headline a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(to right, #061F3D, #061F3D);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 300ms ease;
}
.featured-headline a:hover {
  background-size: 100% 1px;
}
.featured-headline .accent { color: #6C4DFF; }
.featured-dek {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0 0 32px;
  max-width: 760px;
}
.featured-cta { padding-top: 24px; border-top: 1px solid #E9E7FF; }
.featured-link {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #061F3D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms ease;
}
.featured-link span {
  display: inline-block;
  transition: transform 200ms ease;
}
.featured-link:hover { color: #6C4DFF; }
.featured-link:hover span { transform: translateX(4px); }

/* --- Insights list (asymmetric rows, not card grid) ------------------- */
.insights-list {
  background: #F4F5F8;
  padding: clamp(80px, 10vw, 140px) 0;
}
.insights-list-intro {
  max-width: 720px;
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding-left: clamp(0px, 4vw, 56px);
}
.insights-list-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 20px;
}
.insights-list-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0;
}

.insight-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 5vw, 56px) clamp(0px, 4vw, 56px);
  border-top: 1px solid #E9E7FF;
  align-items: start;
}
.insight-row:last-of-type { border-bottom: 1px solid #E9E7FF; }
@media (max-width: 900px) {
  .insight-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 0;
    padding-right: 0;
  }
}
.insight-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.insight-cat {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
}
.insight-read,
.insight-flag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #5E6A7D;
}
.insight-flag {
  color: #6C4DFF;
  font-weight: 500;
}
.insight-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #061F3D;
  margin: 0 0 16px;
}
.insight-headline a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}
.insight-headline a:hover { color: #6C4DFF; }
.insight-dek {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0 0 20px;
  max-width: 720px;
}
.insight-link {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #061F3D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms ease;
}
.insight-link span { display: inline-block; transition: transform 200ms ease; }
.insight-link:hover { color: #6C4DFF; }
.insight-link:hover span { transform: translateX(4px); }

/* --- Newsletter -------------------------------------------------------- */
.insights-newsletter {
  background: #F4F5F8;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid #E9E7FF;
  border-bottom: 1px solid #E9E7FF;
}
.newsletter-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding-left: clamp(0px, 4vw, 56px);
}
@media (max-width: 1023px) {
  .newsletter-inner { grid-template-columns: 1fr; gap: 40px; }
}
.newsletter-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 24px;
}
.newsletter-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(28px, 3.8vw, 48px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 20px;
  max-width: 580px;
}
.newsletter-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
  max-width: 540px;
}
.newsletter-form {
  padding-top: 12px;
}
.newsletter-label {
  display: block;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin-bottom: 12px;
}
.newsletter-input-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.newsletter-input {
  flex: 1;
  min-width: 240px;
  padding: 14px 16px;
  border: 1px solid #E9E7FF;
  border-radius: 6px;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #061F3D;
  background: #FFFFFF;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.newsletter-input:focus {
  outline: none;
  border-color: #6C4DFF;
  box-shadow: 0 0 0 3px rgba(108, 77, 255, 0.12);
}
.newsletter-btn.button.primary {
  background: #6C4DFF !important;
  border-color: #6C4DFF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}
.newsletter-btn.button.primary:hover {
  transform: translateY(-2px);
  background: #5A3DEB !important;
}
.newsletter-fineprint {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #5E6A7D;
  margin: 16px 0 0;
  max-width: 480px;
}

/* =========================================================================
   ARTICLE READING TEMPLATE
   ========================================================================= */
.insight-article { background: #FFFFFF; }

.article-header {
  background: #F4F5F8;
  padding: clamp(72px, 9vw, 120px) 0 clamp(56px, 7vw, 96px);
  border-bottom: 1px solid #E9E7FF;
}
.article-header-inner {
  max-width: 820px;
  padding-left: clamp(0px, 4vw, 56px);
}
.article-back {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5E6A7D;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 32px;
  transition: color 200ms ease;
}
.article-back:hover { color: #6C4DFF; }
.article-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 0 0 24px;
}
.article-title {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(34px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 28px;
}
.article-title .accent { color: #6C4DFF; }
.article-dek {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: #5E6A7D;
  margin: 0 0 32px;
  max-width: 720px;
}
.article-byline {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #5E6A7D;
}

/* --- Article body ----------------------------------------------------- */
.article-body {
  padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 80px);
}
.article-body-inner {
  max-width: 720px;
  padding-left: clamp(0px, 4vw, 56px);
}
.article-body-inner p,
.article-body-inner ul,
.article-body-inner ol {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: #061F3D;
  margin: 0 0 24px;
}
.article-body-inner ul,
.article-body-inner ol {
  padding-left: 24px;
}
.article-body-inner li {
  margin-bottom: 10px;
}
.article-lead {
  font-size: clamp(18px, 1.4vw, 22px) !important;
  line-height: 1.55 !important;
  color: #061F3D !important;
  font-weight: 500;
  margin-bottom: 32px !important;
}
.article-body-inner h2 {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #061F3D;
  margin: clamp(48px, 6vw, 64px) 0 24px;
}
.article-body-inner h3 {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 600;
  line-height: 1.3;
  color: #061F3D;
  margin: 32px 0 12px;
}
.article-body-inner strong { font-weight: 600; color: #061F3D; }
.article-body-inner em { font-style: italic; color: #5E6A7D; }

/* --- Inline article CTA ----------------------------------------------- */
.article-cta-inline {
  margin: clamp(56px, 7vw, 80px) 0 0;
  padding: clamp(32px, 5vw, 48px);
  background: #F4F5F8;
  border-left: 3px solid #6C4DFF;
  border-radius: 4px;
}
.article-cta-inline .article-cta-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 0 0 16px;
}
.article-cta-inline .article-cta-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  color: #061F3D;
  margin: 0 0 12px;
}
.article-cta-inline .article-cta-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0 0 24px;
}
.article-cta-btn.button.primary {
  background: #6C4DFF !important;
  border-color: #6C4DFF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 200ms ease, background 200ms ease;
}
.article-cta-btn.button.primary:hover {
  transform: translateY(-2px);
  background: #5A3DEB !important;
}

/* --- Related insights at end of article ------------------------------- */
.article-related {
  background: #F4F5F8;
  padding: clamp(64px, 8vw, 96px) 0;
  border-top: 1px solid #E9E7FF;
}
.article-related-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 32px;
  padding-left: clamp(0px, 4vw, 56px);
}
.article-related-list {
  display: flex;
  flex-direction: column;
  padding-left: clamp(0px, 4vw, 56px);
}
.related-item {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) 32px;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid #E9E7FF;
  text-decoration: none;
  transition: padding 200ms ease;
}
.related-item:last-child { border-bottom: 1px solid #E9E7FF; }
.related-item:hover { padding-left: 8px; }
.related-cat {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
}
.related-title {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 500;
  color: #061F3D;
  line-height: 1.3;
}
.related-arrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 20px;
  color: #6C4DFF;
  text-align: right;
  transition: transform 200ms ease;
}
.related-item:hover .related-arrow { transform: translateX(4px); }
@media (max-width: 700px) {
  .related-item { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .related-arrow { display: none; }
}

/* --- Focus states (WCAG AA) ------------------------------------------ */
.insights-hero a:focus-visible,
.insights-featured a:focus-visible,
.insights-list a:focus-visible,
.insights-newsletter input:focus-visible,
.insights-newsletter button:focus-visible,
.insight-article a:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .insights-hero-anchor {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* === END INSIGHTS HUB + ARTICLE V1 ================================== */


/* =========================================================================
   MEGA-MENU V1. Added 2026-06-02
   Expanded 3-column dropdowns for Solutions and Platform with grouped
   categories. Closes maturity gap #4 (dense enterprise navigation).
   ========================================================================= */

.nav-dropdown.nav-mega { position: relative; }
.nav-dropdown.nav-mega > summary {
  list-style: none;
  cursor: pointer;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #061F3D;
  padding: 8px 4px;
  transition: color 200ms ease;
}
.nav-dropdown.nav-mega > summary::-webkit-details-marker { display: none; }
.nav-dropdown.nav-mega > summary::after {
  content: '⌄';
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: #5E6A7D;
  transition: transform 200ms ease;
}
.nav-dropdown.nav-mega[open] > summary::after { transform: rotate(180deg); }
.nav-dropdown.nav-mega > summary:hover { color: #6C4DFF; }

.nav-mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -180px;
  display: grid;
  grid-template-columns: repeat(3, 240px);
  gap: 28px;
  padding: 28px 32px;
  width: max-content;
  background: #FFFFFF;
  border: 1px solid #E9E7FF;
  border-radius: 8px;
  box-shadow: 0 24px 56px rgba(6, 31, 61, 0.10);
  z-index: 100;
}
@media (max-width: 900px) {
  .nav-mega-panel {
    position: static;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 16px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #F4F5F8;
    margin-top: 8px;
  }
}

.nav-mega-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.nav-mega-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 0 0 4px;
}
.nav-mega-col a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.nav-mega-col a:hover {
  background: #F4F5F8;
  transform: translateY(-1px);
}
.nav-mega-col a strong {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #061F3D;
  line-height: 1.3;
}
.nav-mega-col a span {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #5E6A7D;
  line-height: 1.4;
  display: block;
  max-width: 100%;
  word-wrap: break-word;
}

.nav-mega:focus-within > summary { color: #6C4DFF; }
.nav-mega-col a:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 2px;
}

/* === END MEGA-MENU V1 ================================================ */


/* =========================================================================
   PRICING PAGE V1. Added 2026-06-02
   Editorial, asymmetric tiers. No 3-up card grid. Single-rail layout
   with intentional asymmetry per tier. Same brand tokens as hero v1.
   ========================================================================= */

/* --- Pricing hero adapts hero-v1 --------------------------------------- */
.pricing-hero {
  padding: clamp(72px, 11vw, 140px) 0 clamp(48px, 8vw, 96px);
}
.pricing-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
}
@media (max-width: 1023px) {
  .pricing-hero-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}
.pricing-hero-anchor {
  padding-top: clamp(12px, 1.5vw, 28px);
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.9s forwards;
}
.pricing-anchor-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 24px;
}
.pricing-anchor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 380px;
}
.pricing-anchor-list li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: baseline;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #061F3D;
}
.pricing-anchor-num {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #6C4DFF;
  letter-spacing: 0.04em;
}

/* --- Tiers section intro ----------------------------------------------- */
.pricing-tiers {
  background: #FFFFFF;
  padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 120px);
}
.pricing-tiers-intro {
  max-width: 720px;
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding-left: clamp(0px, 4vw, 56px);
}
.pricing-tiers-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 20px;
}
.pricing-tiers-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0;
}

/* --- Individual tier rails (asymmetric, NOT 3-up grid) ---------------- */
.pricing-tier {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(48px, 6vw, 80px) clamp(0px, 4vw, 56px);
  border-top: 1px solid #E9E7FF;
  position: relative;
}
.pricing-tier:last-of-type {
  border-bottom: 1px solid #E9E7FF;
}
@media (max-width: 900px) {
  .pricing-tier {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Stagger each tier subtly to break grid feel */
.pricing-tier-enterprise {
  background: #F4F5F8;
  margin: 0 calc(-1 * clamp(0px, 4vw, 56px));
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
  border-top: 0;
  border-bottom: 0;
  border-radius: 4px;
}
.pricing-tier-enterprise + .pricing-tier {
  border-top: 1px solid #E9E7FF;
}

.pricing-tier-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.pricing-tier-num {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
}
.pricing-tier-target {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5E6A7D;
  letter-spacing: 0.02em;
}
.pricing-tier-flag {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #6C4DFF;
  padding: 6px 12px;
  border-radius: 99px;
  width: fit-content;
}

.pricing-tier-name {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #061F3D;
  margin: 0 0 24px;
}
.pricing-tier-lede {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  color: #5E6A7D;
  max-width: 620px;
  margin: 0 0 40px;
}
.pricing-tier-lede strong {
  color: #061F3D;
  font-weight: 600;
}

.pricing-tier-content {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .pricing-tier-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.pricing-tier-includes > strong,
.pricing-tier-best > strong {
  display: block;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #061F3D;
  margin-bottom: 16px;
}
.pricing-tier-includes li strong {
  font-weight: 700;
  color: #061F3D;
}
.pricing-tier-includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-tier-includes li {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #061F3D;
  padding-left: 20px;
  position: relative;
}
.pricing-tier-includes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: #6C4DFF;
}
.pricing-tier-best p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
}

.pricing-tier-cta {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid #E9E7FF;
}
.pricing-tier-price {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #5E6A7D;
  letter-spacing: 0.01em;
}
.pricing-cta-btn.button.primary {
  background: #6C4DFF !important;
  border-color: #6C4DFF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  padding: 14px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.pricing-cta-btn.button.primary:hover {
  transform: translateY(-2px);
  background: #5A3DEB !important;
  box-shadow: 0 14px 28px rgba(108, 77, 255, 0.22) !important;
}
.pricing-cta-btn span {
  display: inline-block;
  transition: transform 200ms ease;
}
.pricing-cta-btn:hover span { transform: translateX(4px); }

/* --- Constant strip ----------------------------------------------------- */
.pricing-constant {
  background: #F4F5F8;
  padding: clamp(72px, 9vw, 120px) 0;
}
.pricing-constant-inner {
  max-width: 820px;
  padding-left: clamp(0px, 4vw, 56px);
}
.pricing-constant-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 24px;
}
.pricing-constant-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 32px;
}
.pricing-constant-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
  color: #5E6A7D;
  margin: 0;
  max-width: 720px;
}

/* --- FAQ ---------------------------------------------------------------- */
.pricing-faq {
  background: #FFFFFF;
  padding: clamp(80px, 10vw, 140px) 0;
}
.pricing-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
  padding-left: clamp(0px, 4vw, 56px);
}
@media (max-width: 1023px) {
  .pricing-faq-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.pricing-faq-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 24px;
}
.pricing-faq-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 16px;
}
.pricing-faq-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
}

.pricing-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pricing-faq-item {
  border-top: 1px solid #E9E7FF;
  padding: 24px 0;
}
.pricing-faq-item:last-child {
  border-bottom: 1px solid #E9E7FF;
}
.pricing-faq-item summary {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500;
  color: #061F3D;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  letter-spacing: -0.01em;
}
.pricing-faq-item summary::-webkit-details-marker { display: none; }
.pricing-faq-item summary::after {
  content: '+';
  font-size: 24px;
  font-weight: 400;
  color: #6C4DFF;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.pricing-faq-item[open] summary::after {
  content: '−';
  transform: none;
}
.pricing-faq-item p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #5E6A7D;
  margin: 16px 0 0;
  max-width: 720px;
}

/* --- Final CTA ---------------------------------------------------------- */
.pricing-cta-final {
  background: #061F3D;
  padding: clamp(80px, 10vw, 140px) 0;
}
.pricing-cta-inner {
  max-width: 820px;
  padding-left: clamp(0px, 4vw, 56px);
}
.pricing-cta-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 24px;
}
.pricing-cta-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  margin: 0 0 24px;
}
.pricing-cta-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 40px;
  max-width: 660px;
}
.pricing-cta-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.pricing-cta-final .pricing-cta-btn.button.primary {
  background: #FFFFFF !important;
  color: #061F3D !important;
  border-color: #FFFFFF !important;
}
.pricing-cta-final .pricing-cta-btn.button.primary:hover {
  background: #F4F5F8 !important;
  color: #061F3D !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) !important;
}
.pricing-cta-final .hero-cta-secondary {
  color: #FFFFFF;
}
.pricing-cta-final .hero-cta-secondary:hover {
  color: #E9E7FF;
}

/* --- Focus states (WCAG AA) -------------------------------------------- */
.pricing-hero a:focus-visible,
.pricing-tiers a:focus-visible,
.pricing-faq summary:focus-visible,
.pricing-cta-final a:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 4px;
  border-radius: 4px;
}
.pricing-cta-final a:focus-visible {
  outline-color: #FFFFFF;
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pricing-hero-anchor {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* === END PRICING PAGE V1 ============================================== */



/* =========================================================================
   ACCENT WEIGHT BUMP. Added 2026-06-02
   Bump all hero/title accent words to weight 600 with tighter letter-spacing.
   Fixes optical hierarchy: purple at weight 500 reads lighter than navy 500,
   inverting the intended emphasis. Weight 600 makes accent the visual anchor.
   ========================================================================= */
.hero-headline .accent {
  /* Match the navy hero exactly: same weight (600), same tracking (-0.025em),
     so purple reads as one continuous phrase, not a different cut. */
  font-weight: 600;
  letter-spacing: -0.025em;
}
/* Each accent inherits the same weight and tracking as its parent headline
   so the purple word reads as part of the same phrase, not a bolder aside. */
.anchor-story-headline .accent {
  font-weight: 500;
  letter-spacing: -0.03em;
}
.featured-headline .accent {
  font-weight: 500;
  letter-spacing: -0.025em;
}
.article-title .accent {
  font-weight: 600;
  letter-spacing: -0.025em;
}
/* === END ACCENT WEIGHT BUMP ============================================ */


/* =========================================================================
   HOMEPAGE BELOW-HERO V1. Added 2026-06-02
   Editorial sections replacing legacy operating-layer dashboard, operator
   node-map, 5-up testimonial card grid, and soft-gray CTA. Reuses the same
   design DNA shipped on /pricing, /customers, /insights.
   ========================================================================= */

/* --- Shared eyebrow ---------------------------------------------------- */
.home-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin: 0 0 20px;
}

/* =========================================================================
   SECTION 2. Capability rails (What it operates)
   ========================================================================= */
.home-capability {
  background: #FFFFFF;
  padding: clamp(80px, 10vw, 140px) 0 clamp(64px, 8vw, 120px);
  border-top: 1px solid #E9E7FF;
}
.home-capability-intro {
  max-width: 880px;
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding-left: clamp(0px, 4vw, 56px);
}
.home-capability-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(34px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0 0 28px;
}
.home-capability-headline .accent {
  color: #6C4DFF;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.home-capability-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
  max-width: 760px;
}

.home-capability-rail { display: flex; flex-direction: column; }

.home-capability-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  padding: clamp(40px, 5vw, 56px) clamp(0px, 4vw, 56px);
  border-top: 1px solid #E9E7FF;
  align-items: start;
}
.home-capability-row:last-of-type { border-bottom: 1px solid #E9E7FF; }
@media (max-width: 900px) {
  .home-capability-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 0;
    padding-right: 0;
  }
}

.home-capability-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.home-capability-num {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #6C4DFF;
}
.home-capability-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5E6A7D;
  margin-top: 4px;
}

.home-capability-rowtitle {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #061F3D;
  margin: 0 0 16px;
  max-width: 720px;
}
.home-capability-body p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: #5E6A7D;
  margin: 0;
  max-width: 720px;
}

.home-capability-cta {
  padding-top: clamp(40px, 5vw, 56px);
  padding-left: clamp(0px, 4vw, 56px);
}

/* =========================================================================
   SECTION 3. Operator quote
   ========================================================================= */
.home-operator {
  background: #F4F5F8;
  padding: clamp(80px, 10vw, 140px) 0;
}
.home-operator-grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding-left: clamp(0px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) {
  .home-operator-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 0;
  }
}
.home-operator-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
}
.home-operator-byline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #061F3D;
}
.home-operator-role {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: #5E6A7D;
}
.home-operator-quote {
  margin: 0;
  padding: 0;
  border-left: 2px solid #6C4DFF;
  padding-left: clamp(24px, 3vw, 40px);
}
.home-operator-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: #061F3D;
  margin: 0;
  max-width: 880px;
}
.home-operator-quote .accent {
  color: #6C4DFF;
  font-weight: 600;
}
.home-operator-cta {
  margin-top: 36px;
  padding-left: clamp(24px, 3vw, 40px);
}

/* =========================================================================
   SECTION 4. Enterprise proof (anchor + supports)
   ========================================================================= */
.home-proof {
  background: #FFFFFF;
  padding: clamp(80px, 10vw, 140px) 0;
}
.home-proof-intro {
  max-width: 920px;
  margin: 0 0 clamp(56px, 7vw, 80px);
  padding-left: clamp(0px, 4vw, 56px);
}
.home-proof-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(34px, 4.5vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #061F3D;
  margin: 0;
}
.home-proof-headline .accent {
  color: #6C4DFF;
  font-weight: 600;
  letter-spacing: -0.035em;
}

/* Anchor: MongoDB hero quote */
.home-proof-anchor {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(48px, 6vw, 80px) clamp(0px, 4vw, 56px);
  border-top: 1px solid #E9E7FF;
  border-bottom: 1px solid #E9E7FF;
  align-items: start;
}
@media (max-width: 900px) {
  .home-proof-anchor {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-left: 0;
    padding-right: 0;
  }
}
.home-proof-anchor-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 8px;
}
.home-proof-anchor-logo {
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  align-self: flex-start;
}
.home-proof-anchor-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  color: #5E6A7D;
  line-height: 1.45;
}
.home-proof-anchor-quote {
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 2;
}
@media (max-width: 900px) {
  .home-proof-anchor-quote { grid-column: 1; }
}
.home-proof-anchor-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #061F3D;
  margin: 0 0 24px;
  max-width: 820px;
}
.home-proof-anchor-quote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-style: normal;
  color: #5E6A7D;
}
.home-proof-anchor-link {
  grid-column: 2;
  margin-top: 24px;
}
@media (max-width: 900px) {
  .home-proof-anchor-link { grid-column: 1; }
}

/* Two supporting quotes. Asymmetric 2-col */
.home-proof-supports {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(48px, 6vw, 80px) clamp(0px, 4vw, 56px);
  border-bottom: 1px solid #E9E7FF;
}
@media (max-width: 900px) {
  .home-proof-supports {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
  }
}
.home-proof-support {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.home-proof-support-logo {
  height: 28px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  align-self: flex-start;
}
.home-proof-support blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}
.home-proof-support blockquote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #061F3D;
  margin: 0 0 16px;
}
.home-proof-support blockquote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-style: normal;
  color: #5E6A7D;
}

.home-proof-cta {
  padding: clamp(40px, 5vw, 56px) clamp(0px, 4vw, 56px) 0;
}

/* =========================================================================
   Final CTA inherits .pricing-cta-final from existing CSS. Only overrides
   ========================================================================= */
.home-cta-final .pricing-cta-headline .accent {
  color: #6C4DFF;
  font-weight: 600;
  letter-spacing: -0.035em;
}

/* =========================================================================
   Focus + reduced motion
   ========================================================================= */
.home-capability a:focus-visible,
.home-operator a:focus-visible,
.home-proof a:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 4px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .home-capability-row,
  .home-operator-quote,
  .home-proof-anchor,
  .home-proof-support { transition: none !important; }
}

/* === END HOMEPAGE BELOW-HERO V1 ====================================== */


/* =========================================================================
   HUBSPOT EMBED FORM OVERRIDES. Added 2026-06-02
   The Insights Newsletter form is rendered by HubSpot's embed script
   inside .hs-form-frame. HubSpot's default styling is generic blue/gray -
   these overrides force it to match the Sustainable Talent brand system.
   ========================================================================= */

/* Container. Let HubSpot iframe expand */
.newsletter-form-hubspot {
  padding-top: 12px;
  min-height: 100px;
}
.newsletter-form-hubspot .hs-form-frame {
  /* HubSpot will inject an iframe inside this div */
  width: 100%;
}
.newsletter-form-hubspot iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

/* HubSpot also sometimes renders the form directly without iframe.
   These selectors target both scenarios. */
.newsletter-form-hubspot .hs-form,
.newsletter-form-hubspot .hsfc-Form,
.newsletter-form-hubspot form[id^="hsForm"] {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* Form field labels */
.newsletter-form-hubspot label,
.newsletter-form-hubspot .hsfc-FieldLabel {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #5E6A7D !important;
  margin-bottom: 8px !important;
}

/* Text inputs */
.newsletter-form-hubspot input[type="email"],
.newsletter-form-hubspot input[type="text"],
.newsletter-form-hubspot .hsfc-Input {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid #E9E7FF !important;
  border-radius: 6px !important;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  color: #061F3D !important;
  background: #FFFFFF !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
  box-shadow: none !important;
}
.newsletter-form-hubspot input[type="email"]:focus,
.newsletter-form-hubspot input[type="text"]:focus,
.newsletter-form-hubspot .hsfc-Input:focus {
  outline: none !important;
  border-color: #6C4DFF !important;
  box-shadow: 0 0 0 3px rgba(108, 77, 255, 0.12) !important;
}

/* Submit button. Match the .button.primary look */
.newsletter-form-hubspot input[type="submit"],
.newsletter-form-hubspot button[type="submit"],
.newsletter-form-hubspot .hsfc-Button,
.newsletter-form-hubspot .hs-button {
  background: #6C4DFF !important;
  border: 1px solid #6C4DFF !important;
  color: #FFFFFF !important;
  padding: 14px 24px !important;
  border-radius: 6px !important;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease !important;
}
.newsletter-form-hubspot input[type="submit"]:hover,
.newsletter-form-hubspot button[type="submit"]:hover,
.newsletter-form-hubspot .hsfc-Button:hover,
.newsletter-form-hubspot .hs-button:hover {
  transform: translateY(-2px) !important;
  background: #5A3DEB !important;
  border-color: #5A3DEB !important;
  box-shadow: 0 14px 28px rgba(108, 77, 255, 0.22) !important;
}

/* Validation messages */
.newsletter-form-hubspot .hs-error-msgs,
.newsletter-form-hubspot .hsfc-FieldError,
.newsletter-form-hubspot ul.no-list {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  color: #B91C1C !important;
  margin-top: 6px !important;
  list-style: none !important;
  padding-left: 0 !important;
}

/* Required field asterisk */
.newsletter-form-hubspot .hs-form-required {
  color: #6C4DFF !important;
}

/* Submitted state. HubSpot thank you message */
.newsletter-form-hubspot .submitted-message,
.newsletter-form-hubspot .hsfc-FormSuccess {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: #061F3D !important;
  padding: 20px 24px !important;
  background: #F4F5F8 !important;
  border-left: 3px solid #6C4DFF !important;
  border-radius: 4px !important;
}

/* === END HUBSPOT EMBED FORM OVERRIDES ================================ */

/* --- Newsletter card polish (PR #29) ----------------------------------- */
.newsletter-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px) clamp(24px, 3vw, 32px);
  box-shadow: 0 1px 2px rgba(6, 31, 61, 0.04), 0 12px 32px rgba(6, 31, 61, 0.06);
  overflow: hidden;
}
.newsletter-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6C4DFF 0%, #6C4DFF 60%, #E9E7FF 100%);
  border-radius: 16px 16px 0 0;
}
.newsletter-card-badge {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 4px 0 14px;
}
.newsletter-card-intro {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #061F3D;
  margin: 0 0 20px;
  max-width: 420px;
}
.newsletter-form-hubspot .newsletter-fineprint {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #5E6A7D;
  margin: 16px 0 0;
}
/* HubSpot iframe lives inside .newsletter-card. Make sure it doesn't bleed */
.newsletter-card .hs-form-frame {
  margin: 0;
}
@media (max-width: 1023px) {
  .newsletter-card {
    padding: 28px 24px 24px;
  }
}

/* --- Native form (.st-form). PR #31, replaces HubSpot iframe ---------- */
.st-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.st-form-label {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #061F3D;
  margin: 0 0 4px;
}
.st-form-input {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: #061F3D;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.st-form-input::placeholder { color: #9CA3AF; }
.st-form-input:focus {
  outline: none;
  border-color: #6C4DFF;
  box-shadow: 0 0 0 3px rgba(108, 77, 255, 0.15);
}
.st-form-input:invalid:not(:placeholder-shown) {
  border-color: #B91C1C;
}
/* Honeypot. Visually hidden, accessibility-safe */
.st-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.st-form-submit {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  background: #6C4DFF;
  border: 0;
  border-radius: 8px;
  padding: 14px 24px;
  width: 100%;
  cursor: pointer;
  margin-top: 8px;
  transition: background 200ms ease, transform 100ms ease;
  position: relative;
}
.st-form-submit:hover { background: #5A3FE0; }
.st-form-submit:active { transform: translateY(1px); }
.st-form-submit:focus-visible {
  outline: 2px solid #6C4DFF;
  outline-offset: 2px;
}
.st-form-submit:disabled,
.st-form-submit.is-loading {
  background: #B5A8FF;
  cursor: progress;
}
.st-form-submit-label { display: inline; }
.st-form-submit-loading { display: none; }
.st-form-submit.is-loading .st-form-submit-label { display: none; }
.st-form-submit.is-loading .st-form-submit-loading { display: inline; }
.st-form-error {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #B91C1C;
  margin: 8px 0 0;
}
.st-form-success {
  padding: 8px 0 4px;
}
.st-form-success-title {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #061F3D;
  margin: 0 0 8px;
}
.st-form-success-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #5E6A7D;
  margin: 0;
}

/* =========================================================================
   SITE-WIDE SWEEP - PR #32, 2026-06-02
   1. Strip background grid pattern art (legacy AI-dashboard look)
   2. Hide hero "dashboard mockup" decorations across all pages
   3. Editorial cleanup
   ========================================================================= */

/* --- Strip background grid patterns ----------------------------------- */
.trust-section .card::before,
.trust-section .card:nth-child(2)::before,
.trust-section .card:nth-child(3)::before,
.pillar-card::before,
.pillar-card:nth-child(2)::before,
.pillar-card:nth-child(3)::before,
.pillar-card:nth-child(4)::before {
  display: none !important;
  content: none !important;
}

/* --- Hide hero dashboard mockup decorations (cross-page) -------------- */
.st-dashboard-card,
.st-dashboard-top,
.st-dashboard-foot,
.st-dashboard-note,
.st-dashboard-card small,
.st-dashboard-card span,
.st-platform-card,
.st-orbit-card,
.st-infra-core,
.st-layer-step,
.st-layer-actions,
.st-section-link,
.operator-hub,
.operator-chips,
.operator-pullquote,
.sequoia-stat {
  display: none !important;
}

/* --- Restore hero clean editorial baseline across all pages ---------- */
.hero-grid {
  /* Override the legacy 1.65fr .65fr asymmetric "dashboard right" grid */
  grid-template-columns: 1fr !important;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) !important;
  }
}

/* --- Belt-and-suspenders: kill any remaining repeating-gradient backgrounds  */
[class*="grid-bg"],
[class*="-pattern"],
.grid-overlay,
.grid-lines {
  display: none !important;
}

/* --- .dark-band: strip grid, keep solid gradient ---------------------- */
.dark-band {
  background:
    radial-gradient(circle at 20% 0%, rgba(216, 232, 255, .14), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(124, 92, 255, .18), transparent 22rem),
    linear-gradient(145deg, #071426, #061F3D 58%, #182b55) !important;
  background-size: auto !important;
}
.dark-band::before,
.dark-band::after {
  display: none !important;
}
/* MongoDB case study card had a grid pattern via .case-study-band - strip */
.case-study-band.dark,
.case-study-band[class*="dark"] {
  background-image: none !important;
}

/* --- .case-quote: strip grid pattern from the pull-quote card --------- */
.case-quote {
  background:
    radial-gradient(circle at 90% 0%, rgba(99, 102, 241, .16), transparent 18rem),
    color-mix(in oklab, var(--surface) 92%, transparent) !important;
  background-size: auto !important;
}

/* --- .hero-panel: strip grid pattern background ------------------------ */
.hero-panel {
  background:
    radial-gradient(circle at 86% 10%, rgba(99, 102, 241, .20), transparent 17rem),
    var(--surface) !important;
  background-size: auto !important;
}
.hero-panel::before,
.hero-panel::after {
  display: none !important;
}
/* And kill any orphan grid art on similar editorial cards */
.solution-card,
.contact-card,
.case-kpi,
.split,
.shift-card,
.persona {
  background-image: none !important;
}

/* =========================================================================
   FINAL SWEEP: Nuke all remaining grid pattern backgrounds
   (Targets selectors that have white/navy 1px line gradients regardless
    of their CSS provenance, including legacy unclosed-comment artifacts)
   ========================================================================= */
.hero-panel,
.dark-band,
.case-quote,
.case-study-band,
.solution-card,
.contact-card,
.split,
.shift-card,
.persona,
.pillar-card,
.trust-section .card,
.st-infra-visual,
.st-orbit-card,
.st-platform-card,
.st-dashboard-card,
.operator-hub {
  background-image: none !important;
}

/* Restore the navy-on-right panel solid look (mongodb-case-study + similar). */
.hero-panel {
  background: linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
}
/* Keep case-quote on its existing surface (white in light mode, dark in dark mode). */
.case-quote {
  background: var(--surface, #FFFFFF) !important;
}
[data-theme='dark'] .case-quote {
  background: #0B2042 !important;
}


/* =========================================================================
   GRID SWEEP V2 - PR #34, 2026-06-02
   Strip ALL remaining grid pattern backgrounds across the site.
   This kill-rule targets every selector that still paints grid art.
   ========================================================================= */

/* Pseudo-element grid art: hide entirely */
.st-platform-card::before,
.trust-section .card:nth-child(3)::before,
.st-sequence::before,
.visual-card:nth-child(2n)::before,
.visual-card::before,
.client-impact::before,
.pillar-card:nth-child(2)::before,
.executive-brief::before,
.market-move::before {
  background-image: none !important;
  background-size: auto !important;
  content: none !important;
  display: none !important;
}

/* Direct elements: strip grid background-image, keep solid color */
.console-body,
.hero-system-frame,
.founder-note-visual,
.login-system-panel,
.candidate-flow-panel,
.solutions-copy,
.solutions-visual,
.solutions-hero,
.solutions-hero-panel,
.solution-card,
.archetype-card,
.tier-card,
.tier-card-shell,
.tier-feature,
.insight-card,
.featured-card,
.story-rail,
.story-rail-card,
.contact-card,
.review-form-shell,
.about-hero-panel,
.contact-hero-panel,
.case-hero-logo,
.dashboard-preview,
.dashboard-row,
.flow-step,
.case-quote,
.case-study-band,
.dark-band,
.hero-panel,
.executive-brief,
.market-move,
.client-impact,
.shift-copy,
.shift-card,
.persona,
/* Removed .card from this blanket rule. The blanket was stripping the
   intentional navy radial-gradient from .card.featured, leaving cream text
   on a white card body (unreadable). Decorative gradients on plain .card
   variants are now handled by the targeted rules below. */
.split,
.testimonial-card,
.pillar-card,
.trust-section .card {
  background-image: none !important;
  background-size: auto !important;
}

/* Keep plain (non-featured) .card variants free of decorative gradients,
   matching the prior intent of the blanket rule but without touching
   .card.featured. */
.card:not(.featured) {
  background-image: none !important;
  background-size: auto !important;
}

/* Restore intentional dark-fill backgrounds that the blanket rule above wipes.
   - .card.featured is a navy hero-card with cream text (text would be unreadable
     against the default white card body without its radial+navy fill).
   - .visual-card.dark and .dark-band .visual-card.dark keep their navy gradient. */
.card.featured {
  background:
    radial-gradient(circle at 90% 0%, rgba(124, 92, 255, 0.22), transparent 20rem),
    #061F3D !important;
  color: #F5F3EE !important;
  border-color: transparent !important;
}
.card.featured h3,
.card.featured strong { color: #F5F3EE !important; }
.card.featured p,
.card.featured li { color: rgba(245, 243, 238, 0.78) !important; }
.card.featured .tag {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #F5F3EE !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
.visual-card.dark {
  background:
    radial-gradient(circle at 84% 0%, rgba(124, 92, 255, 0.22), transparent 18rem),
    radial-gradient(circle at 10% 100%, rgba(76, 141, 211, 0.16), transparent 20rem),
    linear-gradient(145deg, #09182c, #102a4f) !important;
  color: #F7FAFF !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}
/* Inside the dark band, the non-.dark companion card needs a readable navy
   surface and cream text — a light surface on a dark band looks broken. */
.dark-band .visual-card:not(.dark) {
  background:
    radial-gradient(circle at 16% 0%, rgba(124, 92, 255, 0.14), transparent 18rem),
    linear-gradient(145deg, #0c1e3c, #112c52) !important;
  color: #F7FAFF !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.dark-band .visual-card:not(.dark) h3,
.dark-band .visual-card:not(.dark) strong,
.dark-band .visual-card:not(.dark) .visual-kicker {
  color: #F5F3EE !important;
}
.dark-band .visual-card:not(.dark) p,
.dark-band .visual-card:not(.dark) .visual-caption,
.dark-band .visual-card:not(.dark) .signal-row span {
  color: rgba(247, 250, 255, 0.72) !important;
}
.dark-band .visual-card:not(.dark) .signal-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Hide the decorative swirl/blob pseudo-elements on visual-cards inside the
   dark band — they were designed for light surfaces and bleed through the
   navy fill as a faint white shape. */
.dark-band .visual-card::before,
.dark-band .visual-card::after { display: none !important; }

/* Prevent any text from breaking mid-word at narrow viewports */
h1, h2, h3, .hero-headline, .anchor-story-headline, .featured-headline,
.article-title, .home-capability-headline, .home-proof-headline,
.pricing-cta-headline, .newsletter-headline {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
}

/* Re-apply navy gradient to right-side hero panels (case studies + solutions) */
.page-leaders .hero-panel,
.page-careers .hero-panel,
.page-case-study .hero-panel,
.page-solutions .solutions-visual,
.hero-panel.dark,
.solutions-visual.dark {
  background: linear-gradient(160deg, #061F3D 0%, #0a2247 100%) !important;
  background-size: auto !important;
}

/* PR #34 stripped the navy bg on .contact-card.primary-contact (correct -
   the page is now light-themed). Restore heading + text color to navy so
   the headline is readable on the light surface. */
.contact-card.primary-contact {
  background: var(--surface, #FFFFFF) !important;
  border: 1px solid #E5E7EB !important;
}
.contact-card.primary-contact h2,
.contact-card.primary-contact h3 {
  color: #061F3D !important;
}
.contact-card.primary-contact p,
.contact-card.primary-contact .contact-list,
.contact-card.primary-contact .contact-list li {
  color: #5E6A7D !important;
}
.contact-card.primary-contact .contact-list strong {
  color: #061F3D !important;
}
.contact-card.primary-contact .eyebrow {
  color: #6C4DFF !important;
}

/* =========================================================================
   PR #37 - Logo strip optical-weight normalization (Issue #35 P0 #1)
   Per-logo widths tuned so the marquee reads as visually balanced rather
   than dominated by Amazon (was 160px) and starved on NVIDIA/Ford (was 32px).
   All logos: height 32px, custom widths to match optical mass of each brand.
   ========================================================================= */

.hero-marquee-logo img {
  height: 32px;
  width: auto;
  object-fit: contain;
  /* Logos render in their native colors. Asset-level monochrome conversion
     is planned (see /assets/logos/README-MONOCHROME-HANDOFF.md). When the
     monochrome SVG set lands, no CSS change is needed - the HTML just swaps
     the src paths. */
  opacity: 1;
  transition: opacity 200ms ease;
}
.hero-marquee-logo:hover img {
  opacity: 0.85;
}

/* Per-logo widths so wordmarks and badges sit on the same optical weight.
   Use explicit width (not max-width) so square-aspect SVGs like NVIDIA and
   Ford scale to the intended optical mass rather than render at 32x32. */
.hero-marquee-logo.logo-amazon img    { width: 100px; max-width: 100px; }
.hero-marquee-logo.logo-microsoft img { width: 110px; max-width: 110px; }
.hero-marquee-logo.logo-mongodb img   { width: 110px; max-width: 110px; }
.hero-marquee-logo.logo-postman img   { width: 100px; max-width: 100px; }
.hero-marquee-logo.logo-nvidia img    { width: 44px;  max-width: 44px;  }
.hero-marquee-logo.logo-box img       { width: 58px;  max-width: 58px;  }
.hero-marquee-logo.logo-ford img      { width: 56px;  max-width: 56px;  }

.hero-marquee-logo img:hover {
  opacity: 1;
}

/* =========================================================================
   PR #37 - Brand emblem dark-theme audit (Issue #35 P3 #13)
   Visual verification result: the active nav uses .brand-logo (PNG icon)
   which renders correctly on dark theme - navy circle with white S mark
   is readable against the dark navy header. NO change needed for the
   emblem itself.

   HOWEVER, audit caught a broader issue: the rest of /index on dark theme
   has washed-out hero text and faded section content. That's outside this
   PR's homepage-logo-zone scope. Filing as a new backlog item.
   ========================================================================= */

/* =========================================================================
   Enterprise marquee polish - PR #41, 2026-06-04
   Caption above the logo strip + spacing refinements for Fortune 500 feel.
   ========================================================================= */

.hero-marquee {
  /* Override earlier .hero-marquee declaration for vertical rhythm + hairlines */
  padding: clamp(56px, 7vw, 88px) 0 !important;
  background: #FFFFFF !important;
  border-top: 1px solid #E9E7FF !important;
  border-bottom: 1px solid #E9E7FF !important;
}

.hero-marquee-caption {
  /* Single editorial caption that anchors the strip.
     Switzer + brand purple for instant brand recognition. */
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6C4DFF;
  text-align: center;
  margin: 0 auto clamp(28px, 3vw, 40px);
  max-width: 560px;
  padding: 0 24px;
}

/* Bump gap between logos for more enterprise breathing room */
.hero-marquee-track {
  gap: clamp(72px, 7vw, 112px) !important;
}

/* Mobile: tighter caption */
@media (max-width: 640px) {
  .hero-marquee-caption {
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-bottom: 20px;
  }
}

/* =========================================================================
   PR #43 - Three-modal "How we operate inside your stack" section
   Sits between capability rails (Section 2) and operator quote (Section 3).
   Closes the positioning leak: TalentOS replaces VMS for mid-market,
   runs above VMS for F500, payrolls global contingent workforce under
   our umbrella. Three columns, equal weight, editorial card treatment.
   ========================================================================= */

.home-stack-modes {
  background: #FFFFFF;
  padding: clamp(80px, 10vw, 140px) 0;
  border-top: 1px solid #E9E7FF;
}

.home-stack-intro {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}

.home-stack-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #061F3D;
  font-weight: 500;
  margin: 16px 0 20px;
}

.home-stack-headline .accent {
  color: #6C4DFF;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.home-stack-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
}

.home-stack-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 36px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.home-stack-mode {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
  position: relative;
  overflow: hidden;
}

.home-stack-mode::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6C4DFF 0%, #6C4DFF 60%, #E9E7FF 100%);
  border-radius: 16px 16px 0 0;
}

.home-stack-mode:hover {
  border-color: #C7B8FF;
  box-shadow: 0 12px 32px rgba(6, 31, 61, 0.08);
  transform: translateY(-2px);
}

.home-stack-mode-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 8px 0 0;
}

.home-stack-mode-title {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: #061F3D;
  font-weight: 600;
  margin: 0;
}

.home-stack-mode-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5E6A7D;
  margin: 0;
  flex-grow: 1;
}

.home-stack-mode-best {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #061F3D;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid #F4F5F8;
}

/* Mobile: stack vertically */
@media (max-width: 1023px) {
  .home-stack-modes-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 640px) {
  .home-stack-modes {
    padding: 64px 0;
  }
  .home-stack-intro {
    text-align: left;
  }
  .home-stack-mode {
    padding: 24px;
  }
}

/* =========================================================================
   PR #44 - "Powered by enterprise infrastructure" trust band
   Sits between the 3-modal section and the operator quote. Compact
   horizontal strip naming the 4 enterprise infrastructure partners that
   power the Sustainable Talent operating stack. Procurement-grade trust
   signal at the highest-credibility moment in the homepage scroll.
   ========================================================================= */

.home-stack-infra {
  background: #F4F5F8;
  padding: clamp(48px, 6vw, 72px) 0;
  border-top: 1px solid #E9E7FF;
  border-bottom: 1px solid #E9E7FF;
}

.home-stack-infra-eyebrow {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6C4DFF;
  text-align: center;
  margin: 0 auto clamp(28px, 3vw, 40px);
}

.home-stack-infra-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.home-stack-infra-partner {
  text-align: center;
  padding: 0 8px;
}

.home-stack-infra-name {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #061F3D;
  margin: 0 0 8px;
}

.home-stack-infra-role {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #5E6A7D;
  margin: 0;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile: 2x2 grid */
@media (max-width: 900px) {
  .home-stack-infra-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    max-width: 560px;
  }
}

/* Small mobile: stacked */
@media (max-width: 480px) {
  .home-stack-infra-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
  .home-stack-infra {
    padding: 48px 0;
  }
}

/* =========================================================================
   PR — Homepage infra reposition (2026-06-07)
   New: home-operator-infra · home-pillars · home-recurring
   Matches existing brand tokens: navy #061F3D, accent #6C4DFF, lavender #E9E7FF
   ========================================================================= */

/* Infrastructure line beneath operator quote */
.home-operator-infra {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5E6A7D;
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  padding: clamp(16px, 2vw, 24px) clamp(20px, 2.5vw, 28px);
  background: #F4F5F8;
  border-left: 3px solid #6C4DFF;
  border-radius: 0 8px 8px 0;
  max-width: 760px;
}
.home-operator-infra strong { color: #061F3D; font-weight: 600; }

/* SECTION 3.5 — One system across the work (4-pillar) */
.home-pillars {
  background: #FFFFFF;
  padding: clamp(72px, 8vw, 120px) 0;
  border-top: 1px solid #E9E7FF;
}
.home-pillars-intro {
  max-width: 880px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 clamp(20px, 4vw, 48px);
  text-align: center;
}
.home-pillars-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #061F3D;
  font-weight: 600;
  margin: 12px 0 16px;
}
.home-pillars-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  color: #5E6A7D;
  margin: 0;
}
.home-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.home-pillar {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: clamp(24px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.home-pillar:hover {
  border-color: #C7B8FF;
  box-shadow: 0 12px 32px rgba(6, 31, 61, 0.08);
  transform: translateY(-2px);
}
.home-pillar-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin: 0;
}
.home-pillar-title {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #061F3D;
  font-weight: 600;
  margin: 0;
}
.home-pillar-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #5E6A7D;
  margin: 0;
}
@media (max-width: 1100px) {
  .home-pillars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 560px) {
  .home-pillars-grid { grid-template-columns: 1fr; max-width: 420px; }
  .home-pillars { padding: 56px 0; }
}

/* SECTION 4.5 — Recurring enterprise programs proof band */
.home-recurring {
  background: #F4F5F8;
  padding: clamp(56px, 6vw, 88px) 0;
  border-top: 1px solid #E9E7FF;
  border-bottom: 1px solid #E9E7FF;
}
.home-recurring-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.home-recurring-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #061F3D;
  font-weight: 600;
  margin: 12px 0 clamp(24px, 3vw, 36px);
}
.home-recurring-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.home-recurring-list li {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  color: #5E6A7D;
  padding-left: 28px;
  position: relative;
}
.home-recurring-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: #6C4DFF;
}
.home-recurring-list li strong {
  color: #061F3D;
  font-weight: 600;
}

/* =========================================================================
   PR — Multi-customer reposition (2026-06-07)
   Structural anchors only. NO fabricated quotes attributed to real entities.
   Verified MongoDB quote preserved as-is.
   Awaiting client sign-off for NVIDIA, Ford, AWS, Microsoft, Uber, Chewy.
   ========================================================================= */

/* Homepage anchor — program description block (no fabricated quote) */
.home-proof-anchor-program {
  margin: clamp(20px, 2.5vw, 28px) 0;
}
.home-proof-anchor-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(1.2rem, 1rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #061F3D;
  font-weight: 600;
  margin: 0 0 12px;
}
.home-proof-anchor-body {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.08rem);
  line-height: 1.6;
  color: #5E6A7D;
  margin: 0;
}

/* Homepage support — program callout (no fabricated quote) */
.home-proof-support-program {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #061F3D;
  margin: 12px 0 8px;
}
.home-proof-support cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6C4DFF;
  font-style: normal;
  display: block;
}

/* Customers rail logo replaces numeric archetype */
.story-rail-logo {
  max-width: 140px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 16px;
  filter: brightness(0) saturate(100%) invert(8%) sepia(43%) saturate(2531%) hue-rotate(199deg) brightness(96%) contrast(98%);
}
.story-rail-tenure {
  display: block;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6C4DFF;
  margin-top: 8px;
}

/* PR — Ford verified quote (2026-06-07) — story-rail-quote class */
.story-rail-quote {
  margin: clamp(20px, 2.5vw, 28px) 0;
  padding: clamp(18px, 2vw, 24px);
  background: #FFFFFF;
  border-left: 3px solid #6C4DFF;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 20px rgba(6, 31, 61, 0.05);
}
.story-rail-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.1rem);
  line-height: 1.55;
  color: #061F3D;
  font-style: italic;
  margin: 0 0 10px;
}
.story-rail-quote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6C4DFF;
  font-style: normal;
}

/* =========================================================================
   PR — 4 Verified Quotes Typography Cleanup (2026-06-07)
   Reconciles overlapping rules from prior PRs. Establishes one clean
   hierarchy across 3 anchor cards + 3 support cards.

   HIERARCHY (top to bottom inside each anchor):
     1. Logo (visual primacy)
     2. Tag — small uppercase eyebrow, purple, 11px/0.12em
     3. Quote body — 20–24px medium weight, navy, italic
     4. Cite — 13px regular, gray, sentence case
     5. Link — existing hero-cta-secondary
   ========================================================================= */

/* --- Anchor: TAG (eyebrow style) --- */
.home-proof-anchor-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6C4DFF;
  line-height: 1.5;
}

/* --- Anchor: QUOTE BODY (refined, calmer, readable across 3 stacked cards) --- */
.home-proof-anchor-quote {
  margin: 0;
  padding: 0;
  border: 0;
  grid-column: 2;
}
.home-proof-anchor-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #061F3D;
  font-style: italic;
  margin: 0 0 18px;
  max-width: 760px;
}
.home-proof-anchor-quote p::before {
  content: "";
}
.home-proof-anchor-quote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #5E6A7D;
  text-transform: none;
  display: block;
}

/* --- Support: QUOTE BODY (smaller scale than anchor, italic for parity) --- */
.home-proof-support blockquote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #061F3D;
  font-style: italic;
  margin: 0 0 14px;
}
.home-proof-support blockquote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #5E6A7D;
  text-transform: none;
  display: block;
}

/* --- Support: NON-QUOTE (Microsoft program description) --- */
.home-proof-support-program {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 450;
  line-height: 1.55;
  color: #061F3D;
  font-style: normal;
  margin: 0 0 14px;
}
.home-proof-support cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #5E6A7D;
  text-transform: none;
  display: block;
}

/* --- 3-up support grid (was 2-col) --- */
.home-proof-supports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding: clamp(48px, 6vw, 80px) clamp(0px, 4vw, 56px);
  border-bottom: 1px solid #E9E7FF;
  align-items: start;
}
@media (max-width: 1100px) {
  .home-proof-supports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .home-proof-supports {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* --- Logo refinements --- */
.home-proof-anchor-logo {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  align-self: flex-start;
  display: block;
}
.home-proof-support-logo {
  height: 24px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  align-self: flex-start;
  display: block;
}

/* --- Customers page: rail quote styling parity with home anchors --- */
.story-rail-quote {
  margin: clamp(20px, 2.5vw, 28px) 0;
  padding: clamp(18px, 2vw, 24px);
  background: #F4F5F8;
  border-left: 3px solid #6C4DFF;
  border-radius: 0 10px 10px 0;
  box-shadow: none;
}
.story-rail-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #061F3D;
  font-style: italic;
  margin: 0 0 12px;
}
.story-rail-quote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #5E6A7D;
  text-transform: none;
  display: block;
}

/* =========================================================================
   PR — Mobile + formatting cleanup (2026-06-07 v=20260607e)
   Reasons:
   - Anchor 2-col grid collapsed badly on mobile (orphaned narrow col).
   - CTA link broke mid-phrase.
   - NVIDIA logo (green/black) became invisible under navy filter.
   - Uber JPG ballooned past constraints.
   - Tag · separators wrapped awkwardly.
   - Customer rail tenure tags removed (repetition).
   - Support cards weren't equal-height across the 3-up grid.
   ========================================================================= */

/* --- Anchor card: restructure for mobile-first stack --- */
.home-proof-anchor {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(40px, 5vw, 64px) clamp(0px, 3vw, 40px);
  border-top: 1px solid #E9E7FF;
  align-items: start;
}
.home-proof-anchor:last-of-type {
  border-bottom: 1px solid #E9E7FF;
}
@media (max-width: 768px) {
  .home-proof-anchor {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 0;
  }
  .home-proof-anchor-meta {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .home-proof-anchor-quote,
  .home-proof-anchor-link {
    grid-column: 1;
  }
}

/* --- Anchor: meta column on desktop is calm and balanced --- */
.home-proof-anchor-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 4px;
}

/* --- Anchor tag: wrap-safe, no mid-phrase break --- */
.home-proof-anchor-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6C4DFF;
  line-height: 1.6;
  display: block;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

/* --- Anchor CTA link: never breaks mid-phrase --- */
.home-proof-anchor-link {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.4;
}

/* --- Anchor logo: kill brand-distorting filter, render true colors --- */
.home-proof-anchor-logo {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  align-self: flex-start;
  display: block;
  filter: none;
}
@media (max-width: 768px) {
  .home-proof-anchor-logo {
    height: 28px;
    max-width: 130px;
  }
}

/* --- Anchor quote body: balanced + readable across viewports --- */
.home-proof-anchor-quote p {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: #061F3D;
  font-style: italic;
  margin: 0 0 14px;
  max-width: 720px;
  text-wrap: pretty;
}

/* --- Anchor cite: clear, sentence-case, never wrapping awkwardly --- */
.home-proof-anchor-quote cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #5E6A7D;
  text-transform: none;
  display: block;
  line-height: 1.5;
}

/* --- Support cards: equal-height flex, balanced typography --- */
.home-proof-supports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  padding: clamp(40px, 5vw, 64px) clamp(0px, 3vw, 40px);
  align-items: stretch;
}
@media (max-width: 980px) {
  .home-proof-supports {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .home-proof-supports {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }
}
.home-proof-support {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.home-proof-support-logo {
  height: 22px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  align-self: flex-start;
  display: block;
  filter: none;
}
.home-proof-support blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.home-proof-support blockquote p,
.home-proof-support-program {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  font-weight: 450;
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: #061F3D;
  font-style: italic;
  margin: 0;
  text-wrap: pretty;
}
.home-proof-support-program {
  font-style: normal;
}
.home-proof-support blockquote cite,
.home-proof-support cite {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.01em;
  color: #5E6A7D;
  text-transform: none;
  display: block;
  line-height: 1.4;
  margin-top: auto;
}

/* --- Customers rail: kill the navy filter that wrecks colored logos --- */
.story-rail-logo {
  max-width: 130px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 14px;
  filter: none;
}

/* --- Customers rail tag (industry/sector descriptor) --- */
.story-rail-tag {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6C4DFF;
  line-height: 1.5;
  display: block;
}

/* --- Mobile: customers rail stack visual ABOVE body, not floating beside --- */
@media (max-width: 768px) {
  .story-rail {
    grid-template-columns: 1fr !important;
  }
  .story-rail-visual,
  .story-rail-visual-right {
    order: -1;
    margin-bottom: 16px;
  }
}

/* PR — Homepage elevation (2026-06-07 v=20260607g) */
.home-proof-sub {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 450;
  line-height: 1.55;
  color: #5E6A7D;
  letter-spacing: 0.005em;
  margin: 14px 0 0;
  max-width: 720px;
}

/* PR — Leaders page rebuild (2026-06-07 v=20260607n)
   3-column variant of home-pillars-grid for "FOR THE BUSINESS / ENTERPRISE / LEADERSHIP" */
.home-pillars-grid.home-pillars-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-pillars-grid.home-pillars-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.home-pillars-grid.home-pillars-grid-5 .home-pillar-title {
  font-size: clamp(.95rem, .78rem + .42vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: -.015em;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.home-pillars-grid.home-pillars-grid-5 .home-pillar-body {
  font-size: clamp(.88rem, .8rem + .2vw, .98rem);
  line-height: 1.45;
}
.home-pillars-grid.home-pillars-grid-5 .home-pillar-tag {
  font-size: 10px;
  letter-spacing: 0.12em;
}
@media (max-width: 1180px) {
  .home-pillars-grid.home-pillars-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .home-pillars-grid.home-pillars-grid-5 {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 980px) {
  .home-pillars-grid.home-pillars-grid-3 {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* PR — Solutions H2 fix (2026-06-07 v=20260607o)
   1. Apply accent color matching homepage hero
   2. Prevent mid-word breaks on narrow viewports
   Scoped to solutions.html operating-model section. */
.solutions-intro h2 {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: manual !important;
  text-wrap: balance;
}
.solutions-intro h2 .accent {
  color: #6C4DFF;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* On very narrow viewports allow Infrastructure to wrap to next line, but never mid-word */
@media (max-width: 420px) {
  .solutions-intro h2 {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    line-height: 1.15;
  }
}

/* =========================================================================
   FIX: Solution card vertical alignment (2026-06-08)

   Problem: Inside .solution-card the structure is:
     <span class="tag">BEFORE</span>
     <div><h3>Title</h3><p>Body</p></div>

   When titles wrap to different line counts across the row (e.g.
   "Parallel motions." = 1 line, "One accountable layer." = 2 lines),
   the bodies start at different vertical positions — cards look
   ragged across the row.

   Fix:
   1. Make .solution-card a flex column so the inner <div> can grow.
   2. Reserve a consistent min-height on the H3 = 2 lines worth so
      paragraphs always start at the same Y across the row.
   3. Cap H3 line-height to a known value so min-height math is stable.
   ========================================================================= */
html body .solution-card {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-3, .75rem) !important;
}
/* The inner <div> wraps <h3>+<p>. Make it flex so we can control
   spacing between elements, and let it grow to fill the card. */
html body .solution-card > div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html body .solution-card h3 {
  /* Reserve 2 lines of headline height so single-line titles still
     align their bodies with multi-line peers in the same row. */
  line-height: 1.18 !important;
  min-height: calc(1.18em * 2) !important;
  margin: 0 0 var(--space-3, .75rem) 0 !important;
}
html body .solution-card p {
  margin: 0 !important;
}

/* UNIFORM INTERNAL SPACING (cards size to natural content)

   Strategy: cards size to their own content. Each card has identical
   internal rhythm — tag, headline, body, uniform bottom padding — so
   the visual spacing reads as a consistent enterprise grid even
   though card heights vary by body length.

   This is the same pattern used by Stripe, Linear, and Vercel marketing
   sites: equal internal spacing > equal external heights when copy
   length varies. The grid-row tops align (because all rows start at
   the same Y) and the bottoms are ragged-but-intentional. */
html body .solution-cards {
  align-items: start !important;
}
html body .solution-card > div {
  /* Don't grow the inner div — let it hug content tightly. */
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

/* On narrow screens cards stack — reserved 2-line height no longer
   needed because each card is full-width. Reset to natural height. */
@media (max-width: 760px) {
  html body .solution-card h3 {
    min-height: 0 !important;
  }
}

/* =========================================================================
   HERO OPERATOR DASHBOARD VISUAL (2026-06-08)
   
   Replaces the flat MongoDB text quote on the right side of the homepage
   hero with a rich, brand-defining operator dashboard: a navy translucent
   frame containing a central "Operating Layer" hub plus 4 floating metric
   chips (Engaged / Compliance / Payroll / Governance) connected by subtle
   lines. Caption underneath retains the MongoDB proof point.
   
   Differentiates from Remote.com's consumer-EOR globe by focusing on
   operator metrics — the right-side anchor for enterprise positioning.
   ========================================================================= */

.hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: clamp(8px, 1.5vw, 24px);
  opacity: 0;
  animation: heroFadeIn 0.8s ease-out 0.9s forwards;
}

.hero-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.92;
  max-width: 560px;
  background: linear-gradient(160deg, #0A1F3D 0%, #061735 55%, #0B1B3F 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 60px -20px rgba(6, 23, 53, 0.45),
    0 12px 28px -12px rgba(6, 23, 53, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

/* Subtle dot-grid background */
.hero-visual-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  opacity: 0.85;
  pointer-events: none;
}

/* Indigo glow behind hub */
.hero-visual-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(108, 77, 255, 0.32) 0%,
      rgba(108, 77, 255, 0.18) 22%,
      rgba(108, 77, 255, 0.06) 38%,
      transparent 60%);
  pointer-events: none;
  filter: blur(2px);
}

/* Connector lines */
.hero-visual-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero-visual-lines line {
  stroke: rgba(170, 150, 255, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  vector-effect: non-scaling-stroke;
}

/* Central hub */
.hero-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  padding: 18px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(108, 77, 255, 0.22) 0%, rgba(108, 77, 255, 0.10) 100%);
  border: 1px solid rgba(140, 115, 255, 0.5);
  box-shadow:
    0 18px 36px -10px rgba(108, 77, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  min-width: 168px;
  text-align: center;
}
.hero-hub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hero-hub-label {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(220, 215, 255, 0.85);
  text-transform: uppercase;
}
.hero-hub-name {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 2px;
}
.hero-hub-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #B8FFD8;
  margin-top: 6px;
}
.hero-hub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
  animation: heroHubPulse 2.4s ease-in-out infinite;
}
@keyframes heroHubPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); opacity: 1; }
  50%      { box-shadow: 0 0 12px rgba(74, 222, 128, 1); opacity: 0.75; }
}

/* Floating metric chips */
.hero-chip {
  position: absolute;
  z-index: 2;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  box-shadow:
    0 20px 40px -12px rgba(6, 23, 53, 0.50),
    0 6px 14px -6px rgba(6, 23, 53, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  min-width: 152px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: heroChipFloat 8s ease-in-out infinite;
}
.hero-chip-1 { top: 6%;  left: 4%;  animation-delay: 0s;    }
.hero-chip-2 { top: 6%;  right: 4%; animation-delay: -2s;   }
.hero-chip-3 { bottom: 6%; left: 4%; animation-delay: -4s;  }
.hero-chip-4 { bottom: 6%; right: 4%; animation-delay: -6s; }

@keyframes heroChipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.hero-chip-label {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #6C4DFF;
  text-transform: uppercase;
}
.hero-chip-value {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #061F3D;
  line-height: 1.1;
  margin-top: 4px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hero-chip-unit {
  font-size: 11px;
  font-weight: 500;
  color: #5E6A7D;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.hero-chip-sub {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #5E6A7D;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.hero-chip-dot-green {
  background: #4ADE80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

/* Caption with MongoDB proof under the frame */
.hero-visual-caption {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0 4px;
}
.hero-visual-caption-logo {
  height: 22px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  opacity: 0.85;
  align-self: flex-start;
}
@media (max-width: 1023px) {
  .hero-visual-caption-logo { align-self: center; }
}
.hero-visual-caption-text {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #5E6A7D;
  font-style: italic;
  max-width: 480px;
}
.hero-visual-caption-link {
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #061F3D;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
  transition: color 200ms ease;
}
.hero-visual-caption-link span {
  display: inline-block;
  transition: transform 200ms ease;
}
.hero-visual-caption-link:hover { color: #6C4DFF; }
.hero-visual-caption-link:hover span { transform: translateX(4px); }

/* --- Responsive: chips shrink, hub stays centered ---------------------- */
@media (max-width: 1199px) {
  .hero-visual-frame { max-width: 480px; }
  .hero-chip { min-width: 132px; padding: 12px 14px; }
  .hero-chip-value { font-size: 19px; }
  .hero-hub { padding: 14px 18px; min-width: 148px; }
  .hero-hub-name { font-size: 19px; }
}

@media (max-width: 1023px) {
  /* Stacks under copy column. Center the dashboard. */
  .hero-visual { align-items: center; }
  .hero-visual-frame { max-width: 520px; width: 100%; }
  .hero-visual-caption { align-items: center; text-align: center; }
  .hero-visual-caption-text { text-align: center; }
}

@media (max-width: 640px) {
  .hero-visual-frame { aspect-ratio: 1 / 1.02; }
  .hero-chip { min-width: 106px; max-width: 46%; padding: 9px 11px; }
  .hero-chip-label { font-size: 8px; letter-spacing: 0.12em; }
  .hero-chip-value { font-size: 15px; }
  .hero-chip-sub { font-size: 9px; }
  .hero-hub { padding: 10px 14px; min-width: 116px; }
  .hero-hub-name { font-size: 15px; }
  .hero-hub-label { font-size: 8px; }
  .hero-chip-1 { top: 3%; left: 3%; }
  .hero-chip-2 { top: 3%; right: 3%; }
  .hero-chip-3 { top: 60%; left: 3%; }
  .hero-chip-4 { top: 60%; right: 3%; }
  .hero-chip-3 .hero-chip-value, .hero-chip-4 .hero-chip-value { font-size: 14px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-chip { animation: none; }
  .hero-hub-dot { animation: none; }
}

/* =========================================================================
   HERO ACTIVITY FEED (2026-06-08)
   Live operator events rotating at the bottom of the dashboard frame.
   Adds dynamism and reinforces "live infrastructure" positioning.
   ========================================================================= */

/* Move bottom chips up to make room for the feed strip. The hub sits at
   y=50% (center). Chips must clear the hub bottom edge AND the feed top edge.
   The frame is ~410px tall; hub bottom ~63%; feed top ~88%; chips fit in 63-86%. */
.hero-chip-3 { bottom: auto; top: 63%; }
.hero-chip-4 { bottom: auto; top: 63%; }

/* Tighten chip padding so they fit cleanly between hub and feed */
.hero-chip-3, .hero-chip-4 {
  padding: 10px 14px;
}
.hero-chip-3 .hero-chip-value, .hero-chip-4 .hero-chip-value {
  font-size: 19px;
  margin-top: 2px;
}

.hero-feed {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  z-index: 4;
  padding: 8px 14px;
  background: rgba(8, 22, 50, 0.78);
  border: 1px solid rgba(140, 115, 255, 0.22);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  height: 34px;
}
.hero-feed-label {
  flex-shrink: 0;
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #B8FFD8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 12px;
  border-right: 1px solid rgba(140, 115, 255, 0.18);
}
.hero-feed-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.8);
  animation: heroHubPulse 2.4s ease-in-out infinite;
}
.hero-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 18px;
  flex: 1;
  overflow: hidden;
}
.hero-feed-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Switzer', 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(225, 230, 245, 0.92);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: heroFeedCycle 18s linear infinite;
}
.hero-feed-item:nth-child(1) { animation-delay: 0s;    }
.hero-feed-item:nth-child(2) { animation-delay: 3.6s;  }
.hero-feed-item:nth-child(3) { animation-delay: 7.2s;  }
.hero-feed-item:nth-child(4) { animation-delay: 10.8s; }
.hero-feed-item:nth-child(5) { animation-delay: 14.4s; }

@keyframes heroFeedCycle {
  /* 18s total / 5 items = 3.6s each. Each item visible ~3s with fade in/out. */
  0%   { opacity: 0; transform: translateY(8px); }
  3%   { opacity: 1; transform: translateY(0); }
  17%  { opacity: 1; transform: translateY(0); }
  20%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
.hero-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
  flex-shrink: 0;
}
.hero-feed-meta {
  color: rgba(180, 195, 230, 0.75);
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(140, 115, 255, 0.14);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.hero-feed-time {
  margin-left: auto;
  color: rgba(180, 195, 230, 0.55);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 1199px) {
  .hero-feed { height: 34px; padding: 8px 12px; }
  .hero-feed-item { font-size: 11px; }
  .hero-feed-meta { font-size: 9px; }
}
@media (max-width: 640px) {
  .hero-chip-3, .hero-chip-4 { top: 54%; }
  .hero-feed { left: 3%; right: 3%; bottom: 3%; padding: 7px 10px; height: 30px; }
  .hero-feed-label { font-size: 8px; padding-right: 8px; }
  .hero-feed-item { font-size: 10px; gap: 6px; }
  .hero-feed-time { font-size: 9px; }
  .hero-feed-meta { font-size: 8px; padding: 1px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-feed-item {
    animation: none;
    /* Show only the first item statically */
  }
  .hero-feed-item:not(:first-child) { display: none; }
  .hero-feed-item:first-child { opacity: 1; transform: none; }
  .hero-feed-label::before { animation: none; }
}

/* =========================================================================
   PR — Editorial Polish 2026-06-09
   Scope:
     1) Restore .dark-band navy gradient (kill-rule was leaving it transparent
        and white text became invisible on Careers "Two ways in" band).
     2) Strip decorative grid + lavender frames from the About founder-note
        visual; lift the FOUNDER-LED. OPERATOR-RUN. caption to navy.
     3) Tighten the home Operator-led model section: remove orphan accent
        border on the infra paragraph; align CTA + meta column.
     4) Normalize HOW WE OPERATE INSIDE YOUR STACK headline + intro to match
        the rest of the homepage H2 system (capability / proof / pillars).
     5) Ford logo optical balance: widen marquee Ford so the oval renders
        true to brand and reads at parity with Amazon / Microsoft / MongoDB.
   Brand tokens: navy #061F3D · indigo #6C4DFF · slate #5E6A7D · off-white
   #F4F5F8 · lavender accent #E9E7FF.
   ========================================================================= */

/* ---- 1. Restore .dark-band navy background ------------------------------ */
section.dark-band,
.dark-band {
  background-color: #061F3D !important;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(216, 232, 255, .14), transparent 24rem),
    radial-gradient(circle at 88% 16%, rgba(124, 92, 255, .18), transparent 22rem),
    linear-gradient(145deg, #071426 0%, #061F3D 58%, #182b55 100%) !important;
}
/* Belt + suspenders: ensure body / list copy on the dark band stays readable
   even if a later cascade rule clips alpha. */
section.dark-band p,
section.dark-band .section-head p,
section.dark-band .list li {
  color: rgba(245, 248, 255, .82) !important;
}
section.dark-band .list strong {
  color: #FFFFFF !important;
}

/* ---- 2. About founder-note visual: remove grid + lift caption ---------- */
.founder-note-panel::before,
.founder-note-panel::after,
.founder-note-visual::before,
.founder-note-visual::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  border: 0 !important;
}
.founder-note-visual {
  background-image: none !important;
}
.founder-portrait-card {
  background: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E9E7FF !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(6, 31, 61, .10) !important;
  overflow: hidden;
}
.founder-portrait-card::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}
.founder-portrait-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}
.founder-visual-caption {
  background: transparent !important;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.founder-visual-caption span {
  color: #061F3D !important;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.founder-visual-caption i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6C4DFF !important;
  display: inline-block;
}

/* ---- 3. Home Operator-led model: clean alignment ----------------------- */
/* Remove the orphan left-accent on the "Under the hood..." infra paragraph
   so only the editorial quote owns the purple rule. Drop it into the same
   column as the quote and keep typographic rhythm. */
.home-operator-infra {
  border-left: 0 !important;
  padding-left: clamp(24px, 3vw, 40px) !important;
  margin-top: clamp(24px, 2.4vw, 32px) !important;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #5E6A7D;
  max-width: 760px;
}
.home-operator-infra strong { color: #061F3D; font-weight: 600; }
/* Push the eyebrow into the meta column with no underline glyph */
.home-operator-meta .home-eyebrow {
  margin-bottom: 12px;
}

/* ---- 4. Stack-modes headline parity with site H2 system ---------------- */
.home-stack-intro {
  text-align: left !important;
  margin: 0 0 clamp(56px, 7vw, 96px) !important;
  max-width: 880px !important;
  padding-left: clamp(0px, 4vw, 56px) !important;
}
.home-stack-headline {
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: clamp(34px, 4.5vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: #061F3D !important;
  margin: 0 0 28px !important;
}
.home-stack-headline .accent {
  color: #6C4DFF !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}
.home-stack-sub {
  font-size: clamp(17px, 1.25vw, 20px) !important;
  line-height: 1.55 !important;
  color: #5E6A7D !important;
  margin: 0 !important;
  max-width: 760px;
}
@media (max-width: 640px) {
  .home-stack-intro {
    text-align: left !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---- 5. Ford logo optical normalization -------------------------------- */
/* Marquee: replace the square 24x24 icon footprint with the wide-oval
   wordmark so it reads as a Ford brand mark, not a compressed glyph. */
.hero-marquee-logo.logo-ford img {
  width: 88px !important;
  max-width: 88px !important;
  height: 32px !important;
  object-fit: contain !important;
}
/* Proof anchor: keep all three anchor logos on the same optical baseline
   (32px height, contain) so Ford / NVIDIA / Amazon read as one set. */
.home-proof-anchor-logo {
  height: 32px !important;
  width: auto !important;
  max-height: 32px !important;
  object-fit: contain !important;
}

/* Place the infra micro-paragraph and CTA under the editorial quote in the
   right column of .home-operator-grid (not in the meta column at left). */
@media (min-width: 901px) {
  .home-operator-infra,
  .home-operator-cta {
    grid-column: 2 / 3 !important;
  }
}

/* =========================================================================
   PR — Editorial Polish 2026-06-09 / pt 2
   Scope:
     1) Client Portal hero (.login-system-panel) — restore navy gradient
        that the grid-sweep kill rule had stripped. Lift orbital label
        contrast so TalentOS / Governance / Curated / Shortlist are
        clearly readable on the dark sphere.
     2) Client Portal TalentOS card (.login-path.dark) — force H2 + eyebrow
        + sublabel to white so the wordmark is no longer navy-on-navy.
     3) TalentOS access band (.talentos-access) — force H2 + sub copy to
        white so "TalentOS is your secure workforce dashboard." is
        readable on the navy band.
     4) MongoDB case study outcomes (.case-study-band.dark) — force H2 +
        eyebrow to white so "More control across the global contractor
        lifecycle." is no longer navy-on-navy.
   ========================================================================= */

/* ---- 1. Client Portal hero panel + orbital labels --------------------- */
.login-system-panel {
  background-color: #061F3D !important;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    radial-gradient(circle at 58% 34%, rgba(124,92,255,.34), transparent 13rem),
    linear-gradient(145deg, #071426, #061F3D 56%, #12164d) !important;
  background-size: 34px 34px, 34px 34px, auto, auto !important;
}
.login-system-panel::before,
.login-system-panel::after {
  display: block !important;
  border: 1px solid rgba(180,177,255,.22) !important;
}
.login-node {
  background: rgba(11, 22, 48, .55) !important;
  border: 1px solid rgba(180, 177, 255, .35) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---- 2. Client Portal TalentOS card (.login-path.dark) ---------------- */
.login-path.dark {
  background-color: #061F3D !important;
  background-image:
    radial-gradient(circle at 78% 10%, rgba(124,92,255,.30), transparent 18rem),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(145deg, #071426 0%, #061F3D 60%, #141a54 100%) !important;
  background-size: auto, 34px 34px, 34px 34px, auto !important;
}
.login-path.dark h2,
.login-path.dark .login-path-sub {
  color: #FFFFFF !important;
}
.login-path.dark .eyebrow {
  color: #C7B8FF !important;
}
.login-path.dark p,
.login-path.dark li,
.login-path.dark .login-list li {
  color: rgba(245, 248, 255, .82) !important;
}
.login-path.dark .login-domain {
  color: rgba(245, 248, 255, .60) !important;
}

/* ---- 3. TalentOS access band (.talentos-access) ----------------------- */
.talentos-access {
  background-color: #061F3D !important;
  background-image:
    radial-gradient(circle at 78% 8%, rgba(124,92,255,.32), transparent 19rem),
    linear-gradient(145deg, #071426 0%, #061F3D 60%, #141a54 100%) !important;
  background-size: auto, auto !important;
}
.talentos-access h2 {
  color: #FFFFFF !important;
}
.talentos-access p {
  color: rgba(245, 248, 255, .82) !important;
}
.talentos-access .eyebrow {
  color: #C7B8FF !important;
}
.talentos-access .talentos-domain {
  color: rgba(245, 248, 255, .60) !important;
}

/* ---- 4. MongoDB outcomes band (.case-study-band.dark) ----------------- */
.case-study-band.dark {
  background-color: #142B56 !important;
}
.case-study-band.dark h2,
.case-study-band.dark h3 {
  color: #FFFFFF !important;
}
.case-study-band.dark .eyebrow {
  color: #C7B8FF !important;
}
.case-study-band.dark > p,
.case-study-band.dark p:not(.eyebrow) {
  color: rgba(245, 248, 255, .82) !important;
}

/* =========================================================================
   PR — Why Operators, Not Software section · alignment + accent
   The .home-moat class scopes overrides only to the moat sections without
   breaking the centered .home-pillars used by "One system across the work".
   ========================================================================= */
.home-pillars.home-moat .home-pillars-intro {
  max-width: 880px !important;
  margin: 0 0 clamp(48px, 6vw, 80px) !important;
  padding-left: clamp(0px, 4vw, 56px) !important;
  padding-right: 0 !important;
  text-align: left !important;
}
.home-pillars.home-moat .home-pillars-headline {
  font-size: clamp(34px, 4.5vw, 64px) !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: #061F3D !important;
  margin: 0 0 28px !important;
}
.home-pillars.home-moat .home-pillars-headline .accent {
  color: #6C4DFF !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}
.home-pillars.home-moat .home-pillars-sub {
  font-size: clamp(17px, 1.25vw, 20px) !important;
  line-height: 1.55 !important;
  color: #5E6A7D !important;
  max-width: 760px !important;
}
@media (max-width: 640px) {
  .home-pillars.home-moat .home-pillars-intro {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================================
   PR — Page-specific wayfinding badge on the operator-dashboard hero
   Floats above .hero-visual-frame as a centered eyebrow tag so it never
   collides with the corner chips (ENGAGED / COMPLIANCE / PAYROLL / GOVERNANCE).
   Subtle lavender border on transparent navy. Anchors the visitor to where
   they are in the IA without disrupting the shared dashboard composition.
   ========================================================================= */
.hero-visual {
  position: relative;
}
.hero-visual-page-tag {
  display: block;
  width: fit-content;
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(6, 31, 61, 0.06);
  border: 1px solid rgba(108, 77, 255, 0.28);
  color: #061F3D;
  font-family: 'Switzer', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
[data-theme="dark"] .hero-visual-page-tag {
  background: rgba(13, 23, 55, 0.78);
  border-color: rgba(180, 177, 255, 0.38);
  color: rgba(220, 215, 255, 0.96);
}
@media (max-width: 640px) {
  .hero-visual-page-tag {
    font-size: 9.5px;
    padding: 5px 12px;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
  }
}

/* ========================================================================
   METRIC STRIP - Sustainable Talent investor/buyer proof
   Sits between hero and three-tiers block on homepage. Five compact
   stat tiles in a single horizontal band on a soft navy gradient.
   ======================================================================== */
.metric-strip {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
  background:
    radial-gradient(circle at 84% 18%, rgba(124,92,255,.22), transparent 24rem),
    linear-gradient(145deg, #071426 0%, #061F3D 62%, #15164f 100%);
  color: #fff;
  position: relative;
}
.metric-strip::before,
.metric-strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(180, 177, 255, 0.12);
}
.metric-strip::before { top: 0; }
.metric-strip::after { bottom: 0; }
.metric-strip-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.4rem);
  align-items: start;
}
.metric-strip-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
  white-space: nowrap;
}
.metric-strip-item .metric-unit {
  display: inline;
  font-size: 0.45em;
  font-weight: 600;
  margin-left: 6px;
  color: rgba(199, 184, 255, .82);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  vertical-align: baseline;
}
.metric-strip-item span:not(.metric-unit) {
  display: block;
  margin-top: 12px;
  color: rgba(245, 243, 238, .68);
  font-size: clamp(.82rem, .78rem + .12vw, .92rem);
  line-height: 1.45;
}
@media (max-width: 1100px) {
  .metric-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 680px) {
  .metric-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .metric-strip-grid { grid-template-columns: 1fr; }
}