/* ==========================================================
   SmartCafe Marketing Responsive v6 — 2026-09-24
   Final mobile-first corrective layer for smartcafe.store.
   Loaded LAST so legacy landing/style rules cannot win.
   ========================================================== */

html,body{width:100%;max-width:100%;overflow-x:hidden}
body{margin:0}
#siteHeader,.landing-hero,.trust-bar,.section-block,.section-features,.section-faq,.landing-cta,.landing-footer{width:100%;max-width:100%}
.container,.header-inner{min-width:0}
img,svg,video,canvas{max-width:100%;height:auto}

/* Header: make the mobile action deterministic. */
#siteHeader .header-inner{box-sizing:border-box}
.mobile-menu-toggle{flex:0 0 42px!important;width:42px!important;min-width:42px!important;max-width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;margin:0!important}
.mobile-menu-toggle span{display:block!important;width:18px!important;height:2px!important;min-height:2px!important;border-radius:999px!important;background:#17663f!important;opacity:1!important}

/* Dashboard preview must always consume the available width. */
.landing-hero-visual,.hero-visual-shell,.hero-browser-window,.hero-app-preview,.hero-app-main{min-width:0!important;max-width:100%!important}
.hero-browser-window{width:100%!important}
.hero-app-main{width:auto!important}

/* Footer must end cleanly at the document edge. */
.landing-footer{margin:0!important;padding-bottom:max(0px,env(safe-area-inset-bottom,0px))!important;background:#101713!important}
.landing-footer .footer-inner,.landing-footer .footer-bottom{margin-bottom:0!important}
.landing-footer .footer-bottom{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important}

@media (max-width:900px){
  html{scroll-padding-top:66px!important}
  #siteHeader{min-height:62px!important}
  #siteHeader .header-inner{width:100%!important;max-width:none!important;min-height:62px!important;height:62px!important;padding:0 16px!important;gap:10px!important}
  #siteHeader .logo{min-width:0!important;max-width:calc(100% - 54px)!important;flex:1 1 auto!important;font-size:1.18rem!important;gap:9px!important;overflow:hidden!important}
  #siteHeader .logo>span:last-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #siteHeader .logo-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;border-radius:10px!important}
  #siteHeader .header-actions{flex:0 0 auto!important;margin-left:auto!important;gap:0!important}
  .header-register-btn{display:none!important}
  .mobile-menu-toggle{display:inline-flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;border:1px solid #dce5df!important;border-radius:11px!important;background:#fff!important;box-shadow:none!important}

  /* Root marketing mobile nav behaves like a compact panel, not a giant blank block. */
  .mobile-nav{display:grid!important;position:fixed!important;top:calc(62px + env(safe-area-inset-top,0px))!important;left:12px!important;right:12px!important;width:auto!important;max-height:calc(100dvh - 76px - env(safe-area-inset-top,0px))!important;overflow:auto!important;padding:10px!important;border:1px solid #dfe6e1!important;border-radius:14px!important;background:#fff!important;box-shadow:0 18px 48px rgba(20,34,25,.16)!important;transform:translateY(-8px)!important}
  .mobile-nav.is-open{transform:translateY(0)!important}
  .mobile-nav a{min-height:44px!important;padding:0 12px!important;border-radius:10px!important;font-size:.82rem!important}

  .landing-hero{padding:36px 0 42px!important}
  .landing-hero-inner{width:min(100% - 28px,760px)!important;grid-template-columns:1fr!important;gap:30px!important}
  .landing-hero-text,.landing-hero-visual{width:100%!important;max-width:100%!important;margin:0!important}
  .landing-hero-text h1{font-size:clamp(2.05rem,8.9vw,3.35rem)!important;line-height:1.04!important;overflow-wrap:normal!important;word-break:normal!important}
  .landing-hero-text>p{max-width:none!important;font-size:.94rem!important;line-height:1.65!important}
  .hero-feature-tags{gap:7px!important;margin:18px 0!important}
  .hero-tag{font-size:.74rem!important}
  .hero-cta{grid-template-columns:1fr!important;gap:8px!important}
  .hero-cta>*{width:100%!important;min-width:0!important}
  .hero-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin-top:22px!important;padding-top:16px!important}
  .hero-stats .stat{min-width:0!important;padding:0!important}
  .hero-stats .stat strong{font-size:.96rem!important;white-space:normal!important}
  .hero-stats .stat span{font-size:.66rem!important;line-height:1.35!important}
  .stat-div{display:none!important}
  .hero-admin-box{padding:14px!important}

  .hero-visual-shell{width:100%!important;padding:0!important;border:0!important;border-radius:16px!important;background:transparent!important;box-shadow:none!important}
  .hero-visual-glow,.hero-visual-badge{display:none!important}
  .hero-browser-window{border-radius:16px!important;box-shadow:0 16px 42px rgba(23,33,28,.12)!important}
  .hero-browser-bar{grid-template-columns:auto minmax(0,1fr) auto!important;min-height:40px!important;padding:7px 9px!important;gap:7px!important}
  .hero-browser-address{min-width:0!important;width:100%!important;justify-content:flex-start!important;padding-inline:9px!important}
  .hero-browser-profile{gap:0!important}.hero-browser-profile>i{display:none!important}

  /* Critical fix: sidebar is hidden on mobile, therefore the grid MUST become one column. */
  .hero-app-preview{display:block!important;width:100%!important;min-height:0!important;height:auto!important;grid-template-columns:1fr!important;background:#f7f9f8!important}
  .hero-app-sidebar{display:none!important}
  .hero-app-main{display:block!important;width:100%!important;min-width:0!important;padding:14px!important}
  .hero-app-heading{margin-bottom:12px!important}
  .hero-app-heading h3{font-size:1.02rem!important}
  .hero-app-heading p{display:block!important;font-size:.62rem!important}
  .hero-app-live{font-size:.56rem!important;padding:5px 8px!important}
  .hero-app-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin-bottom:9px!important}
  .hero-app-stat{min-width:0!important;padding:9px!important;border-radius:11px!important}
  .hero-app-stat small{min-height:0!important;font-size:.50rem!important}
  .hero-app-stat strong{font-size:.69rem!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.25!important}
  .hero-app-content-grid{grid-template-columns:minmax(0,1.15fr) minmax(125px,.85fr)!important;gap:8px!important}
  .hero-revenue-card,.hero-orders-card{min-width:0!important;padding:10px!important}
  .hero-chart-area{height:125px!important}

  .section-block,.section-features,.section-faq{padding:52px 0!important}
  .section-head{margin-bottom:24px!important}
  .section-head h2{font-size:clamp(1.55rem,6vw,2rem)!important}
  .section-head p{font-size:.87rem!important}
  .compare-grid,.highlight-grid,.landing-features-grid,.workflow-grid,.pricing-grid,.landing-testi-grid{grid-template-columns:1fr!important;gap:12px!important}
  .landing-feature-card,.highlight-card,.workflow-card,.pricing-card,.testi-card{width:100%!important;min-width:0!important}

  .landing-cta{padding:52px 0!important}
  .landing-cta .container{width:min(100% - 28px,760px)!important;padding:0!important}
  .landing-cta h2{font-size:1.75rem!important;line-height:1.15!important}
  .landing-cta p{font-size:.9rem!important;line-height:1.65!important}

  .landing-footer .footer-inner{width:min(100% - 28px,760px)!important;grid-template-columns:1fr 1fr!important;gap:24px 18px!important;padding:34px 0 28px!important}
  .landing-footer .footer-brand{grid-column:1/-1!important}
  .landing-footer .footer-brand .logo{font-size:1.25rem!important}
  .landing-footer .footer-brand p{max-width:520px!important;font-size:.78rem!important;line-height:1.65!important}
  .landing-footer .footer-links,.landing-footer .footer-contact{min-width:0!important}
  .landing-footer .footer-links a,.landing-footer .footer-contact p{overflow-wrap:anywhere!important}
}

@media (max-width:520px){
  #siteHeader .header-inner{padding-inline:12px!important}
  .landing-hero-inner,.landing-cta .container,.landing-footer .footer-inner{width:calc(100% - 24px)!important}
  .landing-hero{padding-top:28px!important}
  .hero-eyebrow{font-size:.68rem!important;line-height:1.35!important}
  .landing-hero-text h1{font-size:clamp(1.9rem,9.6vw,2.72rem)!important}
  .hero-feature-tags{display:flex!important;flex-wrap:wrap!important}
  .hero-tag{font-size:.69rem!important;padding:7px 8px!important}
  .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .hero-admin-list{grid-template-columns:1fr!important}

  .hero-app-main{padding:11px!important}
  .hero-app-heading{align-items:center!important}
  .hero-app-heading h3{font-size:.9rem!important}
  .hero-app-heading p{font-size:.56rem!important}
  .hero-app-stat-grid{gap:6px!important}
  .hero-app-stat{padding:7px!important;gap:5px!important}
  .hero-stat-icon{width:22px!important;height:22px!important;flex-basis:22px!important}
  .hero-app-stat small{font-size:.45rem!important}
  .hero-app-stat strong{font-size:.61rem!important}
  .hero-app-content-grid{grid-template-columns:1fr!important;gap:7px!important}
  .hero-chart-area{height:112px!important}
  .hero-orders-card{min-height:0!important}
  .hero-order-status{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  .hero-status-row{grid-template-columns:1fr!important;justify-items:center!important;text-align:center!important;gap:3px!important}
  .hero-status-row small,.hero-status-row b{display:none!important}
  .hero-status-row strong{font-size:.46rem!important;white-space:nowrap!important}
  .hero-order-footer{display:none!important}

  .landing-footer .footer-inner{grid-template-columns:1fr!important;gap:20px!important}
  .landing-footer .footer-brand{grid-column:auto!important}
}

@media (max-width:389.98px){
  #siteHeader .header-inner{height:58px!important;min-height:58px!important;padding-inline:10px!important;gap:8px!important}
  #siteHeader .logo{font-size:1.03rem!important;max-width:calc(100% - 48px)!important}
  #siteHeader .logo-icon{width:32px!important;height:32px!important;flex-basis:32px!important}
  .mobile-menu-toggle{width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;min-height:38px!important;flex-basis:38px!important}
  .mobile-nav{top:calc(58px + env(safe-area-inset-top,0px))!important;left:9px!important;right:9px!important}

  .landing-hero-inner,.landing-cta .container,.landing-footer .footer-inner{width:calc(100% - 18px)!important}
  .landing-hero-text h1{font-size:clamp(1.78rem,9.8vw,2.42rem)!important}
  .landing-hero-text>p{font-size:.87rem!important}
  .hero-stats{grid-template-columns:1fr 1fr!important}
  .hero-stats .stat:last-child{grid-column:1/-1!important}
  .hero-browser-bar{padding-inline:7px!important}
  .hero-browser-dots{display:none!important}
  .hero-app-main{padding:9px!important}
  .hero-app-stat{padding:6px!important}
  .hero-app-stat strong{font-size:.57rem!important}
  .section-block,.section-features,.section-faq{padding:44px 0!important}
  .landing-cta h2{font-size:1.55rem!important}
}

@media (min-width:901px) and (max-width:1180px){
  .container,.header-inner{width:min(100% - 40px,1180px)!important}
  .landing-hero-inner{grid-template-columns:minmax(0,1fr) minmax(410px,.9fr)!important;gap:38px!important}
  .hero-browser-window{width:100%!important}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}