/* The comparison pages (/compare and /compare/donkeycms-vs-<name>, 2026-10-10).
 *
 * Second version, after Buğra's review ("looks like AI slop design", "too
 * big"). The first was the usual kit: every block in its own rounded box, a
 * label above every heading, a big padded table. These are reading pages, so
 * they are now set like an article:
 *   - one column, 880px at most, everything starting on the same left edge;
 *   - thin rules between parts instead of boxes around them (the only filled
 *     surface on the page is its one button);
 *   - running text a step brighter than the site's muted gray, because this
 *     page is read, not glanced at;
 *   - nothing fades or slides in.
 * The two products' columns are never colored for and against: a table that
 * paints our side green is an advert, and this page is worth reading only
 * because it is fair.
 *
 * Every rule is .v2-prefixed: the site's `.v2 a` and `.v2 .section` rules beat
 * a one-class rule. Coral stays action-only (tools/verify-v2.mjs).
 */

.v2 .vs {
  /* Body text for a long read: between --text-muted and --text-primary. */
  --vs-ink: #c2cade;
  --vs-rule: var(--hairline-strong);
  padding: var(--s-6) 0 var(--s-5);
}
.v2 .vs-col {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--s-3);
}
.v2 .vs a:not(.btn) { color: var(--accent-voice); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.v2 .vs a:not(.btn):hover { text-decoration-thickness: 2px; }
.v2 .vs .tier-crumbs a { color: var(--text-muted); text-decoration: none; }
.v2 .vs .tier-crumbs a:hover { color: var(--text-primary); }

/* ---- Top: title, intro, the date ---- */
.v2 .vs-h1 {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.v2 .vs-lede {
  max-width: 62ch;
  color: var(--vs-ink);
  font-size: 1.12rem;
  line-height: 1.65;
}
.v2 .vs-checked {
  margin-top: var(--s-3);
  color: var(--text-muted);
  font-size: 0.88rem;
}
.v2 .vs-checked time { color: var(--text-primary); }

/* ---- The short answer: the one loud thing on the page ---- */
.v2 .vs-answer {
  margin-top: var(--s-6);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--vs-rule);
  border-bottom: 1px solid var(--vs-rule);
}
.v2 .vs-kicker {
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-muted);
}
.v2 .vs-answer p {
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--vs-ink);
}
.v2 .vs-answer p + p { margin-top: var(--s-3); }
.v2 .vs-answer strong { color: var(--text-primary); font-weight: 600; }

/* ---- Parts ---- */
.v2 .vs-part { margin-top: var(--s-7); }
.v2 .vs-h2 {
  margin-bottom: var(--s-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* ---- The facts: a ruled list, not a boxed table ---- */
.v2 .vs-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.v2 .vs-table th,
.v2 .vs-table td {
  padding: 11px 0;
  padding-right: var(--s-3);
  text-align: left;
  vertical-align: baseline;
  font-size: 0.93rem;
  line-height: 1.5;
  font-weight: 400;
}
.v2 .vs-table thead td { width: 24%; }
/* The two names stay in view under the menu while the list scrolls, so a
   reader halfway down never has to scroll back to know which side is which. */
.v2 .vs-table thead th,
.v2 .vs-table thead td {
  position: sticky;
  top: calc(var(--nav-height) + var(--dcms-hb-h, 0px));
  z-index: 2;
  padding-top: 14px;
  padding-bottom: 14px;
  background: var(--bg-void);
  box-shadow: inset 0 -1px 0 var(--vs-rule);
}
.v2 .vs-table thead th {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}
.v2 .vs-table tbody tr + tr { border-top: 1px solid var(--hairline); }
.v2 .vs-table tbody th { color: var(--text-muted); }
.v2 .vs-table tbody td { color: var(--text-primary); }
/* A group's name: a quiet line of its own with air above it. */
.v2 .vs-table .vs-group th {
  padding-top: var(--s-4);
  padding-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-voice);
}
.v2 .vs-table tbody:first-of-type .vs-group th { padding-top: var(--s-3); }
.v2 .vs-table .vs-group + tr { border-top: 0; }

/* Phones: the fact's name, then each product's answer under its own name. */
@media (max-width: 640px) {
  .v2 .vs-table,
  .v2 .vs-table tbody,
  .v2 .vs-table tr,
  .v2 .vs-table th,
  .v2 .vs-table td { display: block; width: auto; }
  .v2 .vs-table thead { display: none; }
  .v2 .vs-table th,
  .v2 .vs-table td { padding: 0; }
  .v2 .vs-table tbody tr:not(.vs-group) { padding: 12px 0; }
  .v2 .vs-table tbody th[scope="row"] { margin-bottom: 4px; font-weight: 600; color: var(--text-primary); }
  .v2 .vs-table tbody td { display: flex; gap: 10px; color: var(--vs-ink); }
  .v2 .vs-table tbody td::before {
    content: attr(data-col);
    flex: 0 0 88px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.7;
  }
  .v2 .vs-table .vs-group th { padding: var(--s-3) 0 4px; }
}

/* ---- Where each one wins: two lists facing each other ---- */
.v2 .vs-wins { display: grid; gap: var(--s-6) var(--s-6); }
@media (min-width: 760px) { .v2 .vs-wins { grid-template-columns: 1fr 1fr; } }
.v2 .vs-point { padding: 18px 0; border-top: 1px solid var(--hairline); }
.v2 .vs-wins .vs-h2 { margin-bottom: var(--s-3); }
.v2 .vs-point h3 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.v2 .vs-point p { color: var(--vs-ink); font-size: 0.95rem; line-height: 1.65; }

/* ---- Who should choose which ---- */
.v2 .vs-choose { display: grid; gap: var(--s-5) var(--s-6); }
@media (min-width: 760px) { .v2 .vs-choose { grid-template-columns: 1fr 1fr; } }
.v2 .vs-choose h3 {
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}
.v2 .vs-choose .tier-list li { padding-left: 24px; margin-bottom: 12px; color: var(--vs-ink); font-size: 0.95rem; line-height: 1.55; }
.v2 .vs-choose .tier-list li::before { color: var(--text-muted); }
.v2 .vs-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: var(--s-4); }
.v2 .vs-cta span { color: var(--text-muted); font-size: 0.88rem; }

