/* MigryX homepage, direction A (MigryX Website Style Guide, Sep 22 2026).
   Loaded only by migryx/index.html. Everything is scoped to body.mx-home and
   uses !important where the page still carries older inline styles. */

/* ── Tokens ── */
body.mx-home {
  --mx-ink: #0B1220;
  --mx-ai: #22D3EE;
  --mx-proof: #22C55E;
  --mx-proof-hover: #4ADE80;
  --mx-mismatch: #FBBF24;
  --mx-font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mx-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mx-radius-pill: 999px;
  --mx-radius-button: 12px;
  --mx-radius-card: 16px;
  --mx-radius-tile: 20px;
  --mx-shadow-hero: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(34,211,238,.06);
  --mx-shadow-card-light: 0 1px 2px rgba(11,18,32,.06);

  /* Older site variables, remapped so inline styles follow the guide:
     green is reserved for matched states and the primary button. */
  --ink: #0B1220;
  --ink2: #4A5568;
  --ink3: #64748B;
  --brand: #0B1220;
  --brand2: #0B1220;
  --brand-rgb: 11,18,32;
  --brand-tint: rgba(11,18,32,.04);
  --brand-bright: #E7EBF3;
  --cta: #22C55E;
  --cta2: #0B1220;
  --border: #E2E8F0;
  --mono: var(--mx-font-mono);
  --display: var(--mx-font-sans);

  font-family: var(--mx-font-sans);
  background: #0B1220;
  color: #0B1220;
}

