/* ============================================================
   wap.css — mobile-native layer (<=767px). "Heavy Structural" system.
   Fixes: fixed drawer trapped by header blur (solid header, no blur);
   single-column grids use minmax(0,1fr) so 320px never overflows.
   ============================================================ */
@media (max-width:767px){
  :root{
    --tabbar-h:62px;
    --safe-b:env(safe-area-inset-bottom,0px);
    --safe-t:env(safe-area-inset-top,0px);
  }
  html,body{overflow-x:hidden}
  body{
    -webkit-text-size-adjust:100%;text-size-adjust:100%;
    padding-top:60px;
    padding-bottom:calc(var(--tabbar-h) + var(--safe-b));
  }
  .wrap{padding:0 16px}
  .icon{width:20px;height:20px}
  .btn{min-height:50px}
  .btn.lg{padding:16px 22px;width:100%}
  .hero-cta,.mhero-cta,.band-btns{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.mhero-cta .btn,.band-btns .btn{width:100%}

  /* header stays solid graphite so fixed drawer escapes */
  .hdr{height:60px}
  .hdr-in{height:60px;gap:12px}
  .brand-txt i{display:none}
  .brand-txt b{font-size:17px}
  .brand-mark{width:36px;height:36px}
  .hdr-tools .btn-wa{display:none}
  .nav{
    position:fixed;inset:0;z-index:300;background:var(--graphite);flex-direction:column;align-items:stretch;
    padding:0;margin:0;display:none;overflow-y:auto;border-radius:0;
  }
  .nav.open{display:flex}
  .nav>a{padding:19px 22px;border-bottom:1px solid rgba(255,255,255,.1);font-size:16px;border-radius:0}
  .m-nav-head{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-t) + 18px) 22px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
  .m-nav-head b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:18px;color:#fff}
  .m-nav-x{background:none;border:none;font-size:32px;line-height:1;color:#fff;cursor:pointer}
  .m-nav-foot{display:flex;margin-top:auto;padding:22px;padding-bottom:calc(var(--safe-b) + 22px);border-top:1px solid rgba(255,255,255,.14)}
  .m-nav-foot a{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-weight:700}
  body.nav-open{overflow:hidden}

  /* hero */
  .hero-in{padding:48px 16px 44px}
  .hero-txt h1{font-size:clamp(34px,11vw,54px);margin:18px 0 20px}
  .hero-sub{font-size:16px}
  .hero-note{font-size:11px}
  .statstrip{grid-template-columns:1fr 1fr;border-width:2px}
  .stat{padding:20px 18px}
  .stat-n{font-size:32px}
  .stat-l{font-size:10px}

  /* sections */
  .sec{padding:60px 0}
  .sec-head{margin-bottom:32px;padding-top:20px}
  .sec-title{font-size:clamp(26px,8vw,38px)}
  .sec-sub{font-size:15.5px}
  .grid2,.grid3,.grid4{grid-template-columns:1fr;gap:16px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .grid2>*, .grid3>*, .grid4>*{min-width:0}
  .catcard{padding:24px 22px}
  .catcard h3{font-size:20px}
  .linecard{padding:24px 22px}
  .appcard{padding:20px}
  .appcard.big{padding:24px}
  .appcard.big h3{font-size:17px}
  .appcard-ar{display:none}

  /* machine card */
  .mcard-in{padding:16px 14px 14px}
  .mcard h3{font-size:16px;margin:6px 0 12px}
  .mspec>div{padding:8px 0}

  /* filters scroll */
  .filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:8px;margin:0 -16px 28px;padding:0 16px 6px;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .fchip{flex:0 0 auto}

  /* machine hero */
  .mhero-in{padding:40px 16px}
  .mhero-txt h1{font-size:clamp(32px,10vw,48px)}
  .mhero-ph{order:-1;margin-bottom:8px;padding:6px}
  .mhero-keys{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .kkey{min-width:0;padding:14px 16px}

  /* spec table stacked */
  .specrow{grid-template-columns:1fr}
  .specrow dt{border-right:0;border-bottom:1px solid var(--line);padding:12px 18px 5px;background:transparent}
  .specrow dd{padding:5px 18px 15px;font-size:15px}
  .specmatrix{display:block;line-height:1.75}

  /* faq */
  .faq-item summary{padding:18px 50px 18px 20px;font-size:15px}
  .faq-a{padding:0 20px 20px}

  /* article / factbox */
  .article h1{font-size:clamp(28px,9vw,40px)}
  .prose{font-size:16px}
  .factbox>div{grid-template-columns:1fr;gap:4px;padding:14px 0}

  /* split */
  .split-txt h2{font-size:26px}
  .ticks li{font-size:15px}

  /* band */
  .band{padding:52px 0}
  .band h2{font-size:26px}

  /* footer */
  .fcta-in{padding:40px 16px;gap:22px}
  .fcta-l h2{font-size:24px}
  .fcta-btns{width:100%;flex-direction:column}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:28px;padding:48px 0 32px}
  .fbrand{grid-column:1 / -1}
  .ftrust-i{padding:16px 18px}
  .fbottom{flex-direction:column;gap:6px;padding:20px 0 30px}

  /* contact */
  .contact-grid{gap:26px}
  .cform{padding:22px}
  .cf-row{grid-template-columns:1fr}
  .cform input,.cform textarea{font-size:16px}

  /* bottom tab bar */
  .mtab{
    position:fixed;left:0;right:0;bottom:0;z-index:100;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    background:var(--graphite);border-top:2px solid var(--accent);padding-bottom:var(--safe-b);
  }
  .mtab .tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:var(--tabbar-h);font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.04em;
    color:#8A939B;text-transform:uppercase;min-width:0;
  }
  .mtab .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  .mtab .tab .icon{width:22px;height:22px;stroke-width:1.5}
  .mtab .tab.on{color:#fff}
  .mtab .tab.on .icon{color:var(--accent)}
  .mtab .tab-wa{color:var(--accent)}

  /* chat above tabbar */
  .chat{right:14px;bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px)}
  .chat-launch{padding:0;width:54px;height:54px;justify-content:center}
  .chat-launch .icon{width:22px;height:22px}
  .chat-launch span{display:none}
  .chat-panel{width:calc(100vw - 28px);max-width:340px}
}

/* ---- mobile audit fixes (2026-10-03) ---- */
@media (max-width:767px){
  .lang-btn{min-height:44px;padding:0 14px;display:inline-flex;align-items:center}
  .stat-n{font-size:24px;line-height:1.05;overflow-wrap:anywhere}
  .stat-l{font-size:11px}
  .photostrip figcaption,.fshot figcaption{font-size:11px}
  .fcol h5,.ftr .fcol h5{font-size:11px}
  .mtab .tab{font-size:10.5px}
  .mspec dt,.mspec dd{min-width:0;overflow-wrap:anywhere}
  .mcard-cat{font-size:10.5px}
  .kkey span{font-size:11px}
  .mcard h3,.mcard-in,.catcard h3,.linecard h3{overflow-wrap:anywhere;min-width:0}
}
@media (max-width:380px){
  .grid4{grid-template-columns:1fr}
  .statstrip{grid-template-columns:1fr 1fr}
}