/* ==========================================================================
   Motomarine v3 · Text blocks
   .cs-text = prose container (paragraph rhythm, lists, links, strong).
   Layouts are plain Bootstrap rows; headings reuse .cs-sechead.
   Modifiers: --legal, --dark. Lists, blockquote and .cs-table are styled inside any .cs-text.
   ========================================================================== */

.cs-text {
    max-width: 720px;
}
.cs-text p {
    margin-bottom: 18px;
}
.cs-text p:last-child {
    margin-bottom: 0;
}
.cs-text .lead {
    margin-bottom: 22px;
}
.cs-text a:not(.cs-btn):not(.cs-btn-link) {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cs-text strong {
    color: var(--heading);
    font-weight: 700;
}
/* Lists: markers are drawn with ::before so they sit flush with the text edge (no browser indent) */
.cs-text ul:not(.cs-list),
.cs-text ol {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}
.cs-text ol {
    counter-reset: cs-ol;
}
.cs-text ul:not(.cs-list) li,
.cs-text ol li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 24px;
}
.cs-text ul:not(.cs-list) li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}
.cs-text ol li::before {
    counter-increment: cs-ol;
    content: counter(cs-ol) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--primary);
}
.cs-text h3,
.cs-text .h3 {
    margin: 32px 0 12px;
}
.cs-text h3:first-child,
.cs-text .h3:first-child {
    margin-top: 0;
}

/* Blockquote */
.cs-text blockquote {
    margin: 28px 0;
    padding: 24px 28px;
    border-left: 3px solid var(--primary);
    border-radius: 0;
    background: var(--light-bg);
}
.cs-text blockquote p {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--heading);
    margin-bottom: 12px;
}
.cs-text blockquote cite {
    display: block;
    font-style: normal;
    font-size: 14px;
    color: var(--muted);
}
.cs-text blockquote cite::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--primary);
}

/* Table */
.cs-table-wrap {
    overflow-x: auto;
    margin: 0 0 22px;
    border: 1px solid var(--border);
    border-radius: 0;
}
.cs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.cs-table th,
.cs-table td {
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.cs-table th {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    background: var(--secondary);
    border-bottom-color: var(--secondary);
    white-space: nowrap;
}
.cs-table td:first-child {
    font-weight: 500;
    color: var(--heading);
}
.cs-table tbody tr:last-child td {
    border-bottom: 0;
}
.cs-table tbody tr:hover td {
    background: var(--bg-light);
}
.cs-text .cs-list {
    margin: 4px 0 22px;
}
.cs-text .cs-btn,
.cs-text .cs-btn-link {
    margin-top: 12px;
}

/* A prose block sits closer to its section heading than a card grid does */
.cs-sechead:has(+ .cs-text) {
    margin-bottom: 24px;
}

/* Legal / policy text */
.cs-text--legal {
    max-width: none;
}
.cs-text--legal h3,
.cs-text--legal .h3 {
    font-size: 1.1875rem;
    margin: 36px 0 12px;
    scroll-margin-top: 110px;
}
.cs-text--legal h3:first-child,
.cs-text--legal .h3:first-child {
    margin-top: 0;
}
.cs-text__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 12px;
    color: var(--muted);
}

/* Table of contents (sticky side column beside long copy) */
.cs-text-aside {
    position: sticky;
    top: 110px;
}
.cs-text-aside h3,
.cs-text-aside .h3 {
    font-size: 1.0625rem;
    margin-bottom: 14px;
}
.cs-toc {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--border);
}
.cs-toc a {
    display: block;
    padding: 8px 0 8px 16px;
    margin-left: -2px;
    font-size: 13px;
    color: var(--muted);
    border-left: 2px solid transparent;
}
.cs-toc a:hover,
.cs-toc a.is-active {
    color: var(--heading);
    border-left-color: var(--primary);
}
/* On tablet/phone the list becomes a select (built by main.js from the links) */
.cs-toc__select {
    display: none;
}
@media (max-width: 991px) {
    .cs-text-aside {
        position: static;
        margin-bottom: 8px;
    }
    .cs-text-aside h3,
.cs-text-aside .h3 {
        margin-bottom: 8px;
    }
    .cs-toc {
        display: none;
    }
    .cs-toc__select {
        display: block;
    }
}

