#case-studies > .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
#case-studies > .grid > * { min-width: 0; }
#case-studies li { gap: 16px; }
#case-studies li > span:last-child { flex-shrink: 0; }
.case-explorer { display: flex; flex-direction: column; gap: 24px; padding: 28px; min-height: 540px; border: 1px solid #253343; background: #080e17; color: #c0cbd5; }
.case-explorer * { letter-spacing: 0; }
.case-explorer [hidden] { display: none !important; }
.explorer-heading { display: flex; align-items: center; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid #253343; font-size: 13px; color: #edf4fc; flex-wrap: wrap; }
.explorer-heading > i { font-size: 22px; color: #64d4f4; }
.explorer-source { margin-left: auto; color: #9caab6; font-size: 11px; }
.metric-selector { display: flex; border-bottom: 1px solid #253343; }
.metric-selector button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 7px; font-size: 12px; color: #a9b8c5; border-bottom: 2px solid transparent; cursor: pointer; }
.metric-selector button[aria-pressed=true] { border-bottom-color: #64d4f4; color: #f1f5f9; background: #142230; }
.case-explorer button:focus-visible, .explorer-link:focus-visible { outline: 2px solid #64d4f4; outline-offset: 4px; }
.metric-selector button:hover { color: #fff; background: #17232e; }
.explorer-reading { display: flex; align-items: baseline; gap: 14px; min-height: 64px; }
.explorer-reading strong { color: #64d4f4; font: 500 42px/1.2 'JetBrains Mono', monospace; white-space: nowrap; }
.explorer-reading span { font-size: 13px; line-height: 1.6; }
.chart-unit { color: #a9b8c5; font: 11px/1.6 'JetBrains Mono', monospace; }
.comparison-bars { height: 185px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 16px 32px 0; border-bottom: 1px solid #34485a; }
.comparison-bar { display: grid; grid-template-rows: 1fr 28px; justify-items: center; width: 100%; height: 100%; min-width: 0; cursor: pointer; }
.comparison-bar > span:last-child { font-size: 12px; align-self: center; }
.bar-column { display: flex; align-items: flex-start; justify-content: center; align-self: end; width: 100%; max-width: 140px; height: var(--bar-height); background: #354859; color: #f4f8fc; border: 1px solid #62788c; border-bottom: 0; transition: background .15s, box-shadow .15s; }
.bar-column b { font: 500 17px/1.5 'JetBrains Mono', monospace; padding-top: 12px; }
.comparison-bar[data-review-bar=after] .bar-column { background: #215674; border-color: #64d4f4; }
.comparison-bar:hover .bar-column, .comparison-bar[aria-pressed=true] .bar-column { background: #266e8f; box-shadow: inset 0 0 0 2px #64d4f4; }
.chart-detail { min-height: 58px; padding-top: 16px; font-size: 12px; line-height: 1.7; color: #d5e1eb; }
.explorer-footnote { color: #98a7b4; font-size: 11px; line-height: 1.7; margin-top: auto; }
.outcome-detail { min-height: 245px; padding: 24px 0; border-block: 1px solid #253343; }
.outcome-detail > i { color: #8ce2b6; font-size: 34px; display: block; margin-bottom: 20px; }
.case-explorer h4 { font-size: 18px; line-height: 1.45; color: #f0f5f9; font-weight: 500; margin-bottom: 12px; }
.outcome-detail p, .stage-detail p { font-size: 14px; line-height: 1.8; color: #b3c0cc; }
.workflow-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; gap: 12px; padding-block: 10px; }
.workflow-stages::before { content: ''; position: absolute; top: 32px; left: 16%; right: 16%; height: 1px; background: #34485a; }
.workflow-stages button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 82px; cursor: pointer; font-size: 12px; }
.workflow-stages i { display: grid; place-items: center; width: 46px; height: 46px; background: #080e17; border: 1px solid #546879; border-radius: 50%; font-size: 22px; color: #a9b8c5; }
.workflow-stages button[aria-pressed=true] i, .workflow-stages button:hover i { border-color: #64d4f4; background: #123647; color: #64d4f4; }
.stage-detail { min-height: 155px; padding-top: 8px; }
.stage-detail .chart-unit { display: block; margin-bottom: 10px; color: #64d4f4; }
.explorer-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: auto; border-top: 1px solid #253343; padding-top: 20px; }
.explorer-outcomes span { display: block; font-size: 11px; line-height: 1.7; color: #a9b8c5; margin-bottom: 8px; }
.explorer-outcomes strong { font: 500 23px/1.4 'JetBrains Mono', monospace; color: #8ce2b6; }
.explorer-outcomes .scope-label { font-size: 16px; }
.explorer-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #64d4f4; padding-top: 16px; border-top: 1px solid #253343; }
@media (max-width: 1100px) { #case-studies > .grid { gap: 28px; } .case-explorer { padding: 22px; } }
@media (max-width: 900px) {
  #case-studies > .grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #case-studies > .grid > [vid="145"], #case-studies > .grid > [vid="220"], #case-studies > .grid > [vid="242"] { order: 0; }
  #case-studies > .grid > [vid="169"], #case-studies > .grid > [vid="196"], #case-studies > .grid > [vid="263"] { order: 1; }
}
@media (max-width: 480px) {
  .case-explorer { padding: 18px; gap: 20px; min-height: 540px; }
  .explorer-heading { gap: 8px; }
  .explorer-source { width: 100%; margin-left: 30px; }
  .metric-selector button { font-size: 11px; padding-inline: 3px; }
  .explorer-reading { align-items: flex-start; flex-direction: column; gap: 6px; min-height: 90px; }
  .explorer-reading strong { font-size: 34px; }
  .comparison-bars { padding-inline: 12px; gap: 22px; }
  .chart-detail { min-height: 78px; }
  .stage-detail { min-height: 180px; }
  .explorer-outcomes { gap: 12px; }
  .explorer-outcomes strong { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .case-explorer * { transition: none !important; } }