.dotspace .no-time{font:600 9.5px var(--mono);fill:var(--text-3);text-anchor:middle;letter-spacing:.1em;font-style:italic}

/* time lane */
.dotspace .time-axis{stroke:var(--cyan);stroke-width:1.2;opacity:.5}
.dotspace .time-tick{font:700 9px var(--mono);fill:var(--text-3);letter-spacing:.08em}
.dotspace .t-dot.muted{fill:var(--text-3)}
.dotspace .t-dot.good{fill:var(--cyan)}
.dotspace .t-tether{stroke-width:1;opacity:.45}
.dotspace .t-tether.muted{stroke:var(--text-3)}
.dotspace .t-tether.good{stroke:var(--cyan);opacity:.7}
.dotspace .align-brace{stroke:var(--cyan);stroke-width:1.2;opacity:.85}
.dotspace .align-lbl{font:800 9px var(--mono);fill:var(--cyan);text-anchor:middle;letter-spacing:.1em}

/* Works with — logo strip under hero */
.logos-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--logos-bg);position:relative;z-index:2}
.logos-inner{padding:28px 24px !important;display:flex;flex-direction:column;gap:16px;align-items:center}
.logos-head{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);text-align:center}
.logos-row{display:flex;align-items:stretch;justify-content:center;gap:28px;flex-wrap:wrap;width:100%}
.logos-group{display:flex;flex-direction:column;gap:9px;align-items:center;min-width:180px}
.logos-cap{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);opacity:.7}
.logos-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.logos-list span{font:500 12px var(--sans);color:var(--text-2);padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface);transition:all .18s}
.logos-list span:hover{color:var(--text);border-color:var(--border-2);background:var(--surface-2)}
.logos-sep{width:1px;background:var(--border);align-self:stretch}
@media(max-width:760px){.logos-sep{display:none}.logos-row{gap:18px}}

/* rank list shown under each comparison svg */
.rank-list{list-style:none;margin:0 0 12px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rank-row{display:grid;grid-template-columns:24px 1fr auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--border);background:var(--surface-2);border-radius:8px;font:500 13px var(--sans);color:var(--text-2)}
.rank-row b{color:var(--text);font-weight:600}
.rank-row .rk{font:700 11px var(--mono);color:var(--text-3);text-align:center}
.rank-row .rk-tag{font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--border);background:var(--hover-1);color:var(--text-3)}
.rank-row .rk-tag-bad{color:var(--bad-text);border-color:var(--bad-border);background:var(--bad-bg)}
.rank-row .rk-tag-good{color:var(--cyan);border-color:var(--cyan-border);background:var(--cyan-bg-1)}
.rank-row .rk-score{font:600 12px var(--mono);color:var(--text-3);min-width:40px;text-align:right}
.rank-row .rk-score.good{color:var(--cyan)}
.rank-row.bad-row{border-color:var(--bad-border);background:var(--bad-bg)}
.rank-row.bad-row .rk{color:var(--bad-text)}
.rank-row.good-row{border-color:var(--cyan-border);background:var(--cyan-bg-1)}
.rank-row.good-row .rk{color:var(--cyan)}
.rank-row.dim{opacity:.55}

.viz-verdict{font:500 12.5px var(--sans);line-height:1.5;padding:10px 12px;border-radius:8px;color:var(--text-2)}
.viz-verdict b{color:var(--text);font-weight:700}
.viz-verdict.bad-verdict{background:var(--bad-bg);border:1px solid var(--bad-border);color:#fecaca}
.viz-verdict.bad-verdict b{color:var(--bad-text)}
.viz-verdict.good-verdict{background:var(--cyan-bg-1);border:1px solid var(--cyan-border);color:#a7f3d0}
.viz-verdict.good-verdict b{color:var(--cyan)}

@media (max-width: 880px){
  .viz-grid{grid-template-columns:1fr}
}