/* TokConnect vs Social Blade: layout and illustrations only.
   Type, colour, buttons, cards, tables and FAQ come from landing-system.css. */

.bespoke-compare-social-blade .sb-hero{padding-top:48px}
/* site-wide guide styles zero heading margins; restore the system's .5em gap */
.bespoke-compare-social-blade :is(h1,h2,h3){margin-bottom:.5em}
.bespoke-compare-social-blade .ls-table{margin:0}
/* the build wraps every table in .table-wrap; let .ls-table-wrap be the only frame */
.bespoke-compare-social-blade .ls-table-wrap > .table-wrap{margin:0;border:0;border-radius:0;background:none;overflow:visible}

/* ---------- house illustration: scoreboard and X-ray light box ---------- */
.bespoke-compare-social-blade .sb-illo{margin:0}
.bespoke-compare-social-blade .sb-illo figcaption{margin-top:14px}
.bespoke-compare-social-blade .sb-illo .o{stroke:var(--ls-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;vector-effect:non-scaling-stroke}
.bespoke-compare-social-blade .sb-illo .f-paper{fill:var(--ls-paper)}
.bespoke-compare-social-blade .sb-illo .f-cream{fill:var(--ls-cream)}
.bespoke-compare-social-blade .sb-illo .f-yellow{fill:var(--ls-yellow)}
.bespoke-compare-social-blade .sb-illo .f-peach{fill:var(--ls-peach)}
.bespoke-compare-social-blade .sb-illo .f-lav{fill:var(--ls-lavender)}
.bespoke-compare-social-blade .sb-illo .f-blue{fill:var(--ls-blue)}
.bespoke-compare-social-blade .sb-illo .f-bluetint{fill:var(--ls-blue-tint)}
.bespoke-compare-social-blade .sb-illo text{fill:var(--ls-ink);font-family:var(--ls-font)}
.bespoke-compare-social-blade .sb-illo .t-xs{font-size:11px;fill:var(--ls-muted)}
.bespoke-compare-social-blade .sb-illo .t-xs.t-ink{fill:var(--ls-ink)}
.bespoke-compare-social-blade .sb-illo .t-sm{font-size:14px}
.bespoke-compare-social-blade .sb-illo .t-md{font-size:17px}
.bespoke-compare-social-blade .sb-illo .t-lg{font-size:22px;font-weight:800;letter-spacing:-.02em}
.bespoke-compare-social-blade .sb-illo .t-b{font-weight:700}
.bespoke-compare-social-blade .sb-illo .bone{fill:var(--ls-paper)}
.bespoke-compare-social-blade .sb-illo .bone-hot{fill:var(--ls-yellow)}
.bespoke-compare-social-blade .sb-illo .spine{stroke:var(--ls-paper);stroke-width:2;stroke-linecap:round}

/* ---------- side A ---------- */
.bespoke-compare-social-blade .sb-stats{list-style:none;padding:0;margin:36px 0 0}
.bespoke-compare-social-blade .sb-prices{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:start;margin-top:48px}
.bespoke-compare-social-blade .sb-prices .ls-table-wrap{max-width:420px}

/* ---------- side B: figures ---------- */
.bespoke-compare-social-blade .sb-fig{margin:32px 0 0}
.bespoke-compare-social-blade .sb-fig .ls-tag{margin-bottom:14px}
.bespoke-compare-social-blade .sb-fig > p:not(.ls-source){max-width:720px}
.bespoke-compare-social-blade .sb-key{white-space:nowrap}
.bespoke-compare-social-blade .sb-key::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--ls-peach-deep);margin-right:6px;vertical-align:-1px}
.bespoke-compare-social-blade .sb-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.bespoke-compare-social-blade .sb-pair .sb-fig{height:calc(100% - 32px)}

/* chart rules: main series blue-deep, highlight peach-deep, gridlines line, labels 13px muted */
.bespoke-compare-social-blade .sb-chart,.bespoke-compare-social-blade .sb-strip{display:block;width:100%;height:auto;margin:20px 0 4px}
.bespoke-compare-social-blade .sb-chart--desk.sb-chart{max-width:1180px}
.bespoke-compare-social-blade .sb-chart--desk.sb-strip{max-width:600px}
.bespoke-compare-social-blade .sb-chart--mob{display:none}
.bespoke-compare-social-blade :is(.sb-chart,.sb-strip) .grid{stroke:var(--ls-line);stroke-width:1}
.bespoke-compare-social-blade :is(.sb-chart,.sb-strip) .axis{stroke:var(--ls-ink);stroke-width:1.5}
.bespoke-compare-social-blade :is(.sb-chart,.sb-strip) .lbl{font-family:var(--ls-font);font-size:13px;fill:var(--ls-muted)}
.bespoke-compare-social-blade :is(.sb-chart,.sb-strip) .lbl-ink{fill:var(--ls-ink);font-weight:700}
.bespoke-compare-social-blade .sb-chart .bar,.bespoke-compare-social-blade .sb-strip .dot{fill:var(--ls-blue-deep)}
.bespoke-compare-social-blade .sb-chart .bar.hot,.bespoke-compare-social-blade .sb-strip .dot.hot{fill:var(--ls-peach-deep)}
.bespoke-compare-social-blade .sb-strip .dot{stroke:var(--ls-paper);stroke-width:1.5}
.bespoke-compare-social-blade .sb-chart .bar:hover,.bespoke-compare-social-blade .sb-strip .dot:hover{fill:var(--ls-blue)}
.bespoke-compare-social-blade .sb-chart .med{stroke:var(--ls-ink);stroke-width:1.5;stroke-dasharray:5 4}

