/* =====================================================
   About Us — page-specific styles (timeline, platform cards)
   ===================================================== */

.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
.platform-card { padding: 22px; text-align: center; }
.platform-card h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
.platform-card .star { font-size: 15px; }
.platform-card__score { display: block; margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--primary); font-family: 'Poppins', sans-serif; }

.timeline { display: flex; flex-direction: column; gap: 0; max-width: 640px; margin: 0 auto; }
.timeline__item { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 20px 0; border-left: 2px solid var(--border); padding-left: 24px; margin-left: 10px; position: relative; }
.timeline__item::before { content: ''; position: absolute; left: -7px; top: 26px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.timeline__year { font-size: 20px; font-weight: 700; color: var(--primary); font-family: 'Poppins', sans-serif; }
.timeline__list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--on-surface-muted); line-height: 1.7; }
.timeline__list li { margin-bottom: 4px; }

@media (max-width: 640px) {
  .platform-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline__item { grid-template-columns: 1fr; }
}