/* =====================================================
   MH Theme Phase 69 — Responsive QA Cleanup
   Scope: mobile/tablet spacing, section rhythm, footer safe area.
   Locked systems intentionally untouched: desktop header, mobile dock visuals,
   utility control, modal system, logo source/hover, glass material.
   ===================================================== */

/* Tablet rhythm: stop sections from feeling like stretched desktop blocks. */
@media (min-width: 701px) and (max-width: 1100px) {
  .mht-section {
    padding-block: clamp(76px, 9vw, 118px);
  }

  .mht-content-heading {
    font-size: clamp(3rem, 7vw, 4.55rem);
    line-height: 1.04;
  }

  .mht-work-wall,
  .mht-proof__grid,
  .mht-thinking__grid,
  .mht-home-problem__grid {
    gap: clamp(18px, 2.4vw, 28px);
  }

  .mht-build__head,
  .mht-proof__intro,
  .mht-work__intro,
  .mht-thinking__head,
  .mht-home-problem__head {
    gap: clamp(24px, 4vw, 56px);
  }
}

/* Mobile rhythm: give content room around the top utility controls and bottom dock. */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .mht-section {
    padding-block: clamp(66px, 15vw, 104px);
  }

  .mht-shell {
    width: min(100% - 32px, var(--site-max));
  }

  .mht-content-kicker {
    margin-bottom: clamp(14px, 4vw, 22px);
  }

  .mht-content-heading {
    font-size: clamp(2.75rem, 11.6vw, 4.35rem);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

  .mht-content-body,
  .mht-hero__subline,
  .mht-home-problem__body {
    max-width: 38rem;
  }

  .mht-hero__inner {
    padding-top: clamp(118px, 24vw, 152px);
    padding-bottom: clamp(58px, 13vw, 92px);
    gap: clamp(30px, 8vw, 52px);
  }

  .mht-hero__visual {
    min-height: clamp(250px, 64vw, 380px);
  }

  .mht-hero__content {
    max-width: 100%;
  }

  .mht-hero__subline {
    margin-bottom: clamp(26px, 7vw, 40px);
  }

  .mht-hero__cta {
    margin-bottom: clamp(28px, 8vw, 44px);
  }

  .mht-hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 3vw, 18px);
    align-items: start;
    width: 100%;
  }

  .mht-stat__divider {
    display: none !important;
  }

  .mht-stat__label {
    max-width: 12ch;
  }

  .mht-build__head,
  .mht-proof__intro,
  .mht-work__intro,
  .mht-thinking__head,
  .mht-home-problem__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(16px, 5vw, 26px);
    margin-bottom: clamp(26px, 7vw, 42px);
  }

  .mht-build__controls {
    margin-bottom: clamp(22px, 6vw, 34px);
  }

  .mht-build__grid,
  .mht-work-wall,
  .mht-proof__grid,
  .mht-thinking__grid,
  .mht-home-problem__grid {
    gap: clamp(14px, 4vw, 20px);
  }

  .mht-build__grid {
    background: transparent !important;
    overflow: visible;
  }

  .mht-service-card {
    border-radius: 22px;
    min-height: 0;
    padding: clamp(22px, 6vw, 30px);
  }

  .mht-service-card__num {
    margin-bottom: clamp(18px, 6vw, 28px);
  }

  .mht-service-card__footer {
    margin-top: clamp(28px, 8vw, 42px);
  }

  .mht-work__footer,
  .mht-thinking__footer,
  .mht-final-cta__actions {
    margin-top: clamp(26px, 8vw, 44px);
  }

  .mht-footer {
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  .mht-footer__main {
    gap: clamp(36px, 10vw, 56px);
  }

  .mht-footer__bottom {
    padding-bottom: clamp(12px, 4vw, 22px);
  }
}

@media (max-width: 520px) {
  .mht-shell {
    width: min(100% - 28px, var(--site-max));
  }

  .mht-content-heading {
    font-size: clamp(2.5rem, 12.6vw, 3.95rem);
  }

  .mht-hero__inner {
    padding-top: clamp(112px, 28vw, 142px);
  }

  .mht-hero__cta .mht-u-btn {
    max-width: 100%;
  }

  .mht-hero__stats {
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: clamp(18px, 5vw, 26px);
  }

  .mht-stat__num {
    font-size: clamp(1.1rem, 5.2vw, 1.45rem);
  }

  .mht-stat__label {
    font-size: 7.5px;
    letter-spacing: .14em;
  }

  .mht-build__tab {
    min-height: 38px;
    font-size: 8.5px;
    letter-spacing: .115em;
  }

  .mht-work__footer .mht-u-btn,
  .mht-thinking__footer .mht-u-btn,
  .mht-final-cta__actions .mht-u-btn {
    max-width: 100%;
  }
}

@media (max-width: 380px) {
  .mht-shell {
    width: min(100% - 24px, var(--site-max));
  }

  .mht-content-heading {
    font-size: clamp(2.25rem, 13vw, 3.35rem);
  }

  .mht-hero__stats {
    gap: 8px;
  }

  .mht-stat__label {
    font-size: 7px;
  }
}