/*
 * TheHybit Coins — design v2.
 *
 * Everything is scoped under .thb-v2 so the theme's header and footer are
 * untouched, and nothing here can leak into the classic design (which loads
 * none of this file). No 100vw anywhere: on a page with a vertical scrollbar
 * it is wider than the viewport and produces exactly the horizontal scroll a
 * 360px phone must never get. Wide content (tables, the timeline) scrolls
 * inside its own box instead.
 */

/* The breakout above makes the page exactly as wide as the viewport; clip
   rather than scroll anything that rounds a pixel over. Only on pages that
   contain the v2 design — the classic page never loads this file. */
html:has(.thb-v2) { overflow-x: clip; }

/* What v2 tells the theme about its width — the classic page's answer and no
   more. See the comment in templates/v2/single-coin.php. Seven 216px blocks:
   wrapped, its narrowest is the classic page's measured min-content (216px);
   unwrapped it would be 1512px, capped by max-width at the classic
   container's 1320px. Zero height, invisible, hidden from assistive tech. */
.thb-v2-sizer { max-width: 1320px; height: 0; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; }
.thb-v2-sizer span { display: inline-block; width: 216px; height: 0; }
/* The full-width layer's container. inline-size containment makes its
   intrinsic width zero, so the layer's viewport width never feeds back into
   the theme's box. */
.thb-v2-frame { contain: inline-size; }

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.thb-v2 {
  /* FULL WIDTH, WHATEVER THE THEME WRAPS US IN.
     Themes put single posts in a boxed column — on the live site, a column
     about 470px wide on a 1440px screen. The page breaks out of that box to
     the viewport: width is the viewport's, and the negative margins (100% is
     the box's width) centre it on the viewport. --v2-vw starts as 100vw and
     is replaced with the exact client width, scrollbar excluded, by the small
     inline script at the top of the template, which also corrects the
     margins when the theme's box is not centred (a sidebar layout). */
  --v2-vw: 100vw;
  width: var(--v2-vw);
  max-width: none;
  margin-left: calc((100% - var(--v2-vw)) / 2);
  margin-right: calc((100% - var(--v2-vw)) / 2);
  /* Layout follows THIS element's width, not the window's: every breakpoint
     below is a container query on `v2`. If a theme ever clips the breakout,
     the page still lays out for the width it really has instead of showing
     a desktop grid squeezed into a phone-sized column. */
  container: v2 / inline-size;
  --v2-bg: #05070d;
  --v2-bg-2: #070b14;
  --v2-surface: rgba(16, 24, 39, .72);
  --v2-surface-2: #0d1422;
  --v2-line: rgba(148, 163, 184, .14);
  --v2-line-2: rgba(148, 163, 184, .24);
  --v2-text: #e8edf5;
  --v2-muted: #8b97a8;
  --v2-accent: #19e3b1;
  --v2-accent-ink: #032019;
  --v2-violet: #8b5cf6;
  --v2-blue: #3b82f6;
  --v2-teal: #22d3ee;
  --v2-pink: #ec4899;
  --v2-amber: #f59e0b;
  --v2-green: #22c55e;
  --v2-red: #f43f5e;
  --v2-slate: #64748b;
  --v2-radius: 16px;
  --v2-gap: 16px;

  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(25, 227, 177, .08), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(139, 92, 246, .08), transparent 60%),
    var(--v2-bg);
  color: var(--v2-text);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  direction: rtl;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.thb-v2 *, .thb-v2 *::before, .thb-v2 *::after { box-sizing: border-box; }
.thb-v2 a { color: inherit; }
.thb-v2 h1, .thb-v2 h2, .thb-v2 h3, .thb-v2 h4, .thb-v2 p, .thb-v2 ul, .thb-v2 ol, .thb-v2 dl, .thb-v2 dd { margin: 0; padding: 0; }
.thb-v2 ul, .thb-v2 ol { list-style: none; }
.thb-v2 svg { display: block; max-width: 100%; direction: ltr; }
.thb-v2 svg text { font-family: inherit; }
/* Persian text inside an SVG. The SVG itself is LTR so coordinates and
   anchors mean what they say; Persian labels opt back into RTL so a label
   mixing scripts ("نسبت TVL به ارزش بازار") keeps its word order. With RTL,
   text-anchor start/end refer to the right/left edge respectively. */
.thb-v2 svg .v2-fa { direction: rtl; unicode-bidi: embed; }
.thb-v2 img { max-width: 100%; height: auto; }
.thb-v2 button { font: inherit; color: inherit; cursor: pointer; }
.thb-v2 :focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; border-radius: 6px; }
.thb-v2 [hidden] { display: none !important; }

/* Content spans the page. The cap only applies on very wide monitors (beyond
   1760px), where full-width lines and charts get too long to read. At 1440
   the content is 1440 − 2×24px wide. */
.v2-wrap { max-width: 1760px; margin: 0 auto; padding: 12px 16px 48px; }
@container v2 (min-width: 1120px) { .v2-wrap { padding: 16px 24px 56px; } }

.v2-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.v2-num { unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.v2-crumbs { display: flex; gap: 8px; flex-wrap: wrap; color: var(--v2-muted); font-size: 13px; margin-bottom: 8px; }
.v2-crumbs a { text-decoration: none; }
.v2-crumbs a:hover { color: var(--v2-text); }

/* ---------- shared atoms ---------- */

.v2-card {
  background: var(--v2-surface);
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-radius);
  padding: 16px;
  min-width: 0;
  backdrop-filter: blur(6px);
}
.v2-card--muted { background: rgba(13, 20, 34, .5); border-style: dashed; }
.v2-card--accent { border-color: rgba(25, 227, 177, .5); box-shadow: 0 0 0 1px rgba(25, 227, 177, .12), 0 0 32px rgba(25, 227, 177, .08) inset; }
.v2-card__title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.v2-section { margin-top: 36px; scroll-margin-top: 72px; }
.v2-head { margin-bottom: 16px; }
.v2-head__title { font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; line-height: 1.4; }
.v2-head__sub { color: var(--v2-muted); font-size: 14px; margin-top: 2px; }

