/* TopLending · monochrome research ledger (light only)
 *
 * Type system:
 *   Newsreader        — display (H1/H2, platform names, big figures), italic emphasis
 *   Schibsted Grotesk — body & UI, wordmark
 *   DM Mono           — numbers in tables, eyebrows, ranks, codes
 *
 * Color system — black, white and greys; blue only as an occasional accent:
 *   #F5F5F3  bg          page
 *   #FFFFFF  surface     card
 *   #EDEDEA  elevated    nested / hover
 *   #DEDEDA  line        hairline divider
 *   #B9B9B4  line-strong hover divider
 *   #121212  ink         text, primary buttons
 *   #55575A  muted       secondary text
 *   #8B8D90  dim         metadata
 *   #2F63A0  accent      steel blue — links, emphasis, rank highlights
 *   #E3EBF4  signal      pale blue tint — selections, sponsored/visit panels
 */

:root {
  --bg: #F5F5F3;
  --surface: #FFFFFF;
  --elevated: #EDEDEA;
  --line: #DEDEDA;
  --line-strong: #B9B9B4;
  --ink: #121212;
  --muted: #55575A;
  --dim: #8B8D90;
  --accent: #2F63A0;
  --accent-hover: #234C7C;
  --signal: #D9E4F1;
  --signal-soft: #EEF3F9;
  --success: #2E7D4F;
  --danger: #B8322A;

  --on-accent: #FFFFFF;
  --header-bg: rgba(245, 245, 243, 0.9);
  --ink-soft: rgba(18, 18, 18, 0.84);
  --selection-bg: var(--signal);
  --selection-fg: var(--ink);
  --code-bg: #F0F0EE;

  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;

  --radius: 3px;
  --radius-sm: 2px;
  --shadow-lift: 0 1px 0 rgba(18, 18, 18, 0.04), 0 20px 40px -28px rgba(18, 18, 18, 0.4);

  color-scheme: light;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  background: var(--bg);
  font-family: var(--font-sans);
  /* Faint paper tooth — keeps large empty areas from reading as flat UI grey. */
  background-image: none;
  background-size: 22px 22px;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }
::-moz-selection { background: var(--selection-bg); color: var(--selection-fg); }

/* ---------- container ---------- */
.container-page {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .container-page { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container-page { padding-inline: 2.5rem; } }

/* ---------- display type ---------- */
.font-display {
  font-family: var(--font-display);
  font-weight: 450;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
}

.headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.032em;
  line-height: 0.98;
  color: var(--ink);
}
 /* Emphasis: italic in the blue accent — the one place colour appears in a headline. */
.headline em,
.headline-mark {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* ---------- eyebrow ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--accent);
  border-radius: 1px;
  display: inline-block;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--muted::before { background: var(--line-strong); }

