@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #06080d;
  --surface: #0c1018;
  --surface-2: #111620;
  --surface-3: #171d29;
  --line: #182030;
  --line-2: #1e2738;
  --line-3: #2a3446;
  --line-hover: #3a4558;
  --text: #e6e9ef;
  --muted: #949cab;
  --dim: #646d7d;
  --accent: #2f74f5;
  --accent-rgb: 47, 116, 245;
  --accent-hover: #4485f7;
  --accent-2: #2563eb;
  --accent-soft: rgba(59, 130, 255, 0.1);
  --green: #3ecf8e;
  --r: 8px;
  --r-sm: 6px;
  --r-lg: 10px;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* The spinning logo behind the page reaches past the right edge; without this, phones lay the page out wider and zoom out. */
html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  position: relative;
  overflow-x: clip;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

@keyframes logo-spin { to { transform: rotate(360deg); } }

a { color: inherit; text-decoration: none; }

img { display: block; }

h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }

ul, ol { padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

table { width: 100%; border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.i { flex: 0 0 auto; }

.dim { color: var(--dim); }

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.panel {
  border: 1px solid var(--line-2);
 
  background: var(--surface);
}

.ex-logo { flex: 0 0 auto; border-radius: 0; object-fit: contain; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-3);
 
  background: var(--surface-2);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn:hover { border-color: var(--line-hover); background: var(--surface-3); }

.btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; }

.btn-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 13, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.wordmark { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }

.wordmark em { font-style: normal; color: var(--accent); }

.nav-links { display: flex; gap: 4px; margin: 0 auto; }

.nav-links a {
  white-space: nowrap;
  position: relative;
  padding: 8px 10px;
 
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover { color: var(--text); background: var(--surface-2); }

.nav-links a.is-active { color: var(--text); }

.nav-links a.is-active::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -12px;
  height: 2px;
  background: var(--accent);
}

.nav-end { display: flex; align-items: center; gap: 12px; }

.nav-sep { width: 1px; height: 20px; background: var(--line-2); }

.btn-outline { border-color: rgba(var(--accent-rgb), 0.55); background: transparent; color: var(--accent); }

.btn-outline:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.social { display: flex; align-items: center; gap: 4px; }

.social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
 
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

/* Telegram Channel / Support: icon plus a short label, so the two are told apart. */
.social a.has-label {
  display: inline-flex;
  gap: 6px;
  width: auto;
  padding: 0 10px 0 8px;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}

.social a:hover { color: var(--text); background: var(--surface-2); }

.menu { display: none; margin-left: auto; }

.menu summary {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-2);
 
  cursor: pointer;
  list-style: none;
}

.menu summary::-webkit-details-marker { display: none; }

.menu-panel {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  padding: 4px 16px 14px;
  border-bottom: 1px solid var(--line-2);
  background: var(--bg);
}

.menu-panel nav { display: flex; flex-direction: column; margin-bottom: 10px; }

.menu-panel nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }

.menu-panel nav a.is-active { color: var(--accent); }

.menu-panel .social { margin-left: -6px; }

.lede { margin-top: 8px; color: var(--muted); font-size: 16px; }

.btn-cta { position: relative; height: 38px; padding: 0 16px; }

.btn-cta > span { display: inline-flex; align-items: center; gap: 8px; }

.btn-cta .i { transition: translate 0.15s; }

.btn-cta:hover .i { translate: 2px 0; }

.kyc { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

.kyc .i { color: var(--muted); }

.guarantee {
  display: inline-flex;
  align-items: center;
  color: #e8c34a;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.section { padding-top: 60px; }

.section h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.section h2 + .panel { margin-top: 16px; }

.fee { font-weight: 650; font-variant-numeric: tabular-nums; }

.faq { max-width: 760px; margin-top: 12px; border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .i { flex: none; color: var(--muted); transition: rotate 0.2s; }

.faq details[open] summary .i { rotate: 180deg; }

.faq details p { padding: 0 24px 14px 0; color: var(--muted); }

.footer { margin-top: 72px; border-top: 1px solid var(--line); }

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-top: 36px;
  padding-bottom: 28px;
}

.footer-col { display: flex; flex-direction: column; gap: 8px; }

.footer-col h3 { margin-bottom: 4px; font-size: 13px; font-weight: 600; }

.footer-col a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }

.footer-col a:hover { color: var(--text); }

.footer-brand { max-width: 340px; }

.footer-brand p { margin-top: 8px; color: var(--muted); font-size: 13.5px; }

.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-top: 14px; padding-bottom: 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: 13px; }

.dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 48px));
  padding: 16px;
  border: 1px solid var(--line-3);
 
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
}

.dialog[open] { display: flex; flex-direction: column; animation: dialog-in 0.22s var(--ease) both; }

.dialog::backdrop { background: rgba(0, 0, 0, 0.7); animation: fade-in 0.2s ease both; }

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
 
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-3);
 
  background: var(--bg);
  color: var(--muted);
}

.search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); }

.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }

.empty { padding-top: 80px; }

.empty h1 { font-size: 26px; font-weight: 700; }

.empty p { margin: 6px 0 20px; color: var(--muted); }

.tag {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0 6px;
  border: 1px solid var(--line-3);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.banner { border-bottom: 1px solid rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); font-size: 14px; }

.banner .container { display: flex; align-items: center; gap: 10px; padding-top: 10px; padding-bottom: 10px; }

.banner .i { color: var(--accent); }

.banner-warning { border-bottom-color: rgba(240, 104, 90, 0.4); background: rgba(240, 104, 90, 0.1); }

.banner-warning .i { color: #f0685a; }

@media (max-width: 900px) {
  .nav-links, .nav-end { display: none; }
  .menu { display: block; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .section { padding-top: 44px; }
  .ex-logo { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.grade {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border: 1px solid currentColor;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.grade-a { color: #3ecf8e; background: rgba(62, 207, 142, 0.12); }
.grade-b { color: #9bd35a; background: rgba(155, 211, 90, 0.12); }
.grade-c { color: #e8c34a; background: rgba(232, 195, 74, 0.12); }
.grade-d { color: #f0a04a; background: rgba(240, 160, 74, 0.12); }
.grade-e { color: #f07a4a; background: rgba(240, 122, 74, 0.12); }
.grade-f { color: #f0585a; background: rgba(240, 88, 90, 0.12); }

.grade-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--muted); font-size: 13px; }

.grade-legend li { display: inline-flex; align-items: center; cursor: help; }

.grade-legend .grade { width: 18px; height: 18px; margin-right: 6px; font-size: 11px; }

/* ---------- swap order and status pages ---------- */

.swap-page { padding-top: 36px; }

.swap-page h1 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--muted); font-size: 14px; }

.back-link .i { rotate: 90deg; }

.back-link:hover { color: var(--text); }

.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; margin-top: 24px; }

.order-submit { width: 100%; height: 46px; }

.order-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.form-error { padding: 10px 12px; border: 1px solid rgba(240, 104, 90, 0.45); background: rgba(240, 104, 90, 0.08); color: #f5998f; font-size: 14px; }

.small { font-size: 13px; }

@media (max-width: 900px) {
  .order-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .swap-page { padding-top: 24px; }
  .swap-page h1 { font-size: 24px; }
}

/* ---------- order page ---------- */

.order-title { display: flex; align-items: center; gap: 16px; }

.order-title p { margin-top: 4px; color: var(--muted); font-size: 15px; }

.order-card {
  position: relative;
  border: 1px solid var(--line-2);
  background: var(--surface);
}

.order-card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0));
}

.order-body { display: flex; flex-direction: column; gap: 20px; padding: 24px; }

.order-page .form-error { display: flex; align-items: flex-start; gap: 10px; }

.order-page .form-error .i { flex: 0 0 auto; margin-top: 2px; }

.order-page .order-submit { height: 52px; font-size: 15.5px; }

.order-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -8px; color: var(--dim); font-size: 13px; }

.order-side { display: flex; flex-direction: column; gap: 16px; }

.side-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line-2); background: var(--surface); }

.side-kicker { color: var(--dim); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.timeline { position: relative; display: flex; flex-direction: column; gap: 16px; counter-reset: tl; }

.timeline::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 11px; width: 1px; background: var(--line-3); }

.timeline li { position: relative; padding-left: 36px; counter-increment: tl; }

.timeline li::before {
  content: counter(tl);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-3);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.timeline li:first-child::before { border-color: var(--accent); color: var(--accent); }

.timeline strong { display: block; font-size: 14px; font-weight: 600; }

.timeline span { color: var(--dim); font-size: 13px; }

@media (max-width: 600px) {
  .order-title { align-items: flex-start; gap: 12px; }
  .order-body { padding: 18px; }
}

.state-panel { display: flex; align-items: flex-start; gap: 16px; }

.state-panel h1, .state-panel h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

.state-panel p { margin-top: 4px; color: var(--muted); font-size: 14.5px; }

.state-panel p strong { color: var(--text); }

.state-panel a { color: var(--accent); }

.state-icon { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-3); color: var(--muted); }

