/* ABDflow — mobile app shell (phones only).
   Principle: minimal overrides, no z-index wars, no !important cascades.
   Desktop is completely untouched — every rule is gated behind html.abd-app. */

/* ── Base: safe viewport + no horizontal jiggle ── */
html.abd-app {
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}
html.abd-app body {
  overflow-x: clip;
  /* Reserve space for the bottom dock so footer/content is never hidden */
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  background: #070b14;
}

/* Product pages retain their individual visual languages on phones while
   gaining a shared, native-feeling navigation rhythm. */
html.abd-app body:not(.abd-has-chrome) {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
html.abd-app body:not(.abd-has-chrome) .nav,
html.abd-app body:not(.abd-has-chrome) header {
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  width: calc(100% - 20px) !important;
  max-width: none !important;
  min-height: 52px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
}
html.abd-app body:not(.abd-has-chrome) .nav-links,
html.abd-app body:not(.abd-has-chrome) .bl,
html.abd-app body:not(.abd-has-chrome) .nr > :not(.tt) {
  display: none !important;
}
html.abd-app body:not(.abd-has-chrome) .nav-actions .button,
html.abd-app body:not(.abd-has-chrome) .nav-actions a:not(.icon-btn),
html.abd-app body:not(.abd-has-chrome) header > :not(.logo):not(.nr) {
  display: none !important;
}
html.abd-app body:not(.abd-has-chrome) .hero {
  scroll-margin-top: 72px;
}
html.abd-app body:not(.abd-has-chrome) .hero-actions > a,
html.abd-app body:not(.abd-has-chrome) .hero-actions > button,
html.abd-app body:not(.abd-has-chrome) .cta > a,
html.abd-app body:not(.abd-has-chrome) .cta > button {
  min-height: 48px !important;
}
html.abd-app body:not(.abd-has-chrome) .hero-actions,
html.abd-app body:not(.abd-has-chrome) .cta > div:last-child {
  gap: 10px !important;
}
html.abd-app img,
html.abd-app video { max-width: 100%; height: auto; }
html.abd-app a,
html.abd-app button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html.abd-app input,
html.abd-app select,
html.abd-app textarea { font-size: 16px !important; } /* prevent iOS zoom */

/* ── Header: cooperate with site-chrome.js instead of fighting it.
      site-chrome.js hides header until scroll (is-visible). On mobile we
      simply keep it visible and compact — no !important war. ── */
html.abd-app body.abd-has-chrome .site-header[data-abd-chrome="1"],
html.abd-app body.abd-has-chrome #header[data-abd-chrome="1"] {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  background: rgba(7, 11, 20, .94) !important;
  border-bottom: 1px solid rgba(151, 196, 255, .14) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  box-shadow: 0 8px 24px rgba(1, 5, 14, .35) !important;
  transition: none !important;
  animation: none !important;
}
html.abd-app body.abd-has-chrome #header .header-inner {
  width: calc(100% - 20px) !important;
  max-width: none !important;
  height: 56px !important;
  gap: 10px !important;
}
/* Hide only the desktop-only chrome inside the header — keep burger + brand */
html.abd-app body.abd-has-chrome #header .brand-tagline,
html.abd-app body.abd-has-chrome #header .btn-text,
html.abd-app body.abd-has-chrome #header .btn-primary,
html.abd-app body.abd-has-chrome #header .main-nav,
html.abd-app body.abd-has-chrome #header .nav-links { display: none !important; }
html.abd-app body.abd-has-chrome #header .menu-button {
  display: grid !important;
  width: 40px !important;
  height: 40px !important;
}
html.abd-app body.abd-has-chrome #header .brand-name,
html.abd-app body.abd-has-chrome #header .abd-word,
html.abd-app body.abd-has-chrome #header .flow-word {
  font-size: 18px !important;
}
/* Content starts below the compact header — no overlap */
html.abd-app body.abd-has-chrome main,
html.abd-app body.abd-has-chrome #top {
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
}

/* ── Bottom dock: lightweight glass bar.
      z-index is BELOW menus/scrims so it never covers an open sheet. ── */