.v2-muted { color: var(--v2-muted); font-size: 13px; }
.v2-center { text-align: center; }
.v2-note { color: var(--v2-muted); font-size: 13px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--v2-line); border-radius: 12px; background: rgba(13, 20, 34, .6); }
.v2-hint { color: var(--v2-muted); font-size: 12px; text-align: center; margin-top: 6px; }
.v2-source { color: var(--v2-muted); font-size: 12px; margin-top: 10px; }
.v2-link { display: inline-block; color: var(--v2-accent); font-size: 13px; margin-top: 10px; text-decoration: none; }
.v2-big { font-size: 26px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.v2-big small { color: var(--v2-muted); font-size: 12px; font-weight: 400; }

.v2-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(139, 92, 246, .16); border: 1px solid rgba(139, 92, 246, .35);
}
.v2-chip--muted { background: rgba(148, 163, 184, .08); border-color: var(--v2-line); color: var(--v2-muted); font-weight: 400; }

.v2-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; }
.v2-delta small { color: var(--v2-muted); font-weight: 400; font-size: 12px; }
.v2-delta--up, .thb-v2 .v2-delta--up .v2-num { color: var(--v2-accent); }
.v2-delta--down, .thb-v2 .v2-delta--down .v2-num { color: var(--v2-red); }
.v2-delta--flat { color: var(--v2-muted); }

.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease;
}
.v2-btn:hover { transform: translateY(-1px); }
.v2-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.v2-btn--primary, .thb-v2 a.v2-btn--primary { background: var(--v2-accent); color: var(--v2-accent-ink); box-shadow: 0 6px 24px rgba(25, 227, 177, .25); }
.v2-btn--ghost { background: transparent; border-color: var(--v2-line-2); }
.v2-btn--ghost[aria-pressed="true"] { border-color: var(--v2-amber); color: var(--v2-amber); }
.v2-btn--ghost[aria-pressed="true"] svg { fill: var(--v2-amber); }
.v2-btn--sm { min-height: 36px; padding: 0 16px; font-size: 13px; }
.v2-btn--block { width: 100%; margin-top: 14px; }

.v2-pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 1px solid; }
.v2-pill--positive, .v2-pill--ok { color: var(--v2-accent); border-color: rgba(25, 227, 177, .45); background: rgba(25, 227, 177, .1); }
.v2-pill--negative, .v2-pill--alert { color: var(--v2-red); border-color: rgba(244, 63, 94, .45); background: rgba(244, 63, 94, .1); }
.v2-pill--neutral, .v2-pill--info { color: var(--v2-muted); border-color: var(--v2-line-2); background: rgba(148, 163, 184, .08); }
.v2-pill--warn { color: var(--v2-amber); border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .1); }

.v2-badge { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 10px; font-size: 13px; border: 1px solid; }
.v2-badge--ok { color: var(--v2-accent); border-color: rgba(25, 227, 177, .45); background: rgba(25, 227, 177, .08); }
.v2-badge--warn { color: var(--v2-amber); border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }

/* The "no figure" state. Visible, readable, never mistaken for a value. */
.v2-na { display: inline-flex; flex-direction: column; gap: 2px; color: var(--v2-muted); font-size: 13px; }
.v2-na__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.v2-na__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed currentColor; flex: none; }
.v2-na--pending .v2-na__label { color: var(--v2-amber); }
.v2-na__note { font-size: 12px; line-height: 1.6; opacity: .85; }

/* Group / tone colour hooks shared by SVG and HTML. */
.v2-t--violet { --tone: var(--v2-violet); }
.v2-t--blue { --tone: var(--v2-blue); }
.v2-t--teal { --tone: var(--v2-teal); }
.v2-t--pink { --tone: var(--v2-pink); }
.v2-t--amber { --tone: var(--v2-amber); }
.v2-t--green { --tone: var(--v2-green); }
.v2-t--slate { --tone: var(--v2-slate); }

/* Segmented control & toggles */
.v2-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(148, 163, 184, .08); flex-wrap: wrap; }
.v2-seg button { border: 0; background: transparent; padding: 4px 12px; border-radius: 8px; font-size: 13px; color: var(--v2-muted); min-height: 32px; }
.v2-seg button.is-on { background: rgba(25, 227, 177, .14); color: var(--v2-accent); box-shadow: inset 0 0 0 1px rgba(25, 227, 177, .35); }
.v2-seg--small button { padding: 2px 8px; font-size: 12px; }

.v2-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--v2-line-2); background: rgba(13, 20, 34, .7); border-radius: 999px; padding: 6px 14px 6px 8px; font-size: 13px; min-height: 40px; }
.v2-toggle__knob { width: 34px; height: 20px; border-radius: 999px; background: rgba(148, 163, 184, .25); position: relative; flex: none; transition: background .2s; }
.v2-toggle__knob::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: right .2s; }
.v2-toggle[aria-pressed="true"] .v2-toggle__knob { background: var(--v2-accent); }
.v2-toggle[aria-pressed="true"] .v2-toggle__knob::after { right: 17px; }

