/* =====================================================
   ROADMAP — TREE STRUCTURE
   =====================================================
   The roadmap is rendered as a tree. A vertical
   trunk runs along the inline-start edge. Phase
   headings sit on the trunk as large filled nodes.
   Individual milestones branch off the trunk via
   horizontal connectors and smaller hollow nodes.

   Every positional value uses inset-inline-start /
   padding-inline-start so the tree naturally mirrors
   in RTL, with the trunk on the right and branches
   growing leftward. */

.roadmap-tree {
  list-style: none;
  padding: 0;
  margin-block-start: 2rem;
  position: relative;
}

/* The trunk — a thin vertical line that all nodes
   attach to, evoking a vine or a young tree stem. */
.roadmap-tree::before {
  content: "";
  position: absolute;
  inset-inline-start: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--green-pale);
  transition: background var(--transition);
}

/* ------- Phase nodes (on the trunk) ------- */

.tree-phase {
  position: relative;
  padding-inline-start: 44px;
  padding-block-end: 0.5rem;
}

/* Large filled circle sitting directly on the trunk
   to mark the start of a growth season. */
.tree-phase::before {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 0.2rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  transition: background var(--transition);
}

.tree-phase h3 {
  font-family: "Fira Sans", "Palatino Linotype", serif;
  font-size: 1.1rem;
  color: var(--text-heading);
  margin: 0;
}

/* ------- Milestone branches ------- */

.tree-branch {
  position: relative;
  padding-inline-start: 72px;
  padding-block-end: 0.5rem;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Small hollow circle at the tip of each branch. */
.tree-branch::before {
  content: "";
  position: absolute;
  inset-inline-start: 48px;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--green-soft);
  transition: background var(--transition), border-color var(--transition);
}

/* Horizontal connector from the trunk to the
   milestone circle — the actual "branch" of the
   tree. It grows from the trunk toward inline-end,
   so in RTL it grows rightward from a right-side
   trunk, producing a correct mirror. */
.tree-branch::after {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
  top: calc(0.35rem + 4px);
  width: 32px;
  height: 2px;
  background: var(--green-pale);
  transition: background var(--transition);
}

/* The last milestone before a new phase needs
   extra spacing to let the tree breathe. */
.tree-branch.last-in-phase {
  padding-block-end: 1.5rem;
}