.state-panel.is-good .state-icon { border-color: rgba(62, 207, 142, 0.5); background: rgba(62, 207, 142, 0.12); color: var(--green); }

.state-panel.is-info .state-icon { border-color: rgba(var(--accent-rgb), 0.5); background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }

.state-panel.is-warn .state-icon { border-color: rgba(232, 176, 74, 0.5); background: rgba(232, 176, 74, 0.1); color: #e8b04a; }

.side-text { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.side-text a { color: var(--accent); }

@media (max-width: 600px) {
  .state-icon { width: 40px; height: 40px; }
}

.menu-submit { width: 100%; margin-bottom: 10px; }

/* ---------- submit a service ---------- */

.submit-page .order-body { gap: 18px; }

.sub-step { display: flex; flex-direction: column; gap: 18px; min-width: 0; margin: 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--line-2); }

.sub-step:first-of-type { padding-top: 0; border-top: 0; }

.step-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }

.step-head p { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.step-num { display: block; margin-bottom: 4px; color: var(--accent); font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }

.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.sub-form [hidden] { display: none !important; }

.sub-block { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.sub-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.sub-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; font-weight: 600; }

.sub-label .i { color: var(--dim); }

.sub-label em { color: var(--dim); font-size: 12.5px; font-style: normal; font-weight: 500; }

.sub-label em.kyc-req { color: var(--accent); }

.sub-help, .sub-field small { color: var(--dim); font-size: 12.5px; line-height: 1.45; }

[data-count].is-ok { color: var(--green); }

.sub-field input, .sub-field textarea {
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line-3);
  background: var(--bg);
  font-size: 15px;
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.sub-field input { height: 48px; }

.sub-field textarea { min-height: 120px; padding: 12px 14px; line-height: 1.55; resize: vertical; }

.sub-field input:focus, .sub-field textarea:focus { border-color: rgba(var(--accent-rgb), 0.7); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }

.sub-field input::placeholder, .sub-field textarea::placeholder { color: var(--dim); }

.sub-field.is-invalid input, .sub-field.is-invalid textarea, .is-invalid.cat-picks, .is-invalid.grade-picks, .is-invalid.opt-picks {
  border-color: #f0685a;
  box-shadow: 0 0 0 3px rgba(240, 104, 90, 0.12);
}

.sub-pickfirst { padding: 12px 14px; border: 1px dashed var(--line-3); color: var(--muted); font-size: 14px; }

/* Only the questions for the chosen category show; this works without scripts too. */
.sub-form:has(input[name=category]:checked) .sub-pickfirst { display: none; }
.sub-form:has(input[data-key=exchanges]:checked) [data-cats]:not([data-cats~=exchanges]),
.sub-form:has(input[data-key=aggregators]:checked) [data-cats]:not([data-cats~=aggregators]),
.sub-form:has(input[data-key=wallets]:checked) [data-cats]:not([data-cats~=wallets]),
.sub-form:has(input[data-key=vpn]:checked) [data-cats]:not([data-cats~=vpn]),
.sub-form:has(input[data-key=email]:checked) [data-cats]:not([data-cats~=email]),
.sub-form:has(input[data-key=hosting]:checked) [data-cats]:not([data-cats~=hosting]),
.sub-form:has(input[data-key=domains]:checked) [data-cats]:not([data-cats~=domains]),
.sub-form:has(input[data-key=phone]:checked) [data-cats]:not([data-cats~=phone]),
.sub-form:has(input[data-key=giftcards]:checked) [data-cats]:not([data-cats~=giftcards]),
.sub-form:has(input[data-key=messaging]:checked) [data-cats]:not([data-cats~=messaging]),
.sub-form:has(input[data-key=_]:checked) [data-cats]:not([data-cats~=_]) { display: none; }

/* Address fields open under the feature that needs them. */
.feat-links { display: flex; flex-direction: column; gap: 12px; }

.feat-links:empty { display: none; }

.feat-link { display: none; padding: 14px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-left-width: 3px; background: var(--accent-soft); }

.sub-form:has(#feat-tor:checked) .feat-link-tor,
.sub-form:has(#feat-i2p:checked) .feat-link-i2p,
.sub-form:has(#feat-opensource:checked) .feat-link-opensource { display: flex; }

.sub-form.is-stepped .feat-link:not([hidden]) { display: flex; }

.sub-form.is-stepped .feat-link[hidden] { display: none; }

.feat-link { animation: reveal 0.2s var(--ease); }

@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } }

/* Category cards */
.cat-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 1px solid transparent; }

.cat-pick { position: relative; cursor: pointer; }

.cat-pick input { position: absolute; opacity: 0; pointer-events: none; }

.cat-pick-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-3);
  background: var(--surface-2);
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}

.cat-pick-box > .i { flex: 0 0 auto; margin-top: 1px; color: var(--dim); transition: color 0.15s; }

.cat-pick-box > span:not(.cat-tick) { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }

.cat-pick-box strong { font-weight: 600; line-height: 1.3; }

.cat-pick-box small { color: var(--dim); font-size: 12.5px; line-height: 1.4; }

.cat-tick { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-3); color: transparent; transition: all 0.15s; }

.cat-pick:hover .cat-pick-box { border-color: rgba(255, 255, 255, 0.28); }

.cat-pick input:checked + .cat-pick-box { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.cat-pick input:checked + .cat-pick-box > .i { color: var(--accent); }

.cat-pick input:checked + .cat-pick-box .cat-tick { border-color: var(--accent); background: var(--accent); color: #fff; }

.cat-pick input:focus-visible + .cat-pick-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Option cards (exchange type) */
.opt-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 1px solid transparent; }

.opt-pick, .grade-pick, .seg-pick { position: relative; cursor: pointer; }

.opt-pick input, .grade-pick input, .seg-pick input { position: absolute; opacity: 0; pointer-events: none; }

.opt-box { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px; border: 1px solid var(--line-3); background: var(--surface-2); transition: border-color 0.15s, background 0.15s; }

.opt-box strong { font-size: 14px; font-weight: 600; }

.opt-box small { color: var(--dim); font-size: 12.5px; line-height: 1.4; }

.opt-pick:hover .opt-box, .grade-pick:hover .grade-pick-box, .seg-pick:hover span { border-color: var(--line-hover); }

.opt-pick input:checked + .opt-box, .grade-pick input:checked + .grade-pick-box { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); }

.opt-pick input:focus-visible + .opt-box, .grade-pick input:focus-visible + .grade-pick-box, .seg-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* KYC grades */
.grade-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border: 1px solid transparent; }

.grade-pick-box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--line-3);
  background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}

.grade-pick-box .grade { grid-row: span 2; width: 26px; height: 26px; margin: 0; font-size: 13px; }

.grade-pick-box strong { font-size: 13.5px; }

.grade-pick-box small { color: var(--dim); font-size: 12px; line-height: 1.4; }

/* Segmented choice (liquidity) */
.seg-picks { display: flex; flex-wrap: wrap; gap: 8px; }

.seg-pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-3); background: var(--surface-2); color: var(--muted); font-size: 13.5px; font-weight: 500; transition: all 0.15s; }

.seg-pick input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); color: var(--text); }

/* Feature chips: checkboxes that become the listing's tags. */
.feat-picks { display: flex; flex-wrap: wrap; gap: 8px; }

.feat-pick { position: relative; cursor: pointer; }

.feat-pick input { position: absolute; opacity: 0; pointer-events: none; }

.feat-pick span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px 0 11px;
  border: 1px solid var(--line-3);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.feat-pick .i { opacity: 0.35; transition: opacity 0.15s; }

.feat-pick:hover span { border-color: rgba(255, 255, 255, 0.28); color: var(--text); }

.feat-pick input:checked + span { border-color: rgba(62, 207, 142, 0.55); background: rgba(62, 207, 142, 0.1); color: #7ee2b4; }

.feat-pick input:checked + span .i { opacity: 1; }

.feat-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.submit-page .order-foot { display: block; margin-top: 0; text-align: center; line-height: 1.5; }

.submit-page .order-foot .i { margin-right: 5px; vertical-align: -2px; }

.sub-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Step tabs and navigation. Without scripts they stay hidden and every step shows on one page. */
.step-tabs, .step-bar, .step-back, .step-next, .step-error { display: none; }

.sub-form.is-stepped .step-tabs { display: flex; gap: 2px; margin: 0; padding: 0 12px; overflow-x: auto; border-bottom: 1px solid var(--line-2); scrollbar-width: none; }

.sub-form.is-stepped .step-tabs::-webkit-scrollbar { display: none; }

.step-tabs li { flex: 1 0 auto; }

.step-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 10px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.step-tab:disabled { cursor: default; opacity: 0.55; }

.step-tab:not(:disabled):hover { color: var(--text); }

.step-dot { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-3); font-size: 11.5px; font-weight: 700; transition: all 0.15s; }

