/* Comparison table (/ai-invoice-capture-vs-template-ocr) and question lists (that page and /faq). */

/* Comparison table: three columns on wide screens, one card per row on phones. */
.nq-cmp { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #FFFFFF; font-size: 16px; line-height: 1.6; }
.nq-cmp caption { caption-side: bottom; text-align: left; font-size: 14px; color: var(--muted); padding: 14px 4px 0; }
.nq-cmp th, .nq-cmp td { text-align: left; vertical-align: top; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.nq-cmp tbody tr:last-child th, .nq-cmp tbody tr:last-child td { border-bottom: 0; }
.nq-cmp thead th { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--wash); }
.nq-cmp thead th.nq-cmp__us { color: #FFFFFF; background: var(--navy); }
.nq-cmp tbody th { width: 22%; font-weight: 700; color: var(--ink); }
.nq-cmp td { width: 39%; color: var(--body); }
.nq-cmp td.nq-cmp__us { color: var(--ink); background: color-mix(in srgb, var(--teal) 6%, #FFFFFF); }
.nq-cmp td strong { display: block; color: var(--ink); margin-bottom: 4px; }
.nq-cmp td.nq-cmp__us strong { color: var(--teal); }

@media (max-width: 760px) {
  .nq-cmp, .nq-cmp tbody, .nq-cmp tr, .nq-cmp tbody th, .nq-cmp td, .nq-cmp caption { display: block; width: 100%; }
  .nq-cmp caption { padding: 0 0 16px; }
  .nq-cmp { border: 0; background: transparent; overflow: visible; }
  .nq-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nq-cmp tbody tr { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #FFFFFF; margin-bottom: 16px; }
  .nq-cmp tbody th { background: var(--wash); padding: 14px 18px; }
  .nq-cmp td { padding: 14px 18px; }
  .nq-cmp tbody tr th, .nq-cmp tbody tr td { border-bottom: 1px solid var(--line); }
  .nq-cmp tbody tr td:last-child { border-bottom: 0; }
  .nq-cmp td::before { content: attr(data-col); display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
  .nq-cmp td.nq-cmp__us::before { color: var(--teal); }
}

/* Questions and answers: visible headings and paragraphs, so search engines and AI readers see them. */
.nq-faq { max-width: 860px; margin: 0 auto; }
.nq-faq__group + .nq-faq__group { margin-top: 56px; }
.nq-faq__group > h2 { font-size: clamp(22px, 2.6vw, 28px) !important; margin: 0 0 8px !important; }
.nq-faq__item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.nq-faq__item:last-child { border-bottom: 0; }
.nq-faq__item h3 { font-size: 19px; line-height: 1.35; font-weight: 700; margin: 0 0 10px; }
.nq-faq__item p { font-size: 17px; line-height: 1.75; margin: 0 0 12px; }
.nq-faq__item p:last-child { margin-bottom: 0; }
.nq-faq__toc { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 48px; padding: 0; list-style: none; }
.nq-faq__toc a { display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #FFFFFF; }
.nq-faq__toc a:hover { border-color: var(--teal); }
.nq-note { max-width: 860px; margin: 40px auto 0; font-size: 16px; line-height: 1.7; }