/* ================================================================
   CASE STUDY COMPONENTS (legacy)
   Generated by scripts/extract-legacy-css.mjs from the original site.
   Styles the migrated case-study HTML. Old token names are mapped onto
   the new semantic tokens in css/app.css, so both themes apply.
   Nov 10: harmonized with the AAR case study (brand purple accents, card
   surfaces, Lato labels instead of monospace, AAR corner radii).
   ================================================================ */

:root {
  --bg-base: var(--surface-2);
  --bg-window: var(--surface);
  --bg-elevated: var(--surface);    /* cards on the page surface, like AAR */
  --bg-panel: var(--surface);
  --bg-hover: var(--surface-3);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--text-3);
  --border-light: var(--border-strong);
  --border-mid: var(--border);
  --border-dark: var(--border-strong);
  --accent-interactive: var(--accent);   /* brand purple, like AAR */
  --accent-focus: var(--accent);
  --bevel-outer-light: var(--border);
  --bevel-outer-dark: var(--border-strong);
  --font-system: var(--font-sans);
  --font-size-title: 1.125rem;
  --font-size-body: 0.9375rem;
  --font-size-meta: 0.875rem;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
}

/* ================================================================
   CASE STUDY
   ================================================================ */

.case-study {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow-y: auto;
  height: 100%;
  box-sizing: border-box;
}

.case-study-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-mid);
}

.case-study-title {
  font-family: var(--font-system);
  font-size: var(--font-size-title);
  color: var(--text-primary);
  margin: 0;
  font-weight: 700;
}

.case-study-meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.case-study-meta li {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
}

.meta-key {
  color: var(--text-muted);
  margin-right: 4px;
}

.case-study-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-study-section + .case-study-section {
  border-top: 1px solid var(--border-accent);
  padding-top: var(--space-3);
}


.case-study-placeholder {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  margin: 0;
  font-style: italic;
}

.case-study-process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.case-study-process li {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  padding: 2px var(--space-2);
  counter-increment: step;
}

.case-study-process li::before {
  content: counter(step) ". ";
  color: var(--text-muted);
}

.case-study-process {
  counter-reset: step;
}

.case-study-section p {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.6;
}

.case-study-section p:last-child {
  margin-bottom: 0;
}

.case-study-section h3 {
  font-family: var(--font-system);
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  margin: var(--space-1) 0 4px 0;
  text-transform: none;
  letter-spacing: 0;
}

.case-study-section h3:first-child,
.case-study-section h2 + h3 {
  margin-top: 0;
}

.case-study-problems {
  margin: var(--space-1) 0 0 0;
  padding-left: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-study-problems li {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  line-height: 1.5;
}

.case-study-decisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-decision {
  border-left: 2px solid var(--accent-interactive);
  padding-left: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.case-decision h3 {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.case-decision p {
  margin: 0 !important;
}

.case-study-quote {
  margin: var(--space-2) 0;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--accent-interactive);
  background: var(--bg-elevated);
  border-radius: 0 2px 2px 0;
}

.case-study-quote p {
  font-family: var(--font-system);
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  font-style: italic;
  margin: 0 0 4px 0 !important;
  line-height: 1.5;
}

.case-study-quote cite {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  font-style: normal;
}


/* ================================================================
   CASE STUDY PROBLEM DIAGRAM
   Before-state system diagram used in project sections.
   ================================================================ */

.cs-problem-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

.cs-problem-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  overflow: visible;
}

.cs-problem-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  text-align: center;
  max-width: 56ch;
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}


/* ================================================================
   CASE STUDY CONSTRAINTS CARDS
   ================================================================ */

.cs-constraints {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-constraints-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-constraints .cs-constraints-title {
  font-family: var(--font-system);
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  margin: 0 0 4px 0;
  text-transform: none;
  letter-spacing: 0;
}

.cs-constraints-intro {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-constraints-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-accent);
}

.cs-constraint-row {
  display: grid;
  grid-template-columns: 72px 140px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-accent);
}

.cs-cr-label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-cr-value {
  font-family: var(--font-system);
  font-size: 16.25px;
  font-weight: 700;
  color: var(--text-primary);
}

.cs-cr-desc {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .cs-constraint-row {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }

  .cs-cr-desc {
    grid-column: 2;
    margin-top: 2px;
  }
}

/* ── System Architecture ─────────────────────────────── */
.cs-arch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-arch-diagram {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-base);
}

/* Actors */
.cs-arch-actor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) 12px;
  min-width: 96px;
  max-width: 120px;
  text-align: center;
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.cs-arch-actor-label {
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.03em;
}