.step-tab.is-done { color: var(--muted); }

.step-tab.is-done .step-dot { border-color: rgba(62, 207, 142, 0.55); background: rgba(62, 207, 142, 0.12); color: var(--green); }

.step-tab.is-current { border-bottom-color: var(--accent); color: var(--text); }

.step-tab.is-current .step-dot { border-color: var(--accent); background: var(--accent); color: #fff; }

.sub-form.is-stepped .step-bar { display: none; height: 3px; background: var(--line); }

.step-bar span { display: block; width: 0; height: 100%; background: var(--accent); transition: width 0.3s var(--ease); }

.sub-form.is-stepped .sub-step { padding-top: 0; border-top: 0; }

.sub-form.is-stepped .sub-step[hidden] { display: none; }

.sub-form.is-stepped .step-error:not([hidden]) { display: flex; }

.step-nav { display: flex; gap: 10px; }

.step-nav .btn { height: 50px; font-size: 15px; }

.sub-form.is-stepped .step-back:not([hidden]) { display: inline-flex; flex: 0 0 auto; padding: 0 18px; }

.step-back .i { rotate: 90deg; }

.sub-form.is-stepped .step-next:not([hidden]) { display: inline-flex; flex: 1; justify-content: center; gap: 8px; }

.step-nav .order-submit { flex: 1; width: auto; }

.sub-form.is-stepped .order-submit[hidden] { display: none; }

/* Review */
.review-list { display: flex; flex-direction: column; gap: 10px; }

.review-card { border: 1px solid var(--line-2); background: var(--surface-2); }

.review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }

.review-head strong { font-size: 14px; }

.review-card dl { display: flex; flex-direction: column; padding: 4px 14px; }

.review-card dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }

.review-card dl > div:last-child { border-bottom: 0; }

.review-card dt { color: var(--dim); }

.review-card dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }

.review-empty { padding: 10px 14px; color: var(--dim); font-size: 13.5px; }

.sub-thanks { max-width: 640px; margin-top: 24px; }

.sub-thanks .btn { align-self: flex-start; }

@media (max-width: 900px) {
  .grade-picks { grid-template-columns: 1fr 1fr; }
  /* The form comes first on narrow screens; the tips follow it. */
  .submit-page .order-side { order: 2; }
}

@media (max-width: 600px) {
  .submit-page { padding-bottom: 8px; }
  .submit-page .order-title p { font-size: 14px; }
  .submit-page .order-grid { margin-top: 16px; margin-left: -16px; margin-right: -16px; }
  .submit-page .order-card { border-left: 0; border-right: 0; }
  .submit-page .order-body { padding: 18px 16px; }
  .sub-grid, .grade-picks, .opt-picks, .cat-picks { grid-template-columns: 1fr; }
  .cat-picks { gap: 6px; }
  .cat-pick-box { align-items: center; padding: 12px 14px; }
  .cat-pick-box small { display: none; }
  .cat-pick input:checked + .cat-pick-box small { display: block; }
  /* 16px stops phones from zooming into a field. */
  .sub-field input, .sub-field textarea { font-size: 16px; }
  .step-head h2 { font-size: 18px; }
  .review-card dl > div { grid-template-columns: 1fr; gap: 2px; }

  /* Steps: numbers only, the current one keeps its name; a progress bar sits below. */
  .sub-form.is-stepped .step-tabs { padding: 0 8px; }
  .step-tabs li { flex: 0 0 auto; }
  .step-tabs li:has(.is-current) { flex: 1 0 auto; }
  .step-tab { padding: 13px 8px 11px; }
  .step-tab:not(.is-current) .step-label { display: none; }
  .sub-form.is-stepped .step-bar { display: block; }
  .step-tab.is-current { border-bottom-color: transparent; justify-content: flex-start; }

  /* Back and Next stay within thumb reach. */
  .sub-form.is-stepped .step-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -16px -18px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line-2);
    background: rgba(11, 17, 32, 0.97);
    backdrop-filter: blur(8px);
  }
  .submit-page .side-card { margin: 0 16px; }
  .submit-page .order-side { gap: 12px; }
}

/* ---------- "?" help tips ---------- */

.help-tip {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-left: 3px;
  border-radius: 50%;
  background: #e8c34a;
  color: #03050b;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  cursor: help;
  transition: background 0.15s, box-shadow 0.15s;
}

.help-tip:hover, .help-tip:focus-visible { background: #f2d36a; box-shadow: 0 0 0 3px rgba(232, 195, 74, 0.25); outline: 0; }

.tip-pop {
  position: fixed;
  z-index: 200;
  max-width: 260px;
  padding: 9px 12px;
  border: 1px solid rgba(232, 195, 74, 0.45);
  background: var(--surface-3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  pointer-events: none;
  animation: fade-in 0.12s ease both;
}

.tip-pop::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow, 50%);
  width: 8px;
  height: 8px;
  border-right: 1px solid rgba(232, 195, 74, 0.45);
  border-bottom: 1px solid rgba(232, 195, 74, 0.45);
  background: var(--surface-3);
  transform: translate(-50%, -4px) rotate(45deg);
}

.tip-pop.is-below::after { top: auto; bottom: 100%; transform: translate(-50%, 4px) rotate(225deg); }

.guarantee .help-tip { position: relative; top: -1px; }

/* ---------- legal pages ---------- */

.legal { max-width: 780px; padding-top: 40px; }

.legal-head h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

.legal-meta { margin-top: 6px; color: var(--dim); font-size: 13.5px; }

.legal-head .lede { margin-top: 14px; }

.legal-toc { margin-top: 24px; padding: 16px 20px; border: 1px solid var(--line-2); background: var(--surface); }

.legal-toc ol { columns: 2; column-gap: 28px; }

.legal-toc li { padding: 3px 0; font-size: 14px; break-inside: avoid; }

.legal-toc a { color: var(--muted); }

.legal-toc a:hover { color: var(--accent); }

.legal section { padding-top: 32px; scroll-margin-top: 80px; }

.legal h2 { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; }

.legal p, .legal li { color: var(--muted); font-size: 15px; line-height: 1.7; }

.legal p { margin-top: 10px; }

.legal strong { color: var(--text); font-weight: 600; }

.legal ul { margin-top: 10px; padding-left: 20px; list-style: disc; }

.legal li { padding: 2px 0; }

.legal li::marker { color: var(--accent); }

.legal a, .footer-bottom a, .order-foot a { color: var(--accent); }

.legal a:hover, .footer-bottom a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .legal { padding-top: 28px; }
  .legal-head h1 { font-size: 26px; }
  .legal-toc ol { columns: 1; }
}

/* Guarantee colours: yellow = third-party aggregators, green = held by KYCHunter. */
.guarantee.is-ours { color: var(--green); }

.guarantee.is-ours .help-tip { background: var(--green); }

th .help-tip { position: relative; top: -1px; }

/* ---------- mobile and tablet fit ---------- */

/* The full navbar (links + labelled socials + Submit) needs about 1050px; below that use the menu. */
@media (max-width: 1080px) {
  .nav-links, .nav-end { display: none; }
  .menu { display: block; }
}

.menu-panel .social { flex-wrap: wrap; row-gap: 4px; }

/* Bigger touch target for the small "?" without changing how it looks. */
.help-tip::after { content: ''; position: absolute; inset: -8px; }

.help-tip { position: relative; }

@media (max-width: 600px) {
  .order-title h1, .legal-head h1 { overflow-wrap: anywhere; }
}

/* ---------- liquidity column ---------- */

