/* xtendedsystems.com — layout + design tokens
 * Visual sibling to xsilodestone.ai. Daytime editorial parent.
 * Type: IBM Plex Serif (display) + IBM Plex Sans (body/UI) + DM Mono (code/spec)
 * Palette: cream + carbon + restrained crimson + metal-dark
 * Spec: internal design spec §3
 *
 * Fluid sizing: clamp(min, viewport-rule, max) lets every typographic + spatial
 * dimension scale with the viewport — small enough to be legible on a 375px
 * phone, large enough to use a 2560px display.
 */

:root {
  --cream:       #02070d;
  --cream-rule:  rgba(164,215,235,.18);
  --cream-soft:  #06131d;
  --carbon:      #f4f8fb;
  --carbon-soft: #a6b8c2;
  --crimson:     #43d9ff;
  --crimson-hi:  #a7edff;
  --metal-dark:  #78919f;
  --shadow-soft: rgba(67, 217, 255, 0.08);

  --serif: 'IBM Plex Serif', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'DM Mono', 'Courier New', monospace;

  /* Content column grows on wide screens so we're not leaving 700px of dead
     margin on a 4K display. The 92vw cap means we still get edge breathing
     room before clamp() hands the floor to --pad-x. */
  --maxw: clamp(960px, 88vw, 1480px);
  --pad-x: clamp(20px, 3.5vw, 56px);
  --pad-x-mobile: 20px;
}

/* Content-aligning helper — used by nav so the wordmark sits at the same
   left edge as section content (which is centered inside a max-width column). */
.aligned {
  padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2 + var(--pad-x)));
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: clamp(64px, 7vw, 84px); }
::selection { background: var(--crimson); color: var(--cream); }
::-moz-selection { background: var(--crimson); color: var(--cream); }
body {
  background: var(--cream);
  color: var(--carbon);
  font-family: var(--sans);
  font-size: clamp(15px, 0.95vw, 17px);
  line-height: 1.65;
  font-weight: 300;
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-top: 16px; padding-bottom: 16px;
  padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--cream-rule);
  background: rgba(2, 7, 13, 0.92);
  backdrop-filter: blur(20px);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; flex-shrink: 0; justify-self: start; }
.logo img { display: block; height: clamp(30px, 2.6vw, 42px); width: auto; }
.footer-brand .logo img { height: clamp(44px, 4vw, 64px); }
.nav-links {
  display: flex; gap: clamp(14px, 1.6vw, 30px);
  list-style: none; align-items: center;
  flex-wrap: nowrap;
  justify-self: center;
}
.nav-links a {
  color: var(--carbon-soft); text-decoration: none;
  font-size: clamp(10px, 0.75vw, 12px); letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--carbon); }
.nav-cta {
  background: var(--crimson) !important; color: var(--cream) !important;
  padding: 8px 18px; font-weight: 500;
  justify-self: end;
}
.nav-cta:hover { background: var(--crimson-hi) !important; }

/* ── HERO ── */
.hero {
  min-height: clamp(440px, 58vh, 720px);
  padding: clamp(110px, 11vw, 160px) var(--pad-x) clamp(48px, 6vw, 84px);
  position: relative; overflow: hidden;
  isolation: isolate;
}
/* Atmospheric backdrop — two soft crimson glows that drift just inside the
   viewport, adding depth without distracting from the type. */
.hero::before, .hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  border-radius: 50%; filter: blur(60px); opacity: 0.55;
}
.hero::before {
  width: 50vw; height: 50vw; max-width: 720px; max-height: 720px;
  top: -20%; left: -10%;
  background: radial-gradient(circle, rgba(67, 217, 255, 0.10) 0%, transparent 60%);
}
.hero::after {
  width: 40vw; height: 40vw; max-width: 600px; max-height: 600px;
  bottom: -15%; right: -8%;
  background: radial-gradient(circle, rgba(110, 122, 132, 0.08) 0%, transparent 60%);
}
.hero > .section-inner { width: 100%; position: relative; z-index: 1; }
/* Home-hero split: copy on the left, AIMS mark on the right as a visual anchor.
   Collapses to single-column at narrow widths so the mark slides under the copy. */
.hero.hero-home .hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
}
.hero.hero-home .hero-copy { min-width: 0; }
.hero-mark-aside {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  opacity: 0.9;
}
.hero-mark-aside img {
  width: clamp(160px, 18vw, 280px);
  height: auto; display: block;
}
.hero-mark-caption {
  font-family: var(--mono);
  font-size: clamp(10px, 0.75vw, 12px);
  color: var(--carbon-soft); letter-spacing: 0.06em;
}
@media (max-width: 880px) {
  .hero.hero-home .hero-split { grid-template-columns: 1fr; }
  .hero-mark-aside { order: -1; align-self: flex-start; }
  .hero-mark-aside img { width: clamp(120px, 28vw, 180px); }
}
/* Spec-page hero — section reference cards on the right side. */
.hero-spec-stack {
  display: flex; flex-direction: column;
  gap: clamp(8px, 0.9vw, 14px);
  align-self: stretch;
  justify-content: center;
}
.spec-stack-card {
  display: grid;
  grid-template-columns: clamp(48px, 4vw, 64px) 1fr;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(10px, 1.1vw, 16px) clamp(14px, 1.4vw, 22px);
  background: rgba(255, 255, 255, 0.35);
  border-left: 2px solid var(--crimson);
  border-radius: 0 2px 2px 0;
  transition: background 0.2s, transform 0.2s;
}
.spec-stack-card:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: translateX(2px);
}
.spec-stack-label {
  font-family: var(--mono);
  font-size: clamp(12px, 1vw, 16px);
  color: var(--crimson); font-weight: 500;
}
.spec-stack-body {
  font-family: var(--sans);
  font-size: clamp(12px, 0.95vw, 15px); font-weight: 400;
  color: var(--carbon); line-height: 1.4;
}
.hero.hero-compact .hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero.hero-compact .hero-split { grid-template-columns: 1fr; }
  .hero-spec-stack { padding: 0; }
}
.hero-eyebrow {
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 13px); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--carbon-soft);
  font-weight: 500; margin-bottom: clamp(20px, 2vw, 32px);
}
.hero-eyebrow span { color: var(--crimson); }
h1 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 6.4vw, 108px); line-height: 1.06;
  letter-spacing: -0.018em; color: var(--carbon);
  max-width: min(96%, 1320px);
}
h1 em { font-style: italic; color: var(--crimson); font-weight: 400; }
.hero-sub {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 2.4vw, 38px); line-height: 1.35;
  color: var(--carbon-soft);
  max-width: min(96%, 1280px);
  margin-top: clamp(18px, 1.8vw, 28px);
}
.hero-sub strong { color: var(--crimson); font-style: normal; font-weight: 500; }
.hero-body {
  font-family: var(--sans);
  font-size: clamp(15px, 1.1vw, 20px); font-weight: 300;
  line-height: 1.7; color: var(--carbon-soft);
  max-width: min(94%, 1020px);
  margin-top: clamp(20px, 1.9vw, 30px);
}
.hero-btns {
  display: flex; gap: clamp(10px, 1vw, 16px);
  margin-top: clamp(28px, 3.2vw, 48px); flex-wrap: wrap;
}
.hero-meta {
  display: flex; gap: clamp(18px, 2.4vw, 40px); flex-wrap: wrap;
  margin-top: clamp(36px, 4vw, 60px);
  padding-top: clamp(18px, 2vw, 30px);
  border-top: 1px solid var(--cream-rule);
}
.hero-meta-item {
  font-size: clamp(10px, 0.78vw, 12px); color: var(--carbon-soft);
  letter-spacing: 0.04em;
}
.hero-meta-item strong {
  display: block;
  font-size: clamp(12px, 0.95vw, 14px); color: var(--carbon); font-weight: 500;
  margin-bottom: 2px; letter-spacing: -0.01em;
}
/* Hero mark — used for AIMS / XSI / partner logo marks placed above the
   eyebrow on hub pages. Was inline style="height:120px" on 3 pages. */
