/* Keep tool marks with their visible names in copy and chips. */
.legal-tool-brand{display:inline-flex;align-items:center;gap:.28em;white-space:nowrap;vertical-align:baseline}
.legal-tool-brand img{display:inline-block;width:.95em;height:.95em;flex:none;object-fit:contain}

/* Feature and status pills use semantic icons alongside the tool logos. */
.product-detail .legal-pill-icon{display:inline-block;width:1.1em;height:1.1em;flex:none;vertical-align:-.16em;margin-right:.35em}
.product-detail .x-checks span::before{content:none}
.product-detail .x-checks .legal-pill-icon{width:20px;height:20px;margin-right:0;color:var(--x-teal-2)}
.product-detail .x-checks .legal-tool-brand{gap:.28em}

/* Large comparison blocks pair a prominent icon with their title and detail. */
.product-detail .why-node{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:5px;align-items:center}
.product-detail .why-node>.legal-node-icon{grid-column:1;grid-row:1 / 3;width:32px;height:32px;color:var(--w-teal);align-self:center}
.product-detail .why-node>b,.product-detail .why-node>span{grid-column:2;min-width:0}
.product-detail .why-node.bad>.legal-node-icon{color:var(--w-amber)}
@media(max-width:480px){.product-detail .why-split{grid-template-columns:1fr}}