/* Comparison and video-call guide pages (/jackbox-alternatives/, /kahoot-alternatives/, /games-to-play-on-teams/, /games-to-play-on-zoom/):
   hubs.css cards and bands, plus a hero action, two calm set-up cards, a small three-column table, plain "better choice" notes,
   no-materials tiles and a quiet sources-and-trademark line. No eyebrows, no coloured left borders. */
.hb[data-hub=party]{--hb-tint:#fdf0f4;--hb-tint2:#efeaff;--hb-accent:#a92f55;--hb-deep:#3a1430;--hb-soft:#f4d0dc}
.cp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0 0 4px}
.cp-acts .button{min-height:54px;padding:14px 26px;font-size:16px}
.cp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:16px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.cp .hb-short{padding-top:36px}
/* Two ways to play alongside a call */
.cp-setups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.cp-setups article{background:var(--hb-tint);border-radius:26px;padding:28px 30px 26px}
.cp-setups h3{margin:0 0 6px;font-size:23px}
.cp-for{font-size:15px;color:#4a4560;margin:0 0 16px}
.cp-setups ol{list-style:none;counter-reset:step;margin:0;padding:0;display:grid;gap:14px}
.cp-setups li{counter-increment:step;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.55;color:#2b2740}
.cp-setups li::before{content:counter(step);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--hb-soft);color:var(--hb-deep);font-weight:800;font-size:15px}
/* The comparison: small, simple, dated */
.cp-table-wrap{max-width:1040px}
.cp-table{width:100%;min-width:0;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.55;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
.cp-table caption{caption-side:bottom;text-align:left;font-size:14px;color:#5c5770;padding:12px 4px 0}
.cp-table th,.cp-table td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line);border-bottom:0;background:none;max-width:none}
.cp-table thead th{border-top:0;background:var(--hb-tint);font-size:15px;font-weight:800;color:var(--hb-deep)}
.cp-table tbody th{width:18%;font-weight:800;color:var(--hb-deep);font-size:15px}
.cp-table td{width:41%;color:#2f2b44}
.cp-table td:first-of-type{background:#fbfaff}
/* When the other product is the better choice: plain notes, two to a row */
.cp-better-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:1080px}
.cp-better-list li{border:1px solid var(--line);border-radius:22px;padding:22px 24px;background:#fff}
.cp-better-list h3{font-size:19px;margin:0 0 8px}
.cp-better-list p{font-size:15.5px;line-height:1.6;color:#3b3650}
.cp-notes{margin-top:28px;max-width:1040px;display:grid;gap:6px;font-size:13.5px;line-height:1.55;color:#5c5770}
.cp-notes p{margin:0}.cp-notes a{border-bottom:1px solid currentColor;overflow-wrap:anywhere}
/* What's current in the call app */
.cp-facts-body{max-width:820px;display:grid;gap:14px}
.cp-facts-body p{font-size:16.5px;line-height:1.65;color:#2f2b44}
/* No-materials ideas */
.hb-kind.cp-kind--talk{background:#ffefe8;border-color:#f2c3ad;color:#7a2f15}
.cp-quick-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cp-quick-item{background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 22px;display:flex;flex-direction:column;align-items:flex-start}
.cp-quick-item h3{margin:14px 0 8px;font-size:19px}
.cp-quick-item .hb-facts{margin-bottom:10px}
.cp-quick-item>p{font-size:15px;line-height:1.6;color:#3b3650;margin:0}
@media (max-width:1100px){.cp-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:960px){.cp-setups,.cp-better-list{grid-template-columns:1fr}}
@media (max-width:760px){
 .cp-acts .button{width:100%}
 .cp-setups article{padding:22px 20px;border-radius:22px}
 .cp-quick-grid{grid-template-columns:1fr;gap:14px}
 /* The table becomes one card per topic, each answer labelled */
 .cp-table,.cp-table tbody,.cp-table tr,.cp-table th,.cp-table td{display:block;width:auto}
 .cp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .cp-table tbody tr+tr{border-top:1px solid var(--line)}
 .cp-table tbody th{border-top:0;background:var(--hb-tint);padding:12px 16px;width:auto}
 .cp-table td{border-top:0;padding:10px 16px 12px}
 .cp-table td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:800;color:var(--hb-accent);margin-bottom:2px}
 .cp-table caption{display:block;padding:12px 16px 14px;border-top:1px solid var(--line)}
}