/* ── TABLET ──────────────────────────────────────── */
/* Fix nav-links overlap at tablet widths on all pages */
@media (max-width: 1100px) {
  .nav-links {
    position: static;
    transform: none;
  }
}

/* ── MOBILE ─────────────────────────────────────── */
@media (max-width: 720px) {

  /* Prevent horizontal overflow globally */
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  /* Constrain all media to viewport */
  img, svg, video, iframe, table, pre, code {
    max-width: 100%;
    height: auto;
  }

  /* ── Navigation ────────────────────────────── */
  .nav {
    padding-inline: 16px;
  }

  .nav-logo {
    font-size: 11px;
    letter-spacing: 0.14em;
    gap: 8px;
  }

  .nav-logo-mark {
    width: 24px;
    height: 24px;
  }

  /* Hide desktop nav, show hamburger */
  .nav-links {
    display: none !important;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    color: var(--snow);
    padding: 0;
    position: relative;
  }

  .nav.light .nav-toggle {
    color: var(--ink);
  }

  .nav-toggle::before {
    content: '\2630';
    display: block;
    font-size: 28px;
    line-height: 1;
    color: var(--snow);
    transform: translateY(-1px);
  }

  .nav.light .nav-toggle::before {
    color: var(--ink);
  }

  .nav-toggle.open::before {
    content: '\2715';
    font-size: 22px;
    transform: none;
  }

  /* ── Touch targets ─────────────────────────── */
  .btn-primary,
  .btn-ghost {
    min-height: 48px;
    padding: 14px 28px;
  }

  .footer-links-col a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 6px;
  }

  /* ── Hamburger animation ───────────────────── */
  .nav-toggle span {
    display: none;
  }

  /* ── Mobile menu overlay with slide animation ── */
  .nav-links.mobile-open {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    background: var(--void);
    padding: 20px 24px 32px;
    border-bottom: 1px solid var(--border-d);
    gap: 0;
    z-index: 550;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links.mobile-open a {
    display: block;
    padding: 14px 0;
    font-size: 15px;
    min-height: 44px;
    line-height: 1.15;
  }

  /* Active link underline — closer to text on mobile */
  .nav-links.mobile-open a.active::after {
    bottom: 8px;
  }

  .nav.light ~ .nav-links.mobile-open,
  .nav.light .nav-links.mobile-open {
    background: var(--parch);
    border-bottom-color: var(--border-l);
  }

  .nav.light .nav-links.mobile-open a {
    color: var(--ink-m);
  }

  .nav.light .nav-links.mobile-open a:hover,
  .nav.light .nav-links.mobile-open a.active {
    color: var(--ink);
  }

  body.nav-open {
    overflow: hidden;
  }

  /* ── Consistent .wrap padding ──────────────── */
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* ── Prevent min-width from causing overflow ─ */
  .ba-pill,
  .hp-stage {
    min-width: 0;
  }

  /* ── Ensure large stat numbers can shrink ───── */
  .swing-num,
  .lf-multiple,
  .pb-number,
  .roi-big,
  .anatomy-big {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* ── Negative-margin elements: contain on small screens ─ */
  .pa-spread {
    margin-left: -16px;
    margin-right: -16px;
  }

  /* ── Data tables: prevent overflow ───────────── */
  .battle-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Contain all sections ──────────────────── */
  .section,
  .hero,
  main {
    overflow-x: hidden;
  }

  /* ── Footer consistency ────────────────────── */
  .site-footer {
    padding: 40px 24px;
    gap: 32px;
  }

  .footer-bottom {
    padding: 20px 24px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}