/* Comparison pages under /compare/: a buyer's guide laid out like an editorial review. Quick picks in the masthead,
   one ruled table, then one entry per app with its facts on the left and what stands out and its limits on the right.
   Only the site's tokens (assets/styles.css, assets/editorial.css); no cards in a grid, rules do the structure. */

.cmp-mast .mast-grid {
  align-items: start;
}

.cmp-checked {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.cmp-checked strong {
  color: var(--ink);
}

.cmp-disclosure {
  max-width: 34rem;
  margin-top: var(--s-5);
  padding-left: var(--s-4);
  border-left: 2px solid var(--cobalt);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* Quick picks: the answer to "which one?" before any scrolling. */
.picks {
  border-top: 2px solid var(--navy);
  background: var(--card);
  box-shadow: var(--shadow);
}

.picks h2 {
  padding: var(--s-4) var(--s-5) var(--s-3);
  font-size: var(--fs-md);
}

.picks ol {
  counter-reset: pick;
}

.picks li {
  counter-increment: pick;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
}

.picks li::before {
  content: counter(pick, decimal-leading-zero);
  grid-row: span 2;
  padding-top: 2px;
  color: var(--ink-3);
  font: 600 var(--fs-sm) / 1.4 var(--font-mono);
}

.picks .job {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

.picks a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 600;
}

.picks .ours {
  background: var(--tint);
}

.picks-foot {
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* The table: our row carries a label, never a highlight colour that reads as a winner. */
.cmp-table td,
.cmp-table th {
  vertical-align: top;
}

.cmp-table tbody th {
  min-width: 9rem;
  font-family: var(--font-head);
  font-size: 1.0625rem;
}

.cmp-table tbody th a {
  min-height: 0;
}

.cmp-table .by {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font: 400 var(--fs-sm) / 1.4 var(--font-body);
}

.cmp-table .num {
  white-space: nowrap;
}

.ours-tag {
  display: inline-block;
  margin-top: var(--s-1);
  padding: 0 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-full);
  color: var(--ink-2);
  font: 600 0.75rem / 1.6 var(--font-body);
}

.cmp-note {
  max-width: 44rem;
  margin-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* How to choose: numbered questions in a ruled list. */
.choose {
  counter-reset: step;
}

.choose li {
  counter-increment: step;
  position: relative;
  padding: var(--s-5) 0 var(--s-5) 56px;
  border-top: 1px solid var(--line);
}

.choose li:last-child {
  border-bottom: 1px solid var(--line);
}

.choose li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: var(--s-5);
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink);
  font: 600 1rem / 34px var(--font-head);
  text-align: center;
}

.choose h3 {
  font-size: 1.1875rem;
}

.choose p {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

/* One entry per app. */
.entry-group {
  margin-top: var(--s-8);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--navy);
  font-size: var(--fs-lg);
}

.entry-group:first-of-type {
  margin-top: 0;
}

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-7);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

@media (min-width: 900px) {
  .entry {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s-8);
  }
}

.entry-head h3 {
  font-size: var(--fs-xl);
}

.entry-dev {
  margin-top: var(--s-1);
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

.entry-best {
  margin-top: var(--s-4);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
}

.entry-facts {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.entry-facts dt {
  color: var(--ink-3);
  font-weight: 600;
}

.entry-facts dd {
  margin: 2px 0 0;
  color: var(--ink-2);
}

.entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-5);
}

.entry-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 479px) {
  .entry-links .btn {
    width: 100%;
  }
}

.entry-body h4 {
  color: var(--ink);
  font: 600 var(--fs-sm) / 1.4 var(--font-body);
  letter-spacing: 0.02em;
}

.entry-body h4 + ul {
  margin-top: var(--s-2);
}

.entry-body ul + h4 {
  margin-top: var(--s-5);
}

.entry-body li {
  position: relative;
  padding: 6px 0 6px 22px;
  color: var(--ink-2);
}

.entry-body li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.95em;
  width: 10px;
  height: 2px;
  background: var(--cobalt);
}

.entry-body .limits li::before {
  background: var(--ink-3);
}

/* How we checked and the sources. */
.sources {
  display: grid;
  gap: var(--s-1) var(--s-6);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
}

@media (min-width: 720px) {
  .sources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sources a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}