/* --- Three text cards: centred heading + copy, optional full-width button --- */
.cs-text-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: 40px 36px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
}
.cs-text-card h3,
.cs-text-card .h3 {
    font-size: 1.1875rem;
    margin-bottom: 12px;
}
.cs-text-card p {
    margin: 0;
}
.cs-text-card p + p {
    margin-top: 12px;
}
.cs-text-card .cs-list {
    width: 100%;
    margin-top: 18px;
}
.cs-text-card strong {
    color: var(--heading);
}
.cs-text-card--dark strong {
    color: var(--white);
}
.cs-text-card .cs-btn-link {
    margin-top: 18px;
}
.cs-text-card .cs-btn {
    width: 100%;
    margin-top: auto;
}
.cs-text-card p:has(+ .cs-btn) {
    margin-bottom: 28px;
}
.bg-lighter .cs-text-card {
    border-color: transparent;
    box-shadow: var(--shadow);
}
.cs-text-card--dark {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
}
.cs-text-card--dark h3,
.cs-text-card--dark .h3 {
    color: var(--white);
}

/* --- Dark variant (cs-text--dark, cs-toc--dark) --- */
.cs-text--dark strong {
    color: var(--white);
}
.cs-text--dark .cs-text__meta {
    color: rgba(255, 255, 255, .6);
}
.cs-toc--dark {
    border-left-color: rgba(255, 255, 255, .15);
}
.cs-toc--dark a {
    color: rgba(255, 255, 255, .65);
}
.cs-toc--dark a:hover,
.cs-toc--dark a.is-active {
    color: var(--white);
    border-left-color: var(--primary);
}
.cs-text--dark blockquote {
    background: rgba(255, 255, 255, .06);
}
.cs-text--dark blockquote p {
    color: var(--white);
}
.cs-text--dark blockquote cite {
    color: rgba(255, 255, 255, .6);
}
.cs-table-wrap--dark,
.cs-text--dark .cs-table-wrap {
    border-color: rgba(255, 255, 255, .15);
}
.cs-text--dark .cs-table th {
    background: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}
.cs-text--dark .cs-table td {
    border-color: rgba(255, 255, 255, .12);
}
.cs-text--dark .cs-table td:first-child {
    color: var(--white);
}
.cs-text--dark .cs-table tbody tr:hover td {
    background: rgba(255, 255, 255, .04);
}
.cs-text--dark .lead {
    color: rgba(255, 255, 255, .8);
}
@media (max-width: 575px) {
    .cs-text-card {
        padding: 28px 22px;
    }
}

/* --- Two columns with photos: 16/9 photo, h2, prose; centred buttons under the row --- */
.cs-text-photo__media {
    margin-bottom: 28px;
    border-radius: 4px;
    overflow: hidden;
}
.cs-text-photo__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.cs-text-photo h2 {
    margin-bottom: 14px;
}
.cs-text-photo__actions {
    margin-top: 40px;
}
.bg-dark .cs-text-photo h2 {
    color: var(--white);
}
.bg-dark .cs-text-photo .cs-text p {
    color: rgba(255, 255, 255, .78);
}
@media (max-width: 767px) {
    .cs-text-photo__media {
        margin-bottom: 20px;
    }
    .cs-text-photo__actions {
        margin-top: 28px;
    }
}

