/* ============================================================
   CoinStats — /api/crypto-wallet/ (Wallet API sub-page)
   Page-specific layer on top of api-site.css + v2.css.
   Reuses DS tokens (--cs-*). Light theme, sibling of /crypto-api/.
   ============================================================ */

/* hard guard: never allow horizontal scroll on the page */
html, body, .api { max-width: 100%; overflow-x: hidden; }
/* NOTE: .dhub must stay overflow:visible (like the /api/ page) — its edge
   cards (Aave, Lido) extend past the diagram box and were being clipped.
   The body-level overflow-x:hidden above is the real horizontal-scroll guard. */
.whero .hubviz { overflow: hidden; }

/* ── comparison: semantic table (snippet-eligible) ──────── */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px;
  box-shadow: 0 0 0 1px rgb(62 53 91 / 8%), 0 18px 44px rgb(62 53 91 / 8%); }
.wtable { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--cs-bg); }
.wtable th, .wtable td { padding: 15px 18px; text-align: center; border-bottom: 1px solid rgb(62 53 91 / 8%); font-size: 14.5px; color: var(--cs-text); vertical-align: middle; }
.wtable tbody tr:last-child th, .wtable tbody tr:last-child td { border-bottom: 0; }
.wtable thead th { font-family: var(--cs-font-display); font-weight: 700; font-size: 16px; color: var(--cs-purple-ink-deep); padding-top: 20px; padding-bottom: 20px; }
.wtable th[scope="row"] { text-align: left; font-weight: 600; color: var(--cs-purple-ink-deep); position: sticky; left: 0; background: var(--cs-bg); z-index: 2; }
.wtable thead th:first-child { text-align: left; position: sticky; left: 0; background: var(--cs-bg); z-index: 3; }
.wtable .ic { display: inline-block; width: 21px; height: 21px; vertical-align: middle; }
.wtable .yes { color: var(--cs-green); }
.wtable .no { color: #F14A5A; }
.wtable .cmp__txt-strong { color: var(--cs-text); font-weight: var(--cs-fw-regular); }
.wtable .cmp__bad { color: #F14A5A; }
.wtable .cmp__best { color: var(--cs-text); font-weight: var(--cs-fw-regular); }
@media (max-width: 600px) { .wtable { min-width: 560px; } .wtable th, .wtable td { padding: 12px 13px; font-size: 13.5px; } .wtable thead th { font-size: 14.5px; } }

/* breadcrumb */
.crumb { font-size: 13px; color: var(--cs-purple-ink); display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 18px; }
.crumb a { color: var(--cs-purple-ink); }
.crumb a:hover { color: var(--cs-purple); }
.crumb .sep { opacity: .5; }

/* hero layout: copy left, address-resolve console right */
.whero .wrap { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 48px; align-items: start; }
@media (max-width: 960px) { .whero .wrap { grid-template-columns: 1fr; gap: 40px; } }
.whero .crumb { justify-content: flex-start; }
@media (max-width: 960px) { .whero .crumb { justify-content: center; } .whero .hero__copy { text-align: center; } .whero .hero__cta { justify-content: center; } }

/* Trustpilot widget spans exactly the width of the two hero CTAs.
   Wrapper shrinks to its widest child (the button row); the widget fills it
   at 100% (percentage width doesn't feed back into the wrapper's intrinsic
   sizing, so the CTAs drive the width). Trustpilot logo anchored right. */
.hero__ctawrap { width: fit-content; max-width: 100%; }
.hero__ctawrap .hero__cta { width: 100%; }
/* widget spans the 2-CTA width; bumped ~1.15x so its content fills that width
   (no awkward gap before "Trustpilot"); space-between keeps "Great…" at the left
   edge and "Trustpilot" at the right edge with even spacing between. */
.tpilot { display: flex; width: 100%; justify-content: space-between; font-size: 14px; }
.tpilot__stars i { width: 18px; height: 18px; }
.tpilot__brand svg { width: 17px; height: 17px; }
@media (max-width: 960px) { .whero .hero__ctawrap { margin-inline: auto; } }

/* ── chain chips (address picker) ───────────────────────── */
.wd { background: var(--cs-bg); border: 1px solid rgb(62 53 91 / 10%); border-radius: 22px;
  box-shadow: 0 24px 60px rgb(62 53 91 / 12%); overflow: hidden; }
.wd__chips { display: flex; gap: 5px; padding: 14px 12px 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.wd__chips::-webkit-scrollbar { display: none; }
.wd__chip { flex-shrink: 0; }
.wd__chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid rgb(62 53 91 / 12%);
  background: var(--cs-bg); color: var(--cs-text-muted); font-family: var(--cs-font-body); font-weight: 600;
  font-size: 12px; border-radius: 999px; padding: 6px 10px; transition: all .15s; }
.wd__chip:hover { border-color: rgb(62 53 91 / 28%); color: var(--cs-purple-ink); }
.wd__chip.active { background: var(--cs-purple-ink); color: #fff; border-color: var(--cs-purple-ink); }
.wd__chip img { width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 30%); }
.wd__chip.is-star { position: relative; }
.wd__chip.is-star::after { content: "xpub"; position: absolute; top: -7px; right: -6px; font-family: var(--cs-font-display);
  font-size: 8px; font-weight: 800; letter-spacing: .03em; color: #fff; background: var(--cs-gradient-button);
  border-radius: 999px; padding: 1px 5px; box-shadow: 0 2px 6px rgb(255 96 133 / 40%); }

/* request bar */
.wd__req { display: flex; align-items: center; gap: 10px; padding: 14px; }
.wd__method { font-family: var(--cs-font-mono, ui-monospace, "SF Mono", Menlo, monospace); font-weight: 700; font-size: 10.5px;
  letter-spacing: .04em; color: var(--cs-green); background: rgb(52 179 73 / 12%); border: 1px solid rgb(52 179 73 / 28%);
  border-radius: 6px; padding: 4px 8px; flex-shrink: 0; }
.wd__addr { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  color: var(--cs-text); background: var(--cs-surface-lilac); border-radius: 9px; padding: 9px 11px; overflow: hidden; }
.wd__addr .wd__path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wd__addr b { flex-shrink: 0; white-space: nowrap; }
.wd__addr b { color: var(--cs-purple); font-weight: 600; }
.wd__send { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 0; color: #fff;
  font-family: var(--cs-font-display); font-weight: 600; font-size: 13.5px; border-radius: 999px; padding: 9px 16px;
  background: var(--cs-gradient-button); box-shadow: 0 8px 20px rgb(255 96 133 / 28%); transition: transform .12s, opacity .15s; }
.wd__send:hover { transform: translateY(-1px); } .wd__send:disabled { opacity: .6; transform: none; cursor: default; }
.wd__send .ic { width: 14px; height: 14px; background: #fff; -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.wd__spin { width: 13px; height: 13px; border: 2px solid rgb(255 255 255 / 45%); border-top-color: #fff; border-radius: 50%; animation: wdspin .7s linear infinite; }
@keyframes wdspin { to { transform: rotate(360deg); } }

/* body: json + rendered card */
.wd__body { border-top: 1px solid rgb(62 53 91 / 8%); display: grid; grid-template-columns: 0.8fr 1.2fr; }
@media (max-width: 540px) { .wd__body { grid-template-columns: 1fr; }
  .wd__stage { order: -1; border-bottom: 1px solid rgb(255 255 255 / 9%); }
  .wd__json { border-bottom: 0 !important; } }
.wd__json { padding: 16px; border-right: 1px solid rgb(62 53 91 / 8%); background: #1b1530; overflow: hidden;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 1.7; min-height: 250px; }
@media (max-width: 540px) { .wd__json { border-right: 0; border-bottom: 1px solid rgb(62 53 91 / 8%); } }
.wd__json .ln { opacity: 0; transform: translateY(3px); transition: opacity .25s, transform .25s; }
.wd__json.run .ln { opacity: 1; transform: none; }
.wd__json .k { color: #c7a4ff; } .wd__json .s { color: #8fd98a; } .wd__json .n { color: #ffb37a; }
.wd__json .p { color: #6b6480; } .wd__json .c { color: #5b6472; font-style: italic; }
.wd__stage { padding: 16px; display: flex; align-items: center; justify-content: center; background: var(--cs-surface-lilac); }
.wd__lat { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--cs-text-subtle); padding: 0 14px 12px; opacity: 0; transition: opacity .3s; }
.wd__lat.show { opacity: 1; } .wd__lat b { color: var(--cs-green); }

/* rendered wallet app card */
.wcard { width: 100%; max-width: 360px; opacity: 0; transform: scale(.97); transition: opacity .4s var(--cs-ease, cubic-bezier(.25,.1,.25,1)), transform .4s var(--cs-ease, cubic-bezier(.25,.1,.25,1)); }
.wcard.show { opacity: 1; transform: none; }
.wcard__panel { background: #fff; border-radius: 16px; padding: 15px; box-shadow: 0 14px 36px rgb(62 53 91 / 16%); }
.wcard__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wcard__chain { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #1a1430; background: #f3f1f9; border-radius: 999px; padding: 4px 9px; }
.wcard__chain img { width: 13px; height: 13px; border-radius: 50%; }
.wcard__derived { font-size: 10.5px; color: var(--cs-purple); font-weight: 700; }
.wcard__total { font-family: var(--cs-font-display); font-weight: 700; font-size: 26px; color: #1a1430; margin-top: 10px; line-height: 1; }
.wcard__chg { font-size: 12px; font-weight: 600; color: var(--cs-green); margin-top: 5px; }
.wcard__chg.neg { color: var(--cs-red); }
.wcard__tabs { display: flex; gap: 3px; margin-top: 13px; background: #f3f1f9; border-radius: 9px; padding: 3px; }
.wcard__tab { flex: 1 1 0; border: 0; cursor: pointer; background: transparent; border-radius: 7px; padding: 6px 0;
  font-family: var(--cs-font-body); font-weight: 600; font-size: 11px; color: #6b6480; transition: all .15s; white-space: nowrap; }
.wcard__tab.active { background: #fff; color: var(--cs-purple-ink); box-shadow: 0 1px 4px rgb(62 53 91 / 12%); }
.wcard__rows { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 132px; }
.wrow { display: flex; align-items: center; gap: 10px; }
.wrow__ic { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: #f3f1f9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wrow__ic img { width: 26px; height: 26px; }
.wrow__ic .g { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.wrow__id { min-width: 0; }
.wrow__sym { font-weight: 600; font-size: 12.5px; color: #1a1430; white-space: nowrap; }
.wrow__sub { font-size: 10.5px; color: #8a8499; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.wrow__val { margin-left: auto; text-align: right; }
.wrow__usd { font-weight: 600; font-size: 12.5px; color: #1a1430; }
.wrow__usd.pos { color: var(--cs-green); } .wrow__usd.neg { color: var(--cs-red); }
.wrow__q { font-size: 10.5px; color: #8a8499; margin-top: 1px; }

/* ── xpub fan-out diagram (Bitcoin section) ─────────────── */
.xpub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 34px; max-width: 720px; margin: 0 auto; }
.xpub > div:first-child { max-width: 640px; }
.xpub .wfeat__eyebrow { justify-content: center; }
.xpub .wfeat__list { text-align: left; display: inline-flex; margin: 18px auto 0; }
.xpubviz { width: 100%; max-width: 480px; text-align: left; }
.xpubviz { position: relative; background: linear-gradient(180deg, #fff, var(--cs-surface-lilac)); border: 1px solid rgb(62 53 91 / 8%);
  border-radius: 22px; padding: 26px; box-shadow: 0 18px 44px rgb(62 53 91 / 10%); }
.xpubviz__key { display: flex; align-items: center; gap: 11px; background: var(--cs-purple-ink); border-radius: 14px; padding: 13px 15px; color: #fff; }
.xpubviz__key .btc { width: 30px; height: 30px; flex-shrink: 0; }
.xpubviz__key code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #fff; word-break: break-all; line-height: 1.4; }
.xpubviz__key .tag { font-size: 10px; font-weight: 700; color: var(--cs-orange); display: block; margin-bottom: 2px; letter-spacing: .04em; }
.xpubviz__fan { position: relative; height: 22px; margin: 2px 0; }
.xpubviz__fan svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xpubviz__list { display: flex; flex-direction: column; gap: 8px; }
.xderiv { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid rgb(62 53 91 / 9%); border-radius: 11px; padding: 9px 12px;
  opacity: 1; transform: none; }
.xderiv code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--cs-text); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xderiv--sum { background: var(--cs-surface-lilac); border-style: dashed; }
.xderiv--sum code, .xderiv--sum .amt { color: var(--cs-purple); }
.xderiv .amt { font-family: var(--cs-font-display); font-weight: 700; font-size: 12.5px; color: #1a1430; flex-shrink: 0; }
.xderiv .path { font-family: ui-monospace, monospace; font-size: 10px; color: var(--cs-text-subtle); flex-shrink: 0; }

/* ── feature blocks (centered, matching /api/ center logic) ── */
.wfeat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; max-width: 720px; margin: 0 auto; }
.wfeat > div:not(.wfeat__visual) { order: 0; max-width: 640px; }
.wfeat__visual { order: 1; width: 100%; max-width: 520px; }
.wfeat__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--cs-font-body); font-weight: 700;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-purple); margin-bottom: 14px; }
.wfeat__eyebrow .ic { width: 16px; height: 16px; background: var(--cs-purple); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.wfeat h2 { font-family: var(--cs-font-display); font-weight: 700; color: var(--cs-purple-ink-deep); font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.015em; }
.wfeat p { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--cs-text); }
.wfeat__list { margin: 18px auto 0; display: inline-flex; flex-direction: column; gap: 10px; text-align: left; }
.wfeat__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--cs-text-strong); }
.wfeat__list .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; background: var(--cs-green); -webkit-mask: url(https://unpkg.com/lucide-static@latest/icons/check.svg) center/contain no-repeat; mask: url(https://unpkg.com/lucide-static@latest/icons/check.svg) center/contain no-repeat; }

/* mock visuals inside feature rows */
.wmock { background: #fff; border: 1px solid rgb(62 53 91 / 8%); border-radius: 18px; padding: 18px; box-shadow: 0 16px 40px rgb(62 53 91 / 10%); }
.wmock__lbl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a8499; margin-bottom: 12px; }
.wmock__row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-top: 1px solid rgb(62 53 91 / 6%); }
.wmock__row:first-of-type { border-top: 0; }
.wmock__ic { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--cs-surface-lilac); }
.wmock__ic .ic { width: 16px; height: 16px; background: var(--cs-purple); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.wmock__t { font-size: 13px; font-weight: 600; color: #1a1430; }
.wmock__s { font-size: 11.5px; color: #8a8499; margin-top: 1px; }
.wmock__v { margin-left: auto; text-align: right; font-weight: 700; font-size: 13px; color: #1a1430; font-family: var(--cs-font-display); }
.wmock__v.pos { color: var(--cs-green); } .wmock__v.neg { color: var(--cs-red); }

/* risk score gauge */
.riskbar { height: 8px; border-radius: 999px; background: var(--cs-gray-10); overflow: hidden; margin: 10px 0 4px; }
/* token-risks table card */
.rtab { background: #fff; border: 1px solid rgb(62 53 91 / 8%); border-radius: 20px; padding: 22px; box-shadow: 0 16px 40px rgb(62 53 91 / 10%); text-align: left; }
.rtab__ep { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-text-subtle); margin-bottom: 16px; }
.rtab__score { display: flex; align-items: baseline; justify-content: space-between; }
.rtab__score-l { font-family: var(--cs-font-display); font-weight: 700; font-size: 15px; color: var(--cs-purple-ink-deep); }
.rtab__score-v { font-family: var(--cs-font-display); font-weight: 800; font-size: 19px; color: var(--cs-orange); }
.rtab__bar { height: 7px; border-radius: 999px; background: var(--cs-gray-10); overflow: hidden; margin: 10px 0 16px; }
.rtab__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cs-green), var(--cs-orange)); }
.rtab__head { display: grid; grid-template-columns: 1fr 88px 116px; gap: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-text-subtle); padding-bottom: 8px; text-align: left; }
.rtab__row { display: grid; grid-template-columns: 1fr 88px 116px; gap: 14px; align-items: center; padding: 9px 11px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--cs-text-strong); text-align: left; }
.rtab__row.flag { background: rgb(255 147 50 / 9%); }
.rtab__rl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cs-text-muted); }
.rbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.rbars i { width: 3px; background: var(--cs-gray-20); border-radius: 1px; }
.rbars i:nth-child(1){height:5px} .rbars i:nth-child(2){height:8px} .rbars i:nth-child(3){height:12px}
.rbars.low i:nth-child(1){background:var(--cs-green)}
.rbars.med i:nth-child(-n+2){background:var(--cs-orange)}
.rbars.high i{background:var(--cs-red)}
.rbadge-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cs-green); background: rgb(52 179 73 / 12%); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.rbadge-no { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--cs-red); background: rgb(234 57 67 / 12%); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.rbadge-ok .ic, .rbadge-no .ic { width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }
.riskbar i { display: block; height: 100%; border-radius: 999px; background: var(--cs-green); }
.riskfind { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--cs-text); padding: 6px 0; }
.riskfind .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── use-case cards ─────────────────────────────────────── */
.wuse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .wuse { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wuse { grid-template-columns: 1fr; } }
.wuse a { display: block; text-decoration: none; background: var(--cs-bg); border: 1px solid rgb(62 53 91 / 8%);
  border-radius: 16px; padding: 22px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.wuse a:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgb(62 53 91 / 10%); border-color: rgb(147 93 235 / 30%); }
.wuse__ic { width: 42px; height: 42px; border-radius: 11px; background: var(--cs-surface-lilac); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.wuse__ic .ic { width: 21px; height: 21px; background: var(--cs-purple); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.wuse h3 { font-family: var(--cs-font-display); font-weight: 600; font-size: 16px; color: var(--cs-purple-ink-deep); margin: 0 0 5px; }
.wuse p { font-size: 13px; color: var(--cs-text-muted); line-height: 1.5; margin: 0; }

/* ── comparison (semantic table) ────────────────────────── */
.wcmp-wrap { overflow-x: auto; border: 1px solid rgb(62 53 91 / 10%); border-radius: 16px; background: var(--cs-bg); }
.wcmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; }
.wcmp th, .wcmp td { text-align: left; padding: 15px 18px; border-bottom: 1px solid rgb(62 53 91 / 8%); }
.wcmp thead th { font-family: var(--cs-font-body); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--cs-text-subtle); font-weight: 700; background: var(--cs-surface-lilac); }
.wcmp tbody td { color: var(--cs-text-muted); }
.wcmp tbody tr:last-child td { border-bottom: 0; }
.wcmp tbody th[scope="row"] { font-weight: 600; color: var(--cs-purple-ink-deep); font-family: var(--cs-font-display); }
.wcmp .feat td, .wcmp .feat th { background: transparent; }
.wcmp .feat th[scope="row"] { color: var(--cs-purple-ink-deep); }
.wcmp .yes { color: var(--cs-green); font-weight: 600; }
.wcmp .no { color: var(--cs-red); }
.wcmp .hl { color: var(--cs-green); font-weight: 600; }
.wcmp__note { font-size: 12.5px; color: var(--cs-text-subtle); text-align: center; margin-top: 14px; }

/* "Featured on" review strip (BeInCrypto editorial pick) */
.featured { display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 40px auto 0;
  background: #fff; border: 1px solid rgb(62 53 91 / 9%); border-radius: 13px; padding: 11px 16px;
  box-shadow: 0 8px 24px rgb(62 53 91 / 7%); text-decoration: none; transition: transform .18s var(--cs-ease), box-shadow .18s var(--cs-ease); }
.featured:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(62 53 91 / 12%); }
.featured__logo { flex-shrink: 0; height: 16px; width: auto; object-fit: contain; padding-right: 12px; border-right: 1px solid rgb(62 53 91 / 12%); filter: brightness(0); opacity: .72; }
.featured__txt { flex: 1; font-size: 11.5px; line-height: 1.45; color: var(--cs-text); text-align: left; }
.featured__txt b { color: var(--cs-purple-ink-deep); font-weight: var(--cs-fw-semibold); }
.featured__arrow { width: 14px; height: 14px; flex-shrink: 0; background: var(--cs-purple); }
@media (max-width: 560px) { .featured { flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; }
  .featured__logo { border-right: 0; border-bottom: 1px solid rgb(62 53 91 / 12%); padding: 0 0 10px; } }

/* page-local section title centering reuse */
.pnl__cta { display: flex; justify-content: center; margin-top: 48px; }
#compare .wsec-head { max-width: 860px; }
.pnl__cta .cs-btn { height: 42px; padding: 10px 31px; font-size: 14px; }
.wsec-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.wsec-head .cs-badge { margin-bottom: 16px; }
.wsec-head .pnl__ep { margin-bottom: 18px; }
.wsec-head h2 { font-family: var(--cs-font-display); font-weight: 700; color: var(--cs-purple-ink-deep); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -0.018em; }
.wsec-head h2 b { background: none; -webkit-text-fill-color: currentColor; color: inherit; font-weight: inherit; }
.wsec-head p { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--cs-text); }

/* related/parent link strip */
.wrelated { text-align: center; }
.wrelated__card { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  background: var(--cs-surface-lilac); border: 1px solid rgb(147 93 235 / 16%); border-radius: 16px; padding: 18px 24px; }
.wrelated__card p { margin: 0; font-size: 15px; color: var(--cs-text); }
.wrelated__card b { color: var(--cs-purple-ink-deep); }

/* Live Demo section — exact /api/ demo background wash */
#wdemo.sec--lilac { background: linear-gradient(180deg, #ffffff 0%, #f8f4fd 30%, #fcf9f9 68%, #ffffff 100%); }

/* static (always-visible) P&L-style cards copied into the Portfolio section */
/* reveal-on-scroll like /api/ Advanced P&L cards */
.pnl__cards--static .wm { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--cs-ease), transform .5s var(--cs-ease); }
.pnl__cards--static.in .wm { opacity: 1; transform: none; }
.pnl__cards--static .wm:nth-child(2) { transition-delay: .1s; }
.pnl__cards--static .wm:nth-child(3) { transition-delay: .2s; }
.pnl__cards--static .wm__row { opacity: 0; transform: translateX(8px); transition: opacity .4s var(--cs-ease), transform .4s var(--cs-ease); }
.pnl__cards--static.in .wm__row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .pnl__cards--static .wm, .pnl__cards--static .wm__row { opacity: 1; transform: none; } }
/* navy card treatment */
:is(.pnl__cards--static, #pnlCards) .wm { background: var(--cs-purple-ink); }
:is(.pnl__cards--static, #pnlCards) .pnl__label { color: rgb(255 255 255 / 55%); }
:is(.pnl__cards--static, #pnlCards) .wm__wallet { background: rgb(255 255 255 / 12%); color: #fff; }
:is(.pnl__cards--static, #pnlCards) .wm__wallet .ic { background: #fff; }
:is(.pnl__cards--static, #pnlCards) .wm__total { color: #fff; }
:is(.pnl__cards--static, #pnlCards) .wm__chg { color: rgb(255 255 255 / 70%); }
:is(.pnl__cards--static, #pnlCards) .wm__sym { color: #fff; }
:is(.pnl__cards--static, #pnlCards) .wm__sub { color: rgb(255 255 255 / 55%); }
:is(.pnl__cards--static, #pnlCards) .wm__usd { color: #fff; }
:is(.pnl__cards--static, #pnlCards) .wm__row { border-color: rgb(255 255 255 / 10%); }

/* Portfolio benefit cards (affiliate-style dark cards + white inner panel) */
.wbenefits { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
@media (max-width: 880px) { .wbenefits { max-width: 420px; margin: 48px auto 0; } }
.wbcard { position: relative; overflow: hidden; border-radius: 28px; padding: 28px 26px; background: var(--cs-purple-ink); width: 330px;
  display: flex; flex-direction: column; min-height: 400px; }
.wbcard::before { content: ""; position: absolute; left: 50%; bottom: -34%; width: 130%; height: 56%; transform: translateX(-50%);
  pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgb(255 147 50 / 32%), transparent 70%); }
.wbcard:nth-child(2)::before { background: radial-gradient(50% 50% at 50% 50%, rgb(255 96 133 / 32%), transparent 70%); }
.wbcard:nth-child(3)::before { background: radial-gradient(50% 50% at 50% 50%, rgb(147 93 235 / 36%), transparent 70%); }
.wbcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wbcard__name { font-family: var(--cs-font-display); font-weight: 700; font-size: 25px; line-height: 1.12; color: #fff; margin: 0; }
.wbpanel { position: relative; z-index: 1; margin-top: auto; background: #fff; border-radius: 16px; padding: 15px; box-shadow: 0 -2px 24px rgb(0 0 0 / 14%); }
.wbp__top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #6b6480; font-weight: 600; }
.wbp__total { font-family: var(--cs-font-display); font-weight: 700; font-size: 24px; color: #1a1430; margin-top: 10px; text-align: center; }
.wbp__chg { font-size: 12px; font-weight: 600; color: var(--cs-green); text-align: center; margin-top: 2px; }
.wbp__spark { width: 100%; height: 46px; display: block; margin-top: 8px; }
.wbp__perf { width: 100%; height: 64px; display: block; margin-top: 10px; }
.wbp__tf { display: flex; justify-content: space-between; font-size: 9.5px; color: #8a8499; font-weight: 600; margin-top: 8px; }
.wbp__tf b { color: #1a1430; }
.wbp__lbl { font-size: 13px; font-weight: 700; color: #1a1430; }
.wbp__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 12px 0 14px; }
.wbp__bar i { display: block; height: 100%; }
.wbp__arow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #1a1430; padding: 5px 0; }
.wbp__arow .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.wbp__arow b { margin-left: auto; font-weight: 700; }
.wbp__legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 10px; color: #6b6480; margin-top: 10px; }
.wbp__legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 3px; }

/* ============================================================
   Global background wash (copied from /api/): one continuous
   vertical lilac gradient down the page; sections transparent.
   White cards/console/tables pop against it; no hard seams.
   ============================================================ */
/* EXACT /api/ background: white base, each section paints its own wash that
   hands its bottom edge color to the next section's top — white↔lilac oscillation,
   dark MCP block as the contrast anchor. L1 #faf7fe · L2 #f4effd */
body.api { background: #ffffff; }
body.api section { background: transparent; }
body.api section:nth-of-type(1) { background: transparent; }   /* hero — glows paint the tint */
/* 2 — live demo: api/ demo wash (white → faint lilac/peach → white) */
body.api section:nth-of-type(2) { background: linear-gradient(180deg, #ffffff 0%, #f8f4fd 30%, #fcf9f9 68%, #ffffff 100%) !important; }
/* 3 — stats: white → L1 */
body.api section:nth-of-type(3) { background: linear-gradient(180deg, #ffffff 0%, #faf7fe 100%); }
/* 4 — P&L: magenta glow over L1 → L2 */
body.api section:nth-of-type(4) { background:
  radial-gradient(48vw 420px at -6vw 45%, rgb(229 72 255 / 10%), transparent 68%),
  linear-gradient(180deg, #faf7fe 0%, #f4effd 100%) !important; }
/* 5 — DeFi hub: L2 → surface lilac */
body.api section:nth-of-type(5) { background: linear-gradient(180deg, #f4effd 0%, #f7f2fc 55%, var(--cs-surface-lilac) 100%) !important; }
/* 6 — portfolio: lilac → L1 */
body.api section:nth-of-type(6) { background: linear-gradient(180deg, var(--cs-surface-lilac) 0%, #faf7fe 100%); }
/* 7 — token security: L1 → into dark */
body.api section:nth-of-type(7) { background: linear-gradient(180deg, #faf7fe 0%, #efe7fa 100%) !important; }
/* 8 — MCP dark anchor */
body.api section:nth-of-type(8) { background: var(--cs-purple-ink); }
/* 9 — use cases: api/ orange + magenta radials over near-white */
body.api section:nth-of-type(9) { background:
  radial-gradient(56vw 320px at 84% 38%, rgb(255 147 50 / 6%), transparent 72%),
  radial-gradient(58vw 340px at 12% 55%, rgb(229 72 255 / 7%), transparent 72%),
  linear-gradient(180deg, #ffffff 0%, #fdfbff 45%, #ffffff 100%) !important; }
/* 10 — comparison: white → L1 */
body.api section:nth-of-type(10) { background: linear-gradient(180deg, #ffffff 0%, #faf7fe 100%); }
/* 11 — CTA: api/ magenta + orange side radials over L1 → L2 */
/* CTA glow: painted on an overflowing layer that bleeds into the sections above
   and below, so it can spread freely with no seam line. */
body.api section:nth-of-type(10), body.api section:nth-of-type(12) { position: relative; z-index: 1; }
body.api section:nth-of-type(11) { position: relative; z-index: 2; overflow: visible;
  background: linear-gradient(180deg, #faf7fe 0%, #f4effd 100%) !important; }
body.api section:nth-of-type(11)::before { content: ""; position: absolute; left: 0; right: 0; top: -55%; bottom: -55%;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(62% 44% at 0% 50%, rgb(229 72 255 / 36%), transparent 66%),
    radial-gradient(62% 44% at 100% 50%, rgb(255 147 50 / 36%), transparent 66%); }
body.api section:nth-of-type(11) > * { position: relative; z-index: 1; }
/* FAQ: L2 → white (matches CTA bottom edge, no glow at the seam) */
body.api section:nth-of-type(12) { background: linear-gradient(180deg, #f4effd 0%, #ffffff 70%) !important; }
/* 12 — FAQ: L2 → white */
body.api section:nth-of-type(12) { background: linear-gradient(180deg, #f4effd 0%, #ffffff 100%); }
body.api .stat { border-left: none; }
body.api .cta__glow { display: none; }
/* MCP copy-button feedback (matches /api/): icon swaps to a green check with a pop */
.mcp__copy { border: 0; background: transparent; cursor: pointer; padding: 4px; margin: -4px; border-radius: 8px; display: inline-flex; align-items: center; transition: background .15s; flex-shrink: 0; }
.mcp__copy:hover { background: rgb(147 93 235 / 12%); }
.mcp__copy:hover .ic { opacity: .9; }
.mcp__copy.copied .ic { -webkit-mask-image: url(https://unpkg.com/lucide-static@latest/icons/check.svg); mask-image: url(https://unpkg.com/lucide-static@latest/icons/check.svg); color: var(--cs-green); animation: mcpCopyPop .32s var(--cs-ease, cubic-bezier(.25,.1,.25,1)); }
@keyframes mcpCopyPop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* uniform hero chain-card width (fits "Hyperliquid" on one line) */
.whero .hubcard { width: 158px; }
.whero .hubcard__t { font-size: 14px; }
/* mobile: match the /api/ hero hub exactly (cards 280px, SVG column connectors) */
@media (max-width: 600px) {
  .whero .hubcard { width: 100%; max-width: 280px; }
}

/* ============================================================
   Hero demo console — dark navy theme (matches /api/ live demo)
   ============================================================ */
.wd { background: linear-gradient(180deg, #4a3f6b 0%, var(--cs-purple-ink) 100%); border-color: rgb(255 255 255 / 12%); box-shadow: 0 18px 40px rgb(62 53 91 / 22%); }
.wd__bar { display: flex; align-items: center; gap: 8px; padding: 13px 15px; border-bottom: 1px solid rgb(255 255 255 / 9%); background: rgb(0 0 0 / 18%); }
.wd__bar .d { width: 11px; height: 11px; border-radius: 50%; }
.wd__bar .d.r { background: #ff5f57; } .wd__bar .d.y { background: #febc2e; } .wd__bar .d.gr { background: #28c840; }
.wd__bar .wd__ttl { margin-left: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: rgb(255 255 255 / 50%); }
.wd__chip { background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 12%); color: rgb(255 255 255 / 70%); }
.wd__chip:hover { color: #fff; border-color: rgb(255 255 255 / 30%); }
.wd__chip.active { background: var(--cs-gradient-button); color: #fff; border-color: transparent; }
.wd__chip--hint { animation: wdhint 2.2s var(--cs-ease, cubic-bezier(.25,.1,.25,1)) infinite; }
.wd__chip--hint.active { animation: none; }
.wd__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wd__more { color: rgb(255 255 255 / 70%); cursor: default; }
@keyframes wdhint {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 96 133 / 0%); }
  50% { box-shadow: 0 0 0 5px rgb(255 96 133 / 22%); }
}
@media (prefers-reduced-motion: reduce) { .wd__chip--hint { animation: none; } }
.wcard__tab--hint { animation: wdhint 2.2s var(--cs-ease, cubic-bezier(.25,.1,.25,1)) infinite; }
@media (prefers-reduced-motion: reduce) { .wcard__tab--hint { animation: none; } }
.wd__addr { background: rgb(0 0 0 / 28%); color: rgb(255 255 255 / 92%); }
.wd__addr b { color: #fff; background: rgb(147 93 235 / 38%); border-radius: 5px; padding: 1px 5px; }
.wd__body { border-top-color: rgb(255 255 255 / 9%); }
.wd__json { border-right-color: rgb(255 255 255 / 9%); background: transparent; }
.wd__stage { background: transparent; }
.wd__lat { color: rgb(255 255 255 / 50%); }
@media (max-width: 540px) { .wd__json { border-bottom-color: rgb(255 255 255 / 9%); } }

/* "what a wallet data API does" flow visual */
.wflow { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; max-width: 880px; margin: 0 auto; }
.wflow__col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wflow__cap { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-text-subtle); }
.wflow__chips { display: flex; flex-direction: column; gap: 7px; }
.wflow__chip { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--cs-text); background: var(--cs-bg); border: 1px solid rgb(62 53 91 / 12%); border-radius: 9px; padding: 7px 12px; }
.wflow__arrow { display: flex; }
.wflow__arrow .ic { width: 22px; height: 22px; background: var(--cs-purple); -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat; }
.wflow__api { display: flex; align-items: center; gap: 9px; background: var(--cs-purple-ink); color: #fff; border-radius: 14px; padding: 15px 18px; font-family: var(--cs-font-display); font-weight: 600; font-size: 15px; box-shadow: 0 14px 32px rgb(62 53 91 / 24%); white-space: nowrap; }
.wflow__apilogo img { height: 18px; filter: brightness(0) invert(1); display: block; }
.wflow__json { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; color: var(--cs-text-muted); background: var(--cs-bg); border: 1px solid rgb(62 53 91 / 12%); border-radius: 9px; padding: 9px 13px; }
.wflow__json .k { color: var(--cs-purple); }
@media (max-width: 720px) { .wflow { flex-direction: column; } .wflow__arrow { transform: rotate(90deg); } }

/* chain logo strip atop the xpub visual (meets "120+ chains" headline) */
.chainstrip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.chainstrip img { width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(62 53 91 / 8%); }
.chainstrip .more { font-family: var(--cs-font-display); font-weight: 700; font-size: 12.5px; color: var(--cs-purple); background: var(--cs-surface-lilac); border-radius: 999px; padding: 7px 13px; }

/* "raw per-chain → one schema" normalize visual */
.wnorm { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; max-width: 940px; margin: 0 auto; }
.wnorm__side { display: flex; flex-direction: column; gap: 8px; }
.wnorm__cap { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-text-subtle); margin-bottom: 4px; }
.wnorm__raw { display: flex; align-items: center; gap: 10px; background: var(--cs-bg); border: 1px solid rgb(62 53 91 / 10%); border-radius: 10px; padding: 9px 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.wnorm__tag { font-weight: 700; font-size: 11px; flex-shrink: 0; }
.wnorm__raw code { color: var(--cs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wnorm__mid { position: relative; display: flex; align-items: center; justify-content: center; }
.wnorm__feed { position: absolute; top: 50%; width: 26px; border-top: 2px dotted var(--cs-purple); opacity: .5; }
.wnorm__feed--a { left: -26px; } .wnorm__feed--b { right: -26px; }
.wnorm__api { display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--cs-purple-ink); color: #fff; border-radius: 16px; padding: 16px 22px; box-shadow: 0 14px 34px rgb(62 53 91 / 26%); position: relative; z-index: 1; }
.wnorm__logo img { height: 20px; filter: brightness(0) invert(1); margin-bottom: 4px; display: block; }
.wnorm__apit { font-family: var(--cs-font-display); font-weight: 700; font-size: 14px; }
.wnorm__apis { font-size: 10px; color: rgb(255 255 255 / 55%); letter-spacing: .04em; text-transform: uppercase; }
.wnorm__out { background: #1b1530; border-radius: 12px; padding: 14px 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.65; }
.wnorm__out .k { color: #c7a4ff; } .wnorm__out .s { color: #8fd98a; } .wnorm__out .n { color: #ffb37a; } .wnorm__out .p { color: #6b6480; }
@media (max-width: 820px) { .wnorm { grid-template-columns: 1fr; gap: 18px; } .wnorm__feed { display: none; } }

@media (min-width: 760px) { .wsec-1row { white-space: nowrap; } }

/* animated value chart in the Total Value card */
.wmchart { width: 100%; height: 58px; display: block; margin: 12px 0 6px; }
.wmchart__area { fill: url(#wmcg); opacity: 0; animation: wmcfade .7s ease .9s forwards; }
.wmchart__line { fill: none; stroke: url(#wmcline); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 340; stroke-dashoffset: 340; animation: wmcdraw 1.5s cubic-bezier(.25,.1,.25,1) .25s forwards; }
@keyframes wmcdraw { to { stroke-dashoffset: 0; } }
@keyframes wmcfade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wmchart__line { stroke-dashoffset: 0; animation: none; } .wmchart__area { opacity: 1; animation: none; } }

.pnl__cards--static .wbp__tf { color: rgb(255 255 255 / 45%); }
.pnl__cards--static .wbp__tf b { color: #fff; }

/* clickable timeframe buttons under the value chart */
.wmtf { display: flex; justify-content: space-between; gap: 2px; }
.wmtf button { flex: 1 1 0; border: 0; background: none; cursor: pointer; padding: 4px 0; border-radius: 6px;
  font-family: var(--cs-font-body); font-weight: 700; font-size: 9.5px; color: rgb(255 255 255 / 45%); transition: color .15s, background .15s; }
.wmtf button:hover { color: rgb(255 255 255 / 75%); }
.wmtf button.active { color: #fff; background: rgb(255 255 255 / 12%); }