/* =================================================================== CHECKLIST section css =================================================================== */
/* Two panels side by side (e.g. Included / Not included). The second panel
   is dark (.checklist__panel--dark) and uses a cross mark. */
.checklist {
    --notch-space: 90px;   /* badge + notch padding */

    & .checklist__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--g30);
    }

    & .checklist__panel {
        position: relative;
        padding: var(--sp50);
        background: var(--white);
        border-radius: var(--r-xl);
    }

    & .checklist__notch {
        --notch-r: var(--r-xl);

        & .notch-badge { width: 70px; height: 70px; background: var(--primary); color: var(--white); }
    }

    & .checklist__title {
        margin-bottom: var(--sp25);
        padding-right: var(--notch-space);
        font-size: var(--f30);
    }

    & .checklist__item {
        display: flex; align-items: flex-start;
        gap: var(--sp15);
        padding-block: var(--sp15);
        border-bottom: 1px solid var(--line);

        &:last-child { border-bottom: 0; }
    }

    & .checklist__mark {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 24px; height: 24px;
        margin-top: var(--sp4);
        background: var(--surface-light);
        border-radius: var(--r-full);
        color: var(--primary);
    }

    & .checklist__panel--dark {
        background: var(--ink);
        color: var(--white-muted);

        & .checklist__title { color: var(--white); }
        & .checklist__notch .notch-badge { background: var(--white); color: var(--ink); }
        & .checklist__item { border-color: var(--line-dark); }
        & .checklist__mark { background: var(--glass); color: var(--white); }
    }
}

/* =================================================================== CHECKLIST responsive =================================================================== */
@media (max-width: 991.98px) {
    .checklist {
        & .checklist__grid { grid-template-columns: 1fr; }
    }
}

@media (max-width: 575.98px) {
    .checklist {
        & .checklist__panel { padding: var(--sp35) var(--sp20); border-radius: var(--r-lg); }
        --notch-space: 72px;

        & .checklist__notch { --notch-r: var(--r-lg); }
        & .checklist__notch .notch-badge { width: 55px; height: 55px; }
    }
}