/* Move-in timeline: three columns on the page background, each headed by a
   heavy rule, with its own checklist. Not .steps, whose li rules would leak
   into the nested checklists. */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 56px);
}

.timeline > li {
    padding-top: 20px;
    border-top: 3px solid var(--door-juniper);
}

.timeline h3 {
    margin-bottom: 4px;
    font-size: var(--type-headline);
}

.timeline .checklist {
    margin-top: 16px;
    gap: 14px;
}

@media (max-width: 720px) {
    .timeline {
        grid-template-columns: 1fr;
    }
}

.timeline.timeline-4 {
    grid-template-columns: repeat(4, 1fr);
}

.timeline p {
    margin: 0;
}

@media (max-width: 960px) {
    .timeline.timeline-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .timeline.timeline-4 {
        grid-template-columns: 1fr;
    }
}

.timeline-4 h3 {
    margin-bottom: 8px;
    font-size: var(--type-subhead);
}