.hero-mark {
  height: clamp(72px, 9vw, 140px);
  width: auto; display: block;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}

/* ── SECTIONS ── */
section {
  padding: clamp(56px, 6.5vw, 104px) var(--pad-x);
  position: relative;
}
.section-inner { max-width: var(--maxw); margin: 0 auto; }
/* Subtle accent ornament — a thin crimson tick above the s-label of every
   non-hero section. Visual rhythm without weight. */
section:not(.hero):not(.featured) > .section-inner > .s-label::before {
  content: ""; display: block; width: 32px; height: 1px;
  background: var(--crimson); margin-bottom: 14px;
}
.s-label {
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--crimson);
  font-weight: 600; margin-bottom: clamp(12px, 1.1vw, 18px);
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 4.6vw, 76px); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--carbon);
  max-width: min(96%, 1240px);
}
h2 em { font-style: italic; color: var(--crimson); font-weight: 400; }
h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(20px, 1.6vw, 28px); line-height: 1.25; color: var(--carbon);
}
h4 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(13px, 1vw, 16px); letter-spacing: 0.02em;
  color: var(--carbon);
}
.s-intro {
  font-family: var(--sans);
  font-size: clamp(15px, 1.22vw, 22px); font-weight: 300;
  color: var(--carbon-soft); line-height: 1.75;
  max-width: min(94%, 960px);
  margin-top: clamp(14px, 1.4vw, 22px);
}

/* ── PILLAR GRID (three-pillar positioning) ── */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 0; margin-top: clamp(36px, 4vw, 64px);
  border-top: 1px solid var(--cream-rule);
  border-bottom: 1px solid var(--cream-rule);
}
/* 4-column variant — used by the AIMS altitude-layer grid; falls back to
   2-up at narrower widths so each card stays readable. */
.pillar-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}
.pillar {
  padding: clamp(24px, 2.6vw, 44px) clamp(20px, 2.4vw, 40px);
  border-right: 1px solid var(--cream-rule);
  position: relative;
  counter-increment: pillar-counter;
}
.pillar:last-child { border-right: none; }
/* Numeric counter, top-right of each pillar — adds editorial rhythm. */
.pillar-grid { counter-reset: pillar-counter; }
.pillar::before {
  content: counter(pillar-counter, decimal-leading-zero);
  position: absolute; top: clamp(16px, 1.6vw, 24px); right: clamp(18px, 1.8vw, 28px);
  font-family: var(--mono);
  font-size: clamp(10px, 0.8vw, 12px);
  color: var(--crimson); opacity: 0.5;
  letter-spacing: 0.04em;
}
.pillar-label {
  font-family: var(--sans);
  font-size: clamp(9px, 0.7vw, 11px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--crimson);
  font-weight: 600; margin-bottom: 12px;
}
.pillar h3 { margin-bottom: 12px; }
.pillar p {
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 16px); font-weight: 300;
  color: var(--carbon-soft); line-height: 1.7;
}
.pillar-link {
  display: inline-block; margin-top: 18px;
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--crimson);
  text-decoration: none; font-weight: 500;
}
.pillar-link:hover { color: var(--crimson-hi); }

/* ── FEATURED BAND (AIMS) ── */
.featured {
  background: var(--cream-soft);
  border-top: 1px solid var(--cream-rule);
  border-bottom: 1px solid var(--cream-rule);
}
.featured h2 { margin-bottom: clamp(18px, 1.8vw, 28px); }
.featured-cta {
  margin-top: clamp(24px, 2.8vw, 44px);
  display: flex; gap: clamp(10px, 1vw, 16px); flex-wrap: wrap;
}
.featured-foot {
  margin-top: clamp(20px, 2.2vw, 32px);
  font-family: var(--sans);
  font-size: clamp(12px, 0.9vw, 14px);
  color: var(--carbon-soft); max-width: min(92%, 760px); line-height: 1.65;
}

/* ── PORTFOLIO TILES ── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(32px, 3.6vw, 56px);
}
.tile {
  padding: clamp(22px, 2.4vw, 40px);
  border: 1px solid var(--cream-rule);
  background: rgba(255, 255, 255, 0.4);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.3s, transform 0.3s, background 0.25s;
}
.tile:hover {
  border-color: var(--crimson);
  box-shadow: 0 8px 32px var(--shadow-soft);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.7);
}
.tile { position: relative; }
.tile-sigil {
  position: absolute; top: clamp(18px, 1.8vw, 28px); right: clamp(18px, 1.8vw, 28px);
  width: clamp(40px, 4vw, 56px); height: auto;
  opacity: 0.78; pointer-events: none;
  transition: opacity 0.25s, transform 0.3s;
}
.tile:hover .tile-sigil { opacity: 1; transform: scale(1.06); }
.tile-status {
  display: inline-block; padding: 3px 10px; border-radius: 10px;
  font-family: var(--sans);
  font-size: clamp(8px, 0.6vw, 10px); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--cream-soft); color: var(--carbon-soft);
  align-self: flex-start; margin-bottom: 18px;
}
.tile-status.live { background: rgba(67, 217, 255, 0.12); color: var(--crimson); }
.tile-status.soon { background: var(--cream-rule); color: var(--carbon-soft); }
.tile h3 {
  font-size: clamp(20px, 1.7vw, 28px);
  margin-bottom: 10px;
}
.tile p {
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 16px); font-weight: 300;
  color: var(--carbon-soft); line-height: 1.7; flex: 1;
}
.tile-chips { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono);
  font-size: clamp(9px, 0.65vw, 11px); padding: 3px 8px;
  background: var(--cream-soft); color: var(--carbon-soft);
  letter-spacing: 0.02em;
}
.tile-link {
  display: block; margin-top: 18px;
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--crimson); font-weight: 500;
}

/* ── PARTNER CARDS ── */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(32px, 3.6vw, 56px);
}
.partner-card {
  padding: clamp(26px, 2.8vw, 44px) clamp(22px, 2.4vw, 40px);
  border: 1px solid var(--cream-rule);
  background: rgba(255, 255, 255, 0.4);
}
.partner-card h3 { margin-bottom: 16px; }
.partner-card p {
  font-family: var(--sans);
  font-size: clamp(13px, 0.95vw, 16px); font-weight: 300;
  color: var(--carbon-soft); line-height: 1.7; margin-bottom: 14px;
}
.partner-meta {
  font-family: var(--mono);
  font-size: clamp(10px, 0.78vw, 12px);
  color: var(--carbon-soft); margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--cream-rule);
}
.partner-meta strong { color: var(--carbon); font-weight: 500; }

/* ── NEWSROOM CARDS ── */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  margin-top: clamp(32px, 3.6vw, 56px);
}
.news-card {
  padding: clamp(22px, 2.2vw, 36px);
  border: 1px solid var(--cream-rule);
  text-decoration: none; color: inherit;
  transition: border-color 0.2s;
}
.news-card:hover { border-color: var(--crimson); }
.news-type {
  font-family: var(--sans);
  font-size: clamp(9px, 0.7vw, 11px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--crimson);
  font-weight: 600; margin-bottom: 8px;
}
.news-date {
  font-family: var(--mono);
  font-size: clamp(10px, 0.78vw, 12px);
  color: var(--carbon-soft); margin-bottom: 14px;
}
.news-card h3 {
  font-size: clamp(16px, 1.3vw, 22px);
  margin-bottom: 10px;
}
.news-excerpt {
  font-family: var(--sans);
  font-size: clamp(12px, 0.9vw, 15px); font-weight: 300;
  color: var(--carbon-soft); line-height: 1.65;
}
.news-source {
  font-family: var(--mono);
  font-size: clamp(9px, 0.7vw, 11px);
  color: var(--carbon-soft); margin-top: 18px;
  padding-top: 14px; border-top: 1px solid var(--cream-rule);
  font-style: italic;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  padding: clamp(11px, 0.9vw, 14px) clamp(20px, 2.2vw, 32px);
  font-family: var(--sans);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; font-weight: 500;
  border-radius: 0; transition: all 0.2s;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary {
  background: var(--crimson); color: var(--cream);
  border-color: var(--crimson);
}
.btn-primary:hover { background: var(--crimson-hi); border-color: var(--crimson-hi); }
.btn-ghost {
  background: transparent; color: var(--carbon);
  border-color: var(--carbon);
}
.btn-ghost:hover { border-color: var(--crimson); color: var(--crimson); }

/* ── FORMS ── */
.form { max-width: min(100%, 600px); }
.form-row { margin-bottom: 16px; }
.form label {
  display: block; font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--carbon-soft); font-weight: 500; margin-bottom: 6px;
}
.form input, .form textarea, .form select {
  width: 100%; padding: 12px 14px;
  font-family: var(--sans);
  font-size: clamp(14px, 1vw, 16px); font-weight: 300;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--cream-rule); color: var(--carbon);
  border-radius: 0;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none; border-color: var(--crimson);
}
.form-feedback {
  font-family: var(--sans);
  font-size: clamp(11px, 0.85vw, 13px);
  color: var(--carbon-soft); margin-top: 12px;
}