.liq { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

.liq-own { color: var(--green); }

/* Orange for a mix of own and third-party funds; red-orange for third-party only. */
.liq-mixed { color: #f0973a; }

.liq-third { color: #e8674a; }

/* The "?" after Mixed / Third-party LP takes the label's colour. */
.liq-mixed .help-tip { margin-left: 4px; background: #f0973a; }

.liq-third .help-tip { margin-left: 4px; background: #e8674a; }

/* Two guarantees side by side: green (with KYCHunter) + yellow (with third parties). */
.guarantees { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }

.g-plus { color: var(--dim); font-size: 13px; font-weight: 600; }

/* ---------- link directory (homepage) ---------- */

.dir-hero { padding-top: 36px; }

.dir-hero h1 { max-width: 720px; font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

.dir-hero .lede { max-width: 620px; margin-top: 6px; font-size: 15.5px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  padding: 3px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dir-search { display: flex; gap: 8px; max-width: 620px; margin-top: 18px; }

.dir-search .search { flex: 1; height: 44px; background: var(--surface); font-size: 15px; }

.dir-search .btn { height: 44px; padding: 0 20px; }

.dir-search kbd {
  padding: 0 6px;
  border: 1px solid var(--line-3);
  color: var(--dim);
  font: 600 12px/20px var(--font);
}

.search input::-webkit-search-cancel-button { filter: grayscale(1); }

.dir-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 12px; font-size: 13.5px; }

.dir-popular span { color: var(--dim); }

.dir-popular a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }

.dir-popular a:hover { color: var(--accent); text-decoration-color: currentColor; }

.dir-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; padding-top: 32px; }

/* Sticky sidebar; on shorter screens it scrolls on its own instead of being cut off. */
.dir-side {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3) transparent;
}

.dir-cats, .dir-filters { padding: 0; }

.dir-cats h2, .dir-filters h2 { margin: 0 0 6px; color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.dir-cats ul { display: flex; flex-direction: column; }

/* Categories: a plain list of names with a count. */
.dir-cats a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  color: var(--muted);
  font-size: 15px;
  transition: color 0.15s;
}

.dir-cats a > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.dir-cats a > .i { display: none; }

.dir-cats .n { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }

.dir-cats a:hover { color: var(--text); }

.dir-cats li.is-current a { color: var(--text); font-weight: 600; }

.dir-cats li.is-current .n { color: var(--muted); font-weight: 400; }

.dir-cats li.is-empty a { opacity: 0.4; pointer-events: none; }

/* Filters: real-looking checkboxes tied to the search form, so they also work without scripts.
   The tick is drawn with borders: the CSP blocks data: images. --cb is the box size, --cb-x its left offset. */
.dir-filters ul { display: flex; flex-direction: column; gap: 1px; }

.dir-f { position: relative; display: block; cursor: pointer; }

.dir-f input { position: absolute; opacity: 0; pointer-events: none; }

.dir-f > span {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  --cb: 16px;
  --cb-x: 0px;
  min-height: 30px;
  padding: 4px 0;
  color: var(--muted);
  font-size: 14.5px;
  transition: color 0.15s, background 0.15s;
}

.dir-f > span::before {
  content: '';
  flex: none;
  width: var(--cb);
  height: var(--cb);
  box-sizing: border-box;
  border: 1px solid var(--line-3);
  background: var(--bg);
  transition: background-color 0.15s, border-color 0.15s;
}

.dir-f > span::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--cb-x) + var(--cb) * 0.36);
  width: calc(var(--cb) * 0.26);
  height: calc(var(--cb) * 0.5);
  border: solid #0b1120;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translateY(-62%) rotate(45deg) scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}

.dir-f input:checked + span::after { opacity: 1; transform: translateY(-62%) rotate(45deg); }

.dir-f .i { display: none; }

.dir-f > span > span:first-of-type { flex: 1; }

.dir-f .n { color: var(--dim); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.dir-f:hover > span { color: var(--text); }

.dir-f:hover > span::before { border-color: var(--muted); }

.dir-f input:checked + span { color: var(--text); }

.dir-f input:checked + span::before {
  border-color: var(--accent);
  background: var(--accent);
}

.dir-f input:checked + span .n { color: var(--muted); }

.dir-f input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -2px; }

.dir-f-apply { margin: 10px 0 2px; }

.js .dir-f-apply { display: none; }

.dir-side-cta { padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }

.dir-side-cta strong { display: block; font-size: 14px; }

.dir-side-cta p { margin: 2px 0 12px; color: var(--muted); }

/* On shorter screens the side box would push the filters out of the sticky sidebar; the submit box under the listings stays. */
@media (max-height: 1000px) {
  .dir-side-cta { display: none; }
}

.dir-main { min-width: 0; }

/* Filtering hides cards; the browser's scroll anchoring would then shift the page on its own. */
.dir-layout { overflow-anchor: none; }

.dir-count { margin-bottom: 20px; color: var(--muted); font-size: 14.5px; }

.dir-count .n, .dir-count .q { color: var(--text); font-weight: 600; }

.dir-clear { margin-left: 8px; color: var(--accent); }

.dir-clear:hover { text-decoration: underline; }

.dir-sec { scroll-margin-top: 80px; }

.dir-sec + .dir-sec, .dir-main > #services { margin-top: 48px; }

.dir-main > #services { scroll-margin-top: 80px; }

.dir-sec-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }

.dir-sec-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--line-2); color: var(--muted); }

.dir-sec.is-main .dir-sec-icon { border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); }

.dir-sec-head h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; line-height: 1.3; }

.dir-sec.is-main .dir-sec-head h2 { font-size: 22px; }

.dir-sec-count { color: var(--dim); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }

.dir-sec-count::before { content: '('; }

.dir-sec-count::after { content: ')'; }

.dir-sec-head p { color: var(--muted); font-size: 14px; }

.dir-sub { margin: 20px 0 0; color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.dir-sec > .dir-group:first-of-type:not(:has(.dir-sub)) { margin-top: 14px; }

.dir-group .grade-legend { margin-top: 12px; }

/* Instant exchanges. */
.xc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 10px; }

.xc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
}

.xc:hover { border-color: var(--line-3); }

.xc.is-featured { border-color: rgba(var(--accent-rgb), 0.55); }

.xc-top { display: flex; align-items: center; gap: 12px; }

.xc-top .ex-logo { width: 40px; height: 40px; }

.xc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; flex: 1; min-width: 0; line-height: 1.35; }

.xc-name strong { font-size: 16px; font-weight: 600; }

.xc-name .tag { margin-top: 0; }

.xc-name small { flex-basis: 100%; color: var(--dim); font-size: 12.5px; }

.xc-top .kyc { font-size: 13px; }

.xc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.xc-stats dt { color: var(--dim); font-size: 12px; }

.xc-stats dd { margin: 1px 0 0; font-size: 14px; font-weight: 600; }

.xc-stats dd .liq { font-size: 14px; }

.xc-stats .dim { font-weight: 500; }

.xc-actions { display: flex; gap: 8px; margin-top: auto; }

.xc-actions .btn { flex: 1; }

.xc-actions .btn .i { color: inherit; }

/* Other listings. */
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }

.dir-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
}

.dir-card:hover { border-color: var(--line-3); background: var(--surface-2); }

.dir-top { display: flex; align-items: center; gap: 12px; }

.dir-top .dir-name { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }

.dir-top strong { font-size: 15px; font-weight: 600; }

.dir-top small { color: var(--dim); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dir-top > .i { flex: none; color: var(--dim); }

.dir-card:hover .dir-top > .i { color: var(--accent); }

.dir-logo { width: 36px; height: 36px; flex: none; object-fit: contain; }

.dir-letter { display: grid; place-items: center; background: var(--surface-3); color: var(--muted); font-weight: 700; }

.dir-card p { color: var(--muted); font-size: 14px; line-height: 1.5; }

.dir-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }

.dir-tags span { padding: 1px 7px; border: 1px solid var(--line-2); color: var(--muted); font-size: 12px; font-weight: 600; }

.dir-tags .is-xmr { color: var(--accent); }

.dir-tags .is-good { color: var(--green); }

.dir-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); text-align: center; }

.dir-none > .i { display: none; }

.dir-none strong { display: block; color: var(--text); }

.dir-none a { color: var(--accent); }

.dir-main [hidden], .dir-cats [hidden] { display: none !important; }

/* Submit box above the FAQ. */
.dir-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 60px; padding: 20px; border: 1px solid var(--line-2); background: var(--surface); }

.dir-cta h2 { font-size: 18px; font-weight: 700; }

.dir-cta p { max-width: 560px; margin-top: 4px; color: var(--muted); font-size: 14.5px; }

.dir-cta .btn { flex: none; }

.dir-faq { padding-top: 60px; }

.dir-faq-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.dir-faq-head p { display: none; }

