.guided-feature--finance { --feature-background: #f4f6f8; }
.guided-feature--finance .guided-feature__summary { max-width: 440px; }
.guided-feature__media--finance { width: 100%; }
.guided-feature__media--finance::before,
.guided-feature__media--finance::after { display: none; }

.finance-scene {
  width: min(100%, 660px);
  margin-inline: auto;
  padding-block: 18px;
  perspective: 1400px;
  isolation: isolate;
}

.finance-scene__surface {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--finance-lift, 0px), 0)
    rotateX(var(--finance-pitch, 0deg)) rotateY(var(--finance-turn, 0deg))
    rotateZ(var(--finance-roll, 0deg)) scale(var(--finance-scale, 1));
  backface-visibility: hidden;
  filter: drop-shadow(0 18px 18px rgba(7, 26, 53, .065));
  pointer-events: none;
  user-select: none;
}

.finance-scene__art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.finance-scene__chart {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.finance-flow__surface { fill: #fff; }
.finance-flow__title { fill: var(--navy); font: 650 21px "Manrope", Arial, sans-serif; letter-spacing: -.65px; }
.finance-flow__legend { fill: #143b61; font: 450 14px "Manrope", Arial, sans-serif; }
.finance-flow__dot--income, .finance-flow__markers--income { fill: #143b61; }
.finance-flow__dot--expense, .finance-flow__markers--expense { fill: var(--orange); }
.finance-flow__labels { fill: none; stroke: #dce2e8; stroke-width: 9; stroke-linecap: round; }
.finance-flow__grid { fill: none; stroke: #dce3eb; stroke-width: 1; }
.finance-flow__area { fill: url(#finance-flow-area); }
.finance-flow__line { fill: none; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.finance-flow__line--income { stroke: #143b61; }
.finance-flow__line--expense { stroke: var(--orange); }

@media (max-width: 900px) {
  .guided-feature--finance .guided-feature__inner { gap: 24px; }
  .guided-feature__media--finance { width: min(100%, 560px); justify-self: center; }
  .finance-scene { padding-block: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .finance-scene__surface { transform: none; }
}