/* ============================================================
   Coindaily - Exchange comparison template  (/compare/<a>-vs-<b>/)
   Generated pages: scripts/build-compare.py. Do not hand-edit the HTML.
   Prefix: .cx-*   Depends on styles.css tokens + .panel / .sec-title / .faq.
   ============================================================ */

/* ---------- hero ---------- */
.cx-hero { padding: 26px 0 2px; }
.cx-hero h1 { margin-top: 15px; font-size: 34px; font-weight: 600; letter-spacing: -.025em; color: var(--tx-hi); line-height: 1.08; }
.cx-hero h1 .vs { color: var(--tx-faint); font-weight: 400; padding: 0 4px; }
.cx-dek { font-size: 14.5px; color: var(--tx-mid); line-height: 1.68; max-width: 830px; margin-top: 11px; }
.cx-byline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 13px;
  font-family: var(--mono); font-size: 10.5px; color: var(--tx-dim); }
.cx-byline i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); display: inline-block; }
.cx-byline b { color: var(--tx-mid); font-weight: 600; }
.cx-byline .sep { color: var(--tx-faint); }

/* ---------- hero calls to action ---------- */
.cx-gos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 17px; }
.cx-go { display: inline-flex; align-items: center; gap: 10px; background: var(--panel);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 15px 9px 12px;
  transition: .15s; position: relative; overflow: hidden; }
.cx-go::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--brand, var(--amber)); opacity: .8; }
.cx-go:hover { border-color: rgba(255,255,255,.2); transform: translateY(-1px);
  background: var(--panel-2); }
.cx-go img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.cx-go b { display: block; font-size: 13px; font-weight: 600; color: var(--tx-hi); line-height: 1.25; }
.cx-go i { display: block; font-family: var(--mono); font-style: normal; font-size: 10px;
  color: var(--tx-dim); margin-top: 1px; }
.cx-go svg { color: var(--tx-faint); margin-left: 2px; transition: color .15s; }
.cx-go:hover svg { color: var(--amber); }
.cx-go-note { font-size: 10.5px; color: var(--tx-faint); line-height: 1.5; max-width: 300px; }

/* ---------- head-to-head board ---------- */
.cx-board { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  background: var(--panel); margin: 22px 0 16px; }

/* One band per side: identity, chips and score in a column, homepage shot beside
   it. Merged from what used to be two rows so the shot can sit at its natural
   3:2 instead of a cropped letterbox. */
.cx-heads { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: stretch;
  border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, #131418, var(--panel)); }
.cx-head { display: flex; align-items: center; gap: 20px; padding: 16px 20px; min-width: 0; }
.cx-head.b { flex-direction: row-reverse; text-align: right; }
.cx-head-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }

.cx-head-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cx-head.b .cx-head-id { flex-direction: row-reverse; }
.cx-head .cx-logo { width: 44px; height: 44px; border-radius: 12px; background: #16171b;
  border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cx-head .cx-logo img { width: 27px; height: 27px; object-fit: contain; }
.cx-head .nm { display: block; font-size: 18px; font-weight: 600; color: var(--tx-hi);
  letter-spacing: -.02em; line-height: 1.15; transition: color .14s; }
.cx-head .nm:hover { color: var(--amber); }
.cx-head .sb { display: block; font-size: 11.5px; color: var(--tx-dim); margin-top: 3px; line-height: 1.45; }

.cx-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.cx-head.b .cx-chips { justify-content: flex-end; }
.cx-chip { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.cx-chip.good { color: var(--up); background: var(--up-bg); }
.cx-chip.warn { color: var(--amber); background: rgba(201,154,75,.12); }
.cx-chip.bad { color: var(--down); background: var(--down-bg); }
.cx-chip.plain { color: var(--tx-mid); background: rgba(255,255,255,.05); }

/* The score carries by size and tabular mono, not by decoration. It had a
   border, a fill, an amber tint, an icon and a delta badge stacked on one
   number, which is ornament standing in for hierarchy. Both sides read the
   same: two numbers next to each other is the comparison, and the pillars
   below carry the nuance a single figure cannot. */
.cx-score { margin-top: 3px; }
.cx-score .k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-dim); line-height: 1; margin-bottom: 7px; }
.cx-score .v { display: block; font-family: var(--mono); font-size: 30px; font-weight: 600;
  color: var(--tx-hi); line-height: 1; letter-spacing: -.02em; }
.cx-score .v small { font-size: 12px; color: var(--tx-faint); font-weight: 400; letter-spacing: 0; }

.cx-vs { display: flex; align-items: center; justify-content: center;
  border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); background: var(--bg-2); }
.cx-vs span { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--tx-faint); }