@media (max-width: 900px) {
  .dir-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 18px; }
  .dir-side { position: static; min-width: 0; }
  .dir-cats h2, .dir-filters h2, .dir-side-cta { display: none; }
  .dir-cats, .dir-filters { padding: 0; border: 0; background: none; }
  .dir-filters { margin-top: -8px; }
  .dir-filters ul { flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 -24px; padding: 0 24px 2px; scrollbar-width: none; }
  .dir-filters ul::-webkit-scrollbar { display: none; }
  .dir-f > span { --cb: 14px; --cb-x: 12px; gap: 8px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line-2); white-space: nowrap; font-size: 14px; }
  .dir-f .n { display: none; }
  .dir-f input:checked + span { border-color: var(--muted); }
  .dir-cats ul { flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
  .dir-cats ul::-webkit-scrollbar { display: none; }
  .dir-cats a { align-items: center; gap: 6px; min-height: 38px; padding: 6px 12px; border: 1px solid var(--line-2); white-space: nowrap; font-size: 14.5px; }
  .dir-cats .n { font-size: 12px; }
  .dir-cats li.is-current a { border-color: var(--muted); font-weight: 500; }
  .dir-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
  .dir-hero { padding-top: 22px; }
  .dir-hero .lede { font-size: 15px; }
  /* The filter chips cover the same ground, and the listings start sooner without it. */
  .dir-popular { display: none; }
  .dir-hero h1 { font-size: 26px; }
  .dir-search .btn, .dir-search kbd { display: none; }
  .dir-cats ul { margin: 0 -16px; padding: 0 16px 4px; }
  .dir-sec-head { align-items: flex-start; }
  .xc-grid, .dir-grid { grid-template-columns: 1fr; }
  .dir-cta .btn { width: 100%; }
  .dir-faq { padding-top: 44px; }
}

/* ---------- price bar at the bottom ---------- */

:root { --tickerbar-h: 28px; }

body { padding-bottom: calc(var(--tickerbar-h) + env(safe-area-inset-bottom)); }

.tickerbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: rgba(6, 8, 13, 0.9);
  backdrop-filter: blur(8px);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.tickerbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--tickerbar-h); }

.tk-main, .tk-end { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }

.tk-xmr { flex: none; transition: filter 0.2s, opacity 0.2s; }

.tickerbar.is-off .tk-xmr { filter: grayscale(1); opacity: 0.5; }

.tk-price { color: var(--text); font-weight: 600; }

.tk-price.flash-up { animation: tk-up 1.2s; }

.tk-price.flash-down { animation: tk-down 1.2s; }

@keyframes tk-up { 0%, 40% { color: var(--green); } }

@keyframes tk-down { 0%, 40% { color: #f0685a; } }

.tk-change { font-weight: 500; }

.tk-change.is-up { color: var(--green); }

.tk-change.is-down { color: #f0685a; }

.tk-alt, .tk-updated { color: var(--dim); }

.tk-alt { padding-left: 8px; border-left: 1px solid var(--line-2); }

.tk-btn {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.15s;
}

.tk-btn:hover { color: var(--text); }

.tk-btn[hidden] { display: none; }

.js .tk-btn[data-tk-top]:not(.is-shown) { display: none; }

.tk-btn.is-spinning .i { animation: tk-spin 0.7s linear infinite; }

@keyframes tk-spin { to { rotate: 360deg; } }

@media (max-width: 420px) {
  .tk-wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-price.flash-up, .tk-price.flash-down, .tk-btn.is-spinning .i { animation: none; }
}

/* The submit form's Back/Next bar sits just above the price bar. */
@media (max-width: 600px) {
  .sub-form.is-stepped .step-nav { bottom: var(--tickerbar-h); padding-bottom: 12px; }
}

/* ---------- Verified badge and Recommended listings ---------- */

.vbadge { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: help; }

.vbadge.is-verified { color: #4cb4ff; }

.vbadge.is-unverified { color: var(--dim); font-weight: 500; }

.vbadge.is-unverified .i { opacity: 0.8; }

/* The badge always sits on its own line under the name, so every card in a grid lines up the same. */
.dir-title { display: flex; flex-wrap: wrap; align-items: center; gap: 1px 7px; min-width: 0; }

.dir-title strong { flex-basis: 100%; }

.dir-title strong { overflow-wrap: anywhere; }

.xc-name .vbadge { margin-left: -1px; }

/* Recommended: an orange frame and a label sitting on the top edge, in the grid gap. */
.xc, .dir-card { position: relative; }

.xc.is-recommended, .dir-card.is-recommended {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.07), rgba(var(--accent-rgb), 0) 60%), var(--surface);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12), 0 8px 24px -12px rgba(var(--accent-rgb), 0.35);
}

.dir-card.is-recommended:hover { border-color: var(--accent); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0) 60%), var(--surface-2); }

.xc.is-recommended:hover { border-color: var(--accent); }

.rec-ribbon {
  position: absolute;
  top: -9px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* ---------- phones and tablets ---------- */

/* The open menu dims the page behind it. */
.menu-panel { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55); }

.menu[open] summary { border-color: var(--line-3); background: var(--surface-2); }

.menu[open]::before { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.5); }

@media (max-width: 900px) {
  /* The category chips stay under the header while scrolling the listings. */
  .dir-side { display: contents; }
  .dir-cats {
    position: sticky;
    top: var(--nav-h, 64px);
    z-index: 20;
    margin: 0 -24px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    background: rgba(6, 8, 13, 0.97);
  }
  .dir-cats ul { margin: 0; padding: 0 24px; }
  /* html's scroll-padding already clears the header and chips; the margins would add to it. */
  .dir-sec, .dir-main > #services { scroll-margin-top: 0; }
  html { scroll-padding-top: calc(var(--nav-h, 64px) + 66px); }
}

@media (max-width: 600px) {
  :root { --nav-h: 56px; }
  .nav-inner { height: var(--nav-h); }
  .menu-panel { top: var(--nav-h); max-height: calc(100dvh - var(--nav-h) - var(--tickerbar-h)); overflow-y: auto; overscroll-behavior: contain; }
  .menu-panel nav a { padding: 13px 0; font-size: 16px; }
  .menu-submit { height: 44px; font-size: 14.5px; }
  .menu-panel .social a { height: 44px; }

  .dir-cats { margin: 0 -16px; }
  .dir-cats ul { padding: 0 16px; gap: 6px; }
  .dir-filters ul { margin: 0 -16px; padding: 0 16px 2px; gap: 6px; }
  .dir-f > span { --cb-x: 11px; padding: 6px 11px; font-size: 13.5px; }
  .dir-cats a { padding: 6px 11px; font-size: 14px; }

  /* 16px text stops phones from zooming into a field when it is tapped. */
  .search input, .dir-search .search { font-size: 16px; }
  .dir-search .search { height: 48px; }


  .dir-sec-head h2, .dir-sec.is-main .dir-sec-head h2 { font-size: 19px; }
  .dir-sec-head p { font-size: 13.5px; }
  .dir-sec + .dir-sec, .dir-main > #services { margin-top: 40px; }

  /* Exchange cards: a little tighter so more fits on screen. */
  .xc { gap: 10px; padding: 12px; }
  .xc-top .ex-logo { width: 36px; height: 36px; }
  .xc-stats { gap: 8px 12px; padding: 8px 0; }
  .xc-actions .btn { height: 44px; }
  .dir-card { padding: 12px; }
  .dir-grid, .xc-grid { gap: 12px; }

  .faq summary { padding: 15px 0; }
  .faq details p { padding-right: 0; }

  .footer { margin-top: 56px; }
  .footer-inner { gap: 24px 16px; padding-top: 28px; }
  .footer-col { gap: 0; }
  .footer-col a { padding: 7px 0; min-width: 0; overflow-wrap: anywhere; }
  .footer-bottom a { display: inline-block; padding: 6px 2px; }
  .back-link { padding: 6px 0; margin-bottom: 8px; }

  .tk-btn { width: 32px; height: var(--tickerbar-h); }

  .legal-toc { padding: 12px 16px; }
  .legal-toc li { padding: 0; }
  .legal-toc a { display: block; padding: 6px 0; }
}

@media (max-width: 360px) {
  .dir-hero h1 { font-size: 23px; }
  .xc-stats { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .wordmark { font-size: 17px; }
}

/* Phones have no hover; keep taps from leaving cards stuck in their hover look. */
@media (hover: none) {
  .dir-card:hover { border-color: var(--line-2); background: var(--surface); }
  .dir-card:active { background: var(--surface-2); }
}

/* ---------- category and listing pages ---------- */

.seo-page { padding-top: 28px; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 0; color: var(--dim); font-size: 13.5px; }

.crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--line-3); }

.crumbs a { color: var(--muted); }

.crumbs a:hover { color: var(--accent); }

.crumbs [aria-current] { color: var(--dim); }

.seo-head { display: flex; align-items: center; gap: 14px; margin-top: 18px; }

.seo-head .dir-sec-icon { width: 46px; height: 46px; border-color: rgba(var(--accent-rgb), 0.45); color: var(--accent); }

.seo-head h1, .lst-title h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

.seo-count { margin-top: 2px; color: var(--dim); font-size: 14px; }

.seo-intro { max-width: 760px; margin-top: 18px; }

.seo-intro p { color: var(--muted); font-size: 16px; line-height: 1.65; }

.seo-intro p + p { margin-top: 10px; }

.seo-listings { margin-top: 28px; }

