.investment-tool {
  min-height: 100svh;
  padding: clamp(7rem, 12vw, 10rem) var(--page-gutter) clamp(5rem, 9vw, 8rem);
}

.investment-tool__shell { width: min(100%, 76rem); margin: 0 auto; }
.investment-tool__intro { max-width: 54rem; }
.investment-tool__intro h1 { margin: 0.55rem 0 1.4rem; font: 600 clamp(3.2rem, 8vw, 7.4rem)/0.9 var(--font-body); letter-spacing: -0.07em; text-wrap: balance; }
.investment-tool__intro > p:not(.kicker) { max-width: 46rem; margin: 0; color: var(--world-muted); font-family: var(--font-serif); font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.75; }
.investment-tool__intro .investment-disclaimer { margin-top: 1rem; padding-left: 1rem; border-left: 1px solid var(--hairline); color: var(--world-faint); font-family: var(--font-body); font-size: 0.78rem; line-height: 1.65; }

.heatmap-kpis { display: grid; margin: clamp(2.5rem, 5vw, 4.5rem) 0 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: clip; border: 1px solid var(--hairline); border-radius: var(--radius-panel); background: var(--hairline); }
.heatmap-kpis > div { display: grid; min-height: 7.5rem; padding: 1.15rem; align-content: space-between; background: color-mix(in srgb, var(--world-bg-soft) 84%, transparent); }
.heatmap-kpis span { color: var(--world-faint); font: 0.62rem/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.heatmap-kpis strong { font-size: clamp(1.45rem, 3vw, 2.35rem); font-weight: 560; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }

.heatmap-layout { display: grid; grid-template-columns: minmax(17rem, 0.34fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.heatmap-controls { position: sticky; top: 5.7rem; padding: 1rem; border: 1px solid var(--glass-edge); border-radius: var(--radius-panel); background: var(--glass-fill); box-shadow: inset 0 1px var(--glass-highlight); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%); backdrop-filter: blur(var(--glass-blur)) saturate(125%); }
.heatmap-controls__head { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 1rem; }
.heatmap-controls h2 { margin: 0; font: 400 1.7rem/1 var(--font-display); letter-spacing: -0.03em; }
.heatmap-controls__head button { min-height: 2.35rem; padding: 0.45rem 0.75rem; border: 1px solid var(--glass-edge); border-radius: var(--radius-pill); color: inherit; background: transparent; cursor: pointer; font: 0.62rem/1 var(--font-mono); text-transform: uppercase; }
.heatmap-controls fieldset { display: grid; gap: 0.85rem; margin: 1rem 0 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--hairline); }
.heatmap-controls legend { padding: 0; color: var(--world-faint); font: 0.58rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.heatmap-controls label { display: grid; gap: 0.45rem; color: var(--world-muted); font-size: 0.75rem; }
.heatmap-controls label > span { display: flex; justify-content: space-between; gap: 0.75rem; }
.heatmap-controls output { color: var(--world-ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.heatmap-controls input[type="range"] { width: 100%; accent-color: var(--world-accent); cursor: pointer; }
.heatmap-check { display: flex !important; min-height: 2.75rem; align-items: center; grid-template-columns: auto 1fr; }
.heatmap-check input { accent-color: var(--world-accent); }

.heatmap-figures { display: grid; min-width: 0; gap: 1rem; }
.heatmap-figure { min-width: 0; padding: clamp(1rem, 2.4vw, 1.5rem); border: 1px solid var(--hairline); border-radius: var(--radius-panel); background: color-mix(in srgb, var(--world-bg-soft) 72%, transparent); }
.heatmap-figure__head { display: flex; margin-bottom: 1rem; align-items: end; justify-content: space-between; gap: 2rem; }
.heatmap-figure__head p { max-width: 26rem; margin: 0; color: var(--world-faint); font-size: 0.7rem; line-height: 1.5; }
.heatmap-figure__head > div > p { margin-bottom: 0.35rem; font: 0.55rem/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.heatmap-figure h2 { margin: 0; font: 400 clamp(1.7rem, 4vw, 2.8rem)/1 var(--font-display); letter-spacing: -0.04em; }
.heatmap-canvas-wrap { position: relative; }
#heatmap, #trajectory { width: 100%; border-radius: var(--radius-control); background: #101827; }
#heatmap { height: clamp(28rem, 52vw, 38rem); touch-action: none; cursor: crosshair; }
#trajectory { height: clamp(18rem, 32vw, 24rem); }
.heatmap-tooltip { position: absolute; z-index: 2; top: 0; left: 0; width: max-content; max-width: 14rem; padding: 0.6rem 0.75rem; border: 1px solid rgb(237 241 244 / 18%); border-radius: var(--radius-control); color: #edf1f4; background: rgb(13 23 34 / 86%); box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 22%); font: 0.7rem/1.5 var(--font-mono); opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0); }

@media (max-width: 64rem) {
  .heatmap-layout { grid-template-columns: 1fr; }
  .heatmap-controls { position: relative; top: auto; }
}

@media (max-width: 46rem) {
  .investment-tool { padding-inline: 1rem; }
  .heatmap-kpis { grid-template-columns: repeat(2, 1fr); }
  .heatmap-figure__head { align-items: start; flex-direction: column; gap: 0.7rem; }
  #heatmap { height: 27rem; }
  #trajectory { height: 19rem; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .heatmap-controls { background: var(--world-bg-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .heatmap-controls__head button { transition: none; }
}