.smtree__head { margin-top: 56px; max-width: 760px; }
.smtree__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: 40px; line-height: 46px; letter-spacing: -1.2px;
  color: var(--accent-strong); margin: 0 0 12px;
}
.smtree__lede {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--mid); margin: 0;
}

.smtree__wrap { margin-top: 44px; max-width: 920px; }

/* Root node */
.sm-root {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: var(--radius-pill);
  background: var(--accent-strong); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  box-shadow: var(--shadow-card);
}
.sm-root .fa-solid { font-size: 16px; }

/* Branch groups */
.sm-branches {
  margin-top: 12px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px;
  /* left border that the connectors hang off */
  padding-left: 26px; position: relative;
}
.sm-branches::before {
  content: ""; position: absolute; left: 11px; top: -12px; bottom: 28px;
  width: 2px; background: var(--line);
}

.sm-branch { position: relative; padding-top: 20px; }
/* horizontal connector from spine to each branch heading */
.sm-branch::before {
  content: ""; position: absolute; left: -15px; top: 34px;
  width: 15px; height: 2px; background: var(--line);
}

.sm-branch__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.sm-branch__chip {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff; font-size: 16px;
  background: var(--bccol, var(--accent));
}
.sm-branch__label {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  color: var(--ink); line-height: 1.2;
}
.sm-branch__label small {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--bccol, var(--accent)); margin-bottom: 2px;
}

/* Leaf list with elbow connectors */
.sm-leaves { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.sm-leaves::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 18px;
  width: 2px; background: var(--line-2);
}
.sm-leaf { position: relative; }
.sm-leaf::before {
  content: ""; position: absolute; left: 0; top: 19px;
  width: 14px; height: 2px; background: var(--line-2);
}
.sm-leaf > a {
  display: flex; align-items: center; gap: 10px;
  margin-left: 18px; padding: 8px 12px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--ink-2); transition: background .15s, color .15s;
}
.sm-leaf > a .lico { width: 18px; text-align: center; color: var(--bccol, var(--accent)); font-size: 13px; }
.sm-leaf > a:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* per-branch colour vars */
.sm-branch--cmi     { --bccol: var(--halo-lavender); --accent: var(--halo-lavender); --accent-strong: #086963; --accent-soft: rgba(8,105,99,.08); }
.sm-branch--pi      { --bccol: var(--halo-blue);     --accent: var(--halo-blue);     --accent-strong: #001349; --accent-soft: rgba(0,86,224,.08); }
.sm-branch--general { --bccol: #716bcf;              --accent: #716bcf;              --accent-strong: #4b46a8; --accent-soft: rgba(113,107,207,.10); }
.sm-branch--legal   { --bccol: #5b5b62;              --accent: #5b5b62;              --accent-strong: #1a1a1d; --accent-soft: rgba(91,91,98,.10); }

@media (max-width: 820px) {
  .sm-branches { grid-template-columns: 1fr; }
  .smtree__title { font-size: 30px; line-height: 1.2; letter-spacing: -.6px; }
}

@media (max-width: 570px) {
  .sm-branches { grid-template-columns: none; }
}

[data-theme="dark"] .sm-root { background: #1a2b52; }