Accordion Mobile Footer

<!--
  Link columns that are native <details> accordions on a phone and a static grid
  from md up. No JavaScript: the toggle, keyboard handling and aria-expanded are
  the browser's. They ship with the open attribute so the links are always in
  the DOM and indexable; on md the summary is set to pointer-events-none and the
  chevron hidden, which freezes each group open as an ordinary heading. This is
  the one layout where a five-column sitemap on a 320px phone is genuinely fine,
  because only one section is expanded at a time.
-->
<footer class="border-t border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
  <nav aria-label="Footer" class="mx-auto max-w-6xl px-4 py-4 md:py-12">
    <div class="md:grid md:grid-cols-4 md:gap-8">
      <details open class="group border-b border-gray-200 md:border-b-0 dark:border-gray-800">
        <summary class="flex cursor-pointer list-none items-center justify-between py-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden md:pointer-events-none md:py-0 md:pb-3 dark:text-gray-400 dark:focus-visible:ring-blue-400">
          Product
          <svg class="h-4 w-4 shrink-0 transition-transform group-open:rotate-180 motion-reduce:transition-none md:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </summary>
        <ul class="flex flex-col gap-2 pb-4 md:pb-0">
          <li><a href="/features" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-300 dark:hover:text-gray-50 dark:focus-visible:ring-blue-400">Features</a></li>
          <li><a href="/pricing" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Pricing</a></li>
          <li><a href="/changelog" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Changelog</a></li>
        </ul>
      </details>

      <details open class="group border-b border-gray-200 md:border-b-0 dark:border-gray-800">
        <summary class="flex cursor-pointer list-none items-center justify-between py-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden md:pointer-events-none md:py-0 md:pb-3 dark:text-gray-400 dark:focus-visible:ring-blue-400">
          Company
          <svg class="h-4 w-4 shrink-0 transition-transform group-open:rotate-180 motion-reduce:transition-none md:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </summary>
        <ul class="flex flex-col gap-2 pb-4 md:pb-0">
          <li><a href="/about" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">About</a></li>
          <li><a href="/careers" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Careers</a></li>
          <li><a href="/blog" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Blog</a></li>
        </ul>
      </details>

      <details open class="group border-b border-gray-200 md:border-b-0 dark:border-gray-800">
        <summary class="flex cursor-pointer list-none items-center justify-between py-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden md:pointer-events-none md:py-0 md:pb-3 dark:text-gray-400 dark:focus-visible:ring-blue-400">
          Resources
          <svg class="h-4 w-4 shrink-0 transition-transform group-open:rotate-180 motion-reduce:transition-none md:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </summary>
        <ul class="flex flex-col gap-2 pb-4 md:pb-0">
          <li><a href="/docs" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Docs</a></li>
          <li><a href="/guides" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Guides</a></li>
          <li><a href="/support" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Support</a></li>
        </ul>
      </details>

      <details open class="group border-b border-gray-200 md:border-b-0 dark:border-gray-800">
        <summary class="flex cursor-pointer list-none items-center justify-between py-3 text-xs font-semibold uppercase tracking-[0.06em] text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 [&::-webkit-details-marker]:hidden md:pointer-events-none md:py-0 md:pb-3 dark:text-gray-400 dark:focus-visible:ring-blue-400">
          Legal
          <svg class="h-4 w-4 shrink-0 transition-transform group-open:rotate-180 motion-reduce:transition-none md:hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
            <path d="m6 9 6 6 6-6" />
          </svg>
        </summary>
        <ul class="flex flex-col gap-2 pb-4 md:pb-0">
          <li><a href="/privacy" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Privacy</a></li>
          <li><a href="/terms" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Terms</a></li>
          <li><a href="/security" class="text-sm text-gray-700 hover:text-gray-900 hover:underline hover:underline-offset-4 dark:text-gray-300 dark:hover:text-gray-50">Security</a></li>
        </ul>
      </details>
    </div>
  </nav>

  <div class="border-t border-gray-200 dark:border-gray-800">
    <p class="mx-auto max-w-6xl px-4 py-4 text-[0.8125rem] text-gray-500 dark:text-gray-400">
      © <time datetime="2026">2026</time> Adysre Inc.
    </p>
  </div>
</footer>