/* --- Copy with checklist: boxed panel, copy left, vertical divider with a red chevron, checklist right --- */
.cs-text-why {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 64px;
    padding: 64px 72px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--white);
}
.cs-text-why__copy h2 {
    margin-bottom: 18px;
}
.cs-text-why__copy p {
    margin: 0;
    color: var(--muted);
}
.cs-text-why__divider {
    position: relative;
    align-self: stretch;
    width: 1px;
    min-height: 220px;
    background: var(--border);
}
.cs-text-why__divider i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--white);
    font-size: 16px;
    color: var(--primary);
    transform: translate(-50%, -50%);
}
.cs-text-why__list .cs-list {
    margin: 0;
}
.cs-text-why__list .cs-list li {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--heading);
}
.bg-lighter .cs-text-why {
    border: 0;
    box-shadow: var(--shadow);
}
.bg-dark .cs-text-why {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
}
.bg-dark .cs-text-why__copy h2,
.bg-dark .cs-text-why__list .cs-list li {
    color: var(--white);
}
.bg-dark .cs-text-why__copy p {
    color: rgba(255, 255, 255, .78);
}
.bg-dark .cs-text-why__divider {
    background: rgba(255, 255, 255, .15);
}
.bg-dark .cs-text-why__divider i {
    background: var(--heading);
}
@media (max-width: 991px) {
    .cs-text-why {
        grid-template-columns: 1fr;
        gap: 28px 0;
        padding: 40px;
    }
    .cs-text-why__divider {
        width: auto;
        height: 1px;
        min-height: 0;
    }
    .cs-text-why__divider i {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}
@media (max-width: 575px) {
    .cs-text-why {
        gap: 24px 0;
        padding: 28px 20px;
    }
}

/* --- Feature checklist box: centred heading, two columns of check + title + copy, centred button --- */
.cs-text-box {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 56px 64px 60px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: linear-gradient(180deg, var(--white) 0%, var(--bg-light) 100%);
    box-shadow: rgba(0, 0, 0, .1) 0 0 5px 0, rgba(0, 0, 0, .1) 0 0 1px 0;
    overflow: hidden;
}
.cs-text-box__actions {
    margin-top: 40px;
}
.cs-text-box .cs-sechead {
    margin-bottom: 36px;
}
.cs-text-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    height: 100%;
}
.cs-text-feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-radius: 4px;
    background: var(--primary-tint-10);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}
.cs-text-feature:hover .cs-text-feature__icon {
    background: var(--primary);
    color: var(--white);
}
.cs-text-feature__icon {
    transition: background .2s, color .2s;
}
.cs-text-feature__icon i {
    display: inline-flex;
    line-height: 1;
    -webkit-text-stroke: .6px currentColor;
}
.cs-text-feature h3 {
    font-size: 1.0625rem;
    margin-bottom: 7px;
}
.cs-text-feature p {
    margin: 0;
    font-size: 15px;
    color: var(--muted);
}
.bg-lighter .cs-text-box {
    border: 0;
    box-shadow: var(--shadow);
}
.bg-dark .cs-text-box {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
}
.bg-dark .cs-text-box h2,
.bg-dark .cs-text-feature h3 {
    color: var(--white);
}
.bg-dark .cs-text-feature p {
    color: rgba(255, 255, 255, .78);
}
.bg-dark .cs-text-feature__icon {
    background: var(--primary);
    color: var(--white);
}
.bg-dark .cs-text-box {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .02) 100%);
}

.bg-lighter .cs-text-box {
    box-shadow: rgba(0, 0, 0, .1) 0 0 5px 0, rgba(0, 0, 0, .1) 0 0 1px 0;
}
@media (max-width: 991px) {
    .cs-text-box {
        padding: 40px;
    }
}
@media (max-width: 575px) {
    .cs-text-box {
        padding: 28px 20px 32px;
    }
    .cs-text-box .cs-sechead {
        margin-bottom: 24px;
    }
    .cs-text-box__actions {
        margin-top: 28px;
    }
    .cs-text-feature {
        gap: 14px;
    }
    .cs-text-feature__icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .cs-text-feature h3 {
        margin-bottom: 6px;
        font-size: 17px;
    }
    .cs-text-feature p {
        font-size: 14px;
    }
}