.cs-arch-actor-desc {
  font-family: var(--font-system);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Connectors */
.cs-arch-connectors {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: var(--space-1) 8px;
  flex-shrink: 0;
}

.cs-arch-connector {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.cs-arch-connector-label {
  font-family: var(--font-system);
  font-size: 10.75px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.cs-arch-connector-arrow {
  font-size: 15.5px;
  line-height: 1;
  color: var(--accent-focus);
}

.cs-arch-connector--rev .cs-arch-connector-label {
  color: var(--text-muted);
}

.cs-arch-connector--rev .cs-arch-connector-arrow {
  color: var(--accent-2-text);
}

/* Core System */
.cs-arch-system {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-2);
  border-left: 2px solid var(--accent-interactive);
  border-right: 2px solid var(--accent-interactive);
  background: color-mix(in srgb, var(--accent-interactive) 6%, var(--bg-window));
}

.cs-arch-system-label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  text-align: center;
}

.cs-arch-modules {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-arch-module {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--bg-elevated);
  border-left: 2px solid var(--accent-interactive);
  border-radius: var(--radius-sm);
}

.cs-arch-module-name {
  font-family: var(--font-system);
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-arch-module-desc {
  font-family: var(--font-system);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Caption */
.cs-arch-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* Mobile: stack vertically */
@media (max-width: 560px) {
  .cs-arch-diagram {
    flex-direction: column;
  }

  .cs-arch-actor {
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 12px;
  }

  .cs-arch-connectors {
    flex-direction: row;
    padding: 6px var(--space-1);
    gap: var(--space-2);
  }

  .cs-arch-system {
    border-left: none;
    border-right: none;
    border-top: 2px solid var(--accent-interactive);
    border-bottom: 2px solid var(--accent-interactive);
  }
}

/* ── Key Decisions Editorial ─────────────────────────── */
.cs-kd {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-kd-rule {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: var(--space-4) 0;
}

.cs-kd-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-kd-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}


.cs-kd-num {
  font-size: 61.5px;
  font-weight: 100;
  line-height: 0.9;
  color: var(--accent-interactive);
  opacity: 0.75;
  font-family: var(--font-sans);
  letter-spacing: 0;
  flex-shrink: 0;
  margin-top: -4px;
}

.cs-kd-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0;
  padding-top: 6px;
}

.cs-kd-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  padding-left: calc(56px + var(--space-2));
}


.cs-kd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-kd-flabel {
  font-size: 10.75px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: var(--font-sans);
  font-weight: 700;
}

.cs-kd-ftext {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.cs-kd-field--tradeoff .cs-kd-flabel {
  color: var(--accent-focus);
}

.cs-kd-field--tradeoff .cs-kd-ftext {
  font-style: italic;
}

.cs-kd-field--impact .cs-kd-flabel {
  color: var(--accent-focus);
}

@media (max-width: 560px) {
  .cs-kd-fields {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .cs-kd-num {
    font-size: 44px;
  }

  .cs-kd-title {
    font-size: 18.75px;
  }
}

/* ══ Key Product Decisions ══════════════════════════════════════ */
.cs-kpd {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-kpd-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-kpd-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-kpd-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-kpd-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-kpd-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cs-kpd-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.3);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
}

.cs-kpd-panel-head {
  padding: 14px var(--space-2) 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-kpd-panel-num {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.65);
}

.cs-kpd-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.cs-kpd-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-kpd-row {
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-kpd-row:last-child {
  border-bottom: none;
}

.cs-kpd-row--decision {
  background: rgba(139, 92, 200, 0.05);
}

.cs-kpd-row--impact {
  background: rgba(139, 92, 200, 0.07);
}

.cs-kpd-row-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-kpd-row--decision .cs-kpd-row-label {
  color: rgba(154, 123, 255, 0.85);
}

.cs-kpd-row--impact .cs-kpd-row-label {
  color: rgba(199, 184, 255, 0.85);
}

.cs-kpd-row-text {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.cs-kpd-row--impact .cs-kpd-row-text {
  color: var(--text-primary);
}

@media (max-width: 680px) {
  .cs-kpd-panels {
    grid-template-columns: 1fr;
  }
}

/* ══ Design Execution (cs-de) ═══════════════════════════════════ */
.cs-de {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-de-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-de-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-de-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-de-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-de-areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Area card */
.cs-de-area {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.22);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-de-area--hero {
  border-top-color: rgba(139, 92, 200, 0.5);
}

/* Area header */
.cs-de-area-meta {
  padding: 14px var(--space-2) 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-de-area--hero .cs-de-area-meta {
  background: rgba(139, 92, 200, 0.03);
}

.cs-de-area-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cs-de-area-num {
  font-size: 16.25px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  min-width: 20px;
  padding-top: 2px;
  flex-shrink: 0;
}

.cs-de-area-title {
  font-size: 16.25px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.cs-de-area-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 3px 0 0;
  font-family: var(--font-sans);
}

.cs-de-area-insight {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  padding-left: 32px;
}

/* Area body layout */
.cs-de-area-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.cs-de-body--lineup {
  grid-template-columns: 1.6fr 1fr;
}

.cs-de-body--part {
  grid-template-columns: 1fr 1.2fr;
}

/* Screen pane */
.cs-de-screen {
  padding: var(--space-2);
  border-right: 1px solid var(--border-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-de-screen img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.cs-de-body--part .cs-de-screen {
  border-right: none;
  border-left: 1px solid var(--border-mid);
}

/* Annotations pane */
.cs-de-anns {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.cs-de-anns--lineup {
  gap: 12px;
}

.cs-de-ann {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.cs-de-ann-marker {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(139, 92, 200, 0.45);
  border: 1px solid rgba(139, 92, 200, 0.25);
  flex-shrink: 0;
  margin-top: 4px;
}

.cs-de-ann-label {
  display: block;
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.85);
  margin-bottom: 3px;
}

.cs-de-ann-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Team Home mockup ─────────── */
.cs-de-home {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-de-home-nav {
  display: flex;
  border-bottom: 1px solid var(--border-mid);
  padding: 0 6px;
}

.cs-de-home-nav-tab {
  padding: 7px 9px;
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.cs-de-home-nav-tab--active {
  color: var(--text-primary);
  border-bottom-color: rgba(139, 92, 200, 0.7);
}

.cs-de-home-game {
  padding: 10px 12px;
  background: rgba(139, 92, 200, 0.06);
  border-bottom: 1px solid var(--border-mid);
}

.cs-de-home-game-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(154, 123, 255, 0.7);
  margin-bottom: 5px;
}

.cs-de-home-game-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 9px;
}

.cs-de-home-game-opp {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-de-home-game-time {
  font-size: 10.75px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.cs-de-home-game-actions {
  display: flex;
  gap: 5px;
}

.cs-de-home-game-btn {
  padding: 4px 9px;
  font-size: 10.25px;
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
}

.cs-de-home-game-btn--primary {
  background: rgba(139, 92, 200, 0.18);
  border-color: rgba(139, 92, 200, 0.35);
  color: rgba(199, 184, 255, 0.9);
}

.cs-de-home-modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.cs-de-home-mod {
  padding: 9px 12px;
  border-right: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-de-home-mod:last-child { border-right: none; }

.cs-de-home-mod-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.cs-de-home-mod-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Lineup mockup ────────────── */
.cs-de-lu {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-de-lu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-de-lu-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.cs-de-lu-meta {
  font-size: 10.25px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.cs-de-lu-inning-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 6px 12px 4px;
  background: rgba(11, 11, 18, 0.5);
}

.cs-de-lu-rows {
  display: flex;
  flex-direction: column;
}

.cs-de-lu-row {
  display: grid;
  grid-template-columns: 22px 1fr 28px 12px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(38, 41, 65, 0.7);
}

.cs-de-lu-row:last-child { border-bottom: none; }
.cs-de-lu-row--bench    { opacity: 0.6; }

.cs-de-lu-num {
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: rgba(154, 123, 255, 0.7);
  text-align: right;
}

.cs-de-lu-num--bench {
  color: var(--text-muted);
  font-weight: 400;
}

.cs-de-lu-player { font-size: 12px; color: var(--text-primary); }

.cs-de-lu-pos {
  font-size: 10.25px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-align: right;
}

.cs-de-lu-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  justify-self: center;
}

.cs-de-lu-status--active { background: rgba(72, 187, 120, 0.7); }
.cs-de-lu-status--sub    { background: rgba(246, 173, 85, 0.7); }
.cs-de-lu-status--bench  { background: var(--border-light); }

.cs-de-lu-bench { border-top: 1px solid var(--border-mid); }

/* ── Participation mockup ─────── */
.cs-de-part {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-de-part-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-de-part-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(139, 92, 200, 0.12);
  border: 1px solid rgba(139, 92, 200, 0.28);
  flex-shrink: 0;
}

.cs-de-part-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-de-part-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-de-part-role {
  font-size: 10.25px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}

.cs-de-part-badge {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-sans);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  flex-shrink: 0;
}

.cs-de-part-badge--active {
  background: rgba(72, 187, 120, 0.1);
  color: rgba(72, 187, 120, 0.82);
  border: 1px solid rgba(72, 187, 120, 0.2);
}

.cs-de-part-group {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cs-de-part-group:last-child { border-bottom: none; }

.cs-de-part-group-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.65);
}

.cs-de-part-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.cs-de-part-field-label {
  font-size: 10.75px;
  color: var(--text-muted);
}

.cs-de-part-toggle {
  display: flex;
  gap: 2px;
}

.cs-de-part-toggle-opt {
  font-size: 9.5px;
  padding: 3px 6px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font-sans);
  white-space: nowrap;
}

.cs-de-part-toggle-opt--on {
  background: rgba(72, 187, 120, 0.1);
  border-color: rgba(72, 187, 120, 0.25);
  color: rgba(72, 187, 120, 0.82);
}

.cs-de-part-val {
  font-size: 10.75px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

.cs-de-part-val--confirmed { color: rgba(72, 187, 120, 0.78); }
.cs-de-part-val--muted     { color: var(--text-muted); }

@media (max-width: 680px) {
  .cs-de-area-body,
  .cs-de-body--lineup,
  .cs-de-body--part {
    grid-template-columns: 1fr;
  }
  .cs-de-screen {
    border-right: none;
    border-bottom: 1px solid var(--border-mid);
  }
  .cs-de-body--part .cs-de-screen {
    border-left: none;
    border-top: 1px solid var(--border-mid);
    order: 2;
  }
  .cs-de-body--part .cs-de-anns {
    order: 1;
  }
}

/* ══ Equity Map (cs-em) ═════════════════════════════════════════ */
.cs-em {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-em-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-em-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-em-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-em-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-em-views {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cs-em-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-em-view-label {
  font-size: 10.25px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.6);
}

.cs-em-img-frame {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.cs-em-img {
  width: 100%;
  height: auto;
  display: block;
}

.cs-em-onboarding {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.22);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-em-onb-copy {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.cs-em-onb-label {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.65);
}

.cs-em-onb-text {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-em-onb-points {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-em-onb-points li {
  font-size: 12px;
  color: var(--text-muted);
  padding-left: 14px;
  position: relative;
  line-height: 1.45;
}

.cs-em-onb-points li::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(139, 92, 200, 0.6);
  font-size: 16.25px;
  line-height: 1.2;
}

.cs-em-onb-screen {
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-mid);
}

.cs-em-popup-img {
  width: auto;
  max-width: 160px;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
}

@media (max-width: 680px) {
  .cs-em-views,
  .cs-em-onboarding { grid-template-columns: 1fr; }
  .cs-em-onb-screen { border-left: none; border-top: 1px solid var(--border-mid); }
}

/* ══ Validation & Iteration (cs-vi) ════════════════════════════ */
.cs-vi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-vi-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 600px;
}

.cs-vi-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(139, 92, 200, 0.75);
}

.cs-vi-title {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.cs-vi-desc {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

.cs-vi-findings {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-vi-finding {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.22);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-vi-finding-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px var(--space-2) 12px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-vi-finding-num {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  color: rgba(139, 92, 200, 0.6);
  min-width: 20px;
  padding-top: 2px;
  flex-shrink: 0;
}

.cs-vi-finding-title {
  font-size: 16.25px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.cs-vi-finding-body {
  display: block;
}

.cs-vi-rows {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-mid);
}

.cs-vi-row {
  padding: 10px var(--space-2);
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.cs-vi-row:last-child { border-bottom: none; }
.cs-vi-row--ref { background: rgba(139, 92, 200, 0.04); }

.cs-vi-row-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 62px;
  padding-top: 2px;
}

.cs-vi-row-label--friction { color: rgba(246, 173, 85, 0.8); }
.cs-vi-row-label--ref      { color: rgba(154, 123, 255, 0.85); }
.cs-vi-row-label--impact   { color: rgba(72, 187, 120, 0.8); }

.cs-vi-row-text {
  font-size: 13.25px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.cs-vi-callout {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.cs-vi-callout-tag {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(139, 92, 200, 0.6);
  border-top: 1px solid var(--border-mid);
  padding-top: 8px;
}

.cs-vi-mini-lu,
.cs-vi-mini-profile,
.cs-vi-mini-home {
  background: var(--bg-window);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 1;
}

.cs-vi-mini-row {
  display: grid;
  grid-template-columns: 18px 1fr 24px;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(38, 41, 65, 0.7);
}

.cs-vi-mini-row:last-child { border-bottom: none; }
.cs-vi-mini-row--dim { opacity: 0.5; }

.cs-vi-mini-num {
  font-family: var(--font-sans);
  font-weight: 700;
  color: rgba(154, 123, 255, 0.7);
  text-align: right;
  font-size: 10.25px;
}

.cs-vi-mini-name { font-size: 10.75px; color: var(--text-primary); }
.cs-vi-mini-pos  { font-size: 9.5px; color: var(--text-muted); font-family: var(--font-sans); text-align: right; }

.cs-vi-mini-profile-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-vi-mini-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(139, 92, 200, 0.15);
  border: 1px solid rgba(139, 92, 200, 0.25);
  flex-shrink: 0;
}

.cs-vi-mini-pname {
  display: block;
  font-size: 10.75px;
  font-weight: 600;
  color: var(--text-primary);
}

.cs-vi-mini-prole { font-size: 9.5px; color: var(--text-muted); font-family: var(--font-sans); }

.cs-vi-mini-group {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-vi-mini-glabel {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.6);
}

.cs-vi-mini-field {
  display: flex;
  justify-content: space-between;
  font-size: 10.25px;
  color: var(--text-muted);
}

.cs-vi-mini-val--on { color: rgba(72, 187, 120, 0.8); font-weight: 600; }

.cs-vi-mini-home-game {
  padding: 8px;
  background: rgba(139, 92, 200, 0.06);
  border-bottom: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-vi-mini-home-label {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(154, 123, 255, 0.65);
}

.cs-vi-mini-home-cta {
  font-size: 10.25px;
  font-family: var(--font-sans);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(139, 92, 200, 0.18);
  border: 1px solid rgba(139, 92, 200, 0.35);
  color: rgba(199, 184, 255, 0.9);
  display: inline-block;
  width: fit-content;
}

.cs-vi-mini-home-mods {
  display: flex;
  border-top: 1px solid var(--border-mid);
}

.cs-vi-mini-home-mods span {
  flex: 1;
  padding: 5px 8px;
  border-right: 1px solid var(--border-mid);
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-align: center;
}

.cs-vi-mini-home-mods span:last-child { border-right: none; }

@media (max-width: 680px) {
  .cs-vi-rows { border-right: none; border-bottom: 1px solid var(--border-mid); }
}

/* ── Speech Gym - Key Decisions & Tradeoffs ─────────── */
.cs-decisions-log {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-decision-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.cs-decision-entry + .cs-decision-entry {
  border-top: 1px solid var(--border-accent);
}

/* Scoped to avoid conflict with ONC .cs-de-header (flex-column) */
.cs-decision-entry .cs-de-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.cs-de-num {
  font-size: 61.5px;
  font-weight: 100;
  line-height: 0.9;
  color: var(--accent-interactive);
  opacity: 0.35;
  font-family: var(--font-sans);
  letter-spacing: 0;
  flex-shrink: 0;
  margin-top: -4px;
}

.cs-de-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0;
  padding-top: 6px;
}

.cs-de-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  padding-left: calc(56px + var(--space-2));
}

.cs-de-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-de-label {
  font-size: 10.75px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: var(--font-sans);
  font-weight: 700;
}

.cs-de-text {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.cs-de-field--tradeoff .cs-de-label {
  color: var(--accent-focus);
}

.cs-de-field--tradeoff .cs-de-text {
  font-style: italic;
}

.cs-de-field--impact .cs-de-label {
  color: var(--accent-focus);
}

/* ── Validation & Iteration (ONC) ───────────────────── */
.cs-vit {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-vit-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.cs-vit-intro {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-vit-finding {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) 0;
}

.cs-vit-finding + .cs-vit-finding {
  border-top: 1px solid var(--border-accent);
}

.cs-vit-finding--rev {
  flex-direction: row-reverse;
}

/* Image side */
.cs-vit-img-side {
  flex: 0 0 44%;
  position: relative;
  padding-top: 10px;
}

.cs-vit-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent-interactive);
  color: var(--bg-base);
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  z-index: 1;
  border-radius: var(--radius-sm);
}

.cs-vit-frame {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 12px rgba(154, 123, 255, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-vit-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text side */
.cs-vit-text-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.cs-vit-num {
  font-size: 48.5px;
  font-weight: 100;
  color: var(--accent-interactive);
  opacity: 0.72;
  font-family: var(--font-sans);
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: -6px;
}

.cs-vit-headline {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
  line-height: 1.25;
  margin: 0;
}

.cs-vit-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-vit-flabel {
  font-size: 10.75px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: var(--font-sans);
  font-weight: 700;
}

.cs-vit-ftext {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.cs-vit-field--friction .cs-vit-flabel { color: var(--text-muted); }
.cs-vit-field--friction .cs-vit-ftext  { color: var(--text-muted); font-style: italic; }
.cs-vit-field--impact .cs-vit-flabel   { color: var(--accent-focus); }

.cs-vit-pillar {
  font-size: 10.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-focus);
  font-family: var(--font-sans);
}

@media (max-width: 520px) {
  .cs-vit-finding,
  .cs-vit-finding--rev {
    flex-direction: column;
  }

  .cs-vit-img-side {
    flex: none;
    width: 100%;
  }
}


/* ── Design Execution Progression ───────────────────── */
.cs-de {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-de-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-de-intro {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-de-rows {
  display: flex;
  flex-direction: column;
}

.cs-de-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.cs-de-row + .cs-de-row {
  border-top: 1px solid var(--border-accent);
}

.cs-de-row-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-de-row-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  font-family: var(--font-sans);
}

.cs-de-row-desc {
  font-size: 13.75px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Three-stage progression row */
.cs-de-stages {
  display: flex;
  align-items: flex-start;
}

.cs-de-stage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.cs-de-stage-label {
  font-size: 10.75px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
  font-weight: 700;
}

.cs-de-stage--existing .cs-de-stage-label  { color: var(--text-muted); }
.cs-de-stage--wireframe .cs-de-stage-label { color: var(--text-secondary); }
.cs-de-stage--hifi .cs-de-stage-label      { color: var(--accent-focus); }

.cs-de-stage-frame {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-de-stage--existing .cs-de-stage-frame {
  border: 1px solid var(--border-mid);
  opacity: 0.55;
  filter: grayscale(30%);
}

.cs-de-stage--wireframe .cs-de-stage-frame {
  border: 1px dashed var(--border-light);
}

.cs-de-stage--hifi .cs-de-stage-frame {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 10px rgba(154, 123, 255, 0.15);
}

.cs-de-stage-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Placeholder shown before real images are inserted */
.cs-de-placeholder {
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  font-size: 9.5px;
  color: var(--border-light);
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Arrow connector - offset by label height so it meets the frame */
.cs-de-connector {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 17px 5px 0;
  color: var(--accent-interactive);
  opacity: 0.4;
}

.cs-de-connector svg {
  display: block;
}

.cs-de-caption {
  font-size: 13.75px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-mid);
}

@media (max-width: 520px) {
  .cs-de-stages {
    flex-direction: column;
    gap: var(--space-2);
  }

  .cs-de-connector {
    flex-direction: row;
    padding: 0;
    transform: rotate(90deg);
    align-self: center;
  }

}

/* ── Workflow Transformation ─────────────────────────── */
.cs-workflow {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-wf-divider {
  background: var(--border-accent);
  align-self: stretch;
  min-height: 80px;
}

.cs-wf-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-wf-title {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
  color: var(--text-muted);
}

.cs-wf-col--after .cs-wf-title {
  color: var(--accent-focus);
}

.cs-wf-steps {
  display: flex;
  flex-direction: column;
}

.cs-wf-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cs-wf-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
  align-self: stretch;
}

.cs-wf-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-system);
  font-size: 10.75px;
  font-weight: 700;
  flex-shrink: 0;
}

.cs-wf-col--before .cs-wf-num {
  border: 1px solid var(--accent-interactive);
  color: var(--text-muted);
  background: transparent;
}

.cs-wf-col--after .cs-wf-num {
  background: var(--accent-interactive);
  color: var(--bg-base);
}

.cs-wf-line {
  width: 1px;
  min-height: 8px;
  flex: 1;
  margin: 2px 0;
}

.cs-wf-col--before .cs-wf-line {
  border-left: 1px dotted var(--accent-interactive);
}

.cs-wf-col--after .cs-wf-line {
  border-left: 1px solid var(--accent-interactive);
}

.cs-wf-text {
  font-family: var(--font-system);
  font-size: 13.75px;
  line-height: 1.4;
  padding: 2px 0 8px;
}

.cs-wf-col--before .cs-wf-text {
  color: var(--text-muted);
}

.cs-wf-col--after .cs-wf-text {
  color: var(--text-secondary);
}

.cs-wf-label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

.cs-wf-col--before .cs-wf-label {
  color: var(--accent-focus);
}

.cs-wf-col--after .cs-wf-label {
  color: var(--accent-focus);
}

.cs-workflow-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .cs-workflow-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .cs-wf-divider {
    display: none;
  }

  .cs-wf-col--after {
    border-top: 1px solid var(--border-accent);
    padding-top: var(--space-2);
  }
}

/* ── Design Execution ────────────────────────────────── */
.cs-exec {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-exec-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-exec-row-label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  margin: 0;
}

.cs-exec-stages {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cs-exec-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.cs-exec-stage--hifi {
  flex: 1;
}

.cs-exec-img-wrap {
  width: 100%;
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
}

.cs-exec-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cs-exec-stage--sketch .cs-exec-img-wrap {
  opacity: 0.55;
  filter: grayscale(30%);
  border: 1px solid var(--border-mid);
}

.cs-exec-stage--mid .cs-exec-img-wrap {
  opacity: 0.8;
  border: 1px solid var(--border-light);
}

.cs-exec-stage--hifi .cs-exec-img-wrap {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-interactive) 30%, transparent),
              0 4px 16px color-mix(in srgb, var(--accent-interactive) 15%, transparent);
}

.cs-exec-stage-label {
  font-family: var(--font-system);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

.cs-exec-stage--hifi .cs-exec-stage-label {
  color: var(--accent-focus);
}

.cs-exec-arrow {
  font-size: 15px;
  color: var(--border-light);
  flex-shrink: 0;
  margin-bottom: 22px;
}

.cs-exec-caption {
  font-family: var(--font-system);
  font-size: var(--font-size-meta);
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0 0;
  line-height: 1.6;
}

@media (max-width: 480px) {
  .cs-exec-stages {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-exec-arrow {
    display: none;
  }

  .cs-exec-img-wrap {
    height: 140px;
  }
}


/* ================================================================
   VALIDATION & ITERATION - editorial critique panels
   ================================================================ */

.cs-vi {
  display: flex;
  flex-direction: column;
}

.cs-vi-panel + .cs-vi-panel {
  border-top: 1px solid var(--border-accent);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.cs-vi-hd {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-vi-num {
  font-size: 26.5px;
  font-weight: 700;
  color: var(--accent-interactive);
  line-height: 1;
  flex-shrink: 0;
  padding-top: 2px;
  width: 28px;
  letter-spacing: 0.02em;
}

.cs-vi-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-vi-topic {
  font-size: 13.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
}

.cs-vi-finding {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Image left / content right layout */
.cs-vi-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cs-vi-img-btn {
  flex: 0 0 44%;
  width: 44%;
}

.cs-vi-frame {
  width: 100%;
  height: 180px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-base);
}

.cs-vi-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cs-vi-change-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.cs-vi-frame--before {
  opacity: 0.6;
  filter: grayscale(20%);
  border: 1px solid var(--border-mid);
}

.cs-vi-frame--after {
  border: 1px solid var(--accent-interactive);
  box-shadow: 0 0 10px rgba(154, 123, 255, 0.12);
}

/* Override cs-img-btn img defaults inside vi frames */
.cs-vi-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

/* Annotation notes */
.cs-vi-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-vi-note {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.cs-vi-note::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-top: 3px;
}

.cs-vi-note--issue::before   { background: var(--warning); }
.cs-vi-note--resolve::before { background: var(--accent-focus); }

/* Outcome strip */
.cs-vi-outcome {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: auto;
}

.cs-vi-outcome-label {
  font-size: 10.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  white-space: nowrap;
  flex-shrink: 0;
}

.cs-vi-outcome-text {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 520px) {
  .cs-vi-body {
    flex-direction: column;
  }
  .cs-vi-img-btn {
    flex: none;
    width: 100%;
  }
}


/* ================================================================
   OUTCOMES & IMPACT - editorial impact summary
   ================================================================ */

.cs-oi {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Statement + before/after group */
.cs-oi-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-mid);
}

/* Specificity (0,2,0) beats .case-study-section p (0,1,1) */
.cs-oi .cs-oi-statement {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}

/* Before / After strip */
.cs-oi-ba {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.75px;
}

.cs-oi-ba-before {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.6;
}

.cs-oi-ba-sep {
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-oi-ba-after {
  font-weight: 700;
  color: var(--accent-focus);
}

/* Outcomes 2×2 grid */
.cs-oi-outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) 24px;
}

.cs-oi-out-item {
  border-left: 2px solid var(--border-accent);
  padding: 8px 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 150ms ease;
}

.cs-oi-out-item:hover {
  border-left-color: var(--accent-focus);
}

.cs-oi-out-num {
  font-size: 10.75px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cs-oi-out-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-oi-out-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Mobile */
@media (max-width: 520px) {
  .cs-oi-outcomes {
    grid-template-columns: 1fr;
  }
}


/* ================================================================
   NEXT STEPS
   Closing editorial section - minimal, reflective, generous whitespace.
   ================================================================ */
.cs-ns {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ns-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 6px;
}

.cs-ns-forward {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ns-forward-label {
  font-size: 10.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-ns-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ns-list li {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-ns-list li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-focus);
}


/* ================================================================
   STATS GRID
   Research/problem space stat display. 2-col grid with accent number.
   ================================================================ */
.cs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.cs-stat {
  border-left: 2px solid var(--border-accent);
  padding: 8px 0 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-focus);
  line-height: 1;
}

.cs-stat-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .cs-stats { grid-template-columns: 1fr; }
}


/* ================================================================
   VALIDATION FINDINGS
   Text-only usability finding rows with numbered label, title,
   description, and resolution note.
   ================================================================ */
.cs-findings {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cs-finding {
  border-left: 2px solid var(--border-light);
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-finding-num {
  font-size: 10.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-finding-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-finding-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cs-finding-res {
  font-size: 12px;
  color: var(--accent-focus);
  line-height: 1.5;
  font-style: italic;
}

/* ================================================================
   CONSTRAINTS LANDSCAPE
   Editorial horizontal constraint display. Used in ONC case study.
   4 items with staggered vertical offset and thin purple dividers.
   ================================================================ */
.cs-cl { display: flex; flex-direction: column; gap: var(--space-2); }

.cs-cl-header { display: flex; flex-direction: column; gap: 8px; }

.cs-cl-grid {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-mid);
}

.cs-cl-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 12px;
  min-width: 0;
}

.cs-cl-item:first-child { padding-left: 0; }
.cs-cl-item:last-child { padding-right: 0; }

.cs-cl-item--alt { padding-top: 20px; }

.cs-cl-divider {
  width: 1px;
  background: var(--border-accent);
  align-self: stretch;
  flex-shrink: 0;
  opacity: 0.45;
}

.cs-cl-num {
  font-size: 24.25px;
  font-weight: 200;
  color: var(--text-muted);
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 4px;
}

.cs-cl-label {
  font-size: 13.75px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-cl .cs-cl-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 520px) {
  .cs-cl-grid { flex-direction: column; gap: 0; }
  .cs-cl-divider { width: auto; height: 1px; }
  .cs-cl-item { padding: 12px 0; }
  .cs-cl-item:first-child { padding-top: 0; }
  .cs-cl-item--alt { padding-top: 12px; }
}


/* ================================================================
   CONSTRAINT EDITORIAL
   Typography-driven editorial layout. Staggered horizontal rows
   with large ghost numbers, separator rules, and asymmetric rhythm.
   Used in ONC case study Constraints section.
   ================================================================ */
.cs-ce {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ce-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ce-header p {
  margin: 0;
}

.cs-ce-items {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Faint civic-tech grid overlay */
  background-image:
    linear-gradient(rgba(154, 123, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 123, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.cs-ce-item {
  border-top: 1px solid var(--border-mid);
  padding: var(--space-2) 0;
}

.cs-ce-item:last-child {
  border-bottom: 1px solid var(--border-mid);
}


.cs-ce-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.cs-ce-num {
  font-size: 41.75px;
  font-weight: 200;
  color: var(--accent-interactive);
  line-height: 1;
  letter-spacing: 0;
  flex-shrink: 0;
  width: 54px;
  text-align: right;
}

.cs-ce-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 5px; /* optical alignment with number cap height */
}

.cs-ce-label {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.cs-ce .cs-ce-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
  max-width: 52ch;
}



/* ================================================================
   INFORMATION ARCHITECTURE STRATEGY
   Split before/after navigation hierarchy visualization.
   Left: deep, tangled tree (4+ levels). Right: 3-pillar structure.
   Used in ONC case study Information Architecture section.
   ================================================================ */

.cs-ia {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-ia-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ia-header p {
  margin: 0;
}

/* Diagram frame */
.cs-ia-diagram {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 230px;
}

/* Side panels */
.cs-ia-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--space-2);
  min-width: 0;
}

.cs-ia-panel--before {
  background: var(--bg-window);
}

.cs-ia-panel--after {
  background-image:
    linear-gradient(rgba(154, 123, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 123, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: var(--bg-elevated);
}

.cs-ia-panel-label {
  font-size: 10.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-ia-panel--after .cs-ia-panel-label {
  color: var(--accent-focus);
}

/* BEFORE: SVG spaghetti visualization */
.cs-ia-chaos {
  flex: 1;
  min-height: 175px;
}

.cs-ia-chaos-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* SVG lines - primary structural paths */
.ia-l {
  stroke: var(--accent-interactive);
  stroke-width: 0.8;
  fill: none;
  opacity: 0.55;
}

/* SVG lines - tangled cross/duplicate paths */
.ia-lx {
  stroke: var(--accent-interactive);
  stroke-width: 0.5;
  fill: none;
  stroke-dasharray: 3 3;
  opacity: 0.28;
}

/* Node rects - solid outline, uniform appearance */
.ia-nr { fill: var(--bg-window); stroke: var(--border-light); stroke-width: 0.75; }

/* Node text */
.ia-t { fill: var(--text-secondary); font-size: 9.5px; font-family: var(--font-sans); }

/* Depth indicator */
.cs-ia-depth {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cs-ia-depth-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

.cs-ia-depth-bar {
  display: block;
  width: 4px;
  height: 14px;
  background: var(--border-light);
  border-radius: var(--radius-sm);
  opacity: 0.55;
}

.cs-ia-depth-bar--fade   { opacity: 0.18; }
.cs-ia-depth-bar--active { background: var(--accent-interactive); opacity: 0.65; }

.cs-ia-depth-label {
  font-size: 10.75px;
  color: var(--text-muted);
  font-weight: 500;
}

.cs-ia-depth-label--clean { color: var(--accent-focus); }

/* Tags strip (before/after descriptors) */
.cs-ia-tags {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
}

.cs-ia-tags span {
  font-size: 10.75px;
  color: var(--text-muted);
  line-height: 1.3;
}

.cs-ia-tags--after span {
  color: var(--accent-focus);
  opacity: 0.7;
}

/* AFTER: three-pillar structure */
.cs-ia-pillars {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex: 1;
}

.cs-ia-pillar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.cs-ia-pillar-head {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid var(--accent-interactive);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 0 6px rgba(154, 123, 255, 0.1);
  letter-spacing: 0.01em;
}

.cs-ia-pillar-spine {
  width: 1px;
  height: 8px;
  background: var(--accent-interactive);
  opacity: 0.35;
}

.cs-ia-pillar-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--accent-interactive);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-ia-pillar-items span {
  display: block;
  font-size: 10.75px;
  color: var(--text-secondary);
  padding: 3px 5px;
  border-bottom: 1px solid rgba(154, 123, 255, 0.3);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-ia-pillar-items span:last-child {
  border-bottom: none;
}

/* Center separator */
.cs-ia-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 0 18px;
}

.cs-ia-sep-line {
  flex: 1;
  width: 1px;
  background: var(--border-mid);
}

.cs-ia-sep-glyph {
  font-size: 17.5px;
  color: var(--accent-focus);
  line-height: 1;
}

/* Core IA Improvements strip */
.cs-ia-strip {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-ia-strip-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--border-mid);
}

.cs-ia-strip-item:last-child {
  border-right: none;
}

.cs-ia-strip-glyph {
  font-size: 13.75px;
  color: var(--accent-focus);
  flex-shrink: 0;
  opacity: 0.6;
}

.cs-ia-strip-text {
  font-size: 10.75px;
  color: var(--text-secondary);
  line-height: 1.3;
}

@media (max-width: 520px) {
  .cs-ia-diagram {
    flex-direction: column;
    min-height: auto;
  }

  .cs-ia-sep {
    flex-direction: row;
    padding: var(--space-1) var(--space-2);
  }

  .cs-ia-sep-line {
    flex: 1;
    width: auto;
    height: 1px;
  }

  .cs-ia-strip {
    flex-wrap: wrap;
  }

  .cs-ia-strip-item {
    flex: 0 0 50%;
  }

  .cs-ia-strip-item:nth-child(2) {
    border-right: none;
  }

  .cs-ia-strip-item:nth-child(3),
  .cs-ia-strip-item:nth-child(4) {
    border-top: 1px solid var(--border-mid);
  }
}


/* ================================================================
   PROBLEM SPACE VISUALIZATION
   Split editorial diagram: fragmented ecosystem (left) vs
   redesigned platform (right). Used in the ONC case study.
   ================================================================ */
.cs-ps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-ps-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ps-diagram {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-height: 220px;
}

/* Side panels */
.cs-ps-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cs-ps-side-label {
  font-size: 10.75px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-align: center;
}

.cs-ps-side--before {
  flex: 0 1 210px;
}

.cs-ps-side--after {
  flex: 0 1 210px;
  align-items: center;
}

.cs-ps-side--after .cs-ps-side-label {
  color: var(--accent-focus);
}

/* LEFT: scattered/fragmented cards */
.cs-ps-chaos {
  position: relative;
  min-height: 200px;
  max-width: 210px;
  margin: auto 0;
  overflow: visible;
}

.cs-ps-frag-card {
  position: absolute;
  padding: 5px 9px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 10.75px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  opacity: 1;
  line-height: 1.3;
}

/* CENTER: vertical separator with arrow */
.cs-ps-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: 0 22px 0 4px;
}

.cs-ps-sep-line {
  flex: 1;
  width: 1px;
  background: var(--border-mid);
}

.cs-ps-sep-arr {
  font-size: 22px;
  color: var(--accent-focus);
  line-height: 1;
}


/* RIGHT: clean organized hierarchy */
.cs-ps-order {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: auto 0;
}

.cs-ps-org-card {
  padding: 6px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-interactive);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(154, 123, 255, 0.08);
}

.cs-ps-org-conn {
  width: 1px;
  height: 13px;
  background: var(--accent-interactive);
  margin-left: 20px;
  opacity: 0.45;
}

/* Mobile */
@media (max-width: 520px) {
  .cs-ps-diagram {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    gap: 16px;
  }

  .cs-ps-chaos {
    height: 200px;
  }

  .cs-ps-sep {
    flex-direction: row;
    padding: 0;
    align-self: auto;
  }

  .cs-ps-sep-line {
    flex: 1;
    width: auto;
    height: 1px;
  }
}


/* ================================================================
   ENGAGEMENT SYSTEM DESIGN
   Circular civic engagement loop: Discover → Understand →
   Participate → Return. Arc connectors with arrowheads.
   Used in ONC case study Engagement System Design section.
   ================================================================ */

.cs-es {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-es-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-es-header p {
  margin: 0;
}

.cs-es-loop {
  display: flex;
  justify-content: center;
}

.cs-es-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
}

/* Guide ring */
.es-ring {
  fill: none;
  stroke: var(--border-mid);
  stroke-width: 0.5;
  opacity: 0.5;
}

/* Arc connectors */
.es-arc {
  fill: none;
  stroke: var(--accent-interactive);
  stroke-width: 1.2;
  opacity: 0.6;
}

/* Stage node circles */
.es-node {
  fill: var(--bg-elevated);
  stroke: var(--accent-interactive);
  stroke-width: 1;
}

/* Stage number */
.es-num {
  fill: var(--accent-interactive);
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
}

/* Stage name */
.es-label {
  fill: var(--text-primary);
  font-size: 10.75px;
  font-weight: 700;
  font-family: sans-serif;
  letter-spacing: 0.01em;
}

/* Center labels */
.es-center-line {
  fill: var(--text-muted);
  font-size: 9.5px;
  font-family: sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.es-center-loop {
  fill: var(--accent-focus);
  font-size: 8.5px;
  font-family: var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Supporting strip */
.cs-es-strip {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-es-strip-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: var(--space-1) var(--space-2);
  border-right: 1px solid var(--border-mid);
}

.cs-es-strip-item:last-child {
  border-right: none;
}

.cs-es-snum {
  font-size: 10.75px;
  font-weight: 700;
  color: var(--accent-interactive);
  font-family: var(--font-sans);
  flex-shrink: 0;
  padding-top: 1px;
}

.cs-es-sbody {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cs-es-slabel {
  font-size: 10.75px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.cs-es-sdesc {
  font-size: 10.75px;
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 520px) {
  .cs-es-strip {
    flex-wrap: wrap;
  }

  .cs-es-strip-item {
    flex: 0 0 50%;
  }

  .cs-es-strip-item:nth-child(2) {
    border-right: none;
  }

  .cs-es-strip-item:nth-child(3),
  .cs-es-strip-item:nth-child(4) {
    border-top: 1px solid var(--border-mid);
  }
}


/* ================================================================
   LINEUP MANAGER - Case Study Components
   .cs-rc-* classes used in CASE_STUDY_CONTENT['rosterchamp']
   ================================================================ */

/* NDA note */
.cs-rc-nda {
  font-size: 12px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-left: 2px solid var(--accent-interactive);
  padding: 4px 10px;
  margin-bottom: var(--space-2);
  opacity: 0.7;
}

/* Challenge grid - 2-col list */
.cs-rc-challenges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--space-2);
  margin: var(--space-2) 0;
}

.cs-rc-ch {
  font-size: 15px;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}

.cs-rc-ch::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--accent-interactive);
  font-size: 12px;
}

/* Closing focus paragraph */
.cs-rc-focus {
  font-size: 15px;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px solid var(--border-mid);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}

/* IA Before / After layout */
.cs-rc-ia {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
  margin: var(--space-2) 0;
}

.cs-rc-ia-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.cs-rc-ia-col--before {
  border-color: var(--border-light);
  opacity: 0.7;
}

.cs-rc-ia-col--after {
  border-color: var(--accent-interactive);
  box-shadow: 0 0 8px rgba(154, 123, 255, 0.1);
}

.cs-rc-ia-label {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.cs-rc-ia-col--after .cs-rc-ia-label {
  color: var(--accent-focus);
}

.cs-rc-ia-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.cs-rc-ia-items span {
  font-size: 13.75px;
  color: var(--text-secondary);
  padding-left: 10px;
  position: relative;
}

.cs-rc-ia-items span::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--accent-interactive);
}

.cs-rc-ia-tag {
  display: inline-block;
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
  padding: 2px 6px;
  margin-top: auto;
  align-self: flex-start;
}

.cs-rc-ia-col--after .cs-rc-ia-tag {
  color: var(--accent-focus);
  border-color: var(--accent-interactive);
}

/* IA separator arrow */
.cs-rc-ia-sep {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 19.75px;
  color: var(--accent-interactive);
  opacity: 0.4;
  padding: 0 4px;
}

/* Operational Workflow 2-col */
.cs-rc-ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.cs-rc-ops-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
}

.cs-rc-ops-heading {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.cs-rc-ops-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-rc-ops-list span {
  font-size: 13.75px;
  color: var(--text-secondary);
  padding-left: 10px;
  position: relative;
}

.cs-rc-ops-list span::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--border-light);
}

.cs-rc-ops-list--accent span::before {
  color: var(--accent-interactive);
}

.cs-rc-ops-list--accent span {
  color: var(--text-primary);
}


/* ================================================================
   TACTICAL LINEUP BOARD - Lineup Manager signature visualization
   .cs-tlb-* classes
   ================================================================ */

.cs-tlb {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-tlb-eyebrow {
  display: block;
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-focus);
  margin-bottom: 6px;
}

.cs-tlb-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
}

/* 3-col layout: left panel | center board | right panel */
.cs-tlb-board-wrap {
  display: grid;
  grid-template-columns: 140px 1fr 140px;
  gap: var(--space-2);
  align-items: start;
}

/* ── Side panels ─────────────────────────────────────── */
.cs-tlb-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-tlb-panel-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

/* Left panel: roster stats */
.cs-tlb-game-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
}

.cs-tlb-game-time {
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--accent-focus);
  text-align: center;
  letter-spacing: 0.04em;
}

.cs-tlb-roster-divider {
  border: none;
  border-top: 1px solid var(--border-mid);
  margin: 2px 0;
}

.cs-tlb-roster-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.cs-tlb-roster-stat-val {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.75px;
  color: var(--text-primary);
}

.cs-tlb-roster-stat-val--active  { color: var(--positive); }
.cs-tlb-roster-stat-val--sub     { color: var(--accent-interactive); }
.cs-tlb-roster-stat-val--unavail { color: rgba(255, 100, 100, 0.8); }

/* Right panel: substitutions */
.cs-tlb-sub-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-tlb-sub-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}

.cs-tlb-sub-tag {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.cs-tlb-sub-tag--out {
  background: rgba(255, 100, 100, 0.12);
  color: rgba(255, 120, 120, 0.9);
  border: 1px solid rgba(255, 100, 100, 0.25);
}

.cs-tlb-sub-tag--in {
  background: rgba(154, 123, 255, 0.12);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.3);
}

.cs-tlb-sub-time {
  font-size: 9.5px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  margin-top: 1px;
}

.cs-tlb-sub-monitor {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 6px;
}

.cs-tlb-sub-monitor-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-tlb-sub-monitor-name {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}

/* ── Center board ────────────────────────────────────── */
.cs-tlb-center {
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-tlb-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-mid);
}

.cs-tlb-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--positive);
}

.cs-tlb-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
  animation: tlb-pulse 2s ease-in-out infinite;
}

.cs-tlb-topbar-time {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Zones */
.cs-tlb-zone {
  padding: 10px 10px 8px;
}

.cs-tlb-zone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cs-tlb-zone-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-tlb-zone-count {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

/* Formation grid: 3 rows × 3 cols */
.cs-tlb-formation {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-tlb-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

/* Zone divider */
.cs-tlb-zone-divider {
  border: none;
  border-top: 1px dashed var(--border-mid);
  margin: 0;
}

/* Bench row: 4 cols */
.cs-tlb-bench-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* ── Player tokens ───────────────────────────────────── */
.cs-tlb-token {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-tlb-token--active {
  border-color: var(--border-light);
}

.cs-tlb-token--sub {
  border-color: rgba(154, 123, 255, 0.45);
  background: rgba(154, 123, 255, 0.05);
  animation: tlb-glow 3s ease-in-out infinite;
}

.cs-tlb-token--sub-in {
  border-color: rgba(199, 184, 255, 0.4);
  background: rgba(199, 184, 255, 0.04);
}

.cs-tlb-token--bench {
  opacity: 0.55;
}

.cs-tlb-token--unavailable {
  opacity: 0.3;
  border-color: rgba(255, 90, 90, 0.2);
}

.cs-tlb-token-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cs-tlb-token-num {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

.cs-tlb-token-pos {
  font-size: 8.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-tlb-token-name {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cs-tlb-token-bottom {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.cs-tlb-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cs-tlb-status-dot--active  { background: var(--positive); }
.cs-tlb-status-dot--sub     { background: var(--accent-interactive); }
.cs-tlb-status-dot--sub-in  { background: var(--accent-focus); }
.cs-tlb-status-dot--bench   { background: var(--border-light); }
.cs-tlb-status-dot--unavail { background: rgba(255, 100, 100, 0.6); }

.cs-tlb-token-state {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-tlb-token--sub    .cs-tlb-token-state { color: var(--accent-interactive); }
.cs-tlb-token--sub-in .cs-tlb-token-state { color: var(--accent-focus); }

/* ── Legend ──────────────────────────────────────────── */
.cs-tlb-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-mid);
}

.cs-tlb-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Animations ──────────────────────────────────────── */
@keyframes tlb-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.3; transform: scale(0.75); }
}

@keyframes tlb-glow {
  0%, 100% { box-shadow: 0 0 0   rgba(154, 123, 255, 0);    }
  50%       { box-shadow: 0 0 10px rgba(154, 123, 255, 0.18); }
}

/* ── Responsive: collapse panels on narrow viewports ─── */
@media (max-width: 580px) {
  .cs-tlb-board-wrap {
    grid-template-columns: 1fr;
  }

  .cs-tlb-panel--left,
  .cs-tlb-panel--right {
    display: none;
  }

  .cs-tlb-bench-row {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ================================================================
   WORKFLOW COMPRESSION - Lineup Manager
   3-lane operational transformation. cs-wc-* classes.
   ================================================================ */

.cs-wc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.cs-wc-intro {
  grid-column: 1 / -1;
}

.cs-wc-eyebrow {
  display: block;
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-focus);
  margin-bottom: 6px;
}

.cs-wc-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: var(--space-1) 0 0;
}

/* ── Lanes ───────────────────────────────────────────── */
.cs-wc-lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.cs-wc-lane--primary {
  border-top-color: rgba(154, 123, 255, 0.4);
}


.cs-wc-lane-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-wc-lane-num {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-wc-lane-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  letter-spacing: 0;
}

.cs-wc-lane-focus {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-wc-lane-primary-tag {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
  background: rgba(154, 123, 255, 0.1);
  border: 1px solid rgba(154, 123, 255, 0.3);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  align-self: center;
}

/* 3-col: original | arrow | redesign */
.cs-wc-lane-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-wc-lane-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-wc-side-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  align-self: flex-start;
}

.cs-wc-side-label--original {
  color: rgba(255, 110, 110, 0.85);
  background: rgba(220, 70, 70, 0.08);
  border: 1px solid rgba(220, 70, 70, 0.22);
}

.cs-wc-side-label--redesign {
  color: var(--accent-focus);
  background: rgba(154, 123, 255, 0.08);
  border: 1px solid rgba(154, 123, 255, 0.25);
}

.cs-wc-side-label--explore {
  color: rgba(200, 178, 108, 0.75);
  background: rgba(200, 165, 88, 0.07);
  border: 1px solid rgba(200, 165, 88, 0.22);
}

.cs-wc-lane-img {
  overflow: hidden;
  border-radius: var(--radius-sm);
  line-height: 0;
  height: 180px;
  background: var(--bg-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-wc-lane-side--original .cs-wc-lane-img {
  border: 1px solid var(--border-mid);
  filter: grayscale(18%) brightness(0.88);
}

.cs-wc-lane-side--redesign .cs-wc-lane-img {
  border: 1px solid rgba(154, 123, 255, 0.45);
  box-shadow: 0 0 14px rgba(154, 123, 255, 0.12);
}

.cs-wc-lane--primary .cs-wc-lane-side--redesign .cs-wc-lane-img {
  border-color: var(--accent-interactive);
  box-shadow: 0 0 20px rgba(154, 123, 255, 0.18);
}

.cs-wc-lane-side--explore .cs-wc-lane-img {
  border: 1px dashed rgba(190, 168, 96, 0.28);
  background: rgba(190, 168, 96, 0.03);
  box-shadow: none;
}



/* Wireframe placeholder */
.cs-wc-wireframe-ph {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.cs-wc-wireframe-ph-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(190, 168, 96, 0.38);
}

.cs-wc-lane-img img {
  max-width: 100%;
  max-height: 180px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.cs-wc-lane-arrow {
  font-size: 15.5px;
  color: var(--text-muted);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Annotation tags below each image */
.cs-wc-overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cs-wc-overlay-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.cs-wc-overlay-tag--friction {
  color: rgba(255, 100, 100, 0.7);
  background: rgba(220, 70, 70, 0.06);
  border: 1px solid rgba(220, 70, 70, 0.18);
}

.cs-wc-overlay-tag--gain {
  color: var(--accent-focus);
  background: rgba(154, 123, 255, 0.06);
  border: 1px solid rgba(154, 123, 255, 0.2);
}

.cs-wc-overlay-tag--process {
  color: rgba(178, 172, 218, 0.65);
  background: rgba(138, 128, 198, 0.05);
  border: 1px solid rgba(138, 128, 198, 0.16);
}

/* (old 2-col compare rules removed - replaced by lane system above)
.cs-wc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
}

.cs-wc-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-wc-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-wc-col-tag {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

.cs-wc-col-tag--before {
  background: rgba(220, 70, 70, 0.1);
  color: rgba(255, 110, 110, 0.9);
  border: 1px solid rgba(220, 70, 70, 0.28);
}

.cs-wc-col-tag--after {
  background: rgba(154, 123, 255, 0.1);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.28);
}

.cs-wc-col-subtitle {
  font-size: 12px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Annotation rows (above/below screens) ───────────── */
.cs-wc-annot-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.cs-wc-annotation {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}

.cs-wc-annotation--friction {
  background: rgba(220, 70, 70, 0.08);
  color: rgba(255, 110, 110, 0.75);
  border: 1px solid rgba(220, 70, 70, 0.2);
}

.cs-wc-annotation--gain {
  background: rgba(154, 123, 255, 0.08);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.22);
}

/* ── Screen zone (position: relative for SVG overlay) ── */
.cs-wc-screen-zone {
  position: relative;
}

/* ── 2×2 simulated screen grid (before side) ─────────── */
.cs-wc-screen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.cs-wc-screen {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-wc-screen-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-mid);
}

.cs-wc-screen-dots {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.cs-wc-screen-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-light);
  font-style: normal;
}

.cs-wc-screen-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1;
}

.cs-wc-step-badge {
  font-size: 8.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: rgba(220, 70, 70, 0.75);
  background: rgba(220, 70, 70, 0.08);
  border: 1px solid rgba(220, 70, 70, 0.2);
  padding: 0 3px;
  border-radius: var(--radius-sm);
}

.cs-wc-screen-body {
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.cs-wc-screen-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.75px;
  color: var(--text-secondary);
  padding: 2px 0;
}

.cs-wc-screen-row--warn { opacity: 0.6; }

.cs-wc-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  font-style: normal;
  flex-shrink: 0;
}

.cs-wc-dot--active { background: var(--positive); }
.cs-wc-dot--warn   { background: rgba(255, 120, 70, 0.75); }
.cs-wc-dot--sub    { background: var(--accent-interactive); }

.cs-wc-screen-stat {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 3px;
  margin-bottom: 2px;
}

.cs-wc-screen-badge {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  padding: 1px 3px;
  border-radius: var(--radius-sm);
}

.cs-wc-screen-badge--out {
  background: rgba(220, 70, 70, 0.1);
  color: rgba(255, 100, 100, 0.8);
  border: 1px solid rgba(220, 70, 70, 0.2);
}

.cs-wc-screen-slot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.75px;
  color: var(--text-muted);
  border: 1px dashed var(--border-mid);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}

.cs-wc-screen-pos {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.cs-wc-screen-empty {
  font-size: 9.5px;
  color: var(--border-light);
  font-style: italic;
}

.cs-wc-screen-btn {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  text-align: center;
  margin-top: 2px;
}

.cs-wc-screen-event {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0;
  font-size: 9.5px;
  color: var(--text-secondary);
}

.cs-wc-screen-event-time {
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 8.5px;
}

/* SVG tangled arrow overlay */
.cs-wc-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

/* ── Summary tags ────────────────────────────────────── */
.cs-wc-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.cs-wc-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.cs-wc-tag--friction {
  color: rgba(255, 100, 100, 0.7);
  border: 1px solid rgba(220, 70, 70, 0.2);
  background: rgba(220, 70, 70, 0.06);
}

.cs-wc-tag--gain {
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.22);
  background: rgba(154, 123, 255, 0.06);
}

/* ── Unified screen (after side) ─────────────────────── */
.cs-wc-unified {
  background: var(--bg-base);
  border: 1px solid var(--accent-interactive);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 0 14px rgba(154, 123, 255, 0.1);
}

.cs-wc-unified-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-mid);
}

.cs-wc-unified-bar-title {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-weight: 700;
  flex: 1;
}

.cs-wc-unified-bar-meta {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

.cs-wc-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--positive);
  animation: tlb-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

.cs-wc-unified-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cs-wc-unified-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
}

.cs-wc-unified-col:first-child {
  border-right: 1px solid var(--border-mid);
}

.cs-wc-unified-col-label {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.cs-wc-unified-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.75px;
  color: var(--text-secondary);
  padding: 1px 0;
}

.cs-wc-lineup-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.75px;
  color: var(--text-secondary);
  padding: 3px 5px;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
}

.cs-wc-lineup-slot--filled {
  background: rgba(154, 123, 255, 0.06);
  border: 1px solid rgba(154, 123, 255, 0.18);
}

.cs-wc-lineup-slot--pending {
  background: rgba(199, 184, 255, 0.04);
  border: 1px dashed rgba(154, 123, 255, 0.25);
  color: var(--text-muted);
}

.cs-wc-lineup-pos {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
  width: 24px;
}

.cs-wc-unified-actions {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-mid);
}

.cs-wc-unified-action-btn {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.cs-wc-unified-action-btn:first-child {
  background: rgba(154, 123, 255, 0.14);
  color: var(--accent-focus);
  border: 1px solid rgba(154, 123, 255, 0.32);
}

.cs-wc-unified-action-btn--secondary {
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
}

/* ── Step compression bar ────────────────────────────── */
.cs-wc-stepbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  flex-wrap: wrap;
}

.cs-wc-stepbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 80px;
}

.cs-wc-stepbar-num {
  font-size: 33px;
  font-weight: 100;
  font-family: var(--font-sans);
  line-height: 1;
  letter-spacing: 0;
}

.cs-wc-stepbar-num--before { color: rgba(220, 70, 70, 0.65); }
.cs-wc-stepbar-num--after  { color: var(--positive); }

.cs-wc-stepbar-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.cs-wc-stepbar-arrow {
  font-size: 17.5px;
  color: var(--text-muted);
  opacity: 0.4;
  flex-shrink: 0;
}

.cs-wc-stepbar-divider {
  width: 1px;
  height: 44px;
  background: var(--border-mid);
  flex-shrink: 0;
}
*/

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 720px) {
  .cs-wc { grid-template-columns: 1fr; }
  .cs-wc-lane-compare { grid-template-columns: 1fr; }
  .cs-wc-lane--primary .cs-wc-lane-compare { grid-template-columns: 1fr; }
  .cs-wc-lane-arrow { display: none; }
}


/* ================================================================
   OPERATIONAL CONSTRAINTS LANDSCAPE - cs-ocl-*
   RC case study section: 4 environmental operational zones
   ================================================================ */

.cs-ocl {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Intro block */
.cs-ocl-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-ocl-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.cs-ocl-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  letter-spacing: 0;
  margin: 0;
}

.cs-ocl-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(139, 92, 200, 0.4);
  padding-left: 12px;
  margin: 0;
}

/* 2×2 zone grid */
.cs-ocl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

/* Individual zone card */
.cs-ocl-zone {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ocl-zone--time    { border-top-color: rgba(255, 120, 80, 0.45); }
.cs-ocl-zone--mobile  { border-top-color: rgba(80, 180, 255, 0.35); }
.cs-ocl-zone--mobile .cs-ocl-zone-body { align-items: center; }
.cs-ocl-zone--density { border-top-color: rgba(139, 92, 200, 0.5);  }
.cs-ocl-zone--roles   { border-top-color: rgba(80, 220, 160, 0.35); }

/* Zone header */
.cs-ocl-zone-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cs-ocl-zone-num {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  flex-shrink: 0;
  padding-top: 1px;
}

.cs-ocl-zone-label {
  font-size: 13.75px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
}

.cs-ocl-zone-sub {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Zone body */
.cs-ocl-zone-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

/* Tags shared */
.cs-ocl-zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}

.cs-ocl-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ── Zone 01: Timeline ─────────────────────────────────── */
.cs-ocl-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ocl-tl-track {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ocl-tl-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  position: relative; /* for ::after pulse */
}

/* Bar fill is a background gradient */
.cs-ocl-tl-bar--1 { background: linear-gradient(90deg, rgba(255,120,80,0.22) 100%, transparent 100%); }
.cs-ocl-tl-bar--2 { background: linear-gradient(90deg, rgba(255,120,80,0.22)  68%, transparent  68%); }
.cs-ocl-tl-bar--3 { background: linear-gradient(90deg, rgba(255,120,80,0.22)  84%, transparent  84%); }
.cs-ocl-tl-bar--4 { background: linear-gradient(90deg, rgba(255,120,80,0.22)  52%, transparent  52%); }

/* Pulsing dot at end of gradient bar */
.cs-ocl-tl-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 120, 80, 0.9);
  animation: ocl-pulse-time 2s ease-in-out infinite;
  pointer-events: none;
}

.cs-ocl-tl-bar--1::after { left: calc(100% - 7px); }
.cs-ocl-tl-bar--2::after { left: calc( 68% - 7px); animation-delay: 0.4s; }
.cs-ocl-tl-bar--3::after { left: calc( 84% - 7px); animation-delay: 0.8s; }
.cs-ocl-tl-bar--4::after { left: calc( 52% - 7px); animation-delay: 1.2s; }

.cs-ocl-tl-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes ocl-pulse-time {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateY(-50%) scale(1.35); }
}

.cs-ocl-tl-axis {
  display: flex;
  justify-content: space-between;
  font-size: 8.5px;
  font-family: var(--font-sans);
  color: rgba(255,120,80,0.4);
  border-top: 1px solid rgba(255,120,80,0.15);
  padding-top: 4px;
}

/* ── Zone 02: Device reach map ─────────────────────────── */
.cs-ocl-device {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs-ocl-device-frame {
  width: 64px;
  flex-shrink: 0;
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  padding: 6px 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.cs-ocl-device-screen {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-window);
  height: 100px;
  display: flex;
  flex-direction: column;
}

.cs-ocl-reach-map {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cs-ocl-reach-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.cs-ocl-reach-zone--hard    { background: rgba(255,80,80,0.08); flex: 0.6; }
.cs-ocl-reach-zone--stretch { background: rgba(255,180,60,0.07); flex: 0.8; }
.cs-ocl-reach-zone--easy    { background: rgba(80,220,160,0.1); flex: 1; }

.cs-ocl-reach-label {
  font-size: 7.25px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  opacity: 0.7;
  text-align: center;
}

.cs-ocl-device-signal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.cs-ocl-signal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(80, 180, 255, 0.5);
  animation: ocl-signal 1.8s ease-in-out infinite;
}

.cs-ocl-signal-dot--2 { animation-delay: 0.6s; }
.cs-ocl-signal-dot--3 { animation-delay: 1.2s; }

@keyframes ocl-signal {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.9; }
}

/* ── Zone 03: Density lanes ────────────────────────────── */
.cs-ocl-density-lanes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-ocl-dl {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-ocl-dl-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  width: 44px;
  flex-shrink: 0;
}

.cs-ocl-dl-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ocl-dl-bar {
  height: 7px;
  border-radius: var(--radius-sm);
  background: var(--border-mid);
  position: relative;
  overflow: hidden;
}

.cs-ocl-dl-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  animation: ocl-fill 3s ease-in-out infinite;
}

.cs-ocl-dl--1 .cs-ocl-dl-bar::after { background: rgba(99, 179, 237, 0.72);  animation-delay: 0s; }   /* Roster - blue */
.cs-ocl-dl--2 .cs-ocl-dl-bar::after { background: rgba(246, 173, 85, 0.72);  animation-delay: 0.3s; } /* Schedule - amber */
.cs-ocl-dl--3 .cs-ocl-dl-bar::after { background: rgba(72, 187, 120, 0.72);  animation-delay: 0.6s; } /* Lineup - green */

@keyframes ocl-fill {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ── Zone 04: Role network ─────────────────────────────── */
.cs-ocl-roles {
  flex: 1;
}

.cs-ocl-spoke-diagram {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}

.cs-ocl-spoke-diagram svg {
  width: 100%;
  max-width: 240px;
  height: auto;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 640px) {
  .cs-ocl-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   INFORMATION ARCHITECTURE STRATEGY - cs-ia-*
   RC case study: Before→After operational IA transformation
   ================================================================ */

.cs-ia {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-ia-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-ia-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.cs-ia-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  letter-spacing: 0;
  margin: 0;
}

.cs-ia-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(139, 92, 200, 0.4);
  padding-left: 12px;
  margin: 0;
}

/* Before → After layout */
.cs-ia-transform {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-ia-arrow {
  font-size: 19.75px;
  color: var(--text-muted);
  opacity: 0.35;
  padding-top: 32px;
  flex-shrink: 0;
}

/* Shared side styles */
.cs-ia-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-ia-side-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-ia-side-chip {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
}

.cs-ia-side-chip--before {
  color: rgba(255,100,100,0.85);
  background: rgba(220,70,70,0.08);
  border: 1px solid rgba(220,70,70,0.22);
}

.cs-ia-side-chip--after {
  color: var(--accent-focus);
  background: rgba(154,123,255,0.08);
  border: 1px solid rgba(154,123,255,0.25);
}

.cs-ia-side-meta {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ── Before: Feature silos ─────────────────────────────── */
.cs-ia-silos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.cs-ia-silo {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  text-align: center;
  opacity: 0.75;
}

.cs-ia-silo-noise {
  height: 40px;
  margin: -6px 0;
}

.cs-ia-silo-noise svg {
  width: 100%;
  height: 100%;
}

.cs-ia-friction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cs-ia-ftag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255,100,100,0.65);
  background: rgba(220,70,70,0.06);
  border: 1px solid rgba(220,70,70,0.15);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ── After: Task clusters ──────────────────────────────── */
.cs-ia-clusters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cs-ia-cluster {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-top: 2px solid rgba(139, 92, 200, 0.55);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-ia-cluster-title {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-2-text);
}

.cs-ia-cluster-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-ia-cluster-items span {
  font-size: 10.75px;
  color: var(--text-muted);
  padding-left: 8px;
  position: relative;
}

.cs-ia-cluster-items span::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(139, 92, 200, 0.5);
}

.cs-ia-gain-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cs-ia-gtag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-focus);
  background: rgba(154,123,255,0.06);
  border: 1px solid rgba(154,123,255,0.2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ── Supporting strip ──────────────────────────────────── */
.cs-ia-strip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-left: 2px solid rgba(139, 92, 200, 0.5);
  border-radius: var(--radius-sm);
  padding: 12px var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-ia-strip-label {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-2-text);
}

.cs-ia-strip-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

.cs-ia-strip-items span {
  font-size: 13.75px;
  color: var(--text-secondary);
  position: relative;
  padding-left: 12px;
  line-height: 1.4;
}

.cs-ia-strip-items span::before {
  content: '›';
  position: absolute;
  left: 0;
  color: rgba(139, 92, 200, 0.7);
  font-size: 16.25px;
  line-height: 1.3;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 580px) {
  .cs-ia-transform {
    grid-template-columns: 1fr;
  }
  .cs-ia-arrow {
    text-align: center;
    padding-top: 0;
    font-size: 26.5px;
    transform: rotate(90deg);
  }
  .cs-ia-clusters { grid-template-columns: 1fr; }
}

/* ================================================================
   OPERATIONAL SCANNING RHYTHM - cs-osr-*
   RC case study: redesigned screens + scanning hierarchy overlays
   ================================================================ */

.cs-osr {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-osr-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-osr-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.cs-osr-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--accent-2-text);
  letter-spacing: 0;
  margin: 0;
}

