/* ============================================================
   Customization (Git-to-Live) — uses the shared .appx-* design system
   (mani-globals-ltr.css). Only extra: the Git→Managely→Live pipeline
   visual, on the same tokens. Accent = brand blue.
   ============================================================ */
.pg-customization { --app-accent: var(--blue); }

.cz-pipe { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cz-pipe-node { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--snow); border: 2px solid var(--mist); border-radius: var(--r-xl); padding: 22px 30px; min-inline-size: 150px; }
.cz-pipe-node i { font-size: 26px; color: var(--slate); }
.cz-pipe-node strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.cz-pipe-node span { font-size: 13px; color: var(--slate); }
.cz-pipe-node--accent i { color: var(--blue); }
.cz-pipe-node--live i { color: var(--green); }
.cz-pipe-arrow { color: var(--mist); font-size: 20px; }
@media (max-width: 600px) { .cz-pipe { flex-direction: column; } .cz-pipe-arrow { transform: rotate(-90deg); } }