/* ═══════════════════════════════════════════════════════════
   COMPARISON PAGES — vs-turno, vs-jobber, vs-housecall-pro,
   vs-zenmaid, in both languages. Not part of the original
   reference file (home.css) — these pages didn't exist there.
   Loaded ALONGSIDE home.css, never instead of it: every token
   here (--ink, --brand, --g0/g1/g2, --line, --r-panel, the type
   scale) is defined in home.css's own :root and reused as-is,
   nothing redeclared. This file only adds the components that
   scale needed and home.css never had: a single-column hero
   with no photo, a comparison table, and an honest-concession
   callout box.
   ═══════════════════════════════════════════════════════════ */

.cmp-hero{padding:96px 0 64px;border-bottom:1px solid var(--line)}
.cmp-hero .wrap{max-width:740px}
.cmp-hero .d-xl{margin:16px 0 20px}
.cmp-hero .subhead{color:var(--ink-2);max-width:52ch}

.cmp-diff{padding:64px 0;border-bottom:1px solid var(--line)}
.cmp-diff .wrap{max-width:740px}
.cmp-diff p{font-size:18px;line-height:1.62;letter-spacing:-.006em;color:var(--ink);margin-top:18px}
.cmp-diff p:first-child{margin-top:0}
.cmp-diff strong{font-weight:600}

.cmp-table-sec{padding:80px 0;background:var(--g2);border-bottom:1px solid var(--line)}
.cmp-table-sec .label{display:block;margin-bottom:14px}
.cmp-table-sec .d-m{margin-bottom:36px;max-width:20ch}
.cmp-table{border:1px solid var(--line-2);border-radius:var(--r-panel);overflow:hidden;background:var(--g0)}

.cmp-head{display:grid;grid-template-columns:1.3fr 1fr 1fr;background:var(--g1);border-bottom:1px solid var(--line-2)}
.cmp-head span{padding:14px 20px;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.cmp-head span:first-child{visibility:hidden}

.cmp-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-top:1px solid var(--line-2)}
.cmp-row:first-of-type{border-top:none}
.cmp-dim{padding:20px;font-size:14px;line-height:1.4;font-weight:600;color:var(--ink);display:flex;align-items:center}
.cmp-cell{padding:20px;border-left:1px solid var(--line-2)}
.cmp-who{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.cmp-val{display:block;font-size:15px;line-height:1.5;color:var(--ink-2)}
.cmp-cell.win{background:rgba(39,80,143,.06)}
.cmp-cell.win .cmp-who{color:var(--brand)}
.cmp-cell.win .cmp-val{color:var(--ink);font-weight:600}
.cmp-cell.tie .cmp-who{color:var(--ink-3)}

.cmp-honest{padding:80px 0}
.cmp-honest .wrap{max-width:740px}
.cmp-honest-box{border:1px solid var(--line-2);border-radius:var(--r-panel);padding:30px 30px 32px;background:var(--g1)}
.cmp-honest-box h3{font-family:'Newsreader',serif;font-weight:500;font-size:24px;letter-spacing:-.014em;margin-bottom:14px}
.cmp-honest-box p{font-size:16px;line-height:1.62;color:var(--ink-2)}
.cmp-honest-box p+p{margin-top:12px}

.cmp-final{padding:80px 0;border-top:1px solid var(--line)}
.cmp-final .wrap{max-width:640px;text-align:center}
.cmp-final .d-m{margin-bottom:14px}
.cmp-final .body-l{color:var(--ink-2);margin-bottom:28px}
.cmp-final .form{justify-content:center}
.cmp-final .caption{margin-top:10px}

@media (max-width:1040px){
  .cmp-head,.cmp-row{grid-template-columns:1fr}
  .cmp-head{display:none}
  .cmp-dim{border-bottom:1px solid var(--line-2);background:var(--g1)}
  .cmp-cell{border-left:none;border-top:1px solid var(--line-2)}
}

@media (max-width:560px){
  .cmp-hero{padding:44px 0 40px}
  .cmp-diff,.cmp-table-sec,.cmp-honest,.cmp-final{padding:48px 0}
  .cmp-table-sec .d-m{max-width:none}
  .cmp-dim,.cmp-cell{padding:16px 18px}
  .cmp-honest-box{padding:24px 22px 26px}
  .cmp-final .form{flex-direction:column}
  .cmp-final .form .btn{width:100%}
}