/* ════════════════════════════════════════════════════════════
   Phone Report Page — Responsive
════════════════════════════════════════════════════════════ */

/* ── All mobile: single column, no overflow ─────────────── */
@media screen and (max-width: 767px) {

    .ph-hero { padding: 50px 18px 44px; }
    .ph-hero h1 { font-size: 1.9rem; }
    .ph-hero-desc { font-size: 0.86rem; }

    /* Stats: 2×2 grid */
    .ph-stats-inner { flex-wrap: wrap; }
    .ph-stat { flex: 0 0 50%; padding: 16px 10px; box-sizing: border-box; }
    .ph-stat:nth-child(1),
    .ph-stat:nth-child(3) { border-right: 1px solid var(--ph-border); }
    .ph-stat:nth-child(1),
    .ph-stat:nth-child(2) { border-bottom: 1px solid var(--ph-border); }
    .ph-stat-divider { display: none; }
    .ph-stat-value { font-size: 1.15rem; }

    /* Body */
    .ph-body { padding: 24px 14px 48px; }
    .ph-body-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Cards */
    .ph-card { padding: 18px; }

    /* Auth buttons stacked */
    .ph-auth-btns { flex-direction: column; align-items: stretch; }
    .ph-auth-btns .ph-btn-primary,
    .ph-auth-btns .ph-btn-outline { justify-content: center; width: 100%; }

    /* Code box: allow wrapping on tiny screens */
    .ph-code-box { flex-wrap: wrap; }
    .ph-code-box code { min-width: 100%; order: 2; border-top: 1px solid #142030; }
    .ph-code-method { order: 1; }
    .ph-copy-btn { order: 3; border-left: none; border-top: 1px solid #142030; width: 100%; justify-content: center; display: flex; }

    /* CTA */
    .ph-cta { padding: 44px 18px; }
    .ph-cta h2 { font-size: 1.35rem; }
    .ph-cta-actions { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto; }
    .ph-btn-lg { justify-content: center; }
}

/* ── Small tablets ──────────────────────────────────────── */
@media screen and (min-width: 576px) and (max-width: 767px) {
    .ph-hero h1 { font-size: 2.1rem; }
    .ph-body { padding: 32px 20px 56px; }
}

/* ── Tablets ────────────────────────────────────────────── */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .ph-hero h1 { font-size: 2.4rem; }
    .ph-body-inner { grid-template-columns: 1fr; gap: 24px; }
    .ph-info-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ── Medium desktops ────────────────────────────────────── */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .ph-hero h1 { font-size: 2.6rem; }
    .ph-body-inner { gap: 24px; }
}

/* ── Wide screens ───────────────────────────────────────── */
@media screen and (min-width: 1200px) {
    .ph-body-inner { grid-template-columns: 460px 1fr; }
}