/* [usp] — de belofte, het bewijs en wat je krijgt.
   Bewust weinig elementen: één claim, een smalle bewijsbalk, vier regels
   inhoud en één knop. Alles wat erbij komt verzwakt de claim. */

/* Zelfde kaart als [plan_examcourse]: wit, 12px rond, zachte schaduw. */
.t27usp {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #1a1d21;
    line-height: 1.5;
}

.t27usp *,
.t27usp *::before,
.t27usp *::after {
    box-sizing: border-box;
}

/* ---------- Bewijsbalk ---------- */

/* flex-wrap: de drie feiten passen niet altijd naast elkaar — in een smalle
   kolom liep de derde buiten de kaart. Liever onder elkaar dan eroverheen. */
.t27usp__proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    margin-bottom: 26px;
}

/* min-width: 0 — zonder dit krimpt een flex-item niet onder de breedte van
   zijn inhoud, en puilt de rij naar buiten in plaats van af te breken. */
.t27usp__proof-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

/* Scheidingslijntjes tussen de drie feiten. CSS kan niet zien of een item
   na een afbreking vooraan een nieuwe regel staat, dus daar blijft het
   streepje zichtbaar; dat valt minder op dan tekst buiten de kaart. */
.t27usp__proof-item + .t27usp__proof-item {
    padding-left: 22px;
    border-left: 1px solid #e4e9ee;
}

.t27usp__proof-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8f5fd;
    color: #167cb0;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.t27usp__proof-stars {
    color: #f5a623;
    font-size: 14px;
    letter-spacing: 1px;
}

.t27usp__proof-text {
    font-size: 13px;
    color: #8a99a8;
    line-height: 1.35;
}

.t27usp__proof-text b {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1d21;
}

/* ---------- De claim ---------- */

.t27usp .t27usp__claim {
    margin: 0 0 22px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.08;
    color: #1a1d21;
    letter-spacing: -0.01em;
    text-transform: none;
}

.t27usp__claim-accent {
    color: #36a9e1;
}

/* ---------- Kaart met inhoud en prijs ---------- */

/* Binnenkaart: lichte tint in plaats van een tweede witte kaart met rand —
   anders krijg je een kader in een kader. */
.t27usp__card {
    padding: 24px 26px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #f7f9fb;
}

.t27usp .t27usp__card-title {
    margin: 0 0 16px;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    color: #1a1d21;
}

/* "INCLUDED" met een stippellijn links en rechts. */
.t27usp__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #8a99a8;
}

.t27usp__divider::before,
.t27usp__divider::after {
    content: '';
    flex: 1;
    border-top: 1px dashed #d7e3ec;
}

.t27usp__cols {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.t27usp .t27usp__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.t27usp .t27usp__list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 9px;
    list-style: none;
    font-size: 16px;
}

.t27usp .t27usp__list li:last-child {
    margin-bottom: 0;
}

.t27usp .t27usp__list li::marker {
    content: '';
}

.t27usp .t27usp__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2336b37e'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm5 7.6l-6.1 6.1a1 1 0 01-1.4 0L4.9 11a1 1 0 011.4-1.4l1.9 1.9 5.4-5.4A1 1 0 0115 7.6z'/%3E%3C/svg%3E");
}

.t27usp__price {
    margin: 0;
    text-align: right;
    flex-shrink: 0;
}

.t27usp__price s {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #8a99a8;
}

.t27usp__price b {
    display: block;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: #5a6b7b;
}

/* ---------- Knop ---------- */

.t27usp__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #36a9e1;
    color: #fff !important;
    font-family: 'Zilla Slab', Georgia, serif;
    font-size: 21px;
    font-weight: 700;
    text-decoration: none !important;
    transition: filter 0.2s ease;
}

.t27usp__cta:hover {
    filter: brightness(0.94);
}

.t27usp__cta-arrow {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    font-size: 22px;
}

/* ---------- Geruststellingen ---------- */

.t27usp .t27usp__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.t27usp .t27usp__foot li {
    position: relative;
    padding-left: 22px;
    list-style: none;
    font-size: 13px;
    color: #5a6b7b;
}

.t27usp .t27usp__foot li::marker {
    content: '';
}

.t27usp .t27usp__foot li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    background: no-repeat center/contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2336b37e'%3E%3Cpath d='M10 0a10 10 0 100 20 10 10 0 000-20zm5 7.6l-6.1 6.1a1 1 0 01-1.4 0L4.9 11a1 1 0 011.4-1.4l1.9 1.9 5.4-5.4A1 1 0 0115 7.6z'/%3E%3C/svg%3E");
}

/* ---------- Smalle schermen ---------- */

@media (max-width: 560px) {
    .t27usp .t27usp__claim {
        font-size: 34px;
    }
    .t27usp__proof {
        gap: 14px;
    }
    .t27usp__proof-item + .t27usp__proof-item {
        padding-left: 14px;
    }
    .t27usp__card {
        padding: 20px;
    }
    /* Prijs onder de lijst: naast elkaar wordt het hier te krap. */
    .t27usp__cols {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    .t27usp__price {
        text-align: left;
    }
    .t27usp__price b {
        font-size: 36px;
    }
}