.aa-phases { border-bottom: 1px solid var(--color-border); }

.aa-phases__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 45px; }
.aa-phases__head .section-label { margin-bottom: 20px; }
.aa-phases__intro { color: var(--color-accent); font-size: 14px; line-height: 1.75; max-width: 370px; }
@media (max-width: 640px) {
  .aa-phases__head { display: block; margin-bottom: 30px; }
  .aa-phases__intro { margin-top: 20px; }
}
/* The line is drawn on each item, so a second row gets its own. */
.aa-phases__track { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 48px; }
@media (max-width: 900px) { .aa-phases__track { grid-template-columns: repeat(2, 1fr); } }
.aa-phases__item { padding: 27px 25px 0 0; position: relative; border-top: 1px solid var(--color-border); }
.aa-phases__item::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  background: var(--color-accent); border-radius: 50%; box-shadow: 0 0 14px var(--color-accent-glow);
}
.aa-phases__item time { display: block; color: var(--color-accent); font: 11px var(--font-mono); margin-bottom: 18px; }
.aa-phases__item h3 { font-size: 17px; font-weight: 450; margin: 0 0 10px; color: var(--color-fg); }
.aa-phases__item p { color: var(--color-muted); font-size: 13px; line-height: 1.65; }
body.cms-edit .aa-phases__track .cms-list-item-add { grid-column: 1 / -1; margin-top: 16px; }
@media (max-width: 640px) {
  .aa-phases__track { grid-template-columns: 1fr; gap: 28px; border-top: 0; border-left: 1px solid var(--color-border); margin-left: 5px; padding-left: 24px; }
  .aa-phases__item { padding: 0; border-top: 0; }
  .aa-phases__item::before { top: 2px; left: -28px; }
  .aa-phases__item time { margin-bottom: 10px; }
}