/* Comparison - Ledger table treatment (option 01 from the squares deck).
   One ruled table: dimensions down the side, two labeled columns. */

.cmp-ledger{
  margin-top:34px;
  max-width:100%;
}
.cmp-ledger .cl-head,
.cmp-ledger .cl-row{
  display:grid;
  grid-template-columns:180px 1fr 1fr;
  gap:40px;
  padding:16px 0;
  border-bottom:1px solid rgba(42,38,64,.7);
}
.cmp-ledger .cl-head{
  font-family:var(--display); font-weight:600;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--outline);
  padding-bottom:12px;
}
.cmp-ledger .cl-head .cl-custom{color:var(--cyan)}
.cmp-ledger .cl-dim{
  font-family:var(--display); font-weight:700;
  font-size:1rem; letter-spacing:-.01em;
  color:var(--ink);
}
.cmp-ledger .cl-row p{
  font-family:'Roboto',system-ui,sans-serif;
  font-size:1rem; line-height:1.7;
  color:var(--muted);
  margin:0;
}
.cmp-ledger .cl-row .cl-custom p{color:#d9d2ee}
.cmp-ledger .cl-row a{
  color:var(--cyan);
  border-bottom:1px solid rgba(34,211,238,.35);
}

@media (max-width:760px){
  .cmp-ledger .cl-head{display:none}
  .cmp-ledger .cl-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  /* Column labels for the stacked mobile view. Default to the WordPress
     guide's pair; other ledgers override via --cl-a / --cl-b inline vars. */
  .cmp-ledger .cl-row p::before{
    display:block;
    font-family:var(--display); font-weight:600;
    font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); content:var(--cl-a,"WordPress");
    margin-bottom:4px;
  }
  .cmp-ledger .cl-row .cl-custom p::before{
    content:var(--cl-b,"Custom-built"); color:var(--cyan);
  }
}