/* Source [data-dc-tpl='10']: 4-up grid of level columns, 20px gap, stacks on mobile. */
.sitemap-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}

.sitemap-columns__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Dark level header — source [data-dc-tpl='13'] */
.sitemap-columns__header {
  background: rgb(20, 20, 20);
  color: rgb(255, 255, 255);
  padding: 16px 18px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sitemap-columns__sub {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.65;
}

/* White node card with colored left accent — source [data-dc-tpl='16'] */
.sitemap-columns__node {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(226, 222, 215);
  border-left: 3px solid var(--node-accent, rgb(226, 222, 215));
  padding: 13px 16px;
}

.sitemap-columns__node-title {
  font-weight: 700;
  font-size: 13.5px;
}

.sitemap-columns__node-desc {
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgb(107, 103, 95);
}

/* The source keeps 4 fixed columns at every viewport — on mobile they narrow to
   content-min widths and overflow/clip the 326px column rather than stacking. */