/* ── What it does — outcome strip ───────────────────────────── */
.wid-strip {
    display: flex; align-items: stretch;
    border: 1px solid #e9ecef; border-radius: 12px;
    overflow: hidden; background: #fff;
}
.wid-item {
    flex: 1; padding: 1.1rem 1rem; text-align: center;
}
.wid-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 8px;
    background: rgba(13,110,253,.08); color: #0d6efd;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin: 0 auto .6rem;
}
.wid-label {
    font-size: .85rem; font-weight: 700; color: #1e293b; margin-bottom: .2rem;
}
.wid-desc {
    font-size: .77rem; color: #64748b; line-height: 1.45;
}
.wid-divider {
    width: 1px; background: #e9ecef; flex-shrink: 0;
}

/* ── Use-case cards ───────────────────────────────────────────── */
.uca-card {
    background: #fff; border: 1px solid #e9ecef; border-radius: 12px;
    padding: 1.375rem 1.25rem; height: 100%;
    transition: box-shadow .2s, transform .2s;
}
.uca-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.uca-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 8px;
    background: rgba(13,110,253,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #0d6efd; margin-bottom: .75rem;
}
.uca-card h3 { font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; color: #1e293b; }
.uca-card p  { font-size: .8375rem; color: #64748b; margin-bottom: 0; line-height: 1.55; }

/* ── How it's built — pipeline ───────────────────────────────── */
.hib-pipeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: start;
    gap: 0;
}
.hib-step {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.375rem 1.25rem;
    position: relative;
    transition: box-shadow .2s, transform .2s;
}
.hib-step:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.hib-step-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-bottom: .75rem;
}
.hib-c1 { background: rgba(74,111,165,.1);  color: #4a6fa5; }
.hib-c2 { background: rgba(46,139,87,.1);   color: #2e8b57; }
.hib-c3 { background: rgba(217,119,6,.1);   color: #d97706; }
.hib-c4 { background: rgba(124,58,237,.1);  color: #7c3aed; }
.hib-step-num {
    position: absolute; top: .7rem; right: .9rem;
    font-size: .65rem; font-weight: 800; color: #cbd5e1;
    letter-spacing: .04em;
}
.hib-step-title {
    font-size: .95rem; font-weight: 700; color: #1e293b;
    margin: 0 0 .4rem; line-height: 1.3;
}
.hib-step-body {
    font-size: .8rem; color: #475569; line-height: 1.55;
    margin: 0 0 .65rem;
}
.hib-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hib-tag {
    font-size: .65rem; font-weight: 600; border-radius: 20px;
    padding: 2px 8px; background: #f1f5f9; color: #475569;
    border: 1px solid #e2e8f0;
}
.hib-arrow {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #94a3b8; padding: 0 .35rem;
    margin-top: 2.2rem;
}

/* ── How it's built — audit bar ──────────────────────────────── */
.hib-audit-bar {
    display: flex; align-items: flex-start; gap: 1rem;
    background: #f0f6ff; border: 1px solid #bfdbfe;
    border-radius: 10px; padding: 1rem 1.25rem;
}
.hib-audit-icon {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 8px;
    background: rgba(29,78,216,.1); color: #1d4ed8;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-top: .1rem;
}
.hib-audit-body { flex: 1; font-size: .83rem; color: #1e3a5f; line-height: 1.55; }
.hib-audit-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: .5rem; }
.hib-apill {
    font-size: .65rem; font-weight: 600; white-space: nowrap;
    background: #1d4ed8; color: #fff; border-radius: 20px;
    padding: 2px 9px;
}

/* ── How it's built — extensibility bar ──────────────────────── */
.hib-ext-bar {
    display: flex; align-items: flex-start; gap: 1rem;
    background: #fdf4ff; border: 1px solid #e9d5ff;
    border-radius: 10px; padding: 1rem 1.25rem;
}
.hib-ext-icon {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 8px;
    background: rgba(124,58,237,.1); color: #7c3aed;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; margin-top: .1rem;
}
.hib-ext-title { font-size: .85rem; font-weight: 700; color: #4c1d95; margin-bottom: .25rem; }
.hib-ext-body { font-size: .8rem; color: #6b21a8; line-height: 1.55; margin-bottom: .5rem; }
.hib-ext-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.hib-epill {
    font-size: .65rem; font-weight: 600; border-radius: 20px;
    padding: 2px 8px; background: #ede9fe; color: #5b21b6;
    border: 1px solid #ddd6fe;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hib-pipeline {
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .hib-arrow { margin-top: 0; transform: rotate(90deg); }
    .hib-audit-pills { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}
@media (max-width: 640px) {
    .wid-strip { flex-direction: column; }
    .wid-divider { width: auto; height: 1px; }
}