/* Shared responsive rules for the public pages (index, charter, insights, post).
   The pages are styled inline, so overrides here use !important on purpose. */

/* ---------- Mobile nav ---------- */
.lab-nav-toggle { display: none; }

@media (max-width: 720px) {
  .lab-nav { flex-wrap: nowrap !important; padding: 10px 20px !important; }
  .lab-nav > a img { height: 40px !important; }

  .js-nav .lab-nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-right: -10px; padding: 0;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .lab-nav-toggle span {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: #FFFFFF;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .lab-nav[data-open="true"] .lab-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .lab-nav[data-open="true"] .lab-nav-toggle span:nth-child(2) { opacity: 0; }
  .lab-nav[data-open="true"] .lab-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .js-nav .lab-nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important;
    box-sizing: border-box; padding: 4px 20px 24px;
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto;
    background: #0A1136; border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 28px 40px -28px rgba(0,0,0,0.7);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .js-nav .lab-nav[data-open="true"] .lab-nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

  .lab-nav-menu > a { font-size: 20px !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .lab-nav-menu > a.lab-nav-cta {
    margin-top: 20px; justify-content: space-between; border-bottom: 0;
    padding: 16px 16px 16px 26px !important; font-size: 16px !important;
  }
}

/* ---------- Stacked rows (index "approach" steps, charter "the name" letters) ---------- */
@media (max-width: 720px) {
  .row-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; align-items: start !important; padding: 28px 0 !important; text-align: left; }
}

/* ---------- Tool card visuals (index) ---------- */
@media (max-width: 720px) {
  .tool-vis { aspect-ratio: auto !important; min-height: 260px; padding-top: 32px !important; padding-bottom: 64px !important; box-sizing: border-box; }
  .tool-cap { bottom: 22px !important; }
  .tool-row { flex-shrink: 0; transform: scale(0.84); }
  .tool-row-wide { transform: scale(0.72); }

  .bcs-vis { flex-direction: column !important; flex-wrap: nowrap !important; gap: 14px !important; padding: 32px 24px 64px !important; min-height: 0 !important; }
  .bcs-link { width: 2px !important; height: 26px !important; background-image: linear-gradient(180deg, #0F1A47 55%, transparent 45%) !important; background-size: 2px 10px !important; animation: none !important; }
}