/* homepage shot at its native 3:2, cropped from the top so you see the fold */
.cx-shot { flex: 0 0 auto; width: 200px; display: block; border: 1px solid var(--hairline);
  border-radius: 8px; overflow: hidden; background: #0C1016; transition: .15s; }
.cx-shot:hover { border-color: rgba(255,255,255,.2); transform: translateY(-1px); }
.cx-shot .bar { display: flex; align-items: center; gap: 4px; padding: 4px 7px;
  background: var(--panel-2); border-bottom: 1px solid var(--hairline); }
.cx-shot .bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.13); flex-shrink: 0; }
.cx-shot .bar .u { flex: 1; min-width: 0; margin-left: 4px; padding: 1px 7px; border-radius: 4px;
  background: rgba(255,255,255,.04); font-family: var(--mono); font-size: 8.5px; color: var(--tx-faint);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-shot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: top; }
.cx-shot:hover img { opacity: .92; }

/* pillar bars */
.cx-pillars { padding: 6px 0 4px; }
.cx-pillar { display: grid; grid-template-columns: 1fr 172px 1fr; align-items: center; gap: 0;
  padding: 11px 20px; border-bottom: 1px solid rgba(255,255,255,.04); }
.cx-pillar:last-child { border-bottom: 0; }
.cx-pillar:hover { background: rgba(255,255,255,.014); }

.cx-side { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cx-side.a { flex-direction: row-reverse; }
.cx-track { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,.045); overflow: hidden; display: flex; }
.cx-side.a .cx-track { justify-content: flex-end; }
.cx-fill { height: 100%; border-radius: 4px; background: var(--tx-faint); transition: width .5s cubic-bezier(.2,.7,.3,1); }
.cx-side.win .cx-fill { background: var(--amber); }
.cx-num { font-family: var(--mono); font-size: 13.5px; font-weight: 600; color: var(--tx-mid); width: 26px; text-align: right; flex-shrink: 0; }
.cx-side.b .cx-num { text-align: left; }
.cx-side.win .cx-num { color: var(--tx-hi); }

.cx-plabel { text-align: center; padding: 0 12px; }
.cx-plabel b { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx); letter-spacing: -.01em; }
.cx-plabel span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-faint); margin-top: 3px; transition: color .14s; }
.cx-plabel { cursor: pointer; }
.cx-plabel:hover span, .cx-pillar.open .cx-plabel span { color: var(--amber); }
.cx-pillar.open .cx-plabel span::after { content: " ▴"; }
.cx-plabel span::after { content: " ▾"; }
.cx-plabel:focus-visible { outline: 1px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

/* pillar evidence drawer */
.cx-why { grid-column: 1 / -1; display: none; gap: 26px; padding: 4px 0 6px; }
.cx-pillar.open .cx-why { display: grid; grid-template-columns: 1fr 1fr; }
.cx-why ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.cx-why li { display: flex; gap: 8px; font-size: 11.5px; color: var(--tx-dim); line-height: 1.5; }
.cx-why li::before { content: "·"; color: var(--tx-faint); flex-shrink: 0; }
.cx-why .h { font-family: var(--mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx-faint); margin-bottom: 6px; }
.cx-why-b { text-align: right; }
.cx-why-b li { flex-direction: row-reverse; }

.cx-tally { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--hairline); background: var(--bg-2);
  font-size: 12px; color: var(--tx-dim); line-height: 1.55; }
.cx-tally b { color: var(--tx-hi); font-weight: 600; }
.cx-tally .cx-expand { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tx-mid); border: 1px solid var(--hairline); border-radius: 6px; padding: 5px 11px;
  background: none; white-space: nowrap; transition: .14s; }
.cx-tally .cx-expand:hover { color: var(--amber); border-color: var(--amber-dim); }

/* ---------- lens note ---------- */
.cx-lens { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--hairline);
  border-left: 2px solid var(--amber-dim); border-radius: 10px; background: rgba(201,154,75,.035);
  padding: 12px 16px; margin-bottom: 26px; font-size: 12px; color: var(--tx-mid); line-height: 1.65; }
.cx-lens b { color: var(--tx); }
.cx-lens a { color: var(--amber); }

/* ---------- cost calculator ---------- */
.cx-calc { border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel); overflow: hidden; margin-bottom: 12px; }
.cx-calc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--hairline); }
.cx-calc-top h3 { font-size: 15.5px; font-weight: 700; color: var(--tx-hi); letter-spacing: -.015em; margin-bottom: 3px; }
.cx-calc-top p { font-size: 11.5px; color: var(--tx-dim); margin: 0; line-height: 1.55; max-width: 560px; }

.cx-inputs { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cx-input { display: flex; flex-direction: column; gap: 5px; }
.cx-input .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-dim); }
.cx-amt { display: flex; align-items: center; background: #0C1016; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 0 11px; height: 34px; }
.cx-amt span { font-family: var(--mono); font-size: 13px; color: var(--tx-dim); }
.cx-amt input { width: 92px; background: none; border: 0; color: var(--tx-hi); font-family: var(--mono);
  font-size: 14px; font-weight: 600; padding: 0 0 0 4px; outline: none; -moz-appearance: textfield; }
.cx-amt input::-webkit-outer-spin-button, .cx-amt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cx-amt:focus-within { border-color: rgba(201,154,75,.5); }

.cx-seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 7px; overflow: hidden; height: 34px; }
.cx-seg button { padding: 0 13px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em;
  color: var(--tx-dim); background: none; transition: .12s; white-space: nowrap; }
