/* One asset class: the narrative on the left, the deployment readout on the
   right. Four of these ship in the markup and AssetShowcase shows one at a
   time, so with no JavaScript all four read as a stacked list. */
.slides { display: flex; flex-direction: column; gap: 32px; }

.slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  /* Reserves the tallest slide, so advancing never resizes the card and
     shunts the controls beneath it up and down. */
  min-height: 240px;
}

/* Only ever set by AssetShowcase. */
.slide[hidden] { display: none; }

.slide-copy { min-width: 0; }

.slide-tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 11px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.slide-title {
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--leading-snug);
  margin: 0;
}

.slide-text {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 12px 0 0;
  max-width: 46ch;
}

.slide-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(24px, 4vw, 44px);
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.slide-stat { min-width: 0; }

.slide-stat-value {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--accent);
  /* Figures of different widths sit above their labels, so fixed advances keep
     the two stats from shifting relative to each other as slides change. */
  font-variant-numeric: tabular-nums;
}

.slide-stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* The deployment readout. Petrol ground, because this is the system talking
   rather than the page, the same distinction the chat answer bubble makes. */
.readout {
  min-width: 0;
  border-radius: var(--radius-md);
  background: var(--petrol-900);
  color: var(--on-dark);
  padding: 18px 20px;
}

.readout-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 14px;
}

.readout-rows { display: flex; flex-direction: column; }

/* Wraps rather than truncating, so nothing scrolls sideways at 320px. */
.readout-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(237, 243, 242, 0.16);
}
.readout-row:last-child { border-bottom: 0; }

.readout-key {
  font-size: var(--text-sm);
  color: var(--accent-bright);
}

.readout-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .slide { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .slide-text { max-width: none; }
}