body.mx-home .theme-dark {
  --mx-bg: #0B1220; --mx-surface: #121B2E; --mx-panel: #0E1628;
  --mx-line: #22304D; --mx-line-subtle: #1A2540;
  --mx-text: #E7EBF3; --mx-text-strong: #FFFFFF; --mx-text-secondary: #B7C0D1; --mx-text-muted: #8B96AB;
  --mx-ai-text: #22D3EE; --mx-proof-text: #22C55E;
  --mx-button-secondary-border: #2A3858; --mx-focus: #FFFFFF;
  --brand: #E7EBF3; --brand2: #E7EBF3; --ink2: #B7C0D1; --ink3: #8B96AB;
}
body.mx-home .theme-light {
  --mx-bg: #FFFFFF; --mx-surface: #FFFFFF; --mx-panel: #0E1628;
  --mx-line: #E2E8F0; --mx-line-subtle: #EDF2F7;
  --mx-text: #0B1220; --mx-text-strong: #0B1220; --mx-text-secondary: #4A5568; --mx-text-muted: #64748B;
  --mx-ai-text: #0E7490; --mx-proof-text: #0F7B4F;
  --mx-button-secondary-border: #CBD5E1; --mx-focus: #0B1220;
}
body.mx-home .theme-light.alt { --mx-bg: #F5F7FA; }

html[data-site-page="marketing"] body.mx-home :is(h1, h2, h3, h4, .headline, .hero-mainline) {
  font-family: var(--mx-font-sans) !important;
}
html[data-site-page="marketing"] body.mx-home :focus-visible {
  outline: 2px solid var(--mx-focus, #0B1220) !important;
  outline-offset: 2px !important;
}

/* ── Section themes and rhythm ── */
html[data-site-page="marketing"] body.mx-home section.theme-dark,
html[data-site-page="marketing"] body.mx-home section.theme-light,
html[data-site-page="marketing"] body.mx-home .mx-vs,
html[data-site-page="marketing"] body.mx-home .mx-proof,
html[data-site-page="marketing"] body.mx-home .mx-guides {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
html[data-site-page="marketing"] body.mx-home section.theme-dark {
  background: var(--mx-bg) !important;
  color: var(--mx-text) !important;
}
html[data-site-page="marketing"] body.mx-home section.theme-light {
  background: var(--mx-bg) !important;
  color: var(--mx-text) !important;
}
html[data-site-page="marketing"] body.mx-home section.theme-dark :is(h1, h2, h3, h4, h5, strong, b) {
  color: var(--mx-text-strong) !important;
}
html[data-site-page="marketing"] body.mx-home section.theme-dark :is(p, li, small, dd, dt),
html[data-site-page="marketing"] body.mx-home section.theme-dark [style*="color:#041A2C"],
html[data-site-page="marketing"] body.mx-home section.theme-dark [style*="color:#071A2B"],
html[data-site-page="marketing"] body.mx-home section.theme-dark [style*="color:#496A86"],
html[data-site-page="marketing"] body.mx-home section.theme-dark [style*="color:var(--ink"] {
  color: var(--mx-text-secondary) !important;
}
html[data-site-page="marketing"] body.mx-home section.theme-light :is(h2, h3, h4, h5) {
  color: var(--mx-text-strong) !important;
}
html[data-site-page="marketing"] body.mx-home section.theme-light p {
  color: var(--mx-text-secondary);
}

/* Section headings: H2 48/1.08, eyebrows in mono. */
html[data-site-page="marketing"] body.mx-home :is(section.theme-dark, section.theme-light, .mx-vs, .mx-proof, .mx-guides) h2 {
  font: 700 48px/1.08 var(--mx-font-sans) !important;
  letter-spacing: -.03em !important;
  margin-bottom: 20px !important;
}
html[data-site-page="marketing"] body.mx-home :is(section, .mx-vs, .mx-proof, .mx-guides) :is(p.eyebrow, p[style*="text-transform:uppercase"]) {
  font: 400 13px/1.4 var(--mx-font-mono) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mx-text-muted, #64748B) !important;
  margin: 0 0 16px !important;
}
html[data-site-page="marketing"] body.mx-home .review-checklist h2 {
  font: 600 22px/1.3 var(--mx-font-sans) !important;
  letter-spacing: -.01em !important;
}

/* Links: text color and underline, never green. */
html[data-site-page="marketing"] body.mx-home section.theme-light a:not([class*="btn"]):not([style*="display:flex"]):not([style*="display:inline-flex"]):not(.cta-link):not(.read-more) {
  color: var(--mx-text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-site-page="marketing"] body.mx-home section.theme-dark a:not([class*="btn"]):not([style*="display:inline-flex"]) {
  color: var(--mx-text-strong) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Buttons ── */
html[data-site-page="marketing"] body.mx-home :is(.mx-btn-primary, .btn-primary, .mx-nav__scan, .mx-guides .row button, .mx-proof .foot a, #contact a[style*="background:var(--cta)"]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  background: var(--mx-proof) !important;
  color: var(--mx-ink) !important;
  font: 600 16px/1 var(--mx-font-sans) !important;
  padding: 16px 24px !important;
  border: 0 !important;
  border-radius: var(--mx-radius-button) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  animation: none !important;
  transition: background .15s ease;
}
html[data-site-page="marketing"] body.mx-home :is(.mx-btn-primary, .btn-primary, .mx-nav__scan, .mx-guides .row button, .mx-proof .foot a, #contact a[style*="background:var(--cta)"]):hover {
  background: var(--mx-proof-hover) !important;
  color: var(--mx-ink) !important;
}
html[data-site-page="marketing"] body.mx-home :is(.mx-btn-secondary, .btn-secondary, #pricing a[style*="linear-gradient"]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: transparent !important;
  color: var(--mx-text, #0B1220) !important;
  font: 500 16px/1 var(--mx-font-sans) !important;
  padding: 16px 24px !important;
  border: 1px solid var(--mx-button-secondary-border, #CBD5E1) !important;
  border-radius: var(--mx-radius-button) !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: border-color .15s ease;
}
html[data-site-page="marketing"] body.mx-home :is(.mx-btn-secondary, .btn-secondary, #pricing a[style*="linear-gradient"]):hover {
  border-color: #3A4A6E !important;
}
html[data-site-page="marketing"] body.mx-home .btn-free-assessment::after { content: none !important; }

/* ── Navigation: dark over every section ── */
html[data-site-page="marketing"] body.mx-home .mx-nav {
  height: 80px;
  padding: 0 80px;
  background: rgba(11,18,32,.9) !important;
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid #1A2540 !important;
  font-family: var(--mx-font-sans);
}
html[data-site-page="marketing"] body.mx-home .mx-nav__logo .mx-logo-light { display: none; }
html[data-site-page="marketing"] body.mx-home .mx-nav__logo .mx-logo-dark { display: block; }
html[data-site-page="marketing"] body.mx-home .mx-nav__item { color: #B7C0D1 !important; font-size: 15px; }
html[data-site-page="marketing"] body.mx-home .mx-nav__item:hover,
html[data-site-page="marketing"] body.mx-home .mx-nav__item[aria-expanded="true"],
html[data-site-page="marketing"] body.mx-home .mx-nav__item.is-on { background: #121B2E !important; color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-nav__cta {
  background: transparent !important;
  color: #E7EBF3 !important;
  border: 1px solid #2A3858;
  border-radius: var(--mx-radius-button);
  padding: 12px 18px !important;
  font-weight: 500;
}
html[data-site-page="marketing"] body.mx-home .mx-nav__cta:hover { border-color: #3A4A6E; background: transparent !important; }
html[data-site-page="marketing"] body.mx-home .mx-nav__scan {
  margin-left: 8px;
  padding: 12px 18px !important;
  font-size: 15px !important;
  white-space: nowrap;
}
html[data-site-page="marketing"] body.mx-home .mx-burger span { background: #FFFFFF; }
html[data-site-page="marketing"] body.mx-home .mx-mega { top: 80px; }
html[data-site-page="marketing"] body.mx-home .mx-drawer { inset: 80px 0 0; background: #0B1220; }
html[data-site-page="marketing"] body.mx-home .mx-drawer h3 { color: #8B96AB; }
html[data-site-page="marketing"] body.mx-home .mx-drawer a { color: #E7EBF3; border-bottom-color: #1A2540; }

/* ── Hero (matches "MigryX Homepage Redesign", hero artboard) ── */
html[data-site-page="marketing"] body.mx-home section.mx-hero {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(139,150,171,.14) 1px, transparent 0) 0 0 / 28px 28px,
    #0B1220 !important;
}
html[data-site-page="marketing"] body.mx-home section.mx-hero::before {
  content: "";
  position: absolute;
  right: -120px; top: 120px;
  width: 820px; height: 620px;
  background: radial-gradient(closest-side, rgba(34,211,238,.16), rgba(34,197,94,.08) 55%, transparent 100%);
  pointer-events: none;
}
html[data-site-page="marketing"] body.mx-home .mx-hero-inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 64px 80px 44px; }
html[data-site-page="marketing"] body.mx-home .mx-hero-grid { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 56px; align-items: start; }
html[data-site-page="marketing"] body.mx-home .mx-hero-copy { display: flex; flex-direction: column; gap: 28px; padding-top: 12px; }
html[data-site-page="marketing"] body.mx-home section.mx-hero p.mx-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 !important;
  font: 400 13px/1.4 var(--mx-font-mono) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8B96AB !important;
}
html[data-site-page="marketing"] body.mx-home section.mx-hero p.mx-eyebrow::before {
  content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 999px; background: #22C55E;
}
html[data-site-page="marketing"] body.mx-home section.mx-hero h1 {
  margin: 0 !important;
  font: 700 60px/1.04 var(--mx-font-sans) !important;
  letter-spacing: -.035em !important;
  color: #FFFFFF !important;
}
html[data-site-page="marketing"] body.mx-home .mx-grad {
  background: linear-gradient(90deg, #22D3EE, #22C55E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
html[data-site-page="marketing"] body.mx-home section.mx-hero p.mx-hero-sub {
  margin: 0 !important;
  max-width: 520px;
  font: 400 19px/1.55 var(--mx-font-sans) !important;
  color: #B7C0D1 !important;
}
html[data-site-page="marketing"] body.mx-home .mx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-site-page="marketing"] body.mx-home .mx-pills span {
  padding: 7px 12px;
  border-radius: 999px;
  background: #121B2E;
  border: 1px solid #22304D;
  color: #E7EBF3;
  font-size: 13px;
  line-height: 1.2;
}
html[data-site-page="marketing"] body.mx-home .mx-pills .is-ai { background: rgba(34,211,238,.08); border-color: #22D3EE; color: #22D3EE; }
html[data-site-page="marketing"] body.mx-home .mx-pills .is-proof { background: rgba(34,197,94,.08); border-color: #22C55E; color: #22C55E; }
html[data-site-page="marketing"] body.mx-home .mx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 4px; }
html[data-site-page="marketing"] body.mx-home section.mx-hero .mx-btn-primary { gap: 10px; }
html[data-site-page="marketing"] body.mx-home section.mx-hero .mx-btn-secondary { color: #E7EBF3 !important; border-color: #2A3858 !important; }
html[data-site-page="marketing"] body.mx-home section.mx-hero p.mx-hero-alt { margin: 0 !important; font-size: 14px; color: #8B96AB !important; }
html[data-site-page="marketing"] body.mx-home section.mx-hero p.mx-hero-alt a { color: #E7EBF3 !important; text-decoration: underline; text-underline-offset: 3px; }

html[data-site-page="marketing"] body.mx-home .mx-hero-visual { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
html[data-site-page="marketing"] body.mx-home .mx-code {
  margin: 0;
  border-radius: 16px;
  border: 1px solid #22304D;
  background: #0E1628;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(34,211,238,.06);
  overflow: hidden;
}
html[data-site-page="marketing"] body.mx-home .mx-code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #1A2540;
  background: #0B1220;
  font-family: var(--mx-font-mono);
  color: #8B96AB;
}
html[data-site-page="marketing"] body.mx-home .mx-code-bar .dots { display: flex; gap: 7px; }
html[data-site-page="marketing"] body.mx-home .mx-code-bar .dots i { width: 11px; height: 11px; border-radius: 999px; background: #2A3858; }
html[data-site-page="marketing"] body.mx-home .mx-code-bar .path { font-size: 12px; }
html[data-site-page="marketing"] body.mx-home .mx-code-bar .route { font-size: 11px; }
html[data-site-page="marketing"] body.mx-home .mx-code-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-site-page="marketing"] body.mx-home .mx-code-col { padding: 18px 20px; border-right: 1px solid #1A2540; min-width: 0; }
html[data-site-page="marketing"] body.mx-home .mx-code-col.is-out { border-right: 0; background: #0F182C; }
html[data-site-page="marketing"] body.mx-home .mx-code-col .file {
  display: flex; justify-content: space-between;
  padding-bottom: 12px;
  font: 400 11px/1.4 var(--mx-font-mono);
  letter-spacing: .06em;
  color: #8B96AB;
}
html[data-site-page="marketing"] body.mx-home .mx-code-col .file .tag { color: #22C55E; }
html[data-site-page="marketing"] body.mx-home .mx-code pre {
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  font: 400 13px/1.75 var(--mx-font-mono);
  color: #C9D1DF;
  background: none;
  padding: 0;
}
html[data-site-page="marketing"] body.mx-home .mx-code pre .k { color: #7DD3FC; }
html[data-site-page="marketing"] body.mx-home .mx-code pre .s { color: #86EFAC; }
html[data-site-page="marketing"] body.mx-home .mx-code pre .n { color: #FCD34D; }
html[data-site-page="marketing"] body.mx-home .mx-code pre .f { color: #F0ABFC; }
html[data-site-page="marketing"] body.mx-home .mx-code pre .c { color: #8B96AB; }
html[data-site-page="marketing"] body.mx-home .mx-code-shot { display: block; background: #1E1E1E; text-decoration: none !important; }
html[data-site-page="marketing"] body.mx-home .mx-code-shot img { display: block; width: 100%; height: auto; }
html[data-site-page="marketing"] body.mx-home .mx-code-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #1A2540;
  background: #0B1220;
}
html[data-site-page="marketing"] body.mx-home .mx-code-status .ok { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #E7EBF3; }
html[data-site-page="marketing"] body.mx-home .mx-code-status .tick { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(34,197,94,.15); }
html[data-site-page="marketing"] body.mx-home .mx-code-status .matched { color: #22C55E; font-weight: 600; }
html[data-site-page="marketing"] body.mx-home .mx-code-status .exc { font: 400 12px/1.4 var(--mx-font-mono); color: #8B96AB; }
html[data-site-page="marketing"] body.mx-home section.mx-hero p.mx-models {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 !important;
  font-size: 13px;
  color: #8B96AB !important;
}
html[data-site-page="marketing"] body.mx-home .mx-models .dot { color: #22D3EE; }
html[data-site-page="marketing"] body.mx-home .mx-models span:not(.dot) { padding: 5px 10px; border-radius: 8px; border: 1px solid #22304D; color: #C9D1DF; }

html[data-site-page="marketing"] body.mx-home .mx-statbar {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px;
  border: 1px solid #1A2540;
  border-radius: 14px;
  background: rgba(18,27,46,.6);
}
html[data-site-page="marketing"] body.mx-home .mx-statbar > div { padding: 20px 24px; border-right: 1px solid #1A2540; }
html[data-site-page="marketing"] body.mx-home .mx-statbar > div:last-child { border-right: 0; }
html[data-site-page="marketing"] body.mx-home .mx-statbar .num { font: 500 30px/1.1 var(--mx-font-mono); color: #FFFFFF; }
html[data-site-page="marketing"] body.mx-home .mx-statbar .num.is-proof { color: #22C55E; }
html[data-site-page="marketing"] body.mx-home .mx-statbar .lbl { padding-top: 4px; font-size: 13px; color: #8B96AB; }

/* ── AI loop (matches the redesign's AI loop artboard) ── */
html[data-site-page="marketing"] body.mx-home section.mx-loop { border-top: 1px solid #1A2540 !important; }
html[data-site-page="marketing"] body.mx-home .mx-loop .wrap { max-width: 1440px; margin: 0 auto; padding: 0 80px; display: flex; flex-direction: column; gap: 56px; }
html[data-site-page="marketing"] body.mx-home .mx-loop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
html[data-site-page="marketing"] body.mx-home .mx-loop-head > div { display: flex; flex-direction: column; gap: 18px; max-width: 820px; }
html[data-site-page="marketing"] body.mx-home section.mx-loop p.mx-eyebrow {
  margin: 0 !important;
  font: 400 13px/1.4 var(--mx-font-mono) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #22D3EE !important;
}
html[data-site-page="marketing"] body.mx-home section.mx-loop .mx-loop-head h2 { margin: 0 !important; color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-green { color: #22C55E; }
html[data-site-page="marketing"] body.mx-home section.mx-loop p.mx-loop-lede { margin: 0 !important; max-width: 380px; font-size: 17px; line-height: 1.6; color: #B7C0D1 !important; }

html[data-site-page="marketing"] body.mx-home .mx-flow { position: relative; }
html[data-site-page="marketing"] body.mx-home .mx-flow-line {
  position: relative; top: 36px;
  height: 2px; margin: 0 12.5%;
  background: linear-gradient(90deg, #2A3858 0%, #2A3858 45%, #22D3EE 62%, #22C55E 100%);
}
html[data-site-page="marketing"] body.mx-home .mx-flow-line .mx-dot {
  position: absolute; top: -4px; left: 0;
  width: 10px; height: 10px; margin-left: -5px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 14px #22D3EE;
  animation: mxTravel 4.8s linear infinite;
}
@keyframes mxTravel { 0% { left: 0%; } 100% { left: 100%; } }
@keyframes mxPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(34,211,238,.35), 0 0 28px rgba(34,211,238,.10); }
  50% { box-shadow: 0 0 0 1px rgba(34,211,238,.7), 0 0 44px rgba(34,211,238,.28); }
}
html[data-site-page="marketing"] body.mx-home .mx-flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
html[data-site-page="marketing"] body.mx-home .mx-step { display: flex; flex-direction: column; align-items: center; gap: 20px; }
html[data-site-page="marketing"] body.mx-home .mx-tile {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  border-radius: 20px;
  background: #121B2E;
  border: 1px solid #2A3858;
}
html[data-site-page="marketing"] body.mx-home .mx-tile svg { width: 30px; height: 30px; }
html[data-site-page="marketing"] body.mx-home .mx-step.is-ai .mx-tile { background: rgba(34,211,238,.1); border-color: #22D3EE; animation: mxPulse 2.4s ease-in-out infinite; }
html[data-site-page="marketing"] body.mx-home .mx-step.is-proof .mx-tile { background: rgba(34,197,94,.12); border-color: #22C55E; }
html[data-site-page="marketing"] body.mx-home .mx-card {
  width: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 176px;
  padding: 24px;
  border-radius: 16px;
  background: #121B2E;
  border: 1px solid #22304D;
}
html[data-site-page="marketing"] body.mx-home .mx-step.is-ai .mx-card { background: linear-gradient(rgba(34,211,238,.08), #121B2E 70%); border-color: #22D3EE; }
html[data-site-page="marketing"] body.mx-home .mx-step.is-proof .mx-card { background: linear-gradient(rgba(34,197,94,.08), #121B2E 70%); border-color: #22C55E; }
html[data-site-page="marketing"] body.mx-home .mx-card .meta { display: flex; justify-content: space-between; font: 400 12px/1.4 var(--mx-font-mono); color: #8B96AB; }
html[data-site-page="marketing"] body.mx-home .mx-card .meta .ai { color: #22D3EE; }
html[data-site-page="marketing"] body.mx-home .mx-card .meta .proof { color: #22C55E; }
html[data-site-page="marketing"] body.mx-home section.mx-loop .mx-card h3 { margin: 0 !important; font: 600 22px/1.3 var(--mx-font-sans) !important; color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home section.mx-loop .mx-card p { margin: 0; font-size: 15px; line-height: 1.55; color: #B7C0D1 !important; }

html[data-site-page="marketing"] body.mx-home .mx-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 16px;
  border: 1px solid #22304D;
  background: #0E1628;
  overflow: hidden;
}
html[data-site-page="marketing"] body.mx-home .mx-strip > div { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-right: 1px solid #1A2540; }
html[data-site-page="marketing"] body.mx-home .mx-strip > div:nth-child(2) { background: rgba(34,211,238,.04); }
html[data-site-page="marketing"] body.mx-home .mx-strip > div:nth-child(3) { background: rgba(34,197,94,.04); border-right: 0; }
html[data-site-page="marketing"] body.mx-home .mx-strip .lbl { display: flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--mx-font-mono); }
html[data-site-page="marketing"] body.mx-home .mx-strip .lbl.is-mismatch { color: #FBBF24; }
html[data-site-page="marketing"] body.mx-home .mx-strip .lbl.is-ai { color: #22D3EE; }
html[data-site-page="marketing"] body.mx-home .mx-strip .lbl.is-proof { color: #22C55E; }
html[data-site-page="marketing"] body.mx-home .mx-strip .body { font: 400 13px/1.7 var(--mx-font-mono); color: #C9D1DF; }
html[data-site-page="marketing"] body.mx-home .mx-strip .hi { color: #FFFFFF; }
html[data-site-page="marketing"] body.mx-home .mx-strip .amber { color: #FBBF24; }
html[data-site-page="marketing"] body.mx-home .mx-strip .del { color: #8B96AB; }
html[data-site-page="marketing"] body.mx-home .mx-strip .add { color: #22D3EE; }
html[data-site-page="marketing"] body.mx-home .mx-strip .zero { color: #22C55E; }

html[data-site-page="marketing"] body.mx-home .mx-loop-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
html[data-site-page="marketing"] body.mx-home .mx-loop-foot .points { display: flex; flex-wrap: wrap; gap: 12px 40px; font-size: 15px; color: #B7C0D1; }
html[data-site-page="marketing"] body.mx-home .mx-loop-foot .points span { display: flex; align-items: center; gap: 8px; }
html[data-site-page="marketing"] body.mx-home .mx-loop-foot .points span::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #22D3EE; }
html[data-site-page="marketing"] body.mx-home section.theme-dark.mx-loop .mx-loop-foot a.mx-ai-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600;
  color: #22D3EE !important;
  text-decoration: none !important;
  white-space: nowrap;
}

/* ── Comparison table (light) ── */
html[data-site-page="marketing"] body.mx-home .mx-vs { background: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs h2 { color: #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs .lede { color: #4A5568 !important; font-size: 19px; line-height: 1.55; }
html[data-site-page="marketing"] body.mx-home .mx-vs .table-wrap { border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs thead th { background: #F5F7FA !important; color: #0B1220 !important; font: 600 13px/1.4 var(--mx-font-sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs th, html[data-site-page="marketing"] body.mx-home .mx-vs td { border-bottom-color: #E2E8F0 !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs td { color: #4A5568 !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs tbody th { color: #0B1220 !important; font-weight: 600 !important; position: sticky; left: 0; background: #FFFFFF; }
html[data-site-page="marketing"] body.mx-home .mx-vs thead th:last-child { background: rgba(34,197,94,.06) !important; color: #0B1220 !important; font-weight: 700 !important; border-top: 2px solid #22C55E !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs tbody td:last-child { background: rgba(34,197,94,.06) !important; color: #0B1220 !important; font-weight: 600 !important; border-left: 0 !important; }
html[data-site-page="marketing"] body.mx-home .mx-vs tbody td:last-child::before { content: "\2713\00a0"; color: #0F7B4F; font-weight: 700; }
html[data-site-page="marketing"] body.mx-home .mx-vs .note { color: #64748B !important; }

/* ── Customer proof (dark) ── */
html[data-site-page="marketing"] body.mx-home .mx-proof { background: #0B1220 !important; border-top: 1px solid #1A2540 !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .head p { color: #B7C0D1 !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .stats { background: #22304D !important; border-color: #22304D !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .stats li { background: #121B2E !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .stats span { color: #8B96AB !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .paths { background: #121B2E !important; border-color: #22304D !important; border-radius: var(--mx-radius-card) !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .paths h3 { font: 400 12px/1.4 var(--mx-font-mono) !important; letter-spacing: .06em !important; color: #8B96AB !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .chips li { background: #0E1628 !important; border: 1px solid #22304D; color: #E7EBF3 !important; font-weight: 500; }
html[data-site-page="marketing"] body.mx-home .mx-proof .chips img { filter: grayscale(1) brightness(0) invert(.62); }
html[data-site-page="marketing"] body.mx-home .mx-proof .chips li.lead { box-shadow: none !important; border: 1px solid #E7EBF3; color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .arrow { color: #8B96AB !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .spark-note { color: #B7C0D1 !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .spark-note b { color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .group { background: #121B2E !important; border-color: #22304D !important; border-radius: var(--mx-radius-card) !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .group-head svg { background: #0E1628 !important; border: 1px solid #22304D; color: #B7C0D1 !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .group h3 { color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .group li { color: #B7C0D1 !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .group li b { color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .sum { color: #8B96AB !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .foot { border-top-color: #22304D !important; }
html[data-site-page="marketing"] body.mx-home .mx-proof .foot p { color: #B7C0D1 !important; }

/* ── Campaign strip (dark band) ── */
html[data-site-page="marketing"] body.mx-home #campaign-strip { padding: 28px 0 !important; background: #121B2E !important; border-top: 1px solid #22304D !important; border-bottom: 1px solid #22304D !important; }
html[data-site-page="marketing"] body.mx-home #campaign-strip p { color: #E7EBF3 !important; }

/* ── Sources → targets (light alt) ── */
html[data-site-page="marketing"] body.mx-home #modernizations .hero-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .hero-card-label { font: 400 12px/1.4 var(--mx-font-mono) !important; letter-spacing: .06em !important; color: #64748B !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .hero-card a { background: #FFFFFF !important; border-color: #E2E8F0 !important; border-radius: 10px !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .hero-card a span { color: #64748B !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .hero-card a[style*="grid-column:1/-1"] { border: 2px solid #0B1220 !important; background: #F5F7FA !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .hero-card a[style*="grid-column:1/-1"] span { color: #4A5568 !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .hero-center-badge,
html[data-site-page="marketing"] body.mx-home #modernizations .hero-arrow { background: #0B1220 !important; color: #FFFFFF !important; font-family: var(--mx-font-mono) !important; }
html[data-site-page="marketing"] body.mx-home #modernizations > .container > p { color: #4A5568 !important; }

/* ── How it works (light) ── */
html[data-site-page="marketing"] body.mx-home .how { padding: 96px 0; background: #FFFFFF; }
html[data-site-page="marketing"] body.mx-home .how-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; max-width: 960px; margin: 0 auto; position: relative; }
html[data-site-page="marketing"] body.mx-home .how-line { position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0; }
html[data-site-page="marketing"] body.mx-home .how-step { text-align: center; position: relative; z-index: 1; padding: 0 10px; }
html[data-site-page="marketing"] body.mx-home .how-num {
  width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
html[data-site-page="marketing"] body.mx-home .how .how-line { background: #E2E8F0 !important; }
html[data-site-page="marketing"] body.mx-home .how .how-num { background: #0B1220 !important; box-shadow: none !important; font: 500 22px/1 var(--mx-font-mono) !important; color: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .how .how-step h4 { font: 600 22px/1.3 var(--mx-font-sans) !important; color: #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home .how .how-step p { font-size: 15px !important; color: #4A5568 !important; }

/* ── Product gallery (light alt) ── */
html[data-site-page="marketing"] body.mx-home #platform .gallery-tile { border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; }
html[data-site-page="marketing"] body.mx-home #platform .gallery-tile h4 { color: #0B1220 !important; font-weight: 600 !important; }
html[data-site-page="marketing"] body.mx-home #platform .gallery-tile p { color: #4A5568 !important; }

/* ── Validation (dark) ── */
html[data-site-page="marketing"] body.mx-home #validation span[style*="linear-gradient"] { background: #22C55E !important; color: #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home #validation div[style*="background:#f8fafc"] { background: #0E1628 !important; border-color: #22304D !important; box-shadow: var(--mx-shadow-hero) !important; }
html[data-site-page="marketing"] body.mx-home #validation small { color: #8B96AB !important; }

/* ── Atlas (light alt) and cards ── */
html[data-site-page="marketing"] body.mx-home #atlas .cta-card,
html[data-site-page="marketing"] body.mx-home #atlas div[style*="background:#fff"] { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; }
html[data-site-page="marketing"] body.mx-home #atlas .cta-card h3 { font: 600 20px/1.3 var(--mx-font-sans) !important; }

/* ── Free guides (light) ── */
html[data-site-page="marketing"] body.mx-home .mx-guides { background: #FFFFFF !important; }
html[data-site-page="marketing"] body.mx-home .mx-guides h2 { color: #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home .mx-guides .pick span { border-color: #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light); }
html[data-site-page="marketing"] body.mx-home .mx-guides .pick input:checked + span { border: 2px solid #0B1220 !important; box-shadow: none !important; }
html[data-site-page="marketing"] body.mx-home .mx-guides .row input { height: 48px; border-radius: 10px !important; border-color: #CBD5E1 !important; font-size: 16px !important; }
html[data-site-page="marketing"] body.mx-home .mx-guides .row input:focus { outline: 2px solid #0E7490; outline-offset: 1px; }
html[data-site-page="marketing"] body.mx-home .mx-guides .msg { color: #B45309 !important; }

/* ── Evaluate on your own code (light alt) ── */
html[data-site-page="marketing"] body.mx-home .differ .review-checklist { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; }

/* ── Deployment (dark) ── */
html[data-site-page="marketing"] body.mx-home #deployment .sec-tile { background: #121B2E !important; border: 1px solid #22304D !important; border-radius: var(--mx-radius-card) !important; box-shadow: none !important; }
html[data-site-page="marketing"] body.mx-home #deployment .sec-tile-icon { color: #B7C0D1; display: flex; justify-content: center; margin-bottom: 12px; }
html[data-site-page="marketing"] body.mx-home #deployment div[style*="linear-gradient"] { background: #121B2E !important; border: 1px solid #22304D; }

/* ── Engagement tiers (light) ── */
html[data-site-page="marketing"] body.mx-home #pricing .plan { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; }
html[data-site-page="marketing"] body.mx-home #pricing .plan[style*="border-color"] { border: 2px solid #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home #pricing .topbar,
html[data-site-page="marketing"] body.mx-home #pricing div[style*="height:6px"] { display: none !important; }
html[data-site-page="marketing"] body.mx-home #pricing .plan .name { color: #0B1220 !important; font-weight: 600 !important; }
html[data-site-page="marketing"] body.mx-home #pricing .plan .badge { background: #F5F7FA !important; border-color: #E2E8F0 !important; color: #4A5568 !important; font: 500 12px/1.4 var(--mx-font-mono) !important; }
html[data-site-page="marketing"] body.mx-home #pricing .plan-dot { background: #0B1220 !important; box-shadow: none !important; }
html[data-site-page="marketing"] body.mx-home #pricing .plan-text { color: #4A5568 !important; }
html[data-site-page="marketing"] body.mx-home #pricing .pilot-kpi { border-color: #E2E8F0 !important; box-shadow: var(--mx-shadow-card-light) !important; }
html[data-site-page="marketing"] body.mx-home #pricing div[style*="border-radius:18px"] { background: #F5F7FA !important; border-color: #E2E8F0 !important; box-shadow: none !important; }
html[data-site-page="marketing"] body.mx-home #pricing span[style*="border-radius:999px"] { background: #FFFFFF !important; border-color: #E2E8F0 !important; color: #4A5568 !important; }

/* ── FAQ (light alt) ── */
html[data-site-page="marketing"] body.mx-home #faq .faq-card { background: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: var(--mx-radius-card) !important; box-shadow: var(--mx-shadow-card-light) !important; padding: 24px !important; }
html[data-site-page="marketing"] body.mx-home #faq .faq-card h3 { font: 600 18px/1.35 var(--mx-font-sans) !important; color: #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home #faq .faq-card p { color: #4A5568 !important; font-size: 15px !important; }

/* ── Final call to action (dark) ── */
html[data-site-page="marketing"] body.mx-home section#contact { padding: 0 !important; }
html[data-site-page="marketing"] body.mx-home #contact > div { background: #0B1220 !important; border-top: 1px solid #1A2540 !important; padding: 96px 0 !important; }
html[data-site-page="marketing"] body.mx-home #contact .cta-card { background: #121B2E !important; border: 1px solid #22304D !important; border-radius: var(--mx-radius-card) !important; box-shadow: none !important; }
html[data-site-page="marketing"] body.mx-home #contact .cta-card-icon { background: #0E1628 !important; border: 1px solid #22304D; }
html[data-site-page="marketing"] body.mx-home #contact .cta-link { color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 3px; }
html[data-site-page="marketing"] body.mx-home #contact div[style*="border-top:1px solid"] { border-top-color: #22304D !important; }

/* ── Animated source-to-target routes ── */
html[data-site-page="marketing"] body.mx-home #modernizations.theme-light {
  padding-top: 72px !important;
  padding-bottom: 64px !important;
}
html[data-site-page="marketing"] body.mx-home #modernizations .mxr-head { max-width: 900px; margin: 0 auto 40px; padding: 0 24px; text-align: center; }
html[data-site-page="marketing"] body.mx-home #modernizations .mxr-head h2 { margin: 0 0 16px !important; color: #0B1220 !important; }
html[data-site-page="marketing"] body.mx-home #modernizations .mxr-head p { margin: 0 auto; max-width: 600px; font-size: 17px; line-height: 1.6; color: #4A5568 !important; }
html[data-site-page="marketing"] body.mx-home #modernizations a.mxr-chip {
  color: #0B1220 !important;
  text-decoration: none !important;
}

  /* ================= MigryX route section (copy from here) ================= */
  .mxr {
    --ink: #0B1220; --text2: #4A5568; --muted: #64748B; --line: #E2E8F0;
    --tile: #F1F4F8; --proof: #22C55E; --ai: #22D3EE;
    position: relative; max-width: 1260px; margin: 0 auto; padding: 0 24px 8px;
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink);
  }
  .mxr *, .mxr *::before, .mxr *::after { box-sizing: border-box; }
  .mxr-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
    gap: 48px; align-items: center;
  }

  /* Cards with a soft cursor spotlight */
  .mxr-card {
    position: relative; border-radius: 18px; padding: 20px;
    border: 1px solid var(--line);
    background:
      radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), rgba(11,18,32,0.045), transparent 60%),
      #FFFFFF;
    box-shadow: 0 1px 2px rgba(11,18,32,0.05);
    transition: box-shadow .3s ease, border-color .3s ease;
  }
  .mxr-card:hover { border-color: #CBD5E1; box-shadow: 0 18px 40px rgba(11,18,32,0.07); }
  .mxr-title {
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 12px;
    color: var(--muted); letter-spacing: 0.02em; margin: 0 0 14px 2px;
  }
  .mxr-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mxr-arrow { width: 13px; height: 13px; }

  /* Chips */
  .mxr-chip {
    position: relative; display: flex; align-items: center; gap: 9px;
    height: 42px; padding: 0 10px; border-radius: 10px;
    border: 1px solid var(--line); background: #FFFFFF;
    color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none;
    outline: none; overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .mxr-chip::after { /* shine that sweeps across on hover */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
    transform: translateX(-120%);
  }
  .mxr-chip:hover::after, .mxr-chip:focus-visible::after { transform: translateX(120%); transition: transform .6s ease; }
  .mxr-chip:hover, .mxr-chip:focus-visible {
    border-color: var(--ink); transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(11,18,32,0.10);
  }
  .mxr-chip:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ink); }
  .mxr-logo { /* logos come from /assets/img/marks/*.svg via a CSS mask */
    flex-shrink: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
    background: var(--tile); color: var(--text2);
    transition: background-color .25s ease, transform .3s cubic-bezier(.2,.8,.2,1.4), box-shadow .25s ease;
  }
  .mxr-logo.has-mark::before {
    content: ""; width: 16px; height: 16px;
    background-color: #64748B;
    -webkit-mask: var(--logo) center / contain no-repeat;
            mask: var(--logo) center / contain no-repeat;
    transition: background-color .25s ease;
  }
  .mxr-chip:hover .mxr-logo { transform: scale(1.1) rotate(-4deg); }
  .mxr-chip:hover .mxr-logo, .mxr-chip:focus-visible .mxr-logo, .mxr-chip.is-active .mxr-logo {
    background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(11,18,32,0.08);
  }
  .mxr-chip:hover .mxr-logo.has-mark::before,
  .mxr-chip:focus-visible .mxr-logo.has-mark::before,
  .mxr-chip.is-active .mxr-logo.has-mark::before { background-color: var(--brand, var(--ink)); }
  .mxr-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mxr-sub { font-weight: 400; color: var(--muted); }
  .mxr-arrow { margin-left: auto; flex-shrink: 0; color: #94A3B8; transition: transform .25s ease, color .2s ease; }
  .mxr-chip:hover .mxr-arrow, .mxr-chip:focus-visible .mxr-arrow { transform: translateX(4px); color: var(--ink); }

  .mxr-chip.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .mxr-chip.is-active .mxr-arrow { color: var(--ink); }
  .mxr-chip.is-featured { grid-column: 1 / -1; height: 50px; }

  /* Center: live MigryX run */
  .mxr-center { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .mxr-app {
    width: 260px; border-radius: 16px; overflow: hidden;
    background: #0E1628; border: 1px solid #22304D;
    box-shadow: 0 24px 60px rgba(11,18,32,0.28);
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }
  .mxr-app:hover { transform: translateY(-3px); box-shadow: 0 30px 70px rgba(11,18,32,0.34); }
  .mxr-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #0B1220; border-bottom: 1px solid #1A2540; }
  .mxr-bar i { width: 8px; height: 8px; border-radius: 999px; background: #2A3858; }
  .mxr-brand { margin-left: 4px; font-size: 12px; font-weight: 600; color: #E7EBF3; letter-spacing: -0.01em; }
  .mxr-state { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; color: #8B96AB; }
  .mxr-state b { width: 6px; height: 6px; border-radius: 999px; background: #8B96AB; }
  .mxr-app.is-running .mxr-state b { background: #E7EBF3; animation: mxrBlink 1s ease-in-out infinite; }
  .mxr-app.is-done .mxr-state { color: var(--proof); }
  .mxr-app.is-done .mxr-state b { background: var(--proof); }

  .mxr-files { display: grid; grid-template-columns: 30px minmax(0, 1fr); row-gap: 4px; padding: 10px 12px; border-bottom: 1px solid #1A2540; font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 11px; }
  .mxr-files em { font-style: normal; color: #4B5A7A; }
  .mxr-files span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mxr-file-in { color: #8B96AB; }
  .mxr-file-out { color: #E7EBF3; }
  .mxr-steps { list-style: none; margin: 0; padding: 8px 12px 4px; }
  .mxr-step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; height: 30px; font-size: 12.5px; color: #4B5A7A; transition: color .25s ease; }
  .mxr-ico { position: relative; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid #2A3858; box-sizing: border-box; transition: border-color .2s ease, background-color .2s ease; }
  .mxr-ico svg { position: absolute; inset: 0; margin: auto; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.8,.2,1.5); }
  .mxr-meta { font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; color: #4B5A7A; transition: color .25s ease; }
  .mxr-step.is-run { color: #FFFFFF; }
  .mxr-step.is-run .mxr-ico { border-color: #E7EBF3; border-right-color: transparent; animation: mxrSpin .7s linear infinite; }
  .mxr-step.is-run .mxr-meta { color: #B7C0D1; }
  .mxr-step.is-done { color: #B7C0D1; }
  .mxr-step.is-done .mxr-ico { border-color: #B7C0D1; background: #B7C0D1; }
  .mxr-step.is-done .mxr-ico svg { opacity: 1; transform: none; }
  .mxr-step.is-done .mxr-meta { color: #8B96AB; }
  .mxr-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(34,211,238,.6); color: var(--ai); font-family: 'Geist Mono', ui-monospace, Menlo, monospace; font-size: 9.5px; vertical-align: 1px; opacity: 0; transition: opacity .25s ease; }
  .mxr-step.is-run .mxr-tag, .mxr-step.is-done .mxr-tag { opacity: 1; }

  .mxr-meter { height: 4px; margin: 2px 12px 0 39px; border-radius: 999px; background: #1A2540; overflow: hidden; }
  .mxr-meter span { display: block; height: 100%; width: 0; border-radius: 999px; background: #E7EBF3; }
  .mxr-app.is-done .mxr-meter span { background: var(--proof); }

  .mxr-result {
    display: flex; align-items: center; gap: 8px; margin: 12px; padding: 9px 10px; border-radius: 9px;
    border: 1px dashed #2A3858; color: #4B5A7A; font-size: 12.5px; font-weight: 600;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .mxr-result .mxr-ico { border-color: #2A3858; }
  .mxr-app.is-done .mxr-result { border-style: solid; border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.10); color: var(--proof); animation: mxrFlash .9s ease both; }
  .mxr-app.is-done .mxr-result .mxr-ico { border-color: var(--proof); background: var(--proof); }
  .mxr-app.is-done .mxr-result .mxr-ico svg { opacity: 1; transform: none; }

  .mxr-route {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px;
    background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 600;
    font-family: 'Geist Mono', ui-monospace, Menlo, monospace;
  }
  .mxr-route span { display: inline-block; transition: opacity .18s ease, transform .18s ease; }
  .mxr-route span.swap { opacity: 0; transform: translateY(4px); }
  .mxr-route .mxr-to { color: #8B96AB; }

  /* Wires */
  .mxr-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
  .mxr-wire { fill: none; stroke: var(--ink); stroke-width: 1.6; }
  .mxr-flow { fill: none; stroke: #94A3B8; stroke-width: 1.6; stroke-dasharray: 2 9; animation: mxrFlow .9s linear infinite; opacity: .9; }
  .mxr-end { fill: var(--ink); }

  .mxr-foot { position: relative; z-index: 1; margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--text2); }
  .mxr-foot a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

  /* Entrance: chips cascade in once when the section scrolls into view */
  .mxr.is-armed .mxr-chip { opacity: 0; transform: translateY(8px); }
  .mxr.is-visible .mxr-chip {
    opacity: 1; transform: none;
    transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s, background-color .2s;
    transition-delay: calc(var(--i, 0) * 35ms), calc(var(--i, 0) * 35ms), 0s, 0s, 0s;
  }
  .mxr.is-visible.is-settled .mxr-chip { transition-delay: 0s; }
  .mxr.is-visible .mxr-chip:hover, .mxr.is-visible .mxr-chip:focus-visible { transform: translateY(-2px); }

  @keyframes mxrSpin { to { transform: rotate(360deg); } }
  @keyframes mxrBlink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
  @keyframes mxrFlow { to { stroke-dashoffset: -11; } }
  @keyframes mxrFlash { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } 40% { box-shadow: 0 0 0 4px rgba(34,197,94,.22); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

  @media (max-width: 1023px) {
    .mxr-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .mxr-center { order: 0; }
    .mxr-wires { display: none; }
  }
  @media (max-width: 480px) { .mxr-list { grid-template-columns: minmax(0, 1fr); } }

/* ── Motion ── */
/* The AI loop animates for every visitor, including those with reduced motion
   set; visitor-experience.css still shortens every other animation for them. */
@media (prefers-reduced-motion: reduce) {
  html[data-site-page="marketing"] body.mx-home .mx-flow-line .mx-dot {
    animation-name: mxTravel !important;
    animation-duration: 4.8s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html[data-site-page="marketing"] body.mx-home .mx-step.is-ai .mx-tile {
    animation-name: mxPulse !important;
    animation-duration: 2.4s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }
  html[data-site-page="marketing"] body.mx-home .mxr-flow {
    animation-name: mxrFlow !important;
    animation-duration: .9s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html[data-site-page="marketing"] body.mx-home .mxr-app.is-running .mxr-state b {
    animation-name: mxrBlink !important;
    animation-duration: 1s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
  }
  html[data-site-page="marketing"] body.mx-home .mxr-step.is-run .mxr-ico {
    animation-name: mxrSpin !important;
    animation-duration: .7s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
  }
  html[data-site-page="marketing"] body.mx-home .mxr-app.is-done .mxr-result {
    animation-name: mxrFlash !important;
    animation-duration: .9s !important;
    animation-timing-function: ease !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Tablet and mobile ── */
@media (max-width: 1024px) {
  html[data-site-page="marketing"] body.mx-home .mx-nav { padding: 0 32px; }
  html[data-site-page="marketing"] body.mx-home .mx-hero-inner { padding: 48px 32px 40px; }
  html[data-site-page="marketing"] body.mx-home .mx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  html[data-site-page="marketing"] body.mx-home .mx-loop .wrap { padding: 0 32px; gap: 40px; }
  html[data-site-page="marketing"] body.mx-home .mx-loop-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  html[data-site-page="marketing"] body.mx-home .mx-flow-line { display: none; }
  html[data-site-page="marketing"] body.mx-home .mx-flow-grid { grid-template-columns: 1fr 1fr; }
  html[data-site-page="marketing"] body.mx-home .how-steps { grid-template-columns: 1fr 1fr; }
  html[data-site-page="marketing"] body.mx-home .how-line { display: none; }
  html[data-site-page="marketing"] body.mx-home .mx-strip { grid-template-columns: 1fr; }
  html[data-site-page="marketing"] body.mx-home .mx-strip > div { border-right: 0; border-bottom: 1px solid #1A2540; }
  html[data-site-page="marketing"] body.mx-home .mx-strip > div:last-child { border-bottom: 0; }
  html[data-site-page="marketing"] body.mx-home .mx-loop-foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 900px) {
  html[data-site-page="marketing"] body.mx-home .mx-nav__scan { display: inline-flex !important; margin-left: auto; padding: 10px 14px !important; font-size: 14px !important; }
}
@media (max-width: 768px) {
  html[data-site-page="marketing"] body.mx-home :is(section.theme-dark, section.theme-light, .mx-vs, .mx-proof, .mx-guides) { padding-top: 64px !important; padding-bottom: 64px !important; }
  html[data-site-page="marketing"] body.mx-home section.mx-hero { padding: 0 !important; }
  html[data-site-page="marketing"] body.mx-home #contact > div { padding: 64px 0 !important; }
  html[data-site-page="marketing"] body.mx-home .mx-nav { padding: 0 20px; }
  html[data-site-page="marketing"] body.mx-home .mx-hero-inner { padding: 40px 20px 32px; }
  html[data-site-page="marketing"] body.mx-home .mx-loop .wrap { padding: 0 20px; }
  html[data-site-page="marketing"] body.mx-home section.mx-hero h1 { font-size: 40px !important; }
  html[data-site-page="marketing"] body.mx-home :is(section.theme-dark, section.theme-light, .mx-vs, .mx-proof, .mx-guides) h2 { font-size: 32px !important; }
  html[data-site-page="marketing"] body.mx-home .mx-code-cols { grid-template-columns: 1fr; }
  html[data-site-page="marketing"] body.mx-home .mx-code-col { border-right: 0; border-bottom: 1px solid #1A2540; }
  html[data-site-page="marketing"] body.mx-home .mx-code pre { font-size: 12px; }
  html[data-site-page="marketing"] body.mx-home .mx-statbar { grid-template-columns: 1fr 1fr; }
  html[data-site-page="marketing"] body.mx-home .mx-statbar > div:nth-child(2) { border-right: 0; }
  html[data-site-page="marketing"] body.mx-home .mx-statbar > div:nth-child(n+3) { border-top: 1px solid #1A2540; }
  html[data-site-page="marketing"] body.mx-home .mx-flow-grid { grid-template-columns: 1fr; }
  html[data-site-page="marketing"] body.mx-home .how-steps { grid-template-columns: 1fr; }
}