/* ==========================================================================
   v5 · Modern photo columns (.cs-text-photos--modern on the row)
   Each column becomes a card: the photo zooms inside its frame on hover,
   a numbered eyebrow sits above the heading, the second card steps down on
   desktop for an editorial rhythm, and cards lift on hover.
   ========================================================================== */
.cs-text-photos--modern {
    counter-reset: cs-tp;
}
.cs-text-photos--modern > [class*="col-"] {
    display: flex;
}
.cs-text-photos--modern .cs-text-photo {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--white);
    counter-increment: cs-tp;
    transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
.cs-text-photos--modern .cs-text-photo__media {
    margin: 0;
    border-radius: 0;
}
.cs-text-photos--modern .cs-text-photo__media img {
    transition: transform 1s var(--ease-out);
}
.cs-text-photos--modern .cs-text-photo h2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 32px 36px 14px;
    font-size: clamp(1.5rem, 1.2rem + .8vw, 1.875rem);
}
.cs-text-photos--modern .cs-text-photo h2::before {
    content: counter(cs-tp, decimal-leading-zero);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.8px;
    color: var(--primary-ink);
}
.cs-text-photos--modern .cs-text-photo .cs-text {
    padding: 0 36px 34px;
}
.cs-text-photos--modern .cs-text-photo .cs-text p:last-child {
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .cs-text-photos--modern > [class*="col-"]:nth-child(2) {
        padding-top: 48px;
    }
}
.bg-lighter .cs-text-photos--modern .cs-text-photo {
    border-color: transparent;
    box-shadow: rgba(0, 0, 0, .1) 0 0 5px 0, rgba(0, 0, 0, .1) 0 0 1px 0;
}
.bg-dark .cs-text-photos--modern .cs-text-photo {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
}
.bg-dark .cs-text-photos--modern .cs-text-photo h2::before {
    color: var(--primary-on-dark);
}
@media (max-width: 575px) {
    .cs-text-photos--modern .cs-text-photo h2 {
        padding: 24px 20px 12px;
    }
    .cs-text-photos--modern .cs-text-photo .cs-text {
        padding: 0 20px 24px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cs-text-photos--modern .cs-text-photo,
    .cs-text-photos--modern .cs-text-photo__media img {
        transition: none;
    }
}

/* ==========================================================================
   v5 · Modern feature box (.cs-text-box--modern)
   Plain hairline border with dots fading out of the top right corner
   (same as the Boxed CTA). Features sit straight on the box, no tiles,
   with solid red round check icons in a light ring.
   ========================================================================== */
.cs-text-box--modern::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(rgba(41, 64, 111, .22) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
    mask-image: linear-gradient(225deg, #000, transparent 70%);
    pointer-events: none;
}
.cs-text-box--modern > * {
    position: relative;
}
.cs-text-box--modern .cs-text-feature {
    gap: 16px;
}
.cs-text-box--modern .cs-text-feature__icon i {
    -webkit-text-stroke: .3px currentColor;
}
.cs-text-box--modern .cs-text-feature__icon,
.cs-text-box--modern .cs-text-feature:hover .cs-text-feature__icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--white);
    background: var(--primary);
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .12);
}
.bg-dark .cs-text-box--modern::before {
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1.5px, transparent 1.6px);
}
.bg-dark .cs-text-box--modern .cs-text-feature__icon {
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .2);
}
@media (max-width: 575px) {
    .cs-text-box--modern::before {
        width: 120px;
        height: 120px;
    }
}


/* ==========================================================================
   v5 · Modern text cards, checklist box, legal copy and contents
   ========================================================================== */