.bespoke-compare-social-blade .sb-readout{list-style:none;padding:0;margin:20px 0 0;gap:16px}
.bespoke-compare-social-blade .sb-readout b{font-size:30px}
.bespoke-compare-social-blade .sb-readout span{font-size:14px}
.bespoke-compare-social-blade .sb-comments{list-style:none;padding:0;margin:20px 0;display:grid;gap:10px}
.bespoke-compare-social-blade .sb-comments li{background:var(--ls-peach-tint);border-radius:var(--ls-radius-sm);padding:12px 16px;font-weight:700;color:var(--ls-ink);font-size:16px;width:fit-content;max-width:100%}
.bespoke-compare-social-blade .sb-comments li:nth-child(2){margin-left:24px}
.bespoke-compare-social-blade .sb-comments li:nth-child(3){margin-left:48px}
.bespoke-compare-social-blade .sb-search .sb-group th{background:var(--ls-blue-tint);color:var(--ls-blue-deep)}
.bespoke-compare-social-blade .sb-after{margin:20px 0 0}

/* ---------- tables with a TokConnect column ---------- */
.bespoke-compare-social-blade .ls-table th[scope="row"]{font-size:15px;font-weight:700;color:var(--ls-ink);text-transform:none;letter-spacing:0;background:transparent;border-bottom:1px solid var(--ls-line);padding:14px 16px;vertical-align:top;white-space:nowrap}
.bespoke-compare-social-blade .ls-table tr:last-child th[scope="row"]{border-bottom:0}
.bespoke-compare-social-blade .ls-table .sb-us{background:var(--ls-blue-tint)}
.bespoke-compare-social-blade .ls-table thead .sb-us{color:var(--ls-blue-deep)}
.bespoke-compare-social-blade .sb-box td{width:40%}

/* ---------- verdict, limits, cost ---------- */
.bespoke-compare-social-blade .sb-pick{margin-top:36px}
.bespoke-compare-social-blade .sb-pick .ls-tag{margin-bottom:14px}
.bespoke-compare-social-blade .sb-pick ul{margin:0;padding-left:20px;display:grid;gap:8px}
.bespoke-compare-social-blade .sb-both{margin:28px 0 0;max-width:760px}
.bespoke-compare-social-blade .sb-limits{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:start}
.bespoke-compare-social-blade .sb-calls{padding:28px}
.bespoke-compare-social-blade .sb-calls li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-height:40px}
.bespoke-compare-social-blade .sb-calls li span{color:var(--ls-muted);font-size:16px}
.bespoke-compare-social-blade .sb-faq{max-width:860px}

@media (max-width:960px){
  .bespoke-compare-social-blade .sb-prices,.bespoke-compare-social-blade .sb-pair,.bespoke-compare-social-blade .sb-limits{grid-template-columns:1fr;gap:24px}
  .bespoke-compare-social-blade .sb-pair .sb-fig{height:auto}
}
@media (max-width:640px){
  .bespoke-compare-social-blade .sb-hero{padding-top:32px}
  .bespoke-compare-social-blade .sb-chart--desk{display:none}
  .bespoke-compare-social-blade .sb-chart--mob{display:block}
  .bespoke-compare-social-blade .sb-readout{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bespoke-compare-social-blade .sb-readout b{font-size:24px}
  .bespoke-compare-social-blade .sb-readout span{font-size:13px}
  .bespoke-compare-social-blade .sb-comments li:nth-child(2){margin-left:12px}
  .bespoke-compare-social-blade .sb-comments li:nth-child(3){margin-left:24px}
  .bespoke-compare-social-blade .ls-table th[scope="row"]{white-space:normal}
  .bespoke-compare-social-blade .sb-search :is(th,td){padding:12px 10px}
  .bespoke-compare-social-blade .sb-search{font-size:14px}
  /* comparison tables stack into one block per line */
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) thead{display:none}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) :is(tbody,tr,th,td){display:block;width:auto}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) tr{border-bottom:1.5px solid var(--ls-line)}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) tr:last-child{border-bottom:0}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) th[scope="row"]{border:0;padding:16px 16px 6px;font-size:17px}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) td{border:0;padding:6px 16px 12px}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) td.sb-us{margin:0 10px 12px;border-radius:12px;padding:10px 12px}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ls-muted);margin-bottom:2px}
  .bespoke-compare-social-blade :is(.sb-box,.sb-gaps) td.sb-us::before{color:var(--ls-blue-deep)}
}