.cs-osr-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  border-left: 2px solid rgba(139, 92, 200, 0.4);
  padding-left: 12px;
  margin: 0;
}

/* Editorial screen composition */
.cs-osr-composition {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-2);
  align-items: start;
}

.cs-osr-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Screen card */
.cs-osr-screen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-osr-img-wrap {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-mid);
  background: var(--bg-base);
  line-height: 0;
}

.cs-osr-screen--primary .cs-osr-img-wrap {
  border-color: rgba(139, 92, 200, 0.35);
  box-shadow: 0 0 20px rgba(139, 92, 200, 0.1);
}

.cs-osr-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.92);
}

/* Top hierarchy glow strip */
.cs-osr-scan-bar {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cs-osr-scan-bar--top {
  top: 0;
  height: 22%;
  background: linear-gradient(
    180deg,
    rgba(139, 92, 200, 0.08) 0%,
    transparent 100%
  );
  animation: osr-scan-pulse 4s ease-in-out infinite;
}

@keyframes osr-scan-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}

/* Annotation chips */
.cs-osr-ann {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-focus);
  background: rgba(13, 11, 24, 0.82);
  border: 1px solid rgba(154, 123, 255, 0.3);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.cs-osr-ann-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-focus);
  flex-shrink: 0;
  animation: osr-dot-pulse 2s ease-in-out infinite;
}