.cx-seg button + button { border-left: 1px solid var(--hairline); }
.cx-seg button.on { background: var(--amber); color: #100B02; font-weight: 600; }
.cx-seg button:not(.on):hover { color: var(--tx); }

/* routes: one dense table, four rows. Prose lives in the expander so the
   block stays scannable; the crossing-cost column keeps the honest number
   visible without it. */
.cx-rts { border-top: 1px solid var(--hairline); }
.cx-rts-hd, .cx-rt-r { display: grid; align-items: center;
  grid-template-columns: minmax(0,1.45fr) 92px 104px 104px 74px 92px; gap: 12px; }
.cx-rts-hd { padding: 8px 20px; background: var(--bg-2); border-bottom: 1px solid var(--hairline); }
.cx-rts-hd span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-dim); }
.cx-rts-hd span:not(:first-child), .cx-rt-r > span:not(.cx-rt-nm) { text-align: right; }

.cx-rt { border-bottom: 1px solid rgba(255,255,255,.04); }
.cx-rt:last-child { border-bottom: 0; }
.cx-rt.best { background: rgba(79,158,124,.045); box-shadow: inset 2px 0 0 var(--up); }
.cx-rt-r { width: 100%; padding: 11px 20px; background: none; border: 0; cursor: pointer;
  text-align: left; font: inherit; color: inherit; transition: background .13s; }
.cx-rt-r:hover { background: rgba(255,255,255,.02); }
.cx-rt-r:focus-visible { outline: 1px solid var(--amber); outline-offset: -2px; }

.cx-rt-nm { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cx-rt-nm > img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.cx-rt-nm > span:first-of-type { min-width: 0; }
.cx-rt-nm b { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx-hi); line-height: 1.25; }
.cx-rt-nm i { display: block; font-style: normal; font-size: 11px; color: var(--tx-dim);
  line-height: 1.35; margin-top: 1px; }