.seo-listings > .dir-sub:first-child { margin-top: 0; }

.seo-faq, .seo-related, .seo-alts { margin-top: 56px; }

.seo-faq h2, .seo-related h2, .seo-alts h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.seo-faq .faq { margin-top: 8px; }

.seo-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 14px; }

.seo-cats a { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 14.5px; }

.seo-cats a:hover { border-color: var(--line-3); color: var(--text); }

.seo-cats .i { color: var(--dim); }

.dir-more { margin-top: 12px; font-size: 14px; }

.dir-more a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--accent); font-weight: 600; }

.dir-more a:hover { text-decoration: underline; }

.seo-page .dir-cta { margin-top: 56px; }

.xc-actions .btn:not(.btn-primary) { flex: 0 0 auto; }

/* Listing page */
.lst-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }

.lst-head .ex-logo, .lst-head .dir-logo { width: 64px; height: 64px; }

.lst-head .dir-letter { font-size: 26px; }

.lst-title { flex: 1; min-width: 0; }

.lst-title h1 { overflow-wrap: anywhere; }

.lst-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 14px; }

.lst-meta .vbadge { font-size: 12.5px; }

.lst-rec { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.lst-visit { height: 46px; padding: 0 20px; }

.lst-desc { max-width: 760px; margin-top: 18px; color: var(--text); font-size: 17px; line-height: 1.6; }

.lst-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-top: 24px; border: 1px solid var(--line-2); background: var(--surface); }

.lst-facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }

.lst-facts > div:nth-child(odd) { border-right: 1px solid var(--line); }

.lst-facts dt { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.lst-facts dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }

.lst-facts dd small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; }

.lst-facts dd a { color: var(--accent); }

.lst-facts .dir-tags { margin-top: 2px; }

.lst-note { display: flex; gap: 8px; max-width: 860px; margin-top: 14px; color: var(--dim); font-size: 13.5px; }

.lst-note .i { margin-top: 3px; }

.footer-inner:has(.footer-cats) { grid-template-columns: 1.6fr 0.8fr 1.3fr 1fr; }

.footer-cats { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px 20px; }

.footer-cats h3 { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .footer-inner:has(.footer-cats) { grid-template-columns: 1fr 1fr; }
  .footer-cats { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 600px) {
  .seo-page { padding-top: 18px; }
  .seo-head h1, .lst-title h1 { font-size: 25px; }
  .seo-head .dir-sec-icon { width: 40px; height: 40px; }
  .seo-intro p { font-size: 15px; }
  .seo-faq, .seo-related, .seo-alts, .seo-page .dir-cta { margin-top: 44px; }
  .seo-faq h2, .seo-related h2, .seo-alts h2 { font-size: 19px; }
  .seo-cats { grid-template-columns: minmax(0, 1fr); }
  .lst-head { gap: 12px; }
  .lst-head .ex-logo, .lst-head .dir-logo { width: 52px; height: 52px; }
  .lst-visit { flex-basis: 100%; height: 48px; }
  .lst-desc { font-size: 16px; }
  .lst-facts { grid-template-columns: minmax(0, 1fr); }
  .lst-facts > div:nth-child(odd) { border-right: 0; }
  .footer-inner:has(.footer-cats) { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .footer-cats { gap: 0 16px; }
}

/* ---------- guides ---------- */

.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-top: 14px; }

.guide-card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border: 1px solid var(--line-2); background: var(--surface); }

.guide-card:hover { border-color: var(--line-3); background: var(--surface-2); }

.guide-card strong { font-size: 15.5px; font-weight: 650; line-height: 1.35; }

.guide-card:hover strong { color: var(--accent); }

.guide-card span { color: var(--muted); font-size: 14px; line-height: 1.5; }

.seo-listings > .guide-cards { margin-top: 0; }

.dir-guides { margin-top: 60px; }

.dir-guides-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.dir-guides-head h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.dir-guides-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 14px; font-weight: 600; }

.guide { max-width: 780px; padding-top: 28px; }

.guide-head { margin-top: 18px; }

.guide-head h1 { font-size: 34px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

.guide-head .lede { margin-top: 12px; font-size: 17px; line-height: 1.6; }

.guide section { padding-top: 34px; scroll-margin-top: 80px; }

.guide h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }

.guide section p, .guide section li { color: var(--muted); font-size: 16px; line-height: 1.7; }

.guide section p { margin-top: 10px; }

.guide section strong { color: var(--text); font-weight: 600; }

.guide section a, .guide-tip a { color: var(--accent); }

.guide section a:hover { text-decoration: underline; }

.guide section > ul:not([class]) { margin-top: 10px; padding-left: 20px; list-style: disc; }

.guide section > ul:not([class]) li { padding: 3px 0; }

.guide section > ul:not([class]) li::marker { color: var(--accent); }

.guide-list { display: flex; flex-direction: column; margin-top: 12px; border: 1px solid var(--line-2); background: var(--surface); }

.guide-list li { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px !important; line-height: 1.55 !important; }

.guide-list li:last-child { border-bottom: 0; }

.guide-list a { font-weight: 600; }

.guide-steps { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; counter-reset: gs; }

.guide-steps > li { position: relative; padding-left: 42px; counter-increment: gs; }

