/* ── ZapObra page overrides ───────────────────────── */

/* Always show the phone mockup in the hero */
.hero-right { display: block !important; }

/* Stack hero on tablet */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .hero-right {
    display: flex !important;
    justify-content: center;
    order: -1; /* phone goes above text on mobile */
  }
  .phone { width: 240px; }
  .phone-screen { height: 400px; }
}

@media (max-width: 640px) {
  .phone { width: 210px; }
  .phone-screen { height: 360px; }
  .msg { font-size: .68rem; }
  .detail-line { font-size: .63rem; }
}