/* Wireface vs MetaHuman (/vs-metahuman/): the hero's picture, the comparison table (a card for each row on a phone), and the
   few things the site's own styles don't have. Everything else is site.css. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.vs-hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 56px; }
.vs-shot { margin: 0; justify-self: center; width: min(100%, 380px); }
.vs-shot > a { display: block; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -45px rgba(99, 102, 241, .7); }
.vs-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1110 / 1332; object-fit: cover; }
.vs-shot figcaption { margin-top: 12px; color: var(--dim); font-size: 0.9rem; text-align: center; }
.vs-shot figcaption a { color: #c7d2fe; }

.vs-table table { min-width: 0; }
.vs-table th[scope=row] { width: 17%; }
.vs-table thead th:first-child { width: 17%; }
.vs-table tbody td:nth-child(2), .vs-table thead th:nth-child(2) { background: rgba(34, 211, 238, .04); }
.vs-table a { color: #c7d2fe; }
.vs .section .lede.small { margin-bottom: 0; }
.vs .section .fine { max-width: 70ch; }
.vs .faq > div { min-width: 0; }
.vs .faq dd a, .vs .card p a, .vs .cta-band .fine a { color: #c7d2fe; }
.vs .cta-band .fine { max-width: 70ch; margin-top: 2rem; font-size: 0.85rem; }

@media (max-width: 900px) {
  .vs-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .vs-shot { width: min(100%, 320px); }
}

/* a phone: each row of the table is a card, the topic on top and each tool under its own name */
@media (max-width: 720px) {
  .vs-table { border: 0; overflow: visible; }
  .vs-table table, .vs-table tbody, .vs-table tr, .vs-table th, .vs-table td { display: block; width: auto; }
  .vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-table tbody tr { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(13, 22, 48, .6); overflow: hidden; }
  .vs-table tbody th, .vs-table th[scope=row] { width: auto; padding: 12px 16px; background: var(--night-2); color: var(--text); font: 600 1rem var(--display); border-bottom: 1px solid var(--line); }
  .vs-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); background: none; }
  .vs-table tbody td:last-child { border-bottom: 0; }
  .vs-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 3px; font: 500 0.74rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
  .vs-table tbody td:nth-child(2) { background: rgba(34, 211, 238, .04); }
}