.cx-rt-tags { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.cx-rt-flag, .cx-rt-def { font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.cx-rt-flag { color: var(--up); background: var(--up-bg); }
.cx-rt-def { color: var(--tx-faint); background: rgba(255,255,255,.045); }
.cx-rt-caret { color: var(--tx-faint); flex-shrink: 0; transition: transform .16s, color .16s; }
.cx-rt-r:hover .cx-rt-caret { color: var(--amber); }
.cx-rt.open .cx-rt-caret { transform: rotate(180deg); color: var(--amber); }

.cx-rt-fee, .cx-rt-conv, .cx-rt-cross, .cx-rt-all, .cx-rt-cost { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cx-rt-fee, .cx-rt-conv, .cx-rt-cross { font-size: 12px; color: var(--tx-mid); }
/* the per-cell caption is what stops three percentages reading as one number */
.cx-rt-fee i, .cx-rt-conv i { display: block; font-style: normal; font-family: var(--sans);
  font-size: 9.5px; color: var(--tx-faint); line-height: 1.35; margin-top: 2px; }
.cx-rt-conv.nil, .cx-rt-conv.nil i { color: var(--up); }
/* modelled, not measured: the one number here we cannot verify from a public book */
.cx-rt-conv.modelled { color: var(--amber); border-bottom: 1px dotted rgba(201,154,75,.45);
  display: inline-block; padding-bottom: 1px; }
.cx-rt-conv.modelled i { color: var(--tx-faint); }
.cx-rt-cross.heavy { color: var(--amber); }
.cx-rt-cross.blocked { color: var(--down); }
.cx-rt-block { color: var(--down) !important; }
.cx-rt-block b { color: var(--down) !important; }
.cx-rt-all { font-size: 12.5px; font-weight: 600; color: var(--tx); }
.cx-rt-cost { font-size: 15px; font-weight: 600; color: var(--tx-hi); }
.cx-rt.best .cx-rt-cost, .cx-rt.best .cx-rt-all { color: var(--up); }

.cx-rt-why { display: none; padding: 0 20px 13px 46px; }
.cx-rt.open .cx-rt-why { display: block; }
.cx-rt-why p { font-size: 11.5px; color: var(--tx-dim); line-height: 1.6; margin-bottom: 5px; max-width: 780px; }
.cx-rt-why p:last-child { margin-bottom: 0; }
.cx-rt-why b { color: var(--tx-mid); font-weight: 600; }

.cx-calc-out { padding: 11px 20px; border-top: 1px solid var(--hairline); background: var(--bg-2);
  font-size: 12.5px; color: var(--tx); line-height: 1.65; }
.cx-calc-out b { color: var(--tx-hi); }
.cx-calc-out .num { color: var(--amber); }

/* depth curve: the evidence for the crossing column, on a shared size axis so
   the gap between the venues is read along a line, not across two cards */
.cx-curve { border-top: 1px solid var(--hairline); padding: 12px 20px 14px; }
.cx-curve-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.cx-curve-h h4 { font-size: 12.5px; font-weight: 700; color: var(--tx-hi); letter-spacing: -.01em; }
.cx-curve-h span { font-size: 10.5px; color: var(--tx-faint); line-height: 1.5; }

.cx-cv { border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.cx-cv-row { display: grid; grid-template-columns: minmax(190px,1.9fr) 76px 80px repeat(6, minmax(0,1fr));
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); }
.cx-cv-row:last-child { border-bottom: 0; }
.cx-cv-row > span { padding: 7px 10px; text-align: right; font-family: var(--mono);
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--tx-mid); }
.cx-cv-row > .nm { display: flex; align-items: center; gap: 6px; text-align: left;
  font-family: var(--sans); min-width: 0; overflow: hidden; }
.cx-cv-row > .nm img { width: 15px; height: 15px; object-fit: contain; flex-shrink: 0; }
.cx-cv-row > .nm b { font-size: 12px; font-weight: 600; color: var(--tx-hi); white-space: nowrap; }
.cx-cv-row > .nm i { font-style: normal; font-family: var(--mono); font-size: 9.5px;
  color: var(--tx-faint); white-space: nowrap; }
.cx-cv-row > .nm em { font-style: normal; font-family: var(--mono); font-size: 8px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
  white-space: nowrap; color: var(--up); background: var(--up-bg); }
.cx-cv-row.thin > .nm em { color: var(--amber); background: rgba(201,154,75,.12); }
.cx-cv-row > .st { color: var(--tx-hi); font-weight: 600; }
.cx-cv-row.thin > .st, .cx-cv-row.thin > span[data-size] { color: var(--amber); }
.cx-cv-row > .st.warnv { color: var(--down); }
/* a size this book cannot honestly price: never dressed up as a number */
.cx-cv-row > span[data-size].blocked { color: var(--down); background: rgba(190,94,108,.07); }
.cx-curve-h span b { color: var(--tx-mid); }
.cx-curve-h span i { font-style: normal; color: var(--down); }
.cx-cv-row.hd { background: var(--bg-2); }
.cx-cv-row.hd > span { font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx-dim); font-weight: 400; }
.cx-cv-row.hd > .nm { font-family: var(--mono); }
/* the column nearest the current trade size, marked by compare.js */
.cx-cv-row > span.on { background: rgba(201,154,75,.09); color: var(--tx-hi); }
.cx-cv-row.hd > span.on { color: var(--amber); }

.cx-calc-foot { padding: 11px 20px; border-top: 1px solid var(--hairline); background: var(--bg-2);
  font-size: 10.5px; color: var(--tx-dim); line-height: 1.6; }
.cx-calc-foot a { color: var(--amber); }

/* ---------- CoinSpot Markets, per pair ---------- */
/* The honest version of "0.1% on 16 coins". Green/amber/dim states rather than
   a wall of decimals: the reader needs to know which pairs the cheap route
   works on, not to compare 16 numbers. */
.cx-mk { border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel);
  overflow: hidden; margin-bottom: 26px; }
.cx-mk-top { display: flex; align-items: center; justify-content: space-between; gap: 22px;
  flex-wrap: wrap; padding: 15px 20px 14px; border-bottom: 1px solid var(--hairline); }
.cx-mk-top p { font-size: 12.5px; color: var(--tx-mid); line-height: 1.6; margin: 0; max-width: 640px; }
.cx-mk-top p b { color: var(--tx-hi); }
.cx-mk-score { display: flex; gap: 9px; }
.cx-mk-score > div { border: 1px solid var(--hairline); border-radius: 9px; padding: 8px 13px;
  text-align: center; min-width: 92px; }
.cx-mk-score b { display: block; font-family: var(--mono); font-size: 19px; font-weight: 600; line-height: 1.1; }
.cx-mk-score span { display: block; font-size: 9.5px; color: var(--tx-dim); margin-top: 3px; line-height: 1.35; }
.cx-mk-score .ok b { color: var(--up); }
.cx-mk-score .ok { background: rgba(79,158,124,.06); border-color: rgba(79,158,124,.22); }
.cx-mk-score .bad b { color: var(--down); }
.cx-mk-score .bad { background: rgba(190,94,108,.06); border-color: rgba(190,94,108,.22); }
.cx-mk-score .none b { color: var(--tx-faint); }

