.content-body{padding-top:45px}.content-body h2,.content-body h3,.content-body h4{margin:1.2em 0 .5em}.content-body p,.content-body li{max-width:900px}.content-body a,.content-body+section a{ text-decoration:underline;text-underline-offset:3px}.content-body .vs-table{margin-block:32px}.content-body pre{overflow-wrap:anywhere}.content-body td{overflow-wrap:anywhere}
@media(max-width:700px){.content-body .vs-table td[data-label]::before{content:attr(data-label)}.content-body .vs-table td:first-child{background:var(--ink);color:white;font-weight:600}.content-body .vs-table td:first-child::before{display:none}}

.comparison-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.comparison-cards .product-card{min-width:0;overflow-wrap:anywhere}.comparison-cards h2{font-size:28px;margin:0}.comparison-cards .product-card p{max-width:100%}@media(max-width:700px){.comparison-cards{grid-template-columns:1fr}}
/* Product landing pages (seo/product-pages.mjs) */
.product-hero-art{margin:0 0 28px}.product-hero-art img{width:100%;height:auto;border-radius:18px;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.product-steps{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.product-steps li{counter-increment:s;border:2px solid var(--ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px}.product-steps li::before{content:"0" counter(s);font:500 12px 'IBM Plex Mono',monospace;color:var(--oxblood)}
.product-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.product-features div{background:var(--sage);border-radius:14px;padding:18px}.product-features p{margin:6px 0 0}
@media(max-width:700px){.product-steps,.product-features{grid-template-columns:1fr}}
.product-cta{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin:0 0 36px}
.product-shot{margin:0 0 28px}.product-shot img{width:100%;height:auto;border-radius:16px;border:2px solid var(--ink)}.product-shot-phone img{max-width:390px}.product-shot figcaption{font-size:13px;color:#5b6077;margin-top:8px}

/* ===== Shared utility ===== */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Compare hero (layout: compare) — answer-first ===== */
.compare-hero{max-width:none}
.compare-hero h1{max-width:900px}
.compare-hero .answer{max-width:820px;margin:26px 0 14px;padding-left:20px;border-left:4px solid var(--oxblood);font-size:21px;line-height:1.55;color:var(--ink)}
.compare-hero .answer strong{color:var(--oxblood-2)}
.compare-hero .updated{margin:0 0 26px;font-size:13px;color:var(--ink-2)}
.compare-hero .updated time{font-weight:600;color:var(--ink)}
.compare-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* ===== Per-vendor blocks ===== */
.picks{padding-block:72px 24px}
.picks h2{margin-bottom:28px}
.pick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.pick{display:flex;flex-direction:column;gap:12px;min-width:0;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:22px}
.pick.us{grid-column:span 2}
.pick h3{font:400 26px/1.05 'Lilita One',sans-serif;letter-spacing:0}
.pick-price{display:block;font:400 48px/1 'Lilita One',sans-serif;color:var(--lime)}
.pick-best{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.pick-best b{font-weight:600}
.pick-facts{margin:0;padding:12px 0 0;border-top:1px dashed var(--line);list-style:none;display:grid;gap:10px}
.pick-facts li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.pick-facts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:2px;background:var(--oxblood)}
.pick-facts a{font:500 11.5px/1.4 'IBM Plex Mono',monospace;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.pick-facts code{font-size:12.5px}
.pick>a:last-child{margin-top:auto;align-self:flex-start}
.pick .text-link{font-size:14px}
.pick.us{background:var(--oxblood);color:#fff}
.pick.us h3,.pick.us .pick-best,.pick.us .pick-facts li,.pick.us .pick-facts a{color:#fff}
.pick.us .pick-facts{border-top-color:rgba(255,255,255,.35)}
.pick.us .pick-facts li::before{background:var(--lime)}
.pick.ref{border-style:dashed;box-shadow:none}
.pick.ref .label{color:var(--ink-2)}

/* ===== Comparison matrix (generic: empty corner + Appside column) ===== */
.content-body .vs-matrix{--label-w:176px;overflow:clip;margin-block:28px 8px}
.vs-matrix table{table-layout:fixed;width:100%;border-collapse:separate;border-spacing:0;font-size:14px;line-height:1.5}
.vs-matrix th,.vs-matrix td{width:auto;overflow-wrap:break-word;word-break:normal;hyphens:manual;padding:16px 18px;vertical-align:top;text-align:left;border-bottom:1px solid var(--line)}
.vs-matrix td+td{border-left:1px solid var(--line)}
.vs-matrix code{font-size:12.5px;overflow-wrap:anywhere}
.vs-matrix thead th{position:sticky;top:0;z-index:2;background:var(--ink);color:#fff;font:400 20px/1.1 'Lilita One',sans-serif;letter-spacing:.2px;padding:16px 18px;border-bottom:0}
.content-body .vs-matrix thead th:first-child{width:var(--label-w)}
.vs-matrix thead th.us{background:var(--oxblood)}
.vs-matrix thead th.us::after{content:"↗";content:"↗" / "";display:inline-block;margin-left:6px;padding:0 4px;background:var(--lime);color:var(--ink);font-size:15px;line-height:1.3;vertical-align:2px}
.vs-matrix tbody{counter-reset:crit}
.vs-matrix tbody th{counter-increment:crit;width:auto;background:#fff;color:var(--ink);font:700 16px/1.25 'Bricolage Grotesque',sans-serif}
.vs-matrix tbody th::before{content:"0" counter(crit);display:block;margin-bottom:6px;font:500 11px/1 'IBM Plex Mono',monospace;color:var(--oxblood)}
.vs-matrix td{color:var(--ink-2);background:#fff}
.vs-matrix .cell-answer{display:block;font-weight:600;font-size:15px;line-height:1.35;color:var(--ink)}
.vs-matrix .cell-detail{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.vs-matrix .cell-detail a{font:500 11.5px/1.4 'IBM Plex Mono',monospace;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;white-space:normal}
.vs-matrix .cell-detail a[href^="http"]::after{content:" ↗" / ""}
.vs-matrix td.us{box-shadow:inset 3px 0 0 var(--oxblood),inset -3px 0 0 var(--oxblood)}
.vs-matrix tbody tr:last-child td.us{box-shadow:inset 3px 0 0 var(--oxblood),inset -3px 0 0 var(--oxblood),inset 0 -3px 0 var(--oxblood)}
.vs-matrix td.us .cell-answer{color:var(--oxblood-2)}
.vs-matrix td.us+td{border-left-color:transparent}
.vs-matrix tbody tr:last-child>*{border-bottom:0}
.vs-matrix caption{caption-side:bottom;text-align:left;padding:14px 18px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;color:var(--ink-2)}
.vs-matrix tbody tr:hover>*{background:#FAFBFF}           /* subtle row tracking; still near-white */
.vs-matrix tbody tr:hover>td.us{background:#F6F8FF}

/* ===== Body sections on layout: compare ===== */
.layout-compare>p:first-child{font-size:18px;line-height:1.6;color:var(--ink);max-width:780px}
.layout-compare>ul{columns:2;column-gap:48px;padding-left:0;list-style:none;max-width:none}
.layout-compare>ul li{break-inside:avoid;border-top:1px solid var(--line);padding:12px 0;font-size:15px;max-width:none}
.layout-compare>h2+p:has(+ul){max-width:780px}
.layout-compare>h2:has(+p:not(:has(+ul)):not(:has(+ol))){border-top:2px solid var(--ink);padding-top:28px}   /* "Limits" framed note */
.layout-compare>ol{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.layout-compare>ol li{counter-increment:s;max-width:none;border:2px solid var(--ink);border-radius:14px;padding:20px;box-shadow:4px 4px 0 var(--ink);background:#fff}
.layout-compare>ol li::before{content:"0" counter(s);display:block;margin-bottom:10px;font:500 12px 'IBM Plex Mono',monospace;color:var(--oxblood)}

/* ===== Breakpoints ===== */
@media(max-width:1180px){
 .content-body .vs-matrix{--label-w:152px}
 .vs-matrix th,.vs-matrix td{padding:14px 14px}
 .pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pick.us{grid-column:1/-1}
}
@media(max-width:1049px){
 .compare-hero .answer{font-size:19px}
}
@media(max-width:900px){
 .vs-matrix--wide{overflow:hidden}
 .vs-matrix--wide table,.vs-matrix--wide tbody,.vs-matrix--wide tr,.vs-matrix--wide th,.vs-matrix--wide td{display:block;width:auto!important}
 .vs-matrix--wide thead{display:table-header-group;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .vs-matrix--wide tbody tr{border-bottom:2px solid var(--ink)}
 .vs-matrix--wide tbody tr:last-child{border-bottom:0}
 .vs-matrix--wide tbody th{background:var(--ink);color:#fff;font:400 19px/1.2 'Lilita One',sans-serif;padding:14px 16px;border:0}
 .vs-matrix--wide tbody th::before{color:var(--lime)}
 .vs-matrix--wide td{position:relative;padding:14px 16px 14px 108px;border:0;border-top:1px solid var(--line);box-shadow:none}
 .vs-matrix--wide tbody th+td{border-top:0}
 .content-body .vs-matrix--wide td[data-label]::before{content:attr(data-label);position:absolute;left:16px;top:16px;width:80px;display:block;margin:0;font:500 10.5px/1.4 'IBM Plex Mono',monospace;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-2)}
 .vs-matrix--wide td.us,.vs-matrix--wide tbody tr:last-child td.us{box-shadow:inset 4px 0 0 var(--oxblood)}
 .content-body .vs-matrix--wide td.us::before{color:var(--oxblood)}
 .vs-matrix--wide caption{display:block;border-top:2px solid var(--ink)}
 .vs-matrix tbody tr:hover>*{background:inherit}
}
@media(max-width:700px){
 /* narrower matrices (3–4 columns) stack here with the same card styling */
 .vs-matrix:not(.vs-matrix--wide) table,.vs-matrix:not(.vs-matrix--wide) tbody,.vs-matrix:not(.vs-matrix--wide) tr,.vs-matrix:not(.vs-matrix--wide) th,.vs-matrix:not(.vs-matrix--wide) td{display:block;width:auto!important}
 .vs-matrix:not(.vs-matrix--wide) thead{display:table-header-group;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .vs-matrix:not(.vs-matrix--wide) tbody th{background:var(--ink);color:#fff;font:400 19px/1.2 'Lilita One',sans-serif;padding:14px 16px}
 .vs-matrix:not(.vs-matrix--wide) td{position:relative;padding:14px 16px 14px 108px;border:0;border-top:1px solid var(--line)}
 .content-body .vs-matrix:not(.vs-matrix--wide) td[data-label]::before{content:attr(data-label);position:absolute;left:16px;top:16px;width:80px;font:500 10.5px/1.4 'IBM Plex Mono',monospace;text-transform:uppercase;color:var(--ink-2)}
 .vs-matrix:not(.vs-matrix--wide) td.us{box-shadow:inset 4px 0 0 var(--oxblood)}
 .pick-grid{grid-template-columns:1fr}
 .pick.us{grid-column:auto}
 .pick-price{font-size:42px}
 .compare-hero .answer{font-size:18px;padding-left:16px}
 .layout-compare>ul{columns:1}
 .layout-compare>ol{grid-template-columns:1fr}
 .picks{padding-block:48px 8px}
}
@media(max-width:380px){
 .vs-matrix td{padding-left:96px!important}
 .content-body .vs-matrix td[data-label]::before{width:70px}
}

html:has(.layout-compare){scroll-padding-top:64px}

.content-body .vs-matrix td.us{background:#fff}

.content-body .vs-matrix th,.content-body .vs-matrix td{width:auto}