/* DBIM Performance Smart Board banner. Same 1440px breakout as the slider; scrollbar-aware via --vw. */
.dbim-psb-wrap {
    --s-w: min(1440px, var(--vw, 100vw) - 32px);
    clear: both;
    width: var(--s-w);
    margin: 16px 0 8px calc(50% - var(--s-w) / 2);
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}
.dbim-psb {
    --p-navy: #162f6a;
    --p-blue: #214aab;
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 138px;
    padding: 20px 32px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #a3bbf3;
    border-radius: 15px;
    background: linear-gradient(100deg, #ffffff 0%, #d2dfff 30%, #d2dfff 70%, #a3bbf3 100%);
    color: #150202;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(20, 34, 79, .08);
    transition: box-shadow .2s ease;
}
.dbim-psb:hover { box-shadow: 0 6px 18px rgba(20, 34, 79, .16); }
.dbim-psb:focus-visible { outline: 3px solid #ffc107; outline-offset: 3px; }
.dbim-psb *, .dbim-psb *::before, .dbim-psb *::after { box-sizing: border-box; }

/* decorative layers */
.psb-waves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.psb-map { position: absolute; z-index: -1; right: 4.5%; top: -3%; height: 108%; width: auto; aspect-ratio: 1029 / 308; opacity: .5; pointer-events: none; }

/* content */
.psb-emblem { flex: 0 0 auto; width: 78px; height: 78px; display: block; }
.psb-emblem svg { width: 100%; height: 100%; display: block; }
.psb-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; max-width: 700px; }
.psb-title { font-size: var(--dbim-fs-h2); font-weight: 700; line-height: 1.2; color: var(--p-navy); }
.psb-desc { font-size: var(--dbim-fs-p1); font-weight: 600; line-height: 1.4; color: #150202; }
.psb-btn { flex: 0 0 auto; margin-left: auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 22px; background: var(--p-blue); color: #fff; border-radius: 5px; font-size: var(--dbim-fs-p2); font-weight: 600; line-height: 1.2; box-shadow: 0 2px 6px rgba(33, 80, 184, .35); transition: background .15s; }
.dbim-psb:hover .psb-btn, .dbim-psb:focus-visible .psb-btn { background: #162f6a; }

/* laptop / tablet landscape */
@media (max-width: 1199px) {
    .dbim-psb { padding: 18px 24px; gap: 18px; }
    .psb-emblem { width: 68px; height: 68px; }
    .psb-text { max-width: 58%; }
    .psb-map { right: 2%; opacity: .42; }
}
/* tablet portrait */
@media (max-width: 899px) {
    .dbim-psb { min-height: 124px; }
    .psb-map { height: 96%; opacity: .32; }
    .psb-text { max-width: 62%; }
}
/* phone: stack emblem + title, then description, then button */
@media (max-width: 640px) {
    .dbim-psb-wrap { --s-w: min(1440px, var(--vw, 100vw) - 20px); margin-top: 10px; }
    .dbim-psb {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "emb title" "desc desc" "btn btn";
        align-items: center;
        gap: 10px 14px;
        padding: 16px;
        border-radius: 12px;
    }
    .psb-text { display: contents; }
    .psb-emblem { grid-area: emb; width: 52px; height: 52px; }
    .psb-title { grid-area: title;  }
    .psb-desc { grid-area: desc;  }
    .psb-btn { grid-area: btn; margin-left: 0; justify-self: start; min-height: 42px; }
    .psb-map { right: -14%; top: 0; height: 56%; opacity: .26; }
}
@media (max-width: 400px) { .psb-btn { justify-self: stretch; } }

html.a11y-images .psb-map { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .dbim-psb, .psb-btn { transition: none; } }