/* ============================================================
   Comparison pages: /compare hub + /compare/<slug>
   Loaded after styles.css and system.css.
   ============================================================ */
.cp-hero { padding: 74px 0 46px; }
.cp-hero h1 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 18px; }
.cp-hero .bg-dek { max-width: 60ch; }

/* ---------- hub ---------- */
.cp-group { margin: 52px 0 0; }
.cp-group > h2 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted, #6B6773); margin: 0 0 18px; }
.cp-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.cp-card {
  display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 22px;
  background: #fff; border: 1px solid var(--border, #E6E1DC); border-radius: 18px;
  text-decoration: none; color: inherit; min-height: 100%;
}
.cp-card:hover { border-color: var(--primary, #2148D8); }
.cp-card .cp-vs { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary, #2148D8); font-weight: 600; }
.cp-card h3 { font-size: 21px; line-height: 1.22; margin: 0; letter-spacing: -0.01em; }
.cp-card p { margin: 0; color: var(--ink-secondary, #3B3944); font-size: 15px; line-height: 1.55; }
.cp-card .cp-price { margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--ink-muted, #6B6773); border-top: 1px solid var(--border, #E6E1DC); }

/* ---------- article-style shell for a comparison ---------- */
.cp-checked {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: #1E6B3A; background: #EAF6EE; border: 1px solid #CBE7D5;
  border-radius: 999px; padding: 6px 12px;
}
.cp-h1 { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; margin: 16px 0 16px; }
.cp-standfirst { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--ink-secondary, #3B3944); max-width: 62ch; margin: 0 0 8px; }

/* the comparison column is wider than a blog article, so the answer block spans it */
.bg-answer { max-width: none; }

/* facts strip */
.cp-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 30px 0 0;
  background: var(--border, #E6E1DC); border: 1px solid var(--border, #E6E1DC);
  border-radius: 16px; overflow: hidden;
}
.cp-fact { background: #fff; padding: 18px 18px 16px; }
.cp-fact dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted, #6B6773); margin: 0 0 7px; }
.cp-fact dd { margin: 0; font-size: 15px; line-height: 1.42; color: var(--ink, #17151B); font-weight: 500; }

/* spec table built from rows so it can reflow on phones */
.cp-spec { margin: 34px 0 0; border: 1px solid var(--border, #E6E1DC); border-radius: 16px; overflow: hidden; background: #fff; }
.cp-spec-head, .cp-row { display: grid; grid-template-columns: 190px 1fr 1fr; gap: 0; }
.cp-spec-head { background: #FBF8F4; border-bottom: 1px solid var(--border, #E6E1DC); }
.cp-spec-head > span { padding: 14px 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-muted, #6B6773); }
.cp-spec-head > span.cp-us-col { color: var(--primary, #2148D8); }
.cp-row + .cp-row { border-top: 1px solid var(--border, #E6E1DC); }
.cp-dim { padding: 16px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-secondary, #3B3944); background: #FCFAF7; }
.cp-us, .cp-them { padding: 16px 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink-secondary, #3B3944); }
.cp-us { background: #F5F7FF; color: var(--ink, #17151B); }

/* verdict + honesty blocks */
.cp-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 0; }
.cp-verdict { border: 1px solid var(--border, #E6E1DC); border-radius: 16px; padding: 22px 24px; background: #fff; }
.cp-verdict.is-us { border-color: #C9D3FA; background: #F5F7FF; }
.cp-verdict h3 { margin: 0 0 10px; font-size: 17px; }
.cp-verdict ul { margin: 0; padding-left: 18px; }
.cp-verdict li { font-size: 14.5px; line-height: 1.55; color: var(--ink-secondary, #3B3944); margin-bottom: 7px; }
.cp-honest { margin: 30px 0 0; padding: 22px 24px; border-radius: 16px; background: #FFF9E6; border: 1px solid #F2E4B0; }
.cp-honest h2 { margin: 0 0 10px; font-size: 19px; }
.cp-honest ul { margin: 0; padding-left: 18px; }
.cp-honest li { font-size: 14.5px; line-height: 1.55; color: #4A4230; margin-bottom: 6px; }
.cp-note { margin: 26px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-muted, #6B6773); border-top: 1px solid var(--border, #E6E1DC); padding-top: 16px; }
.cp-note a { color: inherit; }

/* siblings */
.cp-siblings { margin: 40px 0 0; }
.cp-siblings h2 { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted, #6B6773); margin: 0 0 14px; }
.cp-sibling-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; margin: 0; padding: 0; list-style: none; }
.cp-sibling-list a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border, #E6E1DC); font-size: 14.5px; color: var(--ink, #17151B); text-decoration: none; }
.cp-sibling-list a:hover { color: var(--primary, #2148D8); }
.cp-sibling-list span { color: var(--ink-muted, #6B6773); font-size: 13px; }

@media (max-width: 1080px) {
  .cp-hub { grid-template-columns: 1fr; }
  .cp-facts { grid-template-columns: 1fr 1fr; }
  .cp-verdicts { grid-template-columns: 1fr; }
  .cp-sibling-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cp-facts { grid-template-columns: 1fr; }
  .cp-spec-head { display: none; }
  .cp-row { grid-template-columns: 1fr; }
  .cp-dim { background: #F4F0EB; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
  .cp-us, .cp-them { padding-top: 12px; }
  .cp-us::before, .cp-them::before {
    content: attr(data-side); display: block; font-size: 11px; letter-spacing: .09em;
    text-transform: uppercase; font-weight: 700; margin-bottom: 5px; color: var(--ink-muted, #6B6773);
  }
  .cp-us::before { color: var(--primary, #2148D8); }
}