:root {
  --mobile-gutter: clamp(1.25rem, 5.5vw, 1.5rem);
}

/* When the barcode signature is hidden, collapse the hero into an intentional
   centered composition instead of leaving a left-heavy desktop remnant. */
@media (max-width: 799px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  .hero h1,
  .hero .lede,
  .hero .data-facts {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .hero h1 {
    max-width: 13ch;
  }

  .hero-actions {
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    align-items: center;
  }

  .hero .manual-card {
    width: 100%;
    max-width: 32rem;
    margin-inline: auto;
    text-align: left;
  }
}

@media (max-width: 639px) {
  .site-header {
    padding-inline: var(--mobile-gutter);
  }

  .site-header nav {
    padding-inline: var(--mobile-gutter);
  }

  main {
    padding-inline: var(--mobile-gutter);
  }

  /* Secondary pages already inherit the global gutter; avoid stacked padding. */
  main.page {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .page {
    width: 100%;
    margin-inline: auto;
  }

  .page > .content-section,
  .page > article,
  .content-section,
  .disclosure,
  .support-links {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .page article > h1,
  .page article > h2,
  .page article > h3,
  .page article > p,
  .page article > ul,
  .page article > ol,
  .page article > dl,
  .page article > nav {
    margin-left: 0;
    margin-right: 0;
  }

  /* Truly span the mobile viewport. The base stylesheet fixes .hero at width:100%,
     so negative margins alone would shift the box left without replacing the space
     on the right. Explicitly add both gutters back into the width. */
  .hero {
    width: calc(100% + (2 * var(--mobile-gutter)));
    max-width: none;
    margin-left: calc(-1 * var(--mobile-gutter));
    margin-right: calc(-1 * var(--mobile-gutter));
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .hero-copy,
  .hero-actions,
  .hero .data-facts {
    width: 100%;
  }

  /* Keep horizontal filter scrolling while aligning its first/last chip to page copy. */
  .filters,
  .page .filters {
    margin-left: calc(-1 * var(--mobile-gutter));
    margin-right: calc(-1 * var(--mobile-gutter));
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  .card,
  .results {
    margin-left: 0;
    margin-right: 0;
  }

  footer {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }
}

@media (min-width: 390px) and (max-width: 639px) {
  :root { --mobile-gutter: 1.5rem; }
}