.case-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 21.9375rem;
  height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface-dark);
  color: var(--color-on-accent);
}

.case-card[hidden] { display: none; }

.case-card--compact {
  min-height: 14.1875rem;
  gap: var(--space-sm);
}

.case-card--compact .case-card__result { gap: var(--space-xs); margin-block-start: 0; }

.case-card__heading,
.case-card__result {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
}

.case-card__heading { gap: var(--space-xs); }
.case-card__result { gap: var(--space-sm); margin-block-start: var(--space-xs); }

.case-card__number,
.case-card__title,
.case-card__result-label,
.case-card__result-text { margin: 0; overflow-wrap: anywhere; }

.case-card__number {
  color: var(--color-text-muted);
  font-size: var(--fs-body-large);
  font-weight: 274;
  line-height: var(--lh-description);
  letter-spacing: -.03em;
}

.case-card__title {
  font-size: var(--fs-advantage-title);
  font-weight: 274;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
}

.case-card__link { color: inherit; text-decoration: none; }
.case-card__link::after { position: absolute; inset: 0; content: ''; }
.case-card__link:focus-visible { outline: none; }
.case-card__link:focus-visible::after { outline: 2px solid var(--color-gradient-start); outline-offset: -2px; }

.case-card__details {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
}

.case-card__detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-sm);
  width: 100%;
}

.case-card__label,
.case-card__detail-value { margin: 0; overflow-wrap: anywhere; }

.case-card__label,
.case-card__result-label {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  font-weight: 274;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
}

.case-card__label { opacity: .7; }
.case-card__result-label { opacity: .6; }

.case-card__detail-value,
.case-card__result-text {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
}

.case-card__detail-value { text-align: end; }

@media (width <= 48rem) {
  .case-card { gap: var(--space-md); padding: var(--space-md); }
  .case-card__heading { gap: var(--space-sm); }
  .case-card__detail { gap: var(--space-xs); }
}