.benefit-map {
    --bm-radius: var(--border-radius-small);
    --bm-stripe: color-mix(in srgb, var(--ncs-primary) 5%, var(--background));
    --bm-line: color-mix(in srgb, var(--text) 10%, transparent);
    --bm-pad-y: calc(var(--font-md) * 1.1);
    --bm-pad-x: calc(var(--font-md) * 1.6);

    &.bg-ncs-weak { --bg-color: var(--ncs-container-weak); }

    &.bg-ncs-strong { --bg-color: var(--ncs-container-strong); }
}

.bm-content {
    inline-size: 100%;

    .showcase-cta-group { margin-block-start: calc(var(--spacing) / 2); }
}

/* One white card with a single-colour edge, held to a readable width. */
.bm-card {
    inline-size: 100%;
    max-inline-size: calc(var(--page-max-width) * .8);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--bm-radius);
    background:
        linear-gradient(var(--background), var(--background)) padding-box,
        linear-gradient(color-mix(in srgb, var(--ncs-primary) 35%, transparent), color-mix(in srgb, var(--ncs-primary) 35%, transparent)) border-box;
}

.bm-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    text-align: start;
    font-size: var(--font-md);
    line-height: 1.5;

    th,
    td {
        padding: var(--bm-pad-y) var(--bm-pad-x);
        border-bottom: 1px solid var(--bm-line);
        vertical-align: middle;
        text-align: start;
    }

    thead th {
        font-size: var(--font-md);
        font-weight: var(--font-weight-bold);
        color: var(--text-faded);
    }

    td {
        color: var(--text-faded);
    }

    tbody tr:last-child > * {
        border-bottom: 0;
    }

    th:not(.bm-maestra),
    td:not(.bm-maestra) {
        background: var(--bm-stripe);
    }

    .bm-maestra {
        position: relative;
        border-inline-start: 1px solid var(--bm-line);
        color: var(--text);
    }
}

/* Circle arrow centred on the divider: from the usual way to Maestra, one per row. */
.bm-table tbody .bm-maestra::before,
.bm-table tbody .bm-maestra::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 50%;
    inline-size: calc(var(--font-md) * 1.9);
    block-size: calc(var(--font-md) * 1.9);
    translate: -50% -50%;
    pointer-events: none;
}

.bm-table tbody .bm-maestra::before {
    border: 1px solid var(--bm-line);
    border-radius: 50%;
    background: var(--background);
}

.bm-table tbody .bm-maestra::after {
    background: var(--ncs-primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M14 8l4 4-4 4'/%3E%3C/svg%3E") center / 70% no-repeat;
}

:where([dir="rtl"]) .bm-table tbody .bm-maestra::before,
:where([dir="rtl"]) .bm-table tbody .bm-maestra::after {
    translate: 50% -50%;
}

:where([dir="rtl"]) .bm-table tbody .bm-maestra::after {
    transform: scaleX(-1);
}

.bm-text {
    min-inline-size: 0;
}

.bm-label,
.bm-text {
    transition: opacity .25s ease;
}

/* Hovering a row dims the text of every other row. */
@media (hover: hover) {
    .bm-table tbody:has(tr:hover) tr:not(:hover) :is(.bm-label, .bm-text) {
        opacity: .5;
    }
}

.bm-maestra .bm-text {
    color: var(--text);
}

.bm-text a {
    padding-bottom: calc(0.08em + 1px);
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) no-repeat right bottom / 0 1px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background-size 0.3s ease;

    &:is(:hover, :focus-visible) {
        background-position-x: left;
        background-size: 100% 1px;
    }
}

.bm-brand {
    white-space: nowrap;
}

.bm-logo {
    width: auto;
    height: 1.15em;
    margin-inline: 0.4em 0.3em;
    overflow: visible;
    vertical-align: -0.22em;
}

.bm-label {
    display: none;
}

@media (max-width: 767px) {
    .bm-card {
        overflow: visible;
        border: 0;
        background: none;
    }

    .bm-table {
        table-layout: auto;

        thead {
            display: none;
        }

        tbody,
        tr,
        td,
        .bm-maestra {
            display: block;
            width: auto;
        }

        tbody {
            display: flex;
            flex-direction: column;
            gap: calc(var(--font-md) * 1.2);
        }

        tbody tr {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--bm-line);
            border-radius: var(--bm-radius);
            background: var(--background);
        }

        tbody td,
        tbody .bm-maestra {
            padding: calc(var(--font-md) * 1.2) calc(var(--font-md) * 1.1);
            border: 0;
        }

        .bm-label {
            display: block;
            margin-bottom: calc(var(--font-xs) / 2);
            font-size: var(--font-xs);
            font-weight: var(--font-weight-bold);
            color: var(--text-faded);
        }

        /* Down arrow on the seam between the two columns, under the start of the text, no circle. */
        tbody .bm-maestra::before {
            display: none;
        }

        tbody .bm-maestra::after {
            inset-inline-start: calc(var(--font-md) * 1.6);
            inset-block-start: 0;
            transform: rotate(90deg);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .bm-label,
    .bm-text,
    .bm-text a {
        transition: none;
    }
}