/* =========================================================================
   ONE BOOST — updates.css
   "Always improving" changelog timeline + free-updates promise.
   ========================================================================= */

.updates-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }

.updates-promise { }
.updates-promise .up-chip { display: inline-flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--red) 14%, transparent); border: 1px solid color-mix(in srgb, var(--red) 28%, transparent); color: var(--red-ink); border-radius: 999px; padding: 8px 15px; font-family: var(--font-display); font-weight: 700; font-size: 13px; margin-bottom: 18px; }
.updates-promise .up-chip svg { width: 16px; height: 16px; }
.updates-promise h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: 14px; }
html[lang="ar"] .updates-promise h3 { font-family: var(--font-ar); line-height: 1.35; }
.updates-promise p { color: var(--text-2); font-size: 16px; }

.timeline { position: relative; padding-inline-start: 28px; }
.timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--red), transparent); }
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: -28px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--bg-soft), 0 0 12px var(--glow); }
.tl-tag { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .5px; color: var(--red-ink); text-transform: uppercase; }
.tl-item h4 { font-family: var(--font-display); font-weight: 700; font-size: 16.5px; margin: 3px 0 4px; }
html[lang="ar"] .tl-item h4 { font-family: var(--font-ar); }
.tl-item p { color: var(--text-2); font-size: 14px; }

@media (max-width: 860px) {
  .updates-wrap { grid-template-columns: 1fr; gap: 30px; }
}