.milestone-section { border-top: 1px solid #e8e3f0; scroll-margin-top: 24px; }
.milestone-intro { margin-top: 18px; color: #645c70; }
.milestone-list { --marker-size: 76px; --timeline-gap: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--timeline-gap); margin-top: 40px; padding-left: calc(var(--marker-size) + 24px); }
.milestone-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-height: 140px; padding: 28px; border: 1px solid #e4dfed; border-radius: 12px; background: #fff; }
.milestone-card:not(:last-child)::before { content: ""; position: absolute; width: 2px; background: #d1c5e8; left: calc(-25px - var(--marker-size) / 2); top: 66px; height: calc(100% + var(--timeline-gap) + 2px); }
.milestone-card.in-progress { border-color: #b4a0ed; background: #f8f5ff; }
.milestone-meta { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.milestone-number { color: #8b7ba7; font-size: .875rem; font-weight: 700; }
.milestone-status { position: absolute; z-index: 1; left: calc(-25px - var(--marker-size)); top: 28px; display: flex; align-items: center; justify-content: center; width: var(--marker-size); height: var(--marker-size); padding: 6px; border: 2px solid #fff; border-radius: 50%; text-align: center; font-size: .8125rem; line-height: 1.3; font-weight: 700; }
.milestone-status.complete { color: #176b3a; background: #e7f8ee; }
.milestone-status.progress { color: #6545dc; background: #eee7ff; }
.milestone-status.planned { color: #655b73; background: #f0edf4; }
.milestone-card h3 { margin: 22px 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.milestone-link { display: inline-flex; align-items: center; gap: 10px; padding-block: 8px; color: #6545dc; font-size: .9375rem; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.milestone-link:hover { color: #43269f; }
.milestone-link:focus-visible { outline: 2px solid #6545dc; outline-offset: 4px; border-radius: 2px; }
.milestone-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .milestone-list { --marker-size: 64px; --timeline-gap: 16px; margin-top: 30px; padding-left: 80px; }
  .milestone-card { padding: 20px; }
  .milestone-status { left: -81px; top: 24px; font-size: .75rem; }
  .milestone-card:not(:last-child)::before { left: -49px; top: 56px; }
  .milestone-card h3 { font-size: 1.0625rem; margin-block: 16px; }
  .site-header nav { column-gap: 14px; row-gap: 10px; }
}
.header-inner { flex-wrap: wrap; padding-block: 16px; }
.brand-controls { display: flex; align-items: center; gap: 16px; }
.site-header nav { flex-wrap: wrap; }
.nav-community { display: inline-flex; align-items: center; gap: 16px; }
.language-toggle { flex-shrink: 0; cursor: pointer; padding: 9px 12px; border: 1px solid #d1c5e8; border-radius: 999px; font-size: .75rem; color: #756980; white-space: nowrap; }
.language-toggle[hidden] { display: none; }
.language-toggle { color: #6545dc; font-weight: 800; }
.language-toggle:hover { background: #f6f3fc; }
.language-toggle:focus-visible { outline: 2px solid #6545dc; outline-offset: 4px; }