/* Okto Nexus - vs-conductor.html page-local components
   Everything here is scoped under body.vs-page (or a vs- prefixed class) so
   it cannot leak onto index.html or the use-case page. Reuses styles.css
   tokens (--violet/--violet-bright/--cyan/--green/--pink/--purple/--ink/
   --ink-soft/--ink-dim/--hair/--hair-bright/--radius/--radius-sm/--font-sans/
   --font-mono/--ease) and use-case.css's --amber, .uc-section scaffold,
   .hero__stats glass cards, .why-grid/.why-card, .walk-steps/.walk-step,
   .tools-table and the .glow-track pointer light rather than reinventing
   any of them. Nothing below duplicates a mechanism the rest of the site
   already runs; it only adds the shapes this comparison page needs. */

/* ---------- centered rhythm ----------
   This page departs from the use-case page's left-aligned .section__header
   convention on purpose: every eyebrow/heading/lede on vs-conductor.html is
   centered and width-capped, headlines short and bold, prose trimmed to
   scannable clauses. use-case.css's left-aligned defaults stay untouched
   for the use-case page itself; these overrides are scoped to body.vs-page. */
body.vs-page .section__header {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body.vs-page .section__header .tag { margin-left: auto; margin-right: auto; }
body.vs-page .section__title { max-width: 20ch; margin-left: auto; margin-right: auto; }
body.vs-page .section__lede { max-width: 62ch; margin-left: auto; margin-right: auto; text-align: center; }
/* This page's hero content (badges, title, lede, CTAs, stat bar) runs
   shorter than the schema-migration use-case page's (which also carries a
   large dashboard embed and genuinely needs a full-viewport fold), so
   reusing .uc-section--hero's forced 100svh min-height left the content
   stranded at the top with a large dead gap below it. Give it a shorter,
   fixed floor instead and center the content within that space, so the
   fold reads balanced rather than top-heavy, with real margin below the
   stat bar before the next section starts. */
body.vs-page .uc-section--hero {
  display: flex;
  align-items: center;
  min-height: min(82vh, 860px);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
body.vs-page .uc-section--hero .uc-section__inner { width: 100%; }
/* Wider than the other sections' 720px header cap specifically so the two
   product badge pills below can sit side by side on one line instead of
   wrapping into a lopsided stack. */
body.vs-page .uc-section--hero .section__header { max-width: 1180px; }
/* The two badge pills' combined natural width runs close to 1200px, so
   nowrap only holds up on genuinely wide viewports. Below that it wraps,
   the safe default, rather than overflowing past the edge of the page. */
body.vs-page .vs-badge-row { flex-wrap: wrap; }
@media (min-width: 1800px) {
  body.vs-page .vs-badge-row { flex-wrap: nowrap; }
  body.vs-page .vs-badge-row .vs-merged-badge { flex-shrink: 0; }
}
body.vs-page .uc-section--hero .section__title { max-width: 17ch; font-size: clamp(2.7rem, 5.6vw, 5.6rem); }
body.vs-page .uc-section--hero .section__title > span { display: block; }
body.vs-page .uc-section--hero .section__title > em {
  display: block;
  margin-top: 0.3rem;
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  font-weight: 500;
  line-height: 1.3;
  /* This is a full descriptive sentence, not a short 2-4 word accent phrase
     like the site's other gradient-clip headline treatments. That low-
     contrast gradient reads fine for a short phrase but becomes hard to
     read at sentence length, so drop the gradient-clip here for a solid,
     higher-contrast color instead. */
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--ink-soft);
}
body.vs-page .uc-section--hero .section__lede { max-width: 64ch; text-align: center; }
body.vs-page .hero__meta { justify-content: center; }
body.vs-page .vs-badge-row { justify-content: center; }
body.vs-page .vs-hero__actions { justify-content: center; }
body.vs-page .vs-tldr { max-width: 720px; margin-left: auto; margin-right: auto; }
body.vs-page .vs-tldr__eyebrow { justify-content: center; display: flex; }
body.vs-page .vs-workflow-title,
body.vs-page .vs-short-version { text-align: center; margin-left: auto; margin-right: auto; }
body.vs-page .vs-legend { justify-content: center; text-align: left; }

/* Grid-based content blocks stay left-aligned inside their own cells (multi-
   line prose/lists read better ragged-left) but the grid itself is capped
   and centered so it doesn't run edge-to-edge on wide viewports. */
body.vs-page .vs-explainer,
body.vs-page .vs-workflow-grid,
body.vs-page .vs-scenario-grid,
body.vs-page .vs-fit-grid {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- stat strip: single centered bar, not four stretched glass cards ---------- */
body.vs-page .hero__stats {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  /* Extra breathing room below the stat bar before the next section starts.
     The hero section's own padding-bottom alone read as too tight once
     the stat bar sits this close to the fold's edge. */
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(9, 10, 23, 0.5);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: hidden;
  gap: 0;
}
body.vs-page .hero__stats div {
  border: none;
  border-radius: 0;
  border-left: 1px solid var(--hair);
  background: none;
  text-align: center;
}
body.vs-page .hero__stats div:first-child { border-left: none; }
body.vs-page .hero__stats div:hover { background: rgba(255, 255, 255, 0.03); transform: none; }
@media (max-width: 720px) {
  body.vs-page .hero__stats div:nth-child(3) { border-left: none; }
  body.vs-page .hero__stats div:nth-child(3), body.vs-page .hero__stats div:nth-child(4) { border-top: 1px solid var(--hair); }
}

/* ---------- final CTA: same centered rhythm as the rest of the page ---------- */
body.vs-page .final-cta {
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.vs-page .final-cta h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
body.vs-page .final-cta__actions { justify-content: center; }

/* ---------- shared hover treatment for every vs- card-like component ---------- */
.vs-explainer__card,
.vs-widget,
.vs-panel,
.vs-scenario-card,
.vs-kg-card,
.vs-fit-card,
.vs-tldr {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(12, 12, 27, 0.9), rgba(5, 6, 14, 0.88));
  transition: transform 260ms var(--ease), border-color 240ms ease, box-shadow 280ms ease;
}
.vs-explainer__card:hover,
.vs-widget:hover,
.vs-panel:hover,
.vs-scenario-card:hover,
.vs-kg-card:hover,
.vs-fit-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--vs-accent, var(--violet-bright)) 45%, var(--hair-bright));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), inset 0 0 0 1px color-mix(in srgb, var(--vs-accent, var(--violet-bright)) 18%, transparent);
}

