/* Shared responsive layout rules. */
/* Responsive rules and late page-specific corrections. */

@media (max-width: 999px) {

  .mf-proof-columns .mf-editor-shot,
  .mf-product-proof-step .mf-editor-shot {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .mf-proof-columns .mf-editor-shot img,
  .mf-product-proof-step .mf-editor-shot img {
    width: 720px !important;
    max-width: none !important;
    height: auto;
  }

  .mf-proof-columns .mf-editor-shot figcaption,
  .mf-product-proof-step .mf-editor-shot figcaption {
    position: sticky;
    left: 0;
    width: calc(100vw - 64px);
    max-width: 360px;
    box-sizing: border-box;
  }

  .mf-page-hero-inner {
    width: 64%;
  }

  .mf-page-hero h1 {
    font-size: 46px;
  }

  .mf-section {
    padding: 80px 0;
  }

  .mf-section.mf-section--compact {
    padding-block: 88px;
  }

  .mf-section h2 {
    font-size: 38px;
  }

  .mf-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .mf-split {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .mf-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

@media (max-width: 689px) {

  .mf-directory-nav {
    position: static;
    top: auto;
  }

  body.admin-bar #header {
    top: 46px;
  }

  body.admin-bar.page .ct-header {
    top: 46px;
  }

  body.page .ct-header [data-id="logo"] .site-title a {
    width: 150px;
    height: 40px;
  }

  .mf-shell {
    width: min(100% - 32px, 1240px);
  }

  .mf-page-hero {
    min-height: 760px;
    align-items: flex-start;
    background-position: center bottom;
    background-size: auto 36%;
  }

  .mf-directory-nav {
    top: 70px;
  }

  .mf-page-hero-inner {
    width: 100%;
    padding: 48px 0 300px;
  }

  .mf-page-hero h1 {
    font-size: 38px;
  }

  .mf-page-hero-copy {
    font-size: 17px;
  }

  .mf-section {
    padding: 66px 0;
  }

  .mf-section[id] {
    scroll-margin-top: 82px;
  }

  .mf-section h2 {
    font-size: 32px;
  }

  .mf-grid-2,
  .mf-grid-3,
  .mf-grid-4,
  .mf-footer-grid {
    grid-template-columns: 1fr;
  }

  .mf-card {
    height: auto;
    min-height: 0;
    padding: 26px;
  }
}

@media (max-width: 781px) {
  .mf-section.mf-section--compact {
    padding-block: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mf-button {
    transition: none;
  }
}

@media (max-width: 689px) {
  .mf-wave-brush {
    height: 42px;
  }

  .mf-section.mf-section--compact {
    padding-block: 58px;
  }
}