/* =================== Compare page =================== */

/* The circular icon holder at the top of each advantage card. */
.compare-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 advantage cards raise a soft shadow on hover. This matches the
   cards on the partnership page. */
.compare-card {
    transition: box-shadow 0.2s ease;
}

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

/* ---------- Comparison table ---------- */

/* The table keeps a minimum width. On small screens the wrapper element
   uses the Bootstrap "table-responsive" class, so the table scrolls
   horizontally instead of squeezing the columns. */
.compare-table {
    min-width: 760px;
    margin-bottom: 0;
}

.compare-table th,
.compare-table td {
    padding: 1rem 1.25rem;
    vertical-align: middle;
}

/* The first column holds the row labels. */
.compare-table tbody th {
    color: #394150;
    font-weight: 600;
    white-space: nowrap;
}

/* The MyCloudBook column is highlighted, so the reader can scan the
   advantages quickly. */
.compare-table .compare-col-mcb {
    background-color: #f8f5ff;
}

.compare-table thead .compare-col-mcb {
    color: #5b2be0;
    border-top: 3px solid #5b2be0;
    font-size: 1.05rem;
}

/* The check mark shown in the MyCloudBook column. */
.compare-check {
    color: #187958;
    flex-shrink: 0;
}

/* The neutral mark shown in the competitor columns. */
.compare-dash {
    color: #adb5bd;
    flex-shrink: 0;
}