/* ---------- card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.card-hover { position: relative; }
.card-hover:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}
.card-hover:hover .arrow-cta { color: var(--ink); }
.card-hover:hover .arrow-cta svg { transform: translateX(3px); }
.card-pad { padding: 1.5rem; }
@media (min-width: 768px) { .card-pad { padding: 1.75rem; } }

/* ---------- chip / badge ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
a.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--accent {
  color: var(--ink);
  background: var(--signal-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
a.chip--accent:hover { border-color: var(--accent); }
.chip--success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 30%, var(--line));
}
.chip--danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}
.chip--ink { color: var(--ink); border-color: var(--ink); }
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn--primary:hover { background: #2E2E2E; border-color: #2E2E2E; }

.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secondary:hover { border-color: var(--ink); background: var(--surface); }

.btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.btn--ghost:hover { color: var(--ink); background: var(--elevated); }

.btn--sm { padding: 0.55rem 1rem; font-size: 0.84rem; }
.btn .btn__shortcut {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  opacity: 0.6;
}

/* ---------- logo ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
}
.brand__mark { width: 26px; height: 26px; flex-shrink: 0; }
.brand__word {
  font-family: var(--font-sans);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.brand__word span { font-weight: 400; color: var(--muted); }

/* ---------- nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--header-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.nav-group {
  display: flex;
  align-items: stretch;
  border-left: 1px solid var(--line);
}
.nav-group > a,
.nav-group > div { border-right: 1px solid var(--line); }
.nav-group .nav-link { display: flex; align-items: center; height: 100%; padding: 0.4rem 0.85rem; }
@media (min-width: 1280px) { .nav-group .nav-link { padding: 0.4rem 1.05rem; } }
.nav-link {
  position: relative;
  padding: 0.5rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link--active { color: var(--ink); }
.nav-group .nav-link:hover { background: var(--elevated); }
.nav-group .nav-link--active { background: var(--ink); color: var(--surface); }
.nav-group .nav-link--active:hover { background: var(--ink); color: var(--surface); }
.nav-menu {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.35rem;
  box-shadow: var(--shadow-lift);
}
.nav-menu .nav-link { display: block; padding: 0.55rem 0.75rem; border-radius: 0; }
.nav-menu .nav-link:hover { background: var(--elevated); }

/* ---------- score (detail page) ---------- */
.score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  line-height: 1;
}
.score__value {
  font-family: var(--font-display);
  font-size: 3.6rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
}
.score__max {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---------- score pill (cards) — a dark "readout" chip ---------- */
.score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.32rem 0.6rem 0.3rem;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
}
.score-pill__value {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.score-pill__max {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- ledger row (leaderboard) ---------- */
.ledger {
  border-top: 1px solid var(--ink);
  background: var(--surface);
  border-bottom: 1px solid var(--ink);
}
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 1.25rem 1.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease;
}
.ledger__row:last-child { border-bottom: 0; }
.ledger__row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.ledger__row:hover { background: var(--signal-soft); }
.ledger__row:hover::before { transform: scaleY(1); }
.ledger__row:hover .ledger__name { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ledger__row:hover .arrow-cta { color: var(--ink); }
.ledger__row:hover .arrow-cta svg { transform: translateX(3px); }

.ledger__rank {
  justify-self: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.ledger__row:nth-child(-n+3) .ledger__rank { color: var(--accent); }

.ledger__main {
  display: flex; align-items: center; gap: 1rem; min-width: 0;
}
.ledger__logo {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid; place-items: center;
  overflow: hidden;
}
.ledger__logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.ledger__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 450;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.05;
}
.ledger__meta {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.3rem;
}
.ledger__metrics {
  display: flex; align-items: center; gap: 1.75rem;
  font-variant-numeric: tabular-nums;
}
.ledger__score {
  display: flex; align-items: baseline; gap: 0.15rem;
  padding: 0.4rem 0.7rem;
  background: var(--ink);
  border-radius: var(--radius-sm);
}
.ledger__score-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1;
}
.ledger__score-max {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}
.ledger__reviews {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--dim);
}
@media (max-width: 768px) {
  .ledger__row {
    grid-template-columns: 44px 1fr auto;
    gap: 0.85rem;
    padding: 1.1rem 0.75rem 1.1rem 0;
  }
  .ledger__metrics { display: none; }
  .ledger__name { font-size: 1.25rem; }
  .ledger__rank { font-size: 1.2rem; }
  .ledger__logo { width: 38px; height: 38px; }
}

/* ---------- hero backdrop: graph paper fading out ---------- */
.hero-grid { position: relative; isolation: isolate; }
.hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(18, 18, 18, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18, 18, 18, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 30% 20%, #000 20%, transparent 75%);
}