.abd-dock { display: none; }
html.abd-app .abd-dock {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Below mega-menu (100190), mobile-menu (100195), search (100250) */
  z-index: 90;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding: 4px 4px env(safe-area-inset-bottom, 0px);
  background: rgba(8, 12, 22, .96);
  border-top: 1px solid rgba(151, 196, 255, .12);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
html.abd-app .abd-dock a,
html.abd-app .abd-dock button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #7e94ae;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  font: 600 10px/1 "Plus Jakarta Sans", "Instrument Sans", sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: 12px;
  transition: color .2s, background .2s;
}
html.abd-app .abd-dock svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
html.abd-app .abd-dock a.is-on,
html.abd-app .abd-dock button.is-on {
  color: #eaf4ff;
  background: rgba(0, 192, 240, .10);
}
/* When any overlay is open, dim the dock so it doesn't compete */
html.abd-app body.nav-open .abd-dock,
html.abd-app body.modal-open .abd-dock,
html.abd-app body.abd-sc-nav-open .abd-dock {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* ── Homepage: bento → simple vertical stack ── */
html.abd-app .abdh-hero {
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 14px 8px !important;
  overflow: visible !important;
}
html.abd-app .abdh .cell-b,
html.abd-app .abdh .cell-c,
html.abd-app .abdh .cell-d,
html.abd-app .abdh .cell-e { display: none !important; }
html.abd-app .abdh .cell-a {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  border-radius: 20px;
}
html.abd-app .abdh .flip-inner,
html.abd-app .abdh .flip-scene {
  transform: none !important;
  min-height: 0 !important;
  height: auto !important;
  perspective: none !important;
}
html.abd-app .abdh .face {
  position: relative !important;
  transform: none !important;
  backface-visibility: visible !important;
  min-height: 0 !important;
  height: auto !important;
  inset: auto !important;
}
html.abd-app .abdh .face-front { padding: 22px 18px 10px !important; }
html.abd-app .abdh .sim-stack,
html.abd-app .abdh .flip-hint { display: none !important; }
/* face-back (industry grid) is desktop-only — hidden on phones */
html.abd-app .abdh .face-back,
html.abd-app .abdh .face-a-back { display: none !important; }
html.abd-app .abdh h1 {
  max-width: 12ch;
  font-size: clamp(30px, 8.5vw, 40px) !important;
  line-height: .96 !important;
}
html.abd-app .abdh .lede {
  max-width: none;
  font-size: 14px !important;
  margin-top: 10px !important;
}
html.abd-app .abdh .cta-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px !important;
}
html.abd-app .abdh .btn {
  min-height: 46px;
  justify-content: center;
  width: 100%;
  font-size: 11px;
}
html.abd-app .abdh .industry-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}
html.abd-app .abdh .industry {
  min-height: 68px;
  border-radius: 14px;
  padding: 12px;
}

/*ticker hidden on phones — saves height, reduces motion */
html.abd-app .ticker { display: none !important; }

/* Sections breathe a little tighter on phones */
html.abd-app .section,
html.abd-app .tool-finder,
html.abd-app .maku-zone,
html.abd-app .closing { padding: 32px 0 !important; }
html.abd-app .container,
html.abd-app .peo-wrap { width: min(calc(100% - 24px), 1380px) !important; }
html.abd-app .section-head { display: block !important; margin-bottom: 16px !important; }
html.abd-app .section-title { font-size: clamp(24px, 7vw, 32px) !important; }

/* ── Desktop-only: flipping grids removed on phones ── */
html.abd-app .flagship-grid,
html.abd-app #platformGrid,
html.abd-app .flip-card { display: none !important; }
html.abd-app #platformToggle,
html.abd-app .platform-toggle { display: none !important; }

/* Platform tiles: keep marquee but compact — no flip behavior */
html.abd-app .platform-tile {
  width: min(76vw, 280px) !important;
  height: 132px !important;
}
html.abd-app .core-card {
  min-height: 0 !important;
  border-radius: 18px !important;
}
html.abd-app .closing { min-height: 0 !important; }
html.abd-app .closing-actions,
html.abd-app .peo-actions {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
}
html.abd-app .btn,
html.abd-app .peo-btn {
  min-height: 46px;
  justify-content: center;
}

/* People / industry landings — single column */
html.abd-app .peo-hero { min-height: 0 !important; padding: 20px 0 16px !important; }
html.abd-app .peo-hero-grid { min-height: 0 !important; gap: 16px !important; }
html.abd-app .peo-sim { min-height: 360px !important; }
html.abd-app .peo-sim-body { grid-template-columns: 1fr !important; }
html.abd-app .peo-sim-side { display: none !important; }
html.abd-app .peo-role-grid,
html.abd-app .peo-brand-grid,
html.abd-app .peo-proof-grid { grid-template-columns: 1fr !important; }