/* pointer-tracked glow overlay, keyed off each card's own accent - same
   .glow-track mechanic script.js already runs for .risk-card/.agent-card/
   .why-card, just extended to this page's own component classes */
.vs-explainer__card,
.vs-widget,
.vs-panel,
.vs-scenario-card,
.vs-kg-card,
.vs-fit-card,
.vs-tldr {
  position: relative;
  overflow: hidden;
}
.vs-explainer__card::before,
.vs-widget::before,
.vs-panel::before,
.vs-scenario-card::before,
.vs-kg-card::before,
.vs-fit-card::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--vs-accent, var(--violet-bright)) 16%, transparent), transparent 58%);
  content: "";
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.vs-explainer__card:hover::before,
.vs-widget:hover::before,
.vs-panel:hover::before,
.vs-scenario-card:hover::before,
.vs-kg-card:hover::before,
.vs-fit-card:hover::before {
  opacity: 1;
}

/* ---------- merged badge: product name + facts, split pill ---------- */
.vs-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
.vs-merged-badge {
  --vs-accent: var(--violet-bright);
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--hair-bright);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.vs-merged-badge--dim { --vs-accent: var(--ink-dim); }
.vs-merged-badge__left {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  color: var(--vs-accent);
  background: color-mix(in srgb, var(--vs-accent) 12%, transparent);
  font-weight: 500;
  white-space: nowrap;
}
.vs-merged-badge__divider { width: 1px; background: var(--hair-bright); }
.vs-merged-badge__right {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  color: var(--ink-dim);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}
.vs-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--vs-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--vs-accent) 70%, transparent);
}
@media (max-width: 620px) {
  .vs-merged-badge { flex-direction: column; border-radius: var(--radius-sm); }
  .vs-merged-badge__divider { width: 100%; height: 1px; }
  .vs-merged-badge__left, .vs-merged-badge__right { white-space: normal; }
}

