.cc-diagram__row { display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:24px; }
.cc-diagram__col { display:flex; flex-direction:column; align-items:center; }

.cc-diagram__card { width:100%; box-sizing:border-box; flex-grow:1; background:transparent; border:1px solid #CDCCDF; border-radius:8px; padding:28px; }
.cc-diagram__title { margin:0 0 14px; letter-spacing:-0.5px; text-transform:none; color:#130D3A; }
.cc-diagram__pills { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cc-diagram__pills li { background:transparent; border:1px solid #CDCCDF; border-radius:999px; padding:7px 14px; font-size:15px; color:#130D3A; }

.cc-diagram__arrow { display:block; flex-shrink:0; color:#130D3A; margin:4px auto; }
.cc-diagram__arrow--mobile { display:none; }

.cc-diagram__hub { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:#130D3A; color:#FFFFFF; border-radius:8px; padding:22px 32px; }
.cc-diagram__hub strong { font-family:'Lumin', serif; font-weight:700; font-size:23px; }
.cc-diagram__hub span { font-size:15px; color:#CDCCDF; !important; }

.cc-diagram__base { width:100%; box-sizing:border-box; flex-grow:1; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; text-align:center; border:2px dashed #130D3A; border-radius:8px; padding:20px 32px; background:#FFFFFF; color:#130D3A; }
.cc-diagram__base strong { font-size:17px; font-weight:500; }
.cc-diagram__base span { font-size:15px; color:#636466; }

@media (max-width: 767px) {
  .cc-diagram__row { grid-template-columns:1fr; gap:12px; }
  .cc-diagram__arrow--desktop { display:none; }
  .cc-diagram__arrow--mobile { display:block; }
  .cc-diagram__hub { flex-direction:column; align-items:flex-start; gap:8px; }
}