/* memberx — responsive overrides.
   Layered on top of site.css to fix layouts on tablets and phones without
   touching the original design system. Breakpoints used:
     tablet:        <= 880px (matches existing grid-stack points)
     phone:         <= 640px
     small phone:   <= 420px
*/

/* ---------- Container & section gutters ---------- */
@media (max-width: 880px) {
  .mx-container { padding: 0 24px; }
  .mx-section { padding: 64px 0; }
  .mx-section-head { margin-bottom: 36px; }
}
@media (max-width: 640px) {
  .mx-container { padding: 0 20px; }
  .mx-section { padding: 48px 0; }
}
@media (max-width: 420px) {
  .mx-container { padding: 0 16px; }
}

/* ---------- Nav ---------- */
/* On phones, drop the nav CTA entirely — the hero already has a primary
   "Sign up for early access" button front-and-centre, so a second one in
   the chrome is duplicative and crowds the small viewport. */
@media (max-width: 640px) {
  .mx-nav-inner { padding: 14px 20px; gap: 12px; }
  .mx-nav-brand img { height: 22px; }
  .mx-nav-cta { display: none; }
}
@media (max-width: 420px) {
  .mx-nav-inner { padding: 12px 16px; }
}

/* ---------- Hero ---------- */
@media (max-width: 880px) {
  .mx-hero { padding: 56px 0 48px; }
  .mx-hero-grid { gap: 40px; }
}
@media (max-width: 640px) {
  .mx-hero { padding: 40px 0 32px; }
  .mx-hero-grid { gap: 32px; }
  .mx-hero-title { max-width: none; margin-bottom: 14px; }
  .mx-hero-sub { font-size: 16px; margin-bottom: 22px; }
  .mx-hero-cta { width: 100%; }
  .mx-hero-cta .mx-btn { flex: 1 1 auto; justify-content: center; }
  .mx-hero-meta { gap: 14px; font-size: 12.5px; }
}

/* Browser mock — reduce sidebar on small tablets, hide it entirely on
   phones, and tighten the inner padding so it doesn't burst the viewport. */
@media (max-width: 880px) {
  .mx-browser-body { grid-template-columns: 140px 1fr; min-height: 340px; }
  .mx-mini-main { padding: 16px 18px; gap: 14px; }
  .mx-mini-nav { padding: 12px 8px; }
  .mx-mini-item { font-size: 12px; padding: 5px 7px; }
}
@media (max-width: 640px) {
  .mx-browser-body { grid-template-columns: 1fr; min-height: 0; }
  .mx-mini-nav { display: none; }
  .mx-mini-main { padding: 16px 16px; gap: 14px; }
  .mx-mini-header h3 { font-size: 15px; }
  .mx-mini-search { font-size: 10.5px; padding: 4px 8px; }
  .mx-mini-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .mx-mini-stat { padding: 10px 10px 12px; }
  .mx-mini-stat-value { font-size: 18px; }
  .mx-mini-stat-label { font-size: 10.5px; }
  .mx-mini-stat-delta { font-size: 10.5px; }
  .mx-mini-stat-spark { height: 18px; margin-top: 6px; }
  .mx-ai-insight { padding: 14px 14px 12px; }
  .mx-ai-body { font-size: 12.5px; line-height: 1.5; }
  .mx-ai-pill { font-size: 10.5px; padding: 3px 8px; }
  .mx-ai-time { font-size: 10.5px; }
  .mx-ai-actions { gap: 6px; flex-wrap: wrap; }
  .mx-ai-actions .mx-btn { font-size: 11.5px; padding: 6px 10px; }
}
@media (max-width: 420px) {
  .mx-mini-stats { grid-template-columns: 1fr 1fr; }
  .mx-mini-stats .mx-mini-stat:nth-child(3) { grid-column: 1 / -1; }
  .mx-browser-url { font-size: 10px; padding: 3px 8px; margin-left: 8px; }
  .mx-browser-bar { padding: 8px 10px; gap: 6px; }
}

/* Hero "::after" ambient glow shifts on the centered hero — keep it from
   peeking past the viewport on phones. */
@media (max-width: 640px) {
  .mx-hero::after { width: 80%; height: 50%; right: -20%; }
}

/* Eyebrow pill — keep it from wrapping awkwardly. */
@media (max-width: 420px) {
  .mx-eyebrow-pill { font-size: 11.5px; }
}

/* ---------- Migrate section ---------- */
/* The inner flow is a `tiles | arrow | target` row in the design. On small
   tablets/phones, stack it vertically with the arrow rotated downward. */
@media (max-width: 640px) {
  .mx-migrate { padding: 40px 0 56px; }
  .mx-migrate-flow {
    grid-template-columns: 1fr;
    justify-items: stretch;
    gap: 14px;
    padding: 18px 18px 22px;
  }
  .mx-migrate-tiles { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .mx-migrate-tile { font-size: 11.5px; padding: 8px 6px; }
  .mx-migrate-arrow { transform: rotate(90deg); justify-self: center; }
  .mx-migrate-arrow svg { width: 20px; height: 20px; }
  .mx-migrate-target { padding: 12px 16px; align-self: center; }
  .mx-migrate-target img { height: 16px; }
  .mx-migrate-title { font-size: 22px; }
  .mx-migrate-sub { font-size: 14.5px; }
  .mx-migrate-meta { gap: 12px; font-size: 12.5px; margin-top: 12px; }
}
@media (max-width: 420px) {
  .mx-migrate-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- Integrations / orbit ---------- */
@media (max-width: 880px) {
  .mx-integrations-section { padding-top: 40px; padding-bottom: 64px; }
  .mx-orbit-wrap { min-height: 420px; }
}
@media (max-width: 640px) {
  .mx-orbit-wrap { min-height: 360px; }
  .mx-orbit { max-width: 320px; }
}
@media (max-width: 420px) {
  .mx-orbit { max-width: 280px; }
  .mx-integrations-title { font-size: 26px; }
}

/* ---------- Early access banner ---------- */
@media (max-width: 640px) {
  .mx-early { padding: 24px 22px; gap: 20px; border-radius: 18px; }
  .mx-early-bonuses { grid-template-columns: 1fr; gap: 6px; }
  .mx-early h3 { font-size: 22px; }
  .mx-early-sub { font-size: 14.5px; }
  .mx-early-aside { padding: 18px 20px; }
  .mx-early-aside-headline { font-size: 22px !important; }
  .mx-early-cta { width: 100%; justify-content: center; }
}

/* ---------- Footer ---------- */
@media (max-width: 640px) {
  .mx-footer { padding: 32px 0 40px; }
  .mx-footer-minimal-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .mx-footer-base { width: 100%; justify-content: space-between; }
}

/* ---------- Centered hero (alt layout) ---------- */
@media (max-width: 640px) {
  .mx-hero-platform { padding: 0 16px; margin-top: 32px; }
  .mx-hero-platform-inner .mx-browser-body { min-height: 0; }
  .mx-hero-title-center { font-size: clamp(28px, 8vw, 40px) !important; }
}

/* ---------- General media + image safety ---------- */
img, svg { max-width: 100%; }
html, body { overflow-x: hidden; }