/* ═══════════════════════════════════════════════════════════════════════
   ecomit mobile: the app layer (phones only, ≤ 767px)
   Same content as desktop, laid out like an installed app: compact app bar,
   bottom tab bar, swipeable card rows instead of long stacks, tight rhythm.
   Swipe rows are chosen by assets/js/mobile.js (adds .m-swipe).
   ═══════════════════════════════════════════════════════════════════════ */

.tabbar { display: none; }

@media (max-width: 767px) {
  :root { --m-gutter: 16px; --tab-h: 64px; --nav-h: 58px; }
  html { -webkit-tap-highlight-color: transparent; }
  body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); overscroll-behavior-y: none; }
  .container { padding-inline: var(--m-gutter); }

  /* ─── Rhythm: no big empty bands ─── */
  .section { padding-block: 44px; }
  .section--tight { padding-block: 32px; }
  .proof { padding-block: 12px 36px; }
  .section-head { margin-bottom: 20px; }
  .section-head .eyebrow { margin-bottom: .6rem; }
  .section-head .h2 + .lede, .section-head .lede { margin-top: .6rem; }
  .section-head--split { gap: .9rem; align-items: flex-start; }
  .h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .h2 { font-size: clamp(1.6rem, 7.4vw, 2rem); line-height: 1.1; }
  .h3 { font-size: 1.15rem; }
  .lede { font-size: 1rem; line-height: 1.55; }
  .tile { padding: 18px; border-radius: 18px; }
  .page-hero { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 24px; }
  .crumbs { margin-bottom: .8rem; }
  .cta-band, .cta-band .tile { padding-block: 32px; }
  .mt-2 { margin-top: .9rem; }

  /* ─── App bar ─── */
  .nav { height: var(--nav-h); }
  .nav .nav-quote, .nav .theme-btn { display: none; }

  /* ─── Bottom tab bar ─── */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
    background: rgba(255,255,255,.94); border-top: 1px solid var(--line);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  }
  .tabbar a, .tabbar button {
    height: var(--tab-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font: 600 .64rem/1 var(--font, inherit); letter-spacing: .01em; color: var(--muted); background: none; border: 0;
    transition: color .2s, transform .15s;
  }
  .tabbar .ico { width: 22px; height: 22px; }
  .tabbar .is-active { color: var(--brand); }
  .tabbar a:active, .tabbar button:active { transform: scale(.92); }
  .tabbar__quote { position: relative; }
  .tabbar__quote span:first-child {
    width: 50px; height: 50px; margin-top: -22px; border-radius: 18px; display: grid; place-items: center;
    background: var(--brand); color: #fff; box-shadow: 0 10px 24px -8px rgba(91,63,217,.7), 0 0 0 4px #fff;
  }
  .tabbar__quote { color: var(--text) !important; }
  .tabbar .tab-wa { color: #128C4A; }
  .mbar, .wa-float { display: none !important; }
  body.calc-page .tabbar { display: none; }
  body.calc-page { padding-bottom: 0; }
  .footer { padding-bottom: 12px; }
  .footer__mega { display: none; }

  /* ─── Swipe rows (cards side by side, snap one at a time) ─── */
  .m-swipe {
    display: flex !important; flex-wrap: nowrap; gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m-gutter);
    margin-inline: calc(var(--m-gutter) * -1); padding: 4px var(--m-gutter) 6px;
    scrollbar-width: none; grid-template-columns: none !important;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * {
    flex: 0 0 84%; min-width: 0; scroll-snap-align: start; grid-column: auto !important;
    opacity: 1 !important; transform: none !important; margin: 0 !important;
  }
  .m-swipe > .stack-card > .tile, .m-swipe > * > .tile { height: 100%; }
  .m-swipe--wide > * { flex-basis: 90%; }
  .m-pager { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .m-pager i { width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); transition: width .3s var(--ease), background .3s; }
  .m-pager i.is-on { width: 18px; background: var(--brand); }
  .m-pager--tabs { gap: 6px; margin: 0 0 14px; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .m-pager--tabs button { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: 600 .82rem/1 var(--font, inherit); color: var(--text-2); }
  .m-pager--tabs button.is-on { background: var(--text); border-color: var(--text); color: #fff; }

  /* ─── Home specifics ─── */
  .hero { padding-top: calc(var(--nav-h) + 18px) !important; padding-bottom: 8px !important; min-height: 0 !important; }
  .proof .bento { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .proof .tile { min-height: 0; padding: 14px; grid-column: auto !important; }
  .proof .chip { margin-bottom: .7rem; width: 34px; height: 34px; }
  .proof .stat__num { font-size: 1.9rem; }
  .proof .stat__sub { font-size: .74rem; }
  .pillars .pillar { min-height: 0 !important; padding: 0 !important; display: grid; gap: 16px; }
  .pillars .pillar > div:first-child { padding: 0; }
  .pillars .pillar .h1 { font-size: 2rem; }
  .pillars .pillar__visual { position: relative; height: 280px; min-height: 0; margin: 0; border-radius: 18px; }
  .pillars__stage { display: none; }
  .pillar__list { gap: .4rem .8rem; }
  .m-swipe.pillars__steps > * { flex-basis: 100%; }
  .path__steps { gap: 10px !important; }
  .path:has(.m-swipe) .path__svg, .path:has(.m-swipe) .path__traveller, .m-swipe .path__node { display: none; }
  .m-swipe.path__steps > .path__step { padding-left: 0; display: block; }
  .m-swipe.path__steps > .path__step > .tile { height: 100%; }
  .path__step .tile { padding: 14px 16px; }
  .review { padding: 16px; }
  .post-tile .post-tile__art, .post-tile > div:first-child[class*="art"] { aspect-ratio: 16 / 8; }
  .globe { margin-inline: -8px; }

  /* ─── Inner pages ─── */
  #metrics .grid-4 { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  #metrics .grid-4 .tile { padding: 14px; }
  .stack-cards { gap: 10px; }
  .stack-card > .tile { min-height: 0; gap: 12px; padding: 16px; }
  .stack-card .big-num { font-size: 2rem; }
  .work-grid { gap: 12px !important; }
  .case-card__metric { font-size: 2.6rem !important; }
  .subnav { top: calc(var(--nav-h) + 8px) !important; }
  .subnav__inner { width: 100%; border-radius: 14px; }
  .faq-group { margin-bottom: 18px; }
  .included-note { margin-top: 14px; }

  /* hero actions sit side by side like app buttons */
  .hero .cluster:has(> .btn), .page-hero .cluster:has(> .btn) { gap: 10px; }
  .hero .cluster > .btn, .page-hero .cluster > .btn { flex: 1 1 150px; padding-inline: 12px; justify-content: center; white-space: nowrap; }

  /* ─── Feel ─── */
  a.tile:active, .btn:active { transform: scale(.98); }
  .btn { min-height: 48px; }
  .btn--sm { min-height: 40px; }
  [data-tilt], .tile--hover { transform: none !important; }
}

/* Installed app (home-screen launch): respect the notch */
@media (display-mode: standalone) and (max-width: 767px) {
  .nav { padding-top: env(safe-area-inset-top); height: calc(var(--nav-h) + env(safe-area-inset-top)); }
}