/* compare-kalodata: arranges landing-system pieces. The "two lenses" live in the illustrations only. */
.bespoke-compare-kalodata .table-wrap { border: 0; border-radius: 0; background: none; margin: 0; overflow: visible; }
.bespoke-compare-kalodata .kx-note { margin-top: 12px; }
.bespoke-compare-kalodata .kx-alt { font-size: 16px; line-height: 1.5; color: var(--ls-text); margin: -4px 0 0; }

/* verdict */
.bespoke-compare-kalodata .kx-verdict { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; align-items: start; }
.bespoke-compare-kalodata .kx-v-list { margin: 8px 0 0; padding-left: 20px; }
.bespoke-compare-kalodata .kx-v-list li { padding: 4px 0; line-height: 1.5; }
.bespoke-compare-kalodata .kx-hero-illo { margin: 0; }
.bespoke-compare-kalodata .kx-illo-l { font: 700 16px var(--ls-font); fill: var(--ls-ink); }
.bespoke-compare-kalodata .kx-caps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ls-text); }
.bespoke-compare-kalodata .kx-caps .ls-tag { display: table; margin-bottom: 6px; }

/* the bench */
.bespoke-compare-kalodata .kx-panel { display: grid; grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr); gap: 24px; margin-top: 36px; align-items: stretch; }
.bespoke-compare-kalodata .kx-view { display: flex; flex-direction: column; }
.bespoke-compare-kalodata .kx-view-h { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.bespoke-compare-kalodata .kx-view-h h3 { margin: 6px 0 0; }
.bespoke-compare-kalodata .kx-icon { width: 54px; height: 34px; flex: none; display: block; margin-bottom: 8px; }
.bespoke-compare-kalodata .kx-view-h .kx-icon { margin: 0; }
.bespoke-compare-kalodata .kx-group { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-blue-deep); margin: 10px 0 0; }
.bespoke-compare-kalodata .kx-rows { margin: 0 0 6px; }
.bespoke-compare-kalodata .kx-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ls-line); }
.bespoke-compare-kalodata .kx-rows > div:last-child { border-bottom: 0; }
.bespoke-compare-kalodata .kx-rows dt { font-size: 15px; line-height: 1.4; }
.bespoke-compare-kalodata .kx-rows dd { margin: 0; flex: none; text-align: right; font-weight: 700; font-size: 16px; color: var(--ls-ink); font-variant-numeric: tabular-nums; }
.bespoke-compare-kalodata .kx-blank { display: inline-block; height: 12px; border-radius: 6px; background: var(--ls-paper); border: 2px solid var(--ls-ink); vertical-align: middle; }
.bespoke-compare-kalodata .kx-w1 { width: 32px; } .bespoke-compare-kalodata .kx-w2 { width: 56px; } .bespoke-compare-kalodata .kx-w3 { width: 80px; }
.bespoke-compare-kalodata .kx-view .ls-source { margin-top: auto; padding-top: 10px; }
.bespoke-compare-kalodata .kx-specimen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.bespoke-compare-kalodata .kx-scrub { width: 100px; }
.bespoke-compare-kalodata .kx-specimen-name { font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--ls-ink); margin: 0 0 4px; }
.bespoke-compare-kalodata .kx-specimen .ls-small { margin: 0; }
.bespoke-compare-kalodata .kx-read { max-width: 820px; margin: 32px auto 0; }
.bespoke-compare-kalodata .kx-read .ls-tag { margin-right: 8px; }

/* charts */
.bespoke-compare-kalodata .kx-split { align-items: start; }
.bespoke-compare-kalodata .kx-fig { margin: 0; }
.bespoke-compare-kalodata .kx-chart { display: block; width: 100%; height: auto; }
.bespoke-compare-kalodata .kx-grid { stroke: var(--ls-line); stroke-width: 1; }
.bespoke-compare-kalodata .kx-tick { font: 16px var(--ls-font); fill: var(--ls-muted); }
.bespoke-compare-kalodata .kx-tick-strong { font-weight: 700; fill: var(--ls-ink); }
.bespoke-compare-kalodata .kx-bar { fill: var(--ls-blue); }
.bespoke-compare-kalodata .kx-bar-late { fill: var(--ls-blue-deep); }
.bespoke-compare-kalodata .kx-bar-peak { fill: var(--ls-peach-deep); }
.bespoke-compare-kalodata .kx-avg { stroke: var(--ls-peach-deep); stroke-width: 2; stroke-dasharray: 6 5; }
.bespoke-compare-kalodata .kx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--ls-text); margin: 8px 0 0; }
.bespoke-compare-kalodata .kx-li { display: inline-flex; align-items: center; gap: 8px; }
.bespoke-compare-kalodata .kx-key { display: inline-block; width: 22px; height: 10px; }
.bespoke-compare-kalodata .kx-key-avg { height: 0; border-top: 2px dashed var(--ls-peach-deep); }
.bespoke-compare-kalodata .kx-key-late { background: var(--ls-blue-deep); border-radius: 3px; }
.bespoke-compare-kalodata .kx-bars { list-style: none; margin: 0; padding: 0; }
.bespoke-compare-kalodata .kx-bars li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 0; }
.bespoke-compare-kalodata .kx-bn { font-size: 15px; line-height: 1.3; text-align: right; }
.bespoke-compare-kalodata .kx-bn small { display: block; font-size: 13px; color: var(--ls-muted); }
.bespoke-compare-kalodata .kx-bt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bespoke-compare-kalodata .kx-bw { display: block; min-width: 0; }
.bespoke-compare-kalodata .kx-b { display: block; height: 18px; min-width: 4px; border-radius: 9px; background: var(--ls-blue); }
.bespoke-compare-kalodata .is-hoto .kx-bn { font-weight: 700; color: var(--ls-ink); }
.bespoke-compare-kalodata .is-hoto .kx-b { background: var(--ls-peach-deep); }
.bespoke-compare-kalodata .kx-bt b { font-size: 15px; color: var(--ls-ink); font-variant-numeric: tabular-nums; }

