/* M Tek responsive compatibility layer */
html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
img{max-width:100%;}
.contact#contact .contact-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important;}
@media (min-width:681px) and (max-width:1199px){.contact#contact .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}
@media (max-width:680px){.contact#contact .contact-grid{grid-template-columns:1fr!important;gap:14px!important;}}

/* AI Earning mobile-first refinements */
@media (max-width:680px){
  .ai-earning-section .container{width:calc(100% - 28px);}
  .ai-earning-section .ai-panel,
  .ai-earning-section .ai-step,
  .ai-earning-section .ai-future-card,
  .ai-earning-section .ai-faq article{border-radius:16px;}
  .ai-flow-grid{grid-template-columns:1fr!important;gap:12px!important;}
  .ai-faq{grid-template-columns:1fr!important;}
  .ai-disclaimer{padding:14px;}
}

/* Final mobile safeguards */
*,*::before,*::after{max-width:100%;}
html{overflow-x:hidden;}
body{overflow-x:hidden;}
@media (max-width:680px){
  .header{position:sticky;top:0;}
  .navbar{width:calc(100% - 24px);padding:10px 0;}
  .logo img{width:46px;height:46px;}
  .logo h2{font-size:21px;}
  .logo span{font-size:8px;letter-spacing:1.2px;}
  .hero{min-height:auto!important;padding-top:110px!important;}
  .container{width:calc(100% - 28px);}
}

/* ==========================================
Full-viewport / browser-zoom stability
Keep the site width fluid so zooming out never
shrinks the whole layout into a small centered box.
========================================== */
html, body {
    width: 100%;
    min-width: 0;
}

.header,
.navbar,
.hero,
.container {
    width: 100%;
    max-width: none;
}

.navbar {
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

.container {
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

.hero {
    padding-left: clamp(16px, 4vw, 64px);
    padding-right: clamp(16px, 4vw, 64px);
}

/* Do not let old max-width rules re-introduce a narrow
   centered canvas at desktop/zoomed-out viewport sizes. */
.section-title,
.cta-content {
    max-width: none;
}

@media (max-width: 860px) {
    .container,
    .hero,
    .navbar {
        width: 100%;
        max-width: none;
    }
}


/* ==========================================================
   FINAL PUBLIC MOBILE / LEGACY BROWSER SAFETY
========================================================== */
*,*::before,*::after{box-sizing:border-box;}
html,body{width:100%;min-width:0;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;}
img,svg,video,canvas{max-width:100%;height:auto;}
input,select,textarea,button{max-width:100%;font:inherit;}
button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
@media (max-width:700px){
    body{min-height:100vh;}
    .main-content,.dashboard-layout,.page-container,.container{min-width:0 !important;max-width:100% !important;}
    .main-content{overflow-x:hidden !important;}
    table{max-width:100%;}
    [style*="100dvh"]{min-height:100vh;}
}
@supports (height:100svh){
    @media (max-width:700px){.sidebar{height:100svh !important;}}
}