/* ---------- hero actions ---------- */
.vs-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

/* ---------- TL;DR callout ---------- */
.vs-tldr {
  --vs-accent: var(--violet-bright);
  position: relative;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  overflow: hidden;
}
.vs-tldr::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at 8% 0%, rgba(119, 101, 255, 0.14), transparent 55%);
  content: "";
  pointer-events: none;
}
.vs-tldr__eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--violet-bright);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vs-tldr p {
  position: relative;
  max-width: 78ch;
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.68;
}
.vs-tldr p:first-of-type { margin-top: 0.95rem; }
.vs-tldr p strong { color: var(--ink); font-weight: 500; }

/* ---------- explainer cards (section 01) ---------- */
.vs-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.vs-explainer__card {
  --vs-accent: var(--ink-dim);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
}
.vs-explainer__card--nexus { --vs-accent: var(--violet-bright); }
.vs-explainer__card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.vs-explainer__card h3 i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--vs-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--vs-accent) 70%, transparent);
}
.vs-explainer__card p {
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.87rem;
  line-height: 1.68;
}
.vs-explainer__card .terminal { margin-top: 1.1rem; }
.vs-explainer__list { margin: 0.85rem 0 0; padding: 0; list-style: none; }
.vs-explainer__list li {
  position: relative;
  margin-top: 0.5rem;
  padding-left: 1rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}
.vs-explainer__list li::before {
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vs-accent);
  content: "";
}
.vs-explainer__list code { color: var(--ink); font-family: var(--font-mono); font-size: 0.85em; }
.vs-short-version {
  max-width: 74ch;
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--hair);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.7;
  text-align: center;
}
.vs-short-version strong { color: var(--ink); font-weight: 500; }

/* ---------- workflow shape: code list + numbered step flow ---------- */
.vs-workflow-title {
  margin-top: clamp(2.4rem, 4vw, 3.2rem);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
}
.vs-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: 1.1rem;
}
.vs-workflow-col {
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: rgba(9, 10, 23, 0.4);
}
.vs-workflow-col h4 {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs-code-list { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-top: 0.9rem; }
.vs-code-list code {
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--hair-bright);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--violet-bright);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.vs-steps { position: relative; display: flex; flex-wrap: nowrap; gap: clamp(0.3rem, 0.9vw, 0.5rem); margin-top: 0.9rem; }
.vs-steps::before {
  position: absolute;
  left: 16px; right: 16px; top: 50%;
  height: 1px;
  background: var(--hair-bright);
  content: "";
  z-index: 0;
}
.vs-steps__pulse {
  position: absolute;
  top: 50%; left: 16px;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 8px rgba(48, 215, 255, 0.85);
  animation: vs-steps-flow 3.6s linear infinite;
  z-index: 0;
}
@keyframes vs-steps-flow {
  0% { left: 16px; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 16px); opacity: 0; }
}
.vs-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 0;
  /* Flex items default to min-width: auto, which refuses to shrink below
     the label's nowrap text width. With 6 items in a narrow column that
     overflowed the pill past its own box and into the column next to it.
     min-width: 0 lets flex-shrink actually do its job; dropping nowrap lets
     a long label ("Merge & archive") wrap onto two lines instead. */
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.35rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: rgba(5, 6, 14, 0.86);
  text-align: center;
  transition: transform 220ms var(--ease), border-color 220ms ease;
  white-space: normal;
}
.vs-step:hover { transform: translateY(-2px); border-color: rgba(48, 215, 255, 0.4); }
.vs-step__num { font-family: var(--font-mono); font-size: 0.56rem; color: var(--cyan); }
.vs-step__label { font-size: 0.66rem; font-weight: 500; color: var(--ink); }
@media (max-width: 720px) {
  .vs-workflow-grid { grid-template-columns: 1fr; }
  .vs-steps::before, .vs-steps__pulse { display: none; }
  .vs-steps { flex-wrap: wrap; }
  .vs-step { flex: 1 1 calc(33% - 0.5rem); }
}
@media (prefers-reduced-motion: reduce) {
  .vs-steps__pulse { display: none; }
}