/* venn */
.bespoke-compare-kalodata .kx-venn { position: relative; aspect-ratio: 100 / 62; display: grid; grid-template-columns: 37% 19% 37%; justify-content: space-between; align-items: center; margin-top: 36px; }
.bespoke-compare-kalodata .kx-venn-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bespoke-compare-kalodata .kx-venn-col { position: relative; z-index: 1; }
.bespoke-compare-kalodata .kx-venn-l { padding-left: 15%; }
.bespoke-compare-kalodata .kx-venn-r { padding-right: 15%; }
.bespoke-compare-kalodata .kx-venn-m { text-align: center; }
.bespoke-compare-kalodata .kx-venn ul { list-style: none; margin: 0; padding: 0; }
.bespoke-compare-kalodata .kx-venn li { font-size: 15.5px; line-height: 1.35; padding: 6px 0; color: var(--ls-ink); }
.bespoke-compare-kalodata .kx-venn-m li { font-size: 15px; font-weight: 600; }
.bespoke-compare-kalodata .kx-venn-l li::before, .bespoke-compare-kalodata .kx-venn-r li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-ink); margin-right: 9px; vertical-align: 2px; }

/* table */
.bespoke-compare-kalodata .kx-table .kx-rowh { font-weight: 700; color: var(--ls-ink); width: 22%; }

/* pricing */

.bespoke-compare-kalodata .kx-faq-wrap, .bespoke-compare-kalodata .kx-method { margin-left: auto; margin-right: auto; }
.bespoke-compare-kalodata .kx-sources { padding-left: 20px; }

@media (max-width: 960px) {
  .bespoke-compare-kalodata .kx-panel { grid-template-columns: 1fr; }
  .bespoke-compare-kalodata .kx-verdict { grid-template-columns: 1fr; }
  .bespoke-compare-kalodata .kx-specimen { order: -1; flex-direction: row; justify-content: flex-start; text-align: left; }
  .bespoke-compare-kalodata .kx-scrub { width: 56px; }
  .bespoke-compare-kalodata .kx-split-flip > .kx-fig { order: 2; }
  .bespoke-compare-kalodata .kx-venn { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
  .bespoke-compare-kalodata .kx-venn-bg { display: none; }
  .bespoke-compare-kalodata .kx-venn-col { border-radius: var(--ls-radius); padding: 22px; text-align: left; }
  .bespoke-compare-kalodata .kx-venn-l { background: var(--ls-blue-tint); }
  .bespoke-compare-kalodata .kx-venn-m { background: var(--ls-lavender); }
  .bespoke-compare-kalodata .kx-venn-r { background: var(--ls-peach-tint); }
}
@media (max-width: 640px) {
  .bespoke-compare-kalodata .kx-caps { grid-template-columns: 1fr; }
  .bespoke-compare-kalodata .kx-illo-l { display: none; }
  .bespoke-compare-kalodata .kx-tick { font-size: 26px; }
  .bespoke-compare-kalodata .kx-rows > div { align-items: flex-start; }
  .bespoke-compare-kalodata .kx-bars li { grid-template-columns: 1fr; gap: 4px; }
  .bespoke-compare-kalodata .kx-bn { text-align: left; }
  .bespoke-compare-kalodata .kx-bn small { display: inline; margin-left: 4px; }
  .bespoke-compare-kalodata .ls-table-wrap { border: 0; background: none; overflow: visible; }
  .bespoke-compare-kalodata .kx-table, .bespoke-compare-kalodata .kx-table tbody, .bespoke-compare-kalodata .kx-table tr, .bespoke-compare-kalodata .kx-table td { display: block; width: auto; }
  .bespoke-compare-kalodata .kx-table thead { display: none; }
  .bespoke-compare-kalodata .kx-table tr { background: var(--ls-paper); border: 1.5px solid var(--ls-line); border-radius: var(--ls-radius-sm); margin-bottom: 12px; overflow: hidden; }
  .bespoke-compare-kalodata .kx-table .kx-rowh { width: auto; background: var(--ls-cream); }
  .bespoke-compare-kalodata .kx-table td:nth-child(2)::before, .bespoke-compare-kalodata .kx-table td:nth-child(3)::before { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-muted); }
  .bespoke-compare-kalodata .kx-table td:nth-child(2)::before { content: 'TokConnect'; }
  .bespoke-compare-kalodata .kx-table td:nth-child(3)::before { content: 'Kalodata'; }
  .bespoke-compare-kalodata .kx-table tr:last-child td { border-bottom: 1px solid var(--ls-line); }
  .bespoke-compare-kalodata .kx-table tr td:last-child { border-bottom: 0; }
}
/* landing-system's main.bespoke :where(a) outranks .ls-btn; restore button text colours */
.bespoke-compare-kalodata a.ls-btn { color: #fff; text-decoration: none; }
.bespoke-compare-kalodata a.ls-btn--ghost, .bespoke-compare-kalodata a.ls-btn--blue{ color: var(--ls-ink); }
.bespoke-compare-kalodata blockquote.ls-prompt { margin: 0; }

.bespoke-compare-kalodata .kx-pricing-link { margin-top: 16px; font-size: 16px; }