/* ---------- section head (big index numeral + title) ---------- */
.section-index {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.rule-ink { border-top: 1px solid var(--ink); }

/* ---------- platform card ---------- */
.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.p-card:hover { border-color: var(--ink); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.p-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.p-card__rank {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.p-card:nth-child(-n+3) .p-card__rank { color: var(--accent); }
.p-card__body { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.35rem 1.25rem 1.25rem; flex: 1; }
.p-card__logo {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  object-fit: contain;
  padding: 3px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.p-card__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.p-card:hover .p-card__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.p-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------- story card (editorial) ---------- */
.story {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}
.story__cover {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--elevated);
}
.story__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.story:hover .story__cover img { transform: scale(1.035); }
.story__kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.story__kicker strong { color: var(--accent); font-weight: 500; }
.story__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.story:hover .story__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- card link (whole card clickable, plus its own buttons) ---------- */
/* The name's link is stretched over the card; `.card-action` lifts a second
   link above that overlay. The card must be position: relative. */
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 3px; }
.card-action { position: relative; z-index: 2; }

/* ---------- key figures (platform summary card) ---------- */
.key-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (min-width: 640px) { .key-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.key-figures > div { padding-top: 0.75rem; border-top: 1px solid var(--ink); }
.key-figures dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.key-figures dd {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.key-figures__unit {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--muted);
}

/* ---------- spec grid (label/value rows over several columns) ---------- */
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2.5rem;
}
@media (min-width: 768px) { .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spec-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec-grid > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px dashed var(--line-strong);
}
.spec-grid dd { text-align: right; min-width: 0; }

/* ---------- visit banner (Maclear profile, mid-page and closing) ---------- */
.visit-banner {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  border-left-width: 4px;
  background: var(--signal-soft);
}
@media (min-width: 768px) { .visit-banner { padding: 2.5rem; } }

/* ---------- stars ---------- */
.stars { display: inline-flex; gap: 2px; line-height: 1; }
.stars .star { width: 13px; height: 13px; display: inline-block; }
.stars--lg .star { width: 16px; height: 16px; }
.stars .star--filled { fill: var(--ink); }
.stars .star--empty  { fill: var(--line); }

/* ---------- arrow cta ---------- */
.arrow-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.arrow-cta svg { transition: transform 0.2s ease; }
.arrow-cta:hover { color: var(--ink); text-decoration-color: var(--ink); }
.arrow-cta:hover svg { transform: translateX(3px); }

/* ---------- divider ---------- */
.hr-soft { border: 0; border-top: 1px solid var(--line); }
.hr-marquee { border: 0; height: 1px; background: var(--line); }

/* ---------- prose ---------- */
.prose-crypto {
  color: var(--ink-soft);
  font-size: 1.07rem;
  line-height: 1.75;
}
.prose-crypto h2 {
  margin-top: 2.8rem;
  margin-bottom: 1rem;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 450;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1.1;
}
.prose-crypto h3 {
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.prose-crypto p { margin-bottom: 1.1rem; }
.prose-crypto a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: background-color 0.15s ease;
}
.prose-crypto a:hover { background: var(--signal-soft); }
/* Tailwind preflight сбрасывает list-style — возвращаем маркеры,
   иначе буллеты/нумерация в статьях не видны. */
.prose-crypto ul, .prose-crypto ol { margin: 0.5rem 0 1.2rem 1.4rem; padding-left: 0.4rem; }
.prose-crypto ul { list-style: square; }
.prose-crypto ul ul { list-style: circle; }
.prose-crypto ol { list-style: decimal; }
.prose-crypto li { margin-bottom: 0.4rem; }
.prose-crypto li::marker { color: var(--accent); }
.prose-crypto ol li::marker { font-family: var(--font-mono); font-size: 0.9em; }
.prose-crypto li > p { margin-bottom: 0.4rem; }

/* Таблицы: статья ограничена 740px, поэтому широкие таблицы делаем
   собственным горизонтально-скроллируемым блоком. */
.prose-crypto table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.6rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.5;
  -webkit-overflow-scrolling: touch;
}
.prose-crypto table th,
.prose-crypto table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
}
.prose-crypto table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.prose-crypto table tbody tr:last-child td { border-bottom: 0; }
.prose-crypto table tbody tr:hover td { background: var(--signal-soft); }

/* Картинки и подписи в теле статьи. */
.prose-crypto img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6rem auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.prose-crypto figure { margin: 1.6rem 0; }
.prose-crypto figure img { margin: 0 auto; }
.prose-crypto figcaption {
  margin-top: 0.6rem;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}

.prose-crypto hr {
  border: 0;
  height: 1px;
  background: var(--line-strong);
  margin: 2.4rem 0;
}

.prose-crypto h4 {
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}
.prose-crypto blockquote {
  margin: 1.8rem 0;
  padding: 0.2rem 0 0.2rem 1.4rem;
  border-left: 3px solid var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.prose-crypto code {
  background: var(--code-bg);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--ink);
  border: 1px solid var(--line);
}
.prose-crypto strong { color: var(--ink); font-weight: 650; }

/* ---------- spec list ---------- */
.spec-list { font-family: var(--font-sans); }
.spec-list dt {
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.spec-list dd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ---------- entrance animation ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { opacity: 0; animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.fade-in--1 { animation-delay: 0.05s; }
.fade-in--2 { animation-delay: 0.14s; }
.fade-in--3 { animation-delay: 0.23s; }
.fade-in--4 { animation-delay: 0.32s; }
.fade-in--5 { animation-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1; }
}

/* ---------- focus ring ---------- */
*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- utility ---------- */
.text-balance { text-wrap: balance; }
.tabular { font-variant-numeric: tabular-nums; }
.font-mono-tight { font-family: var(--font-mono); letter-spacing: -0.01em; }

/* ---------- forms ---------- */
.card-pad input[type="text"],
.card-pad input[type="email"],
.card-pad input[type="password"],
.card-pad textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-pad input[type="text"]:focus,
.card-pad input[type="email"]:focus,
.card-pad input[type="password"]:focus,
.card-pad textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--signal);
}
.card-pad textarea { resize: vertical; min-height: 110px; }
.card-pad input::placeholder,
.card-pad textarea::placeholder { color: var(--dim); }