.cx-mk-row { display: grid; grid-template-columns: 74px repeat(4, minmax(0,1fr)) 168px;
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); }
.cx-mk-row:last-child { border-bottom: 0; }
.cx-mk-row > span { padding: 8px 12px; font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; text-align: right; }
.cx-mk-row > .c { text-align: left; font-size: 12px; font-weight: 600; color: var(--tx-hi); }
.cx-mk-row > .v { color: var(--tx); }
.cx-mk-row > .v.dim { color: var(--tx-dim); }
.cx-mk-row > .tag { text-align: left; font-size: 10px; letter-spacing: .04em; color: var(--tx-dim); }
.cx-mk-row.hd { background: var(--bg-2); }
.cx-mk-row.hd > span { font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx-dim); font-weight: 400; }
.cx-mk-row.ok { box-shadow: inset 2px 0 0 var(--up); }
.cx-mk-row.ok > .v, .cx-mk-row.ok > .tag { color: var(--up); }
.cx-mk-row.ok > .v.dim { color: var(--tx-dim); }
.cx-mk-row.bad { box-shadow: inset 2px 0 0 var(--down); background: rgba(190,94,108,.028); }
.cx-mk-row.bad > .v, .cx-mk-row.bad > .tag { color: var(--down); }
.cx-mk-row.bad > .v.dim { color: var(--tx-dim); }
.cx-mk-row.none { box-shadow: inset 2px 0 0 var(--tx-faint); }
.cx-mk-row.none > span { color: var(--tx-faint); }
.cx-mk-foot { padding: 11px 20px; border-top: 1px solid var(--hairline); background: var(--bg-2);
  font-size: 10.5px; color: var(--tx-dim); line-height: 1.6; }
.cx-mk-foot b { color: var(--tx-mid); }

/* ---------- choose-if cards ---------- */
.cx-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.cx-cho { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 19px 18px;
  display: flex; flex-direction: column; }
.cx-cho-h { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; margin-bottom: 13px;
  border-bottom: 1px solid var(--hairline); }
.cx-cho-h .cx-logo { width: 34px; height: 34px; border-radius: 10px; background: #16171b; border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cx-cho-h .cx-logo img { width: 21px; height: 21px; object-fit: contain; }
.cx-cho-h .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-dim); }
.cx-cho-h .nm { font-size: 15.5px; font-weight: 600; color: var(--tx-hi); letter-spacing: -.015em; line-height: 1.2; }
.cx-cho ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cx-cho li { display: flex; gap: 10px; font-size: 12.5px; color: var(--tx); line-height: 1.55; }
.cx-cho li::before { content: "✓"; color: var(--up); font-weight: 700; flex-shrink: 0; font-size: 11px; margin-top: 1px; }
.cx-watch { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.cx-watch .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tx-faint); margin-bottom: 8px; }
.cx-watch li::before { content: "!"; color: var(--amber); }
.cx-watch li { color: var(--tx-mid); font-size: 12px; }
.cx-cho-cta { margin-top: auto; padding-top: 16px; }
.cx-cho-cta a { display: block; text-align: center; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 9px 14px; font-size: 12.5px; font-weight: 600; color: var(--tx); transition: .14s; }
.cx-cho-cta a:hover { border-color: var(--amber-dim); color: var(--amber); }

/* ---------- key differences ---------- */
.cx-diffs { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--panel); margin-bottom: 26px; }
.cx-diff-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  border-bottom: 1px solid rgba(255,255,255,.045); }
.cx-diff-row:last-child { border-bottom: 0; }
.cx-diff-row.hd { background: var(--bg-2); }
.cx-diff-row.hd > div { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-dim); padding: 9px 16px; }
.cx-diff-row > div { padding: 12px 16px; min-width: 0; }
.cx-diff-row > div + div { border-left: 1px solid rgba(255,255,255,.045); }
.cx-diff-k b { display: block; font-size: 12.5px; font-weight: 600; color: var(--tx); line-height: 1.35; }
.cx-diff-k span { display: block; font-size: 11px; color: var(--tx-dim); margin-top: 3px; line-height: 1.45; }
.cx-diff-v { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--tx-hi); line-height: 1.4; }
.cx-diff-v small { display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 400; color: var(--tx-dim); margin-top: 3px; line-height: 1.45; }
.cx-diff-row.hd .cx-hd-ex { display: flex; align-items: center; gap: 7px; color: var(--tx-mid); }
.cx-diff-row.hd .cx-hd-ex img { width: 14px; height: 14px; object-fit: contain; }

/* ---------- verdict ---------- */
/* The call, then the decision behind it. Not a gradient box of prose: the
   numbers are already on the page, so this is the one place that says what to
   actually do. Bold is reserved for the pick, not sprayed through sentences. */
.cx-verdict { border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel);
  overflow: hidden; margin-bottom: 26px; }

.cx-vd-h { padding: 17px 20px 15px; border-bottom: 1px solid var(--hairline); }
.cx-vd-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 8px; }
.cx-vd-call { font-size: 19px; font-weight: 600; color: var(--tx-hi); letter-spacing: -.02em;
  line-height: 1.3; margin-bottom: 8px; }
.cx-vd-lede { font-size: 13px; color: var(--tx-mid); line-height: 1.65; max-width: 780px; margin: 0; }

.cx-vd-rows { }
.cx-vd-row { display: grid; grid-template-columns: minmax(0,1.05fr) 190px minmax(0,1.35fr);
  align-items: center; gap: 16px; padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.04); }