/* --- Text cards: numbered eyebrow, light hairline cards --- */
.cs-text-cards--modern {
    counter-reset: cs-tcard;
}
.cs-text-cards--modern .cs-text-card {
    position: relative;
    border-color: var(--border-light);
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.cs-text-cards--modern .cs-text-card::before {
    counter-increment: cs-tcard;
    content: counter(cs-tcard, decimal-leading-zero);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--primary);
}
.cs-text-cards--modern .cs-text-card::after {
    content: '';
    position: absolute;
    top: 50px;
    left: 64px;
    width: 24px;
    height: 2px;
    background: var(--primary);
}
.cs-text-cards--modern .cs-text-card h3,
.cs-text-cards--modern .cs-text-card .h3 {
    font-size: 1.3125rem;
    margin-bottom: 14px;
}
.cs-text-cards--modern .cs-text-card p strong {
    display: block;
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
    background: var(--bg-light);
}
.bg-lighter .cs-text-cards--modern .cs-text-card {
    border-color: transparent;
}
.cs-text-cards--modern .cs-text-card--dark {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: none;
}
.cs-text-cards--modern .cs-text-card--dark p strong {
    background: rgba(255, 255, 255, .05);
}

/* --- Copy with checklist: corner dots, two-tone chevron, ruled list --- */
.cs-text-why--modern {
    position: relative;
    overflow: hidden;
    border-color: var(--border-light);
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.cs-text-why--modern::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background-image: radial-gradient(rgba(41, 64, 111, .22) 1.5px, transparent 1.6px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%);
    mask-image: linear-gradient(225deg, #000, transparent 70%);
    pointer-events: none;
}
.cs-text-why--modern > * {
    position: relative;
}
.cs-text-why--modern .cs-text-why__divider i {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    font-size: 15px;
    color: var(--white);
    background: var(--primary);
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .12);
}
.cs-text-why--modern .cs-text-why__list .cs-list {
    gap: 0;
}
.cs-text-why--modern .cs-text-why__list .cs-list li {
    margin: 0;
    padding: 12px 0;
}
.cs-text-why--modern .cs-text-why__list .cs-list li + li {
    border-top: 1px solid var(--border-light);
}
.bg-lighter .cs-text-why--modern {
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.bg-dark .cs-text-why--modern {
    box-shadow: none;
}
.bg-dark .cs-text-why--modern::before {
    background-image: radial-gradient(rgba(255, 255, 255, .18) 1.5px, transparent 1.6px);
}
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    background: var(--primary);
    box-shadow: 0 0 0 6px rgba(var(--primary-rgb), .25);
}
.bg-dark .cs-text-why--modern .cs-text-why__list .cs-list li + li {
    border-top-color: rgba(255, 255, 255, .1);
}

/* --- Legal copy: ruled sections, pill date --- */
.cs-text--legal h3,
.cs-text--legal .h3 {
    padding-top: 28px;
    border-top: 1px solid var(--border-light);
}
.cs-text--legal .lead + h3,
.cs-text--legal .lead + .h3 {
    margin-top: 32px;
}
.cs-text__meta {
    padding: 6px 14px;
    border-radius: 40px;
    background: var(--bg-light);
}
.bg-lighter .cs-text__meta {
    background: var(--white);
}
.bg-dark .cs-text--legal h3,
.bg-dark .cs-text--legal .h3,
.cs-text--dark.cs-text--legal h3 {
    border-top-color: rgba(255, 255, 255, .1);
}
.bg-dark .cs-text__meta {
    background: rgba(255, 255, 255, .06);
}

/* --- Contents: boxed, numbered links with a red rail on the active one --- */
.cs-text-aside {
    padding: 24px;
    border: 1px solid var(--border-light);
    background: var(--white);
    box-shadow: rgba(15, 23, 43, .05) 0 1px 3px 0;
}
.cs-text-aside h3,
.cs-text-aside .h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--primary-text);
}
.cs-text-aside h3::before,
.cs-text-aside .h3::before {
    content: '';
    width: 18px;
    height: 2px;
    background: currentColor;
}
.cs-toc {
    counter-reset: cs-toc;
}
.cs-toc a {
    display: flex;
    gap: 10px;
    font-size: 14px;
}
.cs-toc a::before {
    counter-increment: cs-toc;
    content: counter(cs-toc, decimal-leading-zero);
    font-size: 12px;
    font-weight: 700;
    color: var(--border-strong);
}
.cs-toc a:hover::before,
.cs-toc a.is-active::before {
    color: var(--primary);
}
.bg-lighter .cs-text-aside {
    border-color: transparent;
}
.bg-dark .cs-text-aside {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
}
@media (max-width: 991px) {
    .cs-text-aside {
        padding: 18px;
    }
}