/* The shared FAQ block sits between two parts of this page: give it the
   page's rhythm instead of a full section's padding. */
.v2 .vs .faq-section { padding: var(--s-7) 0 0; }

/* ---- How we checked: small print, but readable ---- */
.v2 .vs-sources { padding-top: var(--s-5); border-top: 1px solid var(--vs-rule); }
.v2 .vs-sources .vs-h2 { font-size: 1.15rem; margin-bottom: var(--s-2); }
.v2 .vs-sources p { max-width: 68ch; color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.v2 .vs-sources ul {
  margin: var(--s-2) 0;
  padding-left: 18px;
  columns: 2 240px;
  column-gap: var(--s-5);
  color: var(--text-muted);
  font-size: 0.92rem;
}
.v2 .vs-sources li { margin-bottom: 6px; break-inside: avoid; }
.v2 .vs-sources .vs-trademark { margin-top: var(--s-2); font-size: 0.8rem; }

/* ---- The hub: a list of pages, not a grid of cards ---- */
.v2 .vs-index { list-style: none; margin-top: var(--s-6); border-top: 1px solid var(--vs-rule); }
.v2 .vs-index li { border-bottom: 1px solid var(--vs-rule); }
.v2 .vs .vs-index a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px var(--s-4);
  padding: var(--s-3) 0;
  text-decoration: none;
  color: inherit;
}
.v2 .vs-index-name {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  transition: color 0.15s ease;
}
.v2 .vs-index a:hover .vs-index-name,
.v2 .vs-index a:focus-visible .vs-index-name { color: var(--accent-voice); }
.v2 .vs-index-text { grid-column: 1; color: var(--vs-ink); font-size: 0.98rem; line-height: 1.6; }
.v2 .vs-index-date { grid-column: 2; grid-row: 1; align-self: center; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 560px) {
  .v2 .vs .vs-index a { grid-template-columns: 1fr; }
  .v2 .vs-index-date { grid-column: 1; grid-row: auto; }
}
.v2 .vs-note { margin-top: var(--s-3); max-width: 62ch; color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }

.v2 .vs-rules { display: grid; gap: 0 var(--s-6); }
@media (min-width: 700px) { .v2 .vs-rules { grid-template-columns: 1fr 1fr; } }
.v2 .vs-rules > div { padding: 18px 0; border-top: 1px solid var(--hairline); }
.v2 .vs-rules dt { margin-bottom: 4px; font-weight: 600; color: var(--text-primary); }
.v2 .vs-rules dd { color: var(--vs-ink); font-size: 0.95rem; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) { .v2 .vs-index-name { transition: none; } }

/* ---- The shared FAQ block, brought into this page's column ----
   Elsewhere it is a centered section with a label above its heading and two
   columns of questions. Here it reads as one more part of the article: same
   left edge, same heading size, one column. */
.v2 .vs .faq-section .container { max-width: 880px; padding: 0 var(--s-3); }
.v2 .vs .faq-section .section-head { margin: 0 0 var(--s-4); max-width: none; text-align: left; }
.v2 .vs .faq-section .section-head .eyebrow { display: none; }
.v2 .vs .faq-section .section-title {
  margin-bottom: 10px;
  text-align: left;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.v2 .vs .faq-section .section-head p { margin: 0; text-align: left; color: var(--text-muted); font-size: 0.95rem; }
.v2 .vs .faq-reader { max-width: none; margin: 0; }

/* ---- Boxes back on the top and bottom sections (Buğra, 2026-10-10) ----
   His review of the second version: only the TABLE was meant to lose its box;
   the short answer at the top and the "who should choose which" columns at the
   bottom read better framed. The table and the two "wins" lists between them
   stay open, so the page goes box, open, open, box. */
.v2 .vs-answer {
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + 2px);
  background: var(--bg-surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
}
.v2 .vs-answer p { font-size: clamp(18px, 2.1vw, 22px); }
.v2 .vs-choose { gap: var(--s-3); }
.v2 .vs-choose-col {
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
}
/* The hub's pages: a box each, like the short answer they lead to. */
.v2 .vs-index { border-top: 0; display: grid; gap: var(--s-2); }
.v2 .vs-index li {
  padding: 4px var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-card);
  transition: border-color 0.15s ease;
}
.v2 .vs-index li:hover { border-color: var(--accent-voice-line); }
@media (max-width: 560px) {
  .v2 .vs-answer, .v2 .vs-choose-col { padding: var(--s-3); }
  .v2 .vs-index li { padding: 0 var(--s-3); }
}