.cx-vd-row:last-child { border-bottom: 0; }
.cx-vd-row:hover { background: rgba(255,255,255,.014); }
.cx-vd-when { font-size: 12.5px; color: var(--tx); line-height: 1.4; }
.cx-vd-pick { display: flex; align-items: center; gap: 8px; min-width: 0;
  border-left: 2px solid var(--amber-dim); padding-left: 11px; }
.cx-vd-pick.none { border-left-color: var(--tx-faint); }
.cx-vd-pick img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.cx-vd-pick b { font-size: 13px; font-weight: 600; color: var(--tx-hi); line-height: 1.3; }
.cx-vd-pick.none b { color: var(--tx-mid); font-weight: 500; }
.cx-vd-why { font-size: 11.5px; color: var(--tx-dim); line-height: 1.5; }

.cx-vd-watch { display: flex; gap: 14px; padding: 12px 20px 13px;
  border-top: 1px solid var(--hairline); background: var(--bg-2); }
.cx-vd-watch .k { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx-faint); white-space: nowrap; flex-shrink: 0; padding-top: 2px; width: 130px; }
.cx-vd-watch p { font-size: 11.5px; color: var(--tx-dim); line-height: 1.6; margin: 0; }

/* ---------- full fact table, aligned by section ---------- */
/* Rows are NOT forced onto shared field names. Each platform's facts stay in
   their own column exactly as researched, which is why nothing here can be
   mis-assigned. Where both sides happen to name a fact identically it pairs
   into one aligned row, which is free and worth taking. */
.cx-spec-top p { font-size: 12.5px; color: var(--tx-dim); margin: 0 0 11px; line-height: 1.6; max-width: 880px; }
.cx-spec { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--panel); }

.cx-fhd { position: sticky; top: 0; z-index: 6; display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  background: #101114; border-bottom: 1px solid var(--hairline); }
.cx-fhd > div { padding: 10px 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tx-dim); display: flex; align-items: center; gap: 7px; }
.cx-fhd > div + div { border-left: 1px solid rgba(255,255,255,.045); }
.cx-fhd img { width: 15px; height: 15px; object-fit: contain; }
.cx-fhd b { color: var(--tx); font-weight: 600; font-size: 10.5px; letter-spacing: .05em; }

.cx-fsec + .cx-fsec { border-top: 1px solid var(--hairline); }
.cx-fsec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 16px;
  background: var(--bg-2); border-bottom: 1px solid var(--hairline); }
.cx-fsec-h b { font-size: 12.5px; font-weight: 700; color: var(--tx-hi); letter-spacing: -.01em; }
.cx-fsec-h span { font-size: 11px; color: var(--tx-faint); }
.cx-fsec-h em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx-faint); white-space: nowrap; }

/* a fact, as one platform documents it */
.cx-f { display: grid; grid-template-columns: minmax(0,1fr) auto 46px; align-items: baseline; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid rgba(255,255,255,.035); }
.cx-f:last-child { border-bottom: 0; }
.cx-f:hover { background: rgba(255,255,255,.016); }
.cx-f.bare { grid-template-columns: minmax(0,1fr) 46px; }
.cx-fk b { display: block; font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.35; }
.cx-fk span { display: block; font-size: 10.5px; color: var(--tx-dim); margin-top: 2px; line-height: 1.45; }
.cx-fv { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--tx-hi);
  text-align: right; line-height: 1.4; min-width: 0; }
.cx-fv small { display: block; font-family: var(--sans); font-size: 10px; font-weight: 400;
  color: var(--tx-dim); margin-top: 2px; line-height: 1.45; }
.cx-fv.yes { color: var(--up); }
.cx-fv.warn { color: var(--amber); }
.cx-fv.no { color: var(--tx-dim); }
.cx-fm { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.cx-fm a { font-family: var(--mono); font-size: 9.5px; color: #6B7482; transition: color .14s; }
.cx-f:hover .cx-fm a { color: #8C97A6; }
.cx-fm a:hover { color: var(--amber); }

/* the two per-platform columns */
.cx-fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline-2); }
.cx-fcol { background: var(--panel); min-width: 0; }
.cx-fcol:empty::after { content: "No further facts in this section"; display: block; padding: 11px 16px;
  font-size: 11px; color: var(--tx-faint); }

/* facts both platforms name identically, shown aligned */
.cx-frow.paired { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.045);
  background: rgba(201,154,75,.028); }
.cx-frow.paired .cx-fk-mid { padding: 9px 16px; }
.cx-frow.paired .cx-fk-mid b { display: block; font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.35; }
.cx-frow.paired .cx-fk-mid span { display: block; font-size: 10.5px; color: var(--tx-dim); margin-top: 2px; line-height: 1.45; }
.cx-frow.paired .cx-f { border-bottom: 0; border-left: 1px solid rgba(255,255,255,.045); }

.cx-spec-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--hairline); background: var(--bg-2);
  font-size: 11px; color: var(--tx-dim); line-height: 1.6; }
.cx-spec-foot b { color: var(--tx-mid); }

/* ---------- visit ---------- */
.cx-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
.cx-vis { display: flex; align-items: center; gap: 13px; background: var(--panel); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 15px 18px; transition: .14s; }
.cx-vis:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.cx-vis .cx-logo { width: 40px; height: 40px; border-radius: 11px; background: #16171b; border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cx-vis .cx-logo img { width: 25px; height: 25px; object-fit: contain; }
.cx-vis .k { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-dim); }
.cx-vis .nm { display: block; font-size: 14px; font-weight: 600; color: var(--tx-hi); line-height: 1.25; margin-top: 2px; }
.cx-vis .u { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--tx-dim); margin-top: 2px; }
.cx-vis .arw { margin-left: auto; color: var(--tx-faint); flex-shrink: 0; }
.cx-vis:hover .arw { color: var(--amber); }

/* ---------- related comparisons ---------- */
.cx-rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 34px; }
.cx-rel a { display: block; background: var(--panel); border: 1px solid var(--hairline); border-radius: 11px;
  padding: 13px 16px; transition: .13s; }
.cx-rel a:hover { border-color: rgba(255,255,255,.18); transform: translateY(-2px); }
.cx-rel .b { display: block; font-size: 13px; font-weight: 600; color: var(--tx-hi); line-height: 1.3; }
.cx-rel .b em { font-style: normal; color: var(--tx-faint); font-weight: 400; padding: 0 3px; }
.cx-rel .s { display: block; font-size: 11px; color: var(--tx-dim); margin-top: 4px; line-height: 1.45; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .cx-hero h1 { font-size: 27px; }
  .cx-heads { grid-template-columns: 1fr 52px 1fr; }
  .cx-head { padding: 13px 13px; gap: 12px; }
  .cx-head .cx-logo { width: 36px; height: 36px; border-radius: 10px; }
  .cx-head .cx-logo img { width: 22px; height: 22px; }
  .cx-head .nm { font-size: 15.5px; }
  .cx-head .sb, .cx-head .cx-chips { display: none; }
  .cx-score .k { white-space: nowrap; margin-bottom: 5px; }
  .cx-score .v { font-size: 24px; }
  .cx-shot { width: 132px; }
  .cx-pillar { grid-template-columns: 1fr 118px 1fr; padding: 10px 14px; }
  .cx-plabel b { font-size: 11.5px; }
  .cx-choose, .cx-visit { grid-template-columns: 1fr; }
  .cx-vd-row { grid-template-columns: minmax(0,1fr) 170px; gap: 5px 14px; padding: 11px 15px; }
  .cx-vd-why { grid-column: 1 / -1; }
  .cx-vd-watch { flex-direction: column; gap: 6px; }
  .cx-vd-watch .k { width: auto; padding-top: 0; }
  .cx-go-note { max-width: none; }
  .cx-rel { grid-template-columns: 1fr 1fr; }
  .cx-pillar.open .cx-why { grid-template-columns: 1fr; gap: 12px; }
  .cx-why-b { text-align: left; }
  .cx-why-b li { flex-direction: row; }
}
/* routes: the metric columns stop fitting beside the route name, so the name
   takes a full row and the four numbers become a labelled strip beneath it */
@media (max-width: 820px) {
  .cx-rts-hd { display: none; }
  .cx-rt-r { grid-template-columns: repeat(3, 1fr); gap: 9px 10px; padding: 11px 15px; }
  .cx-rt-nm { grid-column: 1 / -1; }
  .cx-rt-r > span:not(.cx-rt-nm) { text-align: left; }
  .cx-rt-r > span:not(.cx-rt-nm)::before { display: block; font-family: var(--mono); font-size: 8px;
    letter-spacing: .09em; text-transform: uppercase; color: var(--tx-dim); margin-bottom: 2px; }
  .cx-rt-fee::before   { content: "Trading fee"; }
  .cx-rt-conv::before  { content: "AUD conversion"; }
  .cx-rt-cross::before { content: "Crossing"; }
  .cx-rt-r > span:not(.cx-rt-nm) i { display: none; }
  .cx-rt-all::before   { content: "All in"; }
  .cx-rt-cost::before  { content: "Cost"; }
  .cx-rt-why { padding-left: 15px; }
  /* the size axis is the point of the curve, so scroll it rather than wrap it */
  .cx-cv, .cx-mk-rows { overflow-x: auto; }
  .cx-cv-row { min-width: 760px; }
  .cx-mk-row { min-width: 640px; }
  .cx-mk-top { gap: 14px; }
  .cx-cv-row > .nm em { display: none; }
}