.v2-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-filters button { border: 1px solid var(--v2-line-2); background: rgba(13, 20, 34, .7); border-radius: 10px; padding: 4px 14px; min-height: 36px; font-size: 13px; }
.v2-filters button.is-on { border-color: var(--v2-accent); color: var(--v2-accent); background: rgba(25, 227, 177, .08); }

.v2-kv li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--v2-line); flex-wrap: wrap; }
.v2-kv li:last-child { border-bottom: 0; }
.v2-kv__label { color: var(--v2-muted); font-size: 14px; }
.v2-kv__value { font-weight: 700; margin-inline-start: auto; }
.v2-kv__detail { flex-basis: 100%; color: var(--v2-muted); font-size: 11.5px; }
.v2-whales__list li a { display: grid; grid-template-columns: auto auto 1fr; gap: 2px 10px; align-items: baseline; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--v2-line); border-radius: 10px; text-decoration: none; font-size: 13px; }
.v2-whales__list li a:hover { border-color: var(--v2-line-2); }
.v2-whales__route { grid-column: 1 / -1; color: var(--v2-muted); font-size: 12px; }
.v2-whales__time { justify-self: end; color: var(--v2-muted); font-size: 12px; }
.v2-kv .v2-na { margin-inline-start: auto; text-align: left; max-width: 62%; }

.v2-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v2-table th, .v2-table td { padding: 10px 8px; border-bottom: 1px solid var(--v2-line); text-align: right; white-space: nowrap; }
.v2-table thead th { color: var(--v2-muted); font-weight: 600; font-size: 13px; }
.v2-table tbody th { font-weight: 600; }
.v2-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A wide chart on a narrow screen scrolls inside its card, at a size where
   its labels are still readable, instead of shrinking to illegibility. */
.v2-xscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
@container v2 (max-width: 767px) {
  .v2-xscroll > svg { min-width: var(--min, 640px); }
}

