/* Stacked article comparison tables on narrow screens. Desktop tables remain native. */
@media (max-width: 640px) {
  .article-main .article-section:has(table[data-mobile-cards]) { overflow-x: visible; }
  main table[data-mobile-cards][role="table"] { display: block; width: 100%; min-width: 0; border: 0; background: transparent; box-shadow: none; }
  main table[data-mobile-cards][role="table"] thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  main table[data-mobile-cards][role="table"] tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  main .growth-article table[data-mobile-cards][role="table"],
  main .growth-article table[data-mobile-cards][role="table"] tbody { width: 100%; min-width: 0; max-width: 100%; table-layout: auto; }
  main table[data-mobile-cards][role="table"] tbody tr { display: block; overflow: hidden; border: 1px solid #e4ded4; border-radius: 12px; background: #fff; }
  main table[data-mobile-cards][role="table"] td,
  main table[data-mobile-cards][role="table"] td:first-child { display: block; box-sizing: border-box; width: 100%; min-width: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid #eee9e1; overflow-wrap: anywhere; text-align: left; }
  main table[data-mobile-cards][role="table"] td:last-child { border-bottom: 0; }
  main table[data-mobile-cards][role="table"] td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 600 12px/1.5 system-ui, sans-serif; letter-spacing: .02em; color: #575348; }
  main table[data-mobile-cards][role="table"] td:first-child { background: #faf5ec; }
}
