/* ============================================================
   Mobile typography tuning — 2026-05-06

   Bump 10px / 11px accent labels (the orange uppercase mono
   captions used in spec strips, timeline cards, and section
   sub-headings) up to 12px on viewports <=720px. WCAG AA
   recommends ≥12px for accent text where information is
   conveyed; the mono+uppercase+letter-spacing combo at 11px
   is borderline at typical phone reading distance.

   Targets the same inline-style rules used across the rebuilt
   leaves via attribute selectors. No HTML changes required.
   ============================================================ */

@media (max-width: 720px) {
    [style*="font-size:10px"],
    [style*="font-size: 10px"] {
        font-size: 12px !important;
    }
    [style*="font-size:11px"],
    [style*="font-size: 11px"] {
        font-size: 12px !important;
    }

    /* Hero CTA / button row — wrap to column on narrow screens so
       both buttons get full tap-width instead of fighting for inline space */
    .fbx-hero-img-content > div[style*="display:flex"][style*="flex-wrap:wrap"] {
        flex-direction: column;
        align-items: stretch;
    }
    .fbx-hero-img-content .pxl-button,
    .fbx-hero-img-content .fbx-btn-ghost {
        text-align: center;
    }

    /* Spec strip 7-col grid — most leaves collapse to 2 cols, but at 7 items
       that creates 4 rows + 1 orphan. Force single column on phones for clean
       reading flow. Keeps the 2-col fallback for tablets. */
    @media (max-width: 480px) {
        [class*="-grid-7"] {
            grid-template-columns: 1fr !important;
        }
    }
}