/* DilutionWatch — mobile polish for generated SEO pages (stock/*.html)
   Loaded after the inline template styles. 2026-07-10 */

@media (max-width: 640px) {
    /* Sticky nav: 280px logo + CTA overflowed small phones */
    .seo-nav { padding: 10px 14px; gap: 10px; }
    .seo-nav-brand img { width: auto; max-width: 46vw; max-height: 34px; }
    .seo-nav-cta { padding: 7px 12px; font-size: 0.78rem; white-space: nowrap; }

    .hero { padding: 28px 16px 20px; }
    .hero-symbol { font-size: 1.8rem; }
    .hero-top { gap: 20px; }

    /* Data grids: two columns max on phones */
    .market-grid, .short-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Any table inside content scrolls instead of overflowing the page */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .content { padding-left: 16px; padding-right: 16px; }
    .factor-label { flex: 0 0 90px; font-size: 0.72rem; }

    /* Comfortable tap targets on links styled as buttons */
    a.seo-nav-cta, .cta-button { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 400px) {
    .seo-nav-brand img { max-width: 42vw; }
    .market-grid, .short-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hero-symbol { font-size: 1.6rem; }
}