/* ===================================================================
   FLOWTRIG — mobile.css
   Mobile-only header compaction + sticky Book-a-demo bar.
   Desktop header untouched.
   =================================================================== */

/* compact nav button used only on mobile */
.nav-demo-m{ display:none; }

@media(max-width:720px){
  .nav-inner{ height:62px; }
  .brand img{ height:24px; }
  /* hide desktop CTAs, show compact demo button */
  .nav-cta .btn-ghost,
  .nav-cta a.btn-green:not(.nav-demo-m){ display:none; }
  .nav-cta{ gap:7px; }
  .theme-toggle{ width:36px; height:36px; flex:0 0 36px; }
  .nav-demo-m{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; font-size:13px; border-radius:10px;
  }
  .nav-demo-m svg{ width:13px; height:13px; }

  /* hero CTAs: equal height + width, clean on small screens */
  .hero-cta{ gap:10px; width:100%; padding:0 4px; }
  .hero-cta .btn{ flex:1 1 0; min-width:0; justify-content:center; height:54px; padding:0 14px; }
  .hero-cta .btn-video{ padding:0 14px 0 6px; gap:9px; }
  .hero-cta .btn-video .vp{ width:34px; height:34px; flex:0 0 34px; }
}

/* sticky bottom Book-a-demo bar (mobile only) */
.m-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  display:none; gap:9px; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-top:1px solid var(--line);
  transform:translateY(120%); transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.m-sticky.show{ transform:none; }
.m-sticky a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; border-radius:12px; font-size:14px; font-weight:700; }
.m-sticky .demo{ flex:1; background:var(--g-btn2); color:#fff; box-shadow:0 8px 20px -10px rgba(43,232,129,.7); }
.m-sticky .wa{ flex:0 0 52px; background:#25D366; color:#fff; }
.m-sticky a svg{ width:18px; height:18px; }

@media(max-width:720px){
  .m-sticky{ display:flex; }
  /* lift floating widgets so the bar doesn't cover them */
  body{ --m-cta-h:70px; }
}
@media(prefers-reduced-motion: reduce){ .m-sticky{ transition:none; } }