/* Shared compact layout. Keep public and static-release copies identical. */
/* A linked image must establish a block box: inline anchors ignore aspect-ratio. */
#main-content .product-image { display: block; width: 100%; height: auto; aspect-ratio: 1; }
#main-content .product-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.compact-reading-tools, .compact-section-toggle, .compact-list-more { display: none; }
@media (max-width: 680px) {
  #main-content:has(.page-hero, .seo-article-hero) { overflow-wrap: anywhere; }
  #main-content:has(.page-hero, .seo-article-hero) .section { padding: 24px 0; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.page-hero, .seo-article-hero) { padding: 22px 0 24px; }
  #main-content:has(.page-hero, .seo-article-hero) .breadcrumbs { margin-bottom: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.page-hero, .seo-article-hero) h1 { margin: 10px 0 12px; font-size: clamp(28px, 7.5vw, 36px); line-height: 1.12; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.page-hero, .seo-article-hero) h1 + p { margin-bottom: 0; font-size: 15px; line-height: 1.55; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.seo-article-hero-grid, .articles-index-grid, .about-grid, .relationship-panel, .faq-page-grid, .category-page-intro, .category-depth-layout, .product-reference-grid, .product-decision-copy) { gap: 20px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.article-byline, .guide-review-meta) { margin-top: 14px; flex-direction: row; flex-wrap: wrap; gap: 7px 12px; }
  #main-content:has(.page-hero, .seo-article-hero) .product-page-section > .wrap > .search-box { margin: 0 auto 16px; }
  #main-content:has(.page-hero, .seo-article-hero) .category-chips { margin-bottom: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.product-page-header, .editorial-method-heading, .faq-evidence-heading) { margin-bottom: 16px; }

  /* Natural card heights and a two-column article library on common phones. */
  #main-content:has(.page-hero, .seo-article-hero) .featured-article { grid-template-columns: 1fr; }
  #main-content:has(.page-hero, .seo-article-hero) .featured-article-copy { min-height: 0; padding: 16px; }
  #main-content:has(.page-hero, .seo-article-hero) .featured-article h2 { margin: 12px 0 10px; font-size: 26px; }
  #main-content:has(.page-hero, .seo-article-hero) .featured-article p { margin-bottom: 14px; line-height: 1.55; }
  #main-content:has(.page-hero, .seo-article-hero) .featured-article .article-cover { min-height: 158px; padding: 16px; }
  #main-content:has(.page-hero, .seo-article-hero) .featured-article .article-cover-flow { inset: auto 12px 14px; }
  #main-content:has(.page-hero, .seo-article-hero) .featured-article .article-cover-flow > div { min-width: 0; min-height: 76px; padding: 8px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-heading { margin-top: 24px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card { display: flex; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card > div:last-child { flex: 1; min-height: 0; padding: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card h2 { margin: 10px 0 8px; font-size: 19px; line-height: 1.2; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card p { margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-card-meta { font-size: 9px; gap: 4px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover { min-height: 0; padding: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover-label { font-size: 8px; letter-spacing: .06em; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover-flow { position: relative; inset: auto; margin-top: 10px; grid-template-columns: 1fr; gap: 3px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover-flow > div { min-height: 0; padding: 5px 7px; display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: center; gap: 1px 4px; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover-flow small { grid-row: span 2; margin: 0; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover-flow span { font-size: 9px; line-height: 1.3; }
  #main-content:has(.page-hero, .seo-article-hero) .article-library-card .article-cover-flow > b { justify-self: center; margin: 0; font-size: 9px; line-height: .5; transform: rotate(90deg); }
  #main-content:has(.page-hero, .seo-article-hero) .editorial-standard { min-height: 0; padding: 18px; }

  /* Keep complete reading content, with less space between sections. */
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-layout, .seo-article-layout) { padding-top: 24px; padding-bottom: 28px; gap: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-section, .seo-article-body > section) { padding-bottom: 20px; margin-bottom: 24px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-section, .seo-article-body) h2 { margin: 8px 0 14px; font-size: 28px; line-height: 1.16; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-section, .seo-article-body) > p,
  #main-content:has(.page-hero, .seo-article-hero) .seo-article-body > section > p { font-size: 16px; line-height: 1.6; }
  #main-content:has(.page-hero, .seo-article-hero) .article-deck { padding-bottom: 18px; margin-bottom: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.article-disclosure, .guide-purpose-note) { padding: 16px; margin-bottom: 24px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.callout, .article-callout, .formula, .article-formula, .article-sources, .article-search) { padding: 16px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.official-research-grid, .article-point-grid, .article-comparison, .qc-boundary-grid, .qc-category-grid, .official-workflow, .article-image-pair, .research-visual, .source-variant-visual) { margin-top: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.official-research-grid article, .article-point-grid > div, .article-comparison > div, .qc-boundary-grid > div, .qc-category-grid article, .official-workflow > div) { min-height: 0; padding: 14px; gap: 6px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.article-point-grid strong, .official-workflow strong) { margin-top: 10px; }
  #main-content:has(.page-hero, .seo-article-hero) .official-research-grid article > span { margin-bottom: 10px; }
  #main-content:has(.page-hero, .seo-article-hero) .qc-category-grid h3 { margin-top: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.article-image-pair, .source-variant-visual) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main-content:has(.page-hero, .seo-article-hero) .article-image-pair > div { padding: 8px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.qc-customer-copy, .qc-example-photo) { min-height: 0; padding: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) .qc-example-photo img { max-width: 270px; }
  #main-content:has(.page-hero, .seo-article-hero) .related-guides { padding: 24px 0; }
  #main-content:has(.page-hero, .seo-article-hero) .related-guides h2 { margin-bottom: 16px; font-size: 28px; }
  #main-content:has(.page-hero, .seo-article-hero) .related-guides a { min-height: 56px; padding: 12px 14px; }

  /* FAQ, trust pages, category pages and product research. */
  #main-content:has(.page-hero, .seo-article-hero) .faq-fact-grid { margin-bottom: 24px; }
  #main-content:has(.page-hero, .seo-article-hero) .faq-fact-grid > div { min-height: 80px; padding: 12px; gap: 8px; }
  #main-content:has(.page-hero, .seo-article-hero) .faq-group-list { gap: 24px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.faq-source-card, .faq-side, .principles article, .method-grid article, .contact-primary, .contact-routes article, .legal-copy, .category-check-grid article, .category-notes-grid article, .product-check-grid article, .product-evidence-grid article) { min-height: 0; padding: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.principles svg, .method-grid article > span) { margin-bottom: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.about-copy h2, .relationship-panel h2, .contact-primary h2, .category-page-intro h2, .category-depth-layout h2, .product-reference-summary h2, .product-decision-copy h2) { margin-bottom: 14px; font-size: 30px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.about-copy p, .legal-copy p, .category-depth-copy p, .product-review-prose p) { line-height: 1.6; }
  #main-content:has(.page-hero, .seo-article-hero) .legal-copy h2 { margin: 24px 0 12px; font-size: 25px; }
  #main-content:has(.page-hero, .seo-article-hero) .contact-checklist { margin-top: 18px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.category-check-grid svg, .product-check-grid svg) { margin: 12px 0; }
  #main-content:has(.page-hero, .seo-article-hero) .category-notes-grid p { min-height: 0; }
  #main-content:has(.page-hero, .seo-article-hero) .product-reference-image { width: 100%; max-width: 320px; justify-self: center; }
  #main-content:has(.page-hero, .seo-article-hero) .product-reference-summary dl { margin-bottom: 16px; }
  #main-content:has(.page-hero, .seo-article-hero) .product-decision-copy { margin-bottom: 20px; }
}

