/* The year-on-year growth plan section on /invest and /investors. It reuses the page's own .i5-commercial layout and theme variables
   (--ip-ink, --ip-muted, --ip-blue, --ip-line), so it follows the light and dark themes. */
.cc-growth .cc-growth-lede { margin: 18px 0 0; max-width: 34em; font-size: 15px; line-height: 1.7; color: var(--ip-muted); }
.cc-growth .cc-growth-chart { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.cc-growth .cc-growth-col { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.cc-growth .cc-growth-barwrap { --area: clamp(190px, 20vw, 280px); height: var(--area); display: flex; flex-direction: column; justify-content: flex-end; }
.cc-growth .cc-growth-value { margin: 0 0 8px; color: var(--ip-blue); font: italic 300 clamp(17px, 1.9vw, 26px)/1.1 "Raleway Score Italic", sans-serif; white-space: nowrap; }
.cc-growth .cc-growth-bar {
  width: 100%; height: calc(var(--p) * (var(--area) - 36px)); min-height: 5px; border-radius: 10px 10px 3px 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ip-blue) 92%, #ffffff) 0%, color-mix(in srgb, var(--ip-blue) 32%, transparent) 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ip-blue) 30%, transparent) inset, 0 10px 28px color-mix(in srgb, var(--ip-blue) 18%, transparent);
  transform-origin: 50% 100%;
}
.cc-growth .cc-growth-label { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ip-line); color: var(--ip-ink); font-size: 14px; line-height: 1.35; }
.cc-growth .cc-growth-label small { display: block; margin-top: 3px; color: var(--ip-muted); font-size: 11.5px; line-height: 1.45; }
.cc-growth .cc-growth-label small:first-of-type { color: var(--ip-ink); opacity: .86; font-size: 12.5px; }
.cc-growth .cc-growth-note { margin: 16px 0 0; color: var(--ip-muted); font-size: 12px; }
.cc-growth details { margin-top: 18px; }

/* the bars rise once, when the section scrolls into view */
.cc-growth.cc-ready .cc-growth-bar { transform: scaleY(0); }
.cc-growth.cc-ready .cc-growth-value, .cc-growth.cc-ready .cc-growth-label { opacity: 0; transform: translateY(8px); }
.cc-growth.cc-in .cc-growth-bar { transform: scaleY(1); transition: transform 1s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms); }
.cc-growth.cc-in .cc-growth-value, .cc-growth.cc-in .cc-growth-label { opacity: 1; transform: none; transition: opacity .8s ease calc(var(--i) * 110ms + 250ms), transform .8s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 110ms + 250ms); }
@media (prefers-reduced-motion: reduce) {
  .cc-growth.cc-ready .cc-growth-bar { transform: none; }
  .cc-growth.cc-ready .cc-growth-value, .cc-growth.cc-ready .cc-growth-label { opacity: 1; transform: none; }
  .cc-growth.cc-in .cc-growth-bar, .cc-growth.cc-in .cc-growth-value, .cc-growth.cc-in .cc-growth-label { transition: none; }
}
@media (max-width: 760px) {
  .cc-growth .cc-growth-chart { gap: 7px; }
  .cc-growth .cc-growth-value { font-size: 14px; }
  .cc-growth .cc-growth-barwrap { --area: 170px; }
  .cc-growth .cc-growth-label { font-size: 12px; margin-top: 9px; padding-top: 8px; }
  .cc-growth .cc-growth-label small { font-size: 10px; }
  .cc-growth .cc-growth-label small:first-of-type { font-size: 10.5px; }
}