/* ── CODE BLOCKS ── */
/* Inline code: subtle crimson mono so it stands out as a literal value
   without a box that fragments awkwardly when the line wraps mid-snippet. */
code {
  font-family: var(--mono); font-size: 0.92em;
  color: var(--crimson);
  background: transparent; padding: 0;
  white-space: nowrap;
}
/* Block code: boxed treatment for multi-line snippets. */
pre {
  font-family: var(--mono);
  font-size: clamp(12px, 0.9vw, 14px); color: var(--carbon);
  background: var(--cream-soft);
  border: 1px solid var(--cream-rule);
  padding: 16px 18px; margin: 18px 0;
  overflow-x: auto; line-height: 1.6;
}
pre code {
  color: var(--carbon); background: transparent; padding: 0;
  font-size: inherit; white-space: pre;
}

/* ── HERO COMPACT (utility / form / legal pages) ── */
/* Drops the 58vh minimum + tightens padding so single-form / single-purpose
   pages don't leave a giant gap before the content. */
.hero.hero-compact {
  min-height: auto;
  padding: clamp(96px, 9.5vw, 140px) var(--pad-x) clamp(28px, 3vw, 48px);
}
.hero.hero-compact + section { padding-top: clamp(14px, 1.6vw, 28px); }

/* ── FOOTER ── */
footer {
  padding-top: clamp(40px, 4.4vw, 72px); padding-bottom: clamp(24px, 2.4vw, 40px);
  padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2));
  border-top: 1px solid var(--cream-rule);
  background: #ffffff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(28px, 3vw, 56px);
  max-width: var(--maxw); margin: 0 auto;
}
.footer-brand p {
  font-family: var(--sans);
  font-size: clamp(12px, 0.88vw, 14px); font-weight: 300;
  color: var(--carbon-soft); line-height: 1.75; max-width: 320px;
  margin-top: 10px;
}
.footer-col h5 {
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--crimson);
  font-weight: 600; margin-bottom: 16px;
}
.footer-col a {
  display: block; font-family: var(--sans);
  font-size: clamp(12px, 0.88vw, 14px);
  font-weight: 300; color: var(--carbon-soft);
  text-decoration: none; margin-bottom: 8px; transition: color 0.2s;
}
.footer-col a:hover { color: var(--carbon); }
.footer-trademarks {
  max-width: var(--maxw); margin: clamp(24px, 2.6vw, 40px) auto 0;
  font-family: var(--sans); font-weight: 300;
  font-size: clamp(10px, 0.72vw, 12px); line-height: 1.55;
  color: var(--metal-dark);
}
.footer-bottom {
  max-width: var(--maxw); margin: clamp(24px, 2.6vw, 40px) auto 0;
  padding-top: clamp(18px, 2vw, 32px);
  border-top: 1px solid var(--cream-rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: clamp(10px, 0.78vw, 12px); color: var(--carbon-soft);
  flex-wrap: wrap; gap: 16px;
}
.footer-nvidia-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; padding: 10px 14px; border-radius: 6px;
  line-height: 0; flex-shrink: 0;
}
.footer-nvidia-badge img {
  display: block;
  height: clamp(36px, 3.2vw, 52px); width: auto;
}

/* ── RESPONSIVE BREAKPOINTS ── */

/* Mid-narrow (1100px and below) — trim the secondary nav links so the visible
   row stays one line even as available width shrinks. Newsroom + About get
   reached via the footer sitemap; the primary five remain. */
@media (max-width: 1100px) {
  .nav-links li:nth-child(4),  /* Newsroom */
  .nav-links li:nth-child(5) { /* About */
    display: none;
  }
}

/* Tablet (820px and below) — drop more secondary links and let the row pack
   tighter. Partners moves to the footer too. */
@media (max-width: 820px) {
  .nav-links li:nth-child(3) { /* Partners */
    display: none;
  }
}

/* Mobile (640px and below) — stack the nav vertically with the brand on its
   own row and the links on a second compact row. CTA stays visible. */
@media (max-width: 640px) {
  nav {
    display: flex; /* override the desktop grid */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px; padding-bottom: 12px;
    gap: 10px;
  }
  .nav-cta { order: 1; } /* row 1: logo (left) + CTA (right) */
  .nav-links {
    order: 2; /* wraps to row 2, full width */
    width: 100%;
    gap: 14px;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px solid var(--cream-rule);
    margin-top: 4px;
    padding-top: 10px;
  }
  .nav-cta {
    padding: 6px 12px !important;
    font-size: 10px !important;
  }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Very narrow (420px and below) — hide all secondary links, keep AIMS + CTA. */
@media (max-width: 420px) {
  .nav-links li:nth-child(2) { /* Products */
    display: none;
  }
}

/* ── AIMS modes + gateway viz ── */
.aims-modes-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 880px) {
  .aims-modes-stage { grid-template-columns: 1fr; }
}
.modes-copy { min-width: 0; }
.mode-list {
  margin-top: clamp(20px, 2.2vw, 36px);
  display: flex; flex-direction: column;
  gap: clamp(16px, 1.6vw, 24px);
}
.mode-item {
  padding-left: clamp(14px, 1.4vw, 22px);
  border-left: 2px solid var(--crimson);
}
.mode-item p {
  font-family: var(--sans);
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 300; line-height: 1.7; color: var(--carbon-soft);
  margin-top: 8px;
}
.mode-item p strong { color: var(--carbon); font-weight: 500; }
.mode-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(11px, 0.85vw, 13px);
  letter-spacing: 0.08em; text-transform: none;
  color: var(--crimson); font-weight: 500;
}
.aims-gateway {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: clamp(16px, 1.6vw, 28px);
}
.aims-gateway svg,
.aims-gateway img {
  width: 100%; height: auto;
  max-width: clamp(280px, 38vw, 520px);
  display: block;
}
.aims-gateway figcaption {
  font-family: var(--mono);
  font-size: clamp(10px, 0.78vw, 12px);
  color: var(--carbon-soft); letter-spacing: 0.06em;
  text-align: center;
}

/* Focus-visible outlines for keyboard navigation */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}

