/* Keep this guide's contents first on phones and beside the lead on desktop. */
.sp-access-guide .sp-page-intro {
  display: grid;
  gap: 1rem;
  margin-bottom: var(--sp-section-gap);
}

@media (min-width: 1280px) {
  .sp-access-guide .sp-page-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .sp-access-guide .sp-page-lead { order: -1; }
}

/* Access comparisons become one walking start per section on small screens. */
.sp-access-table { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: left; }
.sp-access-table caption { text-align: left; font-weight: 700; margin-bottom: .75rem; }
.sp-access-table th, .sp-access-table td { padding: .75rem; border-bottom: 1px solid #ddd; vertical-align: top; overflow-wrap: anywhere; }
.sp-access-table thead { background: #f3f4f6; }
.sp-access-table th:first-child { width: 20%; }

@media (max-width: 767px) {
  .sp-access-table, .sp-access-table caption, .sp-access-table tbody, .sp-access-table tr, .sp-access-table th, .sp-access-table td { display: block; width: 100%; }
  .sp-access-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sp-access-table th:first-child { width: 100%; background: #f3f4f6; }
  .sp-access-table tr + tr { margin-top: 1.5rem; }
  .sp-access-table td::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: .25rem; }
}