/* Dated comparisons and the /compare hub (D-2026-11-14-comparisons-106). Espero's column carries the brand pair
   #FE9B96 and #94B5FD; text stays dark on light for contrast. From 1100px the comparison is a table with a sticky
   header row; below that every row becomes a card that lists each tool's value, so the page never scrolls sideways. */
.comparison-guide,.cmp-hub-cards{--cmp-coral:#FE9B96;--cmp-blue:#94B5FD;--cmp-coral-soft:#fff3f2;--cmp-blue-soft:#f1f5ff;--cmp-ink:#181a22;--cmp-muted:#555a6a;--cmp-line:#e3e1ea;--cmp-panel:#f8f8fb;--cmp-sticky-top:77px}
.comparison-guide{padding-block:2.5rem 4.5rem;color:var(--cmp-ink);overflow-wrap:break-word}
.comparison-guide .wrap{max-width:1100px;margin-inline:auto;padding-inline:24px;box-sizing:border-box}
.comparison-guide section{margin-block:0 3rem}
.comparison-guide h2{font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;letter-spacing:-.02em;margin:0 0 1rem}
.comparison-guide h3{font-size:1.15rem;line-height:1.3;margin:0 0 .6rem}
.comparison-guide p,.comparison-guide li{line-height:1.7}
.comparison-guide a{text-underline-offset:.2em}
.cmp-hero{padding-block-end:.5rem;margin-block-end:2.5rem}
.cmp-date{display:inline-block;margin:0;padding:.3rem .85rem;border-radius:999px;background:var(--cmp-coral-soft);color:#7a3f33;font-size:.9rem;font-weight:650}
.cmp-hero h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.12;letter-spacing:-.03em;margin:1rem 0 1.25rem;max-width:22ch}
.cmp-disclosure{margin:0 0 1.25rem;padding:.85rem 1.1rem;border-radius:14px;background:linear-gradient(90deg,var(--cmp-coral-soft),var(--cmp-blue-soft));border-inline-start:4px solid var(--cmp-coral)}
.cmp-lead{font-size:1.1rem;color:#3c3f4c;max-width:70ch;margin:0}
.cmp-short ul,.cmp-short ol{padding-inline-start:1.3rem;margin:0 0 1rem}
.cmp-short li{margin-block-end:.55rem}
.cmp-short p{max-width:75ch}
.cmp-best-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1rem}
.cmp-best-card{border:1px solid var(--cmp-line);border-radius:18px;padding:1.1rem 1.2rem;background:#fff}
.cmp-best-card h3 a{color:inherit;text-decoration:none}
.cmp-best-card h3 a:hover,.cmp-best-card h3 a:focus-visible{text-decoration:underline}
.cmp-best-card p{margin:0;font-size:.97rem}
.cmp-best-card.is-espero{grid-column:span 2;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--cmp-coral),var(--cmp-blue)) border-box}
.cmp-legend{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;margin:0 0 1rem;padding:0;font-size:.92rem;color:var(--cmp-muted)}
.cmp-legend li{display:inline-flex;align-items:center}
.cmp-table-wrap{max-width:1440px;margin-inline:auto;padding-inline:24px;box-sizing:border-box}
.cmp-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:.875rem;line-height:1.45;background:#fff}
.cmp-table caption{caption-side:top;text-align:start;color:var(--cmp-muted);font-size:.92rem;padding:0 0 .75rem}
.cmp-table th,.cmp-table td{padding:.75rem .7rem;border-block-end:1px solid var(--cmp-line);vertical-align:top;text-align:start}
/* Long compounds break inside narrow columns where the language builds them. */
:is(:lang(de),:lang(fi),:lang(nl),:lang(sv),:lang(da),:lang(nb),:lang(is),:lang(et),:lang(hu),:lang(lb),:lang(fy),:lang(af)) .cmp-table :is(th,td){hyphens:auto}
.cmp-table thead th{position:sticky;top:var(--cmp-sticky-top);z-index:2;background:#fff;font-size:.95rem;line-height:1.3;border-block-end:2px solid var(--cmp-line);box-shadow:0 1px 0 var(--cmp-line)}
.cmp-table thead .cmp-corner{width:12%;color:var(--cmp-muted);font-weight:600}
.cmp-table thead th.cmp-tool.is-espero{width:15%}
.cmp-table thead th.is-espero{background:linear-gradient(135deg,var(--cmp-coral),var(--cmp-blue));color:var(--cmp-ink);border-start-start-radius:14px;border-start-end-radius:14px;font-size:1.05rem}
.cmp-table tbody th{font-weight:650;background:var(--cmp-panel)}
.cmp-table td.is-espero{background:#fff7f6;box-shadow:inset 3px 0 0 var(--cmp-coral),inset -3px 0 0 var(--cmp-blue);font-weight:500}
.cmp-table tbody tr:last-child td.is-espero{box-shadow:inset 3px 0 0 var(--cmp-coral),inset -3px 0 0 var(--cmp-blue),inset 0 -3px 0 var(--cmp-blue)}
.cmp-cell-tool{display:none}
.cmp-cell-value{display:flex;align-items:flex-start;gap:.45em}
.cmp-mark{display:inline-flex;flex:none;align-items:center;justify-content:center;width:1.45em;height:1.45em;border-radius:50%;font-size:.95em;font-weight:700;line-height:1}
[data-mark=yes] .cmp-mark{background:#ddf3e4;color:#11603a}
[data-mark=partial] .cmp-mark{background:#fff0cf;color:#7a5200}
[data-mark=no] .cmp-mark{background:#fde2e2;color:#9f2323}
[data-mark=unknown] .cmp-mark{background:#eceef3;color:#4e5363}
[data-mark=info] .cmp-mark{background:#f1f5ff;color:#354b72}
[data-mark=unknown] .cmp-cell-text{color:var(--cmp-muted)}
.cmp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.cmp-tool-card{padding-block:1.25rem;border-block-start:1px solid var(--cmp-line)}
.cmp-tool-card:first-of-type{border-block-start:0}
.cmp-tool-card.is-espero{padding:1.4rem 1.5rem;border:2px solid transparent;border-radius:20px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--cmp-coral),var(--cmp-blue)) border-box;margin-block-end:1rem}
.cmp-num{color:var(--cmp-muted);font-weight:600}
.cmp-choose ol{padding-inline-start:1.4rem}
.cmp-choose li{margin-block-end:.6rem}
.cmp-faq-item{padding-block:1rem;border-block-end:1px solid var(--cmp-line)}
.cmp-faq-item:last-child{border-block-end:0}
.cmp-faq-item h3{font-size:1.08rem}
.cmp-faq-item p{margin:0}
.cmp-sources{font-size:.92rem}
.cmp-source-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1rem 2rem}
.cmp-source-group h3{font-size:1rem;margin:0 0 .4rem}
.cmp-source-group ul{margin:0;padding-inline-start:1.1rem}
.cmp-source-group li{line-height:1.55;margin-block-end:.35rem}
.cmp-source-group a{overflow-wrap:anywhere;word-break:break-word}
.cmp-more ul{display:flex;flex-wrap:wrap;gap:.75rem;list-style:none;margin:0;padding:0}
.cmp-more li a{display:inline-block;padding:.6rem 1rem;border:1px solid var(--cmp-line);border-radius:999px;text-decoration:none;color:inherit;background:#fff}
.cmp-more li a:hover,.cmp-more li a:focus-visible{border-color:var(--cmp-coral);background:var(--cmp-coral-soft)}
/* The /compare hub: one card per comparison and the AI interpreting guide. */
.cmp-hub-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1rem;margin:2rem 0 1rem}
.cmp-hub-card{border:1px solid var(--cmp-line);border-radius:18px;padding:1.25rem 1.3rem;background:#fff}
.cmp-hub-card:nth-child(1){background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--cmp-coral),var(--cmp-blue)) border-box;border-color:transparent}
.cmp-hub-card h2{font-size:1.2rem;line-height:1.3;margin:0 0 .6rem}
.cmp-hub-card h2 a{color:inherit}
.cmp-hub-card p{margin:0 0 .6rem;line-height:1.6}
.cmp-hub-date{font-size:.85rem;color:var(--cmp-muted)}
@media (max-width:1099px){
 .cmp-best-card.is-espero{grid-column:auto}
 /* Cards. The selectors outrank the shared shell's phone table rules (site-shell.css, table.table-stack), whose
    generated column label would repeat the tool name that every cell already shows. */
 .comparison-guide .cmp-table-wrap table.cmp-table{table-layout:auto;background:none;font-size:.95rem}
 .comparison-guide .cmp-table-wrap table.cmp-table,.comparison-guide .cmp-table-wrap table.cmp-table>:is(caption,tbody),.comparison-guide .cmp-table-wrap table.cmp-table tr,.comparison-guide .cmp-table-wrap table.cmp-table :is(th,td){display:block;width:auto;min-width:0}
 .comparison-guide .cmp-table-wrap table.cmp-table>thead{display:none}
 .comparison-guide .cmp-table-wrap table.cmp-table tbody tr{border:1px solid var(--cmp-line);border-radius:18px;margin:0 0 1rem;padding:0;background:#fff;overflow:hidden}
 .comparison-guide .cmp-table-wrap table.cmp-table tbody th{font-size:1.02rem;font-weight:700;padding:.85rem 1rem;border-block-end:1px solid var(--cmp-line);background:var(--cmp-panel)}
 .comparison-guide .cmp-table-wrap table.cmp-table td{display:grid;grid-template-columns:minmax(6.5rem,32%) minmax(0,1fr);gap:.75rem;padding:.7rem 1rem;border:0;border-block-end:1px solid var(--cmp-line);text-align:start}
 .comparison-guide .cmp-table-wrap table.cmp-table td:last-child{border-block-end:0}
 .comparison-guide .cmp-table-wrap table.cmp-table td[data-label]::before,.comparison-guide .cmp-table-wrap table.cmp-table td::before{content:none;display:none}
 .comparison-guide .cmp-table-wrap table.cmp-table .cmp-cell-tool{display:block;font-weight:650}
 .comparison-guide .cmp-table-wrap table.cmp-table td.is-espero,.comparison-guide .cmp-table-wrap table.cmp-table tbody tr:last-child td.is-espero{box-shadow:none;border-inline-start:4px solid var(--cmp-coral);background:linear-gradient(90deg,var(--cmp-coral-soft),var(--cmp-blue-soft))}
}
@media (max-width:640px){
 .comparison-guide{padding-block-start:1.75rem}
 .comparison-guide .wrap,.cmp-table-wrap{padding-inline:16px}
 .cmp-hero h1{letter-spacing:-.02em}
 .cmp-disclosure{padding:.75rem .9rem}
}
@media (max-width:480px){
 .comparison-guide .cmp-table-wrap table.cmp-table td{grid-template-columns:minmax(0,1fr);gap:.3rem}
}