/* Copy with checklist: plain red chevron on the divider, no chip */
.cs-text-why--modern .cs-text-why__divider i,
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    font-size: 20px;
    color: var(--primary);
    background: var(--white);
    box-shadow: none;
    -webkit-text-stroke: .8px currentColor;
}
.bg-lighter .cs-text-why--modern .cs-text-why__divider i {
    background: var(--white);
}
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    background: #151d33;
}
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    background: none;
    text-shadow: 0 0 0 transparent;
}
.bg-dark .cs-text-why--modern .cs-text-why__divider {
    background: linear-gradient(180deg, rgba(255, 255, 255, .15) calc(50% - 18px), transparent calc(50% - 18px), transparent calc(50% + 18px), rgba(255, 255, 255, .15) calc(50% + 18px));
}
/* Divider chevron: thin and grey */
.cs-text-why--modern .cs-text-why__divider i,
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    color: var(--border-strong);
    -webkit-text-stroke: 0;
}
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    color: rgba(255, 255, 255, .35);
}

/* Divider chevron drawn with the same 1px stroke and colour as the line,
   its two tips joining the line ends above and below */
.cs-text-why--modern .cs-text-why__divider,
.bg-lighter .cs-text-why--modern .cs-text-why__divider {
    color: var(--border-strong);
    background: linear-gradient(180deg, currentColor calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), currentColor calc(50% + 10px));
}
.bg-dark .cs-text-why--modern .cs-text-why__divider {
    color: rgba(255, 255, 255, .25);
    background: linear-gradient(180deg, currentColor calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), currentColor calc(50% + 10px));
}
.cs-text-why--modern .cs-text-why__divider i,
.bg-lighter .cs-text-why--modern .cs-text-why__divider i,
.bg-dark .cs-text-why--modern .cs-text-why__divider i {
    top: 50%;
    left: 0;
    width: 10px;
    height: 20px;
    font-size: 0;
    color: inherit;
    background: currentColor;
    transform: translateY(-50%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cpolyline points='0.5,0 9.5,10 0.5,20' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 20'%3E%3Cpolyline points='0.5,0 9.5,10 0.5,20' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.cs-text-why--modern .cs-text-why__divider i::before {
    content: none;
}
@media (max-width: 991px) {
    .cs-text-why--modern .cs-text-why__divider,
    .bg-lighter .cs-text-why--modern .cs-text-why__divider,
    .bg-dark .cs-text-why--modern .cs-text-why__divider {
        background: linear-gradient(90deg, currentColor calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), currentColor calc(50% + 10px));
    }
    .cs-text-why--modern .cs-text-why__divider i,
    .bg-lighter .cs-text-why--modern .cs-text-why__divider i,
    .bg-dark .cs-text-why--modern .cs-text-why__divider i {
        top: 0;
        left: 50%;
        width: 20px;
        height: 10px;
        transform: translateX(-50%);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpolyline points='0,0.5 10,9.5 20,0.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpolyline points='0,0.5 10,9.5 20,0.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    }
}
/* Divider and chevron a shade lighter */
.cs-text-why--modern .cs-text-why__divider,
.bg-lighter .cs-text-why--modern .cs-text-why__divider {
    color: var(--border);
}
.bg-dark .cs-text-why--modern .cs-text-why__divider {
    color: rgba(255, 255, 255, .16);
}