/* Use cases: hover and state colours, rollout progress, responsive rules. Static styles are inline in
   templates/pages/use-cases.php, so overrides of them need !important. */
.uc-jump:hover { border-color: var(--text-on-dark-muted); }

/* Rollout: the bar and week mark reached steps, the text colour the hovered one (use-cases.js). */
.uc-roll-bar { background: var(--line-200); transition: background-color .25s; }
.uc-roll-k, .uc-roll-d { color: var(--ink-500); transition: color .25s; }
.uc-roll.is-done .uc-roll-bar { background: var(--orange-500); }
.uc-roll.is-done .uc-roll-k { color: var(--orange-700); }
.uc-roll.is-on .uc-roll-d { color: var(--ink-600); }

@media (max-width: 1000px) {
  .uc-band { grid-template-columns: 1fr !important; gap: 40px !important; }
  .uc-steps { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .uc-case { grid-template-columns: 1fr !important; gap: 48px !important; }
}
@media (max-width: 800px) {
  .uc-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .uc-band { padding: 32px 24px !important; }
  .uc-ch { font-size: 21px !important; }
}
@media (max-width: 560px) {
  .uc-steps { grid-template-columns: 1fr !important; }
}