/* Generated by tools/compare-export.php --css from compare-matrix.php. Do not edit here. */
.mx{margin:1.5rem 0}
.mx-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-size:.82rem;color:#64748b;margin:0 0 .75rem}
.mx details{border:1px solid #e2e8f0;border-radius:.75rem;margin:.6rem 0;background:#fff;overflow:hidden}
.mx summary{cursor:pointer;padding:.8rem 1rem;font-weight:700;color:#0f172a;background:#f8fafc;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.mx summary::-webkit-details-marker{display:none}
.mx summary::after{content:"▾";color:#94a3b8;transition:transform .15s}
.mx details:not([open]) summary::after{transform:rotate(-90deg)}
.mx summary .mx-count{font-weight:500;color:#64748b;font-size:.85rem;margin-left:auto;white-space:nowrap}
.mx-scroll{overflow-x:auto;position:relative}
/* display:table because the blog theme sets table{display:block} for its own mobile scrolling,
   which silently disables table-layout:fixed and leaves the columns content-sized. .mx-scroll
   already provides the sideways scroll. */
.mx table{display:table;width:100%;border-collapse:collapse;font-size:.92rem;margin:0}
.mx th,.mx td{padding:.6rem .8rem;border-top:1px solid #e2e8f0;text-align:center;vertical-align:top}
.mx th{font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b;background:#fff;white-space:nowrap}
.mx th.mx-ours{color:#4f46e5}
.mx td.mx-ours{background:#fbfaff}
.mx th:first-child,.mx td:first-child{text-align:left;position:sticky;left:0;background:#fff;min-width:12rem;max-width:18rem;font-weight:600;color:#0f172a;z-index:1;box-shadow:1px 0 0 #e2e8f0}
.mx td:first-child small{display:block;font-weight:400;color:#64748b;font-size:.8rem;margin-top:.15rem}
.mx-yes{color:#047857;font-weight:800}
.mx-no{color:#b91c1c;font-weight:800}
.mx-part{color:#b45309;font-weight:800}
.mx-tier,.mx-note{font-size:.8rem;color:#475569}
.mx-text{font-size:.85rem;color:#0f172a;white-space:nowrap}
.mx-untested{font-size:.75rem;color:#64748b;font-style:italic}
.mx-na{color:#cbd5e1}
/* Visually hidden but read aloud. The positioned .mx-scroll above contains it; without that it escaped the scroll box and widened the page on phones. */
.mx-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}
.mx-foot{font-size:.8rem;color:#64748b;margin-top:.6rem}
.mx-foot details{border:0;background:none;margin:.3rem 0 0}
.mx-foot summary{background:none;padding:0;font-weight:600;color:#4f46e5;display:inline}
.mx-foot summary::after{content:""}
.mx-foot ul{margin:.4rem 0 0;padding-left:1.1rem}
.mx-foot li{margin:.2rem 0;word-break:break-all}
.mx-only{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem;margin:1.25rem 0}
.mx-only>div{border:1px solid #e2e8f0;border-radius:.9rem;padding:1.1rem 1.3rem;background:#f8fafc}
.mx-only>div.mx-ours{background:#fbfaff;border-color:#e0e7ff}
.mx-only h3{margin:0 0 .6rem;font-size:1rem;color:#0f172a}
.mx-only ul{margin:0;padding-left:1.1rem}
.mx-only li{margin:.4rem 0;font-size:.93rem;color:#334155;line-height:1.55}
/* More than 4 products: every product column gets a fixed, readable width and the table scrolls sideways
   under the frozen feature column, so adding a vendor makes it scroll further instead of squeezing the rest.
   All groups share one width, so their columns line up, and they scroll together (script below). */
.mx-wide{--mx-feat:13rem;--mx-col:10.5rem}
.mx-wide table{table-layout:fixed;width:100%;min-width:calc(var(--mx-feat) + var(--mx-cols) * var(--mx-col))}
.mx-wide th:first-child,.mx-wide td:first-child{width:var(--mx-feat);min-width:0;max-width:none}
.mx-wide th,.mx-wide .mx-text{white-space:normal}
.mx-wide .mx-scroll{scrollbar-width:thin;scroll-snap-type:x proximity;scroll-padding-left:var(--mx-feat)}
.mx-wide th,.mx-wide td{scroll-snap-align:start}
/* Our column sits right after the feature column in hubs; on wider screens it stays frozen too, so every vendor is read against it. */
@media(min-width:721px){.mx-wide th.mx-ours:nth-child(2),.mx-wide td.mx-ours:nth-child(2){position:sticky;left:var(--mx-feat);z-index:1;box-shadow:1px 0 0 #e0e7ff}.mx-wide th.mx-ours:nth-child(2){background:#fff}.mx-wide .mx-scroll{scroll-padding-left:calc(var(--mx-feat) + var(--mx-col))}}
.mx-hint{display:none;font-size:.8rem;color:#64748b;margin:-.35rem 0 .6rem}
.mx-wide.mx-overflow .mx-hint{display:block}
@media(max-width:720px){.mx-wide{--mx-feat:8.5rem;--mx-col:8.75rem}.mx-wide th:first-child,.mx-wide td:first-child{min-width:0}}
@media(max-width:720px){.mx th:first-child,.mx td:first-child{min-width:9rem}.mx th,.mx td{padding:.5rem .55rem}}