.di-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.8rem 0 }
.di-col { background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.4rem 1.5rem }
.di-col ul { padding-left: 1.1rem; margin: 0.6rem 0 0; color: var(--ink2); font-size: 0.87rem; line-height: 1.7 }
.di-col p { font-size: 0.88rem; color: var(--ink2); line-height: 1.65; margin: 0.4rem 0 0 }
.di-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); margin-bottom: 0.5rem }
.di-label--infra { color: var(--accent) }
.di-col:last-child { border-color: rgba(232,86,42,0.25); background: rgba(232,86,42,0.04) }
@media (max-width: 640px) { .di-compare { grid-template-columns: 1fr } }

/* ROLE GAP CARDS */
.gap-card { border: 1px solid var(--border); border-radius: var(--rl); padding: 1.5rem 1.6rem; margin: 1.2rem 0; position: relative; border-left: 3px solid var(--border) }
.gap-card:hover { border-left-color: var(--accent) }
.gap-card::before { content: attr(data-num); position: absolute; top: -10px; left: 1.2rem; background: var(--surface); color: var(--accent); font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.1rem 0.4rem; border: 1px solid var(--border) }
.gap-title { font-size: 1rem; font-weight: 500; color: var(--ink); margin-bottom: 0.6rem }
.gap-body { font-size: 0.88rem; color: var(--ink2); line-height: 1.65; margin-bottom: 0.75rem }
.gap-body:last-child { margin-bottom: 0 }