/* Compare-page-only styles: thin header band, the feature table, legend. */

header.site.thin { padding-bottom: 1.6rem; }
header.site.thin h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
header.site.thin .soft { margin: 0.4rem 0 0; }

.compare-intro { padding: 3rem 1.25rem 0; }

.compare-table-wrap { overflow-x: auto; margin-top: 1.4rem; }

table.feat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  font-size: 0.88rem; min-width: 44rem;
}
table.feat th, table.feat td { text-align: center; }
table.feat th:first-child, table.feat td:first-child { text-align: left; }
table.feat th {
  font-family: "Familjen Grotesk", sans-serif;
  background: var(--band); color: var(--on-band);
  border-bottom: none; text-transform: none; letter-spacing: 0.02em;
  font-size: 0.85rem;
}
table.feat tr:last-child td { border-bottom: none; }
table.feat .yes { color: var(--accent); font-weight: 700; }
table.feat .part { color: var(--celebrate); font-weight: 700; }
table.feat .no { color: var(--ink-soft); }
table.feat .note {
  display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-soft);
}

.legend {
  display: flex; flex-wrap: wrap; gap: 1.2rem;
  font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.7rem;
}
.legend .yes { color: var(--accent); font-weight: 700; }
.legend .part { color: var(--celebrate); font-weight: 700; }

.tablenote { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }

.compare-cols {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start;
}
@media (max-width: 820px) { .compare-cols { grid-template-columns: 1fr; } }
.compare-cols ul { padding-left: 1.2rem; margin: 0.6rem 0 0; }
.compare-cols li { margin: 0.55rem 0; }
.compare-cols li b { font-family: "Familjen Grotesk", sans-serif; font-weight: 600; }