/* First-visit walkthrough and support dialog. Launchers live in workspace.css. */
.lesson { width: min(32rem, calc(100vw - 2rem)); }
.lesson .eyebrow { margin-right: 2.2rem; }
.lesson__progress { display: flex; align-items: center; gap: 0.75rem; margin: 1.45rem 0 0.65rem; }
.lesson__track { width: 4rem; height: 3px; overflow: hidden; border-radius: 2px; background: var(--paper-3); }
.lesson__track i { display: block; height: 100%; background: var(--cf-700); }
.lesson__heading { outline: none; }
.lesson__body { margin-top: 0.8rem; color: var(--fg-2); }
.lesson__body strong { font-weight: 600; color: var(--fg); }
.lesson__example {
  margin-block: 1.15rem 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
}
.lesson__field { display: grid; gap: 0.35rem; }
.lesson__value { color: var(--fg-2); font-size: var(--t-small); }
.lesson__cost, .lesson__actions, .lesson__film { display: flex; gap: 0.75rem; align-items: center; }
.lesson__cost, .lesson__actions { justify-content: space-between; }
.lesson__cost { flex-wrap: wrap; font-size: var(--t-small); }
.lesson__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.lesson__pair figure { margin: 0; }
.lesson__pair img { width: 100%; height: clamp(3rem, 10vh, 4.75rem); object-fit: cover; border-radius: var(--r-print); }
.lesson__pair figcaption, .lesson__film span { margin-top: 0.25rem; color: var(--fg-2); font-size: var(--t-micro); }
.lesson__film img { width: 4.3rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-print); }
.lesson__film strong { font-size: var(--t-small); }
.lesson__film span { display: flex; gap: 0.3rem; align-items: center; }
.lesson__film .icon { color: var(--ok); }
.support-email { overflow-wrap: anywhere; user-select: all; }