/* ---------- vs-widget: mini product mockup ---------- */
.vs-widget {
  max-width: 720px;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.vs-widget__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--hair);
}
.vs-widget__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex-shrink: 0;
  padding: 5px;
  border: 1px solid var(--hair-bright);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
}
.vs-widget__mark img { width: 100%; height: 100%; }
.vs-widget__title { color: var(--ink); font-size: 0.9rem; font-weight: 500; }
.vs-widget__sub { margin-top: 1px; color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.62rem; }
.vs-widget__badge {
  margin-left: auto;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  white-space: nowrap;
}
.vs-widget__rows { padding: 0.3rem 0; }
.vs-widget__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem;
}
.vs-widget__row-label { color: var(--ink-soft); }
.vs-widget__row-label code { font-family: var(--font-mono); font-size: 0.86em; color: var(--ink-soft); }
.vs-widget__row-meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.68rem; white-space: nowrap; }
.vs-widget__row-meta.is-pass { color: var(--green); }
.vs-widget__row-meta.is-warn { color: var(--amber); }
.vs-widget__foot {
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--hair);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.62rem;
}
html.js-reveal .vs-widget__row { opacity: 0; transform: translateY(6px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); }
html.js-reveal .vs-widget.is-in .vs-widget__row { opacity: 1; transform: none; }
html.js-reveal .vs-widget.is-in .vs-widget__row:nth-child(1) { transition-delay: 90ms; }
html.js-reveal .vs-widget.is-in .vs-widget__row:nth-child(2) { transition-delay: 220ms; }
html.js-reveal .vs-widget.is-in .vs-widget__row:nth-child(3) { transition-delay: 350ms; }

/* ---------- vs-panel: 4-cell governance facts ---------- */
.vs-panel {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  overflow: hidden;
}
.vs-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--hair);
}
.vs-panel__head h3 { color: var(--ink); font-size: 0.88rem; font-weight: 500; }
.vs-panel__head span { color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.6rem; }
.vs-panel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vs-panel__cell { padding: 1.1rem 1.2rem; border-left: 1px solid var(--hair); }
.vs-panel__cell:first-child { border-left: none; }
.vs-panel__cell-label { color: var(--ink-dim); font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; }
.vs-panel__cell-value { margin-top: 0.4rem; color: var(--ink); font-size: 1.15rem; font-weight: 500; }
.vs-panel__cell-note { margin-top: 0.35rem; color: var(--ink-soft); font-size: 0.72rem; line-height: 1.5; }
html.js-reveal .vs-panel__cell { opacity: 0; transform: translateY(6px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); }
html.js-reveal .vs-panel.is-in .vs-panel__cell { opacity: 1; transform: none; }
html.js-reveal .vs-panel.is-in .vs-panel__cell:nth-child(1) { transition-delay: 70ms; }
html.js-reveal .vs-panel.is-in .vs-panel__cell:nth-child(2) { transition-delay: 180ms; }
html.js-reveal .vs-panel.is-in .vs-panel__cell:nth-child(3) { transition-delay: 290ms; }
html.js-reveal .vs-panel.is-in .vs-panel__cell:nth-child(4) { transition-delay: 400ms; }
@media (max-width: 760px) {
  .vs-panel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs-panel__cell:nth-child(3) { border-left: none; }
  .vs-panel__cell:nth-child(3), .vs-panel__cell:nth-child(4) { border-top: 1px solid var(--hair); }
}