/* ── Bubbles that must not cover the dock ── */
html.abd-app .mcta-bar { display: none !important; }
html.abd-app .abd-cookie-consent {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: none !important;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  z-index: 95 !important;
}
html.abd-app body.nav-open .abd-cookie-consent,
html.abd-app body.abd-sc-nav-open .abd-cookie-consent,
html.abd-app body.modal-open .abd-cookie-consent { display: none !important; }

/* Footer: extra bottom breathing room above the dock is already handled by body padding */
html.abd-app footer.footer { padding-bottom: 16px !important; }
html.abd-app .footer-top { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }

/* Mobile menu: account for compact header + dock */
html.abd-app .mobile-menu {
  padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Phone hero: keep the desktop system visible, rather than reducing it
   to one text card. The bento becomes a deliberate stacked command deck. ── */
html.abd-app .abdh-hero {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: 10px !important;
  padding: 14px 12px 10px !important;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(0, 112, 240, .26), transparent 58%),
    #070b14 !important;
}
html.abd-app .abdh .cell-a {
  grid-column: 1 / -1 !important;
  min-height: 500px !important;
  border-radius: 22px !important;
}
html.abd-app .abdh .cell-a .sim-stack {
  display: block !important;
  width: 84% !important;
  max-width: 330px !important;
  right: -5% !important;
  bottom: 4% !important;
  opacity: .9;
}
html.abd-app .abdh .cell-b,
html.abd-app .abdh .cell-c,
html.abd-app .abdh .cell-d,
html.abd-app .abdh .cell-e {
  display: block !important;
  position: relative !important;
  min-height: 188px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 163, 242, .22) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(15, 34, 83, .94), rgba(5, 10, 27, .98)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(0, 24, 78, .32) !important;
}
html.abd-app .abdh .cell-b,
html.abd-app .abdh .cell-c { grid-column: 1 / -1 !important; }
html.abd-app .abdh .cell-d,
html.abd-app .abdh .cell-e { min-height: 142px !important; }
html.abd-app .abdh .flip-inner {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: inherit !important;
  transform: none !important;
}
html.abd-app .abdh .face.face-front {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  min-height: 0 !important;
  height: 100% !important;
  transform: none !important;
  border-radius: inherit !important;
}
html.abd-app .abdh .face-back { display: none !important; }
html.abd-app .abdh .cell-b .face-b-front {
  padding: 20px !important;
  justify-content: flex-end !important;
  background: radial-gradient(circle at 82% 26%, rgba(0,192,240,.23), transparent 37%) !important;
}
html.abd-app .abdh .maku-title { max-width: 12ch !important; font-size: 30px !important; }
html.abd-app .abdh .cell-b .ai-orbit { display: block !important; right: -2% !important; top: -10% !important; width: 66% !important; height: 135% !important; opacity: .94; }
html.abd-app .abdh .cell-b .ai-glow,
html.abd-app .abdh .cell-b .ai-halo { display: block !important; }
html.abd-app .abdh .cell-c { min-height: 272px !important; }
html.abd-app .abdh .face-c-front { padding: 20px !important; background: radial-gradient(circle at 85% 35%, rgba(0,192,240,.16), transparent 35%) !important; }
html.abd-app .abdh .face-c-front .cell-title { max-width: 13ch !important; font-size: 25px !important; }
html.abd-app .abdh .phone-stack { display: block !important; min-height: 150px !important; margin: 0 !important; }
html.abd-app .abdh .cell-c .phone { display: block !important; }
html.abd-app .abdh .cell-d .face-d-front,
html.abd-app .abdh .cell-e .face-e-front {
  padding: 16px !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  text-align: left !important;
}
html.abd-app .abdh .cell-e .face-e-front {
  opacity: 1 !important;
  transform: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  animation: demoGlow 3.4s ease-in-out infinite !important;
}
html.abd-app .abdh .face-hint {
  color: #84dfff !important;
  font-size: 8px !important;
}

/* Only show the dock on phones — never on tablet/desktop */
@media (min-width: 861px) {
  .abd-dock { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.abd-app .abd-dock,
  html.abd-app .abdh .face { transition: none !important; animation: none !important; }
}