/* Shared mobile content bounds for the preview site. */
@media (max-width: 560px) {
  body {
    background: #fff;
  }

  main,
  .listing-page,
  .top-page {
    width: 100%;
    margin-inline: 0;
  }

  .listing-page,
  .top-page,
  .article-page .article {
    padding-inline: 16px;
  }

  .mixed-top {
    padding-bottom: 0;
  }

  .mixed-top .keyword-section {
    padding-bottom: 32px;
  }

  .mixed-top + .site-footer {
    margin-top: 0;
  }

  .article-page,
  .about-page {
    padding-inline: 0;
    background: #fff;
  }

  .breadcrumbs,
  .about-breadcrumbs {
    font-size: 10px;
  }

  .article-page > .breadcrumbs {
    margin-top: 8px;
    margin-bottom: 20px;
  }

  .article-page .article,
  .article-page .article-header {
    padding-top: 0;
  }

  .article-page {
    --article-mobile-body-size: max(17px, 4.5vw);
  }

  .article-page .lead > p,
  .article-page .article-content > p:not(.article-reference):not(.article-detail-link),
  .article-page .article-content > :is(ul, ol) li,
  .article-page .article-note > p,
  .article-page .faq-item {
    font-size: var(--article-mobile-body-size);
  }

  .article-page .article-content > p.article-detail-link {
    font-size: calc(var(--article-mobile-body-size) * 0.9);
  }

  .article-page .article-header h1 {
    font-size: calc(var(--article-mobile-body-size) * 1.58);
  }

  .article-page .article-content > h2 {
    font-size: calc(var(--article-mobile-body-size) * 1.38);
  }

  .article-page .article-content > h3 {
    font-size: calc(var(--article-mobile-body-size) * 1.18);
  }

  /* Keep the existing scale for the TOC and supporting panels. */
  .article-page :is(.toc, .soft-cta, .bottom-cta, .compare-column) {
    font-size: 4vw;
  }

  .article-page :is(.toc, .soft-cta, .bottom-cta, .compare-column) :is(p, li, .button) {
    font-size: 1em;
  }

  .article-page :is(.toc, .bottom-cta) h2 {
    font-size: 1.38em;
  }

  .article-page .compare-column h2 {
    font-size: 1.1em;
  }

  .article-page .toc .eyebrow {
    font-size: 0.78em;
  }

  .article-page .article-meta .article-date {
    flex-basis: auto;
    white-space: nowrap;
  }

  .pure-detail .article-header {
    padding-bottom: 0;
  }

  .pure-detail .article-header + .featured-image {
    margin-top: 20px;
  }

  .article-page > .breadcrumbs,
  .site-header,
  .site-footer {
    padding-inline: 16px;
  }

  .hero-inner,
  .about-hero-copy,
  .about-section,
  .about-bottom,
  .about-breadcrumbs {
    width: 100%;
    padding-inline: 16px;
  }
}