.v2-spark { width: 100%; height: 90px; }
.v2-spark__line { fill: none; stroke: var(--v2-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.v2-spark__area { fill: rgba(25, 227, 177, .12); }
.v2-s--violet { stroke: var(--v2-violet); }
.v2-s--amber { stroke: var(--v2-amber); }
.v2-s--green { stroke: var(--v2-accent); }

/* ---------- 1. overview ---------- */

.v2-overview {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  scroll-margin-top: 72px;
}
.v2-kicker { color: var(--v2-accent); font-size: 14px; font-weight: 600; }
.v2-identity { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.v2-identity__logo { width: 48px; height: 48px; border-radius: 50%; background: rgba(139, 92, 246, .15); padding: 6px; }
.v2-identity__name { font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.2; }
.v2-tagline { color: #c4ccd8; font-size: 16px; margin-top: 8px; }
.v2-price { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.v2-price__value { font-size: clamp(34px, 5.4vw, 54px); font-weight: 700; line-height: 1.15; letter-spacing: -.5px; }
.v2-price .v2-delta { padding: 4px 12px; border-radius: 10px; background: rgba(148, 163, 184, .08); }
.v2-toman { color: var(--v2-muted); font-size: 13px; margin-top: 4px; }
.v2-live-stamp { color: var(--v2-muted); font-size: 11.5px; margin-top: 2px; }
/* A brief tint when the live price changes — no motion for those who opt out. */
.v2-price__value.is-tick-up .v2-num { color: var(--v2-accent); transition: color .2s; }
.v2-price__value.is-tick-down .v2-num { color: var(--v2-red); transition: color .2s; }
@media (prefers-reduced-motion: reduce) { .v2-price__value .v2-num { transition: none; } }

/* Live price over WebSocket (2.4.0, live.js). Tabular digits and a width that
   only grows, so a tick never moves the line; a figure whose feed went silent
   is dimmed rather than left looking live. */
[data-live-usd] { display: inline-block; font-variant-numeric: tabular-nums; }
[data-live-usd].is-tick-up .v2-num { color: var(--v2-accent); transition: color .2s; }
[data-live-usd].is-tick-down .v2-num { color: var(--v2-red); transition: color .2s; }
[data-live-usd].is-stale, [data-live-irt].is-stale { opacity: .55; }
.v2-live-stamp.is-stale { color: var(--v2-amber); }
.v2-live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-accent); margin-inline-end: 6px; vertical-align: middle; animation: v2-live-pulse 2s ease-in-out infinite; }
@keyframes v2-live-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  [data-live-usd] .v2-num { transition: none !important; }
  .v2-live-dot { animation: none; }
}
.v2-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.v2-actions .v2-btn { flex: 1 1 160px; }

.v2-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  margin-top: 20px; border: 1px solid var(--v2-line); border-radius: 14px; overflow: hidden; background: var(--v2-line);
}
.v2-stats > div { background: var(--v2-surface-2); padding: 10px 12px; }
.v2-stats dt { color: var(--v2-muted); font-size: 12px; }
.v2-stats dd { font-weight: 700; font-size: 16px; }

.v2-orbit { position: relative; aspect-ratio: 1; max-width: 420px; margin: 0 auto; width: 100%; display: none; }
.v2-orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.v2-orbit__path { fill: none; stroke: rgba(34, 211, 238, .45); stroke-width: 1.2; }
.v2-orbit__path--faint { stroke: rgba(139, 92, 246, .25); stroke-dasharray: 3 6; }
.v2-orbit__base { fill: none; stroke: rgba(25, 227, 177, .4); stroke-width: 1.5; }
.v2-orbit__logo {
  position: absolute; width: 40%; height: auto; left: 30%; top: 26%;
  filter: drop-shadow(0 0 30px rgba(34, 211, 238, .55)) drop-shadow(0 0 60px rgba(139, 92, 246, .35));
  animation: v2-float 6s ease-in-out infinite;
}
.v2-orbit__chip {
  position: absolute; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
  background: rgba(7, 11, 20, .8); border: 1px solid rgba(34, 211, 238, .45); box-shadow: 0 0 18px rgba(34, 211, 238, .2);
}
.v2-orbit__chip--1 { top: 12%; right: 4%; }
.v2-orbit__chip--2 { top: 38%; left: -2%; }
.v2-orbit__chip--3 { bottom: 20%; left: 6%; }
.v2-orbit__chip--4 { bottom: 30%; right: 0; }
@keyframes v2-float { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .v2-orbit__logo { animation: none; } }

.v2-overview__side { display: grid; gap: var(--v2-gap); min-width: 0; }
.v2-chartcard__bar { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.v2-chart { width: 100%; height: 220px; }
.v2-chart--empty { display: grid; place-items: center; border: 1px dashed var(--v2-line-2); border-radius: 12px; }
.v2-chart__line { fill: none; stroke: var(--v2-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v2-chart__axis { display: flex; justify-content: space-between; color: var(--v2-muted); font-size: 12px; margin-top: 6px; }

/* ---------- section nav ---------- */

.v2-tabs {
  position: sticky; top: 0; z-index: 20; margin: 28px 0 0;
  padding: 8px 0; background: linear-gradient(var(--v2-bg) 70%, transparent);
}
.v2-tabs__list {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 6px; border-radius: 16px; border: 1px solid var(--v2-line); background: rgba(13, 20, 34, .85); backdrop-filter: blur(8px);
}
.v2-tabs__list::-webkit-scrollbar { display: none; }
.v2-tabs__link { display: block; white-space: nowrap; padding: 8px 16px; border-radius: 12px; text-decoration: none; font-size: 14px; color: var(--v2-muted); }
.v2-tabs__link:hover { color: var(--v2-text); }
.v2-tabs__link.is-on { color: var(--v2-accent); background: rgba(25, 227, 177, .1); box-shadow: inset 0 0 0 1px rgba(25, 227, 177, .45); }

/* ---------- 2. ecosystem ---------- */

.v2-eco__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.v2-eco__grid, .v2-flow__grid, .v2-pstory__grid, .v2-pulse__grid, .v2-peers__grid { display: grid; gap: var(--v2-gap); grid-template-columns: minmax(0, 1fr); }
.v2-eco__map { padding: 8px; }
.v2-eco__map svg { width: 100%; height: auto; }
.v2-eco__edge { stroke: rgba(139, 92, 246, .45); stroke-width: 1.2; }
.v2-eco__edge--faint { stroke: rgba(34, 211, 238, .12); stroke-dasharray: 2 6; }
.v2-eco__core { fill: rgba(30, 27, 75, .9); stroke: rgba(139, 92, 246, .8); stroke-width: 2; }
.v2-eco__coretext { fill: var(--v2-text); font-size: 26px; font-weight: 700; }
.v2-eco__node { cursor: pointer; --tone: var(--v2-slate); transition: opacity .2s; }
.v2-eco__node circle { fill: color-mix(in srgb, var(--tone) 22%, #070b14); stroke: var(--tone); stroke-width: 2.5; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone) 60%, transparent)); }
.v2-eco__node:hover circle, .v2-eco__node:focus circle, .v2-eco__node.is-on circle { stroke-width: 4; }
.v2-eco__node.is-dim { opacity: .15; }
.v2-eco__initial { fill: #fff; font-size: 17px; font-weight: 700; }
.v2-eco__label { fill: var(--v2-text); font-size: 17px; font-weight: 600; }
.v2-eco__fig { fill: var(--v2-muted); font-size: 15px; }
.v2-g--defi { --tone: var(--v2-violet); }
.v2-g--nft { --tone: var(--v2-pink); }
.v2-g--layer2 { --tone: var(--v2-blue); }
.v2-g--infra { --tone: var(--v2-teal); }
.v2-g--gaming { --tone: var(--v2-amber); }
.v2-g--social { --tone: var(--v2-green); }
.v2-eco__side { display: grid; gap: var(--v2-gap); align-content: start; min-width: 0; }
.v2-detail__kicker { color: var(--v2-muted); font-size: 12px; }
.v2-detail__name { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.v2-detail__dl > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--v2-line); font-size: 14px; }
.v2-detail__dl dt { color: var(--v2-muted); }
.v2-bars { width: 100%; height: 110px; }
.v2-hbars { display: grid; gap: 7px; margin-bottom: 8px; }
.v2-hbars li { display: grid; grid-template-columns: minmax(84px, 38%) minmax(0, 1fr) 62px; align-items: center; gap: 8px; font-size: 12.5px; --tone: var(--v2-violet); }
.v2-hbars__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-hbars__track { height: 10px; border-radius: 6px; background: rgba(148, 163, 184, .1); overflow: hidden; }
.v2-hbars__fill { display: block; height: 100%; width: var(--w); border-radius: 6px; background: var(--tone); }
.v2-hbars__fill.is-top { box-shadow: 0 0 10px color-mix(in srgb, var(--tone) 60%, transparent); }
.v2-hbars__val { text-align: left; color: var(--v2-muted); }
.v2-bars rect { fill: var(--v2-violet); opacity: .85; }
.v2-bars rect:first-child { fill: var(--v2-accent); }

/* ---------- 3. flow ---------- */

.v2-flow__sankey { align-self: start; }
.v2-flow__sankey svg { width: 100%; height: auto; }
.v2-ribbon { fill: var(--tone); opacity: .45; transition: opacity .2s; }
.v2-ribbon:hover { opacity: .65; }
.v2-flow__node { fill: var(--tone); }
.v2-flow__label { fill: #fff; font-size: 17px; font-weight: 700; paint-order: stroke; stroke: rgba(5, 7, 13, .55); stroke-width: 3px; }
.v2-flow__pct { fill: #e8edf5; font-size: 15px; font-weight: 600; paint-order: stroke; stroke: rgba(5, 7, 13, .55); stroke-width: 3px; }
.v2-flow__head { fill: var(--v2-text); font-size: 17px; font-weight: 700; }
.v2-flow__dir { fill: var(--v2-muted); font-size: 14px; letter-spacing: 1px; }
.v2-flow__arrow { fill: var(--tone); }
.v2-flow__core { fill: rgba(30, 27, 75, .92); stroke: rgba(139, 92, 246, .8); stroke-width: 2; }
.v2-flow__total { fill: #fff; font-size: 22px; font-weight: 700; }
.v2-flow__sub { fill: var(--v2-muted); font-size: 13px; }
.v2-flow__legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--v2-muted); font-size: 12px; margin-top: 8px; }
.v2-flow__mobile { display: none; }
.v2-flow__mtitle { font-size: 13px; color: var(--v2-muted); margin: 12px 0 6px; font-weight: 600; }
.v2-flow__mlist li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.v2-flow__mlist .v2-num { margin-right: auto; /* physical: the number is dir=ltr, so a logical margin would point the wrong way */ color: var(--v2-accent); font-weight: 700; }
.v2-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--tone); flex: none; }
@container v2 (max-width: 599px) {
  .v2-flow__mobile { display: block; }
  .v2-flow__label, .v2-flow__pct { display: none; }
  .v2-hide-sm { display: none; }
}
.v2-flow__side { display: grid; gap: var(--v2-gap); align-content: start; min-width: 0; }
.v2-facts { display: grid; gap: var(--v2-gap); grid-template-columns: minmax(0, 1fr); margin-top: var(--v2-gap); }
.v2-facts li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.v2-facts strong { color: var(--v2-accent); font-size: 18px; }

/* ---------- 4. story ---------- */

.v2-timeline { padding: 20px 16px; position: relative; }
/* Wrapping, not scrolling: as many events per line as fit, then a new line
   below. Left-to-right within each line, as chronology is read here. Each item
   draws its own stretch of the rail, so every line has a continuous one. */
.v2-timeline__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 30px 0; direction: rtl; /* 2.5.0: starts on the right, every line */ }
/* The joins between wrapped lines (drawn by v2.js), in the rail's colour. */
.v2-timeline__joins { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.v2-timeline__join { fill: none; stroke: rgba(25, 227, 177, .45); stroke-width: 2; stroke-linecap: round; }
.v2-timeline__join.is-planned { stroke: rgba(139, 92, 246, .8); stroke-dasharray: 8 6; }
.v2-timeline__item { position: relative; padding: 30px 12px 0; direction: rtl; text-align: right; }
.v2-timeline__item::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: rgba(25, 227, 177, .45); }
.v2-timeline__dot { position: absolute; top: 0; inset-inline-start: 12px; width: 20px; height: 20px; border-radius: 50%; background: #052a22; border: 2px solid var(--v2-accent); box-shadow: 0 0 14px rgba(25, 227, 177, .6); }
.v2-timeline__item.is-featured .v2-timeline__dot { background: var(--v2-accent); box-shadow: 0 0 24px rgba(25, 227, 177, .9); }
.v2-timeline__item.is-planned::before { background: repeating-linear-gradient(90deg, rgba(139, 92, 246, .8) 0 8px, transparent 8px 14px); }
.v2-timeline__item.is-planned .v2-timeline__dot { border-style: dashed; border-color: var(--v2-violet); background: transparent; box-shadow: none; }
.v2-timeline__item.is-planned .v2-timeline__year { color: var(--v2-violet); }
.v2-timeline__badge { display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; font-size: 11px; color: var(--v2-violet); border: 1px solid rgba(139, 92, 246, .5); vertical-align: middle; }
.v2-timeline__year { color: var(--v2-accent); font-weight: 700; font-size: 20px; display: inline-block; }
.v2-timeline__title { font-size: 15px; font-weight: 700; }
.v2-timeline__text { color: var(--v2-muted); font-size: 13px; line-height: 1.7; margin-top: 4px; }

.v2-story__grid { display: grid; gap: var(--v2-gap); grid-template-columns: minmax(0, 1fr); margin-top: var(--v2-gap); }
.v2-learn__list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.v2-learn__card { border: 1px solid var(--v2-line); border-radius: 14px; padding: 14px 12px; background: rgba(7, 11, 20, .6); text-align: center; }
.v2-learn__card h4 { font-size: 15px; color: var(--v2-accent); margin: 8px 0 4px; }
.v2-learn__card p { color: var(--v2-muted); font-size: 12.5px; line-height: 1.7; }
.v2-learn__icon, .v2-audience__icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; font-weight: 700; font-size: 20px;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--tone) 25%, transparent);
}
.v2-insights__list li + li { margin-top: 10px; }
.v2-insights__list a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; text-decoration: none; padding: 8px; border-radius: 12px; border: 1px solid var(--v2-line); }
.v2-insights__list a:hover { border-color: var(--v2-line-2); }
.v2-insights__list img, .v2-insights__thumb { grid-row: span 2; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.v2-insights__thumb { background: linear-gradient(135deg, rgba(139, 92, 246, .5), rgba(34, 211, 238, .35)); }
.v2-insights__title { font-weight: 600; font-size: 14px; line-height: 1.6; }
.v2-insights__list time { color: var(--v2-muted); font-size: 12px; }
.v2-signals li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--v2-line); font-size: 14px; }
.v2-score { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 14px; border: 1px solid var(--v2-line); border-radius: 14px; }
.v2-score__ring { width: 110px; height: 110px; flex: none; }
.v2-score__track { fill: none; stroke: rgba(148, 163, 184, .15); stroke-width: 10; }
.v2-score__fill { fill: none; stroke: var(--v2-accent); stroke-width: 10; stroke-linecap: round; }
.v2-score__num { fill: #fff; font-size: 30px; font-weight: 700; }
.v2-score__of { fill: var(--v2-muted); font-size: 12px; }
.v2-score__label { font-weight: 700; margin-bottom: 4px; }
.v2-score .v2-btn { margin-top: 8px; }

/* ---------- 5. DNA ---------- */

.v2-dna__grid { display: grid; gap: var(--v2-gap); grid-template-columns: minmax(0, 1fr); }
.v2-dna__grid .v2-radar { order: -1; }
@container v2 (max-width: 599px) {
  .v2-radar__lbl { font-size: 20px; }
  .v2-radar__val { font-size: 19px; }
  .v2-radar__nodata { font-size: 16px; }
}
.v2-dna__left, .v2-dna__right { display: grid; gap: 12px; align-content: start; min-width: 0; }
.v2-gauge svg { width: 100%; max-width: 230px; margin: 0 auto; }
.v2-gauge__track { fill: none; stroke: rgba(148, 163, 184, .14); stroke-width: 14; stroke-linecap: round; }
.v2-gauge__fill { fill: none; stroke: var(--v2-accent); stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(25, 227, 177, .5)); }
.v2-gauge__needle { stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.v2-gauge__hub { fill: #fff; }
.v2-gauge__num { fill: #fff; font-size: 28px; font-weight: 700; }
.v2-gauge__label { text-align: center; font-weight: 700; }
.v2-sparkrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px; }
.v2-sparkrow strong { display: block; font-size: 18px; }
.v2-sparkrow span { color: var(--v2-muted); font-size: 12px; }
.v2-sparkrow svg { width: 100%; height: 44px; }
.v2-radar svg { width: 100%; max-width: 560px; margin: 0 auto; height: auto; }
.v2-radar__grid { fill: none; stroke: rgba(148, 163, 184, .16); }
.v2-radar__grid:last-of-type { stroke: rgba(34, 211, 238, .55); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(139, 92, 246, .6)); }
.v2-radar__axis { stroke: rgba(148, 163, 184, .16); }
.v2-radar__shape { stroke: var(--v2-accent); stroke-width: 2.5; stroke-linejoin: round; }
.v2-radar__pt { fill: var(--v2-accent); filter: drop-shadow(0 0 6px var(--v2-accent)); }
.v2-radar__val { fill: #fff; font-size: 15px; font-weight: 700; }
.v2-radar__lbl { fill: var(--v2-text); font-size: 15px; font-weight: 600; }
.v2-radar__lbl.is-missing { fill: var(--v2-muted); }
.v2-radar__nodata { fill: var(--v2-amber); font-size: 12px; }
.v2-radar__disc { fill: rgba(7, 11, 20, .88); stroke: rgba(25, 227, 177, .35); stroke-width: 1.5; }
.v2-radar__score { fill: var(--v2-accent); font-size: 40px; font-weight: 700; }
.v2-radar__of { fill: var(--v2-muted); font-size: 11px; }
.v2-stat { text-align: center; padding: 18px 16px; --tone: var(--v2-violet); border-color: color-mix(in srgb, var(--tone) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 16%, #0b1220), #0b1220 70%); }
.v2-stat--teal { --tone: var(--v2-teal); }
.v2-stat--blue { --tone: var(--v2-blue); }
.v2-stat--pink { --tone: var(--v2-pink); }
.v2-stat__title { font-size: 15px; font-weight: 700; }
.v2-stat__value { font-size: 34px; font-weight: 700; line-height: 1.3; margin-top: 4px; }
.v2-stat__sub { color: var(--v2-accent); font-size: 14px; }
.v2-stat .v2-na { align-items: center; margin-top: 8px; }

/* ---------- 6. price as story ---------- */

.v2-pstory__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.v2-pstory__chart { position: relative; }
.v2-pstory__chart svg { width: 100%; height: auto; }
/* 2.5.0: the event's explanation, beside the event (v2.js places it). */
.v2-pop { position: absolute; z-index: 5; width: min(320px, calc(100% - 16px)); padding: 14px 16px; border-radius: 14px; background: rgba(7, 11, 20, .97); border: 1px solid rgba(25, 227, 177, .55); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); direction: rtl; text-align: right; pointer-events: auto; }
.v2-pop[hidden] { display: none; }
.v2-pop__title { font-size: 16px; font-weight: 700; color: var(--v2-text); }
.v2-pop__date { font-size: 12px; color: var(--v2-muted); margin-top: 2px; }
.v2-pop__text { font-size: 13.5px; line-height: 1.8; color: #c4ccd8; margin-top: 8px; }
.v2-pop__figs { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--v2-line); font-size: 12.5px; color: var(--v2-muted); }
.v2-pop__figs [hidden] { display: none; }
.v2-grid { stroke: rgba(148, 163, 184, .08); }
.v2-axis { fill: var(--v2-muted); font-size: 13px; }
.v2-axisline { stroke: rgba(148, 163, 184, .3); }
.v2-pstory__tvl { fill: none; stroke: var(--v2-violet); stroke-width: 2; vector-effect: non-scaling-stroke; }
.v2-pstory__article { stroke: var(--v2-amber); stroke-dasharray: 3 5; opacity: .8; }
.v2-pin { cursor: pointer; }
.v2-pin__arrow { stroke: rgba(25, 227, 177, .7); stroke-width: 1.5; }
.v2-pin__head { fill: rgba(25, 227, 177, .9); }
.v2-pin__box { fill: rgba(7, 11, 20, .92); stroke: rgba(25, 227, 177, .45); }
.v2-pin__title { fill: var(--v2-text); font-size: 13px; font-weight: 700; }
.v2-pin__meta { fill: var(--v2-muted); font-size: 11px; }
.v2-pin__chg--up { fill: var(--v2-accent); }
.v2-pin__chg--down { fill: var(--v2-red); }
.v2-pin.is-on .v2-pin__box { stroke: var(--v2-accent); stroke-width: 2; }
.v2-pin:focus .v2-pin__box, .v2-pin:hover .v2-pin__box { stroke: var(--v2-accent); }
.v2-pin circle { fill: #052a22; stroke: var(--v2-accent); stroke-width: 2.5; }
.v2-pin.is-on circle { fill: var(--v2-accent); r: 8; }
.v2-event__title { font-size: 22px; font-weight: 700; text-align: center; }
.v2-event__date { text-align: center; color: var(--v2-muted); font-size: 13px; }
.v2-event__text { color: #c4ccd8; font-size: 14px; margin-top: 10px; }
.v2-event__box { margin-top: 14px; padding: 14px; border: 1px solid var(--v2-line); border-radius: 14px; text-align: center; }
.v2-event__chg { font-size: 34px; font-weight: 700; }

/* ---------- 7. pulse ---------- */

.v2-pulse__head { display: grid; gap: 4px; }
.v2-pulse__date { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--v2-muted); }
/* 2.5.0: the day's lines live in one framed card, a step smaller. */
.v2-pulse__card { padding: 8px 20px 16px; }
.v2-pulse__lines li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: clamp(14px, 1.3vw, 16px); font-weight: 500; line-height: 1.8; padding: 12px 0; border-bottom: 1px solid var(--v2-line); }
.v2-pulse__lines li:last-child { border-bottom: 0; }
.v2-pulse__fig { flex: none; font-size: 15px; font-weight: 700; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.v2-chips__item { padding: 6px 12px; border: 1px solid var(--v2-line-2); border-radius: 10px; font-size: 13px; background: rgba(13, 20, 34, .7); }
.v2-chips__item--positive { border-color: rgba(25, 227, 177, .4); }
.v2-chips__item--negative { border-color: rgba(244, 63, 94, .4); }
.v2-pulse__side { display: grid; gap: var(--v2-gap); align-content: start; min-width: 0; }
.v2-tldr__list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--v2-line); }
.v2-tldr__label { font-size: 14px; font-weight: 600; }
.v2-tldr__value { font-size: 16px; font-weight: 700; }
.v2-tldr__note { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.7; color: var(--v2-muted); }
.v2-tldr__list { margin-bottom: 10px; }
.v2-tldr__text { font-size: 12.5px; color: var(--v2-muted); text-align: center; }

/* ---------- 8. peers ---------- */

.v2-bubble__bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.v2-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--v2-muted); }
.v2-select select { background: #0d1422; color: var(--v2-text); border: 1px solid var(--v2-line-2); border-radius: 10px; padding: 6px 10px; font: inherit; min-height: 38px; }
.v2-bubble svg { width: 100%; height: auto; }
.v2-bubble__pt { transition: transform .5s ease; }
.v2-bubble__pt circle { fill: rgba(139, 92, 246, .35); stroke: rgba(167, 139, 250, .9); stroke-width: 2; filter: drop-shadow(0 0 10px rgba(139, 92, 246, .55)); }
.v2-bubble__pt text { fill: #fff; font-size: 11.5px; font-weight: 700; pointer-events: none; }
/* 2.5.0: a framed plot with decade gridlines, a key, and a readable callout. */
.v2-bubble__plot { fill: rgba(13, 20, 34, .55); stroke: var(--v2-line); }
.v2-bubble__grid { stroke: rgba(148, 163, 184, .12); stroke-dasharray: 3 5; }
.v2-bubble__tick { fill: var(--v2-muted); font-size: 11px; }
.v2-bubble__pt { cursor: default; }
.v2-bubble__pt:hover circle { stroke-width: 3; }
.v2-bubble__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--v2-muted); margin-top: 6px; }
.v2-bubble__key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(139, 92, 246, .35); border: 2px solid rgba(167, 139, 250, .9); }
.v2-bubble__key--self { background: rgba(25, 227, 177, .3); border-color: var(--v2-accent); }
.v2-peers__link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.v2-peers__more { font-size: 13px; color: var(--v2-muted); margin-top: 8px; line-height: 1.9; }
.v2-peers__more a { color: var(--v2-accent); }
.v2-peers__insight { font-weight: 400; line-height: 1.9; font-size: 14px; }
.v2-peers__insight-title { font-size: 14px; font-weight: 700; color: var(--v2-accent); margin-bottom: 4px; }
.v2-bubble__pt.is-self circle { fill: rgba(25, 227, 177, .3); stroke: var(--v2-accent); stroke-width: 3; filter: drop-shadow(0 0 16px rgba(25, 227, 177, .7)); }
.v2-bubble__pt.is-self text { fill: #eafff8; }
.v2-callout { margin-top: 10px; padding: 12px 16px; border: 1px solid rgba(25, 227, 177, .5); border-radius: 12px; background: rgba(25, 227, 177, .06); font-weight: 600; }
.v2-table--compare th.is-self, .v2-table--compare td.is-self { background: rgba(25, 227, 177, .14); color: var(--v2-accent); }
.v2-table--compare td, .v2-table--compare thead th { text-align: center; }

/* ---------- 9. supply & risk ---------- */

.v2-supply__grid { display: grid; gap: var(--v2-gap); grid-template-columns: minmax(0, 1fr); }
.v2-dist__bars li { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 4px 10px; align-items: center; margin-bottom: 14px; }
.v2-dist__label { grid-column: 1 / -1; font-size: 14px; }
.v2-dist__track { height: 26px; border-radius: 8px; background: rgba(148, 163, 184, .1); overflow: hidden; }
.v2-dist__fill { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 60%, transparent), var(--tone)); border-radius: 8px; }
.v2-dist__pct { font-weight: 700; text-align: left; }
.v2-dist__missing { margin: 6px 0 10px; }
.v2-dist__missing li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--v2-line); font-size: 13px; }
.v2-yield__eq { color: #c4ccd8; font-size: 14px; }
.v2-yield__big { font-size: 56px; font-weight: 700; color: var(--v2-accent); line-height: 1.2; margin: 6px 0; }
.v2-yield .v2-na { margin-top: 10px; }
.v2-cockpit__list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--v2-line); border-radius: 12px; margin-bottom: 8px; }
.v2-cockpit__label { display: block; font-size: 13px; color: var(--v2-muted); }
.v2-cockpit__value { display: block; font-weight: 700; font-size: 18px; }
.v2-audience { margin-top: var(--v2-gap); }
.v2-audience__list { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.v2-audience__list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--v2-line); border-radius: 14px; }
.v2-audience__list h4 { font-size: 16px; }
.v2-audience__list p { font-size: 13px; }

