/* ============================================================
   INOVAFLOW — shared stylesheet (local preview build)
   Assembled from the live site's per-page CSS so the design,
   spacing and animation language carry over unchanged.
   ============================================================ */



/* Self-hosted fonts */
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/dm-sans-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg-dark: #09090b;
  --bg-dark-card: #131316;
  --bg-dark-card-hover: #1a1a1f;
  --bg-light: #fafafa;
  --bg-light-card: #ffffff;
  --bg-light-subtle: #f2f2f4;
  --text-white: #f0f0f2;
  --text-gray: #8a8a8e;
  --text-dark: #18181b;
  --text-dark-sub: #6e6e76;
  --accent: #f97316;
  --accent-hover: #c2410c;
  --accent-soft: rgba(249,115,22,0.08);
  --blue: #3b82f6;
  --blue-soft: rgba(59,130,246,0.08);
  --green: #22c55e;
  --green-soft: rgba(34,197,94,0.08);
  --border-dark: #1e1e24;
  --border-light: #e4e4e7;
  --font-body: 'DM Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bare inline links (FAQ answers, paragraph copy) — every nav/button/card link
   already carries its own class-based color, which outranks this by specificity. */
a { color: var(--accent); text-decoration-color: rgba(249,115,22,0.4); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }


/* ===== RESPONSIVE CTA ===== */
.cta-short { display: none; }

/* ===== HAMBURGER ===== */
.nav-hamburger {
  display: none; background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-hamburger svg { display: block; }

/* ===== MOBILE MENU ===== */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(9,9,11,0.97); backdrop-filter: blur(24px);
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.mobile-menu.open { display: flex; }
.mobile-menu-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; cursor: pointer; color: var(--text-gray);
}
.mobile-menu-close:hover { color: var(--text-white); }
.mobile-menu a {
  color: var(--text-gray); text-decoration: none;
  font-size: 18px; font-weight: 500; transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--text-white); }
.mobile-menu .mm-cta {
  color: var(--accent); font-weight: 700;
}
.mobile-menu .mm-email {
  color: var(--text-gray); font-size: 14px; opacity: 0.5;
}


/* ===== HERO (compact subpage) ===== */
.hero-wrapper {
  background: #0f0f12;
  position: relative;
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero {
  --hero-h1: 2.75rem;
  --hero-body: 1rem;
  padding: 100px 48px 72px;
  position: relative; overflow: hidden;
  max-width: 1200px; margin: 0 auto;
  width: 100%;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
}

.hero-breadcrumb {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-gray);
  margin-bottom: 20px;
}
.hero-breadcrumb a {
  color: var(--text-gray);
  text-decoration: none;
  transition: color 0.2s;
}
.hero-breadcrumb a:hover { color: var(--text-white); }
.hero-breadcrumb .bc-sep { margin: 0 8px; }
.hero-breadcrumb .bc-current { color: var(--text-white); }

.hero h1 {
  font-size: var(--hero-h1);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.035em; margin-bottom: 24px;
  max-width: 720px;
}

.hero h1 .dim { color: var(--text-gray); }

.hero-sub {
  color: var(--text-gray); font-size: var(--hero-body); line-height: 1.65;
  max-width: 600px; margin-bottom: 40px;
}

.hero-sub strong { color: var(--text-white); font-weight: 700; }

/* ===== HERO FLOW DIAGRAM ===== */
.hero-flow { max-width: 520px; margin-bottom: 32px; }
.hero-flow-row { display: flex; align-items: center; justify-content: center; gap: 0; }
.hero-flow-node {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 16px; border-radius: 24px; border: 1.5px solid;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  white-space: nowrap; min-width: 140px; text-align: center;
  text-decoration: none; cursor: pointer; transition: opacity 0.2s;
}
.hero-flow-node:hover { opacity: 0.75; }
.hero-flow-node.node-saas { border-color: var(--accent); color: var(--accent); min-width: 150px; font-weight: 700; font-size: 13px; }
.hero-flow-node.node-enterprise { border-color: var(--text-gray); color: var(--text-gray); }
.hero-flow-arrow { display: flex; align-items: center; color: var(--text-gray); padding: 0 6px; opacity: 0.5; }
.hero-flow-arrow svg { width: 32px; height: 12px; }
.hero-flow-label { text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-gray); margin-top: 14px; opacity: 0.6; }
.hero-flow-col { display: none; }
.hero-flow-arrow-down { display: none; }

.hero-ctas { display: flex; align-items: center; gap: 14px; margin-bottom: 48px; }

