#plan { padding-block: 48px; }
#plan .roadmap-window { margin-top: 24px; padding-bottom: 16px; }
#plan .rm { margin: 16px; gap: 8px; }
#plan .rm__phase { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(120px, 1fr) 106px; align-items: center; gap: 20px; min-width: 0; padding: 16px 18px; border: 1px solid var(--ink); background: var(--paper); }
#plan .rm__head { margin: 0; font: 400 25px/1.15 var(--serif); overflow-wrap: anywhere; }
#plan .rm__bar { width: 100%; }
#plan .rm__bar i { background: var(--ink); }
#plan .rm__tag { justify-self: end; text-transform: none; line-height: 1.3; }
#plan .progress-updated { margin: 28px 24px 8px; color: var(--ink-2); font: 400 13px/1.8 var(--pixel); letter-spacing: var(--pixel-tracking); word-spacing: var(--pixel-word-spacing); }
@media (max-width: 650px) {
  #plan .rm { margin: 12px; }
  #plan .rm__phase { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
  #plan .rm__head { font-size: 23px; }
  #plan .rm__bar { grid-column: 1 / -1; grid-row: 2; }
  #plan .rm__tag { grid-column: 2; grid-row: 1; }
  #plan .progress-updated { margin: 24px 20px 8px; }
}

/* What's new teaser under the progress list */
#plan .whats-new-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 24px 12px; color: var(--ink-2); font: 400 13px/1.8 var(--pixel); letter-spacing: var(--pixel-tracking); }
#plan .whats-new-teaser .box { padding: 6px 12px; text-decoration: none; }
@media (max-width: 640px) { #plan .whats-new-teaser { margin: 4px 20px 12px; } }