@keyframes osr-dot-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; box-shadow: 0 0 4px rgba(154,123,255,0.4); }
}

.cs-osr-ann--tl { top: 8px;  left:  8px; }
.cs-osr-ann--bl { bottom: 8px; left: 8px; }
.cs-osr-ann--tr { top: 8px;  right: 8px; }
.cs-osr-ann--br { bottom: 8px; right: 8px; }

.cs-osr-screen-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-left: 2px;
}

/* Scanning metrics strip */
.cs-osr-metrics {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-mid);
}

.cs-osr-metrics-label {
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.cs-osr-metrics-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-osr-metric {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 10px;
}

.cs-osr-metric-name {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.cs-osr-metric-bar {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-osr-metric-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(139,92,200,0.7), rgba(154,123,255,0.3));
  border-radius: var(--radius-sm);
  animation: osr-fill-in 1.2s ease-out both;
}

@keyframes osr-fill-in {
  from { width: 0 !important; }
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 580px) {
  .cs-osr-composition {
    grid-template-columns: 1fr;
  }
  .cs-osr-secondary {
    flex-direction: row;
  }
  .cs-osr-secondary .cs-osr-screen {
    flex: 1;
  }
  .cs-osr-metric {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .cs-osr-metric-name { white-space: normal; }
}

/* ================================================================
   OPERATIONAL ENVIRONMENTS VISUAL  (cs-oe-*)
   Blue Origin UI - Operational Context section
   ================================================================ */

.cs-oe {
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.cs-oe-eyebrow {
  font-size: 10.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Outer frame - one unified surface */
.cs-oe-frame {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  min-height: 300px;
  background: var(--bg-base);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

/* Subtle orbital grid overlay */
.cs-oe-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(154,123,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,123,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* Vertical dividers */
.cs-oe-vdiv {
  background: var(--border-mid);
  position: relative;
  z-index: 1;
}

/* Zone base */
.cs-oe-zone {
  display: flex;
  flex-direction: column;
  padding: 14px 14px 12px;
  position: relative;
  z-index: 1;
}

/* Zone header */
.cs-oe-zone-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-oe-zone-id {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  background: rgba(154,123,255,0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(154,123,255,0.2);
  margin-bottom: 5px;
}

.cs-oe-zone-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-oe-zone-sub {
  font-size: 10.75px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 3px;
}

/* ── Zone 1: RFI - enterprise table ──────────────────────── */

.cs-oe-filter {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  align-items: center;
}

.cs-oe-filter-bar {
  flex: 1;
  height: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 5px;
}

.cs-oe-filter-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-light);
  flex-shrink: 0;
}

.cs-oe-filter-text {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  opacity: 0.5;
}

.cs-oe-filter-chip {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  background: rgba(154,123,255,0.1);
  color: var(--accent-focus);
  border: 1px solid rgba(154,123,255,0.2);
  white-space: nowrap;
}

.cs-oe-tbl {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex: 1;
}

.cs-oe-tbl-head {
  display: grid;
  grid-template-columns: 72px 1fr 62px 42px;
  background: var(--bg-elevated);
  padding: 5px 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border-mid);
}

.cs-oe-tbl-hc {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.cs-oe-tbl-row {
  display: grid;
  grid-template-columns: 72px 1fr 62px 42px;
  padding: 5px 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border-dark);
  align-items: center;
}

.cs-oe-tbl-row:last-child { border-bottom: none; }
.cs-oe-tbl-row--hi        { background: rgba(154,123,255,0.04); }

.cs-oe-tbl-c {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-oe-tbl-c--id {
  color: var(--text-primary);
  font-weight: 700;
}

.cs-oe-badge {
  display: inline-flex;
  align-items: center;
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.cs-oe-badge--active  { background: rgba(78,201,144,0.12);  color: var(--positive); border: 1px solid rgba(78,201,144,0.25);  }
.cs-oe-badge--pending { background: rgba(224,160,48,0.12);  color: var(--warning); border: 1px solid rgba(224,160,48,0.25);  }
.cs-oe-badge--hold    { background: rgba(224,80,80,0.12);   color: var(--danger); border: 1px solid rgba(224,80,80,0.25);   }
.cs-oe-badge--review  { background: rgba(100,160,255,0.12); color: var(--accent); border: 1px solid rgba(100,160,255,0.25); }

.cs-oe-prog {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-oe-prog-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(154,123,255,0.5), rgba(199,184,255,0.3));
}

/* ── Zone 2: S2K - mobile frame ──────────────────────────── */

.cs-oe-zone--s2k {
  background: rgba(154,123,255,0.015);
  padding-left: 8px;
  padding-right: 8px;
}

.cs-oe-phone-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.cs-oe-phone {
  width: 110px;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-light);
  border-radius: 14px;
  padding: 8px 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cs-oe-phone-notch {
  width: 26px;
  height: 3px;
  background: var(--border-mid);
  border-radius: var(--radius-sm);
  margin: 0 auto 3px;
}

.cs-oe-scan-zone {
  border: 1px dashed rgba(154,123,255,0.35);
  border-radius: var(--radius);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(154,123,255,0.04);
  position: relative;
  overflow: hidden;
}

.cs-oe-scan-zone::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(154,123,255,0.55);
  animation: oe-scan-beam 2.4s ease-in-out infinite;
}

@keyframes oe-scan-beam {
  0%   { top: 15%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 85%; opacity: 0; }
}

.cs-oe-scan-bars {
  display: flex;
  gap: 2px;
  align-items: center;
  height: 20px;
}

.cs-oe-scan-bar {
  width: 2px;
  background: var(--border-light);
  border-radius: var(--radius-sm);
}

.cs-oe-scan-label {
  font-size: 7.25px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(154,123,255,0.6);
}

.cs-oe-task-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-oe-task-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  background: var(--bg-base);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-dark);
}

.cs-oe-task-item--active {
  border-color: rgba(154,123,255,0.25);
  background: rgba(154,123,255,0.04);
}

.cs-oe-task-check {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

.cs-oe-task-check--done   { background: rgba(78,201,144,0.3);  border-color: rgba(78,201,144,0.5);  }
.cs-oe-task-check--active { border-color: rgba(154,123,255,0.5); }

.cs-oe-task-text {
  font-size: 8.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-oe-task-text--active { color: var(--text-secondary); }

.cs-oe-phone-btn {
  background: rgba(154,123,255,0.15);
  border: 1px solid rgba(154,123,255,0.3);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  text-align: center;
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-focus);
}

/* ── Zone 3: Blue Moon - mission telemetry ───────────────── */

.cs-oe-orbital-wrap {
  flex: 1;
  min-height: 100px;
  margin-bottom: 8px;
}

.cs-oe-telem {
  display: flex;
  flex-direction: column;
}

.cs-oe-telem-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-dark);
  gap: 8px;
}

.cs-oe-telem-row:last-child { border-bottom: none; }

.cs-oe-telem-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cs-oe-telem-val {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-primary);
}

