/* An orderly market texture behind the message, never a live data surface. */
.market-backdrop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  min-height: 490px;
  margin-bottom: 32px;
  padding: 58px 28px 12px;
  border: 1px solid #242826;
  border-radius: 16px;
  background: #0a0d0c;
  color: #f3f5f2;
}

.market-backdrop-field {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(14, 78px);
  grid-template-rows: repeat(13, 40px);
  column-gap: 8px;
  width: max-content;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.market-backdrop-cell {
  display: grid;
  align-content: center;
  color: #a3afa8;
  opacity: var(--cell-opacity);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: opacity .165s ease;
}

.market-backdrop-cell.is-changing { opacity: .035; transition-duration: .1s; }
.market-backdrop.is-motion-still .market-backdrop-cell { transition: none; }

.market-backdrop::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 49% 78% at 50% 46%, #0a0d0cf5 12%, #0a0d0cc9 40%, #0a0d0c14 86%),
    linear-gradient(0deg, #0a0d0cbd, transparent 22%, transparent 80%, #0a0d0c50);
}

.market-backdrop-content { min-width: 0; text-align: center; }
.market-backdrop-eyebrow { color: #b5beb8; font-size: .75rem; letter-spacing: .075em; }
.market-backdrop-content h2 {
  margin: 20px 0 18px;
  font-size: clamp(2.7rem, 5.2vw, 4rem);
  font-weight: 430;
  line-height: 1.06;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.market-backdrop-content h2 > span { color: #b8c2ba; }
.market-backdrop-content p { margin: 0; color: #a5afa8; font-size: 1rem; line-height: 1.7; }
.market-backdrop-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  min-height: 48px;
  margin-top: 27px;
  padding: 0 23px;
  border: 1px solid #f0f3ed;
  border-radius: 999px;
  background: #f0f3ed;
  color: #202720;
  font-size: .875rem;
  font-weight: 500;
  transition: background .2s ease, border-color .2s ease;
}
.market-backdrop-cta > span { font-size: 1.125rem; }
.market-backdrop-cta:hover { background: #dce5d8; border-color: #dce5d8; }
.market-backdrop :is(a, button):focus-visible { outline: 2px solid #c0d1b7; outline-offset: 5px; }

.market-backdrop-foot {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 32px;
  justify-content: space-between;
  align-items: center;
  gap: 0 12px;
  color: #8e9a92;
  font-size: .75rem;
}
.market-backdrop-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.market-backdrop-toggle[hidden] { display: none; }
.market-backdrop-toggle:hover { color: #e0e7df; }
.market-backdrop-toggle-icon { width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.market-backdrop-toggle[data-paused=true] .market-backdrop-toggle-icon { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }

@media (max-width: 700px) {
  .market-backdrop { min-height: 440px; margin-bottom: 24px; padding: 48px 18px 10px; border-radius: 12px; }
  .market-backdrop-field { column-gap: 2px; grid-template-rows: repeat(13, 36px); }
  .market-backdrop::after { background: radial-gradient(ellipse 82% 64% at 50% 45%, #0a0d0cee 18%, #0a0d0cbf 50%, #0a0d0c26 100%); }
  .market-backdrop-content h2 { font-size: clamp(2.25rem, 9vw, 3.3rem); }
  .market-backdrop-foot { column-gap: 6px; margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .market-backdrop-cell, .market-backdrop-cta { transition: none; }
}