/* ---------- review rating stars ---------- */
.review-rating { gap: 0.15rem; }
.review-rating__star {
  position: relative;
  cursor: pointer;
  color: var(--line-strong);
  transition: color 0.12s ease, transform 0.12s ease;
  padding: 2px;
}
.review-rating__star:hover,
.review-rating__star:hover ~ .review-rating__star { color: var(--line-strong); }
.review-rating__star input { position: absolute; opacity: 0; pointer-events: none; }
.review-rating { flex-direction: row-reverse; justify-content: flex-end; }
.review-rating__star:hover,
.review-rating__star:hover ~ .review-rating__star,
.review-rating__star:has(input:checked),
.review-rating__star:has(input:checked) ~ .review-rating__star { color: var(--ink); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Trustpilot badge ---------- */
/* Geometry and colours mirror Trustpilot's own rating assets — see
   apps/exchanges/trustpilot_badge.py for where each value was read off. The
   star tiles keep their brand colours (that is the whole point of the badge);
   only the wordmark follows the page's ink colour. */
.tp-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.tp-badge__label {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.tp-badge__stars {
  display: block;
  width: 152px;
  height: auto;
}
.tp-badge__meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.tp-badge__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.tp-badge__brand-star {
  width: 16px;
  height: 16px;
  display: block;
}
.tp-badge__wordmark {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
a.tp-badge__wordmark:hover { color: var(--accent); }

@media (max-width: 640px) {
  .tp-badge__stars { width: 132px; }
  .tp-badge__label { font-size: 1.25rem; }
}

/* ---------- review insights (per-criterion Trustpilot summary) ---------- */
.sentiment-bar {
  position: relative;
  height: 6px;
  border-radius: 1px;
  background: var(--elevated);
  overflow: hidden;
}
.sentiment-bar__fill {
  display: block;
  height: 100%;
  border-radius: 1px;
  background: var(--success);
}
/* The bar reads as "share of positive reviews", so a mostly-negative split
   must not stay green — the colour is the fastest signal on the card. */
.sentiment-bar--mixed .sentiment-bar__fill { background: #D9A21B; }
.sentiment-bar--weak .sentiment-bar__fill { background: var(--danger); }

.insight-list { display: flex; flex-direction: column; gap: 0.55rem; }
.insight-list__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}
.insight-list__item::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 0.5rem;
  border-radius: 1px;
  background: currentColor;
}
.insight-list__text { flex: 1 1 auto; min-width: 0; }
.insight-list__count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--dim);
  padding-top: 0.15rem;
}
.insight-list--pros .insight-list__item::before { background: var(--success); }
.insight-list--cons .insight-list__item::before { background: var(--danger); }

/* ---------- footer ---------- */
.site-footer {
  margin-top: 6rem;
  border-top: 1px solid var(--ink);
  background: var(--surface);
  overflow: hidden;
}
.footer-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}
.footer-links a {
  color: var(--muted);
  font-size: 0.9rem;
  transition: color 0.15s ease;
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* ---------- sponsored marker ---------- */
/* The sponsored platform keeps an asterisk on its name plus this tag wherever
   it appears in a ranking; the footnote under the list spells it out. */
.sponsored-tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.12rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--signal-soft);
  border: 1px solid var(--signal);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}
.sponsored-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--dim);
}