/* ── WP-A: capture frames + figure bands (visual upgrade 2026-06) ── */
.capture-frame {
  background: var(--carbon);
  border: 1px solid var(--cream-rule);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 18px 44px -18px var(--shadow-soft), 0 6px 18px rgba(244,248,251,0.18);
}
.capture-chrome { display: flex; gap: 5px; padding: 2px 2px 8px; }
.capture-chrome span { width: 8px; height: 8px; border-radius: 50%; background: var(--metal-dark); opacity: 0.55; }
.capture-chrome span:last-child { background: var(--crimson); opacity: 1; }
.capture-frame img { display: block; width: 100%; height: auto; border-radius: 5px; }
.capture-hero { margin-top: clamp(28px, 3vw, 44px); }
.capture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(24px, 2.5vw, 36px);
}
.capture-card { text-decoration: none; }
.capture-card .capture-frame { padding: 7px; }
.capture-card:hover .capture-frame { border-color: var(--crimson); }
.capture-title {
  font-family: var(--mono);
  font-size: clamp(11px, 0.8vw, 13px);
  color: var(--crimson);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 0 4px;
}
.capture-cap {
  font-family: var(--sans);
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 300;
  color: var(--carbon-soft);
  line-height: 1.5;
}
.capture-note {
  font-family: var(--mono);
  font-size: clamp(10px, 0.72vw, 12px);
  color: var(--metal-dark);
  margin-top: clamp(16px, 1.5vw, 22px);
}
.capture-frame .capture-video { display: block; width: 100%; height: auto; border-radius: 5px; }
.capture-frame .capture-poster { display: none; }
@media (prefers-reduced-motion: reduce) {
  .capture-frame .capture-video { display: none; }
  .capture-frame .capture-poster { display: block; }
}

/* ── SITE BREADCRUMB ──────────────────────────────────────────────────────
   Ported from the blog's .blog-listing-bar, taken site-wide. The blog nav is
   sticky so its bar flows under it; the main nav is position:fixed, so the bar
   clears it with a margin-top equal to the nav's height (paddings 32 + border 1
   + the logo clamp). The mobile nav stacks to two rows — overridden below. */
/* flow-root stops the breadcrumb's margin-top from collapsing through <main>
   (which would let the hero slide up under the bar). Scoped to breadcrumb pages. */
main:has(> .site-breadcrumb) { display: flow-root; }
.site-breadcrumb {
  /* No-JS fallback clearance for the fixed nav (~74px desktop / ~111px stacked
     mobile). site-nav.js refines this to the nav's exact measured height. */
  margin-top: 75px;
  background: var(--cream-soft);
  border-bottom: 1px solid var(--cream-rule);
  padding: 0.75rem var(--pad-x);
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--mono);
  font-size: clamp(11px, 0.78vw, 12.5px);
  color: var(--carbon-soft);
}
.site-breadcrumb a { color: var(--carbon-soft); text-decoration: none; transition: color 0.2s; }
.site-breadcrumb a:hover { color: var(--crimson); }
.site-breadcrumb [aria-current="page"] {
  color: var(--carbon);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: min(62vw, 520px);
}
.breadcrumb-sep { color: var(--metal-dark); flex-shrink: 0; }
/* The breadcrumb already cleared the fixed nav → collapse the following hero's
   large top padding so the two don't double-space. */
.site-breadcrumb + .hero { padding-top: clamp(20px, 2.6vw, 40px); }
.site-breadcrumb + .hero.hero-compact { padding-top: clamp(16px, 2vw, 30px); }
@media (max-width: 640px) {
  .site-breadcrumb { margin-top: 112px; } /* two-row stacked mobile nav (~111px) */
}

/* ── READING PROGRESS (ported from the blog; article pages only) ── */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--crimson); z-index: 200;
  transition: width 0.1s linear; width: 0%;
}

/* ── ACTIVE NAV SECTION (set by /assets/site-nav.js) ── */
.nav-links a.is-active { color: var(--carbon); position: relative; }
.nav-links a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; background: var(--crimson);
}

/* ══════════════════════════════════════════════════════════════════
   v6.2 DARK RETHEME (2026-08-13) — token override for all legacy
   surfaces (blog index, posts, apprentice, marketplace). Loaded last,
   so it wins the cascade. Mirrors the blog-article.css override.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --cream:         #02070d;
  --cream-rule:    rgba(164,215,235,.15);
  --cream-soft:    #06131d;
  --paper:         #091c28;
  --carbon:        #f4f8fb;
  --carbon-soft:   #a6b8c2;
  --crimson:       #43d9ff;
  --crimson-hi:    #a7edff;
  --crimson-faint: rgba(67,217,255,.10);
  --metal-dark:    #78919f;
}
.btn-primary, .btn.btn-primary { color: #02070d; }

/* breadcrumb normalization (2026-08-13): align to the article reading column,
   site sans (not mono), no band background, no fixed-nav clearance gap */
.site-breadcrumb{
  margin-top:0;
  background:transparent;
  border-bottom:1px solid rgba(164,215,235,.12);
  max-width:1180px;
  margin-inline:auto;
  padding:0.7rem var(--pad-x);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12.5px;
  color:#78919f;
}
.site-breadcrumb a{color:#78919f}
.site-breadcrumb a:hover{color:#43d9ff}
.site-breadcrumb [aria-current]{color:#a6b8c2}

/*
 * xtendedsystems.com — blog article styles
 * Mirrors the XSI LodeStone blog-article layout in the cream/crimson brand.
 * Loaded as /assets/blog-article.css on every /blog/<slug>/ page.
 * Depends on /layout-styles.css for :root tokens + nav/footer/btn base.
 */

/* ── READING PROGRESS ── */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 2px;
  background: var(--crimson); z-index: 300;
  transition: width 0.1s linear; width: 0%;
}

/* ── BREADCRUMB ── */
.site-breadcrumb {
  background: var(--cream-soft);
  border-bottom: 1px solid var(--cream-rule);
  padding: 0.75rem clamp(1.5rem, 5vw, 5rem);
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.8rem; color: var(--carbon-soft);
  margin-top: 64px; /* nav height */
}
.site-breadcrumb a { color: var(--carbon-soft); text-decoration: none; transition: color 0.2s; }
.site-breadcrumb a:hover { color: var(--carbon); }
.site-breadcrumb .breadcrumb-sep { color: var(--cream-rule); }

/* ── BLOG HEADER ── */
.blog-header {
  /* Align to the SAME reading column as .article-layout / .site-breadcrumb
     (the 2026-08-13 wide-monitor fix below) — not the old sitewide --maxw
     gutter. Those two were updated to a 1180px-capped, pad-x-padded column;
     this rule was missed in that pass, so on wide screens the hero drifted
     well left of the article body/sidebar underneath it. Fixed 2026-08-25. */
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 5rem) var(--pad-x) 2.5rem;
}
.blog-header > * { max-width: 680px; }
.blog-category {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: 1.5rem;
  font-family: var(--sans);
}
.blog-category::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--crimson);
}
.blog-headline {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 4.5vw, 3rem);
  line-height: 1.18; color: var(--carbon);
  margin-bottom: 1.25rem; letter-spacing: -0.015em;
  font-weight: 400;
}
.blog-headline em { font-style: italic; color: var(--metal-dark); }
.blog-deck {
  font-size: 1.1rem; line-height: 1.65;
  color: var(--carbon-soft); font-weight: 300;
  margin-bottom: 2rem; max-width: 660px;
}

/* ── AUTHOR MINI ── */
.author-mini {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--cream-rule);
  border-bottom: 1px solid var(--cream-rule);
}
.author-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson-hi), #0e2230);
  border: 1.5px solid rgba(67,217,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 0.8rem;
  color: var(--cream); flex-shrink: 0;
}
.author-meta { flex: 1; }
.author-name-link {
  font-weight: 500; font-size: 0.9rem; color: var(--carbon);
  text-decoration: none; display: flex; align-items: center; gap: 0.4rem;
}
.author-name-link:hover { color: var(--crimson); }
.author-name-link svg { width: 14px; height: 14px; opacity: 0.5; }
.author-byline-meta { font-size: 0.8rem; color: var(--carbon-soft); margin-top: 2px; }
.post-share { display: flex; gap: 0.75rem; align-items: center; }
.share-btn {
  background: var(--cream-soft);
  border: 1px solid var(--cream-rule);
  color: var(--carbon-soft); font-size: 0.75rem; font-weight: 500;
  padding: 0.3rem 0.75rem; border-radius: 4px; text-decoration: none;
  display: flex; align-items: center; gap: 0.35rem;
  cursor: pointer; transition: all 0.2s; font-family: var(--sans);
}
.share-btn:hover { background: var(--cream); border-color: var(--carbon-soft); color: var(--carbon); }
.share-btn.linkedin { border-color: rgba(10,102,194,0.3); }
.share-btn.linkedin:hover { border-color: #0a66c2; color: #0a66c2; }

/* ── ARTICLE LAYOUT ── */
.article-layout {
  /* same site gutter as .blog-header so body copy + sidebar align to the site rhythm */
  padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2));
  display: grid; grid-template-columns: 1fr 300px;
  gap: 4rem; align-items: start;
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .article-sidebar { order: initial; position: static; top: auto; }
}

