/* Online visits (S13). Honest about limits: two lists of the same weight, then how it runs on Google Meet. */

.ol-head-label { display: flex; align-items: center; gap: 12px; }
.ol-head-label .pill { align-self: center; }
.page-head .t-display { text-wrap: wrap; }

/* ---------- What suits a screen, and what does not. ---------- */
.ol-suits { display: flex; gap: 80px; padding-top: 96px; padding-bottom: 96px; }
.ol-suits__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ol-list li { padding: 14px 0; border-top: 1px solid var(--color-border); }
.ol-list li:first-child { border-top-color: var(--color-foreground); }
.ol-list li:last-child { border-bottom: 1px solid var(--color-border); }

/* ---------- How it runs. ---------- */
.ol-runs { display: flex; gap: 80px; padding-top: 96px; padding-bottom: 96px; }
.ol-runs__head { flex: 0 0 420px; display: flex; flex-direction: column; gap: 16px; }
.ol-runs__title { letter-spacing: -0.02em; text-wrap: wrap; }
.ol-steps { flex: 1; min-width: 0; }
.ol-step { display: flex; gap: 24px; padding: 18px 0; border-top: 1px solid var(--color-border); }
.ol-step:first-child { border-top-color: var(--color-foreground); }
.ol-step:last-child { border-bottom: 1px solid var(--color-border); }
.ol-step__n { flex: 0 0 48px; line-height: var(--leading-body); }
.ol-step__words { display: flex; flex-direction: column; gap: 4px; }
.ol-step__title { font-size: var(--text-body); line-height: var(--leading-body); font-weight: 700; }

@media (max-width: 1279px) {
  .ol-suits, .ol-runs { gap: 48px; }
  .ol-runs__head { flex-basis: 340px; }
}
@media (max-width: 1023px) {
  .ol-suits { flex-direction: column; gap: 40px; padding-top: 72px; padding-bottom: 64px; }
  .ol-suits__col { max-width: 640px; }
  .ol-runs { flex-direction: column; gap: 32px; padding-top: 72px; padding-bottom: 64px; }
  .ol-runs__head { flex-basis: auto; }
  .ol-steps { width: 100%; max-width: 640px; }
}
@media (max-width: 767px) {
  .ol-suits { gap: 32px; padding-top: 48px; padding-bottom: 48px; }
  .ol-suits__col { gap: 12px; }
  .ol-list li { padding: 12px 0; }
  .ol-runs { gap: 20px; padding-top: 48px; padding-bottom: 48px; }
  .ol-runs__head { gap: 12px; }
  .ol-step { gap: 16px; padding: 16px 0; }
  .ol-step__n { flex-basis: 22px; }
}

/* S13 head: words 760, aside 420. */
@media (min-width: 1024px) { .page-head__words { max-width: 760px; } .page-head__aside { width: 420px; } }