/* Incremental delivery: core + modules release after release (includes/visuals/increments.php) */
.ic-rels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 128px; column-gap: clamp(96px, 9vw, 136px); }
.ic-rel { position: relative; min-width: 0; display: flex; flex-direction: column; }
.ic-head { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ic-ver { display: block; font-family: var(--font-serif); font-size: 28px; line-height: 1.1; color: var(--forest); }
.ic-sub { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.ic-blocks { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 8px; }
.ic-b { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px; border-radius: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.3; color: var(--forest); }
.ic-b--core { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 84px; padding: 14px 18px; background: var(--forest); color: var(--white); box-shadow: 0 5px 0 var(--black); margin-bottom: 5px; }
.ic-core { font-family: var(--font-serif); font-size: 21px; font-weight: 500; }
.ic-core-sub { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.ic-b--old { background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; }
.ic-b--new { background: var(--green); box-shadow: 0 4px 0 var(--green-2); margin-bottom: 4px; }
.ic-b--slot { border: 1.5px dashed #c4beb5; }
.ic-plus { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--forest); color: var(--green); font-size: 16px; font-weight: 700; line-height: 1; }
.ic-key--old { background: var(--white); box-shadow: 0 0 0 1px var(--line) inset; }
.ic-legend { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

/* feedback loop between two releases */
.ic-fb { position: absolute; top: 50%; left: -128px; left: calc(-1 * clamp(96px, 9vw, 136px)); width: 128px; width: clamp(96px, 9vw, 136px); margin: 0; padding: 0 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--forest); transform: translateY(-50%); }
.ic-loop { width: 42px; height: 42px; fill: none; stroke: var(--green-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ic-arrow { width: 76px; height: 12px; fill: none; stroke: #7d8a80; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; stroke-linejoin: round; }
.ic-arrow path + path { stroke-dasharray: none; }

/* release after release: header, the existing blocks rise, the new modules drop in */
.js .vz-figure .ic-head, .js .vz-figure .ic-b--core, .js .vz-figure .ic-b--old { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .ic-fb { opacity: 0; transition: opacity .5s ease; }
.js .vz-figure .ic-b--new { opacity: 0; transform: translateY(-30px); transition: opacity .4s ease, transform .55s cubic-bezier(.3, 1.35, .5, 1); }
.js .vz-figure .ic-fb.ic-t5, .js .vz-figure .ic-fb.ic-t10 { transform: translateY(-50%); }
.js .vz-figure.is-visible .ic-head, .js .vz-figure.is-visible .ic-b { opacity: 1; transform: none; }
.js .vz-figure.is-visible .ic-fb { opacity: 1; }
.js .vz-figure.is-visible .ic-loop { animation: ic-spin 7s linear 3s infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }
.ic-t1 { transition-delay: .1s; } .ic-t2 { transition-delay: .25s; } .ic-t3 { transition-delay: .5s; } .ic-t4 { transition-delay: .7s; }
.ic-t5 { transition-delay: 1s; } .ic-t6 { transition-delay: 1.15s; } .ic-t7 { transition-delay: 1.25s; } .ic-t8 { transition-delay: 1.5s; }
.ic-t9 { transition-delay: 1.7s; } .ic-t10 { transition-delay: 2s; } .ic-t11 { transition-delay: 2.15s; } .ic-t12 { transition-delay: 2.25s; }
.ic-t13 { transition-delay: 2.5s; } .ic-t14 { transition-delay: 2.7s; } .ic-t15, .ic-t16 { transition-delay: 2.9s; }

@media (min-width: 861px) and (max-width: 1200px) {
  .ic-b { min-height: 62px; }
}
@media (max-width: 860px) {
  .ic-b--slot { display: none; }
  .ic-rels { grid-template-columns: minmax(0, 1fr); }
  .ic-fb, .js .vz-figure .ic-fb.ic-t5, .js .vz-figure .ic-fb.ic-t10 { position: static; width: auto; transform: none; flex-direction: row; justify-content: center; gap: 10px; padding: 22px 0; }
  .ic-loop { width: 30px; height: 30px; }
  .ic-arrow { width: 40px; transform: rotate(90deg); }
  .ic-head { margin-bottom: 14px; padding-bottom: 12px; }
  .ic-ver { font-size: 24px; }
  .ic-b { min-height: 46px; font-size: 15px; }
  .ic-b--core { min-height: 70px; }
}