@media (max-width: 359px) {
  #main-content:has(.page-hero, .seo-article-hero) .article-library-grid { grid-template-columns: 1fr; }
}

/* 2026-10-16: compact cards, article headers and progressive mobile reading. */
@media (max-width: 680px) {
  #main-content .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #main-content .product-card { align-self: start; }
  #main-content .product-content { min-height: 0; padding: 8px; }
  #main-content .home-product-grid .product-content { min-height: 76px; }
  #main-content .product-content h3 { margin-bottom: 4px; font-size: 12px; line-height: 1.3; }
  #main-content .product-content p { font-size: 14px; }
  #main-content .product-category { font-size: 9px; padding: 3px 6px; }

  #main-content:has(.page-hero, .seo-article-hero) .section { padding: 18px 0; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.page-hero, .seo-article-hero) { padding: 16px 0; }
  #main-content:has(.page-hero, .seo-article-hero) .breadcrumbs { margin-bottom: 8px; font-size: 11px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.page-hero, .seo-article-hero) h1 { margin: 7px 0 9px; font-size: clamp(25px, 6.7vw, 30px); line-height: 1.14; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.page-hero, .seo-article-hero) h1 + p { font-size: 14px; line-height: 1.5; }
  #main-content .seo-article-hero-grid { gap: 12px; }
  #main-content .seo-article-topic-image { width: min(100%, 220px); height: auto; max-height: 116px; object-fit: contain; justify-self: center; border-radius: 10px; box-shadow: none; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.article-byline, .guide-review-meta) { margin-top: 10px; gap: 4px 10px; font-size: 11px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-layout, .seo-article-layout) { padding-top: 16px; padding-bottom: 18px; gap: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-section, .seo-article-body > section) { margin-bottom: 14px; padding-bottom: 14px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-section, .seo-article-body) h2 { margin: 7px 0 10px; font-size: 23px; line-height: 1.2; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.guide-article, .seo-article-body, .legal-copy) p { margin-bottom: 12px; font-size: 16px; line-height: 1.55; }
  #main-content:has(.page-hero, .seo-article-hero) .article-deck { margin-bottom: 12px; padding-bottom: 12px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.article-disclosure, .guide-purpose-note) { padding: 12px; margin-bottom: 14px; }
  #main-content:has(.page-hero, .seo-article-hero) :is(.callout, .article-callout, .formula, .article-formula, .article-sources, .article-search) { padding: 12px; margin-block: 14px; }
  #main-content :is(.seo-article-body, .guide-article) :is(ul, ol) { margin-block: 12px; padding-left: 20px; }
  #main-content :is(.seo-article-body, .guide-article) li { margin-bottom: 7px; line-height: 1.5; }
  #main-content :is(.seo-article-body, .guide-article) figure { margin: 14px 0; }
  #main-content .article-image-pair img { width: 100%; height: auto; max-height: 160px; object-fit: contain; }
  #main-content .product-reference-image { max-width: 210px; }
  #main-content .product-reference-image img { width: 100%; height: auto; }
  #main-content .guide-aside { display: none; }
  #main-content :is(.article-library-card, .featured-article) .article-cover[aria-hidden="true"] { display: none; }
  #main-content:has(.page-hero) .article-library-card > div:last-child { padding: 11px; }
  #main-content:has(.page-hero) .article-library-card h2 { font-size: 18px; margin: 7px 0; }
  #main-content:has(.page-hero) .article-library-card p { font-size: 13px; line-height: 1.45; }
  #main-content:has(.page-hero) .article-library-heading { margin-top: 16px; }
  #main-content:has(.page-hero) .featured-article h2 { font-size: 24px; }
  #main-content:has(.page-hero, .seo-article-hero) .related-guides { padding: 18px 0; }
  #main-content:has(.page-hero, .seo-article-hero) .related-guides h2 { font-size: 24px; margin-bottom: 12px; }

  /* Content remains in the page; controls are enabled only when JS is ready. */
  #main-content .compact-reading-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .compact-reading-tools span { color: var(--muted); font-size: 13px; }
  .compact-reading-tools button, #main-content .compact-list-more { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--forest); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  #main-content .compact-readable-section > h2 { position: relative; margin: 0; padding: 12px 36px 12px 0; font-size: 20px; line-height: 1.25; }
  #main-content .compact-readable-section { margin-bottom: 8px; padding-bottom: 8px; }
  #main-content .compact-section-toggle { display: block; position: absolute; inset: 0; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--forest); cursor: pointer; }
  .compact-section-toggle::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 24px/1 system-ui, sans-serif; }
  .compact-section-toggle[aria-expanded="true"]::after { content: '−'; }
  .compact-section-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px; }
  #main-content .compact-readable-section[data-compact-open="false"] > :not(h2):not(span):not(script) { display: none; }
  #main-content .compact-readable-section[data-compact-open="false"] > span { font-size: 10px; }
  #main-content .compact-limited-list > [data-compact-extra] { display: none; }
  #main-content .compact-limited-list[data-compact-expanded="true"] > [data-compact-extra] { display: revert; }
  #main-content .compact-limited-list[data-compact-expanded="true"] > .article-library-card { display: flex; }
  #main-content .compact-list-more { display: block; margin: 14px auto 0; }
  body:has(#main-content .page-hero, #main-content .seo-article-hero) .site-footer { padding-top: 22px; }
}
@media print {
  .compact-reading-tools, .compact-section-toggle, .compact-list-more { display: none !important; }
  #main-content .compact-readable-section > *, #main-content .compact-limited-list > [data-compact-extra] { display: revert !important; }
}