/* ── ARTICLE BODY ── */
.article-body { min-width: 0; max-width: 680px; padding-bottom: 4rem; overflow-wrap: anywhere; }
.article-body h2 {
  font-family: var(--sans); font-size: 1.25rem; font-weight: 600;
  color: var(--carbon); margin: 2.5rem 0 0.875rem; letter-spacing: -0.01em;
}
.article-body h3 {
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  color: var(--carbon); margin: 1.75rem 0 0.625rem;
}
.article-body p { color: var(--carbon-soft); margin-bottom: 1.25rem; font-weight: 300; }
.article-body p strong { color: var(--carbon); font-weight: 500; }
.article-body ul, .article-body ol {
  margin: 0 0 1.25rem 1.5rem; color: var(--carbon-soft); font-weight: 300;
}
.article-body li { margin-bottom: 0.5rem; }

/* CALLOUT */
.callout {
  border-left: 3px solid var(--crimson);
  background: var(--shadow-soft);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem; margin: 1.75rem 0;
}
.callout p { color: var(--carbon-soft); margin-bottom: 0; font-style: italic; }
.callout strong { color: var(--carbon); font-style: normal; }

/* ── QA SECTION ── */
.qa-section {
  margin: 3rem 0; border-top: 1px solid var(--cream-rule); padding-top: 2.5rem;
}
.section-label {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--crimson);
  margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;
}
.section-label::before { content: ''; display: block; width: 16px; height: 1px; background: var(--crimson); }
.section-title {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
  color: var(--carbon); margin-bottom: 0.5rem; letter-spacing: -0.01em;
  margin-top: 0;
}
.section-subtitle { color: var(--carbon-soft); font-size: 0.9rem; margin-bottom: 2rem; }

.qa-item {
  border: 1px solid var(--cream-rule); border-radius: 8px;
  margin-bottom: 1rem; overflow: hidden; transition: border-color 0.2s;
  background: var(--cream-soft);
}
.qa-item:hover { border-color: rgba(67,217,255,0.3); }
.qa-question {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem;
  cursor: pointer; user-select: none; width: 100%; background: none; border: none; text-align: left;
}
.qa-q-badge {
  width: 28px; height: 28px; border-radius: 4px; background: var(--crimson);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 0.75rem; font-weight: 700;
  color: var(--cream); flex-shrink: 0; margin-top: 2px;
}
.qa-q-text { flex: 1; font-weight: 500; font-size: 0.975rem; color: var(--carbon); line-height: 1.45; }
.qa-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--carbon-soft); transition: transform 0.25s; margin-top: 4px;
}
.qa-item.open .qa-chevron { transform: rotate(180deg); }
.qa-answer {
  display: none; padding: 0 1.25rem 1.25rem 4rem;
  color: var(--carbon-soft); font-size: 0.925rem; font-weight: 300;
  line-height: 1.7; border-top: 1px solid var(--cream-rule);
}
.qa-item.open .qa-answer { display: block; padding-top: 1rem; }
.qa-answer p { margin-bottom: 0.75rem; color: var(--carbon-soft); }
.qa-answer p:last-child { margin-bottom: 0; }

/* ── FAQ SECTION ── */
.faq-section { margin: 3rem 0; border-top: 1px solid var(--cream-rule); padding-top: 2.5rem; }
.faq-item { border-bottom: 1px solid var(--cream-rule); padding: 0; }
.faq-item:first-of-type { border-top: 1px solid var(--cream-rule); }
.faq-trigger {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.125rem 0; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left;
}
.faq-q { font-weight: 500; font-size: 0.95rem; color: var(--carbon); line-height: 1.45; }
.faq-icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--carbon-soft); transition: transform 0.25s; margin-top: 2px;
}
.faq-item.open .faq-icon { transform: rotate(45deg); color: var(--crimson); }
.faq-answer {
  display: none; padding-bottom: 1.25rem;
  color: var(--carbon-soft); font-size: 0.9rem; font-weight: 300; line-height: 1.7;
}
.faq-item.open .faq-answer { display: block; }
.faq-answer strong { color: var(--carbon); font-weight: 500; }

/* ── AUTHOR BIO ── */
.author-bio-section { margin: 3.5rem 0 0; border-top: 1px solid var(--cream-rule); padding-top: 2.5rem; }
.author-bio-card {
  background: var(--cream-soft); border: 1px solid var(--cream-rule);
  border-radius: 10px; padding: 2rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1.75rem; align-items: start;
}
@media (max-width: 600px) { .author-bio-card { grid-template-columns: 1fr; } }
.author-portrait {
  width: 80px; height: 80px; border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson-hi), #0e2230);
  border: 2px solid rgba(67,217,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 1.5rem; font-weight: 700;
  color: var(--cream); flex-shrink: 0;
}
.author-bio-name {
  font-family: var(--sans); font-size: 1.1rem; font-weight: 600; color: var(--carbon);
  margin-bottom: 0.2rem; display: flex; align-items: center; gap: 0.75rem;
}
.author-bio-title { font-size: 0.825rem; color: var(--crimson); font-weight: 500; letter-spacing: 0.04em; margin-bottom: 1rem; }
.author-bio-text { font-size: 0.9rem; color: var(--carbon-soft); font-weight: 300; line-height: 1.7; margin-bottom: 1rem; }
.author-bio-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.bio-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; font-weight: 500; color: var(--carbon-soft);
  text-decoration: none; border: 1px solid var(--cream-rule);
  padding: 0.3rem 0.75rem; border-radius: 4px; transition: all 0.2s;
  background: var(--cream);
}
.bio-link:hover { border-color: var(--carbon-soft); color: var(--carbon); }
.bio-link.linkedin-link { border-color: rgba(10,102,194,0.3); }
.bio-link.linkedin-link:hover { border-color: #0a66c2; color: #0a66c2; }
.bio-link svg { width: 14px; height: 14px; }

/* ── SIDEBAR ── */
.article-sidebar { min-width: 0; position: sticky; top: 84px; overflow-wrap: anywhere; }
.sidebar-card {
  background: var(--cream-soft); border: 1px solid var(--cream-rule);
  border-radius: 10px; padding: 1.5rem; margin-bottom: 1.25rem;
}
.sidebar-label {
  font-family: var(--sans); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.75rem;
}
.sidebar-card h4 {
  font-family: var(--sans); font-size: 0.975rem; font-weight: 600;
  color: var(--carbon); margin-bottom: 0.5rem; line-height: 1.3;
}
.sidebar-card p {
  font-size: 0.825rem; color: var(--carbon-soft); font-weight: 300;
  line-height: 1.6; margin-bottom: 1rem;
}
.whitepaper-cta {
  background: linear-gradient(135deg, rgba(67,217,255,0.06) 0%, var(--cream-soft) 100%);
  border-color: rgba(67,217,255,0.2);
}
.whitepaper-cta .sidebar-label { color: var(--crimson); }
.wp-form { display: flex; flex-direction: column; gap: 0.625rem; }
.wp-form input {
  background: var(--cream); border: 1px solid var(--cream-rule);
  color: var(--carbon); font-family: var(--sans); font-size: 0.85rem;
  padding: 0.6rem 0.875rem; border-radius: 4px; width: 100%; outline: none;
  transition: border-color 0.2s;
}
.wp-form input::placeholder { color: var(--carbon-soft); opacity: 0.6; }
.wp-form input:focus { border-color: var(--crimson); }
.wp-submit {
  background: var(--crimson); color: var(--cream);
  font-family: var(--sans); font-size: 0.825rem; font-weight: 600;
  letter-spacing: 0.04em; padding: 0.65rem 1rem; border: none;
  border-radius: 4px; cursor: pointer; transition: background 0.2s; width: 100%;
}
.wp-submit:hover { background: var(--crimson-hi); }
.wp-privacy { font-size: 0.7rem; color: var(--carbon-soft); text-align: center; margin-top: 0.25rem; }
.linkedin-cross { border-color: rgba(10,102,194,0.2); }
.linkedin-cross .sidebar-label { color: #0a66c2; }
.linkedin-profile-row {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
  background: rgba(10,102,194,0.05); border-radius: 6px; text-decoration: none;
  border: 1px solid rgba(10,102,194,0.15); margin-bottom: 0.75rem; transition: all 0.2s;
}
.linkedin-profile-row:hover { border-color: rgba(10,102,194,0.4); background: rgba(10,102,194,0.1); }
.li-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson-hi), #0e2230);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 0.7rem;
  color: var(--cream); flex-shrink: 0;
}
.li-meta { flex: 1; min-width: 0; }
.li-name { font-size: 0.825rem; font-weight: 500; color: var(--carbon); }
.li-title { font-size: 0.72rem; color: var(--carbon-soft); margin-top: 1px; }
.li-page-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; background: rgba(10,102,194,0.07);
  border: 1px solid rgba(10,102,194,0.2); border-radius: 4px;
  padding: 0.55rem 0.875rem; font-size: 0.8rem; font-weight: 500;
  color: #0a66c2; text-decoration: none; transition: all 0.2s;
}
.li-page-btn:hover { background: rgba(10,102,194,0.15); border-color: rgba(10,102,194,0.45); }
.related-post-item {
  display: flex; gap: 0.75rem; padding: 0.75rem 0;
  border-bottom: 1px solid var(--cream-rule); text-decoration: none; transition: opacity 0.2s;
}
.related-post-item:last-child { border-bottom: none; }
.related-post-item:hover { opacity: 0.75; }
.related-cat { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.25rem; }
.related-title { font-size: 0.825rem; font-weight: 500; color: var(--carbon); line-height: 1.4; }