/* ---------- vs-kg-card: relationship rows ---------- */
.vs-kg-card {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.vs-kg-edge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.vs-kg-edge b { color: var(--ink); font-weight: 500; }
.vs-kg-edge__rel { color: var(--cyan); }
.vs-kg-edge__arrow { color: var(--ink-dim); }

/* ---------- section 02 two-up scenario cards ---------- */
.vs-scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}
.vs-scenario-card {
  --vs-accent: var(--amber);
  overflow: hidden;
}
.vs-scenario-card--ok { --vs-accent: var(--green); }
.vs-scenario-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
}
.vs-scenario-card__body { padding: 1rem 1.1rem 1.2rem; font-family: var(--font-mono); font-size: 0.76rem; }
.vs-scenario-card__comment { color: var(--ink-dim); margin-bottom: 0.55rem; }
.vs-scenario-card__call { color: var(--vs-accent); margin-bottom: 0.85rem; word-break: break-word; }
.vs-scenario-card__result {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--hair);
  font-size: 0.72rem;
}
.vs-scenario-card__result:last-of-type { border-bottom: 1px solid var(--hair); margin-bottom: 0.8rem; }
.vs-scenario-card__result-tag { color: var(--vs-accent); }
.vs-scenario-card__note { font-family: var(--font-sans); color: var(--ink-soft); font-size: 0.76rem; line-height: 1.6; }

/* ---------- legend ---------- */
.vs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2.2rem;
  margin-top: clamp(1.4rem, 2.6vw, 2rem);
}
.vs-legend__item { display: flex; flex-direction: column; gap: 0.3rem; max-width: 300px; }
.vs-legend__def { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.55; }

/* ---------- native/partial/none badge ---------- */
.vs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vs-badge__dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.vs-badge--native { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.vs-badge--native .vs-badge__dot { background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 70%, transparent); }
.vs-badge--partial { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.vs-badge--partial .vs-badge__dot { background: var(--amber); box-shadow: 0 0 6px color-mix(in srgb, var(--amber) 70%, transparent); }
.vs-badge--none { color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, transparent); }
.vs-badge--none .vs-badge__dot { background: var(--pink); box-shadow: 0 0 6px color-mix(in srgb, var(--pink) 70%, transparent); }

/* ---------- comparison table ---------- */
.vs-compare-table { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
.vs-compare-table table { min-width: 780px; }
.vs-compare-table th:first-child, .vs-compare-table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.vs-compare-table td { vertical-align: top; }
.vs-compare-table td.vs-cell { min-width: 260px; }
.vs-compare-table td.vs-cell p { margin-top: 0.4rem; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.55; }
.vs-compare-table tr.vs-band td {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-table-note { max-width: 74ch; margin-top: 1rem; color: var(--ink-dim); font-size: 0.72rem; line-height: 1.6; }

/* ---------- agent chips ---------- */
.vs-agent-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vs-agent-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-dim);
  font-size: 0.72rem;
  transition: border-color 200ms ease, color 200ms ease;
}
.vs-agent-chip:hover { color: var(--ink); border-color: rgba(119, 101, 255, 0.4); }

/* ---------- best-fit 3-card grid ---------- */
.vs-fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.vs-fit-card { --vs-accent: var(--violet-bright); padding: clamp(1.3rem, 2vw, 1.7rem); }
.vs-fit-card--nexus { --vs-accent: var(--green); }
.vs-fit-card--both { --vs-accent: var(--cyan); }
.vs-fit-card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--vs-accent);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vs-fit-card h3 { margin-top: 0.7rem; color: var(--ink); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; }
.vs-fit-card p { margin-top: 0.7rem; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.62; }

/* ---------- FAQ: reuses .walk-steps / .walk-step verbatim (see use-case.css);
   only the numeral prefix ("Q" instead of "STAGE") is overridden here. ---------- */
.vs-faq .walk-step__num { color: var(--violet-bright); }
.vs-faq .walk-step__num strong { color: var(--violet-bright); }
body.vs-page .vs-faq {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  gap: 1.6rem;
}

/* ---------- attribution footer ---------- */
.vs-attribution {
  max-width: 78ch;
  margin: clamp(1.6rem, 3vw, 2.2rem) auto 0;
  color: var(--ink-dim);
  font-size: 0.68rem;
  line-height: 1.65;
  text-align: center;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .vs-explainer, .vs-scenario-grid { grid-template-columns: 1fr; }
  .vs-fit-grid { grid-template-columns: 1fr; }
}