/* ============================================================
   RESPONSIVE
   All @media overrides except the nav breakpoint (lives in nav.css)
============================================================ */
@media (max-width: 1024px) {
    .fix-grid {
        grid-template-columns: 1fr;
        width: auto;
        max-width: 600px;
        margin: 0 auto;
        transform: none;
    }
    .proof-chips { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
}

@media (max-width: 768px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.9rem; }
    #hero { padding: 128px 0 64px; }

    .about-grid { grid-template-columns: 1fr; max-width: 520px; }

    .int-ticker-list { gap: 16px; }
    .app-icon { width: 56px; height: 56px; }

    /* Footer stacks */
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* ---- Timeline collapses to a single left-aligned rail ---- */
    .timeline-line { left: 11px; transform: none; }
    .timeline-step,
    .timeline-step--right,
    .timeline-step--left {
        width: 100%;
        margin: 0;
        padding: 0 0 36px 48px;
        text-align: left;
    }
    .timeline-step:last-child { padding-bottom: 0; }
    .timeline-step--right .timeline-dot,
    .timeline-step--left .timeline-dot { left: 3px; right: auto; }
    .timeline-step::before,
    .timeline-step--right::before,
    .timeline-step--left::before {
        left: 20px; right: auto;
        width: 28px;
    }
}

@media (max-width: 640px) {
    .proof-chips { grid-template-columns: 1fr 1fr; gap: 12px; }
    .hero-cta-group { flex-direction: column; align-items: stretch; }
    .hero-cta-group .btn-primary { justify-content: center; }
    .app-icon { width: 52px; height: 52px; }
}

@media (max-width: 480px) {
    .int-ticker-list { gap: 13px; }
    .app-icon { width: 48px; height: 48px; }
    .proof-chip { padding: 18px 14px; }
    .proof-chip-num { font-size: 1.25rem; }
}