/* Shared mobile polish for the redesigned pages (index, how-it-works, use-cases,
   about, faq, careers, pricing, security, v2, homepage-sandbox).
   Loaded after each page's inline <style> so it wins at equal specificity. */

@media (max-width: 760px) {
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Safety net: no stray element (animated SVGs, marquees) can create sideways scroll. */
  body {
    overflow-x: clip;
  }

  a, button, summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  h1, h2, h3 {
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  /* ---- Nav ---- */
  .nav-toggle {
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }

  .nav-mobile-menu {
    gap: 0;
    padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
    max-height: calc(100vh - var(--nav-h));
    max-height: calc(100dvh - var(--nav-h)); /* dynamic viewport: not cut off by browser chrome */
    overscroll-behavior: contain;
  }

  .nav-mobile-menu > a:not(.nav-cta),
  .nav-mobile-menu > .nav-mobile-disabled {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .nav-mobile-menu > .nav-cta {
    margin-top: 20px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- Footer ---- */
  .ch-footer {
    padding: 32px 0 calc(32px + env(safe-area-inset-bottom));
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-nav {
    flex-wrap: wrap;
    gap: 0 24px;
  }

  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-copy {
    margin-left: 0;
    width: 100%;
  }

  /* ---- Small controls get a 44px hit area without changing their look ---- */
  .nav-logo,
  .accordion-header,
  .faq-q-row,
  .role-q-row {
    position: relative;
  }

  .nav-logo::after,
  .faq-q-row::before,
  .role-q-row::before {
    content: "";
    position: absolute;
    inset: -8px 0;
  }

  /* Accordion cards pad their header by 20px/24px; make that padding tappable too. */
  .accordion-header::before {
    content: "";
    position: absolute;
    inset: -16px -24px;
  }

  .flashcard-nav-btn {
    position: relative;
  }

  .flashcard-nav-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  /* ---- Slow the logo marquee on phones ---- */
  .trust-track {
    animation-duration: 48s;
  }
}