header {
    background-color: var(--token-color-background-neutral-subtle);
    border-bottom: 0.0625rem solid var(--token-color-stroke-neutral-subtle);
    padding: var(--spacing-medium) var(--spacing-medium);
}

header,
main {
    margin: 0 auto;
    max-width: var(--layout-large);
}

main {
    padding: var(--spacing-large) var(--spacing-medium) var(--spacing-x-large);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
}

/* Eufemia headings default to font-weight-medium (500) */
[class*="dnb-h--"] {
    font-weight: var(--font-weight-bold);
}

.card {
    background-color: var(--token-color-decorative-first-subtle);
    border: 0.0625rem solid var(--token-color-stroke-neutral-subtle);
    border-radius: var(--token-radius-md);
    padding: var(--spacing-large);
    box-shadow: var(--shadow-default);
}

.diagram {
    text-align: center;
    margin: var(--spacing-medium) 0;
}

.diagram img {
    max-width: 50rem;
    width: 100%;
}

/* Eufemia sets border-collapse: collapse on all tables, which stops
   border-radius from clipping the cell backgrounds */
.dnb-table {
    border-collapse: separate;
    border-spacing: 0;
}

.dnb-table thead th:first-child {
    border-top-left-radius: var(--token-radius-md);
}

.dnb-table thead th:last-child {
    border-top-right-radius: var(--token-radius-md);
}

.dnb-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--token-radius-md);
}

.dnb-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--token-radius-md);
}

.dnb-table td,
.dnb-table th {
    font-size: var(--font-size-basis);
    padding: var(--spacing-x-small) var(--spacing-medium);
}

.dnb-table th {
    background-color: var(--token-color-background-action);
    color: var(--token-color-text-neutral-ondark);
    text-align: left;
}

.dnb-table tbody tr:nth-child(odd) td {
    background-color: var(--token-color-background-neutral-base);
}

.dnb-table tbody tr:nth-child(even) td {
    background-color: var(--token-color-background-neutral-subtle);
}

.dnb-table td:first-child,
.dnb-table th:first-child {
    white-space: nowrap;
}

.card .dnb-anchor {
    color: var(--token-color-decorative-first-bold);
}

.card .dnb-anchor:hover {
    color: var(--token-color-decorative-first-intense);
}

.card.dnb-spacing>*:first-child {
    margin-top: 0;
}

.card-row {
    display: flex;
    gap: var(--spacing-large);
    flex-wrap: wrap;
}

.card-row>.card {
    flex: 1 1 28rem;
    min-width: 0;
}