/* compare-fastmoss: arranges landing-system pieces. The route map lives in the illustrations only. */
.bespoke-compare-fastmoss .table-wrap { border: 0; border-radius: 0; background: none; margin: 0; overflow: visible; }
.bespoke-compare-fastmoss .fx-note { margin-top: 12px; }
.bespoke-compare-fastmoss .fx-hero-illo { margin: 0; }
.bespoke-compare-fastmoss .fx-l { font: 600 15px var(--ls-font); fill: var(--ls-ink); }
.bespoke-compare-fastmoss .fx-l-tc { font-size: 17px; font-weight: 700; fill: var(--ls-blue-deep); }
.bespoke-compare-fastmoss .fx-l-ix { font-size: 16px; font-weight: 800; }
.bespoke-compare-fastmoss .fx-l-key { font-size: 13px; fill: var(--ls-muted); }
.bespoke-compare-fastmoss .fx-key { fill: var(--ls-yellow); stroke: var(--ls-ink); stroke-width: 1; }
.bespoke-compare-fastmoss .fx-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ls-ink); margin-right: 8px; vertical-align: -1px; }

/* zones */
.bespoke-compare-fastmoss .fx-zones { display: grid; grid-template-columns: 1fr 1.5fr 2fr; gap: 24px; margin-top: 32px; }
.bespoke-compare-fastmoss .fx-stops { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; }
.bespoke-compare-fastmoss .fx-zones > :first-child .fx-stops { columns: 1; }
.bespoke-compare-fastmoss .fx-stops li { position: relative; padding: 6px 0 6px 30px; font-size: 16px; font-weight: 600; color: var(--ls-ink); break-inside: avoid; }
.bespoke-compare-fastmoss .fx-stops li::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 10px; background: var(--c); border-left: 2px solid var(--ls-ink); border-right: 2px solid var(--ls-ink); }
.bespoke-compare-fastmoss .fx-stops li::after { content: ''; position: absolute; left: 2px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border-radius: 50%; background: var(--ls-paper); border: 2px solid var(--ls-ink); }
.bespoke-compare-fastmoss .fx-stops .ls-tag { font-size: 10px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }

/* the ride */
.bespoke-compare-fastmoss .fx-route { list-style: none; margin: 36px 0 0; padding: 0; position: relative; }
.bespoke-compare-fastmoss .fx-route::before { content: ''; position: absolute; left: 18px; top: 8px; bottom: 8px; width: 14px; border-radius: 7px; background: var(--ls-blue); border: 2px solid var(--ls-ink); }
.bespoke-compare-fastmoss .fx-stop { position: relative; padding: 0 0 48px 76px; max-width: 920px; }
.bespoke-compare-fastmoss .fx-stop::before { content: ''; position: absolute; left: 12px; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ls-paper); border: 2px solid var(--ls-ink); }
.bespoke-compare-fastmoss .fx-stop-ix::before { left: 4px; width: 42px; height: 26px; border-radius: 13px; }
.bespoke-compare-fastmoss .fx-stop > h3 { margin-top: 12px; }
.bespoke-compare-fastmoss .fx-stop > p { max-width: 720px; }
.bespoke-compare-fastmoss .fx-fig { margin: 8px 0 0; }
.bespoke-compare-fastmoss .fx-fig > h3 { font-size: 17px; }
.bespoke-compare-fastmoss .fx-bars { list-style: none; margin: 0; padding: 0; }
.bespoke-compare-fastmoss .fx-bars li { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 14px; align-items: center; padding: 5px 0; }
.bespoke-compare-fastmoss .fx-bn { font-size: 15px; line-height: 1.3; color: var(--ls-ink); text-align: right; }
.bespoke-compare-fastmoss .fx-bn small { display: block; font-size: 13px; color: var(--ls-muted); }
.bespoke-compare-fastmoss .fx-bt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.bespoke-compare-fastmoss .fx-bw { display: block; min-width: 0; }
.bespoke-compare-fastmoss .fx-b { display: block; height: 16px; min-width: 6px; border-radius: 8px; background: var(--ls-blue-deep); }
.bespoke-compare-fastmoss .fx-bars-cm .fx-b { background: var(--ls-blue); }
.bespoke-compare-fastmoss .fx-bars-shop .fx-b { background: var(--ls-peach-deep); }
.bespoke-compare-fastmoss .fx-bt b { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ls-ink); }
.bespoke-compare-fastmoss .fx-bt .ls-tag { font-size: 10px; padding: 1px 7px; margin-left: 4px; }
.bespoke-compare-fastmoss .fx-likes { font-weight: 500; font-size: 13px; color: var(--ls-muted); margin-left: 4px; }
.bespoke-compare-fastmoss .fx-chart { display: block; width: 100%; height: auto; }
.bespoke-compare-fastmoss .fx-grid { stroke: var(--ls-line); }
.bespoke-compare-fastmoss .fx-tick { font: 13px var(--ls-font); fill: var(--ls-muted); }
.bespoke-compare-fastmoss .fx-tick-strong { font-weight: 700; fill: var(--ls-ink); }
.bespoke-compare-fastmoss .fx-pl { fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.bespoke-compare-fastmoss .fx-pl-a { stroke: var(--ls-blue-deep); }
.bespoke-compare-fastmoss .fx-pl-b { stroke: var(--ls-blue); }
.bespoke-compare-fastmoss .fx-pk { fill: var(--ls-yellow); stroke: var(--ls-ink); stroke-width: 2; }
.bespoke-compare-fastmoss .fx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; margin: 8px 0 0; }
.bespoke-compare-fastmoss .fx-li { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.bespoke-compare-fastmoss .fx-key-a, .bespoke-compare-fastmoss .fx-key-b { display: inline-block; width: 26px; border-top: 3px solid var(--ls-blue-deep); }
.bespoke-compare-fastmoss .fx-key-b { border-top-color: var(--ls-blue); }
.bespoke-compare-fastmoss .fx-split { display: flex; height: 44px; border: 2px solid var(--ls-ink); border-radius: 14px; overflow: hidden; background: var(--ls-paper); max-width: 720px; }
.bespoke-compare-fastmoss .fx-split span { display: flex; align-items: center; padding-left: 10px; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; color: var(--ls-ink); }
.bespoke-compare-fastmoss .fx-us { background: var(--ls-blue); }
.bespoke-compare-fastmoss .fx-au { background: var(--ls-yellow); border-left: 2px solid var(--ls-ink); }
.bespoke-compare-fastmoss .fx-ca { background: var(--ls-lavender); border-left: 2px solid var(--ls-ink); padding-left: 0 !important; }
.bespoke-compare-fastmoss .fx-ot { background: var(--ls-cream); border-left: 2px solid var(--ls-ink); padding-left: 0 !important; }
.bespoke-compare-fastmoss .fx-vs { max-width: 720px; }
.bespoke-compare-fastmoss .fx-change { margin-top: 16px; max-width: 720px; }
.bespoke-compare-fastmoss .fx-strengths { margin-top: 28px; }
.bespoke-compare-fastmoss .fx-strengths .ls-card { padding: 22px; }
.bespoke-compare-fastmoss .fx-strengths p { font-size: 16px; }
.bespoke-compare-fastmoss .fx-table .fx-rowh, .bespoke-compare-fastmoss .fx-fare .fx-rowh { font-weight: 700; color: var(--ls-ink); }
.bespoke-compare-fastmoss .fx-table .fx-rowh { width: 22%; }
.bespoke-compare-fastmoss .fx-fare th.num { text-align: right; }
.bespoke-compare-fastmoss .fx-fare-notes { margin-top: 24px; }
.bespoke-compare-fastmoss .fx-fare-read { margin-top: 24px; }
.bespoke-compare-fastmoss .fx-icon { width: 80px; height: 30px; display: block; margin-bottom: 12px; }
.bespoke-compare-fastmoss .fx-center { margin-left: auto; margin-right: auto; }

/* verdict: TokConnect first and wider, FastMoss short */
.bespoke-compare-fastmoss .fx-verdict { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; align-items: start; }
.bespoke-compare-fastmoss .fx-verdict p + p { margin-top: 12px; }
.bespoke-compare-fastmoss .fx-proof { font-size: 16px; padding-top: 12px; border-top: 1.5px solid var(--ls-ink); }
.bespoke-compare-fastmoss .fx-both { margin: 20px auto 0; max-width: 720px; text-align: center; }
.bespoke-compare-fastmoss .fx-recheck { margin-top: 12px; padding: 10px 14px; border: 1.5px solid var(--ls-ink); border-radius: var(--ls-radius-sm); background: var(--ls-paper); }
.bespoke-compare-fastmoss .fx-table-lead { margin: 4px 0 16px; }
.bespoke-compare-fastmoss .fx-sources { padding-left: 20px; }

@media (max-width: 960px) {
  .bespoke-compare-fastmoss .fx-zones { grid-template-columns: 1fr; }
  .bespoke-compare-fastmoss .fx-verdict { grid-template-columns: 1fr; }
  .bespoke-compare-fastmoss .fx-bars li { grid-template-columns: 1fr; gap: 4px; }
  .bespoke-compare-fastmoss .fx-bn { text-align: left; }
  .bespoke-compare-fastmoss .fx-bn small { display: inline; margin-left: 4px; }
}
@media (max-width: 640px) {
  .bespoke-compare-fastmoss .fx-l { font-size: 21px; }
  .bespoke-compare-fastmoss .fx-l-tc { font-size: 23px; }
  .bespoke-compare-fastmoss .fx-l-ix { font-size: 21px; }
  .bespoke-compare-fastmoss .fx-l-key { font-size: 18px; }
  .bespoke-compare-fastmoss .fx-tick { font-size: 28px; }
  .bespoke-compare-fastmoss .fx-route::before { left: 7px; width: 10px; }
  .bespoke-compare-fastmoss .fx-stop { padding-left: 36px; padding-bottom: 40px; }
  .bespoke-compare-fastmoss .fx-stop::before { left: 2px; width: 20px; height: 20px; }
  .bespoke-compare-fastmoss .fx-stop-ix::before { left: -3px; width: 30px; height: 20px; }
  .bespoke-compare-fastmoss .fx-split span { font-size: 12px; padding-left: 5px; }
  .bespoke-compare-fastmoss .ls-table-wrap { border: 0; background: none; overflow: visible; }
  .bespoke-compare-fastmoss .fx-table, .bespoke-compare-fastmoss .fx-table tbody, .bespoke-compare-fastmoss .fx-table tr, .bespoke-compare-fastmoss .fx-table td { display: block; width: auto; }
  .bespoke-compare-fastmoss .fx-table thead, .bespoke-compare-fastmoss .fx-fare thead { display: none; }
  .bespoke-compare-fastmoss .fx-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-fastmoss .fx-table .fx-rowh { width: auto; background: var(--ls-cream); }
  .bespoke-compare-fastmoss .fx-table td:nth-child(2)::before, .bespoke-compare-fastmoss .fx-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-fastmoss .fx-table td:nth-child(2)::before { content: 'TokConnect'; }
  .bespoke-compare-fastmoss .fx-table td:nth-child(3)::before { content: 'FastMoss'; }
  .bespoke-compare-fastmoss .fx-table tr:last-child td { border-bottom: 1px solid var(--ls-line); }
  .bespoke-compare-fastmoss .fx-table tr td:last-child { border-bottom: 0; }
  .bespoke-compare-fastmoss .fx-fare, .bespoke-compare-fastmoss .fx-fare tbody, .bespoke-compare-fastmoss .fx-fare td { display: block; width: auto; }
  .bespoke-compare-fastmoss .fx-fare tr { display: grid; grid-template-columns: 1fr 1fr; background: var(--ls-paper); border: 1.5px solid var(--ls-line); border-radius: var(--ls-radius-sm); margin-bottom: 12px; overflow: hidden; }
  .bespoke-compare-fastmoss .fx-fare .fx-rowh { grid-column: 1 / -1; background: var(--ls-peach-tint); font-size: 18px; }
  .bespoke-compare-fastmoss .fx-fare td.num { text-align: left; white-space: normal; padding: 8px 14px; border-bottom: 1px solid var(--ls-line); }
  .bespoke-compare-fastmoss .fx-fare td.num::before { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-muted); }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(2)::before { content: 'First month'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(3)::before { content: 'Then monthly'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(4)::before { content: 'Billed yearly'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(5)::before { content: 'History'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(6)::before { content: 'Detail pages a day'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(7)::before { content: 'Searches a day'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(8)::before { content: 'Exports a month'; }
  .bespoke-compare-fastmoss .fx-fare td:nth-of-type(9)::before { content: 'Extra seat'; }
}
/* landing-system's main.bespoke :where(a) outranks .ls-btn; restore button text colours */
.bespoke-compare-fastmoss a.ls-btn { color: #fff; text-decoration: none; }
.bespoke-compare-fastmoss a.ls-btn--ghost, .bespoke-compare-fastmoss a.ls-btn--blue{ color: var(--ls-ink); }
.bespoke-compare-fastmoss blockquote.ls-prompt { margin: 0; }
.bespoke-compare-fastmoss .fx-caps { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ls-muted); }
.bespoke-compare-fastmoss .fx-figcap { margin-top: 8px; }
.bespoke-compare-fastmoss .fx-pricing-link { margin-top: 16px; font-size: 16px; }