.cs-oe-telem-val--nominal { color: var(--positive); }
.cs-oe-telem-val--caution { color: var(--warning); }
.cs-oe-telem-val--active  { color: var(--accent-focus); }

.cs-oe-status-bar {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
}

.cs-oe-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--positive);
  flex-shrink: 0;
  animation: oe-pulse 2s ease-in-out infinite;
}

@keyframes oe-pulse {
  0%, 100% { opacity: 0.5; box-shadow: none; }
  50%       { opacity: 1;   box-shadow: 0 0 4px rgba(94,212,160,0.5); }
}

.cs-oe-status-text {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
}

/* ── Shared UX thread ────────────────────────────────────── */

.cs-oe-thread {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cs-oe-thread-accent {
  width: 2px;
  min-height: 36px;
  background: linear-gradient(180deg, rgba(154,123,255,0.6), rgba(154,123,255,0.1));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.cs-oe-thread-text {
  font-size: 13.75px;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin: 0;
}

/* ── Image display containers ────────────────────────────── */

.cs-oe-img-single {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cs-oe-img-single img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top left;
  display: block;
}

.cs-oe-img-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.cs-oe-img-screens--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cs-oe-img-screen {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

.cs-oe-img-screen img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.cs-oe-img-dual {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.cs-oe-img-flight {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 0;
}

.cs-oe-img-flight img {
  width: 100%;
  flex: 1;
  object-fit: cover;
  object-position: top;
  display: block;
  min-height: 0;
}

.cs-oe-img-label {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 3px 6px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-mid);
  display: block;
  text-align: center;
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .cs-oe-frame {
    grid-template-columns: 1fr;
  }
  .cs-oe-vdiv {
    width: 100%;
    height: 1px;
  }
  .cs-oe-phone-wrap {
    padding: var(--space-1) 0;
  }
}

/* ================================================================
   SHARED RESEARCH INSIGHTS  cs-sri-*
   Blue Origin UI > Research Insights section - editorial systems map
   ================================================================ */

.cs-sri {
  margin-top: var(--space-2);
}

.cs-sri-eyebrow {
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-sri-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-sri-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Map container --- */
.cs-sri-map {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--bg-base);
}

/* --- Tier 1: Initiatives --- */
.cs-sri-initiatives {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--bg-base);
}

.cs-sri-init {
  background: var(--bg-elevated);
  padding: 16px 18px;
  border-left: 2px solid transparent;
  border-right: 1px solid var(--border-light);
}
.cs-sri-init:last-child { border-right: none; }

.cs-sri-init--rfi { border-left-color: rgba(154, 123, 255, 0.6); }
.cs-sri-init--s2k { border-left-color: rgba(72,  187, 120, 0.6); }
.cs-sri-init--bm  { border-left-color: rgba(99,  179, 237, 0.6); }

.cs-sri-init-id {
  display: block;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.cs-sri-init--rfi .cs-sri-init-id { color: rgba(154, 123, 255, 0.85); }
.cs-sri-init--s2k .cs-sri-init-id { color: rgba(72,  187, 120, 0.85); }
.cs-sri-init--bm  .cs-sri-init-id { color: rgba(99,  179, 237, 0.85); }

.cs-sri-init-label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* --- SVG connectors --- */
.cs-sri-connector {
  display: block;
  width: 100%;
  height: 32px;
  flex-shrink: 0;
  background: var(--bg-base);
}

.cs-sri-connector line {
  stroke: rgba(154, 123, 255, 0.65);
  stroke-width: 1;
  stroke-dasharray: 3 7;
  animation: cs-sri-flow 3.5s linear infinite;
}

.cs-sri-connector--diverge line {
  animation-direction: reverse;
}

@keyframes cs-sri-flow {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0;  }
}

/* --- Hub --- */
.cs-sri-hub {
  background: linear-gradient(180deg, rgba(154, 123, 255, 0.04) 0%, rgba(154, 123, 255, 0.09) 100%);
  border-top: 1px solid rgba(154, 123, 255, 0.18);
  border-bottom: 1px solid rgba(154, 123, 255, 0.18);
  padding: 18px 24px;
  text-align: center;
  animation: cs-sri-pulse 5s ease-in-out infinite;
}

@keyframes cs-sri-pulse {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(154, 123, 255, 0); }
  50%       { box-shadow: inset 0 0 24px 0 rgba(154, 123, 255, 0.06); }
}

.cs-sri-hub-label {
  font-size: 0.72rem;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-focus);
  margin-bottom: 4px;
}

.cs-sri-hub-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* --- Tier 3: Insight clusters --- */
.cs-sri-clusters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: var(--bg-base);
}

.cs-sri-cluster {
  background: var(--bg-elevated);
  padding: 16px 18px;
  border-right: 1px solid var(--border-light);
  border-top: 2px solid rgba(154, 123, 255, 0.12);
}
.cs-sri-cluster:last-child { border-right: none; }

.cs-sri-cluster-num {
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  margin-bottom: 6px;
}

.cs-sri-cluster-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.cs-sri-cluster-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .cs-sri-initiatives {
    grid-template-columns: 1fr;
  }
  .cs-sri-init {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .cs-sri-init:last-child { border-bottom: none; }

  .cs-sri-connector { display: none; }

  .cs-sri-clusters {
    grid-template-columns: 1fr 1fr;
  }
  .cs-sri-cluster:nth-child(even) { border-right: none; }
  .cs-sri-cluster:nth-child(n+3) {
    border-top: 1px solid var(--border-light);
  }
}

/* ================================================================
   RFI INITIATIVE  cs-rfi-*
   Blue Origin UI > RFI Initiative section
================================================================ */

.cs-rfi {
  margin-top: var(--space-2);
}

.cs-rfi-eyebrow {
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-rfi-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-rfi-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Moments grid --- */
.cs-rfi-moments {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* --- Single moment --- */
.cs-rfi-moment {
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-light);
}
.cs-rfi-moment:last-child { border-right: none; }

.cs-rfi-moment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-rfi-moment-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(154, 123, 255, 0.55);
}

.cs-rfi-moment-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Stage (simulated UI crop) --- */
.cs-rfi-stage {
  flex: 1;
  padding: 12px 12px 6px;
  position: relative;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
}