/* XST internal CTA sidebar card */
.xst-cta-card { border-color: rgba(67,217,255,0.2); }
.xst-learn-btn {
  display: inline-block; background: var(--cream);
  border: 1px solid var(--crimson); border-radius: 4px;
  padding: 0.45rem 0.875rem; font-size: 0.825rem; font-weight: 500;
  color: var(--crimson); text-decoration: none; transition: all 0.2s;
}
.xst-learn-btn:hover { background: var(--crimson); color: var(--cream); }

/* ── BOTTOM CTA ── */
.article-cta-banner {
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--cream) 100%);
  border-top: 1px solid rgba(67,217,255,0.2);
  border-bottom: 1px solid var(--cream-rule);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 5rem);
  margin-top: 2rem; text-align: center;
}
.cta-eyebrow {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--crimson); margin-bottom: 1rem;
}
.cta-headline {
  font-family: var(--serif); font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--carbon); margin: 0 auto 0.75rem; line-height: 1.2; font-weight: 400;
}
.cta-sub { color: var(--carbon-soft); font-size: 1rem; font-weight: 300; max-width: 520px; margin: 0 auto 2rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  background: var(--crimson); color: var(--cream);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.8rem 1.75rem; border-radius: 4px; text-decoration: none;
  transition: background 0.2s; display: inline-block;
}
.btn-primary:hover { background: var(--crimson-hi); }
.btn-secondary {
  background: transparent; color: var(--carbon-soft);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.8rem 1.75rem; border: 1px solid var(--cream-rule);
  border-radius: 4px; text-decoration: none; transition: all 0.2s; display: inline-block;
}
.btn-secondary:hover { border-color: var(--carbon-soft); color: var(--carbon); }

/* ── BLOG INDEX (blog/index.html) ── */
.blog-index-wrap {
  /* same gutter as .article-layout so cards left-edge aligns to site rhythm */
  padding-inline: max(var(--pad-x), calc((100vw - var(--maxw)) / 2));
}
.blog-index-hero {
  padding: clamp(3rem, 8vw, 5rem) 0 2.5rem;
}
.blog-index-eye {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--crimson);
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;
}
.blog-index-eye::before {
  content: ''; display: block; width: 20px; height: 1px; background: var(--crimson);
}
.blog-index-h1 {
  font-family: var(--serif); font-size: clamp(1.85rem, 4.5vw, 3rem);
  line-height: 1.18; color: var(--carbon); margin-bottom: 1rem;
  letter-spacing: -0.015em; font-weight: 400;
}
.blog-index-deck {
  font-size: 1.05rem; line-height: 1.65;
  color: var(--carbon-soft); font-weight: 300;
  max-width: 560px; margin-bottom: 2.5rem;
}
/* CARD GRID */
.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.blog-card[data-domain] {
  display: block; text-decoration: none;
  background: var(--cream-soft);
  border: 1px solid var(--cream-rule);
  border-radius: 10px; padding: 1.75rem;
  transition: border-color 0.2s, transform 0.2s;
  color: inherit;
}
.blog-card:hover { border-color: rgba(67, 217, 255, 0.35); transform: translateY(-2px); }
.blog-card[data-domain] .blog-card-eye {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 0.75rem;
}
.blog-card-title {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  color: var(--carbon); line-height: 1.35; margin-bottom: 0.75rem;
}
.blog-card-deck {
  font-size: 0.875rem; line-height: 1.6;
  color: var(--carbon-soft); font-weight: 300; margin-bottom: 1.25rem;
}
.blog-card-meta { font-size: 0.75rem; color: var(--carbon-soft); font-weight: 400; }
@media (max-width: 640px) { .blog-card-grid { grid-template-columns: 1fr; } }


