.coin-page {
  background: #f5f6f8;
}

.coin-page .site-header {
  position: sticky;
}

.coin-page .brand-logo-light {
  opacity: 0;
}

.coin-page .brand-logo-color {
  opacity: 1;
}

.coin-nav {
  position: static;
  display: none;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  box-shadow: none;
}

.coin-hero {
  display: grid;
  gap: 28px;
  overflow: hidden;
  min-height: auto;
  padding: 92px 18px 56px;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 14%, rgba(212, 36, 53, 0.12), transparent 30%),
    linear-gradient(135deg, #ffffff, #eef2f7);
}

.coin-hero-copy,
.coin-value-panel {
  min-width: 0;
}

.coin-hero h1 {
  font-size: clamp(2.6rem, 13vw, 7rem);
}

.coin-hero-copy p {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.1rem;
}

.coin-program-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 34px;
}

.coin-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.coin-hero-actions .btn {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.btn-outline-dark {
  border-color: #c7cdd6;
  color: var(--ink);
  background: transparent;
}

.coin-value-panel {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.coin-value-panel > span,
.coin-value-panel > strong,
.coin-value-panel > small,
.coin-equivalence {
  position: relative;
  z-index: 1;
}

.coin-value-bag {
  position: absolute;
  right: -28px;
  bottom: -42px;
  width: 150px;
  opacity: 0.16;
}

.coin-value-token {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 70px;
  opacity: 0.2;
}

.coin-value-panel span,
.coin-value-panel small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.coin-value-panel strong {
  display: block;
  margin: 8px 0;
  color: var(--red);
  font-size: clamp(3rem, 16vw, 5.5rem);
  line-height: 1;
}

.coin-equivalence {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.coin-equivalence i {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--blue));
}

.coin-summary,
.coin-section,
.coin-cta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 18px;
}

.coin-summary {
  display: grid;
  gap: 14px;
  padding-top: 28px;
}

.coin-summary article,
.flow-chart article,
.sell-steps article,
.backing-graphic,
.equivalence-graphic {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.coin-summary article {
  padding: 20px;
}

.coin-summary span,
.sell-steps span {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.coin-summary strong,
.sell-steps strong {
  display: block;
  margin: 5px 0;
  font-size: 1.25rem;
}

.coin-summary p,
.coin-section p,
.coin-cta p {
  color: var(--muted);
}

.coin-section-heading {
  max-width: 760px;
  margin-bottom: 26px;
}

.flow-chart {
  display: grid;
  gap: 12px;
}

.flow-chart article {
  position: relative;
  padding: 22px;
}

.flow-chart article span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: var(--white);
  background: var(--blue);
  font-weight: 900;
}

.flow-chart h3 {
  margin-bottom: 8px;
  font-size: 1.35rem;
}

.split {
  display: grid;
  gap: 24px;
  align-items: center;
}

.backing-graphic,
.equivalence-graphic {
  padding: 22px;
}

.bar-row + .bar-row {
  margin-top: 20px;
}

.bar-row span,
.bar-row b {
  display: block;
  font-size: 0.9rem;
}

.bar-row span {
  color: var(--muted);
  font-weight: 800;
}

.bar {
  height: 16px;
  overflow: hidden;
  margin: 8px 0;
  border-radius: 999px;
  background: #e6e9ef;
}

.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.bar-muted i {
  background: #9aa3af;
}

.bar-red i {
  background: linear-gradient(90deg, var(--red), var(--blue));
}

.material-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 28px;
}

.material-stack span {
  height: 46px;
  border-radius: 4px;
  background: linear-gradient(135deg, #c7ccd4, #eef0f3);
  box-shadow: inset 0 -10px 0 rgba(21, 23, 26, 0.08);
}

.equivalence-graphic {
  display: grid;
  gap: 20px;
  align-items: center;
}

.cement-product-image {
  width: min(180px, 70vw);
  justify-self: center;
  padding: 18px;
  border-radius: var(--radius);
  background: #f6f7f9;
  box-shadow: 0 24px 45px rgba(21, 23, 26, 0.12);
}

.equals-line {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--blue));
}

.coin-token-image {
  width: min(150px, 70vw);
  justify-self: center;
  filter: drop-shadow(0 20px 28px rgba(21, 23, 26, 0.18));
}

.equivalence-copy strong {
  display: block;
  font-size: 1.4rem;
}

.sell-steps {
  display: grid;
  gap: 12px;
}

.sell-steps article {
  padding: 18px;
}

.coin-cta {
  margin-bottom: 48px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.market-chart {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.chart-title {
  padding: 18px 20px;
  background: #d7d9de;
}

.chart-title strong,
.chart-title span {
  display: block;
}

.chart-title strong {
  font-size: clamp(1rem, 5vw, 1.55rem);
  line-height: 1.1;
}

.chart-title span {
  margin-top: 4px;
  color: #333942;
}

.market-chart svg {
  width: 100%;
  height: auto;
  padding: 12px;
}

.grid line {
  stroke: #d9dde3;
  stroke-width: 1;
}

.axis-labels text,
.month-labels text {
  fill: #3f4651;
  font-size: 12px;
}

.chart-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line.cement {
  stroke: #009245;
}

.chart-line.dollar {
  stroke: #a00068;
}

.chart-line.fixed {
  stroke: #9799a1;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0 20px 20px;
  font-weight: 800;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-legend i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.cement-dot {
  background: #009245;
}

.dollar-dot {
  background: #a00068;
}

.fixed-dot {
  background: #9799a1;
}

@media (min-width: 760px) {
  .coin-nav {
    display: flex;
  }

  .coin-hero {
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: center;
    padding: 130px max(32px, calc((100vw - var(--max)) / 2)) 80px;
  }

  .coin-program-logo {
    max-width: 500px;
  }

  .coin-hero-actions .btn {
    flex: 0 0 auto;
  }

  .coin-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .flow-chart {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .split,
  .equivalence-graphic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .equivalence-graphic {
    grid-template-columns: 170px 1fr 150px 1.2fr;
  }
}