/* --- Filter chips --- */
.cs-rfi-filter-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.cs-rfi-chip {
  font-size: 9.5px;
  font-family: var(--font-sans);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  background: var(--bg-elevated);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.cs-rfi-chip--active {
  border-color: rgba(154, 123, 255, 0.45);
  color: rgba(154, 123, 255, 0.85);
  background: rgba(154, 123, 255, 0.07);
}
.cs-rfi-chip--add {
  color: rgba(154, 123, 255, 0.5);
  border-style: dashed;
  border-color: rgba(154, 123, 255, 0.25);
  background: transparent;
}

/* --- Table simulation --- */
.cs-rfi-tbl {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 10.75px;
}

.cs-rfi-tbl-head {
  display: grid;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-mid);
  padding: 5px 8px;
  gap: 6px;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-items: center;
}

.cs-rfi-tbl-row {
  display: grid;
  padding: 6px 8px;
  gap: 6px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  align-items: center;
}
.cs-rfi-tbl-row:last-child { border-bottom: none; }

.cs-rfi-tbl-row--hi      { background: rgba(154, 123, 255, 0.04); }
.cs-rfi-tbl-row--dim     { opacity: 0.4; }
.cs-rfi-tbl-row--flagged {
  background: rgba(246, 173, 85, 0.05);
  border-left: 2px solid rgba(246, 173, 85, 0.5);
  padding-left: 6px;
}

/* Column counts per stage */
.cs-rfi-stage--filter .cs-rfi-tbl-head,
.cs-rfi-stage--filter .cs-rfi-tbl-row  { grid-template-columns: 2fr 2fr 1.5fr 0.8fr; }

.cs-rfi-stage--flag .cs-rfi-tbl-head,
.cs-rfi-stage--flag .cs-rfi-tbl-row    { grid-template-columns: 2fr 2fr 0.5fr; }

.cs-rfi-stage--frozen .cs-rfi-tbl-head,
.cs-rfi-stage--frozen .cs-rfi-tbl-row  { grid-template-columns: 2fr 1.2fr 0.5fr 0.8fr 1.5fr; }

/* --- Status badges --- */
.cs-rfi-badge {
  display: inline-block;
  font-size: 9.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.cs-rfi-badge--open {
  background: rgba(99,  179, 237, 0.1);
  color:      rgba(99,  179, 237, 0.85);
  border: 1px solid rgba(99, 179, 237, 0.2);
}
.cs-rfi-badge--hi {
  background: rgba(246, 173, 85, 0.1);
  color:      rgba(246, 173, 85, 0.85);
  border: 1px solid rgba(246, 173, 85, 0.2);
}

/* --- CSS flag icon --- */
.cs-rfi-flag {
  display: inline-block;
  width: 10px;
  height: 12px;
  position: relative;
}
.cs-rfi-flag::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5px;
  height: 100%;
  background: rgba(246, 173, 85, 0.85);
  border-radius: var(--radius-sm);
}
.cs-rfi-flag::after {
  content: '';
  position: absolute;
  left: 1.5px;
  top: 1px;
  width: 8px;
  height: 6px;
  background: rgba(246, 173, 85, 0.85);
  clip-path: polygon(0 0, 100% 30%, 0 100%);
}

/* --- Commentary modal --- */
.cs-rfi-modal {
  position: absolute;
  right: 10px;
  top: 56px;
  width: 148px;
  background: var(--bg-elevated);
  border: 1px solid rgba(154, 123, 255, 0.35);
  border-radius: 5px;
  padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(154, 123, 255, 0.06);
  z-index: 2;
}
.cs-rfi-modal-hd {
  font-size: 9.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--accent-focus);
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border-light);
  line-height: 1.3;
}
.cs-rfi-modal-row {
  margin-bottom: 5px;
}
.cs-rfi-modal-row:last-child { margin-bottom: 0; }

.cs-rfi-modal-lbl {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cs-rfi-modal-val {
  font-size: 10.25px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  line-height: 1.4;
}
.cs-rfi-modal-val--warn {
  color: rgba(246, 173, 85, 0.85);
  font-weight: 600;
}

/* --- Frozen identifier column --- */
.cs-rfi-col--id {
  color: rgba(154, 123, 255, 0.75);
  font-weight: 600;
  border-right: 1px solid rgba(154, 123, 255, 0.2);
  padding-right: 6px;
  margin-right: 2px;
}

/* --- Annotation strip --- */
.cs-rfi-ann-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  padding: 6px 0 4px;
  letter-spacing: 0.02em;
  margin-top: auto;
}
.cs-rfi-ann-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(154, 123, 255, 0.5);
}

/* --- Moment caption --- */
.cs-rfi-moment-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .cs-rfi-moments {
    grid-template-columns: 1fr;
  }
  .cs-rfi-moment {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .cs-rfi-moment:last-child { border-bottom: none; }
}

/* ================================================================
   S2K INITIATIVE  cs-s2k-*
   Blue Origin UI > S2K Initiative section
================================================================ */

.cs-s2k {
  margin-top: var(--space-2);
}

.cs-s2k-eyebrow {
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-s2k-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-s2k-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Flow container --- */
.cs-s2k-flow {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: start;
}

/* --- Arrow connector --- */
.cs-s2k-arrow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 52px;
}

/* --- Single step --- */
.cs-s2k-step {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}

.cs-s2k-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-s2k-step-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(72, 187, 120, 0.55);
}

.cs-s2k-step-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Mobile screen simulation --- */
.cs-s2k-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

.cs-s2k-screen-bar {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-s2k-screen-title {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--text-primary);
  text-transform: uppercase;
}

.cs-s2k-screen-sub {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

.cs-s2k-screen-bar--warn {
  background: rgba(246, 173, 85, 0.05);
  border-bottom-color: rgba(246, 173, 85, 0.2);
}
.cs-s2k-screen-bar--warn .cs-s2k-screen-title {
  color: rgba(246, 173, 85, 0.85);
}

/* --- Progress (Step 1) --- */
.cs-s2k-progress-wrap {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border-light);
}

.cs-s2k-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  margin-bottom: 5px;
  letter-spacing: 0.03em;
}

.cs-s2k-progress-track {
  height: 3px;
  background: var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-s2k-progress-fill {
  height: 100%;
  background: rgba(72, 187, 120, 0.65);
  border-radius: var(--radius-sm);
}

/* --- Task list (Step 1) --- */
.cs-s2k-tasklist { padding: 5px 0; }

.cs-s2k-task {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  font-size: 10.75px;
  font-family: var(--font-sans);
}

.cs-s2k-task--done    { opacity: 0.5; }
.cs-s2k-task--active  { background: rgba(72, 187, 120, 0.07); }
.cs-s2k-task--pending { opacity: 0.3; }

.cs-s2k-task-name { color: var(--text-secondary); }
.cs-s2k-task-qty  { font-size: 9.5px; color: var(--text-muted); }

.cs-s2k-task-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(72, 187, 120, 0.65);
  display: block;
  position: relative;
  flex-shrink: 0;
}
.cs-s2k-task-check::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 2.5px;
  width: 4px;
  height: 2px;
  border-left: 1.5px solid rgba(0, 0, 0, 0.55);
  border-bottom: 1.5px solid rgba(0, 0, 0, 0.55);
  transform: rotate(-45deg);
}

.cs-s2k-task-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(72, 187, 120, 0.85);
  display: block;
  flex-shrink: 0;
}

.cs-s2k-task-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  display: block;
  flex-shrink: 0;
}

/* --- Scan zone (Step 2) --- */
.cs-s2k-scan-zone {
  flex: 1;
  padding: 14px 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cs-s2k-scan-icon {
  width: 38px;
  height: 26px;
  border: 1.5px solid rgba(72, 187, 120, 0.4);
  border-radius: var(--radius-sm);
  position: relative;
  margin-bottom: 2px;
}
.cs-s2k-scan-icon::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; right: 5px;
  height: 1.5px;
  background: rgba(72, 187, 120, 0.6);
}
.cs-s2k-scan-icon::after {
  content: '';
  position: absolute;
  left: 5px; top: 12px; right: 5px;
  height: 1.5px;
  background: rgba(72, 187, 120, 0.3);
}

.cs-s2k-scan-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.cs-s2k-scan-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid rgba(72, 187, 120, 0.3);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-top: 4px;
}

.cs-s2k-scan-cursor {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: rgba(72, 187, 120, 0.8);
  letter-spacing: 0.02em;
}
.cs-s2k-scan-cursor::after {
  content: '|';
  color: rgba(72, 187, 120, 0.55);
  animation: cs-s2k-blink 1.1s step-end infinite;
}

@keyframes cs-s2k-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Confirm button (Step 2) --- */
.cs-s2k-confirm-btn {
  margin: 8px 12px 12px;
  padding: 8px 0;
  background: rgba(72, 187, 120, 0.12);
  border: 1px solid rgba(72, 187, 120, 0.32);
  border-radius: var(--radius);
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(72, 187, 120, 0.85);
  text-align: center;
}

/* --- Alert (Step 3) --- */
.cs-s2k-alert {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: rgba(246, 173, 85, 0.05);
  border-bottom: 1px solid rgba(246, 173, 85, 0.12);
}

.cs-s2k-alert-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(246, 173, 85, 0.7);
  position: relative;
}
.cs-s2k-alert-icon::before {
  content: '!';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: rgba(246, 173, 85, 0.85);
  line-height: 1;
}

.cs-s2k-alert-msg {
  font-size: 10.25px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  line-height: 1.45;
}

/* --- Exception actions (Step 3) --- */
.cs-s2k-exception-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 12px 12px;
}

.cs-s2k-btn {
  padding: 7px 0;
  border-radius: var(--radius-sm);
  font-size: 9.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
}
.cs-s2k-btn--ghost {
  border: 1px solid var(--border-mid);
  color: var(--text-muted);
  background: transparent;
}
.cs-s2k-btn--primary {
  background: rgba(72, 187, 120, 0.11);
  border: 1px solid rgba(72, 187, 120, 0.3);
  color: rgba(72, 187, 120, 0.85);
}

/* --- Annotation strip --- */
.cs-s2k-ann-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  padding: 7px 14px;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-s2k-ann-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(72, 187, 120, 0.5);
}

/* --- Step caption --- */
.cs-s2k-step-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .cs-s2k-flow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cs-s2k-arrow {
    padding-top: 0;
    justify-content: center;
    transform: rotate(90deg);
  }
}

/* ================================================================
   OUTCOMES & FEEDBACK  cs-of-*
   Blue Origin UI > Outcomes & Feedback section
================================================================ */

.cs-of {
  margin-top: var(--space-2);
}

.cs-of-eyebrow {
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-of-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-of-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Card grid --- */
.cs-of-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--border-light);
}

/* --- Individual card --- */
.cs-of-card {
  background: var(--bg-elevated);
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Card top: badge + status --- */
.cs-of-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Initiative badge --- */
.cs-of-badge {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cs-of-badge--rfi { color: rgba(154, 123, 255, 0.85); }
.cs-of-badge--s2k { color: rgba(72,  187, 120, 0.85); }
.cs-of-badge--bm  { color: rgba(99,  179, 237, 0.85); }

/* --- Status chip --- */
.cs-of-status {
  font-size: 9.5px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.cs-of-status--beta  {
  background: rgba(154, 123, 255, 0.08);
  color: rgba(154, 123, 255, 0.75);
  border: 1px solid rgba(154, 123, 255, 0.2);
}
.cs-of-status--pilot {
  background: rgba(72,  187, 120, 0.08);
  color: rgba(72,  187, 120, 0.75);
  border: 1px solid rgba(72,  187, 120, 0.2);
}
.cs-of-status--proto {
  background: rgba(99,  179, 237, 0.08);
  color: rgba(99,  179, 237, 0.75);
  border: 1px solid rgba(99,  179, 237, 0.2);
}

/* --- Divider rule per initiative --- */
.cs-of-divider {
  width: 28px;
  height: 1px;
}
.cs-of-card--rfi .cs-of-divider { background: rgba(154, 123, 255, 0.3); }
.cs-of-card--s2k .cs-of-divider { background: rgba(72,  187, 120, 0.3); }
.cs-of-card--bm  .cs-of-divider { background: rgba(99,  179, 237, 0.3); }

/* --- Card text --- */
.cs-of-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.cs-of-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* --- Responsive --- */
@media (max-width: 700px) {
  .cs-of-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 1px;
  }
  .cs-of-card {
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
  }
  .cs-of-card:last-child { border-bottom: none; }
}

/* ================================================================
   BLUE MOON INITIATIVE  cs-bm-*
   Blue Origin UI > Blue Moon Initiative section
================================================================ */

.cs-bm {
  margin-top: var(--space-2);
}

.cs-bm-eyebrow {
  font-size: 12px;
  font-family: var(--font-sans);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

.cs-bm-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 calc(var(--space-1) * 0.75);
  line-height: 1.4;
}

.cs-bm-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 680px;
  margin-bottom: var(--space-3);
}

/* --- Moments container --- */
.cs-bm-moments {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
}

/* --- Moment base --- */
.cs-bm-moment {
  display: flex;
  flex-direction: column;
}

.cs-bm-moment--hero {
  border-bottom: 1px solid var(--border-light);
}

/* --- Lower pair --- */
.cs-bm-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cs-bm-moment--half {
  border-right: 1px solid var(--border-light);
}
.cs-bm-moment--half:last-child { border-right: none; }

/* --- Moment head --- */
.cs-bm-moment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-base);
}

.cs-bm-moment-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(99, 179, 237, 0.5);
}

.cs-bm-moment-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* --- Stage base --- */
.cs-bm-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-base);
}

/* --- Orbit stage --- */
.cs-bm-stage--orbit {
  background: radial-gradient(ellipse at 50% 0%, rgba(99, 179, 237, 0.04) 0%, transparent 65%),
              var(--bg-base);
}

.cs-bm-orbit-wrap {
  flex: 1;
  padding: 14px 14px 4px;
}
.cs-bm-orbit-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}

.cs-bm-orbit-readouts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 14px 10px;
  border-top: 1px solid rgba(99, 179, 237, 0.07);
}

.cs-bm-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-bm-readout-lbl {
  font-size: 8.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-bm-readout-val {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.cs-bm-readout-val--ok { color: rgba(72, 187, 120, 0.7); }

/* --- Image stages --- */
.cs-bm-stage--img {
  overflow: hidden;
  padding: 0;
}

.cs-bm-img-hero {
  flex: 1;
  overflow: hidden;
}
.cs-bm-img-hero img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.cs-bm-img-half {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-base);
}
.cs-bm-img-half img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* --- Telemetry stage --- */
.cs-bm-stage--telem {
  padding: 12px 14px 0;
}

.cs-bm-telem-group { margin-bottom: 2px; }

.cs-bm-telem-group-lbl {
  font-size: 8.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(99, 179, 237, 0.4);
  margin-bottom: 5px;
}

.cs-bm-telem-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-sans);
}
.cs-bm-telem-row:last-child { border-bottom: none; }

.cs-bm-telem-name {
  font-size: 9.5px;
  color: var(--text-secondary);
}
.cs-bm-telem-val {
  font-size: 9.5px;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.cs-bm-telem-state {
  font-size: 8.5px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  min-width: 28px;
  text-align: center;
}
.cs-bm-state--ok {
  background: rgba(72,  187, 120, 0.07);
  color:      rgba(72,  187, 120, 0.6);
  border: 1px solid rgba(72, 187, 120, 0.14);
}
.cs-bm-state--warn {
  background: rgba(246, 173, 85, 0.1);
  color:      rgba(246, 173, 85, 0.8);
  border: 1px solid rgba(246, 173, 85, 0.2);
}

.cs-bm-telem-divider {
  height: 1px;
  background: var(--border-light);
  margin: 8px 0;
}

/* --- Control stage --- */
.cs-bm-stage--control {
  padding: 14px 14px 0;
  gap: 12px;
}

.cs-bm-ctrl-mode {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-bm-ctrl-mode-lbl {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.cs-bm-ctrl-toggle {
  display: flex;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cs-bm-ctrl-opt {
  padding: 4px 10px;
  color: var(--text-muted);
}
.cs-bm-ctrl-opt--active {
  background: rgba(99, 179, 237, 0.14);
  color: rgba(99, 179, 237, 0.85);
}

.cs-bm-ctrl-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cs-bm-ctrl-status-label {
  font-size: 10.25px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
}
.cs-bm-ctrl-status-sub {
  font-size: 9px;
  font-family: var(--font-sans);
  color: var(--text-muted);
}

.cs-bm-ctrl-override {
  padding: 7px 0;
  background: transparent;
  border: 1px solid rgba(99, 179, 237, 0.2);
  border-radius: var(--radius-sm);
  font-size: 10.25px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(99, 179, 237, 0.55);
  text-align: center;
}

/* --- Annotation strip --- */
.cs-bm-ann-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  padding: 7px 14px;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border-light);
  background: var(--bg-base);
  margin-top: auto;
}
.cs-bm-ann-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(99, 179, 237, 0.45);
}

/* --- Moment caption --- */
.cs-bm-moment-caption {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
}

/* --- Responsive --- */
@media (max-width: 800px) {
  .cs-bm-pair {
    grid-template-columns: 1fr;
  }
  .cs-bm-moment--half {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }
  .cs-bm-moment--half:last-child { border-bottom: none; }
}

/* ================================================================
   CASE STUDY - BLUE ORIGIN VIRTUAL NESTED CONTAINERS  cs-vnc-*
   ================================================================ */

/* --- Overview / TL;DR --- */
.cs-vnc-tldr {
  margin-bottom: var(--space-3);
}
.cs-vnc-tldr p {
  font-size: 16.25px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
  max-width: 680px;
}
.cs-vnc-tldr p:last-child { margin-bottom: 0; }

/* --- Section label --- */
.cs-vnc-label {
  font-size: 12px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-interactive);
  margin-bottom: var(--space-1);
}

/* --- Research stats row --- */
.cs-vnc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-3);
}
.cs-vnc-stat {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-stat-num {
  font-size: 28.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--accent-interactive);
  line-height: 1;
  margin-bottom: 5px;
}
.cs-vnc-stat-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* --- Facility grid --- */
.cs-vnc-fac-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-fac {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}
.cs-vnc-fac-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border-light);
}
.cs-vnc-fac-id {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  margin-bottom: 3px;
}
.cs-vnc-fac-name {
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-vnc-fac-sub {
  font-size: 10.75px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cs-vnc-fac-body {
  padding: 8px 14px 12px;
}
.cs-vnc-fac-row {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.cs-vnc-fac-row:last-child { border-bottom: none; }
.cs-vnc-fac-row-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.cs-vnc-fac-row-val {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Friction grid --- */
.cs-vnc-friction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-friction {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-friction-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  opacity: 1;
  margin-bottom: 5px;
}
.cs-vnc-friction-title {
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.cs-vnc-friction-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Opportunity grid --- */
.cs-vnc-opp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-opp {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-opp-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-interactive);
  opacity: 0.55;
  margin-bottom: 5px;
}
.cs-vnc-opp-title {
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.cs-vnc-opp-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Outcome cards --- */
.cs-vnc-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin: var(--space-2) 0;
}
.cs-vnc-outcome {
  border: 1px solid var(--border-mid);
  border-top: 2px solid var(--accent-interactive);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg-elevated);
}
.cs-vnc-outcome-title {
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 7px;
}
.cs-vnc-outcome-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Workflow modules --- */
.cs-vnc-wf {
  margin-top: var(--space-3);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}
.cs-vnc-wf-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-panel);
}
.cs-vnc-wf-meta { flex: 1; min-width: 0; }
.cs-vnc-wf-eyebrow {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  display: block;
  margin-bottom: 5px;
}
.cs-vnc-wf-title {
  font-size: 16.25px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 5px;
}
.cs-vnc-wf-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
.cs-vnc-wf-states {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}
.cs-vnc-wf-state {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.cs-vnc-wf-state--current {
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
}
.cs-vnc-wf-state--future {
  background: rgba(154,123,255,0.10);
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.25);
}
/* Image frame */
.cs-vnc-wf-frame {
  position: relative;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-mid);
  overflow: hidden;
  cursor: zoom-in;
}
.cs-vnc-wf-frame img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.cs-vnc-wf-frame:hover img { transform: scale(1.015); }
.cs-vnc-wf-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 16px 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  pointer-events: none;
}
.cs-vnc-wf-overlay-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.4);
}
/* Annotation tags - two-column group layout */
.cs-vnc-wf-anns {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-panel);
}
.cs-vnc-wf-anns-group {
  flex: 1;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cs-vnc-wf-anns-group + .cs-vnc-wf-anns-group {
  border-left: 1px solid var(--border-mid);
}
.cs-vnc-wf-anns-lbl {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  line-height: 1;
}
.cs-vnc-wf-anns-lbl--prob { color: var(--text-muted); }
.cs-vnc-wf-anns-lbl--opp  { color: var(--accent-interactive); }
.cs-vnc-wf-anns-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cs-vnc-wf-ann {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 2px 8px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
}
.cs-vnc-wf-ann--opp {
  color: var(--accent-interactive);
  border-color: rgba(154,123,255,0.28);
  background: rgba(154,123,255,0.07);
}

/* Flow legend key */
.cs-vnc-wf-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px 3px;
  background: var(--bg-base);
}
.cs-vnc-wf-legend-item {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.cs-vnc-wf-legend-item::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.cs-vnc-wf-legend-item--step {
  color: var(--text-muted);
}
.cs-vnc-wf-legend-item--step::before {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
}
.cs-vnc-wf-legend-item--gap {
  color: rgba(255,168,80,0.90);
}
.cs-vnc-wf-legend-item--gap::before {
  background: rgba(255,168,80,0.06);
  border: 1px dashed rgba(255,168,80,0.40);
}

/* Flow strip */
.cs-vnc-wf-strip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px 10px;
  background: var(--bg-base);
  overflow-x: auto;
}
.cs-vnc-wf-strip-step {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-vnc-wf-strip-step--gap {
  color: rgba(255,168,80,0.92);
  border: 1px dashed rgba(255,168,80,0.38);
  background: rgba(255,168,80,0.05);
}
.cs-vnc-wf-strip-arrow {
  font-size: 13.75px;
  color: var(--border-mid);
  padding: 0 6px;
  flex-shrink: 0;
}
/* Nested container callout */
.cs-vnc-wf-nested {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-mid);
  background: var(--bg-panel);
}
.cs-vnc-wf-nested-visual { flex-shrink: 0; width: 200px; }
.cs-vnc-wf-nested-visual img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
}
.cs-vnc-wf-nested-text { flex: 1; min-width: 0; padding-top: 2px; }
.cs-vnc-wf-nested-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent-interactive);
  margin-bottom: 6px;
}
.cs-vnc-wf-nested-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Standalone opportunity callout card */
.cs-vnc-opp-card {
  margin-top: var(--space-2);
  border: 1px solid rgba(154,123,255,0.32);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}
.cs-vnc-opp-card-header {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(154,123,255,0.18);
  background: rgba(154,123,255,0.06);
}
.cs-vnc-opp-card-eyebrow {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  display: block;
  margin-bottom: 5px;
}
.cs-vnc-opp-card-title {
  font-size: 16.25px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-vnc-opp-card-body {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 16px;
}
.cs-vnc-opp-card-img {
  flex-shrink: 0;
  width: 200px;
}
.cs-vnc-opp-card-img img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(154,123,255,0.22);
  border-radius: var(--radius-sm);
}
.cs-vnc-opp-card-desc {
  font-size: 13.75px;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
  min-width: 0;
  margin: 0;
}
@media (max-width: 600px) {
  .cs-vnc-wf-anns          { flex-direction: column; }
  .cs-vnc-wf-anns-group + .cs-vnc-wf-anns-group { border-left: none; border-top: 1px solid var(--border-mid); }
  .cs-vnc-opp-card-body    { flex-direction: column; }
  .cs-vnc-opp-card-img     { width: 100%; }
}

/* --- Operational signal strip --- */
.cs-vnc-signals {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2) 0;
  background: var(--bg-elevated);
}
.cs-vnc-signal {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-mid);
}
.cs-vnc-signal:last-child { border-bottom: none; }
.cs-vnc-signal-val {
  font-size: 18.75px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--accent-interactive);
  flex-shrink: 0;
  min-width: 60px;
  line-height: 1.2;
}
.cs-vnc-signal-label {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Inventory lifecycle map --- */
.cs-vnc-lifecycle {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2) 0;
}
.cs-vnc-lc-stage {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-elevated);
}
.cs-vnc-lc-stage:last-child { border-bottom: none; }
.cs-vnc-lc-stage:nth-child(even) { background: var(--bg-panel); }
.cs-vnc-lc-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.cs-vnc-lc-name {
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cs-vnc-lc-friction {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
}
.cs-vnc-lc-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.28);
  background: rgba(154,123,255,0.07);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  align-self: start;
  flex-shrink: 0;
}

/* --- Finding → Opportunity signal tag --- */
.cs-vnc-opp-signal {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 7px;
  background: rgba(255,255,255,0.03);
}

/* ================================================================
   BO-UX: RESEARCH DISCOVERY - OPERATIONAL SIGNALS (cs-rdos-*)
   Horizontal lifecycle flow + editorial signal panels
   ================================================================ */

/* Section eyebrow label */
.cs-rdos-eyebrow {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  margin-bottom: 10px;
  display: block;
}

/* Lifecycle flow - 2×3 grid */
.cs-rdos-flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: var(--space-2) 0 var(--space-3);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--border-mid);
}
.cs-rdos-flow-stage {
  padding: 16px 14px 14px;
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-rdos-flow-stage:nth-child(n+4) {
  background: var(--bg-panel);
}
.cs-rdos-fs-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}
.cs-rdos-fs-name {
  font-size: 13.75px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}
.cs-rdos-fs-insight {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
}
.cs-rdos-fs-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.28);
  background: rgba(154,123,255,0.07);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
}
.cs-rdos-fs-vis {
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 4px;
}
/*
  Lifecycle card visual abstractions - each maps to the operational friction of its stage.
  All are pure CSS (background gradients / grid), no extra markup needed.
*/

/* Stage 01 - Shipment Initiation: staggered document rows → fragmented, misaligned records */
.cs-rdos-fs-vis--init {
  background:
    linear-gradient(to right, rgba(154,123,255,0.42) 63%, transparent 63%) 0 4px / 100% 3px no-repeat,
    linear-gradient(to right, transparent 14%, rgba(154,123,255,0.22) 14%, rgba(154,123,255,0.22) 79%, transparent 79%) 0 12px / 100% 3px no-repeat,
    linear-gradient(to right, rgba(154,123,255,0.32) 47%, transparent 47%) 9px 20px / 91% 3px no-repeat;
}

/* Stage 02 - Transit: solid left node → dashed path → dim right node → signal absent in transit */
.cs-rdos-fs-vis--transit {
  background:
    radial-gradient(circle at 7px 50%, rgba(154,123,255,0.55) 4px, transparent 5px),
    radial-gradient(circle at calc(100% - 7px) 50%, rgba(154,123,255,0.18) 4px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(154,123,255,0.28) 0px, rgba(154,123,255,0.28) 5px, transparent 5px, transparent 10px) 16px 50% / calc(100% - 32px) 1px no-repeat;
}

/* Stage 03 - Receiving: uniform grid (all solid) → items arriving and being individually counted */
.cs-rdos-fs-vis--grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}
.cs-rdos-fs-vis--grid span { background: rgba(154,123,255,0.22); border-radius: var(--radius-sm); }
.cs-rdos-fs-vis--grid span.dim { background: rgba(154,123,255,0.05); }

/* Stage 04 - Storage: checkerboard dim grid → container contents present but obscured */
/* (uses --grid with .dim spans - handled via HTML span variants) */

/* Stage 05 - Return to Inventory: forward path + shorter reverse path → disjointed, incomplete return */
.cs-rdos-fs-vis--return {
  background:
    linear-gradient(to right, rgba(154,123,255,0.45) 0%, rgba(154,123,255,0.45) 65%, transparent 65%) 0 7px / 100% 2px no-repeat,
    linear-gradient(to left, rgba(154,123,255,0.20) 0%, rgba(154,123,255,0.20) 46%, transparent 46%) 0 16px / 100% 2px no-repeat;
}

/* Stage 06 - Audit: uneven bar columns → mismatched record counts, discrepancies across the ledger */
.cs-rdos-fs-vis--audit {
  background:
    linear-gradient(to top, rgba(154,123,255,0.45) 72%, transparent 72%) 16% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.20) 38%, transparent 38%) 30% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.40) 58%, transparent 58%) 44% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.14) 22%, transparent 22%) 58% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.35) 47%, transparent 47%) 72% 0 / 7px 100% no-repeat,
    linear-gradient(to top, rgba(154,123,255,0.25) 63%, transparent 63%) 86% 0 / 7px 100% no-repeat;
}

/* --nodes kept for backwards compat, replaced by --transit / --return in lifecycle cards */
.cs-rdos-fs-vis--nodes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  position: relative;
}
.cs-rdos-fs-vis--nodes::before {
  content: '';
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  height: 1px;
  border-top: 1px dashed rgba(154,123,255,0.25);
  transform: translateY(-50%);
}
.cs-rdos-fs-vis--nodes::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(154,123,255,0.45);
  flex-shrink: 0;
}
.cs-rdos-fs-node-r {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(154,123,255,0.12);
  border: 1px dashed rgba(154,123,255,0.35);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Signal panels grid */
.cs-rdos-signals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
  background: var(--border-mid);
}
.cs-rdos-sp {
  padding: 16px 18px 18px;
  background: var(--bg-elevated);
  position: relative;
  overflow: hidden;
}
.cs-rdos-sp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(154,123,255,0.50) 0%, transparent 60%);
}
/* glyph watermark removed */
.cs-rdos-sp-val {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--accent-interactive);
  line-height: 1.1;
  letter-spacing: 0;
  margin-bottom: 4px;
}
.cs-rdos-sp-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-primary);
  font-weight: 600;
  display: block;
  margin-bottom: 9px;
}
.cs-rdos-sp-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Fifth signal panel spans full width */
.cs-rdos-sp--full {
  grid-column: 1 / -1;
}

/* Responsive: stack signals on narrow viewports */
@media (max-width: 560px) {
  .cs-rdos-signals {
    grid-template-columns: 1fr;
  }
  .cs-rdos-sp--full {
    grid-column: 1;
  }
  .cs-rdos-flow {
    grid-template-columns: 1fr;
  }
  .cs-rdos-flow-stage:nth-child(n+4) {
    background: var(--bg-elevated);
  }
  .cs-rdos-flow-stage:nth-child(even) {
    background: var(--bg-panel);
  }
}

/* Role card spaced modifier - Research Discovery */
.cs-kd--spaced {
  gap: 0;
}
.cs-kd--spaced .cs-kd-item {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-mid);
  gap: var(--space-3);
}
.cs-kd--spaced .cs-kd-item:first-child {
  border-top: none;
  padding-top: 0;
}
.cs-kd--spaced .cs-kd-num {
  color: var(--accent-interactive);
  opacity: 0.90;
  line-height: 0.85;
}
.cs-kd--spaced .cs-kd-fields {
  padding-left: calc(56px + var(--space-2));
}
@media (max-width: 560px) {
  .cs-kd--spaced .cs-kd-fields {
    padding-left: 0;
  }
}

/* ================================================================
   BO-UX: CROSS-FACILITY WORKFLOW ANALYSIS (cs-cfw-*)
   Three-panel facility comparison + synthesis strip
   ================================================================ */

/* Three-column facility panel grid */
.cs-cfw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-mid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
}

.cs-cfw-panel {
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
}

/* Journey map image crop frame */
.cs-cfw-frame {
  position: relative;
  height: 185px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-base);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-mid);
}

/* cs-img-btn wrapper is injected by wrapCaseStudyImages() - must fill frame */
.cs-cfw-frame .cs-img-btn {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  border-radius: 0;
}

.cs-cfw-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  transition: transform 0.40s ease;
  filter: brightness(0.82) contrast(1.05) saturate(0.75);
  border-radius: 0;
  box-shadow: none;
  max-width: none;
}

.cs-cfw-frame:hover img,
.cs-cfw-frame .cs-img-btn:hover img {
  transform: scale(1.055);
  box-shadow: none;
}

/* Facility code badge - sits inside the frame */
.cs-cfw-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10.75px;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.92);
  background: rgba(0,0,0,0.60);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  line-height: 1.5;
  z-index: 1;
}

/* Zoom-hint label on frame hover */
.cs-cfw-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.40);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 1;
}

.cs-cfw-frame:hover .cs-cfw-hint {
  opacity: 1;
}

/* Bottom gradient fade inside frame */
.cs-cfw-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(to top, rgba(0,0,0,0.50) 0%, transparent 100%);
  pointer-events: none;
}

/* Panel text body */
.cs-cfw-body {
  padding: 14px 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.cs-cfw-facility {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--accent-interactive);
  font-weight: 700;
}

.cs-cfw-obs {
  font-size: 13.25px;
  color: var(--text-secondary);
  line-height: 1.62;
  flex: 1;
}

.cs-cfw-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border: 1px solid var(--border-mid);
  background: rgba(255,255,255,0.025);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  align-self: flex-start;
}

/* Synthesis strip */
.cs-cfw-syn {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.cs-cfw-syn-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-mid);
}

.cs-cfw-syn-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  font-weight: 700;
  white-space: nowrap;
}

.cs-cfw-syn-rule {
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}

.cs-cfw-syn-count {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cs-cfw-syn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-mid);
}

.cs-cfw-syn-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-elevated);
}

.cs-cfw-syn-num {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: var(--accent-interactive);
  opacity: 1;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 16px;
}