/* ===== HERO LOGO ===== */
.hero-logo-wrap {
  position: relative;
  width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* 3D Y-axis API spinner */
.hero-spinner-scene {
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.api-text {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  font-size: 52px;
  color: #fff;
  letter-spacing: -1px;
  white-space: nowrap;
  transform-style: preserve-3d;
  animation: spinY 5s ease-in-out infinite;
}
.api-text .brace {
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: 48px;
  opacity: 0.7;
  color: var(--accent);
}
@keyframes spinY {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.hero-trust {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-gray);
  opacity: 0.6;
}

/* ===== SECTION DIVIDER ===== */
.section-divider {
  border: none;
  height: 1px;
  background: var(--border-light);
  margin: 0 80px;
}

/* ===== LIGHT SECTIONS ===== */
.section-light { background: var(--bg-light); color: var(--text-dark); padding: 120px 48px; }
.section-dark { background: var(--bg-dark); color: var(--text-white); padding: 120px 48px; }

.section-inner { max-width: 1100px; margin: 0 auto; }

.section-label {
  display: inline-block; font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 16px;
  color: #E8642C;
}
.section-label-light { color: #c2410c; }
.section-label-dark { color: #E8642C; }

.section-title {
  font-size: clamp(26px, 3.2vw, 40px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 20px;
}

.section-title .accent { color: var(--accent); }
.section-light .accent { color: #ea580c; }
.section-subtitle { font-size: 16px; color: var(--text-dark-sub); line-height: 1.6; max-width: 90%; }
@media (max-width: 768px) { .section-subtitle { max-width: 100%; } }

/* Section footer note (Round 30) — the trailing line under a grid/table in a
   section. Same measure as .section-subtitle so a link at the end never breaks
   mid-phrase, and so notes stop each picking their own ad-hoc max-width. */
.section-note {
  margin-top: 28px; font-size: 15px; line-height: 1.7;
  color: var(--text-dark-sub); max-width: 90%;
}
.section-dark .section-note, .compare-section .section-note { color: var(--text-gray); }
.section-note-center { margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 768px) { .section-note { max-width: 100%; } }

/* ===== PROBLEM ACCORDION ===== */
.problem-accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; max-width: 900px; }

.problem-item {
  background: linear-gradient(165deg, #ffffff 0%, #fafbfc 100%);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px; overflow: hidden; transition: all 0.25s;
  box-shadow:
    0 1px 1px rgba(0,0,0,0.02),
    0 2px 4px rgba(0,0,0,0.02),
    0 8px 16px -4px rgba(0,0,0,0.04);
}
.problem-item:hover { border-color: rgba(0,0,0,0.1); }
.problem-item.active { border-color: rgba(0,0,0,0.06); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }

.problem-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px; cursor: pointer; gap: 16px;
}

.problem-header-left { display: flex; align-items: center; gap: 16px; }

.problem-num {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--text-dark-sub);
  background: var(--bg-light-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 11px; border-radius: 8px;
  letter-spacing: 0.06em;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

.problem-header h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); line-height: 1.35; }

.problem-toggle {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-light-subtle); display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.problem-toggle svg { transition: transform 0.25s; color: var(--text-dark-sub); }
.problem-item.active .problem-toggle { background: #d4d4d8; }
.problem-item.active .problem-toggle svg { transform: rotate(45deg); color: #52525b; }

.problem-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.problem-item.active .problem-body { max-height: 300px; }

.problem-content { padding: 0 28px 28px 84px; }
.problem-content p { font-size: 14.5px; color: var(--text-dark-sub); line-height: 1.7; }

.problem-pivot {
  margin-top: 36px; font-size: 16px; color: var(--text-dark-sub); line-height: 1.6;
  max-width: 740px;
}
.problem-pivot strong { color: var(--text-dark); }

/* ===== SYSTEMS GRID ===== */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 48px;
}

.sys-card {
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px 18px;
  transition: all 0.2s;
}
.sys-card:hover { border-color: #d4d4d8; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.sys-card h3 { font-size: 13.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.sys-card p { font-size: 12px; color: var(--text-dark-sub); line-height: 1.4; }

/* ===== CHECKLIST ===== */
.checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
  margin-top: 32px;
}

.checklist-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-dark-sub); line-height: 1.5;
}
.checklist-item svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }

.delivery-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: white; background: var(--accent);
  padding: 10px 20px; border-radius: 8px;
  margin-top: 32px;
}

/* ===== INTEGRATION FEED WIDGET ===== */
.feed-widget-wrap {
  background: var(--bg-dark);
  border-radius: 8px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feed-tabs { display: flex; gap: 8px; margin-bottom: 24px; width: 100%; max-width: 820px; }
.feed-tab {
  flex: 1; padding: 14px 16px; border-radius: 6px;
  background: transparent; border: 1px solid #1a1a1f;
  cursor: pointer; transition: all 0.25s;
  display: flex; align-items: center; gap: 12px;
}
.feed-tab:hover { border-color: #2a2a2f; }
.feed-tab.active { border-color: rgba(249,115,22,0.3); background: rgba(249,115,22,0.03); }
.feed-tab-icon { flex-shrink: 0; color: #3a3a40; transition: color 0.25s; }
.feed-tab.active .feed-tab-icon { color: #f97316; }
.feed-tab-title { font-size: 13px; font-weight: 700; color: #6e6e76; transition: color 0.25s; }
.feed-tab.active .feed-tab-title { color: #f0f0f2; }
.feed-tab-sub { font-family: var(--font-mono); font-size: 10px; color: #3a3a40; margin-top: 2px; }
.feed-tab.active .feed-tab-sub { color: #4a4a50; }
.feed-panel {
  width: 100%; max-width: 820px;
  background: #0c0c0f; border: 1px solid #1a1a1f;
  border-radius: 16px; overflow: hidden;
}
.feed-bar {
  padding: 12px 18px; border-bottom: 1px solid #141418;
  display: flex; align-items: center; gap: 8px;
}
.feed-bar-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.3);
  animation: dotP 2s ease-in-out infinite;
}
@keyframes dotP { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.feed-bar-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; color: #3a3a40;
}
.feed-bar-right {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 9px; color: #2a2a2f;
}
.feed-list {
  height: 440px;
  padding: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.feed-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  background: transparent; flex-shrink: 0;
  min-height: 41px; margin-bottom: 12px;
  opacity: 0; transform: translateY(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.6s ease;
}
.feed-row.show { opacity: 1; transform: translateY(0); }
.feed-row.fresh { background: rgba(59,130,246,0.03); }
.feed-row.exiting { opacity: 0; transform: translateY(8px); }
.feed-time {
  font-family: var(--font-mono);
  font-size: 9px; color: #2a2a2f;
  width: 52px; flex-shrink: 0; letter-spacing: 0.02em;
}
.feed-row.show .feed-time { color: #3a3a40; }
.feed-dir {
  font-family: var(--font-mono);
  font-size: 11px; width: 16px; text-align: center; flex-shrink: 0;
}
.feed-dir.out { color: #3b82f6; }
.feed-dir.in { color: #22c55e; }
.feed-src, .feed-tgt {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600;
  padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
  color: #4a4a50; background: rgba(255,255,255,0.03);
  border: 1px solid #1a1a1f;
}
.feed-action {
  font-size: 12px; color: #3a3a40; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-row.show .feed-action { color: #6e6e76; }
.feed-badge {
  font-family: var(--font-mono);
  font-size: 8px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.feed-badge.synced { color: #22c55e; background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.1); }
.feed-badge.mapped { color: #3b82f6; background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.1); }
.feed-badge.routed { color: #f97316; background: rgba(249,115,22,0.06); border: 1px solid rgba(249,115,22,0.1); }
.feed-badge.posted { color: #a78bfa; background: rgba(167,139,250,0.06); border: 1px solid rgba(167,139,250,0.1); }

/* ===== STEPS (HOW IT WORKS) ===== */
.steps-wrapper { position: relative; margin-top: 48px; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; z-index: 1; }

.step-card {
  background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 14px; padding: 32px; transition: border-color 0.2s;
}
.step-card:hover { border-color: rgba(255,255,255,0.08); }

.step-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: #c2410c; letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-block;
  margin-bottom: 18px;
}

.step-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.step-card .step-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-gray); margin-bottom: 12px; }
.step-card p { font-size: 14px; color: var(--text-gray); line-height: 1.6; }

/* ===== WHY US ===== */
.why-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.why-metric {
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.why-metric:hover {
  border-color: #d4d4d8;
}
.why-metric h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  width: fit-content;
}
.why-metric h3::after {
  content: '';
  display: block;
  height: 0.5px;
  background: linear-gradient(90deg, transparent 0%, #E8642C 15%, #E8642C 85%, transparent 100%);
  margin-top: 10px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-out;
}
.why-metric:hover h3::after { transform: scaleX(1); }
.why-metric p {
  font-size: 14px;
  color: var(--text-dark-sub);
  line-height: 1.5;
}

/* ===== COMPARE TABLE ===== */
.compare-section { background: var(--bg-dark); padding: 100px 48px; }
.compare-table-wrap { max-width: 1000px; margin: 48px auto 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 700px; border-collapse: separate; border-spacing: 0; }
.compare-table thead th {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 14px 16px; text-align: left; color: #6e6e76;
  border-bottom: 1px solid #1e1e24; position: sticky; top: 0; background: var(--bg-dark);
}
.compare-table thead th.hl { color: #f97316; border-bottom-color: rgba(249,115,22,0.2); }
.compare-table tbody td {
  font-size: 13px; color: #6e6e76; padding: 14px 16px;
  border-bottom: 1px solid #141418; vertical-align: top; line-height: 1.5;
}
.compare-table tbody td:first-child {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: #c0c0c4; white-space: nowrap; width: 140px;
}
.compare-table tbody td.hl { color: #c0c0c4; background: rgba(249,115,22,0.02); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-scroll-hint {
  display: none; text-align: center; font-family: var(--font-mono);
  font-size: 9px; color: #2a2a2f; margin-top: 12px;
}
@media (max-width: 768px) {
  .compare-section { padding: 64px 20px; }
  .compare-scroll-hint { display: block; }
}

/* ===== FIT CHECK ===== */
.fit-check { margin-top: 0; }

.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 40px;
}

.fit-col h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
}

.fit-col-good h3 { color: var(--green); }
.fit-col-bad h3 { color: var(--text-dark-sub); }

.fit-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fit-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-dark-sub);
  line-height: 1.5;
}

.fit-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.fit-list-good li svg { color: var(--green); }
.fit-list-bad li svg { color: var(--text-dark-sub); opacity: 0.5; }

/* ===== YES-CODE EXPANDABLE STRIP ===== */
.yescode-strip{background:var(--bg-dark);padding:0;overflow:hidden}
.yescode-strip-inner{max-width:900px;margin:0 auto;padding:60px 32px}
.yescode-header{display:flex;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none}
.yescode-header h3{color:var(--text-white);font-size:1.15rem;margin:0;flex:1}
.yescode-toggle{color:#666;font-size:1.4rem;transition:transform .3s ease;line-height:1}
.yescode-strip.active .yescode-toggle{transform:rotate(45deg)}
.yescode-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease .05s,padding .3s ease}
.yescode-strip.active .yescode-body{max-height:200px;opacity:1;padding-top:20px}
.yescode-body p{color:#aaa;font-size:.97rem;line-height:1.7;margin:0 0 16px 40px}
.yescode-body a{color:var(--accent);text-decoration:none;font-weight:600;font-size:.95rem;margin-left:40px}
.yescode-body a:hover{text-decoration:underline}

/* ===== FAQ ACCORDION ===== */
.faq-accordion { display: flex; flex-direction: column; gap: 12px; margin-top: 48px; max-width: 900px; margin-left: auto; margin-right: auto; }

.faq-item {
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 14px; overflow: hidden; transition: all 0.25s;
}
.faq-item:hover { border-color: #d4d4d8; }
.faq-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(249,115,22,0.06); }

.faq-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; cursor: pointer; gap: 16px;
}

.faq-header h3 { font-size: 16px; font-weight: 700; color: var(--text-dark); line-height: 1.35; }

.faq-toggle {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-light-subtle); display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.faq-toggle svg { transition: transform 0.25s; color: var(--text-dark-sub); }
.faq-item.active .faq-toggle { background: var(--accent); }
.faq-item.active .faq-toggle svg { transform: rotate(45deg); color: white; }

.faq-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-body { max-height: 640px; }

.faq-content { padding: 0 28px 24px; text-align: left; }
.faq-content p { font-size: 14.5px; color: var(--text-dark-sub); line-height: 1.7; }

/* ===== CTA ===== */
.cta-section {
  background: var(--bg-dark); padding: 120px 48px; text-align: center; position: relative;
}
.cta-section::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(249,115,22,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.cta-section h2 {
  font-size: clamp(28px, 3.5vw, 44px); font-weight: 800;
  letter-spacing: -0.03em; margin-bottom: 14px;
}

.cta-section .cta-sub {
  color: var(--text-gray); font-size: 16px; line-height: 1.6;
  max-width: 520px; margin: 0 auto 36px;
}

.cta-section .cta-buttons { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

.cta-section .cta-email {
  margin-top: 20px; font-size: 14px; color: var(--text-gray);
}
.cta-section .cta-email a { color: var(--text-gray); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.cta-section .cta-email a:hover { color: var(--text-white); }

/* ===== FOOTER ===== */
footer {
  background: var(--bg-dark); border-top: 1px solid var(--border-dark);
  padding: 40px 48px; display: flex; align-items: center; justify-content: space-between;
}
footer p { font-size: 12px; color: var(--text-gray); }
footer a { color: var(--text-gray); text-decoration: none; font-size: 12px; transition: color 0.2s; }
footer a:hover { color: var(--text-white); }
.footer-links { display: flex; gap: 24px; }

/* ===== NAV PAGE ICON ===== */
.nav-page-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0; height: 20px;
  opacity: 0; overflow: hidden;
  margin-right: 0;
  transition: opacity 0.3s ease, width 0.3s ease, margin 0.3s ease;
}
nav.hero-scrolled .nav-page-icon {
  opacity: 1; width: 30px; margin-right: 6px;
}
.nav-page-icon img {
  width: 20px; height: 20px; object-fit: contain;
  flex-shrink: 0;
  animation: navIconSpin 5s linear infinite;
}
.nav-page-icon .nav-api-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-white);
  white-space: nowrap;
  transform-style: preserve-3d;
  animation: navIconSpin 5s linear infinite;
}
.nav-page-icon .nav-api-text .brace {
  color: var(--accent);
  font-weight: 300;
}
@keyframes navIconSpin {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}


/* ===== HOMEPAGE HERO + GRID VISUAL ===== */
/* ===== HERO ===== */
.hero-home {
  --hero-h1: 4rem;
  --hero-body: 1.125rem;
  position: relative; overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 60px 48px;
}

.hero-home .hero-gradient {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 90% at 25% 50%, rgba(9,9,11,0.98) 0%, transparent 100%),
    linear-gradient(to right, rgba(9,9,11,0.99) 0%, rgba(9,9,11,0.95) 35%, rgba(9,9,11,0.7) 55%, rgba(9,9,11,0.2) 75%, rgba(9,9,11,0.0) 100%),
    linear-gradient(to bottom, rgba(9,9,11,0.6) 0%, rgba(9,9,11,0.0) 20%, rgba(9,9,11,0.0) 80%, rgba(9,9,11,0.6) 100%);
}

.hero-home .hero-inner {
  max-width: 1200px; width: 100%;
  position: relative; z-index: 3;
}

.hero-home .hero-text { position: relative; z-index: 2; max-width: 760px; }

.hero-pill {
  display: inline-block;
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  color: #E8642C; letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-home h1 {
  font-size: var(--hero-h1);
  font-weight: 800; line-height: 1.08;
  letter-spacing: -0.04em; margin-bottom: 24px;
}

.hero-home h1 .dim { color: var(--text-gray); }

.hero-home .hero-sub {
  color: var(--text-gray); font-size: var(--hero-body); line-height: 1.65;
  margin-bottom: 36px;
}

.hero-home .hero-sub strong { color: var(--text-white); font-weight: 700; }

.hero-home .hero-ctas { display: flex; align-items: center; gap: 14px; }

/* ===== GRID VISUAL ===== */
.grid-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; z-index: 1;
}
.grid-wrap { position: relative; z-index: 1; transform: scale(1.35) translateX(18%); transform-origin: center center; }
.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 72px);
  grid-template-rows: repeat(5, 72px);
  gap: 16px;
}
.cell {
  width: 72px; height: 72px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: box-shadow 0.8s ease;
}
.cell.active { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07); border-color: transparent; }
.cell-logo {
  position: absolute;
  width: 36px; height: 36px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}
.cell.active .cell-logo { opacity: 1; transform: scale(1); }
.conn-svg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.conn-line {
  fill: none;
  stroke: rgba(255,255,255,0.09);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 1s ease;
}
.conn-line.visible { opacity: 1; }


/* ===== G2 REVIEWS TICKER ===== */
.reviews-section {
  padding: 40px 48px 80px;
  max-width: 100%; margin: 0 auto;
  background: linear-gradient(
    to bottom in oklch,
    oklch(0.145 0.005 285) 0%,
    oklch(0.16 0.004 285) 8%,
    oklch(0.19 0.004 280) 16%,
    oklch(0.24 0.003 275) 24%,
    oklch(0.30 0.003 270) 32%,
    oklch(0.38 0.002 265) 40%,
    oklch(0.47 0.002 260) 48%,
    oklch(0.56 0.001 255) 56%,
    oklch(0.64 0.001 250) 64%,
    oklch(0.72 0.001 250) 72%,
    oklch(0.80 0.000 0) 80%,
    oklch(0.87 0.000 0) 88%,
    oklch(0.93 0.000 0) 94%,
    var(--bg-light) 100%
  );
  overflow: hidden;
  position: relative;
}
.reviews-section::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

.reviews-header {
  text-align: center; margin-bottom: 28px;
}
.reviews-header a {
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: opacity 0.2s;
}
.reviews-header a:hover { opacity: 0.8; }
.reviews-header .rh-stars { color: #f59e0b; font-size: 18px; letter-spacing: 2px; }
.reviews-header .rh-score { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--accent); }
.reviews-header .rh-label { font-size: 16px; color: var(--text-gray); font-weight: 500; }

.reviews-viewport {
  overflow: auto hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  position: relative;
}
.reviews-viewport::-webkit-scrollbar { display: none; }

.reviews-track {
  display: flex; gap: 16px;
  width: max-content;
}

.reviews-arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #18181b;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.reviews-arrow svg { width: 20px; height: 20px; }
.reviews-arrow-left { left: 16px; }
.reviews-arrow-right { right: 16px; }
.reviews-section:hover .reviews-arrow,
.reviews-arrow:focus-visible {
  opacity: 1; pointer-events: auto;
}
.reviews-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.reviews-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.review-card {
  flex-shrink: 0; width: 340px;
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 8px; padding: 28px;
  transition: border-color 0.2s;
  display: flex; flex-direction: column;
}
.review-card:hover { border-color: #d4d4d8; }

.review-stars { color: #f59e0b; font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }

.review-quote {
  font-size: 14px; color: var(--text-dark-sub); line-height: 1.6;
  margin-bottom: 16px;
}

.review-quote strong { color: var(--text-dark); font-weight: 600; }

.review-author { font-size: 12px; color: var(--text-dark-sub); margin-top: auto; }

/* ===== PROBLEM SECTION ===== */
.problems-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 48px;
}

.problem-card {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 9px;
  padding: 36px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 4px 24px -4px rgba(0,0,0,0.06);
}

.problem-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 32px -4px rgba(0,0,0,0.1);
  border-color: rgba(255,255,255,0.5);
}

.problem-card .pc-num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: #c2410c;
  display: inline-block;
  margin-bottom: 22px;
  letter-spacing: 0.06em;
}

.problem-card h3 {
  font-size: 17px; font-weight: 700; margin-bottom: 12px;
  color: var(--text-dark); line-height: 1.35; letter-spacing: -0.01em;
}
.problem-card p { font-size: 14.5px; color: var(--text-dark-sub); line-height: 1.7; }

.problem-pivot {
  margin-top: 36px; font-size: 16px; color: var(--text-dark-sub); line-height: 1.6;
  max-width: 740px;
}
.problem-pivot strong { color: var(--text-dark); }

/* ===== SERVICES ACCORDION ===== */
.services-header {
  margin-bottom: 48px;
}

.services-tagline {
  font-family: var(--font-mono); font-size: 15px; color: var(--text-gray);
  margin-top: 8px; letter-spacing: -0.01em;
}

.service-accordion { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }

.service-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px; overflow: hidden; transition: all 0.25s;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

.service-item:hover { background: rgba(255,255,255,0.06); }
.service-item.active { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }

.service-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px; cursor: pointer; gap: 16px;
}

.service-header-left { display: flex; align-items: center; gap: 16px; }

.service-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-icon img {
  width: 24px; height: 24px; object-fit: contain;
}
.service-header h3 { font-size: 17px; font-weight: 700; color: var(--text-white); }
.service-header .service-tagline { font-size: 13px; color: var(--text-gray); margin-top: 2px; }

.service-toggle {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
}
.service-toggle svg { transition: transform 0.25s; color: var(--text-gray); }
.service-item.active .service-toggle svg { transform: rotate(180deg); }

.service-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.service-item.active .service-body { max-height: 600px; }
.service-body .service-content { opacity: 0; transition: opacity 0.3s ease 0.1s; }
.service-item.active .service-body .service-content { opacity: 1; }

.service-content { padding: 0 28px 28px 84px; }

.service-content p { font-size: 14px; color: var(--text-gray); line-height: 1.65; margin-bottom: 20px; }

.service-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px; }
.service-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.06); color: var(--text-gray);
  border: 1px solid rgba(255,255,255,0.1);
}

.service-link {
  display: inline-block;
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
.service-link:hover { opacity: 0.8; }

/* Service accordion on a light section (Rossum experts "What we do") */
.service-accordion-light .service-item {
  background: var(--bg-light-card); border-color: var(--border-light);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.service-accordion-light .service-item:hover { background: #fff; border-color: #d4d4d8; }
.service-accordion-light .service-item.active { background: #fff; border-color: #d4d4d8; box-shadow: 0 8px 28px rgba(0,0,0,0.1); }
.service-accordion-light .service-icon { background: #101014; border-radius: 6px; }
.service-accordion-light .service-header h3 { color: var(--text-dark) !important; }
.service-accordion-light .service-header .service-tagline { color: var(--text-dark-sub); }
.service-accordion-light .service-toggle svg { color: var(--text-dark-sub); }
.service-accordion-light .service-content p { color: var(--text-dark-sub); }
.service-accordion-light .service-tag {
  background: rgba(0,0,0,0.04); color: var(--text-dark-sub); border-color: var(--border-light);
}
.service-accordion-light .service-link { color: var(--accent); }

/* ===== HOW WE WORK ===== */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }

.step-card {
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 32px; transition: border-color 0.2s;
}
.step-card:hover { border-color: #d4d4d8; }

/* Stacked horizontal-row variant (opt-in via bits.steps(layout="rows")) */
.steps-rows { grid-template-columns: 1fr; gap: 14px; }
.step-row { display: flex; align-items: center; gap: 32px; padding: 24px 32px; }
.step-row .step-row-head { display: flex; align-items: center; gap: 16px; flex-shrink: 0; width: 210px; }
.step-row .step-num {
  margin-bottom: 0; width: 34px; height: 34px; flex-shrink: 0;
  background: var(--accent); color: #fff; border-radius: 50%;
  font-size: 13px; letter-spacing: 0; text-transform: none;
  display: flex; align-items: center; justify-content: center;
}
.step-row h3 { margin-bottom: 0; }
.step-row p { margin: 0; }
@media (max-width: 720px) {
  .step-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .step-row .step-row-head { width: auto; }
}

.step-num {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  color: #c2410c; letter-spacing: 0.1em; text-transform: uppercase;
  display: inline-block;
  margin-bottom: 18px;
}

.step-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--text-dark); }
.step-card .step-time { font-family: var(--font-mono); font-size: 12px; color: var(--text-dark-sub); margin-bottom: 12px; }
.step-card p { font-size: 14px; color: var(--text-dark-sub); line-height: 1.6; }

/* ===== WHY US ===== */
.why-grid {
  display: flex; flex-direction: column; gap: 16px; margin-top: 48px;
  max-width: 900px;
}

.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 28px 32px;
  transition: border-color 0.3s, background 0.3s, backdrop-filter 0.3s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; justify-content: center;
  min-height: 80px;
}

.why-card:hover {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
}

.why-card h3 {
  font-size: 16px; font-weight: 700; color: var(--text-white); margin-bottom: 0; width: fit-content;
}
.why-card h3::after {
  content: '';
  display: block;
  height: 0.5px;
  background: linear-gradient(90deg, transparent 0%, #E8642C 15%, #E8642C 85%, transparent 100%);
  margin-top: 8px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-out;
}
.why-card:hover h3::after { transform: scaleX(1); }
.why-card p {
  font-size: 14px; color: var(--text-gray); line-height: 1.6;
  margin-top: 8px;
}

/* ===== FIT CHECK ===== */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }

.fit-col h3 {
  font-size: 14px; font-weight: 700; margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}

.fit-item {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 14px; font-size: 14px; line-height: 1.5;
}
.fit-item svg { flex-shrink: 0; margin-top: 2px; }
.fit-item.yes { color: var(--text-dark-sub); }
.fit-item.yes svg { color: var(--green); }
.fit-item.no { color: var(--text-dark-sub); }
.fit-item.no svg { color: #ef4444; }

/* ===== PARTNER CALLOUT ===== */
.partner-callout {
  max-width: 800px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 8px; padding: 32px;
  margin-top: 80px;
}

.partner-callout .pc-icon {
  width: 52px; height: 52px; border-radius: 7px; flex-shrink: 0;
  background: none; color: var(--blue);
  display: flex; align-items: center; justify-content: center;
}

.partner-callout h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; color: var(--text-dark); }
.partner-callout p { font-size: 14px; color: var(--text-dark-sub); line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; margin: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease; }
.partner-callout:hover p { max-height: 80px; opacity: 1; margin-top: 4px; }

.partner-callout a {
  color: #c2410c; text-decoration: none; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  transition: opacity 0.2s;
}
.partner-callout a:hover { opacity: 0.8; }
.partner-callout a svg { color: #c2410c; }


/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-pill, .hero-home h1, .hero-home .hero-sub, .hero-home .hero-ctas {
  animation: fadeInUp 0.5s ease-out both;
}
.hero-home h1 { animation-delay: 0.06s; }
.hero-home .hero-sub { animation-delay: 0.12s; }
.hero-home .hero-ctas { animation-delay: 0.18s; }
.grid-visual { animation: fadeInUp 0.8s ease-out 0.3s both; }


/* ===== MCP SCENARIO DEMO ===== */
/* ===== MCP SCENARIO DEMO ===== */
.scenario-tabs { display: flex; gap: 8px; width: 100%; max-width: 820px; margin: 0 auto 24px; }
.scenario-tab {
  flex: 1; padding: 14px 16px; border-radius: 6px;
  background: transparent; border: 1px solid #1a1a1f;
  cursor: pointer; transition: all 0.25s;
  display: flex; align-items: center; gap: 12px;
}
.scenario-tab:hover { border-color: #2a2a2f; }
.scenario-tab.active { border-color: rgba(249,115,22,0.3); background: rgba(249,115,22,0.03); }
.tab-icon { flex-shrink: 0; color: #3a3a40; transition: color 0.25s; }
.scenario-tab.active .tab-icon { color: #f97316; }
.tab-text { min-width: 0; }
.tab-title { font-size: 13px; font-weight: 700; color: #6e6e76; transition: color 0.25s; }
.scenario-tab.active .tab-title { color: #f0f0f2; }
.tab-sub { font-family: var(--font-mono); font-size: 10px; color: #3a3a40; margin-top: 2px; transition: color 0.25s; }
.scenario-tab.active .tab-sub { color: #4a4a50; }
.demo-container {
  width: 100%; max-width: 820px;
  display: grid; grid-template-columns: 280px 1fr;
  gap: 20px; min-height: 480px;
  background: #0c0c0f; border: 1px solid #1a1a1f;
  border-radius: 8px; padding: 20px;
  position: relative; overflow: hidden;
  margin-left: auto; margin-right: auto;
}
.demo-container::before {
  content: ''; position: absolute; top: -100px; right: -100px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(249,115,22,0.02) 0%, transparent 70%);
  pointer-events: none;
}
.chat-panel {
  display: flex; flex-direction: column; border-radius: 12px;
  background: #111114; border: 1px solid #1a1a1f; overflow: hidden;
}
.chat-bar {
  padding: 10px 14px; border-bottom: 1px solid #16161a;
  display: flex; align-items: center; gap: 8px;
}
.chat-bar-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.3); }
.chat-bar-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #3a3a40; }
.chat-bar-scenario { margin-left: auto; font-family: var(--font-mono); font-size: 9px; color: #2a2a2f; }
.chat-messages {
  flex: 1; padding: 14px; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 8px; overflow: hidden; min-height: 0;
}
.msg {
  max-width: 92%; padding: 10px 13px; border-radius: 11px;
  font-size: 12px; line-height: 1.55;
  opacity: 0; transform: translateY(6px); transition: all 0.35s ease;
}
.msg.show { opacity: 1; transform: translateY(0); }
.msg.user {
  background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.12);
  color: #8bb4f0; align-self: flex-end; border-bottom-right-radius: 4px;
}
.msg.assistant {
  background: rgba(249,115,22,0.05); border: 1px solid rgba(249,115,22,0.08);
  color: #b8906a; align-self: flex-start; border-bottom-left-radius: 4px;
}
.msg .val { color: #f0f0f2; font-weight: 600; }
.typing-dots {
  display: flex; gap: 4px; padding: 8px 13px;
  align-self: flex-start; opacity: 0; transition: opacity 0.2s;
}
.typing-dots.show { opacity: 1; }
.typing-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: #3a3a40;
  animation: bounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.mcp-bar {
  padding: 8px 14px; border-top: 1px solid #16161a;
  display: flex; align-items: center; gap: 8px; min-height: 32px;
}
.mcp-bar-icon {
  width: 16px; height: 16px; border-radius: 4px;
  background: rgba(249,115,22,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mcp-bar-icon svg { color: #f97316; }
.mcp-bar-text {
  font-family: var(--font-mono);
  font-size: 9px; color: #3a3a40; transition: color 0.3s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mcp-bar-text.active { color: #f97316; }
.mcp-bar-text.done { color: #22c55e; }
.tools-panel { display: flex; flex-direction: column; }
.tools-top-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; color: #1e1e24;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.tools-top-label .live {
  width: 5px; height: 5px; border-radius: 50%; background: #f97316;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.tools-list { display: flex; flex-direction: column; gap: 5px; flex: 1; justify-content: center; }
.t-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 8px;
  background: #0a0a0d; border: 1px solid #131316;
  transition: all 0.2s ease; opacity: 0.2;
}
.t-row.on { opacity: 1; background: #0f0f12; border-color: #1e1e24; }
.t-row.on.read-hl { border-color: rgba(59,130,246,0.2); background: rgba(59,130,246,0.02); }
.t-row.on.write-hl { border-color: rgba(249,115,22,0.2); background: rgba(249,115,22,0.02); }
.t-row.on.update-hl { border-color: rgba(167,139,250,0.2); background: rgba(167,139,250,0.02); }
.t-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; transition: all 0.4s; }
.t-dot.read { background: #1e3a5f; }
.t-dot.write { background: #3d1e08; }
.t-dot.update { background: #2a1f4e; }
.t-row.on .t-dot.read { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.3); }
.t-row.on .t-dot.write { background: #f97316; box-shadow: 0 0 6px rgba(249,115,22,0.3); }
.t-row.on .t-dot.update { background: #a78bfa; box-shadow: 0 0 6px rgba(167,139,250,0.3); }
.t-method {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 600; width: 32px; text-align: center;
  padding: 2px 0; border-radius: 3px; flex-shrink: 0;
}
.t-method.get { color: #2a4a7a; background: rgba(59,130,246,0.05); }
.t-method.post { color: #6b3a12; background: rgba(249,115,22,0.05); }
.t-method.put { color: #3d2a6e; background: rgba(167,139,250,0.05); }
.t-row.on .t-method.get { color: #60a5fa; background: rgba(59,130,246,0.1); }
.t-row.on .t-method.post { color: #fb923c; background: rgba(249,115,22,0.1); }
.t-row.on .t-method.put { color: #a78bfa; background: rgba(167,139,250,0.1); }
.t-name { font-family: var(--font-mono); font-size: 11px; color: #2a2a2f; flex: 1; transition: color 0.4s; }
.t-row.on .t-name { color: #f0f0f2; }
.t-sys {
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  color: #1e1e24; background: rgba(255,255,255,0.02); padding: 3px 8px;
  border-radius: 4px; border: 1px solid #131316; flex-shrink: 0; transition: all 0.4s;
}
.t-row.on .t-sys { color: #ffffff; font-weight: 700; border-color: rgba(249,115,22,0.4); background: rgba(249,115,22,0.12); }
.t-time {
  font-family: var(--font-mono);
  font-size: 9px; color: #16161a; width: 36px;
  text-align: right; flex-shrink: 0; transition: color 0.4s;
}
.t-row.on .t-time { color: #3a3a40; }
.sys-response {
  margin-top: 12px; padding: 14px; border-radius: 10px;
  background: #0a0a0d; border: 1px solid #131316;
  min-height: 72px; display: flex; align-items: center; transition: all 0.5s;
}
.sys-response.active { border-color: #1e1e24; }
.sys-response-inner {
  font-family: var(--font-mono);
  font-size: 10px; color: #3a3a40; line-height: 1.6;
  opacity: 0; transition: opacity 0.4s; width: 100%;
}
.sys-response.active .sys-response-inner { opacity: 1; color: #6e6e76; }
.sys-label { font-size: 9px; font-weight: 600; color: #8a8a8e; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.sys-label .sys-tool-hl { color: #f97316; }
.sys-data { color: #8a8a8e; }
.sys-data .hl { color: #f97316; font-weight: 600; }
.sys-data .hl-blue { color: #60a5fa; font-weight: 600; }

/* Scenario demo section dark wrapper */
.scenario-section { background: #09090b; padding: 80px 20px; }
.scenario-section .section-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.scenario-section .section-head h2 { font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 12px; color: var(--text-white); }
.scenario-section .section-head h2 .accent { color: #f97316; }
.scenario-section .section-head p { font-size: 15px; color: #6e6e76; line-height: 1.6; }
.scenario-section .section-label-dark { display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: #E8642C; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }

@media (max-width: 700px) {
  .demo-container { grid-template-columns: 1fr; min-height: auto; }
  .chat-panel { min-height: 300px; }
  .scenario-tabs { flex-direction: column; }
}



/* ===== VERTICAL TIMELINE ===== */
/* ===== VERTICAL TIMELINE (What We Do) ===== */
.timeline { margin-top: 48px; position: relative; max-width: 900px; }

.timeline::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-dark);
}

.timeline-step {
  display: flex;
  gap: 28px;
  position: relative;
  padding-bottom: 40px;
}
.timeline-step:last-child { padding-bottom: 0; }

.timeline-num {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 1;
}

.timeline-content {
  flex: 1;
  background: var(--bg-dark-card);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  transition: border-color 0.2s;
}
.timeline-content:hover { border-color: rgba(255,255,255,0.08); }

.timeline-text h3 {
  font-size: 17px; font-weight: 700; color: var(--text-white);
  margin-bottom: 8px;
}
.timeline-text p {
  font-size: 14.5px; color: var(--text-gray); line-height: 1.7;
}

.timeline-badge {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  margin-top: 2px;
}


/* ===== RESPONSIVE: 1024px ===== */
@media (max-width: 1024px) {
  .cta-full { display: none; }
  .cta-short { display: inline; }
  .why-metrics { grid-template-columns: 1fr; }
  .systems-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== RESPONSIVE: 768px ===== */
@media (max-width: 768px) {
  nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .hero { --hero-h1: 32px; --hero-body: 15px; padding: 80px 20px 48px; }
  .section-light, .section-dark, .cta-section { padding: 80px 20px; }
  .steps-grid { grid-template-columns: 1fr; }
  .why-metrics { grid-template-columns: 1fr; }
  .systems-grid { grid-template-columns: 1fr; }
  .checklist-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-logo-wrap { width: 140px; height: 140px; margin: 0 auto 24px; order: -1; }
  .api-text { font-size: 36px; }
  .api-text .brace { font-size: 32px; }
  .hero-logo-ring:nth-child(3) { width: 160px; height: 160px; }
  .hero-logo-glow { width: 120px; height: 120px; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .hero-flow-row { display: none; }
  .hero-flow-col { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .hero-flow-arrow-down { display: flex; align-items: center; justify-content: center; color: var(--text-gray); opacity: 0.5; padding: 6px 0; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
  .problem-content { padding: 0 20px 28px 20px; }
  .faq-content { padding: 0 20px 24px; }
  .cta-section .cta-buttons { flex-direction: column; }
  .fit-grid { grid-template-columns: 1fr; }
  .section-divider { margin: 0 20px; }
  .yescode-strip-inner { padding: 40px 20px; }
  .feed-widget-wrap { padding: 0 16px; }
  .feed-tabs { flex-direction: column; }
  .feed-action { font-size: 11px; }
  .feed-src, .feed-tgt { font-size: 8px; padding: 2px 6px; }
}

/* ============================================================
   NEW COMPONENTS — IA v2 (preview build)
   ============================================================ */

/* ===== NAV (rebuilt: strapline + mega menu) ===== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0 48px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9,9,11,0.8);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.nav-inner { max-width: 1200px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav-logo { text-decoration: none; display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-strapline {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--text-gray); letter-spacing: 0.02em; white-space: nowrap;
  padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.1);
  opacity: 0.85;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a {
  color: var(--text-gray); text-decoration: none;
  font-size: 13.5px; font-weight: 500; transition: color 0.2s;
}
.nav-links > a:hover, .nav-links > a.nav-active { color: var(--text-white); }
.nav-right { display: flex; align-items: center; gap: 16px; }

/* mega menu */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  color: var(--text-gray); text-decoration: none;
  font-size: 13.5px; font-weight: 500; transition: color 0.2s;
  cursor: default; display: flex; align-items: center; gap: 5px;
}
.nav-dropdown:hover .nav-dropdown-trigger, .nav-dropdown-trigger.nav-active { color: var(--text-white); }
.nav-dropdown-trigger svg { transition: transform 0.2s; }
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }

.mega {
  background: #0e0e12;
  position: absolute; top: 100%; left: 50%; margin-top: 14px;
  transform: translateX(-50%) translateY(-6px);
  width: 780px;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7);
  padding: 26px 26px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s ease, visibility 0.18s, transform 0.18s ease;
}
.nav-dropdown.open .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.mega::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }

.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mega-col { display: flex; flex-direction: column; }
.mega-col-head {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #E8642C; line-height: 1.5; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.07);
  min-height: 46px;
}
.mega-link {
  display: block; text-decoration: none;
  padding: 10px 12px; margin: 0 -12px 2px; border-radius: 9px;
  transition: background 0.16s;
}
.mega-link:hover { background: rgba(255,255,255,0.05); }
.mega-link-title {
  font-size: 13.5px; font-weight: 700; color: var(--text-white);
  display: flex; align-items: center; gap: 6px; margin-bottom: 3px;
}
.mega-link-title .arr { opacity: 0; transform: translateX(-3px); transition: all 0.16s; color: var(--accent); }
.mega-link:hover .arr { opacity: 1; transform: translateX(0); }
.mega-link-sub { font-size: 11.5px; color: var(--text-gray); line-height: 1.45; }

.mega-foot {
  margin: 22px -26px 0; padding: 14px 26px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.015);
  border-radius: 0 0 14px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mega-foot a {
  font-size: 12.5px; font-weight: 600; color: var(--text-gray);
  text-decoration: none; transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.mega-foot a:hover { color: var(--text-white); }
.mega-foot a.mega-foot-accent { color: var(--accent); }
.mega-foot a.mega-foot-accent:hover { color: #fb923c; }

/* ===== MOBILE MENU (scrollable, grouped) ===== */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(9,9,11,0.985); backdrop-filter: blur(24px);
  flex-direction: column; align-items: flex-start;
  gap: 0; padding: 76px 28px 40px; overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu .mm-label {
  color: #E8642C; font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  margin: 22px 0 10px; line-height: 1.5;
}
.mobile-menu .mm-label:first-of-type { margin-top: 0; }
.mobile-menu a { color: var(--text-gray); text-decoration: none; font-size: 16px; font-weight: 500; padding: 9px 0; transition: color 0.2s; }
.mobile-menu a:hover { color: var(--text-white); }
.mobile-menu .mm-top { font-size: 17px; font-weight: 700; color: var(--text-white); }
.mobile-menu .mm-sep { width: 100%; height: 1px; background: rgba(255,255,255,0.07); margin: 20px 0 4px; }
.mobile-menu .mm-cta { color: var(--accent); font-weight: 700; font-size: 17px; }
.mobile-menu .mm-email { color: var(--text-gray); font-size: 13px; opacity: 0.5; }

/* ===== HUB: SERVICE LINK CARDS ===== */
.hub-card {
  display: block; text-decoration: none;
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 14px; padding: 26px;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
.hub-card:hover { border-color: #d4d4d8; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.10); transform: translateY(-3px); }
.hub-card h4 { font-size: 16.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; letter-spacing: -0.01em; }
.hub-card p { font-size: 13.5px; color: var(--text-dark-sub); line-height: 1.6; margin-bottom: 14px; }
.hub-card-go { font-size: 13px; font-weight: 700; color: #c2410c; display: inline-flex; align-items: center; gap: 6px; }
.hub-card:hover .hub-card-go svg { transform: translateX(3px); }
.hub-card-go svg { transition: transform 0.2s; }

/* ===== PLATFORM TILE GRID ===== */
.plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.plat-tile {
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 12px; padding: 20px; transition: all 0.2s;
}
.plat-tile:hover { border-color: #d4d4d8; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.plat-tile-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.plat-tile-head img { width: 22px; height: 22px; object-fit: contain; }
.plat-tile h4 { font-size: 14.5px; font-weight: 700; color: var(--text-dark); }
.plat-tile p { font-size: 12.5px; color: var(--text-dark-sub); line-height: 1.55; }
.plat-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dark-sub);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light);
  display: flex; align-items: center; gap: 6px; opacity: 0.75;
}
.plat-tile.dim { opacity: 0.72; }

/* ===== FACT STRIP (dark, mono stats) ===== */
.fact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.fact {
  background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 14px; padding: 24px; transition: border-color 0.2s;
}
.fact:hover { border-color: rgba(255,255,255,0.1); }
.fact-num {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  color: var(--accent); letter-spacing: -0.02em; margin-bottom: 8px;
}
.fact h4 { font-size: 14.5px; font-weight: 700; color: var(--text-white); margin-bottom: 6px; }
.fact p { font-size: 13px; color: var(--text-gray); line-height: 1.55; }
/* ===== VENDOR BANNER (Rossum / Coupa) ===== */
.vendor-banner {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 7px 16px 7px 8px;
  font-size: 12.5px; color: var(--text-gray); margin-bottom: 22px;
}
.vendor-banner .vb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(34,197,94,0.5); margin-left: 6px; }
.vendor-banner strong { color: var(--text-white); font-weight: 700; }

/* ===== SPLIT (two-column prose block) ===== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; align-items: start; }
.split h3 { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 12px; letter-spacing: -0.01em; }
.split p { font-size: 14.5px; color: var(--text-dark-sub); line-height: 1.7; margin-bottom: 12px; }
.split-dark h3 { color: var(--text-white); }
.split-dark p { color: var(--text-gray); }

/* ===== AUDIENCE NOTE (off-nav page banner) ===== */
.aud-note {
  background: rgba(59,130,246,0.05); border: 1px solid rgba(59,130,246,0.16);
  border-radius: 12px; padding: 18px 22px; margin-top: 32px;
  display: flex; gap: 14px; align-items: flex-start;
}
.aud-note svg { flex-shrink: 0; color: var(--blue); margin-top: 1px; }
.aud-note p { font-size: 13.5px; color: var(--text-dark-sub); line-height: 1.6; }
.aud-note a { color: #1d4ed8; font-weight: 600; text-decoration: none; }
.aud-note a:hover { text-decoration: underline; }

/* ===== RESPONSIVE (new components) ===== */
@media (max-width: 1100px) {
  .nav-strapline { display: none; }
  .nav-links { gap: 22px; }
  .mega { width: 92vw; max-width: 720px; }
}
@media (max-width: 900px) {
  .plat-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-strip { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 768px) {
  .plat-grid { grid-template-columns: 1fr; }
  .mega { display: none; }
}

/* ===== HOMEPAGE HERO RESPONSIVE (scoped after rename) ===== */
@media (max-width: 1024px) {
  .hero-home { padding: 120px 24px 60px; min-height: auto; }
}
@media (max-width: 768px) {
  .hero-home { padding: 120px 20px 60px; --hero-h1: 40px; --hero-body: 16px; }
  .hero-home .hero-ctas { flex-direction: column; align-items: flex-start; }
  .grid-visual, .hero-home .hero-gradient { display: none; }
  .problems-grid, .why-grid { grid-template-columns: 1fr; }
  .service-content { padding: 0 20px 28px 20px; }
  .partner-callout { flex-direction: column; text-align: center; }
  .reviews-section { padding: 32px 20px 60px; }
  .reviews-arrow { display: none; }
  .timeline-step { grid-template-columns: 1fr; }
}


/* ===== BUTTONS (restored from live CSS) ===== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: #ea580c; color: white; border: none;
  padding: 9px 20px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.2s; text-decoration: none;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--text-white);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 9px 20px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.2s; text-decoration: none;
}
.btn-outline:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.2); }

/* Rossum-blue CTA (sampled from logos/rossum.webp) */
.btn-rossum-blue {
  display: inline-flex; align-items: center; gap: 7px;
  background: #0072ee; color: white; border: none;
  padding: 9px 20px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all 0.2s; text-decoration: none;
}
.btn-rossum-blue:hover { background: #0060c9; transform: translateY(-1px); }

/* Rossum pages: header + footer CTAs take the Rossum blue (hero stays orange) */
.rossum-page .nav-right .btn-primary,
.rossum-page .cta-section .btn-primary { background: #0072ee; }
.rossum-page .nav-right .btn-primary:hover,
.rossum-page .cta-section .btn-primary:hover { background: #0060c9; }
.rossum-page .mobile-menu .mm-cta { color: #0072ee; }

/* ===== HERO ART (non-spinning variants) ===== */
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes heroSpinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes heroPulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.hero-art { animation: heroFloat 6s ease-in-out infinite; }
.hero-art .orbit { transform-origin: 60px 60px; animation: heroSpinSlow 26s linear infinite; }
.hero-art .blip { animation: heroPulse 2.6s ease-in-out infinite; }
.hero-art .blip:nth-of-type(2) { animation-delay: 0.8s; }
.hero-art .blip:nth-of-type(3) { animation-delay: 1.6s; }

.hero-logo-cluster {
  display: grid; grid-template-columns: repeat(2, 60px); gap: 14px;
  animation: heroFloat 6s ease-in-out infinite;
}
.hero-logo-cluster div {
  width: 60px; height: 60px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.02);
  display: flex; align-items: center; justify-content: center;
}
.hero-logo-cluster div:nth-child(4) { border-style: dashed; border-color: rgba(249,115,22,0.35); }
.hero-logo-cluster img { width: 30px; height: 30px; object-fit: contain; }
.hero-logo-cluster .more {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--accent);
}

/* ============================================================
   FINAL RESPONSIVE OVERRIDES — must stay last in this file.
   The rebuilt nav rules above are unconditional, so the mobile
   rules have to be re-asserted after them.
   ============================================================ */
@media (max-width: 768px) {
  nav { padding: 0 18px; }
  .nav-links { display: none !important; }
  .nav-hamburger { display: block; }
  .nav-strapline { display: none; }
  .mega { display: none; }
  .nav-right { gap: 10px; }
  .btn-primary, .btn-outline, .btn-rossum-blue { padding: 8px 14px; font-size: 13px; }

  .hero { padding: 92px 20px 48px; }
  .hero-wrapper { min-height: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-logo-wrap { width: 130px; height: 130px; margin: 0 auto; order: -1; }
  .hero-logo-cluster { grid-template-columns: repeat(2, 52px); gap: 10px; }
  .hero-logo-cluster div { width: 52px; height: 52px; }
  .hero-art { width: 118px; height: 118px; }
  .hero-flow { max-width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn-primary, .hero-ctas .btn-outline, .hero-ctas .btn-rossum-blue { justify-content: center; }
  .hero-breadcrumb { font-size: 12px; }

  .section-light, .section-dark, .cta-section, .compare-section { padding: 64px 20px; }
  .plat-grid, .fact-strip, .split, .why-metrics,
  .systems-grid, .checklist-grid, .diff-grid, .steps-grid, .pair-grid, .deliver-grid,
  .fit-grid, .problems-grid, .why-grid { grid-template-columns: 1fr !important; }
  .split { gap: 24px; }
  .vendor-banner { font-size: 11.5px; align-items: flex-start; }
  .aud-note { flex-direction: column; gap: 10px; }
  .mega-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Belt and braces: nothing may push the page wider than the viewport. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ===== NAV: strapline (more visible) + compact submenu ===== */
.nav-strapline {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: #c3c3c9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-left: 11px;
  margin-left: 1px;
  border-left: 1px solid rgba(255,255,255,0.18);
  opacity: 1;
}
.nav-dropdown-trigger.is-link { text-decoration: none; cursor: pointer; }

.submenu {
  position: absolute; top: 100%; left: -14px; margin-top: 14px;
  min-width: 280px; padding: 8px;
  background: #0e0e12;
  border: 1px solid rgba(255,255,255,0.09); border-radius: 12px;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, visibility 0.18s, transform 0.18s ease;
  pointer-events: none;
}
.nav-dropdown.open .submenu {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.submenu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.submenu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  text-decoration: none; transition: background 0.16s;
}
.submenu a:hover { background: rgba(255,255,255,0.05); }
.submenu .sm-title { display: block; font-size: 13.5px; font-weight: 700; color: var(--text-white); margin-bottom: 2px; }
.submenu .sm-sub { display: block; font-size: 11.5px; color: var(--text-gray); line-height: 1.45; }
@media (max-width: 768px) { .submenu { display: none; } }

/* ============================================================
   MOTION — scroll reveal, hero entrance, flow pulses
   `.rv` is added by JS at runtime, so with JS disabled nothing
   is ever left hidden.
   ============================================================ */
.rv {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
  will-change: opacity, transform;
}
.rv-in { opacity: 1; transform: none; }
.rv-fade { transform: none; }              /* fade only, no rise */
.rv-scale { transform: translateY(10px) scale(0.985); }

/* Hero entrance on subpages (homepage keeps its own animation) */
.hero-wrapper .hero-breadcrumb,
.hero-wrapper .vendor-banner,
.hero-wrapper .hero h1,
.hero-wrapper .hero-sub,
.hero-wrapper .hero-flow,
.hero-wrapper .hero-ctas,
.hero-wrapper .hero-trust,
.hero-wrapper .hero-logo-wrap,
.hero-wrapper .build-anim,
.hero-wrapper .seq,
.hero-wrapper .gnt,
.hero-wrapper .flowc {
  animation: fadeInUp 0.6s cubic-bezier(0.22,0.61,0.36,1) both;
}
.hero-wrapper .hero-breadcrumb { animation-delay: 0.02s; }
.hero-wrapper .vendor-banner   { animation-delay: 0.06s; }
.hero-wrapper .hero h1         { animation-delay: 0.10s; }
.hero-wrapper .hero-sub        { animation-delay: 0.17s; }
.hero-wrapper .hero-flow       { animation-delay: 0.24s; }
.hero-wrapper .hero-ctas       { animation-delay: 0.30s; }
.hero-wrapper .hero-trust      { animation-delay: 0.36s; }
.hero-wrapper .hero-logo-wrap,
.hero-wrapper .build-anim,
.hero-wrapper .seq,
.hero-wrapper .gnt,
.hero-wrapper .flowc           { animation-delay: 0.22s; }
/* flowc carries a responsive scale() transform, so its entrance must not
   animate transform — fade only */
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero-wrapper .flowc { animation-name: heroFadeIn; }

/* Travelling pulse along the hero flow arrows */
.flow-dot { opacity: 0; }
.hero-flow-arrow .flow-dot   { animation: flowDotX 2.6s cubic-bezier(0.45,0,0.55,1) infinite; }
.hero-flow-arrow-down .flow-dot { animation: flowDotY 2.6s cubic-bezier(0.45,0,0.55,1) infinite; }
.hero-flow-row .hero-flow-arrow:nth-of-type(2) .flow-dot { animation-delay: 1.3s; }
@keyframes flowDotX {
  0%   { transform: translateX(0);    opacity: 0; }
  18%  { opacity: 0.85; }
  82%  { opacity: 0.85; }
  100% { transform: translateX(23px); opacity: 0; }
}
@keyframes flowDotY {
  0%   { transform: translateY(0);    opacity: 0; }
  18%  { opacity: 0.85; }
  82%  { opacity: 0.85; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* Flow node gets a soft accent glow as the pulse lands */
.hero-flow-node.node-saas { box-shadow: 0 0 0 0 rgba(249,115,22,0.35); animation: nodeGlow 2.6s ease-in-out infinite; }
@keyframes nodeGlow {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.0); }
  30%           { box-shadow: 0 0 0 6px rgba(249,115,22,0.06); }
}

/* Nav condenses slightly once you leave the hero */
nav { transition: height 0.28s ease, background 0.28s ease, box-shadow 0.28s ease; }
nav.hero-scrolled {
  height: 56px;
  background: rgba(9,9,11,0.92);
  box-shadow: 0 6px 24px -12px rgba(0,0,0,0.8);
}

/* Fact numbers pop a touch as they arrive */
.fact-num { transition: transform 0.5s cubic-bezier(0.22,0.61,0.36,1) 0.1s; }
.rv .fact-num { transform: translateY(6px) scale(0.94); }
.rv-in .fact-num { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1 !important; transform: none !important; }
}

/* 4 platform tiles balance better as 2x2 than 3+1 */
.plat-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .plat-grid-2 { grid-template-columns: 1fr; } }

/* ===== NAV: two-line white strapline ===== */
.nav-strapline {
  display: flex; flex-direction: column; justify-content: center;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,0.22);
  opacity: 1;
}
.nav-strapline span:last-child { color: rgba(255,255,255,0.62); }

/* mega menu column heads read as headers, not accents */
.mega-col-head { color: #ffffff; }


/* ===== SYSTEM CARDS WITH LOGOS (the list is the value — make it seen) ===== */
.systems-grid { gap: 14px; }
.sys-card {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 16px 16px 15px;
  border-radius: 12px;
}
.sys-logo {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), border-color 0.25s;
}
.sys-card:hover .sys-logo { transform: scale(1.08) rotate(-3deg); border-color: #d4d4d8; }
.sys-logo img { width: 23px; height: 23px; object-fit: contain; }
.sys-logo .mono {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: #6e6e76;
}
.sys-card h3 { margin-bottom: 3px; }
.systems-note {
  margin-top: 18px; font-size: 14px; color: var(--text-dark-sub); line-height: 1.6;
  max-width: 90%;
}
@media (max-width: 768px) { .systems-note { max-width: 100%; } }
.systems-note strong { color: var(--text-dark); }

/* ===== DELIVERY CTA (was a badge that looked like a button) ===== */
.delivery-cta-wrap {
  margin-top: 34px; display: inline-flex; flex-direction: column; align-items: flex-start;
}
.delivery-cta {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 600;
  padding: 13px 24px; letter-spacing: 0.01em;
  box-shadow: 0 8px 24px -10px rgba(249,115,22,0.7);
}
.delivery-cta:hover { transform: translateY(-2px); }
.delivery-hint {
  font-size: 12.5px; color: var(--text-dark-sub);
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
  display: flex; align-items: center; gap: 6px;
}
.delivery-cta-wrap:hover .delivery-hint,
.delivery-cta:focus-visible ~ .delivery-hint { max-height: 40px; opacity: 1; margin-top: 10px; }
.delivery-hint svg { color: var(--accent); flex-shrink: 0; }

/* ===== DELIVERABLE CARDS (Service 02 on enterprise page, light) ===== */
.deliver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
.deliver-card {
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 7px; padding: 18px 18px 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.deliver-card:hover { border-color: #d4d4d8; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.deliver-card .dc-icon {
  width: 20px; height: 20px; color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.deliver-card h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.deliver-card p { font-size: 12.5px; color: var(--text-dark-sub); line-height: 1.5; }

/* ===== SYSTEM-PAIR CARDS (Service 01 on enterprise page, dark) ===== */
.pair-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.pair-card {
  background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 8px; padding: 20px 20px 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.pair-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-2px); }
.pair-logos { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.pair-logo {
  width: 36px; height: 36px; border-radius: 6px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: center;
}
.pair-logo img { width: 21px; height: 21px; object-fit: contain; }
.pair-logo-generic { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #85858d; }
.pair-arr { color: #6e6e76; flex-shrink: 0; }
.pair-card h3 { font-size: 15px; font-weight: 700; color: var(--text-white); margin-bottom: 5px; }
.pair-card p { font-size: 13px; color: var(--text-gray); line-height: 1.5; }

/* why-metric cards on a dark section */
.why-metrics-dark .why-metric {
  background: var(--bg-dark-card); border-color: var(--border-dark);
}
.why-metrics-dark .why-metric:hover { border-color: rgba(255,255,255,0.12); }
.why-metrics-dark .why-metric h3 { color: var(--text-white); }
.why-metrics-dark .why-metric p { color: var(--text-gray); }

/* sys-card list on a dark section (Rossum experts: ERPs inside "Why teams choose us") */
.systems-grid-dark .sys-card { background: var(--bg-dark-card); border-color: var(--border-dark); }
.systems-grid-dark .sys-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.systems-grid-dark .sys-card h3 { color: var(--text-white); }
.systems-grid-dark .sys-card p { color: var(--text-gray); }

/* ============================================================
   BUILD ANIMATION v2 — code typed out, connector after connector
   ============================================================ */
.build-anim { width: 500px; flex-shrink: 0; }
.ba-editor {
  background: #0b0b0e; border: 1px solid #1e1e25; border-radius: 16px;
  overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.95);
}
.ba-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid #17171c; background: #09090c;
}
.ba-dot { width: 9px; height: 9px; border-radius: 50%; background: #1e1e24; }
.ba-dot.r { background: #47262a; } .ba-dot.y { background: #46381f; } .ba-dot.g { background: #23401f; }
.ba-file {
  margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px;
  color: #6a6a74; letter-spacing: 0.01em;
}
.ba-code {
  padding: 18px 20px 6px; min-height: 196px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.95;
}
.ba-code .ln {
  white-space: pre-wrap; overflow-wrap: anywhere;
  padding-left: 1.7em; text-indent: -1.7em;
  color: #7d7d87; min-height: 1.95em;
}
.ba-code .k { color: #f97316; }
.ba-code .s { color: #7aa2f7; }
.ba-code .c { color: #5d5d67; }
.ba-code .f { color: #d4d4d8; }
.ba-caret {
  display: inline-block; width: 7.5px; height: 14px; margin-left: 1px;
  background: var(--accent); vertical-align: -2px;
  animation: baBlink 1s steps(1) infinite;
}
@keyframes baBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.ba-status {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px 16px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--green);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ba-status.on { opacity: 1; transform: none; }
.ba-status .tick {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.35);
  display: flex; align-items: center; justify-content: center;
}

.ba-ship {
  margin-top: 16px; padding: 16px 18px;
  background: rgba(255,255,255,0.025); border: 1px solid #1e1e25; border-radius: 16px;
}
.ba-ship-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.11em; color: #6a6a74;
  margin-bottom: 14px;
}
.ba-ship-label .pip {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px rgba(34,197,94,0.55);
}
.ba-tiles { display: flex; gap: 10px; flex-wrap: wrap; min-height: 50px; }
.ba-tile {
  width: 50px; height: 50px; border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6) translateY(8px);
  transition: opacity 0.45s cubic-bezier(0.34,1.56,0.64,1), transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.ba-tile.on { opacity: 1; transform: none; }
.ba-tile.pop { box-shadow: 0 0 0 4px rgba(249,115,22,0.14); }
.ba-tile img { width: 28px; height: 28px; object-fit: contain; }
.ba-tile.tool {
  width: auto; padding: 0 13px; height: 34px; border-radius: 9px;
  font-family: var(--font-mono); font-size: 11.5px; color: #d4d4d8;
  border-color: rgba(249,115,22,0.25); background: rgba(249,115,22,0.05);
}

@media (max-width: 1200px) { .build-anim { width: 420px; } .ba-code { font-size: 11.5px; } }
@media (max-width: 900px)  { .build-anim { width: 100%; max-width: 500px; margin: 0 auto; } }

/* ============================================================
   TYPE SCALE — everything nudged up; dim text made readable
   ============================================================ */
.hero { --hero-h1: 3rem; --hero-body: 1.0625rem; }
.section-title { font-size: clamp(28px, 3.4vw, 44px); }
.section-subtitle { font-size: 17px; line-height: 1.65; }
.section-label { font-size: 13.5px; }

.hero-trust {
  font-size: 13px;
  color: #9a9aa2;
  opacity: 1;
  letter-spacing: 0.01em;
  gap: 0;
}
.hero-trust .sep { color: #4a4a52; padding: 0 10px; }
.hero-breadcrumb { font-size: 14.5px; }

.problem-header h3 { font-size: 17.5px; }
.problem-content p { font-size: 15.5px; line-height: 1.75; }
.problem-pivot { font-size: 16.5px; }
.faq-header h3 { font-size: 16.5px; }
.faq-content p { font-size: 15.5px; line-height: 1.75; }
.checklist-item { font-size: 15px; line-height: 1.6; }
.sys-card h3 { font-size: 14px; }
.sys-card p { font-size: 12.5px; }
.systems-note { font-size: 15px; }
.why-metric h3 { font-size: 16.5px; }
.why-metric p { font-size: 14.5px; line-height: 1.6; }
.fact h4 { font-size: 15px; }
.fact p { font-size: 13.5px; }
.fact-num { font-size: 28px; }
.step-card h3 { font-size: 17.5px; }
.step-card p { font-size: 14.5px; }
.step-card .step-time { font-size: 12.5px; }
.split h3 { font-size: 18.5px; }
.split p { font-size: 15px; }
.fit-list li { font-size: 14.5px; }
.fit-col h3 { font-size: 15.5px; }
.hub-card h4 { font-size: 17px; }
.hub-card p { font-size: 14px; }
.mega-link-sub { font-size: 12px; }
.mega-link-title { font-size: 14px; }
.plat-tile h4 { font-size: 15px; }
.plat-tile p { font-size: 13px; }
.route-text h3 { font-size: 17.5px; }
.route-text p { font-size: 14.5px; }
.timeline-text p { font-size: 14.5px; }
.delivery-hint { font-size: 13.5px; }

/* compare table: readable, and the hovered row stands out */
.compare-table thead th { font-size: 12.5px; }
.compare-table tbody td { font-size: 13.5px; color: #85858d; }
.compare-table tbody td:first-child { font-size: 12.5px; color: #cfcfd4; }
.compare-table tbody tr td { transition: background 0.16s ease, color 0.16s ease; }
.compare-table tbody tr:hover td { background: rgba(255,255,255,0.045); color: #e2e2e6; }
.compare-table tbody tr:hover td:first-child { color: #ffffff; }
.compare-table tbody tr:hover td.hl { background: rgba(249,115,22,0.09); color: #ffffff; }
.compare-table tbody tr:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }

/* trust line: wraps between phrases, never inside one */
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.hero-trust .ti { white-space: nowrap; }

/* hero logo cluster: single row, no filler tile */
.hero-logo-cluster { display: flex; gap: 12px; }

/* ===== Round 4 ===== */

/* mega menu headers: orange reads better here after all */
.mega-col-head { color: #E8642C; }

/* logo badges: wide wordmarks (Rossum, Oracle Fusion) need width, not height */
.sys-logo { width: 42px; height: 38px; }
.sys-logo img { width: auto; height: auto; max-width: 30px; max-height: 23px; }

/* why cards: body copy starts on the same line whether the heading wraps or not,
   and the hover now matches the card language used everywhere else */
.why-metric { display: flex; flex-direction: column; }
.why-metric h3 {
  line-height: 1.35;
  min-height: 2.7em;
  margin-bottom: 10px;
  width: auto;
}
.why-metric h3::after { display: none; }
.why-metric {
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.25s ease, border-color 0.25s ease;
}
.why-metric:hover {
  transform: translateY(-3px);
  border-color: #d4d4d8;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,0.14);
}
.why-metrics-dark .why-metric:hover {
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,0.75);
}

/* ===== SIGNPOST — dark card inside a light section, sends you elsewhere ===== */
.signpost {
  display: flex; align-items: center; gap: 24px;
  margin-top: 48px; padding: 26px 28px;
  background: var(--bg-dark); border: 1px solid #24242c;
  border-radius: 16px; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.signpost::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 120px at 12% 50%, rgba(249,115,22,0.10), transparent 70%);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.signpost:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.35); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.8); }
.signpost:hover::before { opacity: 1; }
.signpost-icon {
  width: 48px; height: 48px; border-radius: 7px; flex-shrink: 0;
  background: rgba(249,115,22,0.09); border: 1px solid rgba(249,115,22,0.22);
  color: var(--accent); display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.signpost:hover .signpost-icon { transform: rotate(-8deg) scale(1.06); }
.signpost-body { flex: 1; min-width: 0; position: relative; }
.signpost-kicker {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.signpost-body h3 { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 6px; letter-spacing: -0.01em; }
.signpost-body p { font-size: 14.5px; color: var(--text-gray); line-height: 1.6; max-width: 640px; }
.signpost-go {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--accent);
  padding: 11px 18px; border-radius: 6px;
  border: 1px solid rgba(249,115,22,0.3); background: rgba(249,115,22,0.06);
  position: relative; transition: background 0.2s, border-color 0.2s;
}
.signpost:hover .signpost-go { background: rgba(249,115,22,0.14); border-color: rgba(249,115,22,0.55); }
.signpost-go svg { transition: transform 0.2s; }
.signpost:hover .signpost-go svg { transform: translateX(4px); }
@media (max-width: 860px) {
  .signpost { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* animation tray: five tiles spread across the panel */
.ba-code { min-height: 214px; }
.ba-tiles { gap: 8px; }
.ba-tiles .ba-tile { flex: 1 1 0; width: auto; min-width: 0; height: 52px; }

/* tray tiles carry real brand logos, several of which are dark — give them a light chip */
.ba-tile {
  background: #f4f4f5;
  border-color: rgba(255,255,255,0.14);
}
.ba-tile img { max-width: 34px; max-height: 26px; width: auto; height: auto; }
.ba-tile.tool { background: rgba(249,115,22,0.05); }

/* ============================================================
   Round 5
   ============================================================ */

/* wide wordmarks (Oracle Fusion, Rossum, Workday) need more width to read */
.sys-logo { width: 46px; height: 38px; }
.sys-logo img { max-width: 36px; max-height: 24px; }
.ba-tile img { max-width: 40px; max-height: 26px; }

/* one hero type scale, with the homepage a step larger than subpages */
.hero { --hero-h1: 3.25rem; --hero-body: 1.125rem; }
.hero-home { --hero-h1: 3.75rem; --hero-body: 1.125rem; }
.hero-grid { gap: 76px; }
.hero h1, .hero-home h1 { letter-spacing: -0.038em; }

/* brand lockup: two justified lines of identical width, tight to the logo */
.nav-brand { gap: 0; }
.nav-strapline {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 14px; margin-left: 14px;
  border-left: 1px solid rgba(255,255,255,0.16);
  opacity: 1;
}
.nav-strapline span {
  display: block; width: 134px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.28;
  text-align: justify; text-align-last: justify;
  color: #ffffff; white-space: normal;
}
.nav-strapline span:last-child { color: rgba(255,255,255,0.58); }

/* tighter corners read as more engineered (tightened again — site-wide now, not
   a page experiment: every card/button/tile/pill on every preview page shares
   this scale) */
.problem-item, .faq-item, .why-metric, .step-card, .hub-card, .fact,
.diff-card, .feed-panel, .aud-note { border-radius: 7px; }
.ba-editor, .ba-ship, .signpost, .mega { border-radius: 8px; }
.plat-tile, .submenu, .chat-panel, .tools-panel { border-radius: 7px; }
.sys-card { border-radius: 7px; }
.sys-logo { border-radius: 6px; }
.ba-tile, .ba-slot { border-radius: 7px; }
.btn-primary, .btn-outline, .btn-rossum-blue, .delivery-cta { border-radius: 3.5px; }
.route-go, .signpost-go, .mega-link, .submenu a { border-radius: 5px; }
.service-tag, .plat-meta { border-radius: 3px; }

/* body copy on dark surfaces was too dim against near-black */
.section-subtitle-dark,
.split-dark p,
.fact p,
.signpost-body p,
.why-metrics-dark .why-metric p,
.section-dark .step-card p,
.compare-section .section-subtitle { color: #a4a4ac; }
.section-dark .step-card .step-time { color: #8f8f97; }

/* ===== tray slots: what's built, what's being worked on, what's still to come ===== */
.ba-tiles { gap: 9px; align-items: center; }
.ba-tiles .ba-tile { flex: 0 0 auto; width: 54px; height: 52px; }
.ba-slot {
  flex: 0 0 auto; width: 54px; height: 52px;
  border: 1px dashed rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  display: flex; align-items: center; justify-content: center;
}
.ba-slot.building {
  border-color: rgba(249,115,22,0.42);
  background: rgba(249,115,22,0.05);
  animation: slotWork 1.6s ease-in-out infinite;
}
@keyframes slotWork {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0.0); border-color: rgba(249,115,22,0.28); }
  50%      { box-shadow: 0 0 0 5px rgba(249,115,22,0.07); border-color: rgba(249,115,22,0.55); }
}
.ba-slot .bars { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.ba-slot .bars i {
  display: block; width: 3px; border-radius: 2px; background: rgba(249,115,22,0.55);
  animation: barPulse 1s ease-in-out infinite;
}
.ba-slot .bars i:nth-child(2) { animation-delay: 0.15s; }
.ba-slot .bars i:nth-child(3) { animation-delay: 0.3s; }
@keyframes barPulse { 0%,100% { height: 5px; opacity: .5 } 50% { height: 15px; opacity: 1 } }

/* the code dissolving as it becomes a connector */
.ba-editor .ba-code { transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease; }
.ba-editor.compiling .ba-code { opacity: 0.15; filter: blur(2px); transform: scale(0.985); }

.ba-floater {
  position: fixed; z-index: 50; width: 54px; height: 52px; border-radius: 6px;
  background: #f4f4f5; border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.7), 0 0 0 5px rgba(249,115,22,0.14);
  opacity: 0; transform: scale(0.45);
  transition: opacity 0.3s ease, transform 0.62s cubic-bezier(0.5,0,0.2,1);
  pointer-events: none;
}
.ba-floater.in { opacity: 1; transform: scale(1); }
.ba-floater img { max-width: 40px; max-height: 26px; width: auto; height: auto; object-fit: contain; }

/* lockup: match line widths with letter tracking, not word gaps
   (mono advance is uniform, so line 2 is tracked out to line 1's width) */
.nav-strapline span {
  width: auto;
  text-align: left;
  text-align-last: auto;
  letter-spacing: 0.04em;
}
.nav-strapline span:last-child { letter-spacing: 0.413em; }

/* give the hero copy more room back now that the type is larger */
.build-anim { width: 440px; }
.hero-grid { gap: 56px; }
@media (max-width: 1200px) { .build-anim { width: 400px; } .hero-grid { gap: 40px; } }

/* keep the two hero scales identical at every breakpoint */
@media (max-width: 768px) {
  .hero, .hero-home { --hero-h1: 40px; --hero-body: 17px; }
}

/* ===== Round 6 ===== */

/* lockup: both lines now have near-identical character counts, so plain tracking works */
.nav-strapline span:last-child { letter-spacing: 0.04em; }

/* tray fills the panel width */
.ba-tiles { gap: 8px; }
.ba-tiles .ba-tile, .ba-slot { flex: 1 1 0; width: auto; min-width: 0; height: 56px; }

/* signpost: readable kicker, and a "1×" mark instead of an abstract icon */
.signpost-kicker { font-size: 11.5px; letter-spacing: 0.13em; color: #fb923c; margin-bottom: 8px; }
.signpost-icon .one {
  font-family: var(--font-mono); font-size: 21px; font-weight: 700;
  color: var(--accent); letter-spacing: -0.02em; line-height: 1;
}

/* the "anything else with an API" line carries weight — size it up */
.systems-note { font-size: 16.5px; line-height: 1.65; margin-top: 22px; }

/* ===== Round 7 ===== */
/* floater takes its size from the slot it is flying into */
.ba-floater { width: auto; height: auto; }

/* wider hero column so the headline wraps into fewer lines at the same type size */
.hero { max-width: 1290px; }
.hero-grid { gap: 48px; }
.build-anim { width: 420px; }
.hero h1 { max-width: 820px; }
.hero-sub { max-width: 660px; }
@media (max-width: 1200px) { .build-anim { width: 380px; } .hero-grid { gap: 36px; } }

/* ===== Round 8 ===== */
/* fit-list rows are flex, so the sentence must be one item or inline links break out of it */
.fit-list li > span { flex: 1; min-width: 0; }
.fit-list li a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.fit-list li a:hover { color: var(--text-dark); }

/* ===== SEQUENCE STREAM (custom API hero) — frameless two-lifeline call stream ===== */
.seq { width: 400px; flex-shrink: 0; }
/* endpoint rails ARE the lifelines: full-stage-height vertical cards, mirrored —
   the left one reads bottom-to-top, the right one top-to-bottom. They share the
   stage's fade mask, so both ends dissolve like the stream does. */
.seq-node {
  position: absolute; top: 50%; width: 520px; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
  background: #101014; border: 1px solid #26262e; border-radius: 7px;
  transition: opacity 0.4s; z-index: 5;
}
.seq-node.app { left: 13%; transform: translate(-50%, -50%) rotate(-90deg); }
.seq-node.sys { left: 87%; transform: translate(-50%, -50%) rotate(90deg); }
.seq-node .tile {
  width: 24px; height: 24px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.seq-node .tile img { width: 17px; height: 17px; object-fit: contain; }
.seq-node .tile svg { display: block; }
.seq-node .nm { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #e6e6ea; line-height: 1; }
.seq-node .nm .s { display: block; font-size: 8.5px; font-weight: 400; color: #5a5a64; margin-top: 3px; }
.seq-stage {
  position: relative; height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 80%, transparent 98%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 80%, transparent 98%);
}
.seq-flow {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform 0.45s cubic-bezier(0.3,0,0.3,1); z-index: 2;
}
.seq-row { position: relative; height: 42px; }
.seq-row.gap { height: 34px; }
.seq-arrow {
  position: absolute; left: calc(13% + 27px); right: calc(13% + 27px); top: 26px; height: 1.5px; z-index: 2;
}
.seq-arrow::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 0;
  transition: width 0.45s ease-out;
}
.seq-arrow.req::before { left: 0; background: repeating-linear-gradient(90deg, rgba(96,165,250,0.75) 0 5px, transparent 5px 9px); }
.seq-arrow.res::before { right: 0; background: repeating-linear-gradient(90deg, rgba(34,197,94,0.7) 0 5px, transparent 5px 9px); }
.seq-arrow.err::before { right: 0; background: repeating-linear-gradient(90deg, rgba(248,113,113,0.75) 0 5px, transparent 5px 9px); }
.seq-arrow.drawn::before { width: 100%; }
.seq-arrow::after {
  content: ''; position: absolute; top: -3.25px; border-style: solid; opacity: 0; transition: opacity 0.2s 0.35s;
}
.seq-arrow.req::after { right: -1px; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent rgba(96,165,250,0.95); }
.seq-arrow.res::after { left: -1px; border-width: 4px 7px 4px 0; border-color: transparent rgba(34,197,94,0.9) transparent transparent; }
.seq-arrow.err::after { left: -1px; border-width: 4px 7px 4px 0; border-color: transparent rgba(248,113,113,0.95) transparent transparent; }
.seq-arrow.drawn::after { opacity: 1; }
.seq-lab {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; white-space: nowrap; z-index: 3;
  padding: 0 9px;
  opacity: 0; transition: opacity 0.3s 0.12s;
}
.seq-lab.on { opacity: 1; }
.seq-lab.req { color: #a8c6f0; }
.seq-lab.res { color: #9ee0b4; }
.seq-lab.err { color: #eda6a6; }
.seq-lab.fin { color: #9ee0b4; font-weight: 700; }
.seq-note {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; color: #e8c49a; white-space: nowrap; z-index: 3;
  background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.22);
  padding: 4px 12px; border-radius: 7px;
  opacity: 0; transition: opacity 0.3s;
}
.seq-note.on { opacity: 1; }
@media (max-width: 1200px) { .seq { width: 366px; } .seq-lab, .seq-note { font-size: 10px; } }
@media (max-width: 900px)  { .seq { width: 100%; max-width: 420px; margin: 0 auto; } }

/* ===== feed widget: HTTP-method chips in the first column (custom API page) ===== */
.feed-method {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px; flex-shrink: 0;
  letter-spacing: 0.05em; min-width: 44px; text-align: center;
}
.feed-method.get   { color: #60a5fa; background: rgba(59,130,246,0.08); border: 1px solid rgba(59,130,246,0.16); }
.feed-method.post  { color: #fb923c; background: rgba(249,115,22,0.09); border: 1px solid rgba(249,115,22,0.18); }
.feed-method.put   { color: #a78bfa; background: rgba(167,139,250,0.09); border: 1px solid rgba(167,139,250,0.18); }
.feed-method.patch { color: #34d399; background: rgba(52,211,153,0.09); border: 1px solid rgba(52,211,153,0.18); }

/* ===== FLOW CANVAS (custom MCP hero) — in-built automation flow ===== */
.flowc { width: 420px; flex-shrink: 0; }
.flowc-stage {
  position: relative; width: 420px; height: 520px;
  background-image: radial-gradient(#15151a 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 48%, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 95% at 50% 48%, #000 66%, transparent 100%);
}
.flowc-svg { position: absolute; inset: 0; }
.flowc-svg path {
  fill: none; stroke: #26262e; stroke-width: 1.5;
  stroke-dasharray: 5 6; stroke-linecap: round;
  transition: stroke 0.35s;
}
.flowc-svg path.hot-req { stroke: rgba(96,165,250,0.6); animation: fcFlow 0.5s linear infinite; }
.flowc-svg path.hot-res { stroke: rgba(34,197,94,0.55); animation: fcFlow 0.5s linear infinite reverse; }
.flowc-svg path.hot-wr  { stroke: rgba(249,115,22,0.6); animation: fcFlow 0.5s linear infinite; }
@keyframes fcFlow { to { stroke-dashoffset: -11; } }
.fnode {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  background: #101014; border: 1px solid #26262e; border-radius: 6px;
  padding: 9px 14px; z-index: 3;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.fnode .tile {
  width: 24px; height: 24px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fnode .tile img { width: 18px; height: 18px; object-fit: contain; }
.fnode .nm { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #e6e6ea; }
.fnode .nm .s { display: block; font-size: 8.5px; font-weight: 400; color: #5a5a64; margin-top: 2px; }
.fnode.glow-blue  { border-color: rgba(96,165,250,0.55); box-shadow: 0 0 20px -5px rgba(96,165,250,0.5); }
.fnode.glow-green { border-color: rgba(34,197,94,0.55); box-shadow: 0 0 20px -5px rgba(34,197,94,0.5); }
.fnode.glow-or    { border-color: rgba(249,115,22,0.6); box-shadow: 0 0 20px -5px rgba(249,115,22,0.5); }
.fnode.agent {
  background: linear-gradient(180deg, #12121a, #0e0e14);
  border-color: rgba(96,165,250,0.28); padding: 10px 18px;
}
.fnode.agent .spark { color: #60a5fa; display: flex; }
.fnode.mcp {
  background: #140d06; border-color: rgba(249,115,22,0.42);
  flex-direction: column; gap: 3px; padding: 10px 18px 9px;
}
.fnode.mcp .nm { color: var(--accent); font-size: 10px; letter-spacing: 0.1em; }
.fnode.mcp .sub {
  font-family: var(--font-mono); font-size: 9.5px; color: #e8c49a;
  min-height: 13px; transition: opacity 0.25s;
}
.fnode.mcp.fire { box-shadow: 0 0 26px -4px rgba(249,115,22,0.55); }
.fchip {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 9.5px; white-space: nowrap; z-index: 4;
  padding: 3px 9px; border-radius: 6px;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
}
.fchip.on { opacity: 1; }
.fchip.ok  { color: #9ee0b4; background: #0a150e; border: 1px solid rgba(34,197,94,0.35); }
.fchip.inf { color: #a8c6f0; background: #0d1420; border: 1px solid rgba(96,165,250,0.35); }
.fpulse {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 5; pointer-events: none;
}
.fpulse.req { background: #60a5fa; box-shadow: 0 0 10px 2px rgba(96,165,250,0.55); }
.fpulse.res { background: #22c55e; box-shadow: 0 0 10px 2px rgba(34,197,94,0.55); }
.fpulse.wr  { background: #f97316; box-shadow: 0 0 10px 2px rgba(249,115,22,0.6); }
@media (max-width: 1200px) { .flowc { transform: scale(0.9); transform-origin: center right; } }
@media (max-width: 900px)  { .flowc { transform: none; margin: 0 auto; } }

/* ===== Round 11 ===== */
/* Sections form their own block formatting context, so a first child's top
   margin (e.g. .signpost { margin-top: 48px }) can never collapse through a
   zero-padding section edge and expose the dark body as a black band. */
.section-light, .section-dark, .cta-section { display: flow-root; }

/* ===== Round 13 ===== */
/* --- certification gauntlet (marketplace publishing hero) --- */
.gnt { width: 420px; flex-shrink: 0; }
.gnt-stage {
  position: relative; width: 420px; height: 540px;
  background-image: radial-gradient(#15151a 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse 95% 95% at 50% 50%, #000 66%, transparent 100%);
}
.gnt-line {
  position: absolute; left: 50%; top: 40px; bottom: 46px; width: 0;
  border-left: 1.5px dashed #26262e;
}
.gnt-node {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  background: #101014; border: 1px solid #26262e; border-radius: 6px;
  padding: 9px 16px; z-index: 3; transition: border-color 0.3s, box-shadow 0.3s;
}
.gnt-node .nm { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #e6e6ea; letter-spacing: 0.06em; }
.gnt-node.app { background: linear-gradient(180deg, #12121a, #0e0e14); border-color: rgba(96,165,250,0.3); }
.gnt-node.app .nm { color: #a8c6f0; }
.gnt-node.store { padding: 9px 14px; }
.gnt-node.store .tile {
  width: 24px; height: 24px; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.gnt-node.store .tile img { width: 18px; height: 18px; object-fit: contain; }
.gnt-node.lit    { border-color: rgba(249,115,22,0.6); box-shadow: 0 0 20px -5px rgba(249,115,22,0.5); }
.gnt-node.passed { border-color: rgba(34,197,94,0.55); box-shadow: 0 0 20px -5px rgba(34,197,94,0.45); }
.gnt-pulse {
  position: absolute; left: 50%; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%); background: #f97316;
  border: 0 solid rgba(249,115,22,0); box-sizing: border-box;
  box-shadow: 0 0 10px 2px rgba(249,115,22,0.6); z-index: 4;
  transition: top 0.7s cubic-bezier(0.4, 0, 0.6, 1),
              width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.18s ease-out, box-shadow 0.42s ease, opacity 0.28s ease;
  opacity: 0;
}
/* the dot opens out into the outline of the card it just reached, then hands
   the glow over to the card itself and travels on */
.gnt-pulse.burst {
  background: rgba(249,115,22,0); border-radius: 7px;
  border-width: 1.5px; border-color: rgba(249,115,22,0.85);
  box-shadow: 0 0 26px -4px rgba(249,115,22,0.55);
}
.gnt-chip {
  position: absolute; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; opacity: 0; transition: opacity 0.35s;
  z-index: 5;
}
.gnt-chip.on  { opacity: 1; }
.gnt-chip.ok  { color: #9ee0b4; background: #0a150e; border: 1px solid rgba(34,197,94,0.35); }
.gnt-chip.wrn { color: #fca5a5; background: #150a0a; border: 1px solid rgba(248,113,113,0.4); }
.gnt-chip.inf { color: #a8c6f0; background: #0d1420; border: 1px solid rgba(96,165,250,0.35); }
@media (max-width: 1200px) { .gnt, .gnt-stage { width: 380px; } }
@media (max-width: 900px)  { .gnt { margin: 0 auto; } }

/* --- hub hero: home grid visual as full background, text centered --- */
.hero-home-center .grid-wrap { transform: scale(1.55); }
.hero-home-center .hero-gradient {
  background:
    radial-gradient(ellipse 58% 78% at 50% 50%, rgba(9,9,11,0.97) 0%, rgba(9,9,11,0.82) 52%, transparent 100%),
    linear-gradient(to bottom, rgba(9,9,11,0.7) 0%, rgba(9,9,11,0.15) 22%, rgba(9,9,11,0.15) 78%, rgba(9,9,11,0.7) 100%);
}
.hero-home-center .hero-text { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-home-center .hero-sub { max-width: 720px; margin-left: auto; margin-right: auto; }
.hero-home-center .hero-ctas { justify-content: center; }
@media (max-width: 768px) { .hero-home-center .hero-ctas { align-items: center; } }

/* --- hub "what we build": job rows with logo strips + spec line --- */
.job-rows { margin-top: 44px; display: flex; flex-direction: column; gap: 20px; }
.job {
  display: grid; grid-template-columns: 1fr 380px; gap: 36px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 9px;
  padding: 34px 36px;
}
.job-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.job-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); }
.job-kind {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark-sub);
  border: 1px solid var(--border-light); border-radius: 5px; padding: 3px 8px;
  background: var(--bg-light);
}
.job-main h3 { font-size: 21px; font-weight: 800; color: var(--text-dark); letter-spacing: -0.02em; margin-bottom: 10px; }
.job-main > p { font-size: 14.5px; color: var(--text-dark-sub); line-height: 1.65; max-width: 560px; }
.job-logos { display: flex; align-items: center; gap: 9px; margin-top: 20px; flex-wrap: wrap; }
.job-tile {
  width: 60px; height: 60px; border-radius: 6px; background: #fff; padding: 10px;
  border: 1px solid var(--border-light); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.job-tile:hover {
  transform: translateY(-2px); border-color: #d4d4d8;
  box-shadow: 0 6px 16px -4px rgba(0,0,0,0.35);
}
.job-tile img, .job-tile svg { width: 100%; height: 100%; }
.job-tile img { object-fit: contain; }
.job-plus { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dark-sub); margin-top: 12px; }
.job-links { display: flex; flex-direction: column; gap: 14px; }
.job-links .hub-card { background: var(--bg-light); }
@media (max-width: 1024px) {
  .job { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
}
@media (max-width: 640px) {
  .job-tile { width: 48px; height: 48px; padding: 8px; border-radius: 6px; }
}

/* --- hub "start from your situation" cards (dark) --- */
.sit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.sit {
  display: block; background: #101014; border: 1px solid #26262e; border-radius: 14px;
  padding: 24px 26px; text-decoration: none; position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.sit:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.4); box-shadow: 0 14px 34px -16px rgba(0,0,0,0.8); }
.sit-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(249,115,22,0.28); background: rgba(249,115,22,0.07);
  border-radius: 5px; padding: 3px 8px; margin-bottom: 14px;
}
.sit h3 { font-size: 17px; font-weight: 700; color: var(--text-white); letter-spacing: -0.01em; margin-bottom: 8px; }
.sit p { font-size: 13.5px; color: var(--text-gray); line-height: 1.62; margin-bottom: 16px; }
.sit-go { font-size: 13px; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.sit-go svg { transition: transform 0.2s; }
.sit:hover .sit-go svg { transform: translateX(3px); }
@media (max-width: 900px) { .sit-grid { grid-template-columns: 1fr; } }

/* audience tag inside a mega sub-line — gives the commitment layout the
   segment signal without spending a column head on it */
.mega-link-sub .aud { color: var(--text-white); font-weight: 600; }

/* audience submenus carry a descriptive sub-line, so they need more room than
   the old 280px link list */
.submenu-wide { min-width: 372px; }
.submenu-wide a { padding: 9px 11px; }
.submenu-wide .sm-sub { line-height: 1.5; }

/* "not sure" footer row inside the audience submenus */
.submenu .sm-all {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 8px; padding: 11px 11px 4px; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px; color: var(--text-gray); border-radius: 0;
}
.submenu .sm-all:hover { background: none; color: var(--text-white); }
.submenu .sm-all span {
  color: var(--accent); font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.submenu .sm-all svg { width: 11px; height: 11px; transition: transform 0.2s; }
.submenu .sm-all:hover svg { transform: translateX(3px); }

/* ---- service finder quiz (integrations hub) ---- */
.qz { margin-top: 40px; background: var(--bg-dark-card); border: 1px solid var(--border-dark);
      border-radius: 8px; padding: 30px 34px 34px; max-width: 880px; }
.qz-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.qz-step { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em;
           text-transform: uppercase; color: var(--accent); }
.qz-back, .qz-restart { background: none; border: none; color: var(--text-gray); font: inherit;
           font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.qz-back:hover, .qz-restart:hover { color: var(--text-white); }
.qz-q { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-white); margin: 0 0 20px; }
.qz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.qz-opt { text-align: left; background: var(--bg-dark); border: 1px solid var(--border-dark);
          border-radius: 5px; padding: 16px 18px; cursor: pointer; font: inherit;
          transition: transform 0.18s, border-color 0.18s; }
.qz-opt:hover { transform: translateY(-2px); border-color: rgba(249,115,22,0.5); }
.qz-opt b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text-white); margin-bottom: 6px; }
.qz-opt span { display: block; font-size: 12.5px; color: var(--text-gray); line-height: 1.55; }
.qz-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.qz-res { display: block; background: var(--bg-dark); border: 1px solid var(--border-dark);
          border-radius: 5px; padding: 18px 20px; transition: transform 0.18s, border-color 0.18s; }
.qz-res:hover { transform: translateY(-2px); border-color: rgba(249,115,22,0.5); }
.qz-res-tag { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
              text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 8px; }
.qz-res h4 { font-size: 16px; font-weight: 700; color: var(--text-white); margin: 0 0 6px; }
.qz-res p { font-size: 12.5px; color: var(--text-gray); line-height: 1.55; margin: 0 0 12px; }
.qz-res-go { font-size: 13px; font-weight: 700; color: var(--accent); }
.qz-res-foot { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
@media (max-width: 640px) { .qz { padding: 22px 18px 24px; }
  .qz-opts, .qz-res-grid { grid-template-columns: 1fr; } }
.qz [hidden] { display: none !important; }   /* author display:grid would beat the UA [hidden] rule */
.qz-res, .qz-res:hover { text-decoration: none; }

/* ---- quiz on the light band (integrations hub swapped finder to white) ---- */
.section-light .qz { background: var(--bg-light-card); border-color: var(--border-light); }
.section-light .qz-q { color: var(--text-dark); }
.section-light .qz-opt, .section-light .qz-res { background: var(--bg-light); border-color: var(--border-light); }
.section-light .qz-opt:hover, .section-light .qz-res:hover {
  border-color: rgba(249,115,22,0.55); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.12); }
.section-light .qz-opt b, .section-light .qz-res h4 { color: var(--text-dark); }
.section-light .qz-opt span, .section-light .qz-res p { color: var(--text-dark-sub); }
.section-light .qz-back, .section-light .qz-restart { color: var(--text-dark-sub); }
.section-light .qz-back:hover, .section-light .qz-restart:hover { color: var(--text-dark); }
.section-light .qz-res-go, .section-light .qz-res-tag, .section-light .qz-step { color: #c2410c; }

/* ---- "what we build" on the dark band; .job-tile stays white for logo legibility ---- */
.section-dark .job { background: var(--bg-dark-card); border-color: var(--border-dark); }
.section-dark .job-kind { color: var(--text-gray); border-color: var(--border-dark); background: var(--bg-dark); }
.section-dark .job-main h3 { color: var(--text-white); }
.section-dark .job-main > p, .section-dark .job-plus { color: var(--text-gray); }
.section-dark .hub-card, .section-dark .job-links .hub-card { background: var(--bg-dark); border-color: var(--border-dark); }
.section-dark .hub-card:hover { border-color: rgba(249,115,22,0.5); box-shadow: 0 14px 34px -16px rgba(0,0,0,0.8); }
.section-dark .hub-card h4 { color: var(--text-white); }
.section-dark .hub-card p { color: var(--text-gray); }
.section-dark .hub-card-go { color: var(--accent); }

/* ===== ROSSUM EXPERTS: grid utilities ===== */
.why-metrics.wm-2 { grid-template-columns: repeat(2, 1fr); }
.why-metrics.wm-4 { grid-template-columns: repeat(4, 1fr); }
.fact-strip.fs-4 { grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
.steps-grid.sg-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .why-metrics.wm-4, .fact-strip.fs-4, .steps-grid.sg-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .why-metrics.wm-2, .why-metrics.wm-4, .fact-strip.fs-4, .steps-grid.sg-4 { grid-template-columns: 1fr; }
}

/* ===== ROSSUM EXPERTS: Rossum <-> Coupa hero rotator ===== */
/* Standard flip-card technique: front at rotateY(0), back at rotateY(180deg),
   both backface-hidden — the browser decides which shows from the parent's
   rotation, so there's no JS swap-timing to get wrong (no mirrored frames). */
.duo-rotator { width: 210px; height: 110px; transform-style: preserve-3d; position: relative; }
.duo-rotator .duo-logo {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; gap: 12px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.duo-rotator .duo-back { transform: rotateY(180deg); }
.duo-rossum { width: 158px; height: auto; object-fit: contain; }
.duo-coupa { width: 150px; height: auto; object-fit: contain; }

/* ===== ROSSUM EXPERTS: hero right column (spinner + acquisition card) ===== */
.hero-right-col { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* the shared .hero-logo-wrap is a fixed 200x200 box sized for other pages' spinners;
   here it leaves far more empty space above/below the rotator than the acq-card below
   it has, so the box is centered but the visible cluster reads as sitting low — shrink
   it to hug the 210x110 rotator so the visible content matches the true center */
.hero-right-col .hero-logo-wrap { width: 220px; height: 120px; }
.hero-acq-card {
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 300px; background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 6px; padding: 12px 14px;
  font-size: 12.5px; color: var(--text-gray); line-height: 1.5;
}
.hero-acq-card .vb-dot { margin-top: 5px; flex-shrink: 0; }
.hero-acq-card strong { color: var(--text-white); }

/* ===== ROSSUM EXPERTS: invoice flow animation (light theme) ===== */
.rcflow-wrap { margin-top: 48px; height: 300px; }
.rcflow { width: 860px; height: 300px; position: relative; transform-origin: top left; margin: 0 auto; }
.rcflow-stage {
  position: relative; width: 860px; height: 300px;
  background-image: radial-gradient(#d4d4d8 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 62%, transparent 100%);
}
.rcflow-svg { position: absolute; inset: 0; }
.rcflow-svg path {
  fill: none; stroke: #d4d4d8; stroke-width: 1.5;
  stroke-dasharray: 5 6; stroke-linecap: round;
  transition: stroke 0.35s;
}
.rcflow-svg path.md-idle { stroke: rgba(21,128,61,0.35); animation: fcFlow 1.8s linear infinite; }
.rcflow-svg path.hot-doc { stroke: rgba(37,99,235,0.65); animation: fcFlow 0.5s linear infinite; }
.rcflow-svg path.hot-out { stroke: rgba(234,88,12,0.65); animation: fcFlow 0.5s linear infinite; }
.rcflow-svg path.hot-md  { stroke: rgba(21,128,61,0.6); animation: fcFlow 0.5s linear infinite; }
.rc-node {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #ffffff; border: 1px solid var(--border-light); border-radius: 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  z-index: 3; transition: border-color 0.3s, box-shadow 0.3s;
}
.rc-inbox { width: 150px; height: 106px; gap: 9px; }
.rc-docs { display: flex; gap: 4px; }
.rc-docs i {
  width: 16px; height: 21px; border: 1.5px solid #c4c4cc; border-radius: 3px;
  display: block; position: relative; background: #f4f4f5;
}
.rc-docs i::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 4px; height: 1.5px;
  background: #b4b4bc; box-shadow: 0 4px 0 #b4b4bc, 0 8px 0 #b4b4bc;
}
.rc-node .nm { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: #18181b; text-align: center; }
.rc-node .nm .s { display: block; font-size: 9.5px; font-weight: 400; color: #8a8a94; margin-top: 2px; }
.rc-rossum { width: 232px; height: 132px; gap: 9px; padding: 14px; overflow: hidden; }
.rc-rossum-logo { width: 96px; height: auto; }
.rc-coupa { width: 138px; height: 106px; gap: 9px; }
.rc-coupa-brand { display: flex; align-items: center; }
.rc-coupa-logo { width: 108px; height: auto; object-fit: contain; }
.rc-status {
  font-family: var(--font-mono); font-size: 9.5px; color: #71717a;
  transition: opacity 0.2s; min-height: 12px; text-align: center; max-width: 205px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-fields { display: flex; gap: 6px; min-height: 20px; }
.rc-fields b {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; color: #15803d;
  background: #ecfdf3; border: 1px solid rgba(21,128,61,0.3); border-radius: 999px;
  padding: 3px 8px; opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
}
.rc-fields b.on { opacity: 1; transform: none; }
.rc-glow    { border-color: rgba(37,99,235,0.5); box-shadow: 0 0 22px -5px rgba(37,99,235,0.4); }
.rc-glow-or { border-color: rgba(234,88,12,0.55); box-shadow: 0 0 22px -5px rgba(234,88,12,0.4); }
.rc-glow-md { border-color: rgba(21,128,61,0.5); box-shadow: 0 0 22px -5px rgba(21,128,61,0.4); }
.rc-scan::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,0.8), transparent);
  animation: rcScan 0.9s ease-in-out infinite; z-index: 4;
}
@keyframes rcScan { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }
.rc-pulse {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
}
.rc-pulse.doc {
  width: auto; height: auto; border-radius: 5px; color: #2563eb;
  background: #eff6ff; border: 1px solid rgba(37,99,235,0.35); padding: 4px; display: flex;
}
.rc-pulse.out { background: #ea580c; box-shadow: 0 0 12px rgba(234,88,12,0.7); }
.rc-pulse.md  { background: #16a34a; box-shadow: 0 0 12px rgba(22,163,74,0.6); }
.rc-lane-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #a4a4ac; z-index: 2; text-align: center;
}
.rc-lane-sub { display: block; font-size: 7px; letter-spacing: 0.08em; color: #b4b4bc; margin-top: 2px; }

/* ---- "scatter -> one" hero animation (enterprise-teams) ---- */
.unify-stage { position: relative; width: 420px; height: 340px; flex-shrink: 0; }
.u-anim-tile { width: 48px; height: 48px; border-radius: 7px; background: #fff;
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 2px 10px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center; }
.u-anim-tile img { width: 27px; height: 27px; object-fit: contain; }
.u-tile { position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -24px;
  animation: uTile 13s ease-in-out infinite; }
@keyframes uTile {
  0%   { transform: translate(var(--sx), var(--sy)); opacity: 0; }
  5%   { opacity: 1; }
  36%  { transform: translate(var(--sx), var(--sy)) scale(1); opacity: 1; }
  46%  { transform: translate(0,0) scale(0.7); opacity: 1; }
  51%  { transform: translate(0,0) scale(0.3); opacity: 0; }
  99%  { transform: translate(var(--sx), var(--sy)) scale(1); opacity: 0; }
  100% { transform: translate(var(--sx), var(--sy)); opacity: 0; }
}
.u-float { display: block; animation: uFloatX 7s ease-in-out infinite alternate; }
.u-floaty { display: block; animation: uFloatY 5.4s ease-in-out infinite alternate; }
/* incommensurate x/y periods per tile -> slow directionless wander, not a bob */
@keyframes uFloatX {
  0%   { transform: translateX(-22px); }
  100% { transform: translateX(24px); }
}
@keyframes uFloatY {
  0%   { transform: translateY(-18px) rotate(-2deg); }
  100% { transform: translateY(20px) rotate(2deg); }
}
.u-logo { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px;
  margin: -36px 0 0 -36px; animation: uLogo 13s ease-in-out infinite; opacity: 0; }
.u-logo img { width: 100%; height: 100%; }
@keyframes uLogo {
  0%,49% { opacity: 0; transform: scale(0.4); }
  58%    { opacity: 1; transform: scale(1); }
  88%    { opacity: 1; transform: scale(1); }
  95%,100% { opacity: 0; transform: scale(0.9); }
}
.u-label { position: absolute; left: 50%; top: 50%; transform: translateX(-50%);
  margin-top: 48px; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; color: var(--text-white); white-space: nowrap;
  animation: uLabel 13s ease-in-out infinite; opacity: 0; }
.u-label .brace { color: var(--accent); }
@keyframes uLabel {
  0%,56% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  64%    { opacity: 1; transform: translateX(-50%) translateY(0); }
  88%    { opacity: 1; }
  94%,100% { opacity: 0; }
}
@media (max-width: 1024px) {
  .unify-stage { width: 300px; height: 250px; margin: 0 auto; }
  .unify-stage .u-tile { zoom: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .u-tile, .u-float { animation: none; opacity: 0; }
  .u-logo, .u-label { animation: none; opacity: 1; }
}

/* ============================================================
   Round 12 — MCP server validation page
   ============================================================ */

/* ----- protocol cards (light): six numbered checks ----- */
.proto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }
.proto-card {
  background: var(--bg-light-card); border: 1px solid var(--border-light);
  border-radius: 7px; padding: 22px 22px 20px;
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1), border-color 0.2s, box-shadow 0.2s;
}
.proto-card:hover { transform: translateY(-3px); border-color: #d4d4d8; box-shadow: 0 10px 28px -14px rgba(0,0,0,0.25); }
.proto-card .pn {
  display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; color: var(--accent); margin-bottom: 10px;
}
.proto-card h3 { font-size: 16.5px; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; letter-spacing: -0.01em; }
.proto-card ul { list-style: none; padding: 0; margin: 0; }
.proto-card li {
  position: relative; padding-left: 14px; margin-top: 6px;
  font-size: 14px; color: var(--text-dark-sub); line-height: 1.5;
}
.proto-card li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); opacity: 0.75;
}

/* ----- findings cards (dark): tests said / system did / the fix ----- */
.finding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
.finding-card {
  background: var(--bg-dark-card); border: 1px solid var(--border-dark);
  border-radius: 7px; padding: 18px 22px 8px; transition: border-color 0.2s;
}
.finding-card:hover { border-color: rgba(255,255,255,0.12); }
.fc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fc-logo {
  width: 32px; height: 28px; border-radius: 6px; background: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.fc-logo img { max-width: 22px; max-height: 18px; width: auto; height: auto; object-fit: contain; }
.fc-sys { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #a4a4ac; }
.fc-tool {
  margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: #e6e6ea;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09);
  padding: 3px 9px; border-radius: 5px; white-space: nowrap;
}
.fc-line {
  display: grid; grid-template-columns: 88px 1fr; gap: 12px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--border-dark);
  font-size: 14px; line-height: 1.55;
}
.fc-line .k { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.fc-line.said .k { color: #4ade80; }
.fc-line.did  .k { color: #f87171; }
.fc-line.fix  .k { color: var(--accent); }
.fc-line .v { color: #a4a4ac; }
.fc-line.did .v { color: #f0f0f2; }
.fc-line .v b { color: #fca5a5; font-weight: 600; font-family: var(--font-mono); font-size: 13px; }

/* ----- shared hero-entrance for the three validation heroes ----- */
.hero-wrapper .vrun, .hero-wrapper .vrep { animation: fadeInUp 0.6s cubic-bezier(0.22,0.61,0.36,1) 0.22s both; }

/* ============================================================
   A. test-runner console
   ============================================================ */
.vrun { width: 420px; flex-shrink: 0; }
.vr-panel {
  background: #0b0b0e; border: 1px solid #1e1e25; border-radius: 8px;
  overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.95);
}
.vr-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border-bottom: 1px solid #17171c; background: #09090c;
}
.vr-title { margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px; color: #6a6a74; letter-spacing: 0.01em; }
.vr-sys {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; color: #c8c8d0;
  background: #f4f4f5; color: #18181b; border-radius: 5px; padding: 3px 8px 3px 5px;
  transition: opacity 0.22s, transform 0.22s;
}
.vr-sys.swap { opacity: 0; transform: translateY(-3px); }
.vr-sys img { max-width: 30px; max-height: 14px; width: auto; height: auto; object-fit: contain; }
.vr-rows { padding: 14px 16px 6px; min-height: 246px; font-family: var(--font-mono); font-size: 12px; }
.vr-row {
  display: grid; grid-template-columns: 18px 1fr auto auto; gap: 0 10px; align-items: center;
  padding: 5px 0; color: #7d7d87;
  animation: vrIn 0.28s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes vrIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.vr-row .st { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }
.vr-row .st i {
  display: block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid #3a3a44; border-top-color: #8a8a94;
  animation: vrSpin 0.8s linear infinite;
}
@keyframes vrSpin { to { transform: rotate(360deg); } }
.vr-row.done .st i { animation: none; border: none; width: 12px; height: 12px; border-radius: 3px; }
.vr-row.done.ok .st i   { background: rgba(34,197,94,0.18); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.6); }
.vr-row.done.bad .st i  { background: rgba(248,113,113,0.2); box-shadow: inset 0 0 0 1px rgba(248,113,113,0.7); }
.vr-row.done.warn .st i { background: rgba(251,191,36,0.18); box-shadow: inset 0 0 0 1px rgba(251,191,36,0.65); }
.vr-row .nm { color: #d4d4d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vr-row.done.bad .nm { color: #fca5a5; }
.vr-row.done.warn .nm { color: #fcd34d; }
.vr-row .kd { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #5d5d67; }
.vr-row.write .kd { color: #c2410c; }
.vr-row.agent .kd { color: #60a5fa; }
.vr-row.fail .kd  { color: #a78bfa; }
.vr-row .ms { font-size: 10.5px; color: #5d5d67; min-width: 46px; text-align: right; }
.vr-cause {
  grid-column: 1 / -1; padding: 2px 0 2px 28px; font-size: 11px; line-height: 1.5;
  animation: vrIn 0.28s cubic-bezier(0.22,0.61,0.36,1) both;
}
.vr-cause.bad  { color: #f87171; }
.vr-cause.warn { color: #fbbf24; }
.vr-foot { padding: 12px 16px 14px; border-top: 1px solid #17171c; background: #09090c; }
.vr-prog { height: 4px; border-radius: 2px; background: #1a1a20; overflow: hidden; }
.vr-prog i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, #f97316, #fb923c);
  transition: width 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.vr-counts { display: flex; gap: 16px; margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; }
.vr-counts .ok   { color: #4ade80; }
.vr-counts .bad  { color: #f87171; }
.vr-counts .warn { color: #fbbf24; }
.vr-report {
  margin-top: 14px; padding: 13px 18px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.025); border: 1px solid #1e1e25; border-radius: 8px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--green);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s;
}
.vr-report.on { opacity: 1; transform: none; border-color: rgba(34,197,94,0.3); }
.vr-report .tick {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; color: #22c55e;
  background: rgba(34,197,94,0.14); border: 1px solid rgba(34,197,94,0.35);
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   B. the report, assembling itself (light document on the dark hero)
   ============================================================ */
.vrep { width: 420px; flex-shrink: 0; }
.rp-doc {
  background: #fafafa; color: var(--text-dark); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.4);
  padding: 18px 20px 16px; min-height: 500px;
  transition: opacity 0.3s, transform 0.3s;
}
.rp-doc.swap { opacity: 0; transform: translateY(6px); }
.rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #e4e4e7; }
.rp-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark); }
.rp-brand img { width: 18px; height: 18px; }
.rp-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-family: var(--font-mono); font-size: 10px; color: #6e6e76; }
.rp-sysline { display: inline-flex; align-items: center; gap: 6px; }
.rp-sysline img { max-width: 26px; max-height: 12px; width: auto; height: auto; object-fit: contain; }
.rp-sysline b { color: var(--text-dark); font-weight: 700; }
.rp-sec {
  margin: 14px 0 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: #ea580c;
}
.rp-cnt { color: #6e6e76; font-weight: 500; }
.rp-matrix { font-family: var(--font-mono); font-size: 10.5px; }
.rp-hrow, .rp-row { display: grid; grid-template-columns: 1fr repeat(5, 30px); gap: 4px; align-items: center; }
.rp-hrow span { font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9aa2; text-align: center; padding-bottom: 4px; }
.rp-hrow span:first-child { text-align: left; }
.rp-row { padding: 2px 0; }
.rp-row .tn { color: #3a3a42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-row .c { height: 18px; display: flex; align-items: center; justify-content: center; }
.rp-row .c i {
  display: block; width: 18px; height: 14px; border-radius: 3px;
  background: #ececef; transform: scale(0.6); opacity: 0.5;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s, background 0.28s;
}
.rp-row .c.on i { transform: scale(1); opacity: 1; }
.rp-row .c.ok i   { background: #22c55e; }
.rp-row .c.bad i  { background: #ef4444; }
.rp-row .c.warn i { background: #f59e0b; }
.rp-row .c.na i   { background: #e4e4e7; opacity: 0.7; }
.rp-finds { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.rp-find {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start;
  padding: 8px 10px; background: #fff; border: 1px solid #e4e4e7; border-radius: 5px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,0.61,0.36,1);
}
.rp-find.on { opacity: 1; transform: none; }
.rp-find .sev {
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; text-align: center; padding: 3px 0; border-radius: 3px;
}
.rp-find .sev.high { background: #fee2e2; color: #b91c1c; }
.rp-find .sev.med  { background: #fef3c7; color: #b45309; }
.rp-find .sev.low  { background: #e0f2fe; color: #0369a1; }
.rp-find .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-find .t { font-size: 11.5px; font-weight: 600; color: var(--text-dark); line-height: 1.4; }
.rp-find .t b { font-family: var(--font-mono); font-weight: 600; color: #b91c1c; }
.rp-find .fx { font-family: var(--font-mono); font-size: 9.5px; color: #6e6e76; line-height: 1.45; }
.rp-stamp {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d4d4d8;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  opacity: 0; transform: scale(0.96); transition: opacity 0.4s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.rp-stamp.on { opacity: 1; transform: none; }
.rp-stamp .badge {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ea580c; border: 1.5px solid #ea580c; border-radius: 4px; padding: 4px 8px;
  transform: rotate(-2deg);
}
.rp-stamp .pt { font-family: var(--font-mono); font-size: 9px; color: #9a9aa2; }

/* ============================================================
   C. probe flow — reuses .flowc; adds harness node + verdict chips
   ============================================================ */
.vprobe .fnode.agent.harness .spark { color: #60a5fa; }
.vprobe .fnode.erp .nm .s { color: #7d7d87; }
.fnode.glow-red { border-color: rgba(248,113,113,0.6); box-shadow: 0 0 20px -5px rgba(248,113,113,0.55); }
.fchip.bad  { color: #fca5a5; background: #1a0c0c; border: 1px solid rgba(248,113,113,0.45); }
.fchip.warn { color: #fcd34d; background: #1a1408; border: 1px solid rgba(251,191,36,0.45); }

/* ----- responsive ----- */
@media (max-width: 1200px) {
  .vrun, .vrep { width: 400px; }
  .vr-rows { font-size: 11.5px; }
}
@media (max-width: 1024px) {
  .proto-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .vrun, .vrep { width: 100%; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .proto-grid, .finding-grid { grid-template-columns: 1fr; }
  .fc-line { grid-template-columns: 1fr; gap: 4px; }
  .fc-tool { margin-left: 0; }
  .fc-top { flex-wrap: wrap; }
}

/* ----- Round 12 feedback ----- */
/* problem-section pivot line: let it run the full section width so it sits on one line */
.problem-pivot { max-width: none; }
/* protocol cards: arrows instead of dots */
.proto-card li { padding-left: 20px; }
.proto-card li::before {
  content: '\2192'; width: auto; height: auto; top: 0; border-radius: 0; background: none;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent); opacity: 1;
  line-height: 1.5;
}

/* ============================================================
   ROUND 14 — BAND TONE VARIANTS
   Every rule here is scoped to .tone-light / .tone-dark, a token
   emitted ONLY by bits.*(tone=…) or hand-written on a page's own
   <section> — plus .hero-light / body.hero-tone-light for the
   light hero and its nav. No untouched page carries any of them.
   Never use !important; nothing above this banner is edited.
   ============================================================ */

/* --- A. problem accordion on a dark band ------------------------------- */
/* .problem-item's ground is a linear-gradient, not a colour: background-image
   must be cleared or the white gradient paints over the new colour. */
.tone-dark .problem-item { background: var(--bg-dark-card); background-image: none; border-color: var(--border-dark); box-shadow: none; }
.tone-dark .problem-item:hover { border-color: rgba(255,255,255,0.10); }
.tone-dark .problem-item.active { border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 32px rgba(0,0,0,0.55); }
.tone-dark .problem-num { color: #a4a4ac; background: rgba(255,255,255,0.05); border-color: var(--border-dark); }
.tone-dark .problem-header h3 { color: var(--text-white); }
.tone-dark .problem-toggle { background: rgba(255,255,255,0.06); }
.tone-dark .problem-toggle svg { color: #a4a4ac; }
.tone-dark .problem-item.active .problem-toggle { background: rgba(255,255,255,0.14); }
.tone-dark .problem-item.active .problem-toggle svg { color: #f0f0f2; }
.tone-dark .problem-content p { color: #a4a4ac; }
.tone-dark .problem-pivot { color: #a4a4ac; }
.tone-dark .problem-pivot strong { color: var(--text-white); }

/* --- B. vertical timeline on a light band ------------------------------ */
.tone-light .timeline::before { background: var(--border-light); }
.tone-light .timeline-content { background: var(--bg-light-card); border-color: var(--border-light); }
.tone-light .timeline-content:hover { border-color: #d4d4d8; box-shadow: 0 6px 20px rgba(0,0,0,0.06); }
.tone-light .timeline-text h3 { color: var(--text-dark); }
.tone-light .timeline-text p { color: var(--text-dark-sub); }
.tone-light .timeline-badge { color: #c2410c; }

/* --- C. platform tiles on a dark band ---------------------------------- */
.tone-dark .plat-tile { background: var(--bg-dark-card); border-color: var(--border-dark); }
.tone-dark .plat-tile:hover { border-color: rgba(255,255,255,0.14); box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
.tone-dark .plat-tile h4 { color: var(--text-white); }
.tone-dark .plat-tile p { color: #a4a4ac; }
.tone-dark .plat-meta { color: #8f8f97; border-top-color: var(--border-dark); opacity: 1; }
/* hand-drawn tile icons carry stroke="#6e6e76" as a presentation attribute,
   which any CSS declaration outranks */
.tone-dark .plat-tile-head svg { stroke: #a4a4ac; }

/* --- D. checklist on a dark band --------------------------------------- */
.tone-dark .checklist-item { color: #a4a4ac; }
.tone-dark .delivery-hint { color: #a4a4ac; }

/* --- E. step cards on a dark band -------------------------------------- */
/* .step-card is redeclared light at site.css:1055, so the dark band needs its
   own variant even though the ORIGINAL .step-card (451) is dark. */
.tone-dark .step-card { background: var(--bg-dark-card); border-color: var(--border-dark); }
.tone-dark .step-card:hover { border-color: rgba(255,255,255,0.10); }
.tone-dark .step-card h3 { color: var(--text-white); }
.tone-dark .step-card p { color: #a4a4ac; }
.tone-dark .step-card .step-time { color: #8f8f97; }
.tone-dark .step-num { color: #fb923c; }
/* …but the layout="rows" variant's step-num is a filled orange disc (site.css:1065) */
.tone-dark .step-row .step-num { color: #fff; }

/* --- F. compare table on a light band ---------------------------------- */
/* .compare-section sets its own background at (0,1,0) AFTER .section-light,
   so section-light alone does nothing. Co-class at (0,2,0) instead. */
.compare-section.section-light { background: var(--bg-light); }
.tone-light .compare-table thead th { color: var(--text-dark-sub); border-bottom-color: var(--border-light); background: var(--bg-light); }
.tone-light .compare-table thead th.hl { color: #c2410c; border-bottom-color: rgba(194,65,12,0.28); }
.tone-light .compare-table tbody td { color: var(--text-dark-sub); border-bottom-color: var(--border-light); }
.tone-light .compare-table tbody td:first-child { color: var(--text-dark); }
.tone-light .compare-table tbody td.hl { color: var(--text-dark); background: rgba(234,88,12,0.045); }
.tone-light .compare-table tbody tr:hover td { background: rgba(24,24,27,0.035); color: #3f3f48; }
.tone-light .compare-table tbody tr:hover td:first-child { color: #131316; }
.tone-light .compare-table tbody tr:hover td.hl { background: rgba(234,88,12,0.10); color: #131316; }
.tone-light .compare-table tbody tr:hover { box-shadow: inset 0 0 0 1px rgba(24,24,27,0.06); }
.tone-light .compare-scroll-hint { color: #a1a1aa; }
.tone-light .section-subtitle { color: var(--text-dark-sub); }
.compare-note { margin-top: 20px; font-size: 14px; text-align: center; color: var(--text-dark-sub);
  max-width: 90%; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) { .compare-note { max-width: 100%; } }

/* --- G. fit lists on a dark band --------------------------------------- */
/* .fit-col-good h3 / .fit-list-good li svg stay --green (8.73:1 on #09090b). */
.tone-dark .fit-col-bad h3 { color: #a4a4ac; }
.tone-dark .fit-list li { color: #a4a4ac; }
.tone-dark .fit-list-bad li svg { color: #a4a4ac; opacity: 0.55; }
.tone-dark .fit-list li a:hover { color: var(--text-white); }

/* --- H. FAQ accordion on a dark band ----------------------------------- */
.tone-dark .faq-item { background: var(--bg-dark-card); border-color: var(--border-dark); }
.tone-dark .faq-item:hover { border-color: rgba(255,255,255,0.10); }
.tone-dark .faq-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(249,115,22,0.18); }
.tone-dark .faq-header h3 { color: var(--text-white); }
.tone-dark .faq-toggle { background: rgba(255,255,255,0.06); }
.tone-dark .faq-toggle svg { color: #a4a4ac; }
.tone-dark .faq-content p { color: #a4a4ac; }

/* --- I. signpost on a dark band ---------------------------------------- */
/* .signpost is a DARK card built for a light band; on black it dissolves to a
   hairline. Invert it: a light card on black. */
.tone-dark .signpost { background: var(--bg-light-card); border-color: var(--border-light); }
.tone-dark .signpost:hover { border-color: rgba(234,88,12,0.5); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.75); }
.tone-dark .signpost::before { background: radial-gradient(600px 120px at 12% 50%, rgba(234,88,12,0.10), transparent 70%); }
.tone-dark .signpost-icon { background: rgba(234,88,12,0.10); border-color: rgba(234,88,12,0.28); color: #c2410c; }
.tone-dark .signpost-icon .one { color: #c2410c; }
.tone-dark .signpost-kicker { color: #c2410c; }
.tone-dark .signpost-body h3 { color: var(--text-dark); }
.tone-dark .signpost-body p { color: var(--text-dark-sub); }
.tone-dark .signpost-go { color: #c2410c; border-color: rgba(234,88,12,0.32); background: rgba(234,88,12,0.07); }
.tone-dark .signpost:hover .signpost-go { background: rgba(234,88,12,0.14); border-color: rgba(234,88,12,0.55); }

/* --- J. promoted signpost band ----------------------------------------- */
/* 120px band padding + .signpost{margin-top:48px} = 168px against 120 elsewhere */
.signpost-band > .section-inner > .signpost { margin-top: 0; }

/* --- K. MCP scenario demo on a light band ------------------------------ */
/* .demo-container stays a dark console — only its framing flips. */
.scenario-section.section-light { background: var(--bg-light); }
.tone-light.scenario-section .section-head h2 { color: var(--text-dark); }
.tone-light.scenario-section .section-head h2 .accent { color: #ea580c; }
.tone-light.scenario-section .section-head p { color: var(--text-dark-sub); }
.tone-light.scenario-section .section-label-dark { color: #c2410c; }
.tone-light .scenario-tab { background: var(--bg-light-card); border-color: var(--border-light); }
.tone-light .scenario-tab:hover { border-color: #d4d4d8; }
.tone-light .scenario-tab.active { border-color: rgba(234,88,12,0.45); background: rgba(234,88,12,0.05); }
.tone-light .tab-icon { color: #9a9aa2; }
.tone-light .scenario-tab.active .tab-icon { color: #c2410c; }
.tone-light .tab-title { color: var(--text-dark-sub); }
.tone-light .scenario-tab.active .tab-title { color: var(--text-dark); }
.tone-light .tab-sub { color: #9a9aa2; }
.tone-light .scenario-tab.active .tab-sub { color: var(--text-dark-sub); }
.tone-light .demo-container { box-shadow: 0 18px 44px -22px rgba(0,0,0,0.45); }

/* --- L. integration feed console on a light band ------------------------ */
/* The wrap is 1100px while .feed-panel caps at 820 — 140px of dead black
   gutter each side on white. Pull it in and make it read as an inset console. */
.tone-light .feed-widget-wrap {
  max-width: 884px; margin: 0 auto; padding: 30px 32px;
  border: 1px solid var(--border-dark);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,0.45);
}

/* ============================================================
   ROUND 14 — LIGHT HERO
   .hero-wrapper keeps min-height:95vh + the flex centring, and
   .hero keeps padding:100px 48px 72px. This is a palette swap
   plus a ground — nothing structural.
   ============================================================ */

.hero-wrapper.hero-light {
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfc 52%, #f4f4f6 100%);
  color: var(--text-dark);
  box-shadow: inset 0 -1px 0 rgba(234,88,12,0.45);
}
/* blueprint grid, phased off .hero's content edge (max-width 1290 ÷ 2 = 645, −48 padding) */
.hero-wrapper.hero-light::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right , rgba(24,24,27,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(24,24,27,0.05) 1px, transparent 1px);
  background-size: 90px 90px;
  background-position: calc(50% - 597px) 34px;
  -webkit-mask-image: radial-gradient(118% 80% at 28% 30%, #000 0%, rgba(0,0,0,0.30) 52%, transparent 79%);
          mask-image: radial-gradient(118% 80% at 28% 30%, #000 0%, rgba(0,0,0,0.30) 52%, transparent 79%);
}
.hero-wrapper.hero-light > .hero { position: relative; z-index: 1; }

/* breadcrumb */
.hero-light .hero-breadcrumb { color: #5c5c66; }
.hero-light .hero-breadcrumb a { color: #5c5c66; }
.hero-light .hero-breadcrumb a:hover { color: #c2410c; }
.hero-light .hero-breadcrumb .bc-sep { color: #5c5c66; }
.hero-light .hero-breadcrumb .bc-current { color: #1e1e23; }

/* headline + sub — .hero h1 sets no colour of its own, it inherits body{--text-white} */
.hero-light .hero h1 { color: #131316; }
.hero-light .hero h1 .dim { color: #545460; }
.hero-light .hero-sub { color: #55555f; }
.hero-light .hero-sub strong { color: #131316; }

/* buttons — .btn-primary is correct on both grounds and is NOT touched */
.hero-light .btn-outline { color: #27272e; border: 1px solid rgba(24,24,27,0.18); background: rgba(255,255,255,0.6); }
.hero-light .btn-outline:hover { background: rgba(24,24,27,0.045); border-color: rgba(24,24,27,0.30); }

/* trust line + vendor banner (dormant on today's three light heroes) */
.hero-light .hero-trust { color: #5c5c66; }
.hero-light .hero-trust .sep { color: #c3c3ca; }
.hero-light .vendor-banner { color: #55555f; background: rgba(24,24,27,0.035); border-color: rgba(24,24,27,0.12); }
.hero-light .vendor-banner strong { color: #131316; }
.hero-light .vendor-banner .vb-dot { box-shadow: none; }

/* hero flow diagram (dormant on today's three light heroes) */
.hero-light .hero-flow-node.node-saas { border-color: #c2410c; color: #c2410c; }
.hero-light .hero-flow-node.node-enterprise { border-color: #5c5c66; color: #5c5c66; }
.hero-light .hero-flow-arrow,
.hero-light .hero-flow-arrow-down { color: #8a8a8e; opacity: 0.8; }
.hero-light .hero-flow-label { color: #5c5c66; opacity: 0.9; }

@media (max-width: 768px) {
  .hero-wrapper.hero-light::before { background-position: 24px 24px; }
}

/* ============================================================
   ROUND 14 — HERO ART ON THE LIGHT HERO (layout only)
   The three hero widgets sit directly on the light ground; their
   light palettes live in the ROUND 15 block below. Only layout here.
   ============================================================ */
@media (max-width: 900px) {
  /* .hero-grid does not stack until 768, so between 769 and ~860 the art
     ran past the viewport and was sliced by html,body{overflow-x:hidden}.
     Stack here instead. Also fixes .seq computing to 0 width at <=900. */
  .hero-light .hero-grid { grid-template-columns: 1fr; }
  .hero-light .seq { width: 100%; max-width: 420px; margin: 0 auto; }
}

/* ============================================================
   ROUND 14 — NAV OVER A LIGHT HERO
   rgba(9,9,11,0.8) composites to rgb(57,57,59) over #fafafa and its
   rgba(255,255,255,0.04) hairline vanishes. 0.97 lands at rgb(16,16,18),
   within 6 units of the dark-page rendering. Scoped to the body class so
   the six dark-hero preview pages are untouched.
   ============================================================ */

body.hero-tone-light nav {
  background: rgba(9,9,11,0.97);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
          backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid rgba(24,24,27,0.10);
  box-shadow: 0 1px 0 rgba(24,24,27,0.09), 0 6px 14px -12px rgba(9,9,11,0.28);
}
/* the rule above outranks nav.hero-scrolled, so restate its lift; the alpha
   deliberately stays at 0.97 so the bar does not shift tone as you scroll */
body.hero-tone-light nav.hero-scrolled { box-shadow: 0 6px 24px -12px rgba(9,9,11,0.8); }

/* ==== ROUND 15 — ANIMATED WIDGETS ON LIGHT GROUNDS ==== */

/* ============================================================
   ROUND 15 — LIGHT CHIP FAMILY
   .gnt  (marketplace-publishing hero: certification path)
   .flowc (custom-mcp-integration hero: flow canvas)
   One chip language for both dot-grid stage diagrams on the white
   hero: white cards with a hairline + soft shadow, dark mono text,
   rails/connectors as rgba(24,24,27,.25) dashes, status chips as
   green/red/blue washes, the active node as an orange ring + glow.
   One near-black anchor per widget: the reader's own product
   ("your app" / "your ai product") — the origin of the flow — using
   the site's dark-card-on-a-light-band idiom.
   Every selector is scoped under .hero-light; the dark stages on the
   anim-lab pages and dark-hero pages are untouched. No !important.
   State rules (lit, passed, burst, glow-blue/green/or, fire) are restated at
   higher specificity than site.css so the base card rules here never
   swallow their glow.
   ============================================================ */

/* --- shared tokens (scoped) ------------------------------------------- */
.hero-light .gnt-stage,
.hero-light .flowc-stage {
  --lc-ink:   #18181b;
  --lc-ink-3: #6e6e76;
  --lc-card:  #ffffff;
  --lc-hair:  #e4e4e7;
  --lc-rail:  rgba(24,24,27,0.25);
  --lc-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 8px 20px -10px rgba(9,9,11,0.16);
  --lc-anchor-shadow: 0 1px 2px rgba(9,9,11,0.10), 0 10px 24px -10px rgba(9,9,11,0.35);
  --lc-or: #ea580c;
  --lc-or-text: #c2410c;
  --lc-or-ring: 0 0 0 3px rgba(249,115,22,0.18), 0 0 22px -4px rgba(249,115,22,0.45);
  --lc-gr-text: #15803d;
  --lc-gr-edge: rgba(21,128,61,0.35);
  --lc-gr-ring: 0 0 0 3px rgba(34,197,94,0.14), 0 0 20px -5px rgba(34,197,94,0.35);
  --lc-bl-text: #1d4ed8;
  --lc-bl-edge: rgba(37,99,235,0.35);
  --lc-bl-ring: 0 0 0 3px rgba(37,99,235,0.14), 0 0 20px -5px rgba(37,99,235,0.35);
  /* no stage dot-grid on the light hero — the ground carries the texture */
  background-image: none;
}

/* ============================================================
   .gnt — certification path
   ============================================================ */
.hero-light .gnt-line { border-left-color: var(--lc-rail); }

/* gate cards + store card */
.hero-light .gnt-node {
  background: var(--lc-card);
  border-color: var(--lc-hair);
  box-shadow: var(--lc-shadow);
}
.hero-light .gnt-node .nm { color: var(--lc-ink); }

/* the one dark anchor: the reader's app, where the pulse starts */
.hero-light .gnt-node.app {
  background: var(--lc-ink);
  border-color: var(--lc-ink);
  box-shadow: var(--lc-anchor-shadow);
}
.hero-light .gnt-node.app .nm { color: #f4f4f5; }

/* store tile: white plate with a hairline so it still reads as a plate on a white card */
.hero-light .gnt-node.store .tile {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24,24,27,0.10);
}

/* states — after .app so they win the border/shadow on the anchor too */
.hero-light .gnt-node.lit {
  border-color: var(--lc-or);
  box-shadow: var(--lc-or-ring), var(--lc-shadow);
}
.hero-light .gnt-node.passed {
  border-color: rgba(21,128,61,0.45);
  background: #f6fdf8;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.10), var(--lc-shadow);
}

/* travelling dot */
.hero-light .gnt-pulse {
  background: var(--lc-or);
  box-shadow: 0 0 10px 2px rgba(249,115,22,0.40);
}
.hero-light .gnt-pulse.burst {
  background: rgba(249,115,22,0);
  border-color: var(--lc-or);
  box-shadow: var(--lc-or-ring);
}

/* status chips beside the gates */
.hero-light .gnt-chip { box-shadow: 0 1px 2px rgba(9,9,11,0.04); }
.hero-light .gnt-chip.ok  { color: var(--lc-gr-text); background: #e9f9ef; border-color: var(--lc-gr-edge); }
.hero-light .gnt-chip.wrn { color: #b91c1c; background: #fef0f0; border-color: rgba(185,28,28,0.35); }
.hero-light .gnt-chip.inf { color: var(--lc-bl-text); background: #eff5fe; border-color: var(--lc-bl-edge); }

/* ============================================================
   .flowc — flow canvas
   ============================================================ */
.hero-light .flowc-svg path { stroke: var(--lc-rail); }
.hero-light .flowc-svg path.hot-req { stroke: rgba(37,99,235,0.70); }
.hero-light .flowc-svg path.hot-res { stroke: rgba(21,128,61,0.70); }
.hero-light .flowc-svg path.hot-wr  { stroke: rgba(234,88,12,0.80); }

/* system cards */
.hero-light .fnode {
  background: var(--lc-card);
  border-color: var(--lc-hair);
  box-shadow: var(--lc-shadow);
}
.hero-light .fnode .tile {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(24,24,27,0.10);
}
.hero-light .fnode .nm { color: var(--lc-ink); }
.hero-light .fnode .nm .s { color: var(--lc-ink-3); }

/* the one dark anchor: the reader's AI product, where every workflow starts */
.hero-light .fnode.agent {
  background: var(--lc-ink);
  border-color: var(--lc-ink);
  box-shadow: var(--lc-anchor-shadow);
}
.hero-light .fnode.agent .nm { color: #f4f4f5; }
.hero-light .fnode.agent .spark { color: #60a5fa; }

/* the MCP server we build: the persistent orange node */
.hero-light .fnode.mcp {
  background: #fff7ed;
  border-color: rgba(234,88,12,0.45);
}
.hero-light .fnode.mcp .nm  { color: var(--lc-or-text); }
.hero-light .fnode.mcp .sub { color: #9a3412; }

/* states — after .agent/.mcp so the ring wins on those too */
.hero-light .fnode.glow-blue  { border-color: rgba(37,99,235,0.60); box-shadow: var(--lc-bl-ring), var(--lc-shadow); }
.hero-light .fnode.glow-green { border-color: rgba(21,128,61,0.55); box-shadow: var(--lc-gr-ring), var(--lc-shadow); }
.hero-light .fnode.glow-or    { border-color: var(--lc-or);          box-shadow: var(--lc-or-ring), var(--lc-shadow); }
.hero-light .fnode.agent.glow-blue  { border-color: #3b82f6; box-shadow: var(--lc-bl-ring), var(--lc-anchor-shadow); }
.hero-light .fnode.agent.glow-green { border-color: #22c55e; box-shadow: var(--lc-gr-ring), var(--lc-anchor-shadow); }
.hero-light .fnode.mcp.fire {
  border-color: var(--lc-or);
  box-shadow: 0 0 0 3px rgba(249,115,22,0.18), 0 0 26px -4px rgba(249,115,22,0.45), var(--lc-shadow);
}

/* result chips */
.hero-light .fchip { box-shadow: 0 1px 2px rgba(9,9,11,0.04); }
.hero-light .fchip.ok  { color: var(--lc-gr-text); background: #e9f9ef; border-color: var(--lc-gr-edge); }
.hero-light .fchip.inf { color: var(--lc-bl-text); background: #eff5fe; border-color: var(--lc-bl-edge); }

/* travelling dots */
.hero-light .fpulse.req { background: #2563eb; box-shadow: 0 0 10px 2px rgba(37,99,235,0.35); }
.hero-light .fpulse.res { background: #16a34a; box-shadow: 0 0 10px 2px rgba(22,163,74,0.35); }
.hero-light .fpulse.wr  { background: var(--lc-or); box-shadow: 0 0 10px 2px rgba(249,115,22,0.40); }

/* ============================================================
   LIGHT TONE — .seq SEQUENCE STREAM (custom API hero)
   Palette-only swap for the two-lifeline call stream when it sits
   on the light hero. Every rule is scoped under .hero-light so the
   dark rendering on anim-lab-api*.html is untouched. The stage's
   linear fade mask stays: on the light ground it fades to white.
   No dark anchor here: a near-black lifeline under that mask ends
   in a black-to-white smear at both ends (tried, rejected).
   ============================================================ */

/* lifelines: the rotated endpoint cards become narrow light-grey
   columns — sunk surface + hairline, no shadow (a rotated offset
   shadow would fall sideways into the stream) */
.hero-light .seq-node {
  background: #f2f2f4;
  border: 1px solid #e0e0e4;
  box-shadow: none;
}
.hero-light .seq-node .tile {
  background: #ffffff;
  box-shadow: 0 0 0 1px #e4e4e7;
}
.hero-light .seq-node .nm { color: #18181b; font-size: 18px; letter-spacing: 0.01em; }
.hero-light .seq-node .nm .s { display: none; }      /* just the actor name — no sub-line */
.hero-light .seq-node { gap: 14px; }
.hero-light .seq-node .tile { width: 28px; height: 28px; }
.hero-light .seq-node .tile img { width: 20px; height: 20px; }

/* request → blue, response ← green, error ← red, at on-white values.
   Dash alpha .7 lands the dashes near 2.9:1 against white — same
   visual weight the .75 dashes carry on the dark stage. */
.hero-light .seq-arrow.req::before { background: repeating-linear-gradient(90deg, rgba(37,99,235,0.70) 0 5px, transparent 5px 9px); }
.hero-light .seq-arrow.res::before { background: repeating-linear-gradient(90deg, rgba(21,128,61,0.70) 0 5px, transparent 5px 9px); }
.hero-light .seq-arrow.err::before { background: repeating-linear-gradient(90deg, rgba(185,28,28,0.70) 0 5px, transparent 5px 9px); }
.hero-light .seq-arrow.req::after { border-color: transparent transparent transparent #2563eb; }
.hero-light .seq-arrow.res::after { border-color: transparent #15803d transparent transparent; }
.hero-light .seq-arrow.err::after { border-color: transparent #b91c1c transparent transparent; }

/* mono call labels (10.5px, 10px under 1200): measured against the
   hero's darkest ground #f4f4f6 — blue 6.1:1, green 4.6:1, red 5.9:1 */
.hero-light .seq-lab.req { color: #1d4ed8; }
.hero-light .seq-lab.res { color: #15803d; }
.hero-light .seq-lab.err { color: #b91c1c; }
.hero-light .seq-lab.fin { color: #15803d; }

/* the customer-rule annotation: orange-tinted card. Solid fill so the
   text contrast (4.8:1) does not drift with the hero gradient. */
.hero-light .seq-note {
  color: #c2410c;
  background: #fff4ec;
  border-color: rgba(234,88,12,0.35);
}

/* ============================================================
   ROUND 15 — LIGHT CONSOLES (family: consoles)
   The integration feed console (custom-api band 3) and the MCP
   scenario demo (custom-mcp band 3) rendered as LIGHT consoles on
   the #fafafa band: a white card with a hairline + card shadow, a
   #f2f2f4 header strip, mono body #3f3f46 (muted mono #63636b — the
   palette's #6e6e76 measured 4.0:1 once 9px anti-aliasing thinned it), tinted-pill chips and
   tags, sunk #f2f2f4 wells. No dark anchor: both consoles are
   already the single "framed object" on their band, and the client
   asked for the animations to sit on white directly.
   Every selector is scoped under .tone-light and carries the full
   base selector (compound .tone-light.scenario-section for the demo,
   whose band puts both classes on the same <section>), so the dark
   form of both widgets everywhere else is untouched. No !important.
   ============================================================ */

/* ---------- A. INTEGRATION FEED CONSOLE (.tone-light .feed-*) ---------- */

/* The dark wrap was a black panel around tabs + console. On the light band it
   dissolves: tabs become three white cards, the console is the framed object. */
.tone-light .feed-widget-wrap {
  max-width: 820px; margin: 0 auto; padding: 0;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}

/* scenario tabs */
.tone-light .feed-tab {
  background: #ffffff; border-color: #e4e4e7;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04);
}
.tone-light .feed-tab:hover { border-color: #d4d4d8; }
.tone-light .feed-tab.active {
  border-color: rgba(234,88,12,0.70); background: rgba(249,115,22,0.06);
  box-shadow: 0 1px 2px rgba(9,9,11,0.04);
}
.tone-light .feed-tab-icon { color: #8a8a8e; }
.tone-light .feed-tab.active .feed-tab-icon { color: #ea580c; }
.tone-light .feed-tab-title { color: #52525b; }
.tone-light .feed-tab.active .feed-tab-title { color: #18181b; }
.tone-light .feed-tab-sub { color: #63636b; }
.tone-light .feed-tab.active .feed-tab-sub { color: #52525b; }

/* console card */
.tone-light .feed-panel {
  background: #ffffff; border-color: #e4e4e7;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 8px 20px -10px rgba(9,9,11,0.16), 0 28px 56px -28px rgba(9,9,11,0.22);
}
.tone-light .feed-bar { background: #f2f2f4; border-bottom-color: #e4e4e7; }
.tone-light .feed-bar-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.16); }
.tone-light .feed-bar-label { color: #3f3f46; }
.tone-light .feed-bar-right { color: #63636b; }

/* rows */
.tone-light .feed-row.fresh { background: rgba(37,99,235,0.05); }
.tone-light .feed-time { color: #63636b; }
.tone-light .feed-row.show .feed-time { color: #63636b; }
.tone-light .feed-dir.out { color: #1d4ed8; }
.tone-light .feed-dir.in { color: #15803d; }
.tone-light .feed-action { color: #3f3f46; }
.tone-light .feed-row.show .feed-action { color: #3f3f46; }

/* source / target chips — neutral sunk pills */
.tone-light .feed-src,
.tone-light .feed-tgt { color: #3f3f46; background: #f2f2f4; border-color: #e4e4e7; }

/* HTTP-method chips (custom-api fork of the feed) */
.tone-light .feed-method.get   { color: #1d4ed8; background: rgba(37,99,235,0.08);  border-color: rgba(37,99,235,0.35); }
.tone-light .feed-method.post  { color: #c2410c; background: rgba(249,115,22,0.10); border-color: rgba(234,88,12,0.35); }
.tone-light .feed-method.put   { color: #6d28d9; background: rgba(124,58,237,0.08); border-color: rgba(109,40,217,0.30); }
.tone-light .feed-method.patch { color: #15803d; background: rgba(34,197,94,0.10);  border-color: rgba(21,128,61,0.35); }

/* status tags */
.tone-light .feed-badge.synced { color: #15803d; background: rgba(34,197,94,0.10);  border-color: rgba(21,128,61,0.35); }
.tone-light .feed-badge.mapped { color: #1d4ed8; background: rgba(37,99,235,0.08);  border-color: rgba(37,99,235,0.35); }
.tone-light .feed-badge.routed { color: #c2410c; background: rgba(249,115,22,0.10); border-color: rgba(234,88,12,0.35); }
.tone-light .feed-badge.posted { color: #6d28d9; background: rgba(124,58,237,0.08); border-color: rgba(109,40,217,0.30); }

/* ---------- B. MCP SCENARIO DEMO (.tone-light.scenario-section …) ---------- */

/* scenario tabs — restated here so the sub-line clears 4.5:1 (#9a9aa2 did not) */
.tone-light.scenario-section .scenario-tab {
  background: #ffffff; border-color: #e4e4e7;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04);
}
.tone-light.scenario-section .scenario-tab:hover { border-color: #d4d4d8; }
.tone-light.scenario-section .scenario-tab.active {
  border-color: rgba(234,88,12,0.70); background: rgba(249,115,22,0.06);
  box-shadow: 0 1px 2px rgba(9,9,11,0.04);
}
.tone-light.scenario-section .tab-icon { color: #8a8a8e; }
.tone-light.scenario-section .scenario-tab.active .tab-icon { color: #ea580c; }
.tone-light.scenario-section .tab-title { color: #52525b; }
.tone-light.scenario-section .scenario-tab.active .tab-title { color: #18181b; }
.tone-light.scenario-section .tab-sub { color: #63636b; }
.tone-light.scenario-section .scenario-tab.active .tab-sub { color: #52525b; }

/* console card */
.tone-light.scenario-section .demo-container {
  background: #ffffff; border-color: #e4e4e7;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 8px 20px -10px rgba(9,9,11,0.16), 0 28px 56px -28px rgba(9,9,11,0.22);
}
.tone-light.scenario-section .demo-container::before {
  background: none;   /* the dark form's orange corner glow reads as a stain on a white card */
}

/* chat panel — a white card with a #f2f2f4 header and footer strip */
.tone-light.scenario-section .chat-panel { background: #ffffff; border-color: #e4e4e7; }
.tone-light.scenario-section .chat-bar { background: #f2f2f4; border-bottom-color: #e4e4e7; }
.tone-light.scenario-section .chat-bar-dot { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.16); }
.tone-light.scenario-section .chat-bar-label { color: #3f3f46; }
.tone-light.scenario-section .chat-bar-scenario { color: #63636b; }

/* bubbles — user: sunk card; assistant: white card with an orange hairline */
.tone-light.scenario-section .msg.user {
  background: #f2f2f4; border-color: #e4e4e7; color: #27272a;
}
.tone-light.scenario-section .msg.assistant {
  background: #ffffff; border-color: rgba(234,88,12,0.35); color: #27272a;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 6px 14px -8px rgba(9,9,11,0.14);
}
.tone-light.scenario-section .msg .val { color: #c2410c; }
.tone-light.scenario-section .typing-dots span { background: #a1a1aa; }

/* mcp status footer */
.tone-light.scenario-section .mcp-bar { background: #f2f2f4; border-top-color: #e4e4e7; }
.tone-light.scenario-section .mcp-bar-icon { background: rgba(249,115,22,0.14); }
.tone-light.scenario-section .mcp-bar-icon svg { color: #ea580c; }
.tone-light.scenario-section .mcp-bar-text { color: #63636b; }
.tone-light.scenario-section .mcp-bar-text.active { color: #c2410c; }
.tone-light.scenario-section .mcp-bar-text.done { color: #15803d; }

/* tool-call panel */
.tone-light.scenario-section .tools-top-label { color: #63636b; }
.tone-light.scenario-section .tools-top-label .live { background: #ea580c; }

/* idle rows: the dark form dims them to opacity .2 over near-black; on white
   that vanishes, so they stay at .55 as pale sunk rows and light up to a white
   card with a tinted border + glow. */
.tone-light.scenario-section .t-row { background: #f7f7f8; border-color: #e9e9ec; opacity: 0.55; }
.tone-light.scenario-section .t-row.on { opacity: 1; background: #ffffff; border-color: #d4d4d8; }
.tone-light.scenario-section .t-row.on.read-hl {
  border-color: rgba(37,99,235,0.60); background: rgba(37,99,235,0.04);
  box-shadow: 0 6px 16px -8px rgba(37,99,235,0.35);
}
.tone-light.scenario-section .t-row.on.write-hl {
  border-color: #ea580c; background: rgba(249,115,22,0.05);
  box-shadow: 0 6px 16px -8px rgba(249,115,22,0.45);
}
.tone-light.scenario-section .t-row.on.update-hl {
  border-color: rgba(109,40,217,0.60); background: rgba(124,58,237,0.04);
  box-shadow: 0 6px 16px -8px rgba(124,58,237,0.35);
}
.tone-light.scenario-section .t-dot.read   { background: #bfdbfe; }
.tone-light.scenario-section .t-dot.write  { background: #fed7aa; }
.tone-light.scenario-section .t-dot.update { background: #ddd6fe; }
.tone-light.scenario-section .t-row.on .t-dot.read   { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.18); }
.tone-light.scenario-section .t-row.on .t-dot.write  { background: #ea580c; box-shadow: 0 0 0 3px rgba(249,115,22,0.20); }
.tone-light.scenario-section .t-row.on .t-dot.update { background: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,0.18); }
.tone-light.scenario-section .t-method.get  { color: #1d4ed8; background: rgba(37,99,235,0.08); }
.tone-light.scenario-section .t-method.post { color: #c2410c; background: rgba(249,115,22,0.10); }
.tone-light.scenario-section .t-method.put  { color: #6d28d9; background: rgba(124,58,237,0.08); }
.tone-light.scenario-section .t-row.on .t-method.get  { color: #1d4ed8; background: rgba(37,99,235,0.12); }
.tone-light.scenario-section .t-row.on .t-method.post { color: #c2410c; background: rgba(249,115,22,0.14); }
.tone-light.scenario-section .t-row.on .t-method.put  { color: #6d28d9; background: rgba(124,58,237,0.12); }
.tone-light.scenario-section .t-name { color: #52525b; }
.tone-light.scenario-section .t-row.on .t-name { color: #18181b; }
.tone-light.scenario-section .t-sys { color: #52525b; background: #f2f2f4; border-color: #e4e4e7; }
.tone-light.scenario-section .t-row.on .t-sys { color: #c2410c; background: rgba(249,115,22,0.10); border-color: rgba(234,88,12,0.40); }
.tone-light.scenario-section .t-time { color: #63636b; }
.tone-light.scenario-section .t-row.on .t-time { color: #63636b; }

/* system response — a sunk #f2f2f4 well with dark mono */
.tone-light.scenario-section .sys-response { background: #f2f2f4; border-color: #e4e4e7; }
.tone-light.scenario-section .sys-response.active { border-color: #d4d4d8; }
.tone-light.scenario-section .sys-response-inner { color: #3f3f46; }
.tone-light.scenario-section .sys-response.active .sys-response-inner { color: #3f3f46; }
.tone-light.scenario-section .sys-label { color: #52525b; }
.tone-light.scenario-section .sys-label .sys-tool-hl { color: #c2410c; }
.tone-light.scenario-section .sys-data { color: #3f3f46; }
.tone-light.scenario-section .sys-data .hl { color: #c2410c; }
.tone-light.scenario-section .sys-data .hl-blue { color: #1d4ed8; }

/* ============================================================
   ROUND 15 — JUDGE FIXES
   Contrast: the green text token never reached 4.5:1 at 8–9.5px
   regular weight (measured 4.03–4.24). Family: .seq gets the same
   single dark anchor as .gnt/.flowc and lifelines that read as
   rails at 1x. Layout: pre-existing 390px h1 clip (fixed-width art
   inside a 350px track) and the 1100px chip cut by the 380px mask.
   All scoped to .hero-light / .tone-light; no !important.
   ============================================================ */
/* green + muted-mono tokens up to ≥5.4:1 on their tints */
.hero-light .gnt-stage,
.hero-light .flowc-stage { --lc-gr-text: #166534; --lc-ink-3: #52525b; }
.tone-light .feed-badge.synced,
.tone-light .feed-method.patch,
.tone-light .feed-dir.in { color: #166534; }
.tone-light .feed-dir.out { color: #1e40af; }
.tone-light.scenario-section .mcp-bar-text.done { color: #166534; }
.hero-light .seq-lab.res,
.hero-light .seq-lab.fin { color: #166534; }
/* idle tool rows 2.4:1 → ~3.3:1; the .on row stays at full ink */
.tone-light.scenario-section .t-row { opacity: 0.7; }
/* neon state lines on the dark anchor → the on-white tokens */
.hero-light .fnode.agent.glow-green { border-color: #16a34a; }
.hero-light .fnode.agent.glow-blue  { border-color: #2563eb; }

/* .seq joins the family: one dark anchor (the reader's app tile) and rails that read */
.hero-light .seq-node { background: #ececef; border-color: #d4d4d8; }
.hero-light .seq-node.app .tile { background: #18181b; box-shadow: 0 0 0 1px #18181b; }
.hero-light .seq-node.app .tile svg { stroke: #f4f4f5; }   /* APP_GLYPH carries stroke="#101014" */
.hero-light .seq-note { background: #fff7ed; border-color: rgba(234,88,12,0.45); }

/* 1100px: the 380px stage mask cut the right-hand status chips */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-light .gnt-stage { width: 420px; margin-left: -20px; }
}
/* ≤900: fixed-width art forced the 1fr text track wider than the viewport */
@media (max-width: 900px) {
  .hero-light .gnt, .hero-light .gnt-stage { width: 100%; max-width: 380px; }
  .hero-light .flowc { width: 100%; max-width: 420px; }
}
@media (max-width: 440px) {
  .hero-light .flowc-stage { zoom: 0.83; }   /* 420px stage → 349px; nodes, SVG and pulses stay aligned */
}

/* ============================================================
   ROUND 16 — LIGHT HERO: CENTRE IN THE VISIBLE AREA
   The 64px fixed nav covers the top of the 95vh wrapper, and .hero's
   100/72 padding was tuned for the dark hero. Pad the wrapper by the
   nav height and make .hero's padding symmetric, so text + art sit on
   the centre of what the viewer actually sees. min-height stays 95vh
   (border-box), so the hero still owns the full first screen.
   ============================================================ */
.hero-wrapper.hero-light { padding-top: 64px; }
.hero-wrapper.hero-light > .hero { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 768px) {
  .hero-wrapper.hero-light > .hero { padding-top: 48px; padding-bottom: 48px; }
}

/* ==== ROUND 16 — GUIDE SECTION ==== */
/* A light routing band (bits.guide): replaces the dark .signpost bar on
   custom-mcp / custom-api band 9. The band itself is .section-light, so it
   inherits the 120px rhythm and the light palette; nothing below touches
   anything outside the .guide family. Two columns — type on the band to the
   left, one white hairline card (the target page in miniature) to the right,
   the card being the only object with a shadow. Card corners follow the
   site-wide 8px card scale, the button the 3.5px button scale. */
.guide {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
  align-items: center;
}
.guide-copy { min-width: 0; }
.guide-kicker { margin-bottom: 18px; }
.guide-title { margin-bottom: 18px; }
.guide-text {
  font-size: 16.5px; line-height: 1.65;
  color: var(--text-dark-sub); max-width: 560px;
}
.guide-text strong { color: var(--text-dark); }

.guide-card {
  display: block; min-width: 0;
  background: var(--bg-light-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 26px 28px 28px;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 8px 20px -10px rgba(9,9,11,0.16);
  color: var(--text-dark); text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22,0.61,0.36,1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(234,88,12,0.45);
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 18px 36px -16px rgba(9,9,11,0.24);
}
.guide-card-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}
.guide-card-icon {
  width: 34px; height: 34px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(234,88,12,0.08); border: 1px solid rgba(234,88,12,0.22);
  color: #c2410c;
}
.guide-card-icon svg { width: 18px; height: 18px; }
.guide-card-label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark-sub);
  line-height: 1.3;
}
.guide-points {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.guide-points li {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14.5px; line-height: 1.55; color: var(--text-dark);
}
.guide-points li svg { flex-shrink: 0; margin-top: 3px; color: #ea580c; }
.guide-cta { padding: 11px 20px; font-size: 14px; }
.guide-cta svg { transition: transform 0.2s; }
.guide-card:hover .guide-cta { background: var(--accent-hover); }
.guide-card:hover .guide-cta svg { transform: translateX(4px); }

@media (max-width: 1100px) {
  .guide { gap: 48px; }
}
@media (max-width: 900px) {
  .guide { grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .guide-card { max-width: 560px; }
  .guide-copy { max-width: 640px; }
}
@media (max-width: 768px) {
  .guide { gap: 28px; }
  .guide-text { max-width: 100%; }
  .guide-card { padding: 22px 20px 24px; }
  .guide-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card, .guide-cta svg { transition: none; }
  .guide-card:hover { transform: none; }
}

/* ==== ROUND 17 — ENTERPRISE TEAMS ==== */
/* enterprise-teams goes light-first (hero L > problems D > … > guide D > faq L
   > cta D). Everything the page needs that ROUND 14–16 did not already cover:
   the pair grid on a light band, the deliverable grid on a dark band, the
   guide band on a dark band, and the "unify" hero widget on the white hero.
   Every selector is scoped under .tone-light / .tone-dark / .hero-light; the
   dark unify widget on hero-anim-options.html and every other page is
   untouched. No !important. */

/* --- A. system-pair cards on a light band (.pair-card's base is the dark card) --- */
.tone-light .pair-card { background: var(--bg-light-card); border-color: var(--border-light); }
.tone-light .pair-card:hover { border-color: #d4d4d8; box-shadow: 0 12px 32px -12px rgba(0,0,0,0.14); }
.tone-light .pair-card h3 { color: var(--text-dark); }
.tone-light .pair-card p { color: var(--text-dark-sub); }
/* the "no logo" plate was a white-alpha wash for black; on white it needs a sunk fill */
.tone-light .pair-logo-generic { background: var(--bg-light-subtle); border-color: var(--border-light); color: #6e6e76; }
/* the logo plates already carry a white fill + light hairline; a second inset line
   keeps them reading as plates on a white card (same trick as .gnt-node.store .tile) */
.tone-light .pair-logo { box-shadow: inset 0 0 0 1px rgba(24,24,27,0.04); }

/* --- B. deliverable cards on a dark band (.deliver-card's base is the light card) --- */
.tone-dark .deliver-card { background: var(--bg-dark-card); border-color: var(--border-dark); }
.tone-dark .deliver-card:hover { border-color: rgba(255,255,255,0.12); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.tone-dark .deliver-card h4 { color: var(--text-white); }
.tone-dark .deliver-card p { color: #a4a4ac; }

/* --- C. guide band on a dark band --------------------------------------- */
/* Copy goes to the dark-band palette (#a4a4ac = 8.04:1 on #09090b). The card
   stays WHITE — the mirror of the dark-card-on-light idiom — so its inner rules
   (label, points, button) need nothing. Only its shadow is restated: the light
   band's rgba(9,9,11,.16) shadow is invisible on black. */
.tone-dark .guide-text { color: #a4a4ac; }
.tone-dark .guide-text strong { color: var(--text-white); }
.tone-dark .guide-card { box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 18px 40px -18px rgba(0,0,0,0.85); }
.tone-dark .guide-card:hover { box-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 26px 52px -20px rgba(0,0,0,0.9); }

/* --- D. "unify" hero widget on the white hero --------------------------- */
/* Same chip language as .gnt / .flowc (ROUND 15): the wandering system tiles
   are white hairline cards with the soft shadow, the converged "one system"
   node is the widget's ONE near-black anchor — the reader's own systems working
   as one — with the orange ring inside it, and the mono label goes to ink with
   on-white orange braces. No panel, no stage dot-grid: the hero's own blueprint
   grid carries the texture. Layout (stage size, keyframes, reduced-motion) is
   inherited unchanged. */
.hero-light .u-anim-tile {
  background: #ffffff;
  border-color: #e4e4e7;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 8px 20px -10px rgba(9,9,11,0.16);
}
.hero-light .u-logo {
  /* the ring logo carries its own contrast: a white chip like the tiles that merge into it, no dark plate */
  width: 88px; height: 88px; margin: -44px 0 0 -44px; padding: 16px;
  background: #ffffff; border: 1px solid #e4e4e7; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(9,9,11,0.04), 0 10px 24px -10px rgba(9,9,11,0.22);
}
.hero-light .u-label { color: #18181b; margin-top: 58px; }
.hero-light .u-label .brace { color: #c2410c; }
@media (max-width: 1024px) {
  /* the tiles zoom to .72 on the small stage; keep the anchor in proportion */
  .hero-light .u-logo { width: 72px; height: 72px; margin: -36px 0 0 -36px; padding: 13px; border-radius: 10px; }
  .hero-light .u-label { margin-top: 48px; }
}

/* ============================================================
   ROUND 18 — "ALL SERVICES" BAND (bits.services_band)
   Centred statement + a wrapped row of pill links to every service
   page + one CTA. Dark tone uses dark pills on dark (the site's own
   idiom) — no white card on black. All scoped to .services-band.
   ============================================================ */
.services-band .svc-head { max-width: 760px; margin: 0 auto; text-align: center; }
.services-band .svc-head .section-title { text-wrap: balance; }
.services-band .svc-copy { font-size: 16.5px; line-height: 1.65; color: var(--text-dark-sub); margin: 18px auto 0; max-width: 640px; }
.services-band .svc-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 900px; margin: 40px auto 0;
}
.services-band .svc-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-dark); background: var(--bg-light-card); border: 1px solid var(--border-light);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, color 0.2s;
}
.services-band .svc-pill svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.55; transition: opacity 0.2s, transform 0.2s; }
.services-band .svc-pill:hover { border-color: #ea580c; color: #c2410c; transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(9,9,11,0.3); }
.services-band .svc-pill:hover svg { opacity: 1; transform: translateX(2px); }
.services-band .svc-cta { display: flex; justify-content: center; margin-top: 36px; }
/* dark tone */
.services-band.tone-dark .svc-copy { color: #a4a4ac; }
.services-band.tone-dark .svc-copy strong { color: var(--text-white); }
.services-band.tone-dark .svc-pill { color: var(--text-white); background: #131316; border-color: rgba(255,255,255,0.09); }
.services-band.tone-dark .svc-pill:hover { border-color: rgba(249,115,22,0.6); color: #fdba74; box-shadow: 0 10px 24px -14px rgba(0,0,0,0.8); }
@media (max-width: 768px) {
  .services-band .svc-row { gap: 8px; margin-top: 30px; }
  .services-band .svc-pill { padding: 10px 14px; font-size: 12px; white-space: normal; text-align: center; }
  .services-band .svc-cta .btn-primary { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .services-band .svc-pill, .services-band .svc-pill svg { transition: none; } }

/* ============================================================
   Round 31 (2026-09-08) — publish-readiness fixes
   ============================================================ */

/* --- phones: the two-line strapline collided with the nav CTA below 414px --- */
@media (max-width: 480px) {
  .nav-strapline { display: none; }
  .nav-brand { gap: 0; }
}

/* --- phones: .build-anim kept a fixed width inside the one-column hero grid,
       which forced .hero-text to 380px and clipped the H1/CTA at 375-390px --- */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .build-anim, .seq, .gnt, .flowc { width: 100%; max-width: 420px; }
}

/* --- Safari: backface-visibility must sit on the faces AND their images, and
       both faces need an explicit 3D transform, or WebKit draws both at once --- */
.duo-rotator .duo-front { transform: rotateY(0deg) translateZ(1px); }
.duo-rotator .duo-back  { transform: rotateY(180deg) translateZ(1px); }
.duo-rotator .duo-logo, .duo-rotator .duo-logo img {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

/* --- keyboard: nav triggers and accordion headings are real buttons now --- */
button.nav-dropdown-trigger {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--text-gray); cursor: pointer;
}
.nav-dropdown-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; color: var(--text-white); }
.nav-hamburger { background: none; border: 0; padding: 4px; cursor: pointer; }
.nav-hamburger:focus-visible, .mobile-menu-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.acc-btn {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: inline; letter-spacing: inherit;
}
.acc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.acc-btn::after { content: ''; position: absolute; inset: 0; }   /* whole header row is the hit target */
.problem-header, .faq-header, .service-header { position: relative; }
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 1000;
  background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px;
  font-weight: 600; text-decoration: none; transition: top 0.15s;
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; }

/* --- contrast (WCAG AA): the lightest orange that clears 4.5:1 with white text --- */
.btn-primary, .step-row .step-num, .timeline-num { background: #cc470c; }
.btn-primary:hover { background: var(--accent-hover); }
.compare-table thead th { color: #8a8a94; }
.section-light .fit-col-good h3, .tone-light .fit-col-good h3,
.section-light .fit-list-good li svg, .tone-light .fit-list-good li svg { color: #15803d; }
/* orange text on light bands: headings are large (3:1), body-size text needs 4.5:1 */
.section-light .accent, .tone-light .accent, .section-light .fact-num, .tone-light .fact-num { color: #ea580c; }
.section-light p a, .section-light li a, .tone-light p a, .tone-light li a,
.section-light .proto-card .pn, .tone-light .proto-card .pn,
.section-light .section-note a, .tone-light .section-note a, .compare-note a { color: #c2410c; }

/* --- CLS: the custom-MCP chat demo grows while it types; reserve its height --- */
.cmcp-demo-band .chat-panel, .cmcp-demo-band .tools-panel { min-height: 420px; }

/* --- 320-360px: the custom-MCP flow stage is a fixed 420x520 canvas; scale it to the column
       (JS sets the transform) and stop it from widening the hero grid track --- */
@media (max-width: 768px) {
  .hero-light .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .flowc, .seq, .gnt, .build-anim { min-width: 0; }
  .flowc { overflow: hidden; }
}
/* --- accordion bodies are inert while collapsed (keyboard focus cannot land in hidden content) --- */
[inert] { pointer-events: none; }
/* --- light bands: the outline button was white-on-white --- */
.section-light .btn-outline, .tone-light .btn-outline { color: var(--text-dark); border-color: rgba(24,24,27,0.18); }
.section-light .btn-outline:hover, .tone-light .btn-outline:hover { background: rgba(24,24,27,0.05); border-color: rgba(24,24,27,0.3); }

/* ===== Round 32 (2026-09-08, post-launch live check) ===== */
/* --- footer link row never wrapped: at phone widths the first and last links were clipped by the body overflow --- */
.footer-links { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
/* --- timeline cards (About, Marketplace, Rossum): the side badge squeezed the text column to ~100px on phones --- */
@media (max-width: 768px) {
  .timeline-step { gap: 16px; }
  .timeline-content { flex-direction: column; min-width: 0; gap: 8px; padding: 20px; }
  .timeline-badge { order: -1; }
}