/* ══════════════════════════════════════════════════════════════════
   v6.2 DARK RETHEME (2026-08-12) — token override only.
   Maps the cream/crimson editorial tokens (defined in layout-styles.css)
   onto the v6.2 dark system so every existing rule re-colors without
   structural changes. Loaded after layout-styles.css, so this wins.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --cream:         #02070d;   /* page ground   → v6.2 --bg        */
  --cream-rule:    rgba(164,215,235,.15);  /* rules → --line      */
  --cream-soft:    #06131d;   /* section bands → --surface        */
  --paper:         #091c28;   /* cards         → --surface-2      */
  --carbon:        #f4f8fb;   /* body text     → --text           */
  --carbon-soft:   #a6b8c2;   /* secondary     → --muted          */
  --crimson:       #43d9ff;   /* accent        → --cyan           */
  --crimson-hi:    #a7edff;   /* accent hover  → --cyan-soft      */
  --crimson-faint: rgba(67,217,255,.10);
  --metal-dark:    #78919f;   /* tertiary      → --muted-2        */
}
/* keep accent-filled buttons legible on the light accent */
.btn-primary, .btn.btn-primary { color: #02070d; }

/* wide-monitor fix (2026-08-13): cap the article grid as a centered reading
   unit — prevents the text-left / sidebar-far-right split on large displays */
.article-layout{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
  grid-template-columns:minmax(0,1fr) 300px;
}
@media (min-width:1500px){
  .article-layout{gap:5rem}
}
@media (max-width:900px){
  .article-layout{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .article-sidebar{grid-column:1;grid-row:2;order:initial;position:static;top:auto;width:auto;max-width:100%}
  .article-body{grid-column:1;grid-row:1;width:100%;max-width:none}
  .article-sidebar .sidebar-card{position:static;max-width:100%}
}

/* breadcrumb normalization (2026-08-13): align to the article reading column,
   site sans (not mono), no band background, no fixed-nav clearance gap */
.site-breadcrumb{
  margin-top:0;
  background:transparent;
  border-bottom:1px solid rgba(164,215,235,.12);
  max-width:1180px;
  margin-inline:auto;
  padding:0.7rem var(--pad-x);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12.5px;
  color:#78919f;
}
.site-breadcrumb a{color:#78919f}
.site-breadcrumb a:hover{color:#43d9ff}
.site-breadcrumb [aria-current]{color:#a6b8c2}

/* ── XSI EDITORIAL SUBJECT SYSTEM (2026-09-06) ──────────────────────────────
   Publication format (Blog, Company Log, etc.) remains metadata.  The subject
   mark identifies the durable editorial domain.  Marks are the exact XSI-owned
   assets approved for the Newsroom; article/card uses are 30% smaller than the
   original presentation sizes. */
body.editorial-domain-governance,
.blog-card[data-domain="governance"] { --editorial-accent:#f0c75e; }
body.editorial-domain-infrastructure,
.blog-card[data-domain="infrastructure"] { --editorial-accent:#43d9ff; }
body.editorial-domain-memory,
.blog-card[data-domain="memory"] { --editorial-accent:#df42ab; }
body.editorial-domain-innovation,
.blog-card[data-domain="innovation"] { --editorial-accent:#9adf4d; }
body.editorial-domain-signal,
.blog-card[data-domain="signal"] { --editorial-accent:#ff6464; }
body.editorial-domain-human,
.blog-card[data-domain="human"] { --editorial-accent:#cc46a0; }

.blog-header { position:relative; }
.editorial-subject {
  max-width:680px;
  margin:0 0 .55rem;
  color:var(--editorial-accent, #43d9ff);
  font-family:Inter,var(--sans),sans-serif;
  font-size:.72rem;
  font-weight:650;
  letter-spacing:.11em;
  line-height:1.35;
  text-transform:uppercase;
}
.editorial-article-mark {
  position:absolute;
  top:clamp(3rem, 8vw, 5rem);
  right:var(--pad-x);
  width:69px;
  height:69px;
  max-width:none;
  border-radius:17px;
}
.blog-category {
  margin-bottom:1.45rem;
  color:var(--carbon-soft);
  letter-spacing:.06em;
  text-transform:none;
}
.blog-category::before { background:var(--editorial-accent, var(--crimson)); }

.blog-card {
  display:grid;
  grid-template-columns:45px minmax(0, 1fr);
  gap:1rem;
  align-items:start;
}
.blog-card-domain-mark {
  display:block;
  width:45px;
  height:45px;
  border-radius:12px;
}
.blog-card-copy { min-width:0; }
.blog-card-subject {
  margin:0 0 .35rem;
  color:var(--editorial-accent, #43d9ff);
  font-family:Inter,var(--sans),sans-serif;
  font-size:.65rem;
  font-weight:650;
  letter-spacing:.09em;
  line-height:1.35;
  text-transform:uppercase;
}
.blog-card-eye {
  color:var(--carbon-soft);
  letter-spacing:.04em;
  text-transform:none;
}
.blog-card:focus-visible {
  outline:2px solid var(--editorial-accent, #43d9ff);
  outline-offset:4px;
}

@media (max-width:720px) {
  .editorial-article-mark {
    position:static;
    display:block;
    margin:0 0 1.25rem;
    width:48px;
    height:48px;
    border-radius:12px;
  }
  .blog-header { padding-top:2.4rem; }
  .editorial-subject,
  .blog-category { padding-right:0; }
}

@media (prefers-reduced-motion:reduce) {
  .blog-card { transition:none; }
}

/* Subject artwork belongs to the article rail, which follows the body on mobile. */
.article-sidebar > .editorial-article-mark {
  position:static;
  display:block;
  width:69px;
  height:69px;
  max-width:100%;
  margin:0 0 1.5rem;
  object-fit:contain;
}

.editorial-inline-figure{margin:2rem 0;max-width:100%}.editorial-inline-figure img{display:block;width:100%;height:auto}.editorial-inline-figure figcaption{margin-top:.75rem;font-size:.85rem;line-height:1.5;color:var(--carbon-soft)}.article-body table{width:100%;margin:1.5rem 0;border-collapse:collapse}.article-body th,.article-body td{padding:.75rem;text-align:left;border-bottom:1px solid var(--cream-rule)}
.article-sidebar a.btn{color:var(--crimson);text-decoration:none}.article-sidebar a.btn:hover{color:var(--crimson-hi)}

.supplied-figure {margin:2.25rem 0;padding:0;max-width:100%}
.supplied-figure-button {display:block;width:100%;padding:0;border:1px solid rgba(164,215,235,.2);border-radius:8px;overflow:hidden;background:#02070d;cursor:zoom-in;position:relative}
.supplied-figure-button img {display:block;width:100%;height:auto}
.supplied-figure-button span {position:absolute;right:8px;bottom:8px;border:1px solid #78919f;border-radius:4px;padding:4px 8px;background:#02070d;color:#a7edff;font:12px system-ui}
.supplied-figure figcaption {margin-top:.75rem;font-size:.85rem;line-height:1.5;color:var(--carbon-soft)}
.article-long-horizon {padding:1.15rem 1.3rem;border-left:3px solid var(--crimson);background:var(--cream-soft);margin:1.6rem 0}
.figure-dialog {width:min(96vw,1800px);max-width:96vw;max-height:94vh;margin:auto;padding:0;background:#02070d;color:#f4f8fb;border:1px solid #43d9ff;border-radius:10px}
.figure-dialog::backdrop {background:rgba(0,0,0,.85)}
.figure-dialog-bar {display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px;font:14px system-ui}
.figure-dialog-bar button {color:#a7edff;background:#091c28;border:1px solid #78919f;border-radius:5px;padding:8px 12px;font:inherit;cursor:pointer}
.figure-dialog-viewport {max-height:78vh;overflow:auto;padding:0 8px 8px}
.figure-dialog img {display:block;width:100%;height:auto;max-width:none}
.figure-dialog img.original-size {width:var(--natural-width)}
.supplied-figure-button:focus-visible,.figure-dialog button:focus-visible {outline:3px solid #a7edff;outline-offset:3px}

.figure-dialog .figure-dialog-bar{font-family:var(--sans)}

/* XSI DEPTH FIELD
   Gaussian-splat-inspired ambient depth layer.
   Page content never depends on this effect; it degrades to CSS atmosphere.
*/
html{background:#02070d}
body{background:transparent!important;position:relative;isolation:isolate}
body:before{display:none!important}
.xsi-depth-field{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(900px 650px at 82% 10%,rgba(16,63,82,.25),transparent 68%),
    radial-gradient(780px 620px at 10% 72%,rgba(11,54,61,.12),transparent 70%),
    linear-gradient(180deg,#02070d,#031019 100%);
}
.xsi-depth-field canvas{
  position:absolute;inset:-1.5%;width:103%;height:103%;display:block;
  opacity:0;filter:saturate(.9) contrast(1.03);
  transition:opacity .8s ease;
}
.xsi-depth-field.is-ready canvas{opacity:.50}
.xsi-depth-scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(1000px 680px at 82% 8%,rgba(2,7,13,.10),rgba(2,7,13,.39) 66%,rgba(2,7,13,.68) 100%),
    linear-gradient(180deg,rgba(2,7,13,.22),rgba(2,7,13,.34) 38%,rgba(2,7,13,.60) 100%);
}
main,.site-footer{position:relative;z-index:2}
.site-header{background:rgba(2,7,13,.76)}
.section,.hero{position:relative}
@media(max-width:760px){
  .xsi-depth-field.is-ready canvas{opacity:.26}
  .xsi-depth-scrim{background:linear-gradient(180deg,rgba(2,7,13,.52),rgba(2,7,13,.75))}
}
@media(prefers-reduced-motion:reduce){.xsi-depth-field canvas{transition:none!important}}

/* Article presentation aligned with the supplied XSI document-template kit.
   Keep section elements for structure, without the site landing-page padding. */
body.editorial-domain-memory { --editorial-accent: var(--crimson); }
.article-body > section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.article-body > section + section { margin-top: 2.5rem; }
.article-body > section > h2:first-child { margin-top: 0; }
.article-body > section > :last-child { margin-bottom: 0; }
.article-body p { margin-top: 0; margin-bottom: 1.25rem; }
.blog-category { color: var(--crimson); }
.article-sidebar a.btn { color: var(--crimson); text-decoration: none; }
.article-sidebar a.btn:hover { color: var(--crimson-hi); }
/* Keep the footer above the website's decorative background layer. */
.xsiftr { position: relative; z-index: 2; }


.xsihdr{position:sticky;top:0;z-index:200;background:rgba(2,7,13,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(164,215,235,.15);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.xsihdr *{box-sizing:border-box}
.xsihdr-in{width:min(1240px,calc(100% - 48px));margin-inline:auto;display:flex;align-items:center;gap:22px;min-height:64px;flex-wrap:wrap;padding:8px 0}
.xsihdr-brand{font-size:23px;font-weight:800;letter-spacing:.12em;color:#f4f8fb;text-decoration:none;line-height:1}
.xsihdr-brand:hover{color:#43d9ff}
.xsihdr-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-left:auto}
.xsihdr-links a{color:#a6b8c2;text-decoration:none;font-size:13.5px}
.xsihdr-links a:hover{color:#f4f8fb}
.xsihdr-res{position:relative}
.xsihdr-res summary{list-style:none;cursor:pointer;color:#a6b8c2;font-size:13.5px}
.xsihdr-res summary::-webkit-details-marker{display:none}
.xsihdr-res summary:hover,.xsihdr-res[open] summary{color:#f4f8fb}
.xsihdr-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:#091c28;border:1px solid rgba(164,215,235,.18);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:2px;min-width:150px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.xsihdr-menu a{padding:8px 12px;border-radius:8px}
.xsihdr-menu a:hover{background:rgba(67,217,255,.1)}
.xsihdr-cta{margin-left:8px;padding:9px 16px;border-radius:999px;border:1px solid rgba(67,217,255,.5);color:#43d9ff !important;font-weight:600}
.xsihdr-cta:hover{background:rgba(67,217,255,.12);color:#a7edff !important}
@media(max-width:760px){.xsihdr-in{gap:12px}.xsihdr-links{gap:12px;font-size:12px}}


/* figure palette — xtendedsystems v6.2 dark "Helm-first" theme (2026-08-13 retheme).
   Values match the hand-patch already live on every pre-existing post
   (from-the-field, xsi-apprentice-launch, etc.) — kept in sync here so newly
   built posts don't regress to the old cream literals. See auto-memory
   reference_blog_sync_v6_portal_gap for the full retheme-gap writeup. */
.article-body {
  --fig-accent:       #43d9ff;
  --fig-accent-rgb:   67,217,255;
  --fig-accent-strong:#a7edff;
  --fig-ink:          #f4f8fb;
  --fig-muted:        #a6b8c2;
  --fig-surface:      #091c28;
  --fig-surface-2:    #0d2634;
  --fig-line:         rgba(244,248,251,0.15);
}

/* ── Figure components (theme-portable via --fig-* tokens) ── */
.stat-banner{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fig-line);border:1px solid var(--fig-line);border-radius:8px;overflow:hidden;margin:2rem 0}
.stat-cell{background:var(--fig-surface);padding:1.5rem;text-align:center}
.stat-number{font-family:'Syne',var(--font-sans,sans-serif);font-size:2rem;font-weight:800;color:var(--fig-accent);line-height:1;margin-bottom:0.5rem}
.stat-label{font-size:0.75rem;color:var(--fig-muted);letter-spacing:0.05em}
.arch-diagram{margin:2rem 0;padding:2rem;border:1px solid var(--fig-line);border-radius:8px;background:var(--fig-surface);text-align:center}
.arch-diagram svg{max-width:100%;height:auto}
.pull-quote{margin:2.5rem 0;padding:2rem 2.5rem;border-left:3px solid var(--fig-accent);background:linear-gradient(135deg,rgba(var(--fig-accent-rgb,192,22,42),0.06),transparent);border-radius:0 8px 8px 0}
.pull-quote-text{font-size:1.15rem;font-weight:600;color:var(--fig-ink);line-height:1.5;margin-bottom:0.75rem}
.pull-quote-attr{font-size:0.8rem;color:var(--fig-muted)}
/* compare-table */
.compare-table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:0.9rem}
.compare-table th{font-family:'Syne',var(--font-sans,sans-serif);font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;text-align:left;padding:0.75rem 1rem;border-bottom:2px solid var(--fig-accent);color:var(--fig-ink)}
.compare-table td{padding:0.75rem 1rem;border-bottom:1px solid var(--fig-line);color:var(--fig-muted)}
.compare-table .highlight{color:var(--fig-accent-strong);font-weight:600}
.compare-table .muted{color:var(--fig-muted)}
/* metric-row */
.metric-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:2rem 0}
.metric-card{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;border:1px solid var(--fig-line);border-radius:8px;background:var(--fig-surface)}
.metric-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(var(--fig-accent-rgb,192,22,42),0.08);border:1px solid rgba(var(--fig-accent-rgb,192,22,42),0.25)}
.metric-icon svg{width:20px;height:20px;stroke:var(--fig-accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.metric-value{font-family:'Syne',var(--font-sans,sans-serif);font-size:1.25rem;font-weight:700;color:var(--fig-ink);line-height:1.1}
.metric-label{font-size:0.75rem;color:var(--fig-muted);margin-top:0.25rem}
/* process-flow */
.process-flow{display:flex;align-items:stretch;gap:0;margin:2rem 0;overflow:hidden;border:1px solid var(--fig-line);border-radius:8px}
.flow-step{flex:1;padding:1.25rem 1rem;border-right:1px solid var(--fig-line)}
.flow-step:last-child{border-right:none}
.flow-step-num{font-family:'Syne',var(--font-sans,sans-serif);font-size:0.65rem;font-weight:700;letter-spacing:0.15em;color:var(--fig-accent);margin-bottom:0.5rem}
.flow-step-title{font-family:'Syne',var(--font-sans,sans-serif);font-size:0.85rem;font-weight:700;color:var(--fig-ink);margin-bottom:0.35rem}
.flow-step-desc{font-size:0.7rem;color:var(--fig-muted);line-height:1.5}
@media(max-width:768px){.stat-banner{grid-template-columns:1fr}}
@media(max-width:600px){.metric-row{grid-template-columns:1fr}.process-flow{flex-direction:column}.flow-step{border-right:none;border-bottom:1px solid var(--fig-line)}.flow-step:last-child{border-bottom:none}}

.xsiftr{background:#eef2f5;border-top:1px solid rgba(20,40,55,.08);color:#4c5d69;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:13px;padding:56px 0 70px}
.xsiftr *{box-sizing:border-box}
.xsiftr-in{width:min(1240px,calc(100% - 48px));margin-inline:auto;display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(3,1fr);gap:36px}
.xsiftr h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#17242e;margin:0 0 15px;font-weight:700}
.xsiftr a{display:block;margin:8px 0;color:#4c5d69;text-decoration:none}
.xsiftr a:hover{color:#0b78a0}
.xsiftr-logo img{display:block;width:180px;height:auto;filter:drop-shadow(0 3px 8px rgba(10,25,35,.28))}
.xsiftr-slogan{margin:14px 0 0;color:#4c5d69}
.xsiftr-follow{margin:16px 0 0}
.xsiftr-follow>span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c8b96;margin-bottom:8px}
.xsiftr-social{display:flex;gap:16px}
.xsiftr-social a{display:inline-flex;margin:0;color:#4c5d69}
.xsiftr-social a:hover{color:#0b78a0}
.xsiftr-badges{display:flex;gap:26px;margin:16px 0 4px;align-items:center;flex-wrap:wrap;overflow:visible}
.xsiftr-badges img{display:block;height:40px;width:auto;margin:12px 0;filter:none}
.xsiftr-badges img.xsiftr-partner{height:48px}
.xsiftr-fine{font-size:12px;color:#7c8b96;margin:16px 0 0}
@media(max-width:900px){.xsiftr-in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.xsiftr-in{grid-template-columns:1fr}}