/* Tool audit: series colours validated on the paper surface (read, write, after-publish all pass all-pairs CVD and 3:1). */
.compare{--read:#7339aa;--write:#e64c23;--after:#1f9d6b;--other:#b8adbd;--track:#efe6d6;max-width:1100px;margin:48px 0}
.compare .eyebrow{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.compare h1{font-family:Fredoka,'DM Sans',sans-serif;font-size:clamp(40px,5vw,64px);line-height:1.04;letter-spacing:-.025em;margin:0 0 22px;text-wrap:balance}
.compare h1 em{font-style:normal;color:var(--orange)}
.compare .lead{max-width:760px;color:var(--ink)}
.compare h2{font-size:34px;margin:0 0 10px}
.compare h3{font-size:20px;margin:0 0 6px}
:is(.compare,.compare-home) .totals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
:is(.compare,.compare-home) .totals div{background:var(--lavender);border-radius:18px;padding:18px 20px;display:grid;gap:6px}
:is(.compare,.compare-home) .totals div.zero{background:#cfe5d9}
:is(.compare,.compare-home) .totals strong{font-family:Fredoka,'DM Sans',sans-serif;font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
:is(.compare,.compare-home) .totals span{display:flex;align-items:center;gap:8px;font-size:15px}
:is(.compare,.compare-home) .sw{display:inline-block;width:12px;height:12px;border-radius:3px;flex:none}
:is(.compare,.compare-home) .sw.read{background:var(--read)}.sw.write{background:var(--write)}.sw.after{background:var(--after)}.sw.other{background:var(--other)}
:is(.compare,.compare-home) .block{padding:52px 0 0}
:is(.compare,.compare-home) .block-head{display:grid;gap:4px;margin-bottom:22px;max-width:780px}
:is(.compare,.compare-home) .block-head p{color:var(--muted);margin:0}

:is(.compare,.compare-home) .ranking{list-style:none;margin:0;padding:0;display:grid;gap:10px}
:is(.compare,.compare-home) .ranking li{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr) 64px minmax(0,190px);align-items:center;gap:16px;padding:12px 16px;border-radius:14px;background:#fffdf6;border:1px solid var(--line)}
:is(.compare,.compare-home) .ranking li.ours{background:#cfe5d9;border-color:#9ccab2}
:is(.compare,.compare-home) .who{display:grid;min-width:0}
:is(.compare,.compare-home) .who b{font-weight:700;overflow-wrap:anywhere;line-height:1.3}
:is(.compare,.compare-home) .who small{font-size:12.5px;color:var(--muted)}
:is(.compare,.compare-home) .meter{height:14px;background:var(--track);border-radius:0 7px 7px 0;overflow:hidden;display:block}
:is(.compare,.compare-home) .meter .fill{display:block;height:100%;background:var(--after);border-radius:0 7px 7px 0}
:is(.compare,.compare-home) .ranking li:not(.ours) .meter .fill{background:var(--ink);opacity:.72}
:is(.compare,.compare-home) .score{font-family:Fredoka,'DM Sans',sans-serif;font-size:28px;font-variant-numeric:tabular-nums;text-align:right}
:is(.compare,.compare-home) .score small{font-size:15px;color:var(--muted);font-family:'DM Sans',sans-serif}
:is(.compare,.compare-home) .extra{font-size:13px;color:var(--muted)}

:is(.compare,.compare-home) .bars{display:grid;gap:4px;background:#fffdf6;border:1px solid var(--line);border-radius:18px;padding:18px 20px}
:is(.compare,.compare-home) .bar-row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr) 36px;align-items:center;gap:14px;padding:5px 0}
:is(.compare,.compare-home) .bar-row.ours{background:#cfe5d9;border-radius:12px;padding:10px;margin-bottom:8px}
:is(.compare,.compare-home) .track{display:flex;height:18px;border-left:1px solid #b8a5bc;background-image:repeating-linear-gradient(to right,var(--track) 0 1px,transparent 1px 20%)}
:is(.compare,.compare-home) .seg{height:100%;border-right:2px solid #fffdf6}
:is(.compare,.compare-home) .bar-row.ours .seg{border-right-color:#cfe5d9}
:is(.compare,.compare-home) .seg:last-child{border-right:0;border-radius:0 4px 4px 0}
:is(.compare,.compare-home) .seg.read{background:var(--read)}.seg.write{background:var(--write)}.seg.after{background:var(--after)}.seg.other{background:var(--other)}
:is(.compare,.compare-home) .n{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
:is(.compare,.compare-home) .bar-row.axis{padding-top:2px}
:is(.compare,.compare-home) .axis-ticks{position:relative;height:18px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
:is(.compare,.compare-home) .axis-ticks i{position:absolute;font-style:normal;transform:translateX(-50%)}
:is(.compare,.compare-home) .axis-ticks i:first-child{transform:none}.axis-ticks i:last-child{transform:translateX(-100%)}
:is(.compare,.compare-home) .key{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted);margin:14px 0 0}
:is(.compare,.compare-home) .key span{display:flex;align-items:center;gap:8px}
:is(.compare,.compare-home) .key.levels{margin:0 0 14px}

:is(.compare,.compare-home) .lv{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:6px;border:1.5px solid transparent;white-space:nowrap;display:inline-block;line-height:1}
:is(.compare,.compare-home) .lv.code{background:var(--ink);color:#fff9e9}
:is(.compare,.compare-home) .lv.partial{border:1.5px dashed var(--ink);color:var(--ink)}
:is(.compare,.compare-home) .lv.prompt{border-color:var(--ink);color:var(--ink)}
:is(.compare,.compare-home) .lv.none{color:var(--muted);padding-inline:0}
:is(.compare,.compare-home) .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fffdf6}
:is(.compare,.compare-home) .matrix{min-width:1020px;table-layout:fixed;font-size:13.5px}
:is(.compare,.compare-home) .matrix th,:is(.compare,.compare-home) .matrix td{vertical-align:top;padding:12px}
:is(.compare,.compare-home) .matrix thead th{background:var(--lavender);font-size:13px;line-height:1.3;vertical-align:bottom}
:is(.compare,.compare-home) .matrix thead th:first-child{width:170px}
:is(.compare,.compare-home) .matrix thead th small{display:block;font-weight:400;color:var(--muted);margin-top:3px}
:is(.compare,.compare-home) .matrix th[scope=row]{background:transparent;font-weight:700;border-radius:0}
:is(.compare,.compare-home) .matrix .ours{background:#e3f1e9}
:is(.compare,.compare-home) .matrix thead th.ours{background:#cfe5d9}
:is(.compare,.compare-home) .matrix td p{margin:6px 0 4px;line-height:1.4}
:is(.compare,.compare-home) .matrix td code{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
:is(.compare,.compare-home) .limits .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
:is(.compare,.compare-home) .limits .grid div{background:var(--lavender);border-radius:18px;padding:22px}
:is(.compare,.compare-home) .limits .grid p{margin:0}
:is(.compare,.compare-home) .method p{max-width:780px}
:is(.compare,.compare-home) .cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:var(--yellow);border-radius:24px;padding:34px;margin-top:52px}
:is(.compare,.compare-home) .cta p{margin:0;max-width:620px}
@media(max-width:800px){
 :is(.compare,.compare-home) .totals{grid-template-columns:1fr 1fr}
 :is(.compare,.compare-home) .ranking li{grid-template-columns:minmax(0,1fr) 56px;gap:6px 12px}
 :is(.compare,.compare-home) .ranking .who{grid-column:1 / -1}.ranking .extra{grid-column:1 / -1}
 :is(.compare,.compare-home) .bar-row{grid-template-columns:minmax(0,1fr) 30px;gap:4px 10px}
 :is(.compare,.compare-home) .bar-row .who{grid-column:1 / -1}.bar-row.axis>span:first-child{display:none}
 :is(.compare,.compare-home) .limits .grid{grid-template-columns:1fr}
 .compare h2{font-size:29px}
}

/* Sales page summary: reuses the ranking rows above. */
.compare-home{--after:#1f9d6b;--track:#efe6d6}
.compare-home .compare-caption{margin:6px 0 14px}
.compare-home .ranking{margin-bottom:16px}

/* Evidence as stacked cards on phones, where the nine-column table cannot fit. */
.compare .evidence-cards{display:none}
.compare .evidence-cards article{background:#fffdf6;border:1px solid var(--line);border-radius:16px;padding:14px 14px 4px}
.compare .evidence-cards h3{font-size:18px;line-height:1.25;margin:0 0 8px}
.compare .evidence-cards ul{list-style:none;margin:0;padding:0}
.compare .evidence-cards li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 10px;padding:9px 0;border-top:1px solid var(--line)}
.compare .evidence-cards li.ours{background:#e3f1e9;margin:0 -14px;padding:10px 14px;border-radius:10px;border-top:0}
.compare .evidence-cards .tool{font-weight:700;font-size:14px;overflow-wrap:anywhere}
.compare .evidence-cards p{grid-column:1 / -1;margin:0;font-size:13.5px;line-height:1.4}
.compare .evidence-cards code{grid-column:1 / -1;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.compare .evidence-cards .missing{font-size:12.5px;color:var(--muted);margin:0;padding:9px 0 10px;border-top:1px solid var(--line);overflow-wrap:anywhere}

@media(max-width:700px){
 .compare{margin:22px 0}
 .compare h1{font-size:36px}
 .compare .lead{font-size:17px}
 .compare h2{font-size:26px}
 :is(.compare,.compare-home) .totals{gap:10px}
 :is(.compare,.compare-home) .totals div{padding:14px}
 :is(.compare,.compare-home) .totals strong{font-size:40px}
 :is(.compare,.compare-home) .block{padding-top:36px}
 :is(.compare,.compare-home) .ranking li{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 12px}
 :is(.compare,.compare-home) .ranking .who{grid-column:auto;order:1}
 :is(.compare,.compare-home) .ranking .who small{display:none}
 :is(.compare,.compare-home) .ranking .score{order:2;font-size:22px}
 :is(.compare,.compare-home) .ranking .meter{order:3;grid-column:1 / -1;height:10px}
 :is(.compare,.compare-home) .ranking .extra{order:4;grid-column:1 / -1;font-size:12px}
 :is(.compare,.compare-home) .ranking .extra:empty{display:none}
 :is(.compare,.compare-home) .bars{padding:12px}
 :is(.compare,.compare-home) .bar-row{padding:3px 0}
 :is(.compare,.compare-home) .bar-row.ours{padding:8px}
 :is(.compare,.compare-home) .bar-row .who b{font-size:14px}
 :is(.compare,.compare-home) .bar-row .who small{font-size:12px}
 :is(.compare,.compare-home) .track{height:14px}
 .compare .table-scroll{display:none}
 .compare .evidence-cards{display:grid;gap:12px}
 .compare .cta{padding:22px 20px}
}
@media(max-width:700px){
 :is(.compare,.compare-home) .ranking .extra,:is(.compare,.compare-home) .axis-ticks,.compare .key{font-size:12px}
 .compare code{font-size:12px}
 :is(.compare,.compare-home) .lv{font-size:12px}
}