/* ---------- about & FAQ ---------- */

.v2-about__grid { display: grid; gap: var(--v2-gap); grid-template-columns: minmax(0, 1fr); }
.v2-about__text { font-size: 15px; line-height: 2; color: #d3d9e2; }
.v2-about__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.v2-about__facts dt { color: var(--v2-muted); font-size: 12px; }
.v2-about__facts dd { font-weight: 600; }
.v2-faq details { border-bottom: 1px solid var(--v2-line); padding: 10px 0; }
.v2-faq summary { cursor: pointer; font-weight: 600; }
.v2-faq details p { color: #c4ccd8; font-size: 14px; margin-top: 6px; }

/* ---------- breakpoints ---------- */

@container v2 (min-width: 600px) {
  .v2-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v2-facts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .v2-audience__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container v2 (min-width: 768px) {
  .v2-overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v2-eco__grid, .v2-flow__grid, .v2-peers__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .v2-pstory__grid, .v2-pulse__grid { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
  .v2-pstory__grid--full { grid-template-columns: minmax(0, 1fr); }
  .v2-story__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-story__grid .v2-learn { grid-column: 1 / -1; }
  .v2-dna__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-dna__grid .v2-radar { grid-column: 1 / -1; order: -1; }
  .v2-supply__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-supply__grid .v2-cockpit { grid-column: 1 / -1; }
  .v2-about__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

@container v2 (min-width: 1120px) {
  /* Desktop hero: identity | orbit | chart on one row, key metrics as a
     full-width band of five beneath — the proportions of reference 2. */
  .v2-overview {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1.15fr);
    grid-template-areas: "id orbit chart" "km km km";
  }
  .v2-overview__id { grid-area: id; }
  .v2-orbit { grid-area: orbit; }
  .v2-overview__side { display: contents; }
  .v2-chartcard { grid-area: chart; }
  .v2-keymetrics { grid-area: km; }
  .v2-chart { height: 280px; }
  .v2-keymetrics .v2-kv { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .v2-keymetrics .v2-kv li { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; border-bottom: 0; padding: 4px 16px; }
  .v2-keymetrics .v2-kv li + li { border-inline-start: 1px solid var(--v2-line); }
  .v2-keymetrics .v2-kv__value { margin-inline-start: 0; font-size: 20px; }
  .v2-keymetrics .v2-kv .v2-na { margin-inline-start: 0; max-width: none; text-align: right; }
  .v2-keymetrics .v2-kv__detail { flex-basis: auto; }
  .v2-orbit { display: block; }
  .v2-story__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .v2-story__grid .v2-learn { grid-column: auto; }
  .v2-dna__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr) minmax(0, .9fr); }
  .v2-dna__grid .v2-radar { grid-column: auto; order: 0; }
  .v2-supply__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
  .v2-supply__grid .v2-cockpit { grid-column: auto; }
}
.v2-about .v2-note { margin-top: var(--v2-gap); }

/* 2.3.0 — sections that adapt to what a coin has a source for. */
@container v2 (min-width: 768px) {
  .v2-flow__grid.v2-flow__grid--nosankey { grid-template-columns: minmax(0, 1fr); }
  .v2-flow__grid--nosankey .v2-flow__side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .v2-supply__grid.v2-supply__grid--1 { grid-template-columns: minmax(0, 1fr); }
}
@container v2 (min-width: 1120px) {
  .v2-supply__grid.v2-supply__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}