/**
 * MemoryIntelligence marketing site - mobile-only helpers.
 * All rules are inside @media; desktop layout is unchanged.
 */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  /* Comfortable tap targets for menu control */
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Modals: never wider than viewport */
  .modal-overlay {
    padding: 16px !important;
    align-items: center !important;
  }
  .modal-overlay .modal {
    max-width: calc(100vw - 32px) !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* Horizontal scroll regions: smoother on iOS */
  .compare-table-scroll,
  [class*="table-scroll"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  /* Mobile menu: close, top CTAs, footer-style links */
  .mobile-menu {
    padding-top: 0;
  }
  /* Tighter top padding so nav + CTAs sit higher (less dead space under close) */
  .mobile-menu-inner {
    padding-top: 12px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 32px !important;
  }
  .mobile-menu-close {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 160;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    color: #0a0a0a;
    padding: 0;
    font-family: 'Martian Mono', monospace;
  }
  .mobile-menu-top-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px !important;
    padding-top: max(28px, env(safe-area-inset-top, 0px)) !important;
    padding-right: 48px;
  }
  .mobile-menu-top-actions .mobile-menu-btn-connect,
  .mobile-menu-top-actions .mobile-menu-btn-beta {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
  }
  .mobile-menu-btn-connect {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 18px;
    background: #deff63;
    color: #0a0a0a;
    border: 2px solid #0a0a0a;
    box-shadow: 4px 4px 0 #0a0a0a;
    text-decoration: none;
  }
  .mobile-menu-btn-beta {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 14px 18px;
    background: #ffffff;
    color: #0a0a0a;
    border: 2px solid #0a0a0a;
    box-shadow: 4px 4px 0 #0a0a0a;
    text-decoration: none;
  }
  /* Override page-level .mobile-menu-inner a (28px) for top CTAs */
  .mobile-menu-inner .mobile-menu-btn-connect,
  .mobile-menu-inner .mobile-menu-btn-beta {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    line-height: 1.3 !important;
    padding: 14px 18px !important;
    border-bottom: none !important;
  }
  /* Primary nav list - smaller than legacy 28px, fills width without overwhelming */
  .mobile-menu-inner > a:not(.mobile-menu-btn-connect):not(.mobile-menu-btn-beta) {
    font-size: clamp(17px, 4.4vw, 21px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    padding: 12px 0 !important;
    line-height: 1.2 !important;
  }
  .mobile-menu-inner > a.menu-small {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    padding: 8px 0 !important;
    color: rgba(10, 10, 10, 0.45) !important;
    border-bottom-color: rgba(10, 10, 10, 0.06) !important;
  }
  /* Active page: white text + hard black shadow (not full-width white bar) */
  .mobile-menu-inner > a.menu-active {
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 1.5px 1.5px 0 #0a0a0a;
    box-shadow: none !important;
    padding: 12px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.1) !important;
  }

  /* Hero eyebrow: vertically centered in masthead band; Knewave white + black stroke (match hero tagline). */
  section.hero.hero-eyebrow-masthead > .hero-dept,
  section.value-hero.hero-eyebrow-masthead > .dept.whymi-hero-dept {
    position: fixed !important;
    /* Vertical center of masthead band (~80px) below safe area */
    top: calc(env(safe-area-inset-top, 0px) + 44px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(62vw, 300px) !important;
    max-width: calc(100vw - 168px) !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 6px !important;
    z-index: 110 !important;
    pointer-events: none !important;
    font-family: 'Knewave', cursive !important;
    font-size: clamp(10px, 2.9vw, 14px) !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: #ffffff !important;
    -webkit-text-stroke: 2px #0a0a0a !important;
    paint-order: stroke fill !important;
    text-shadow: none !important;
  }

  /* Problem section: stack 2-col grid to single column on mobile */
  #problem-section > div > div {
    display: block !important;
  }
  #problem-section aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 32px !important;
    text-align: left !important;
  }

  /* Before/After proof cards: stack on mobile */
  .before-after-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-bottom: clamp(64px, 10vw, 96px) !important;
  }
  /* Dotted line between red (WITHOUT MI) and white (WITH MI) cards on mobile */
  .before-after-grid > div:first-child {
    border-bottom: none !important;
    box-shadow: 5px 0 0 #0A0A0A !important;
  }
  .before-after-grid > div:last-child {
    border-top: 2px dashed rgba(10,10,10,0.25) !important;
  }

  /* Case study cards on product page: stack on mobile */
  .cs-proof-cards {
    grid-template-columns: 1fr !important;
  }

  /* Core Shift 2-col: stack on mobile */
  #core-shift-grid {
    display: block !important;
  }
  #core-shift-grid aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 32px !important;
    text-align: left !important;
  }

  /* Cost grid: stack on mobile */
  .cost-grid {
    grid-template-columns: 1fr !important;
  }

  /* Core shift article + stat rail: stack on mobile */
  .core-shift-grid {
    grid-template-columns: 1fr !important;
  }
  .core-shift-grid aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
    margin-top: 16px !important;
    text-align: left !important;
  }

  /* Case studies narrative grid: stack on mobile */
  .cs-narrative-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Case studies Without/With MI comparison: stack on mobile */
  .cs-compare-pair {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Product page: did-you-know stats under tiers: stack on mobile */
  .did-you-know-grid {
    grid-template-columns: 1fr !important;
  }

  /* Product page: infra spectrum tier cards: stack on mobile */
  .infra-spectrum-grid {
    grid-template-columns: 1fr !important;
  }

  /* Nav right actions: hide on mobile (hamburger menu takes over) */
  .nav-right-actions {
    display: none !important;
  }

  /* Case studies: standards grid stack on mobile */
  .cs-standards-grid {
    grid-template-columns: 1fr !important;
  }
  .cs-standards-grid aside {
    border-left: none !important;
    border-top: 1px solid rgba(10,10,10,0.16) !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    text-align: left !important;
  }

  /* Reduce iOS/Android scroll “tug of war” between the page and nested regions */
  body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
  }
}