/* Coin pages and the coins hub (generated by scripts/pseo). Loaded after home.css and built on its tokens,
   nav, store badges, FAQ, closing call and mega footer. Served immutable: change the file, bump COIN_CSS_V in
   scripts/pseo/layout.mjs. */

/* Breadcrumb */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font-size: 14px; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.crumbs a, .crumbs span { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* Hero: the claim and the badges, the chart next to it */
.chero { position: relative; overflow: hidden; isolation: isolate; padding: 4px 0 36px; }
.chero::before { content: ""; position: absolute; z-index: -1; top: -180px; right: -220px; width: 640px; height: 640px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 58, 237, .30), rgba(124, 58, 237, .08) 60%, transparent); }
.chero__grid { display: grid; gap: 30px; }
.chero__copy { display: grid; gap: 18px; justify-items: start; align-content: start; }
.chero h1 { font-size: clamp(30px, 8.2vw, 54px); max-width: 15em; }
.chero .lede { max-width: 34em; }
.chero--hub .wrap { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 1024px) {
  .chero { padding: 12px 0 64px; }
  .chero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .chero h1 { font-size: min(54px, 4.4vw); }
}

/* The 1-year chart: the line is SVG, the labels are HTML so they stay readable at any width */
.chart { margin: 0; padding: 18px 16px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.chart__plot { position: relative; height: 230px; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.chart__line { fill: none; stroke: var(--violet-ink); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart__base { stroke: rgba(255, 255, 255, .28); stroke-width: 1; stroke-dasharray: 4 5; }
.chart__start { position: absolute; right: 0; transform: translateY(calc(-100% - 4px)); font-size: 12px; line-height: 1; color: var(--ink-3); }
.chart--up .chart__start { transform: translateY(6px); }
.chart__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .5); }
.chart__lbl { position: absolute; display: grid; font-size: 12px; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
.chart__lbl b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart__lbl--hi { transform: translateY(calc(-100% - 10px)); }
.chart__lbl--lo { transform: translateY(10px); }
.chart__lbl.is-l { margin-left: -6px; }
.chart__lbl.is-r { margin-right: -6px; text-align: right; }
.chart__axis { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.chart figcaption { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
@media (min-width: 1024px) { .chart { padding: 22px 22px 16px; } .chart__plot { height: 300px; } }

/* Four numbers under the hero */
.kpis { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpis ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; }
.kpis li { display: grid; gap: 2px; align-content: start; padding: 18px 12px 18px 0; border-bottom: 1px solid var(--line); }
.kpis li:nth-child(even) { padding: 18px 0 18px 16px; border-left: 1px solid var(--line); }
.kpis span { color: var(--ink-3); font-size: 14px; }
.kpis b { font: 700 24px/1.2 var(--display); letter-spacing: -.01em; }
.kpis small { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.kpis__src { padding: 12px 0 16px; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
@media (min-width: 768px) {
  .kpis ul { grid-template-columns: repeat(4, 1fr); }
  .kpis li, .kpis li:nth-child(even) { padding: 24px 16px 22px 0; border-bottom: 0; border-left: 0; }
  .kpis li:nth-child(n+2) { padding-left: 28px; border-left: 1px solid var(--line); }
  .kpis b { font-size: 28px; }
  .kpis__src { border-top: 1px solid var(--line); }
}

/* Running text */
.prose { max-width: 42em; }
.prose p { margin-top: 16px; color: var(--ink-2); font-size: 17px; line-height: 1.7; text-wrap: pretty; }
.prose h2 + p { margin-top: 20px; }
.prose a, .more a, .also a, .steps a, .method a, .crel p a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
.more { margin-top: 14px; color: var(--ink-3); font-size: 15px; }

/* The year: story next to the numbers table */
.sec .prose h3 { margin-top: 30px; font: 700 18px/1.3 var(--display); letter-spacing: -.01em; }
.ranks { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.ranks li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.ranks li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 2px; background: var(--violet-2); }
.cyear__grid { display: grid; gap: 36px; }
.numtbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.numtbl caption { caption-side: top; padding-bottom: 12px; text-align: left; font: 700 15px/1.35 var(--display); color: var(--ink); }
.numtbl th, .numtbl td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.45; }
.numtbl tr:first-child th, .numtbl tr:first-child td { border-top: 1px solid var(--line-2); }
.numtbl th { width: 44%; padding-right: 14px; color: var(--ink-3); font-weight: 500; }
.numtbl td { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) {
  .cyear__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: start; }
  .numtbl { position: sticky; top: 24px; padding-top: 6px; }
}

/* $500 once vs weekly */
.dcacards { display: grid; gap: 14px; margin-top: 28px; }
.dcacard { padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); }
.dcacard--dca { border-color: rgba(168, 85, 247, .55); background: linear-gradient(180deg, rgba(124, 58, 237, .14), rgba(124, 58, 237, .03)); }
.sec .dcacard h3 { font: 600 16px/1.35 var(--text); color: var(--ink-2); }
.dcacard__v { margin-top: 10px; font: 700 36px/1.1 var(--display); letter-spacing: -.02em; }
.dcacard__r { margin-top: 4px; font-weight: 600; }
.dcacard p:last-child { margin-top: 10px; color: var(--ink-2); font-size: 15px; }
.is-up { color: #6EE7B7; }
.is-down { color: #FCA5A5; }
.method { max-width: 46em; margin-top: 30px; }
.sec .method h3 { font: 700 16px/1.3 var(--display); }
.method ol { display: grid; gap: 8px; margin: 12px 0 0 20px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
@media (min-width: 768px) { .dcacards { grid-template-columns: 1fr 1fr; max-width: 820px; } }
.cdca__grid { display: grid; }
.cdca__grid .prose h2 + p { margin-top: 20px; }
@media (min-width: 1024px) {
  .cdca__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 64px; align-items: start; }
  .cdca__grid .dcacards { grid-template-columns: 1fr; margin-top: 6px; }
  .cdca__grid .method { grid-column: 1; }
}
.cwhat__grid { display: grid; gap: 4px; }
@media (min-width: 1024px) { .cwhat__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; } .cwhat .prose p:first-child { margin-top: 0; } }

/* How to practice */
.cprac__grid { display: grid; gap: 28px; }
.steps { list-style: none; display: grid; gap: 26px; margin-top: 28px; }
.steps li { display: grid; gap: 6px; }
.steps__n { font: 700 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--violet-ink); }
.sec .steps h3 { font: 700 clamp(19px, 4.8vw, 22px)/1.25 var(--display); letter-spacing: -.01em; }
.steps p { max-width: 36em; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.cprac .also { margin-top: 26px; }
.cprac__phone { width: 220px; height: 360px; margin: 0 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
@media (min-width: 1024px) {
  .cprac__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: start; }
  .cprac__phone { position: sticky; top: 24px; width: 260px; height: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Keep practicing: related coins, guides, tools */
.crel__grid { display: grid; gap: 36px; margin-top: 26px; }
.sec .crel__grid h3 { font: 700 16px/1.3 var(--display); }
.crel__grid > div > p:not(.more) { margin-top: 10px; color: var(--ink-2); max-width: 36em; }
.links { list-style: none; margin-top: 6px; }
.links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.links a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (min-width: 1024px) { .crel__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

/* Coin cards (hub and related coins) */
.ccards { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.ccard { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "spark spark" "meta meta" "go go";
  gap: 8px 12px; height: 100%; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface);
  text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.ccard:hover { border-color: rgba(168, 85, 247, .55); background: var(--surface-2); }
.ccard__name { grid-area: name; font: 700 17px/1.25 var(--display); letter-spacing: -.01em; }
.ccard__name small { margin-left: 4px; font: 500 13px/1 var(--text); color: var(--ink-3); }
.ccard__num { grid-area: num; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ccard__num small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.spark { grid-area: spark; display: block; width: 100%; height: 44px; }
.spark path { fill: none; stroke: var(--violet-ink); stroke-width: 1.75; stroke-linejoin: round; }
.ccard__meta { grid-area: meta; color: var(--ink-3); font-size: 14px; line-height: 1.4; }
.ccard__go { grid-area: go; color: var(--violet-ink); font-size: 14px; font-weight: 600; }
@media (min-width: 600px) { .ccards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ccards--hub { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Hub table: a normal table on wide screens, one block per coin on phones */
.ctbl { margin-top: 26px; }
.ctbl table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ctbl caption { caption-side: bottom; padding-top: 12px; text-align: left; color: var(--ink-3); font-size: 13px; }
.ctbl th, .ctbl td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.ctbl thead th { color: var(--ink); font: 700 14px/1.25 var(--display); vertical-align: bottom; border-bottom-color: var(--line-2); }
.ctbl tbody th { font-weight: 600; }
.ctbl tbody th a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.ctbl tbody th small { margin-left: 4px; color: var(--ink-3); font-weight: 500; font-size: 13px; }
.ctbl td { color: var(--ink-2); }
@media (max-width: 767px) {
  .ctbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ctbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .ctbl tbody th { grid-column: 1 / -1; padding: 0; border: 0; font-size: 17px; }
  .ctbl td { display: grid; gap: 2px; padding: 0; border: 0; color: var(--ink); }
  .ctbl td::before { content: attr(data-label); color: var(--ink-3); font-size: 12px; }
}

.hubmore__grid { display: grid; gap: 8px; }
@media (min-width: 1024px) { .hubmore__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 72px; } .hubmore .prose p:first-child { margin-top: 0; } }

/* Closing call and the educational note */
.pseo .end { padding-bottom: 72px; }
.disclaimer { max-width: 40em; margin: 30px auto 0; color: var(--ink-3); font-size: 13px; line-height: 1.55; text-wrap: pretty; }

/* No install bar on these pages, so the footer needs no room for one */
.pseo .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .pseo .foot__links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; } }

/* Glossary: hub (/glossary) and term pages (/glossary/<term>) */
.ghero { position: relative; overflow: hidden; isolation: isolate; padding: 4px 0 8px; }
.ghero::before { content: ""; position: absolute; z-index: -1; top: -200px; right: -240px; width: 600px; height: 600px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(124, 58, 237, .26), rgba(124, 58, 237, .06) 60%, transparent); }
.ghero .wrap { display: grid; gap: 18px; justify-items: start; }
.ghero h1 { font-size: clamp(30px, 8.2vw, 52px); max-width: 16em; }
.gdef { max-width: 36em; padding: 18px 20px; border: 1px solid rgba(168, 85, 247, .45); border-radius: 18px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .14), rgba(124, 58, 237, .03)); color: var(--ink); font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.ghero .micro a, .gidx .micro a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .ghero { padding: 12px 0 16px; } .gdef { font-size: 19px; padding: 22px 26px; } }

.gbody { padding-top: 40px; }
.gbody__grid { display: grid; gap: 40px; }
.gbody .prose { max-width: 46em; }
.gbody .prose h2 { margin-top: 44px; font-size: clamp(23px, 5.6vw, 32px); max-width: 22em; }
.gbody .prose h2:first-child { margin-top: 0; }
.glist { display: grid; gap: 8px; margin: 16px 0 0 20px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.gtbl { margin-top: 22px; }
.gtbl caption { caption-side: top; padding: 0 0 10px; font: 600 14px/1.4 var(--text); color: var(--ink-3); }
.gtbl td a, .gtbl th a { color: var(--ink); }
.gget { margin-top: 24px; }
.gbody .prose .micro { margin-top: 10px; font-size: 14px; }
.gside { display: grid; gap: 26px; align-content: start; }
.sec .gside__h { font: 700 16px/1.3 var(--display); letter-spacing: -.01em; max-width: none; }
@media (min-width: 1024px) {
  .gbody__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 72px; align-items: start; }
  .gside { position: sticky; top: 24px; }
}

.gidx { padding-top: 28px; padding-bottom: 28px; }
.gidx h2 { font-size: clamp(22px, 5vw, 30px); }
.gchips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.gchips a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: 14px; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.gchips a:hover { border-color: rgba(168, 85, 247, .7); color: var(--ink); }
.gchips a.is-own { border-color: rgba(168, 85, 247, .55); color: var(--violet-ink); }
.gcats { display: grid; gap: 8px; padding-bottom: 24px; }
.gcat { padding: 36px 0 8px; border-top: 1px solid var(--line); }
.gcat h2 { font: 700 clamp(22px, 5.4vw, 32px)/1.2 var(--display); letter-spacing: -.02em; }
.gcat__list { display: grid; gap: 14px; margin-top: 22px; }
.gterm { padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); scroll-margin-top: 16px; }
.gterm h3 { font: 700 18px/1.3 var(--display); letter-spacing: -.01em; }
.gterm p { margin-top: 10px; color: var(--ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.gterm__ex { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); font-size: 15px !important; }
.gterm__ex span { margin-right: 6px; color: var(--violet-ink); font-weight: 600; }
.gterm__more a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.gterm:target { border-color: rgba(168, 85, 247, .7); }
@media (min-width: 768px) { .gcat__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .gcat__list { grid-template-columns: 1fr 1fr 1fr; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gmatrix { margin-top: 22px; overflow-x: auto; }
.gmatrix table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.gmatrix caption { caption-side: top; padding: 0 0 10px; text-align: left; font: 600 14px/1.4 var(--text); color: var(--ink-3); }
.gmatrix th, .gmatrix td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: center; }
.gmatrix thead th { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.gmatrix tbody th { text-align: left; font-weight: 600; white-space: nowrap; }
.gmatrix tbody th a { color: var(--ink); }
.gmatrix td { color: var(--ink-2); }
.gmatrix td.is-hi { color: var(--violet-ink); font-weight: 700; }
.gmatrix td.is-lo { color: var(--ink-3); }
.gmatrix td.is-self { color: var(--ink-3); }

/* Coin pairs (/<a>-vs-<b>) and the comparison hub (/compare) */
.pchart__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px; font-size: 13px; color: var(--ink-2); }
.pchart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.pchart__legend i { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--violet-ink); }
.pchart__legend .is-b i { border-top: 2.5px dashed #5EEAD4; }
.pchart__a { fill: none; stroke: var(--violet-ink); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.pchart__b { fill: none; stroke: #5EEAD4; stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.pchart__end { position: absolute; right: 0; transform: translateY(-50%); padding: 2px 6px; border-radius: 6px; background: rgba(10, 10, 15, .82);
  font-size: 12px; line-height: 1.3; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pchart__end b { font-weight: 700; }
.pchart__end.is-a b { color: var(--violet-ink); }
.pchart__end.is-b b { color: #5EEAD4; }
.pchart__legend .is-s { color: var(--ink-3); }
.pchart__legend .is-s i { width: 18px; border-top: 1px dashed rgba(255, 255, 255, .5); }
.pchart .chart__svg { width: calc(100% - 70px); }
.pchart__end { width: 64px; padding: 2px 0 2px 6px; background: none; }
.pside__grid { display: grid; gap: 36px; }
.ptbl table { font-size: 14px; }
.ptbl th:first-child { width: 36%; }
.ptbl thead th { padding: 0 0 10px; color: var(--ink); font: 700 14px/1.3 var(--display); }
.ptbl thead th a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.ptbl td { padding-right: 10px; }
@media (min-width: 1024px) {
  .pside__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
  .ptbl { position: sticky; top: 24px; }
}
.ptogether .prose h3 { margin-top: 30px; }
.pdca__cards { grid-template-columns: 1fr 1fr; max-width: 900px; }
.pdca__cards .dcacard { padding: 18px 16px 16px; min-width: 0; }
@media (max-width: 359px) { .pdca__cards { grid-template-columns: 1fr; } }
.pdca__cards .dcacard__v { font-size: clamp(24px, 6.4vw, 34px); }
@media (min-width: 900px) { .pdca__cards { grid-template-columns: repeat(4, 1fr); max-width: none; } }
.pdca__method { max-width: 52em; margin-top: 18px; }
.pdca__method a, .hubpairs .more a { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) { .psteps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } }
.sec .crel__h { margin-top: 26px; font: 700 16px/1.3 var(--display); }
.pairlinks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 14px; }
.pairlinks a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--ink-2); font-size: 15px; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.pairlinks a:hover { border-color: rgba(168, 85, 247, .7); color: var(--ink); }
.pcard { grid-template-areas: "name name" "nums nums" "meta meta" "go go"; }
.pcard__nums { grid-area: nums; display: flex; gap: 16px; color: var(--ink-3); font-size: 14px; }
.pcard__nums b { color: var(--ink); font-weight: 700; }
@media (min-width: 1024px) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }