.values-rainbow {
  /* Tune the ribbon here — the block's own script reads these back and
     resizes the SVG's box to match, so changing them never clips the
     ribbon or overlaps the content after it. */
  --vr-band-gap: 34px;
  --vr-band-thickness: 34px;
  --vr-top-pad: 60px;
  --vr-bottom-pad: 60px;
  --vr-min-width: 480px;

  position: relative;
  box-sizing: border-box;
  margin: auto;
  padding: 16px;
  width: 100%;
}

.values-rainbow__heading {
  text-align: center;
  color: #2b2b2b;
}

.values-rainbow__stage {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.values-rainbow__ribbon {
  display: block;
  width: 100%;
  height: auto;
  min-width: var(--vr-min-width);
  margin: 0 auto;
  overflow: visible;
}

.values-rainbow__band-pos {
  transform: translateY(calc(var(--vr-top-pad) + var(--vr-band-gap) * var(--i)));
}

.values-rainbow__band-stroke {
  fill: none;
  stroke-width: var(--vr-band-thickness);
}

.values-rainbow__band-stroke--red    { stroke: var(--nm-red); }
.values-rainbow__band-stroke--orange { stroke: var(--nm-orange); }
.values-rainbow__band-stroke--yellow { stroke: var(--nm-yellow); }
.values-rainbow__band-stroke--green  { stroke: var(--nm-green); }
.values-rainbow__band-stroke--blue   { stroke: var(--nm-blue); }
.values-rainbow__band-stroke--indigo { stroke: var(--nm-indigo); }
.values-rainbow__band-stroke--violet { stroke: var(--nm-violet); }

.values-rainbow__band-text {
  font-family: "sirenia", 'Segoe UI', 'Helvetica Neue', sans-serif;
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  fill: #fff;
  text-anchor: middle;
}

.values-rainbow__band-text--dark {
  fill: #2b2b2b;
}