/* ---------- Market ---------- */
main > .section.market-section {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 3.8vw, 54px) clamp(22px, 4.6vw, 68px);
  border-radius: var(--r-xl);
  background: var(--night);
  color: var(--on-night);
}

.market-dashboard {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 24px;
}

.market-dashboard-intro {
  grid-column: 1 / span 4;
}

.market-dashboard-eyebrow {
  color: var(--on-night-2);
}

.market-dashboard-title {
  margin-top: 24px;
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.market-dashboard-title span {
  display: block;
}

.market-dashboard-title span + span {
  color: var(--blue-on-night);
}

.market-dashboard-summary {
  margin-top: 20px;
  font-size: 1.05rem;
  color: var(--on-night-2);
}

.market-map-card {
  position: relative;
  grid-column: 5 / span 4;
  display: flex;
  flex-direction: column;
  min-height: clamp(350px, 30vw, 416px);
}

.market-map-stat {
  position: relative;
  z-index: 2;
}

.market-map-number {
  display: block;
  font-size: clamp(4rem, 8.2vw, 7.6rem);
  line-height: 0.86;
  letter-spacing: -0.065em;
}

.market-map-label {
  margin-top: 12px;
  font-size: 1.05rem;
  color: var(--on-night-2);
}

.market-map-visual {
  position: absolute;
  right: -8%;
  bottom: 0;
  width: 104%;
  max-width: none;
  height: auto;
  filter: invert(1) hue-rotate(180deg) saturate(1.5) brightness(1.15);
  mix-blend-mode: screen;
}

.market-card-source {
  position: relative;
  z-index: 2;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-night-2);
}

.market-dashboard-side {
  grid-column: 9 / -1;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 16px;
}

.market-chart-card,
.market-framework-card {
  padding: 22px;
  border: 1px solid var(--line-night);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.035);
}

.market-chart-header strong,
.market-framework-card strong {
  display: block;
  font-size: clamp(2.2rem, 3.4vw, 3.1rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.market-chart-header p,
.market-framework-card p {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--on-night-2);
}

.market-vet-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  overflow: visible;
  stroke: none;
}

.market-vet-chart :is(path, circle) {
  vector-effect: none;
  filter: none;
}

.market-vet-chart .market-chart-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.market-vet-chart .market-chart-area {
  fill: url(#marketChartArea);
  stroke: none;
}

.market-vet-chart .market-chart-line {
  fill: none;
  stroke: var(--blue-on-night);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s var(--ease) 0.25s;
}

.js .rx-reveal:not(.is-in) .market-chart-line {
  stroke-dashoffset: 1;
}

.market-vet-chart .market-chart-point {
  fill: var(--night);
  stroke: var(--blue-on-night);
  stroke-width: 2;
}

.market-vet-chart .market-chart-endpoint {
  fill: var(--blue-on-night);
  stroke: rgba(140, 184, 255, 0.28);
  stroke-width: 9;
}

.market-vet-chart text {
  fill: var(--on-night-2);
  stroke: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.market-chart-caveat {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-night-2);
}

.market-framework-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.market-framework-card small {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-on-night);
}

.market-framework-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-night);
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--blue-on-night);
}

@media (max-width: 1100px) {
  .market-dashboard-intro {
    grid-column: 1 / -1;
  }

  .market-map-card {
    grid-column: 1 / span 6;
  }

  .market-dashboard-side {
    grid-column: 7 / -1;
  }
}

@media (max-width: 767px) {
  main > .section.market-section {
    border-radius: var(--r-lg);
  }

  .market-dashboard {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .market-dashboard-intro,
  .market-map-card,
  .market-dashboard-side {
    grid-column: 1;
  }

  .market-map-card {
    min-height: 0;
    margin-top: 18px;
    padding-bottom: 4px;
  }

  .market-map-number {
    font-size: clamp(4.4rem, 22vw, 6.4rem);
  }

  .market-map-visual {
    position: static;
    width: 112%;
    margin: -34px -6% 0;
  }

  .market-card-source {
    margin-top: 2px;
  }
}