/* ---------- home: hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding: 3rem 0 3.5rem;
  border-bottom: 1px solid var(--ink);
}
@media (min-width: 640px) { .hero { padding: 4.5rem 0 4.5rem; } }
@media (min-width: 1024px) {
  .hero { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 3.5rem; align-items: stretch; }
}
.hero__main { display: flex; flex-direction: column; justify-content: center; }
.masthead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(2.7rem, 6.2vw, 5.4rem);
  line-height: 0.97;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-wrap: balance;
}
.masthead__title em { font-style: italic; color: var(--accent); }

/* ---------- home: leaderboard table ---------- */
.board { border: 1px solid var(--ink); background: var(--surface); }
.board__head,
.board__row {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) 7.5rem 5.5rem 6.5rem 2.5rem;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
}
.board__head {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  background: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.board__row {
  position: relative;
  padding-top: 1.05rem;
  padding-bottom: 1.05rem;
  border-top: 1px solid var(--line);
  transition: background-color 0.15s ease;
}
.board__head + .board__row { border-top: 0; }
.board__row:hover { background: var(--signal-soft); }
.board__row .card-link { color: inherit; }
.board__row .card-link::after { border-radius: 0; }
.board__row--sponsored { background: color-mix(in srgb, var(--signal-soft) 70%, var(--surface)); }
.board__rank {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.board__row:hover .board__rank { color: var(--ink); }
.board__name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 450;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.board__row:hover .board__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.board__meta { margin-top: 0.2rem; font-size: 0.8rem; color: var(--muted); }
.board__num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
}
.board__score { justify-self: end; }
.board__arrow { justify-self: end; color: var(--dim); transition: transform 0.2s ease, color 0.2s ease; }
.board__row:hover .board__arrow { color: var(--ink); transform: translateX(3px); }
/* Outbound link for the sponsored row: sits right after the name and is no
   taller than the name line, so the row keeps the same height as the rest. */
.board__visit {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.3rem;
  padding: 0.24rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: #FFFFFF;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}
.board__visit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
@media (min-width: 768px) and (max-width: 1023px) {
  .board__head,
  .board__row { grid-template-columns: 2.5rem minmax(0, 1fr) 4.5rem 5.5rem 2rem; }
  .board__head > :nth-child(3), .board__row > .board__stars { display: none !important; }
}
@media (max-width: 767px) {
  .board__head { display: none; }
  .board__row { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.95rem 0.9rem; }
  .board__row > .board__stars, .board__row > .board__num, .board__row > .board__arrow { display: none; }
  .board__name { font-size: 1.2rem; }
}

/* ---------- home: sponsored card in the hero ---------- */
.hero-sponsor {
  display: flex;
  flex-direction: column;
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}
.hero-sponsor__head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.hero-sponsor__name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.hero-sponsor__name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hero-sponsor__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.1rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.hero-sponsor__facts > div { padding: 0.7rem 0.75rem; background: var(--surface); }
.hero-sponsor__facts small { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0; color: var(--muted); }
.hero-sponsor__specs { margin-top: 0.9rem; font-size: 0.84rem; }
.hero-sponsor__specs > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--line-strong);
}
.hero-sponsor__specs dt { color: var(--muted); flex-shrink: 0; }
.hero-sponsor__specs dd { color: var(--ink); font-weight: 500; text-align: right; min-width: 0; }
.hero-sponsor__facts dt {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-sponsor__facts dd {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* ---------- home: category index ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cat-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  min-height: 8.5rem;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.cat-tile__no { font-family: var(--font-mono); font-size: 0.7rem; color: var(--dim); }
.cat-tile__name { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.cat-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cat-tile svg { color: var(--dim); transition: transform 0.2s ease, color 0.2s ease; }
.cat-tile:hover { background: var(--ink); }
.cat-tile:hover .cat-tile__name { color: #FFFFFF; }
.cat-tile:hover .cat-tile__no,
.cat-tile:hover svg { color: rgba(255, 255, 255, 0.7); }
.cat-tile:hover svg { transform: translateX(3px); }

/* ---------- home: editorial lead + list ---------- */
.lead-story { display: flex; flex-direction: column; gap: 1rem; }
.lead-story__cover { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-sm); background: var(--elevated); }
.lead-story__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.lead-story:hover .lead-story__cover img { transform: scale(1.03); }
.lead-story__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.lead-story:hover .lead-story__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.story-list > li + li { border-top: 1px solid var(--line); }
.story-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1.15rem 0; }
.story-row__title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.story-row:hover .story-row__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.story-row svg { margin-top: 0.4rem; color: var(--dim); transition: transform 0.2s ease, color 0.2s ease; }
.story-row:hover svg { color: var(--ink); transform: translateX(3px); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .card-pad { padding: 1.25rem; }
  .score__value { font-size: 2.6rem; }
}

/* Preserve complete platform marks on a neutral background, including dark mode. */
img.platform-brand-logo{object-fit:contain;background:#fff;padding:4px}