/* Mobile responsive layer for the Adley marketing site.
   Targets explicit classNames added to the design jsx — no fragile
   attribute substring matching. !important is used to win against the
   inline gridTemplateColumns / padding that the design jsx still sets
   (we kept those for desktop). */

/* ---- Phone (≤ 900px) ---------------------------------------------- */
@media (max-width: 900px) {
  /* Multi-column layouts collapse to single column. Stats is the
     exception — 4 tiny tiles fit fine 2x2 at phone width. */
  .mk-row-2,
  .mk-row-2-aside,
  .mk-row-faq,
  .mk-row-legal,
  .mk-row-footer,
  .mk-row-features,
  .mk-row-feature-card,
  .mk-row-compat,
  .mk-row-compat-tiles {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .mk-row-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 12px !important;
  }
  .mk-row-stats .mk-stat-cell { border-right: 0 !important; padding: 0 8px !important; }
  .mk-row-stats .mk-stat-num { font-size: clamp(26px, 8vw, 36px) !important; }
  .mk-row-stats .mk-stat-label { font-size: 9px !important; letter-spacing: 2px !important; margin-top: 6px !important; }

  /* The feature-card right column holds a phone mock; on phone it'd
     dominate the screen, so collapse to text-only. */
  .mk-row-feature-card > div:last-child { display: none !important; }

  /* Right-column "aside" widgets are decorative / read-secondary —
     hide on phone to free vertical space. */
  .mk-cell-phone-aside { display: none !important; }

  /* Section padding tightens */
  .mk-pad-section { padding: 56px 20px !important; }
  .mk-pad-section-lg { padding: 72px 20px !important; }
  .mk-pad-section-sm { padding: 44px 20px !important; }
  .mk-pad-edge { padding-left: 20px !important; padding-right: 20px !important; }

  /* Headlines clamp */
  .mk-h1-resp { font-size: clamp(32px, 8.5vw, 56px) !important; line-height: 1.04 !important; letter-spacing: -1px !important; }
  .mk-h2-resp { font-size: clamp(26px, 7vw, 42px) !important; line-height: 1.06 !important; letter-spacing: -0.6px !important; }
  .mk-h3-resp { font-size: clamp(18px, 4.6vw, 24px) !important; }

  /* Nav — hide center link group, keep logo + DOWNLOAD. Drop sticky
     on phone so headlines under it don't get covered + footer doesn't
     bleed behind it. */
  .mk-nav { padding: 14px 18px !important; }
  .mk-nav-links { display: none !important; }
  .mk-nav-status { display: none !important; }
  .mk-nav-shell { position: static !important; }

  /* Ticker pane stretches full width */
  .mk-ticker-pane { flex: 1 1 100% !important; min-width: 0 !important; min-height: 360px !important; max-height: 420px !important; }
  .mk-ticker-row { grid-template-columns: 56px 1fr auto !important; gap: 8px !important; }

  /* Footer 5-col → 2 → 1 (560 step below) */
  .mk-row-footer { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .mk-row-footer-meta { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; text-align: left !important; }

  /* Mini-phones in feature cards downsize */
  .mk-miniphone { width: 200px !important; }

  /* SystemDiagram (huge horizontal SVG) — scale or hide */
  .mk-system-diagram { display: none !important; }

  /* Step rows still grid; tighten gutter */
  .mk-row-step { grid-template-columns: 48px 1fr !important; gap: 14px !important; }

  /* StoreButton row wraps */
  .mk-store-row { flex-wrap: wrap !important; gap: 10px !important; }
  .mk-store-btn { min-width: 0 !important; flex: 1 1 220px !important; }

  /* MKPage outer max-width shouldn't force scrollbar */
  body, html { overflow-x: hidden; }
}

/* ---- Narrow phone (≤ 560px) -------------------------------------- */
@media (max-width: 560px) {
  .mk-row-footer { grid-template-columns: 1fr !important; }
  .mk-h1-resp { font-size: clamp(28px, 9.5vw, 44px) !important; }
  .mk-h2-resp { font-size: clamp(22px, 7vw, 34px) !important; }
  .mk-pad-section { padding: 44px 18px !important; }
  .mk-pad-section-lg { padding: 56px 18px !important; }
}