/* app-compare.css — /hosting-comparison hub + /hosting-comparison/<slug>-alternative pages.
   Built on the shared kit (opener, band, lede, pane, pill, chip, ledger, qa, closer); classes here start with cm-. */

/* ---- logo tile (initials underneath, favicon on top when it loads) ---- */
.cm-logo{position:relative;display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));box-shadow:0 0 0 1px var(--edge-2)}
.cm-logo b{font:600 14px/1 var(--ff-mono);letter-spacing:.02em;color:var(--ink-2)}
.cm-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:9px;background:#fff;opacity:0;transition:opacity .25s}
.cm-logo img.ok{opacity:1}
.cm-logo--lg{width:60px;height:60px;border-radius:16px}
.cm-logo--lg b{font-size:18px}
.cm-logo--lg img{padding:12px}
.cm-logo--us{background:#0b0d12}
.cm-logo--us img{background:transparent;padding:10px;opacity:1}

/* ---- opener ---- */
.cm-open h1{max-width:17ch}
.cm-versus{display:grid;gap:0;padding:0;overflow:hidden}
.cm-side{display:flex;align-items:center;gap:16px;padding:26px 28px;position:relative}
.cm-side b{display:block;font-size:20px;font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.cm-side small{display:block;margin-top:5px;font:500 12px/1.3 var(--ff-mono);color:var(--ink-3)}
.cm-side__cat{margin-inline-start:auto;align-self:flex-start}
.cm-vs{position:relative;height:1px;background:var(--edge)}
.cm-vs span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:var(--slate);border:1px solid var(--edge-2);font:600 11px/1 var(--ff-mono);letter-spacing:.14em;color:var(--ice)}

/* hub: stat panel */
.cm-panel{display:grid;padding:0;overflow:hidden}
.cm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cm-stat{padding:22px 26px;border-bottom:1px solid var(--edge);border-inline-end:1px solid var(--edge)}
.cm-stat:nth-child(2n){border-inline-end:0}
.cm-stat b{display:block;font:600 clamp(26px,3.2vw,36px)/1 var(--ff-mono);letter-spacing:-.04em;color:var(--ink)}
.cm-stat span{display:block;margin-top:9px;font:500 11px/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cm-panel ul{padding:20px 26px;display:grid;gap:12px;list-style:none;margin:0}
.cm-panel li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.cm-panel li .ic{flex:none;width:17px;height:17px;margin-top:3px;color:var(--mint);stroke-width:2.6}

/* ---- hub: search, chips, grid ---- */
.cm-tools{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;margin-bottom:28px}
.cm-search{position:relative;display:block;flex:1 1 280px;max-width:420px}
.cm-search .ic{position:absolute;inset-inline-start:16px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.cm-search input{width:100%;height:46px;padding:0 18px;padding-inline-start:44px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--edge-2);color:var(--ink);font:inherit;font-size:15px;outline:0;transition:border-color .2s,background .2s,box-shadow .2s}
.cm-search input::placeholder{color:var(--ink-4)}
.cm-search input:focus{border-color:rgba(168,220,255,.5);background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(108,196,255,.14)}
.cm-chips{display:flex;flex-wrap:wrap;gap:8px}
.cm-chips .chip{cursor:pointer;font-family:inherit}
.cm-chips .chip em{font-style:normal;margin-inline-start:8px;font:500 11px/1 var(--ff-mono);opacity:.6}

.cm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.cm-card{display:flex;flex-direction:column;gap:14px;height:100%;--pane-pad:22px}
.cm-card[hidden]{display:none}
.cm-card__top{display:flex;align-items:center;gap:14px}
.cm-card__top b{display:block;font-size:17.5px;font-weight:650;letter-spacing:-.025em;color:var(--ink)}
.cm-card__top small{display:block;margin-top:4px;font:500 11.5px/1.3 var(--ff-mono);color:var(--ink-3)}
.cm-card__cat{margin-inline-start:auto;align-self:flex-start;font:500 10px/1 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.cm-card p{flex:1;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.cm-card__go{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ice);padding-top:14px;border-top:1px solid var(--edge)}
.cm-card__go .ic{width:15px;height:15px;transition:transform .3s var(--ease)}
.cm-card:hover .cm-card__go .ic{transform:translateX(4px)}
html[dir=rtl] .cm-card__go .ic{transform:scaleX(-1)}
html[dir=rtl] .cm-card:hover .cm-card__go .ic{transform:scaleX(-1) translateX(4px)}
.cm-empty{margin-top:28px;padding:28px;text-align:center;color:var(--ink-3);border:1px dashed var(--edge-2);border-radius:var(--r-md)}

/* ---- matrix / feature table ---- */
.cm-table td:first-child a{color:var(--ink)}
.cm-table td:first-child a:hover{color:var(--ice)}
.cm-table td:first-child{white-space:normal}
.cm-table td{font-size:14px}
.cm-table th.cm-us,.cm-table td.cm-us{background:rgba(116,240,196,.045)}
.cm-table td.cm-us{color:var(--ink);font-weight:550}
.cm-table td.cm-us .ic{width:15px;height:15px;margin-inline-end:9px;vertical-align:-2px;color:var(--mint);stroke-width:2.6}
.cm-table tr.cm-me td{background:rgba(116,240,196,.06);color:var(--ink)}
.cm-table tr.cm-me td:first-child a{font-weight:650}
.cm-table tr.cm-grp td{padding:11px 22px;background:rgba(255,255,255,.035);font:500 11px/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cm-table tr.cm-grp:hover{background:none}
.cm-note{margin-top:18px;font-size:13px;line-height:1.6;color:var(--ink-3);max-width:80ch}

/* ---- provider page ---- */
.cm-wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.cm-win{display:flex;flex-direction:column;gap:16px;--pane-pad:26px}
.cm-win p{font-size:16px;line-height:1.65;color:var(--ink-2)}
.cm-win__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(116,240,196,.1);border:1px solid rgba(116,240,196,.3);color:var(--mint)}
.cm-win__ic .ic{width:18px;height:18px;stroke-width:2.6}

.cm-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--edge-2);margin-bottom:28px}
.cm-key{padding:22px 24px;border-inline-end:1px solid var(--edge)}
.cm-key:last-child{border-inline-end:0}
.cm-key b{display:block;font:600 clamp(22px,2.6vw,30px)/1 var(--ff-mono);letter-spacing:-.04em;color:var(--ink)}
.cm-key span{display:block;margin-top:9px;font:500 11px/1.3 var(--ff-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.cm-verdict{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.cm-verdict h3{display:flex;align-items:center;gap:11px;font-size:18px;letter-spacing:-.02em;margin-bottom:12px}
.cm-verdict p{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.cm-pick{--pane-pad:28px}
.cm-stay{--pane-pad:28px}
.cm-dot{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--edge-3);background:rgba(255,255,255,.05)}
.cm-dot--ok{border-color:rgba(116,240,196,.4);background:rgba(116,240,196,.12);color:var(--mint)}
.cm-dot .ic{width:14px;height:14px;stroke-width:2.8}
.cm-fair{margin-top:clamp(14px,1.8vw,22px);--pane-pad:22px 26px}
.cm-fair strong{display:block;font-size:15px;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.cm-fair p{font-size:14.5px;line-height:1.65;color:var(--ink-3)}

.lede__link{display:inline-flex;align-items:center;gap:8px;align-self:flex-end;font-size:14.5px;font-weight:600;color:var(--ice);white-space:nowrap}
.lede__link .ic{width:15px;height:15px}

/* ---- responsive ---- */
@media(max-width:980px){
  .cm-grid,.cm-wins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-wins .cm-win:last-child{grid-column:1/-1}
}
@media(max-width:720px){
  .cm-grid,.cm-wins,.cm-verdict{grid-template-columns:minmax(0,1fr)}
  .cm-wins .cm-win:last-child{grid-column:auto}
  .cm-keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-key:nth-child(2){border-inline-end:0}
  .cm-key:nth-child(-n+2){border-bottom:1px solid var(--edge)}
  .cm-search{max-width:none}
  .cm-side{padding:22px}
  .cm-table tr.cm-grp td{display:block;padding:10px 16px;text-align:start}
  .cm-table tr.cm-grp td::before{display:none}
  .cm-table td.cm-us{background:none}
}