/* Comparison and ledger tables (Sovereign AI "vs. the field": the three-column comparison; Technology "vs. the field":
   the properties ledger, as the owner's Figma screenshot).
   Ruled rows in the studio skin; the Yalla2x column is a raised dark card. Below 900px each row becomes
   a card and every cell carries its column name (data-label), so nothing scrolls sideways. */

.cmp-wrap { margin-top: 8px; }
.cmp, .ledger { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-body); line-height: 1.55; }   /* tabular figures on .cmp__n only: Inter's tnum widens the hyphens in the prose cells */
.cmp { table-layout: fixed; }
.cmp__dim { width: 19%; }
.cmp th, .cmp td, .ledger th, .ledger td { text-align: left; vertical-align: top; padding: 20px 22px; border-top: 1px solid var(--line); }
.cmp thead th, .cmp thead td, .ledger thead th { border-top: 0; }
.cmp thead th { padding-block: 26px 22px; font-size: var(--t-h5); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.cmp tbody th { padding-left: 0; font-weight: 600; letter-spacing: -0.01em; }
.cmp td { color: var(--ink-2); }
.cmp__n { display: block; font-size: var(--t-small); font-weight: 400; color: var(--ink-num); margin-bottom: 4px; }

/* the Yalla2x column: one raised dark card made of cells */
.cmp .is-us { background: var(--dark); color: var(--on-dark); border-top-color: var(--dark-line); }
.cmp thead .is-us { border-radius: var(--r-lg) var(--r-lg) 0 0; }
/* the gold dot sits before the word, so "Yalla2x" shares the other two heads' top line (it was a block 18px above the word) */
.cmp thead .is-us::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin: 0 10px 0 0; vertical-align: 0.2em; }
.cmp tbody tr:last-child .is-us { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.cmp .is-behind th::after { content: "Behind"; display: inline-block; margin-left: 10px; padding: 2px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); vertical-align: 2px; }

/* ledger (named by its screen-reader caption; it sits under the field section's note) */
.ledger thead th { padding-block: 0 14px; font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-num); }
.ledger thead th:first-child, .ledger tbody th { padding-left: 0; }
.ledger tbody th { width: 30%; font-weight: 400; }
.ledger td { color: var(--ink-2); }
.ledger td:last-child { width: 24%; padding-right: 0; }
.ledger tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.ledger__key { display: block; font-size: var(--t-h5); letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); }
.ledger__sub { display: block; margin-top: 4px; font-size: var(--t-small); color: var(--ink-2); }
/* a status that wraps reads as a two-line stamp, its dot on the first line; one line keeps the full pill */
.ledger .chip { white-space: normal; line-height: 1.35; border-radius: 14px; align-items: flex-start; }
.ledger .chip::before { flex: none; margin-top: 0.42em; }
.ledger .is-behind .ledger__key { color: var(--ink-2); }

/* wide screens have room for every status on one line: the column grows to the longest one */
@media (min-width: 1200px) {
  /* on one line the status is the shared pill again: the same height, radius and centred mark as elsewhere */
  .ledger .chip { white-space: nowrap; line-height: 1.2; border-radius: 999px; align-items: center; }
  .ledger .chip::before { margin-top: 0; }
}

@media (max-width: 900px) {
  .cmp thead, .ledger thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 20px 0 8px; border-top: 1px solid var(--line); }
  .cmp tbody tr:last-child, .ledger tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .cmp th, .cmp td { border: 0; padding: 0 0 14px; }
  .cmp td::before, .ledger td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--t-cap); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-num); }
  .cmp .is-us { order: -1; padding: 16px 18px; margin-bottom: 14px; border-radius: var(--r-md) !important; }
  .cmp .is-us::before { color: var(--gold); }
  .cmp tr { display: flex; flex-direction: column; }
  .cmp th { order: -2; }

  .ledger, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; width: auto; }
  .ledger tr { padding: 22px 0 10px; border-top: 1px solid var(--line); }
  .ledger th, .ledger td, .ledger td:last-child, .ledger tbody tr:last-child > * { border: 0; padding: 0 0 12px; }
  .ledger tbody th, .ledger td:last-child { width: auto; }
}