/* MCH Aesthetics — responsive overrides for the marketing site.
   Inline styles win over normal CSS, so mobile rules use !important. */

/* Tablet and down */
@media (max-width: 900px) {
  .mch-g3 { grid-template-columns: repeat(2, 1fr) !important; }
  .mch-g4 { grid-template-columns: repeat(2, 1fr) !important; }
  .mch-tiers { grid-template-columns: 1fr !important; max-width: 440px !important; }
}

/* Phones */
@media (max-width: 680px) {
  .mch-sec {
    padding-left: 22px !important;
    padding-right: 22px !important;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }
  .mch-hero { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .mch-hero-copy { padding: 40px 22px 48px !important; }
  .mch-hero-img { position: relative !important; height: 300px !important; min-height: 0 !important; order: -1 !important; }

  .mch-g2, .mch-g3, .mch-g4 { grid-template-columns: 1fr !important; }
  .mch-split { grid-template-columns: 1fr !important; gap: 28px !important; }
  .mch-split-img { aspect-ratio: 4/3 !important; }

  .mch-menu-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .mch-menu-row h3 { position: static !important; top: auto !important; }

  .mch-stats { gap: 22px 28px !important; flex-wrap: wrap !important; }
  .mch-cta-row { flex-direction: column !important; align-items: stretch !important; }
  .mch-cta-row > * { width: 100% !important; }

  /* Headline downscaling */
  .mch-disp-xl { font-size: 40px !important; }
  .mch-disp-l  { font-size: 32px !important; }
  .mch-disp-m  { font-size: 28px !important; }

  .mch-esti-img { min-height: 0 !important; height: 280px !important; order: -1 !important; }
}

/* —— Mobile nav —— */
.mch-nav-toggle { display: none; }
@media (max-width: 760px) {
  .mch-nav-desktop { display: none !important; }
  .mch-header-book { display: none !important; }
  .mch-nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 42px; height: 42px; border: none; background: transparent;
    cursor: pointer; color: var(--pine-700);
  }
}