/* ══════════════════════════════════════════
   РОАДМАП-ДЕРЕВО — стили обёртки
   SVG грузится через <object> и имеет собственные стили внутри
   ══════════════════════════════════════════ */

.roadmap-tree {
  position: relative;
  margin: 24px auto 40px;
  padding: 28px 16px 20px;
  max-width: 880px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    rgba(76,175,80,0.04) 0%,
    transparent 50%,
    rgba(33,150,243,0.03) 100%);
  border: 1px solid var(--md-default-fg-color--lightest, #e0e0e0);
}

.roadmap-tree__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 20px;
  opacity: 0.75;
  line-height: 1.6;
  font-size: 0.95rem;
}

.roadmap-tree__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 22px;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light, #666);
  margin-bottom: 16px;
  padding: 0 8px;
}
.roadmap-tree__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.roadmap-tree__legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.roadmap-tree__svg {
  display: block;
  width: 100%;
  max-width: 840px;
  height: auto;
  min-height: 800px;
  margin: 0 auto;
  border: none;
}

@media (max-width: 640px) {
  .roadmap-tree { padding: 20px 8px 16px; }
  .roadmap-tree__svg { min-height: 650px; }
}