/* FluxFront — migration-timeline · sliced verbatim from the original sections.css block (render-identical). See docs/marketing-site-architecture.md for the selector map. */
/* ===================== MIGRATION TIMELINE ===================== */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; } }
.tl-step { position: relative; padding: 38px 22px 0 0; }
.tl-step::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--hairline-2); }
.tl-step:last-child::before { right: auto; width: 14px; }
.tl-hour { display: block; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 12px; }
.tl-dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--cream);
  border: 3px solid var(--teal-600); }
.tl-done .tl-dot { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash); }
.tl-t { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.tl-d { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; padding-right: 8px; }
@media (max-width: 760px) {
  .tl-step { padding: 4px 0 26px 28px; }
  .tl-step::before { top: 0; left: 6px; right: auto; bottom: 0; width: 2px; height: 100%; }
  .tl-step:last-child::before { height: 14px; }
  .tl-hour { margin-bottom: 6px; }
}