/* /vs/:slug and /best-whale-trackers (services/seo/compare.js). System components
   only: .card / .card-head / .card-body, .hub-table, .badge, .btn, .cta-row. This file
   PLACES them and styles the page-own pieces (yes / partial / no values, FAQ rows).
   Type sizes follow the hub shell (h1, .lede) and the library (.card-title). */

.cmp-body .hub-shell { max-width: 960px; }
.cmp-hero { padding: 6px 0 10px; }
.cmp-hero .badge { align-self: flex-start; }
.cmp-page { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.cmp-page > .lede { margin: 0 0 4px; }
.cmp-sec { margin: 0; }
.cmp-copy { margin: 0; color: var(--text-md); font-size: 14px; line-height: 1.65; }

/* Feature table: label column wraps, values stay on one line where they fit. */
.cmp-table { table-layout: fixed; }
.cmp-table th:first-child, .cmp-table td:first-child { width: 40%; }
.cmp-table td { vertical-align: top; line-height: 1.4; }
.cmp-table .cmp-row-label { color: var(--text-md); }
.cmp-table tr:hover td { background: transparent; }
.cmp-val { display: inline-flex; align-items: flex-start; gap: 5px; font-weight: 600; }
.cmp-val .mat-ic { flex: none; margin-top: 1px; }
.cmp-val.is-yes { color: var(--bull); }
.cmp-val.is-part { color: var(--text-hi); }
.cmp-val.is-part .mat-ic { color: var(--text-lo); }
.cmp-val.is-no { color: var(--text-lo); font-weight: 500; }
.cmp-val b { font-weight: 600; }
.cmp-txt { color: var(--text-hi); }

/* CTA card */
.cmp-cta p { margin: 0 0 14px; color: var(--text-md); font-size: 14px; line-height: 1.55; }

/* Roundup: one card per tool, the link is a cta-row at the bottom. */
.cmp-tool .card-head { justify-content: flex-start; }
.cmp-best { margin: 0 0 6px; color: var(--sel-ink, var(--accent)); font: 600 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.cmp-tool .cta-row > span { min-width: 0; overflow-wrap: anywhere; }

/* FAQ: plain rows inside one card. */
.cmp-faq-item + .cmp-faq-item { border-top: 1px solid var(--border); }
.cmp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; cursor: pointer; list-style: none; color: var(--text-hi); font-size: 14px; font-weight: 600; line-height: 1.35; }
.cmp-faq-item summary::-webkit-details-marker { display: none; }
.cmp-faq-item summary:hover { background: var(--sel-hover); }
.cmp-faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cmp-faq-item summary .mat-ic { flex: none; color: var(--text-lo); transition: transform .12s ease; }
.cmp-faq-item[open] summary .mat-ic { transform: rotate(180deg); }
.cmp-faq-item p { margin: 0; padding: 0 16px 14px; color: var(--text-md); font-size: 13px; line-height: 1.6; }

@media (max-width: 720px) {
  .cmp-table th:first-child, .cmp-table td:first-child { width: 36%; }
  .cmp-table th, .cmp-table td { font-size: 12px; }
}
@media (max-width: 420px) {
  .cmp-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cmp-faq-item summary .mat-ic { transition: none; } }