.cs-cfw-syn-text {
  font-size: 13.25px;
  color: var(--text-secondary);
  line-height: 1.58;
}

/* Traceability gaps divider within tab */
.cs-cfw-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--space-3) 0 var(--space-2);
}

.cs-cfw-divider-label {
  font-size: 10.75px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  white-space: nowrap;
  font-weight: 700;
}

.cs-cfw-divider-rule {
  flex: 1;
  height: 1px;
  background: var(--border-mid);
}

/* Lightbox overlay for full-map view */
.cs-cfw-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 32px;
}

.cs-cfw-lightbox.active {
  display: flex;
}

.cs-cfw-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,0.60);
}

.cs-cfw-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 12px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.50);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}

/* Responsive */
@media (max-width: 680px) {
  .cs-cfw-grid {
    grid-template-columns: 1fr;
  }
  .cs-cfw-frame {
    height: 160px;
  }
  .cs-cfw-syn-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   BO-UX: STRATEGIC DESIGN OPPORTUNITIES (cs-sdo-*)
   3-column pathway table: Research Signal → UX Opportunity → Operational Value
   ================================================================ */

.cs-sdo-table {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
}

.cs-sdo-thead {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-mid);
  padding: 11px 0;
}

.cs-sdo-th {
  padding: 0 18px;
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.cs-sdo-th-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.75px;
  color: var(--accent-interactive);
  opacity: 0.28;
  line-height: 1;
}

.cs-sdo-rows {
  display: flex;
  flex-direction: column;
}

.cs-sdo-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border-mid);
  border-bottom: 1px solid var(--border-mid);
}

.cs-sdo-row:last-child {
  border-bottom: none;
}

.cs-sdo-cell {
  background: var(--bg-elevated);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background 0.18s ease;
}

.cs-sdo-row:hover .cs-sdo-cell {
  background: var(--bg-hover, rgba(154,123,255,0.04));
}

.cs-sdo-cell-idx {
  font-size: 10.75px;
  font-family: var(--font-sans);
  color: rgba(154,123,255,0.75);
  letter-spacing: 0.08em;
  line-height: 1;
}

.cs-sdo-cell-label {
  font-size: 13.75px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.cs-sdo-cell-body {
  font-size: 13.75px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Column accent tones */
.cs-sdo-cell--signal .cs-sdo-cell-label {
  color: var(--text-secondary);
}

.cs-sdo-cell--opp .cs-sdo-cell-label {
  color: var(--accent-interactive);
}

.cs-sdo-cell--value .cs-sdo-cell-label {
  color: rgba(110,200,160,0.85);
}

/* Responsive */
@media (max-width: 680px) {
  .cs-sdo-thead {
    display: none;
  }
  .cs-sdo-row {
    grid-template-columns: 1fr;
  }
  .cs-sdo-cell--signal::before {
    content: 'Research Signal';
    font-size: 9.5px;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
  }
  .cs-sdo-cell--opp::before {
    content: 'UX Opportunity';
    font-size: 9.5px;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-interactive);
    opacity: 0.60;
    display: block;
    margin-bottom: 4px;
  }
  .cs-sdo-cell--value::before {
    content: 'Operational Value';
    font-size: 9.5px;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(110,200,160,0.60);
    display: block;
    margin-bottom: 4px;
  }
}

/* ================================================================
   BO-UX: SHARED UX PRINCIPLES (cs-uxp-*)
   Full-width editorial principle entries with abstract CSS visual cues
   ================================================================ */

.cs-uxp-list {
  margin: var(--space-2) 0 var(--space-3);
}

.cs-uxp-item {
  display: grid;
  grid-template-columns: 44px 1fr 60px;
  gap: 0 20px;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-mid);
  align-items: start;
}

.cs-uxp-item:first-child {
  border-top: none;
  padding-top: 0;
}

.cs-uxp-idx {
  font-size: 24.25px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: rgba(154,123,255,0.78);
  line-height: 1.1;
  text-align: right;
  padding-top: 2px;
}

.cs-uxp-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-uxp-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

.cs-uxp-principle {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.cs-uxp-implication {
  font-size: 13.75px;
  line-height: 1.60;
  color: var(--text-muted);
  border-left: 2px solid rgba(154,123,255,0.22);
  padding-left: 12px;
}

.cs-uxp-implication-label {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(154,123,255,0.48);
  display: block;
  margin-bottom: 5px;
}

/* ---- Visual cue box (56×56 abstract CSS illustrations) ---- */

.cs-uxp-vis {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  opacity: 1;
  transition: transform 0.30s ease;
}

.cs-uxp-item:hover .cs-uxp-vis {
  transform: scale(1.06);
}

/* 01: Visibility Before Action
   Three horizontal bars, bright top → dim bottom: metadata "unlocking" */
.cs-uxp-vis--visibility {
  background:
    linear-gradient(90deg, rgba(154,123,255,0.72), rgba(154,123,255,0.48))  0 6px  / 56px 4px  no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.30), rgba(154,123,255,0.18))  0 19px / 44px 3px  no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.14), rgba(154,123,255,0.06))  0 30px / 32px 3px  no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.06), rgba(154,123,255,0.02))  0 40px / 22px 2px  no-repeat;
}

/* 02: Traceability Across Movement
   4 nodes connected by a fading dashed path - continuous chain */
.cs-uxp-vis--traceability {
  background:
    radial-gradient(circle 4px at  4px 28px, rgba(154,123,255,0.72) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 20px 28px, rgba(154,123,255,0.46) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 36px 28px, rgba(154,123,255,0.30) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 52px 28px, rgba(154,123,255,0.18) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.30), rgba(154,123,255,0.30))  9px 27px / 6px 2px no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.22), rgba(154,123,255,0.22)) 25px 27px / 6px 2px no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.14), rgba(154,123,255,0.14)) 41px 27px / 6px 2px no-repeat;
}

/* 03: Reduce Manual Confirmation
   5 uneven scan bars, left → connector → 1 consolidated bar, right */
.cs-uxp-vis--consolidate {
  background:
    linear-gradient(180deg, rgba(154,123,255,0.30), rgba(154,123,255,0.30))  4px 20px / 3px 14px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.25), rgba(154,123,255,0.25)) 10px 22px / 3px 10px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.22), rgba(154,123,255,0.22)) 16px 24px / 3px  8px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.20), rgba(154,123,255,0.20)) 22px 22px / 3px 10px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.17), rgba(154,123,255,0.17)) 28px 23px / 3px  9px no-repeat,
    linear-gradient(90deg, rgba(154,123,255,0.16), rgba(154,123,255,0.42))  33px 27px / 10px 2px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.75), rgba(154,123,255,0.42)) 46px 12px / 5px 30px no-repeat;
}

/* 04: Metadata as Operational Infrastructure
   3-level tree: root node → 2 branches → 6 leaf nodes */
.cs-uxp-vis--metadata {
  background:
    radial-gradient(circle 4px at 28px  6px, rgba(154,123,255,0.70) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.42), rgba(154,123,255,0.42)) 27px 10px / 2px 12px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.30), rgba(154,123,255,0.30)) 11px 22px / 34px 1px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.26), rgba(154,123,255,0.26)) 11px 23px / 1px 14px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.26), rgba(154,123,255,0.26)) 45px 23px / 1px 14px no-repeat,
    radial-gradient(circle 3px at 11px 40px, rgba(154,123,255,0.50) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 45px 40px, rgba(154,123,255,0.38) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.18), rgba(154,123,255,0.18))  3px 43px / 16px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.18), rgba(154,123,255,0.18)) 37px 43px / 16px 1px no-repeat,
    radial-gradient(circle 2px at  3px 47px, rgba(154,123,255,0.30) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 11px 47px, rgba(154,123,255,0.22) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 19px 47px, rgba(154,123,255,0.16) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 37px 47px, rgba(154,123,255,0.22) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 45px 47px, rgba(154,123,255,0.16) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 2px at 53px 47px, rgba(154,123,255,0.12) 100%, transparent 100%) 0 0 no-repeat;
}

/* 05: Design for Role-Specific Clarity
   One source node → spine → 4 branching role paths with endpoints */
.cs-uxp-vis--roles {
  background:
    radial-gradient(circle 4px at 10px 28px, rgba(154,123,255,0.70) 100%, transparent 100%) 0 0 no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.45), rgba(154,123,255,0.45)) 14px 27px / 14px 2px no-repeat,
    linear-gradient(180deg, rgba(154,123,255,0.28), rgba(154,123,255,0.28)) 27px  9px /  2px 38px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.34), rgba(154,123,255,0.34)) 29px  9px / 14px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.28), rgba(154,123,255,0.28)) 29px 21px / 14px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.22), rgba(154,123,255,0.22)) 29px 33px / 14px 1px no-repeat,
    linear-gradient( 90deg, rgba(154,123,255,0.16), rgba(154,123,255,0.16)) 29px 46px / 14px 1px no-repeat,
    radial-gradient(circle 3px at 46px  9px, rgba(154,123,255,0.55) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 46px 21px, rgba(154,123,255,0.42) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 46px 33px, rgba(154,123,255,0.30) 100%, transparent 100%) 0 0 no-repeat,
    radial-gradient(circle 3px at 46px 46px, rgba(154,123,255,0.20) 100%, transparent 100%) 0 0 no-repeat;
}

/* Responsive */
@media (max-width: 680px) {
  .cs-uxp-item {
    grid-template-columns: 36px 1fr;
  }
  .cs-uxp-vis {
    display: none;
  }
  .cs-uxp-idx {
    font-size: 19.75px;
  }
}

/* ================================================================
   BO-UX: OUTCOMES & ORGANIZATIONAL IMPACT (cs-oi-*)
   2×2 editorial impact panel grid - no KPIs, no inflated claims
   ================================================================ */

.cs-oi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-mid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius);
  overflow: hidden;
  margin: var(--space-2) 0 var(--space-3);
}

.cs-oi-panel {
  background: var(--bg-elevated);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  transition: background 0.18s ease;
}

/* Top accent strip */
.cs-oi-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(154,123,255,0.52) 0%, rgba(154,123,255,0.06) 100%);
}

.cs-oi-panel:hover {
  background: var(--bg-hover);
}

.cs-oi-idx {
  font-size: 10.75px;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--accent-interactive);
  line-height: 1;
}

.cs-oi-title {
  font-size: 16.25px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-oi-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  flex: 1;
  margin: 0;
}

.cs-oi-tag {
  font-size: 9.5px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-interactive);
  border: 1px solid rgba(154,123,255,0.45);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 640px) {
  .cs-oi-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   BO-UX: REFLECTION (cs-ref-*)
   Large-number editorial layout - spacious, typographic, restrained
   ================================================================ */

.cs-ref-list {
  margin: var(--space-3) 0 var(--space-2);
}

.cs-ref-item {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-mid);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0 20px;
  align-items: start;
}

.cs-ref-item:first-child {
  border-top: none;
  padding-top: 0;
}

.cs-ref-num {
  font-size: 44px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: rgba(154,123,255,0.65);
  line-height: 1;
  text-align: right;
  padding-top: 1px;
  letter-spacing: 0;
}

.cs-ref-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-ref-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.cs-ref-text {
  font-size: 15px;
  line-height: 1.70;
  color: var(--text-secondary);
  margin: 0;
}

/* Closing statement */
.cs-ref-close {
  border-top: 1px solid var(--border-mid);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  font-size: 15px;
  line-height: 1.70;
  color: var(--text-muted);
  font-style: italic;
}

/* Responsive */
@media (max-width: 680px) {
  .cs-ref-item {
    grid-template-columns: 40px 1fr;
    gap: 0 14px;
  }
  .cs-ref-num {
    font-size: 30.75px;
  }
}

/* ================================================================
   AAR harmonization (Nov 10): big numerals match the AAR case study's
   numbers (bold brand purple) instead of thin, translucent monospace.
   ================================================================ */
.cs-kd-num, .cs-de-num, .cs-vit-num, .cs-ce-num, .cs-cl-num, .cs-wc-stepbar-num {
  font-weight: 800; opacity: 1; line-height: 1; letter-spacing: 0; color: var(--accent);
}
.cs-kd-num, .cs-de-num { font-size: 40px; }
.cs-vit-num { font-size: 36px; }
.cs-ce-num { font-size: 32px; }
.cs-wc-stepbar-num { font-size: 26px; }

/* Roster Champ (Lineup Manager): phone screenshots display at the onboarding popup's size
   (160px wide, centered) to cut scrolling; click any image for the full-size view. */
.case-study img[src*="f=rc/"] {
  width: auto; max-width: 160px; height: auto; display: block; margin-inline: auto;
  border-radius: var(--radius); border: 1px solid var(--border-light);
}

/* ================================================================
   Blue Origin Research: visual pass (Nov 11). Text-heavy sections become
   visuals; components reuse the AAR card/number/chip styles for consistency.
   ================================================================ */
/* Overview: research at a glance */
.bo-glance { display: grid; gap: 16px; padding: 18px 20px; }
.bo-glance-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bo-glance-title { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.bo-glance-tag { padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--fs-eyebrow); font-weight: 600; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); }
.bo-glance-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 14px; border-top: 1px solid var(--border); }
.bo-glance-label { padding-top: 8px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.bo-lifecycle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.bo-lifecycle li { position: relative; padding: 9px 12px 9px 22px; font-size: var(--fs-ui); font-weight: 700; color: var(--text); background: var(--accent-soft); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); }
.bo-lifecycle li:first-child { padding-left: 14px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.bo-lifecycle li + li { margin-left: -6px; }
.case-study-section .bo-gap { position: relative; margin: 12px 0 0; padding: 10px 0 0 0; max-width: none; font-size: var(--fs-meta); line-height: 1.55; color: var(--text-2); }
.bo-gap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; border-top: 3px dashed var(--warning); opacity: 0.8; }
.bo-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bo-methods li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-meta); font-weight: 600; color: var(--text); }
.bo-methods .icon { color: var(--accent); }
.bo-outputs { margin: 2px 0 0; }
/* Outcomes: numbers row spacing */
.bo-numbers { margin: var(--sp-2) 0 var(--sp-4); }
/* Reflection: pull quote */
.bo-quote { margin: var(--sp-2) 0 0; padding: 18px 22px; border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(90deg, var(--accent-soft), transparent); }
.case-study-section .bo-quote p { margin: 0; max-width: none; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; font-weight: 600; font-style: italic; color: var(--text); }

/* Shared UX principles: card grid with each principle's diagram as the card header */
.cs-uxp-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
/* 3 cards over 2: the bottom pair is centered under the top row */
.cs-uxp-list > .cs-uxp-item { grid-column: span 2; grid-template-rows: 48px auto; }
.cs-uxp-list > .cs-uxp-item:nth-child(4) { grid-column: 2 / span 2; }
.cs-uxp-item, .cs-uxp-item:first-child { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "idx . vis" "body body body"; align-items: center; gap: 12px; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.cs-uxp-idx { grid-area: idx; text-align: left; font-size: 28px; font-weight: 800; line-height: 1; padding-top: 0; color: var(--accent); }
.cs-uxp-vis { grid-area: vis; width: 48px; height: 48px; margin-top: 0; }
.cs-uxp-body { align-self: start; }
.cs-uxp-body { grid-area: body; }
.cs-uxp-implication { font-size: var(--fs-meta); border-left-color: var(--accent); color: var(--text-2); }

/* Reflection: lessons as cards */
.cs-ref-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-ref-item, .cs-ref-item:first-child { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 16px 18px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.cs-ref-num { text-align: left; font-size: 32px; font-weight: 800; line-height: 1; padding-top: 0; color: var(--accent); }

@media (max-width: 1100px) {
  .cs-uxp-list, .cs-ref-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-uxp-list > .cs-uxp-item, .cs-uxp-list > .cs-uxp-item:nth-child(4) { grid-column: auto; }
}
@media (max-width: 720px) {
  .cs-uxp-list, .cs-ref-list, .bo-methods { grid-template-columns: minmax(0, 1fr); }
  .cs-uxp-item, .cs-uxp-item:first-child { grid-template-columns: auto minmax(0, 1fr) auto; }
  .cs-uxp-vis { display: block; }
  .cs-ref-item, .cs-ref-item:first-child { grid-template-columns: minmax(0, 1fr); }
  .bo-glance-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bo-lifecycle { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bo-lifecycle li, .bo-lifecycle li:first-child { clip-path: none; border-radius: var(--radius-sm); margin-left: 0; padding-left: 14px; }
}

/* Nested Container Architecture: the wide diagram spans the card above its description */
.cs-vnc-opp-card-body { flex-direction: column; align-items: stretch; }
.cs-vnc-opp-card-img { width: 100%; padding: 12px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.cs-vnc-opp-card-img-el { display: block; width: 100%; max-width: 900px; height: auto; margin-inline: auto; }
.case-study-section .cs-vnc-opp-card-desc { font-size: var(--fs-ui); max-width: none; }