/* =================== Solutions pages =================== */

/* The circular icon holder at the top of each card. */
.solution-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    background-color: rgba(91, 43, 224, 0.08);
    color: #5b2be0;
}

/* The cards raise a soft shadow on hover. This matches the cards on the
   partnership and compare pages. */
.solution-card {
    transition: box-shadow 0.2s ease;
}

.solution-card:hover {
    box-shadow: 0 0.5rem 1.5rem rgba(91, 43, 224, 0.08) !important;
}

/* On the solutions index page the whole card is a link. These rules keep
   the text colors normal inside the link. */
a.solution-card {
    color: inherit;
}

a.solution-card:hover {
    color: inherit;
}

/* The visual panel beside each requirement section. It shows a product
   screenshot when one exists, an illustration otherwise, and a large icon
   as the last fallback. */
.solution-visual {
    background-color: #f8f5ff;
    border: 1px solid #efe8fd;
    border-radius: 1rem;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5b2be0;
}

.solution-visual svg {
    width: 96px;
    height: 96px;
}

/* The illustration variant of the panel. */
.solution-visual img {
    max-width: 100%;
    max-height: 260px;
    padding: 1.5rem;
}

/* The screenshot variant. The frame imitates a browser window, with a
   title bar and three window dots above the image. */
.solution-screenshot {
    background-color: #ffffff;
    border: 1px solid #e9e4f8;
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(29, 37, 61, 0.12);
    overflow: hidden;
}

.solution-screenshot-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background-color: #f4f1fd;
    border-bottom: 1px solid #e9e4f8;
}

.solution-screenshot-bar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d9ccf5;
}

.solution-screenshot img {
    width: 100%;
    display: block;
}

/* The check mark in front of each solution bullet. */
.solution-bullet-icon {
    color: #187958;
    flex-shrink: 0;
    margin-top: 4px;
}