.guide-steps > li::before {
  content: counter(gs);
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

.guide-steps > li > strong { display: block; color: var(--text); font-size: 16px; }

.guide-steps > li > p { margin-top: 2px !important; }

.guide-tip { display: flex; gap: 10px; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-left-width: 3px; background: var(--accent-soft); color: var(--text) !important; font-size: 15px; line-height: 1.55; }

.guide-tip .i { flex: none; margin-top: 3px; color: var(--accent); }

.guide > .guide-tip { margin-top: 40px; }

.guide-grades { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.guide-grades li { display: flex; align-items: flex-start; gap: 4px; }

.guide-grades .grade { flex: none; margin-top: 4px; }

.guide-table { margin-top: 14px; overflow-x: auto; border: 1px solid var(--line-2); background: var(--surface); }

.guide-table table { min-width: 460px; font-size: 14.5px; }

.guide-table th, .guide-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }

.guide-table thead th { color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.guide-table tbody th { color: var(--muted); font-weight: 500; }

.guide-table tr:last-child > * { border-bottom: 0; }

.guide-related { margin-top: 48px; }

.guide-related h2 { font-size: 19px; font-weight: 700; }

.guide .legal-toc { margin-top: 22px; }

@media (max-width: 600px) {
  .guide { padding-top: 18px; }
  .guide-head h1 { font-size: 26px; }
  .guide-head .lede { font-size: 16px; }
  .guide section p, .guide section li { font-size: 15px; }
  .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .dir-guides { margin-top: 44px; }
  .guide-steps > li { padding-left: 38px; }
}

/* =====================================================================
   KYCHunter: dark navy, flat blue accent, rounded surfaces, icons.
   ===================================================================== */

::selection { background: rgba(var(--accent-rgb), 0.35); color: #fff; }

html { scrollbar-color: var(--line-3) var(--bg); }

/* ---------- rounded surfaces ---------- */

.btn, .search, .panel, .dir-none, .dir-cta, .guide-card, .seo-cats a, .menu-panel, .order-card, .side-card,
.cat-pick-box, .opt-box, .grade-pick-box, .state-panel, .form-error, .guide-tip, .lst-note, .legal-toc,
.sub-field input, .sub-field textarea, .review-card, .lst-facts, .tip-pop, .xc, .dir-card { border-radius: var(--r-lg); }

.btn, .btn-sm, .seg-pick span, .feat-pick span, .dir-sec-icon, .menu summary, .tk-btn { border-radius: var(--r-sm); }

.ex-logo, .dir-logo, .dir-letter { border-radius: 8px; }

.grade { border-radius: 5px; }

.dir-tags span, .tag, .eyebrow, .rec-ribbon { border-radius: 999px; }

.dir-f > span::before { border-radius: 4px; }

/* ---------- buttons ---------- */

.btn { transition: background 0.15s, border-color 0.15s, color 0.15s; }

.btn-primary { border-color: var(--accent); background: var(--accent); color: #fff; }

.btn-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

.btn-outline { border-color: var(--line-3); color: var(--text); }

.btn-outline:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); color: #fff; }

.btn .i { color: inherit; opacity: 0.9; }

/* ---------- brand ---------- */

.mark { flex: none; color: var(--accent); }

.wordmark { font-weight: 800; letter-spacing: -0.02em; }

.wordmark em { font-style: normal; color: var(--accent); }

.mark-ring, .mark-ticks, .mark-dot { transform-box: view-box; transform-origin: 32px 32px; }

/* ---------- opening screen ---------- */
/* A plain black page with only the logo: the ring draws, the ticks lock on, the dot lands, the name slides out.
   After two seconds it fades and the site shows. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #000;
  animation: loader-out 0.45s ease 2s forwards;
}

.kh-skip .loader { display: none; }

.loader-brand { display: flex; align-items: center; gap: 14px; }

.loader-svg { color: var(--accent); }

.loader-svg .mark-ring { stroke-dasharray: 101; stroke-dashoffset: 101; transform: rotate(-90deg); animation: ld-ring 0.75s cubic-bezier(0.6, 0, 0.3, 1) 0.15s forwards; }

.loader-svg .mark-ticks { opacity: 0; transform: rotate(-45deg) scale(1.25); animation: ld-ticks 0.5s cubic-bezier(0.3, 0, 0.2, 1) 0.65s forwards; }

.loader-svg .mark-dot { transform: scale(0); animation: ld-dot 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) 1s forwards; }

.loader-word {
  display: inline-block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: translateX(-8px);
  animation: ld-word 0.6s cubic-bezier(0.3, 0, 0.2, 1) 0.8s forwards;
}

.loader-word em { font-style: normal; color: var(--accent); }

@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
@keyframes ld-ring { to { stroke-dashoffset: 0; } }
@keyframes ld-ticks { to { opacity: 1; transform: none; } }
@keyframes ld-dot { to { transform: scale(1); } }
@keyframes ld-word { to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }

/* The page comes in gently once the opening screen fades; later pages of the visit come in straight away. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.dir-hero-inner > *, .seo-page > *, .guide > *, .submit-page > * { animation: rise 0.5s ease both; }

:is(.dir-hero-inner, .seo-page, .guide, .submit-page) > :nth-child(2) { --rise: 50ms; }
:is(.dir-hero-inner, .seo-page, .guide, .submit-page) > :nth-child(3) { --rise: 100ms; }
:is(.dir-hero-inner, .seo-page, .guide, .submit-page) > :nth-child(4) { --rise: 150ms; }
:is(.dir-hero-inner, .seo-page, .guide, .submit-page) > :nth-child(n+5) { --rise: 200ms; }

.kh-skip :is(.dir-hero-inner, .seo-page, .guide, .submit-page) > * { animation-delay: var(--rise, 0ms); }
html:not(.kh-skip) :is(.dir-hero-inner, .seo-page, .guide, .submit-page) > * { animation-delay: calc(2.1s + var(--rise, 0ms)); }

/* ---------- hero ---------- */

.dir-hero { padding: 48px 0 32px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }

.dir-hero h1 { max-width: 760px; font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; }

.dir-hero .lede { max-width: 620px; margin-top: 10px; font-size: 16px; }

.dir-search { margin-top: 22px; }

.dir-search .search { height: 48px; background: var(--bg); }

.dir-search .search:focus-within { border-color: var(--accent); }

.dir-search .btn { height: 48px; padding: 0 22px; }

.dir-search kbd { border-radius: 4px; }

.dir-popular a { padding: 2px 10px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; transition: border-color 0.15s, color 0.15s; }

.dir-popular a:hover { border-color: var(--line-hover); color: var(--text); }

.hero-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-stats > div { display: flex; align-items: center; gap: 12px; min-width: 190px; padding: 12px 16px 12px 12px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }

.hs-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

.hero-stats dt { color: var(--muted); font-size: 12.5px; }

.hero-stats dd { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* ---------- sidebar: icons back on, plus sort ---------- */

.dir-cats a > .i { display: block; color: var(--dim); }

.dir-cats a { gap: 10px; }

.dir-cats li.is-current a > .i { color: var(--accent); }

.dir-cats li.is-current a { color: var(--text); }

.dir-f .i { display: block; flex: none; color: var(--dim); }

.dir-f input:checked + span .i { color: var(--accent); }

.dir-sort h2 { margin: 0 0 8px; color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.select-wrap { position: relative; display: block; }

.select-wrap select {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.select-wrap select:hover { border-color: var(--line-hover); }

.select-wrap select:focus-visible { border-color: var(--accent); outline: 0; }

.select-wrap .i { position: absolute; top: 50%; right: 11px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }

/* ---------- sections and cards ---------- */

.dir-sec-icon { background: var(--surface); }

.dir-sec.is-main .dir-sec-icon { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.1); }

.dir-sec-count { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; }

.dir-sec-count::before, .dir-sec-count::after { content: none; }

.xc, .dir-card { background: var(--surface); transition: border-color 0.15s, background 0.15s; }

.xc:hover, .dir-card:hover { border-color: var(--line-hover); background: var(--surface-2); }

.xc-stats { border-color: var(--line-2); }

.xc-stats dt { display: flex; align-items: center; gap: 5px; }

.xc-stats dt .i { color: var(--dim); }

.dir-tags span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; }

.dir-tags .i { color: var(--dim); }

.dir-tags .is-xmr { color: var(--text); }

.dir-tags .is-good { border-color: rgba(62, 207, 142, 0.3); }

.dir-tags .is-good .i { color: var(--green); }

.vbadge.is-verified { color: #4c95ff; }

.dir-cta { padding: 24px; background: var(--surface); }

.dir-cta h2 { font-size: 19px; }

.guide-card { transition: border-color 0.15s; }

.guide-card:hover { border-color: var(--line-hover); }

.dir-guides .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Cards fade in as they scroll into view (app.js adds .rv-on only when it can watch them). */
.rv-on :is(.xc, .dir-grid > li, .kyc-step, .kyc-card, .guide-card) {
  transition: opacity 0.45s ease var(--rv-d, 0ms), transform 0.45s ease var(--rv-d, 0ms), border-color 0.15s, background 0.15s;
}

.rv-on :is(.xc, .dir-grid > li, .kyc-step, .kyc-card, .guide-card):not(.is-in) { opacity: 0; transform: translateY(10px); }

/* Without social links in the header, the divider before Submit has nothing to divide. */
.nav-end > .social:not(:has(li)) + .nav-sep { display: none; }

/* ---------- KYC score section ---------- */

.kyc-sec { margin-top: 72px; scroll-margin-top: 80px; }

.sec-head { max-width: 660px; }

.sec-kicker { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--accent); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.sec-head h2 { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }

.sec-head p { margin-top: 6px; color: var(--muted); font-size: 15.5px; }

.kyc-scale { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }

.kyc-step { position: relative; display: flex; flex-direction: column; gap: 6px; overflow: hidden; padding: 16px 14px 14px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); --tone: #3ecf8e; }

.kyc-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tone); }

.kyc-step:nth-child(2) { --tone: #9bd35a; }
.kyc-step:nth-child(3) { --tone: #e8c34a; }
.kyc-step:nth-child(4) { --tone: #f0a04a; }
.kyc-step:nth-child(5) { --tone: #f07a4a; }
.kyc-step:nth-child(6) { --tone: #f0585a; }

.kyc-step .grade { width: 32px; height: 32px; margin-bottom: 2px; font-size: 15px; }

.kyc-step strong { font-size: 15px; }

.kyc-step p { flex: 1; color: var(--muted); font-size: 13px; line-height: 1.45; }

.kyc-n { margin-top: 4px; color: var(--dim); font-size: 12.5px; }

.kyc-n a { color: var(--accent); }

.kyc-n a:hover { text-decoration: underline; }

.kyc-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }

.kyc-card { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }

.kyc-card-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }

.kyc-card strong { font-size: 15px; }

.kyc-card p { margin-top: 3px; color: var(--muted); font-size: 14px; }

.kyc-card .liq { font-weight: 600; }

/* ---------- price bar with coin icons ---------- */

.tk-main { gap: 0; }

.tk-coin { display: inline-flex; align-items: center; gap: 6px; }

.tk-coin + .tk-coin { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--line-2); }

.tk-sym { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-weight: 700; }

.coin { flex: none; display: block; }

.tickerbar.is-off .coin { filter: grayscale(1); opacity: 0.5; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .kyc-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .dir-sort { display: flex; align-items: center; gap: 10px; }
  .dir-sort h2 { margin: 0; white-space: nowrap; }
  .select-wrap { flex: 1; max-width: 260px; }
  .dir-cats a, .dir-f > span { border-radius: 999px; }
  .dir-cats a > .i { display: none; }
  .dir-cats li.is-current a { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }
  .dir-f input:checked + span { border-color: var(--accent); }
}

@media (max-width: 760px) {
  .tk-wide { display: none; }
}

@media (max-width: 600px) {
  .dir-hero { padding: 30px 0 24px; }
  .dir-hero h1 { font-size: 28px; }
  .dir-hero .lede { font-size: 15px; }
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .hero-stats > div { min-width: 0; padding: 10px; gap: 10px; }
  .hs-icon { width: 32px; height: 32px; }
  .hero-stats dd { font-size: 18px; }
  .hero-stats dt { font-size: 11.5px; line-height: 1.3; }
  .kyc-sec { margin-top: 52px; }
  .sec-head h2 { font-size: 22px; }
  .kyc-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kyc-extra { grid-template-columns: minmax(0, 1fr); }
  .dir-guides .guide-cards { grid-template-columns: minmax(0, 1fr); }
  .loader-word { font-size: 28px; }
  .loader-svg { width: 42px; height: 42px; }
  .dir-cta { padding: 20px; }
}

@media (max-width: 520px) {
  .tk-coin .tk-change, .tk-updated { display: none; }
  .tk-coin + .tk-coin { margin-left: 10px; padding-left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .dir-hero-inner > *, .seo-page > *, .guide > *, .submit-page > * { animation: none; }
  /* The opening screen still shows the logo for two seconds and leaves, without the movement. */
  .loader { animation: loader-out 0.3s ease 2s forwards !important; }
  .loader-word { opacity: 1; clip-path: none; transform: none; }
  .loader-svg .mark-ring { stroke-dashoffset: 0; }
  .loader-svg .mark-ticks, .loader-svg .mark-dot { opacity: 1; transform: none; }
}

.lst-facts dt { display: flex; align-items: center; gap: 6px; }

.lst-facts dt .i { color: var(--accent); }

/* =====================================================================
   One exchange per row, no sidebar, plain bottom half (2026-10-05).
   ===================================================================== */

.dir-layout.is-single { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }

/* ---------- instant exchanges as rows ---------- */

.xc-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.xc-head, .xc {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.9fr) 160px;
  align-items: center;
  gap: 16px;
}

.xc-head { margin-top: 16px; padding: 0 17px 4px; color: var(--dim); font-size: 12px; font-weight: 600; }

.xc { position: relative; padding: 14px 16px; }

.xc.is-recommended { margin-top: 8px; }

.xc-main { display: flex; align-items: center; gap: 12px; min-width: 0; }

.xc-main .ex-logo { width: 40px; height: 40px; }

.xc-name { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; line-height: 1.35; }

.xc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }

.xc-title strong { font-size: 15.5px; font-weight: 600; }

.xc-name small { overflow: hidden; color: var(--dim); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }

.xc-col { min-width: 0; font-size: 14px; font-weight: 600; }

.xc-col .dim { font-weight: 500; }

.xc-col .kyc { font-size: 13.5px; }

.xc-label { display: none; }

.xc-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 0; }

.xc-actions .btn { flex: none; }

/* ---------- peer-to-peer listings as rows ---------- */

:is(.dir-layout, .seo-listings) .dir-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }

:is(.dir-layout, .seo-listings) .dir-card {
  display: grid;
  grid-template-columns: 40px minmax(150px, 210px) minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 4px 16px;
  padding: 14px 16px;
}

:is(.dir-layout, .seo-listings) .dir-top { display: contents; }

:is(.dir-layout, .seo-listings) .dir-logo { grid-row: 1; grid-column: 1; }

:is(.dir-layout, .seo-listings) .dir-name { grid-row: 1; grid-column: 2; }

:is(.dir-layout, .seo-listings) .dir-card p { grid-row: 1; grid-column: 3; font-size: 13.5px; }

:is(.dir-layout, .seo-listings) .dir-tags { grid-row: 1; grid-column: 4; margin: 0; justify-content: flex-end; }

:is(.dir-layout, .seo-listings) .dir-top > .i { grid-row: 1; grid-column: 5; }

/* ---------- plain bottom half ---------- */

.kyc-sec { margin-top: 56px; }

.kyc-sec h2, .dir-guides h2, .dir-faq h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.kyc-intro { margin-top: 4px; color: var(--muted); font-size: 14.5px; }

.kyc-table { margin-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; }

.kyc-table td, .kyc-table th { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }

.kyc-table th { padding-right: 20px; font-weight: 600; white-space: nowrap; }

.kyc-table td:first-child { width: 40px; }

.kyc-table .grade { width: 24px; height: 24px; font-size: 12.5px; }

.kyc-desc { color: var(--muted); }

.kyc-n { padding-right: 0 !important; text-align: right !important; white-space: nowrap; }

.kyc-n a { color: var(--accent); }

.kyc-n a:hover { text-decoration: underline; }

.dir-guides { margin-top: 48px; }

.guide-list-plain { margin-top: 10px; border-top: 1px solid var(--line-2); }

.guide-list-plain li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }

.guide-list-plain a { font-size: 15px; font-weight: 600; }

.guide-list-plain a:hover { color: var(--accent); }

.guide-list-plain span { color: var(--muted); font-size: 14px; }

.dir-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--surface); }

