/* Responsive overrides — last in the cascade. */

@media (max-width: 1080px) {
  .nav-primary__link { padding: 8px 11px; font-size: 0.88rem; }
  .owner-cta { font-size: 0.85rem; padding: 0 16px; height: 44px; }
}

@media (max-width: 960px) {
  .nav-primary { display: none; }
  .menu-toggle { display: inline-flex; }

  /* Mobile header layout:
   *   ─ hamburger + lang chips + owner CTA at the LOGICAL-START
   *     edge (so the hamburger sits on the right in Arabic /
   *     left in English — matches reading direction),
   *   ─ brand mark at the LOGICAL-END edge (opposite side).
   * Achieved via `order` so the DOM order (which is correct for
   * desktop) doesn't need to change.
   */
  .brand          { order: 2; margin-inline-start: auto; }
  .header-actions { order: 1; margin-inline-start: 0; gap: 10px; align-items: center; }

  /* Compact Owner CTA pill — visible on mobile, smaller than
   * desktop so it fits next to the lang chips + hamburger. The
   * label and trail arrow are hidden — only the storefront icon
   * remains, sized up so the icon-only pill stays unambiguous.
   * Full text is shown inside the mobile drawer's own CTA, which
   * doesn't have the same horizontal-real-estate constraint. */
  .header-actions .owner-cta {
    height: 38px;
    padding: 0 12px;
    gap: 0;
    letter-spacing: 0;
  }
  .header-actions .owner-cta .owner-cta__label,
  .header-actions .owner-cta .owner-cta__trail {
    display: none;
  }
  .header-actions .owner-cta .owner-cta__lead {
    width: 18px;
    height: 18px;
  }
  /* The mobile-drawer CTA keeps the full label + icon — it has
   * a whole row inside the drawer and benefits from the long
   * action copy as the drawer's primary affordance. */
  .mobile-drawer__cta {
    height: 52px !important;
    padding: 0 22px !important;
    font-size: 0.95rem !important;
  }
  .mobile-drawer__cta .owner-cta__lead {
    width: 18px;
    height: 18px;
  }

  .hero__layout       { grid-template-columns: 1fr; gap: 60px; }
  .hero__visual       { order: -1; max-width: 360px; margin-inline: auto; }

  .about__head, .services__head, .showcase__head, .contact__head {
    grid-template-columns: 1fr; gap: 16px; align-items: start;
  }
  .about__cols     { grid-template-columns: 1fr 1fr; }
  .services__grid  { grid-template-columns: 1fr 1fr; }
  .showcase__grid  { grid-template-columns: 1fr 1fr; gap: 24px; }
  .showcase__tile--lift { transform: none; }

  .download__layout { grid-template-columns: 1fr; gap: 40px; }
  .download__phone  { order: -1; max-width: 280px; }

  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand { grid-column: 1 / -1; }

  .support-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .about__cols    { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
  .showcase__grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }

  .contact-row { grid-template-columns: 44px 1fr; }
  .contact-row__actions { grid-column: 1 / -1; }

  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .marquee__item { font-size: 2.2rem; gap: 36px; }

  .otp-box { width: 48px; height: 56px; font-size: 1.3rem; }
  .step-actions { flex-direction: column; }

  .section { padding-block: clamp(56px, 12vw, 96px); }
}

@media (max-width: 420px) {
  .otp-box { width: 44px; height: 52px; }
  .steps .step-bar { width: 18px; }
  .delete-flow { padding: 22px; }
  .contact-row { padding: 14px 16px; }
}