/* ============================================
           VIEWPORT BREAKPOINTS
           Loads last so these override the defaults.
           (prefers-reduced-motion queries are colocated
           with the animations they gate, not here.)
           ============================================ */

        @media (max-width: 860px) {
            .nav { padding: 10px 20px; }
            .nav-tagline { display: none; }

            :root {
                --section-px: 24px;
                --section-py: 72px;
            }

            .hero { padding-top: 130px; padding-bottom: 64px; }

            .footer-top { padding: 40px 24px; }
            .footer-receipt { padding: 12px 24px; }
        }

        @media (max-width: 560px) {
            .nav {
                justify-content: center;
                text-align: center;
            }
            .nav-links { justify-content: center; }

            .hero { padding-top: 150px; }

            /* Stack pillar rows: number+name on one line, desc below,
               tag right-aligned under it. */
            .pillar-row { padding: 18px 16px; }
            .pillar-name { flex: 1 1 auto; }
            .pillar-desc { flex: 1 1 100%; }
            .pillar-tag { margin-left: 0; text-align: left; }

            .footer-links {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 9px 18px;
            }
        }