.dir-submit p { color: var(--muted); font-size: 14.5px; }

.dir-submit strong { color: var(--text); }

.dir-faq { padding-top: 48px; }

.footer { margin-top: 64px; }

.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-top: 22px; padding-bottom: 18px; }

.footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

.footer-links a { color: var(--muted); font-size: 14px; }

.footer-links a:hover { color: var(--text); }

.footer-bottom { justify-content: flex-start; padding-top: 12px; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .xc-head { display: none; }
  .xc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 14px; }
  .xc-main { grid-column: 1 / -1; }
  .xc-label { display: block; margin-bottom: 1px; color: var(--dim); font-size: 11.5px; font-weight: 500; }
  .xc-actions { grid-column: 1 / -1; justify-content: stretch; }
  .xc-actions .btn { flex: 1; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: calc(var(--nav-h, 64px) + 12px); }
}

@media (max-width: 760px) {
  :is(.dir-layout, .seo-listings) .dir-card { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 8px 12px; }
  :is(.dir-layout, .seo-listings) .dir-card p { grid-row: 2; grid-column: 1 / -1; }
  :is(.dir-layout, .seo-listings) .dir-tags { grid-row: 3; grid-column: 1 / -1; justify-content: flex-start; }
  :is(.dir-layout, .seo-listings) .dir-top > .i { grid-column: 3; }
}

@media (max-width: 600px) {
  .xc { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px; }
  .xc-actions .btn { height: 42px; }
  .kyc-desc { display: none; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}


/* =====================================================================
   Plainer top, bigger rows, larger opening logo (2026-10-05).
   ===================================================================== */

/* Opening screen: the plain version, a little larger. */
.loader-brand { gap: 18px; }

.loader-word { font-size: 44px; }

/* Top of the page: a heading, one line, the counts and the search. Nothing else. */
.dir-hero { padding: 36px 0 8px; border-bottom: 0; background: none; }

.dir-hero h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }

.dir-hero .lede { margin-top: 6px; font-size: 15.5px; }

.hero-count { margin-top: 6px; color: var(--dim); font-size: 13.5px; }

.dir-search { max-width: 560px; margin-top: 18px; }

.dir-search .search, .dir-search .btn { height: 44px; }

.dir-layout.is-single { padding-top: 20px; }

.dir-sec-head { display: block; padding-bottom: 10px; }

.dir-sec-head h2, .dir-sec.is-main .dir-sec-head h2 { font-size: 20px; font-weight: 700; }

.dir-sec-count { padding: 0; background: none; color: var(--dim); font-size: 15px; font-weight: 500; }

.dir-sec-head p { margin-top: 2px; }

/* Bigger exchange rows. */
.xc-head { padding: 0 21px 4px; font-size: 12.5px; }

.xc { padding: 18px 20px; }

.xc-main { gap: 14px; }

.xc-main .ex-logo { width: 48px; height: 48px; }

.xc-title strong { font-size: 17px; }

.xc-name small { font-size: 13px; }

.xc-col { font-size: 15px; }

.xc-col .kyc { font-size: 14.5px; }

.xc-actions .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

:is(.dir-layout, .seo-listings) .dir-card { padding: 18px 20px; grid-template-columns: 48px minmax(150px, 220px) minmax(0, 1fr) auto 16px; }

:is(.dir-layout, .seo-listings) .dir-logo { width: 48px; height: 48px; }

:is(.dir-layout, .seo-listings) .dir-top strong { font-size: 16px; }

:is(.dir-layout, .seo-listings) .dir-card p { font-size: 14px; }

@media (max-width: 760px) {
  :is(.dir-layout, .seo-listings) .dir-card { grid-template-columns: 48px minmax(0, 1fr) 16px; }
}

@media (max-width: 600px) {
  .loader-word { font-size: 32px; }
  .loader-svg { width: 48px; height: 48px; }
  .dir-hero { padding-top: 24px; }
  .dir-hero h1 { font-size: 24px; }
  .xc { padding: 14px; }
  .xc-main .ex-logo { width: 42px; height: 42px; }
  :is(.dir-layout, .seo-listings) .dir-card { padding: 14px; }
}

@media (max-width: 600px) {
  .hero-count { display: none; }
}