@media (max-width: 700px) {
  .cx-hero h1 { font-size: 23px; }
  /* at this width the shot is too small to tell you anything */
  .cx-shot { display: none; }
  .cx-dek { font-size: 13.5px; }
  .cx-fhd { grid-template-columns: 1fr 1fr; }
  .cx-fhd > div:first-child { display: none; }
  .cx-fhd > div:nth-child(2) { border-left: 0; }
  .cx-fcols { grid-template-columns: 1fr; }
  .cx-frow.paired { grid-template-columns: 1fr; }
  .cx-frow.paired .cx-f { border-left: 0; }
  .cx-f { grid-template-columns: minmax(0,1fr) auto; padding: 9px 14px; }
  .cx-f .cx-fm { grid-column: 1 / -1; justify-content: flex-start; }
  .cx-sticky > div:first-child { grid-column: 1 / -1; border-left: 0; }
  .cx-sticky > div:nth-child(2) { border-left: 0; }
  .cx-sticky > div:last-child { display: none; }
  .cx-row > div:first-child { grid-column: 1 / -1; border-left: 0; padding-bottom: 4px; }
  .cx-row > div:nth-child(2) { border-left: 0; }
  .cx-row > div:last-child { grid-column: 1 / -1; border-left: 0; justify-content: flex-start; padding-top: 0; padding-bottom: 10px; }
  .cx-diff-row { grid-template-columns: 1fr 1fr; }
  .cx-diff-row > div:first-child { grid-column: 1 / -1; border-left: 0; padding-bottom: 2px; }
  .cx-diff-row > div:nth-child(2) { border-left: 0; }
  .cx-diff-row.hd > div:first-child { display: none; }
  .cx-rel { grid-template-columns: 1fr; }
  .cx-calc-top { gap: 14px; }
}


/* ============================================================
   /compare/ hub
   ============================================================ */
.cx-lg { border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel);
  overflow: hidden; margin-bottom: 30px; }
.cx-lg-top { padding: 14px 20px 13px; border-bottom: 1px solid var(--hairline); }
.cx-lg-top p { font-size: 12.5px; color: var(--tx-mid); line-height: 1.65; margin: 0; max-width: 860px; }
.cx-lg-top b { color: var(--tx-hi); }
.cx-lg-row { display: grid; grid-template-columns: 40px minmax(0,1.6fr) repeat(4, minmax(0,1fr));
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); }
.cx-lg-row:last-child { border-bottom: 0; }
.cx-lg-row > span { padding: 10px 14px; font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--tx-mid); }
.cx-lg-row > .r { text-align: left; color: var(--tx-faint); font-size: 11px; }
.cx-lg-row > .nm { display: flex; align-items: center; gap: 8px; text-align: left; font-family: var(--sans); min-width: 0; }
.cx-lg-row > .nm img { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.cx-lg-row > .nm a { font-size: 13px; font-weight: 600; color: var(--tx-hi); transition: color .14s; white-space: nowrap; }
.cx-lg-row > .nm a:hover { color: var(--amber); }
.cx-lg-row > .nm i { font-style: normal; font-family: var(--mono); font-size: 9.5px; color: var(--tx-faint); }
.cx-lg-row > .v { color: var(--tx-hi); font-weight: 600; }
.cx-lg-row > .v.dim { color: var(--tx-dim); font-weight: 400; }
.cx-lg-row.hd { background: var(--bg-2); }
.cx-lg-row.hd > span { font-size: 8.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tx-dim); font-weight: 400; }
.cx-lg-row.best { box-shadow: inset 2px 0 0 var(--up); background: rgba(79,158,124,.04); }
.cx-lg-row.best > .v:not(.dim) { color: var(--up); }
.cx-lg-foot { padding: 11px 20px; border-top: 1px solid var(--hairline); background: var(--bg-2);
  font-size: 11px; color: var(--tx-dim); line-height: 1.6; }

.cx-hubs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 30px; }
.cx-hg { border: 1px solid var(--hairline); border-radius: 12px; background: var(--panel); overflow: hidden; }
.cx-hg-h { display: flex; align-items: center; gap: 9px; padding: 12px 16px;
  border-bottom: 1px solid var(--hairline); background: var(--bg-2); flex-wrap: wrap; }
.cx-hg-h img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.cx-hg-h b { font-size: 14px; font-weight: 600; color: var(--tx-hi); letter-spacing: -.01em; }
.cx-hg-h a:hover b { color: var(--amber); }
.cx-hg-h span { font-size: 11px; color: var(--tx-dim); }
.cx-hg-h em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tx-faint); white-space: nowrap; }
.cx-hg-l { display: flex; flex-wrap: wrap; gap: 7px; padding: 13px 16px 15px; }
.cx-hg-l a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tx);
  border: 1px solid var(--hairline); border-radius: 7px; padding: 5px 10px 5px 7px; transition: .14s; }
.cx-hg-l a img { width: 15px; height: 15px; object-fit: contain; }
.cx-hg-l a:hover { border-color: var(--amber-dim); color: var(--amber); background: rgba(201,154,75,.05); }

@media (max-width: 940px) {
  .cx-hubs { grid-template-columns: 1fr; }
  .cx-lg-row { grid-template-columns: 30px minmax(0,1.4fr) repeat(2, minmax(0,1fr)); }
  .cx-lg-row > span:nth-child(5), .cx-lg-row > span:nth-child(6) { display: none; }
}