/* ==========================================================================
   BancBridge Solutions
   Ported from design handoff: "Solutions.dc.html"

   Uses the shared page-shell classes (.bb-page-header, .bb-cta-band,
   .bb-footer) from styles.css. This file holds only the product-row list
   specific to this page.
   ========================================================================== */

.sol-rows {
    padding: 64px 56px;
    max-width: 1440px;
    margin: 0 auto;
}

.sol-row {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    padding: 44px 0;
    border-top: 1px solid var(--card-border);
}

.sol-row--last {
    border-bottom: 1px solid var(--card-border);
}

.sol-row-head h2 {
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 12px 0 0;
}

.sol-row-descriptor {
    font: 600 15px 'Public Sans', sans-serif;
    color: #5b6b7a;
    margin-top: 6px;
}

/* Hand-drawn product mark, navy version, linked to the product page.
   Each mark contains the product name in lowercase, so the name appears
   twice in this row (mark + heading) — the client is aware and kept both. */
.sol-row-mark {
    display: block;
    width: 92px;
    margin: 20px 0 0;
}

.sol-row-mark img {
    display: block;
    width: 100%;
    height: auto;
}

.sol-row-body p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-body);
    margin: 0;
    max-width: 680px;
}

.sol-row-body .bb-link-arrow {
    margin-top: 16px;
    font-size: 15px;
}

@media (max-width: 900px) {
    .sol-rows {
        padding: 40px 24px;
    }

    .sol-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}