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

.reports-scene {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1 / 1.12;
  margin-inline: auto;
  perspective: 1600px;
  container-type: inline-size;
  isolation: isolate;
}

.reports-scene__overview {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 92%;
  height: auto;
  transform-origin: 50% 50%;
  transform: translate3d(0, var(--reports-lift, 0px), 0)
    rotateX(var(--reports-pitch, 0deg)) rotateY(calc(-8deg + var(--reports-turn, 0deg))) rotateZ(2deg);
  backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

/* Real chart layers replace the flattened illustration without changing
   its report anatomy. Only chart geometry animates; labels remain steady. */
.report-overview {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  aspect-ratio: 1 / 1.035;
  padding: 5% 4.4%;
  color: var(--navy);
  background: linear-gradient(140deg, #fff 55%, #f6f8fa);
  border: 1px solid rgba(7, 26, 53, .07);
  border-radius: 11px;
  box-shadow: -4px 4px 0 #e1e7ed, 0 22px 32px rgba(7, 26, 53, .1);
}

.report-overview__header { flex: 0 0 auto; margin-bottom: 4%; }
.report-overview__header img { display: block; width: 32%; height: auto; }
.report-overview__header p {
  margin: 8px 0 0;
  font-size: clamp(17px, 4.7cqw, 29px);
  font-weight: 680;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.report-overview__grid {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr .66fr;
  gap: 2cqw;
}

.report-module {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 4.5% 5%;
  background: rgba(255, 255, 255, .62);
  border: 1px solid #e7ecf1;
  border-radius: 7px;
}

.report-module__title {
  flex: 0 0 auto;
  margin: 0 0 1.4cqw;
  font-size: clamp(10px, 2.5cqw, 15.5px);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.report-revenue { display: block; flex: 1; min-height: 0; width: 100%; }
.report-revenue__grid { fill: none; stroke: #dfe6ec; stroke-width: .8; stroke-dasharray: 3 5; }
.report-revenue__area { fill: #f45118; opacity: .055; }
.report-revenue__line {
  fill: none;
  stroke: var(--orange);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.report-revenue__line--previous { stroke: #143b61; stroke-width: 3; }

.report-goal { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 2.3cqw; padding-bottom: 1cqw; }
.report-goal__track { height: 2.6cqw; background: #e2e7ed; border-radius: 4px; overflow: hidden; }
.report-goal__fill { display: block; width: 73%; height: 100%; background: var(--orange); border-radius: inherit; transform-origin: left; }
.report-goal__lines, .report-stock__lines { display: grid; align-content: start; gap: 1.1cqw; }
.report-goal__lines i, .report-stock__lines i { display: block; width: 68%; height: 1.3cqw; border-radius: 3px; background: #dfe5ec; }
.report-goal__lines i:last-child { width: 49%; }

.report-channels { display: flex; align-items: center; flex: 1; min-height: 0; gap: 7%; }
.report-channels__donut { display: block; width: 59%; height: 100%; min-height: 0; overflow: visible; }
.report-channels__track, .report-channels__segment { fill: none; stroke-width: 26; }
.report-channels__track { stroke: #eef2f6; }
.report-channels__segment--orange { stroke: var(--orange); }
.report-channels__segment--navy { stroke: #143b61; }
.report-channels__segment--blue { stroke: #7d9bb8; }
.report-channels__segment--gray { stroke: #b7c6d4; }
.report-channels__legend { display: grid; flex: 1; gap: 1.6cqw; }
.report-channels__legend span { position: relative; display: block; height: 1.1cqw; background: #dfe5ec; border-radius: 3px; }
.report-channels__legend span::before { content: ""; position: absolute; left: -2cqw; width: 1.1cqw; height: 100%; background: var(--orange); border-radius: 50%; }
.report-channels__legend span:nth-child(2)::before { background: #143b61; }
.report-channels__legend span:nth-child(3)::before { background: #7d9bb8; }
.report-channels__legend span:nth-child(4)::before { background: #b7c6d4; }

.report-ranking { display: grid; flex: 1; min-height: 0; align-content: center; gap: 1.5cqw; }
.report-module--ranking .report-module__title { font-size: clamp(8px, 2.25cqw, 14px); }
.report-ranking > div { display: grid; grid-template-columns: 24% 1fr; gap: 7%; height: 1.8cqw; }
.report-ranking i, .report-ranking span { display: block; background: #e6ebf0; border-radius: 3px; }
.report-ranking i { background: #d6dfe8; }
.report-ranking__fill { display: block; height: 100%; background: #143b61; border-radius: inherit; transform-origin: left; }
.report-ranking__fill--first { background: var(--orange); }
.report-ranking__fill--muted { background: #93aabe; }

.report-module--stock { grid-column: 1 / -1; padding: 2.5% 2.3%; }
.report-module--stock .report-module__title { margin-bottom: 1cqw; }
.report-stock { display: flex; flex: 1; min-height: 0; gap: 8%; align-items: center; }
.report-stock__bars { display: flex; align-items: flex-end; gap: 5%; width: 40%; height: 100%; }
.report-stock__bars i { flex: 1; background: #a8bbcd; border-radius: 2px 2px 0 0; transform-origin: center bottom; }
.report-stock__lines { width: 44%; }
.report-stock__lines i { width: 100%; }
.report-stock__lines i:nth-child(2) { width: 83%; }
.report-stock__lines i:nth-child(3) { width: 67%; }

.report-growth {
  position: absolute;
  z-index: 1;
  right: 1%;
  bottom: 1.5%;
  box-sizing: border-box;
  width: 55%;
  padding: 3.2% 3% 1.8%;
  color: var(--navy);
  background: linear-gradient(150deg, #fff 40%, #f8fafc);
  border-radius: 7px;
  box-shadow: -2px 3px 0 #e5eaf0, 0 20px 35px rgba(7, 26, 53, .13),
    inset 0 0 0 1px rgba(7, 26, 53, .045);
  transform-origin: 50% 60%;
  transform: translate3d(0, var(--reports-chart-lift, 0px), 22px)
    rotateX(5deg) rotateY(var(--reports-chart-turn, -8deg)) rotateZ(-3deg);
  backface-visibility: hidden;
}

.report-growth__title {
  margin: 0 0 8px;
  font-size: clamp(11px, 2.55cqw, 16px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -.04em;
}

.report-growth__chart { display: block; width: 100%; height: auto; overflow: visible; }
.report-growth__grid { fill: none; stroke: #e3e9ef; stroke-dasharray: 3 5; stroke-width: .8; }
.report-growth__baseline { fill: none; stroke: #d7e0e8; stroke-width: 1; }
.report-growth__shadow { fill: #071a35; opacity: .055; }
.report-growth__front { fill: #143b61; }
.report-growth__side { fill: #0a2846; }
.report-growth__top { fill: #5680a5; }
.report-growth__bar--accent .report-growth__front { fill: var(--orange); }
.report-growth__bar--accent .report-growth__side { fill: #d94212; }
.report-growth__bar--accent .report-growth__top { fill: #ff9859; }

@media (max-width: 900px) {
  .guided-feature--reports .guided-feature__inner { gap: 28px; }
  .guided-feature__media--reports { width: min(100%, 500px); justify-self: center; }
  .reports-scene { width: 96%; aspect-ratio: 1 / 1.18; }
  .report-growth { box-shadow: -1px 2px 0 #e5eaf0, 0 14px 24px rgba(7, 26, 53, .1); }
}

@media (prefers-reduced-motion: reduce) {
  .reports-scene__overview { transform: none; }
  .report-growth { transform: rotateZ(-3deg); }
}