/* Comparison pages (/compare/…): the inner-page layout, the homepage's comparison grid (.cmp, from home.css) with both
   products in neutral text, and the game pages' sections and call to action (games.css). Every vendor fact on these pages
   is dated and links to the vendor's own page. */
.compare .inner { max-width: 960px; }
.compare h1 { margin-top: 14px; }
.compare .lede { max-width: 760px; }
.compare .eyebrow a { color: inherit; }
.compare .fine { color: var(--text-mute); font-size: 13.5px; line-height: 1.6; }
.cnote { margin-top: 18px; padding: 12px 14px; border-left: 2px solid var(--border-hi); color: var(--text-dim); font-size: 14px; line-height: 1.6; max-width: 760px; }
.cnote b { color: var(--text); font-weight: 600; }

/* Numbered sections, as on the game pages. */
.csec { margin-top: 64px; scroll-margin-top: 84px; }
.csec > h2 { display: flex; align-items: baseline; gap: 14px; padding-top: 22px; border-top: 1px solid var(--border-hi); font-size: 24px; letter-spacing: -.025em; }
.csec > h2 span { font: 500 12px var(--font-mono); color: var(--text-mute); }
.csec > p { margin-top: 12px; color: var(--text-dim); font-size: 15px; line-height: 1.65; max-width: 760px; }
.csec b { color: var(--text); font-weight: 600; }
.csteps { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-dim); font-size: 15px; line-height: 1.6; max-width: 760px; }

/* The comparison grid: home.css's .cmp, without the strike-through. Neither column is styled as the loser: a row says
   what each product does, and the "ahead" lists below the grid say who is ahead where. */
.cmp { margin-top: 24px; border-top: 1px solid var(--border-hi); }
.cmp-row { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.19fr) minmax(0, 1.19fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: 14.5px; line-height: 1.55; }
.cmp-row b { font-weight: 600; }
.cmp-row > span { color: var(--text-dim); }
.cmp-row > span b { color: var(--text); }
.cmp-head { padding: 0 0 12px; font: 500 12px var(--font-mono); color: var(--text-mute); border-bottom: 1px solid var(--border-hi); align-items: center; }
.cmp-head > span { color: var(--text); font: 600 14px var(--font-sans); }
.cmp-head .us { display: inline-flex; align-items: center; gap: 8px; }
.cmp-head .us img { width: 18px; height: 18px; }
.cmp a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.cmp a:hover { text-decoration-color: #fff; }
.cmp-row:not(.cmp-head) { transition: background .2s ease; }
.cmp-row:not(.cmp-head):hover { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .02) 60%); }
@media (max-width: 760px) {
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cmp-row > span[data-l]::before { content: attr(data-l); display: block; font: 500 11.5px var(--font-mono); color: var(--text-mute); }
}

/* Where each one is ahead: two panels, as the homepage's pledge. */
.cboth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 24px; border: 1px solid var(--border-hi); border-radius: 16px; overflow: hidden; background: #0c0d0f; }
.cboth > div { padding: 24px 26px; }
.cboth > div + div { border-left: 1px solid var(--border); }
.cboth .lbl { font: 500 12px var(--font-mono); color: var(--text-mute); }
.cboth ul { list-style: none; margin: 12px 0 0; padding: 0; }
.cboth li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.cboth li:last-child { border-bottom: 0; }
.cboth li b { color: var(--text); font-weight: 600; }
.cboth li::before { content: ""; position: absolute; left: 1px; top: 1.05em; width: 11px; height: 5.5px; border-left: 1.8px solid var(--good); border-bottom: 1.8px solid var(--good); transform: rotate(-45deg) translateY(-3px); }
@media (max-width: 800px) { .cboth { grid-template-columns: minmax(0, 1fr); } .cboth > div + div { border-left: 0; border-top: 1px solid var(--border); } .cboth > div { padding: 20px 18px; } }

/* Sources and date. */
.csrc { margin-top: 56px; padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); color: var(--text-mute); font-size: 13.5px; line-height: 1.65; }
.csrc b { color: var(--text-dim); font-weight: 600; }
.csrc a { color: var(--text-dim); overflow-wrap: anywhere; }
.csrc p + p { margin-top: 8px; }

/* Call to action and other comparisons, as on the game pages. */
.ccta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 40px; padding: 24px 26px; border: 1px solid var(--border-hi); border-radius: 16px; background: #0c0d0f; }
.ccta b { display: block; font-size: 18px; }
.ccta span { display: block; margin-top: 4px; color: var(--text-dim); font-size: 14px; }
.ccta-b { display: flex; gap: 10px; flex-wrap: wrap; }
.ccta .btn-primary .sep { display: inline-block; width: 1px; height: 14px; margin: 0 10px; background: currentColor; opacity: .25; vertical-align: middle; }
.ccta .btn-primary [data-price] { color: inherit; opacity: .65; }
.cmore { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.cmore span { flex-basis: 100%; font: 500 12px var(--font-mono); color: var(--text-mute); }
.cmore a { font-size: 13.5px; color: var(--text-dim); padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; }
.cmore a:hover { color: var(--text); border-color: var(--border-hi); }

/* The hub's cards, as the games index. */
.clist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
.ccard { display: block; padding: 20px; border: 1px solid var(--border-hi); border-radius: 14px; background: #0c0d0f; }
.ccard b { display: block; color: var(--text); font-size: 17px; letter-spacing: -.01em; }
.ccard span { display: block; margin-top: 6px; color: var(--text-dim); font-size: 14px; line-height: 1.55; }
.ccard:hover { border-color: rgba(255, 255, 255, .3); }
@media (max-width: 600px) { .clist { grid-template-columns: minmax(0, 1fr); } }