/* === cards-3-tier ===
 * Centered eyebrow + heading + desc, then 3 cards with accent stripe.
 * Per-card color via --cc field (inline style).
 *
 * @updated 3.5.54 — accent stripe top-border, tightened typography, shared eyebrow
 */
.c3t {
    width: 100%;
    background: var(--ssla-bg-color, transparent);
}
.c3t-inner {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--paint-section-padding, 100px) 48px;
    text-align: center;
}

/* Eyebrow handled by shared .ssla-eyebrow.is-centered.
 * Center the inline-flex container itself within the centered text. */
.c3t-eyebrow {
    display: inline-flex;
    margin: 0 auto 16px;
}

.c3t-heading {
    font-size: var(--paint-h2-size, clamp(28px, 3.6vw, 38px));
    font-weight: var(--paint-heading-weight, 800);
    color: var(--shell-h, var(--preset-primary, currentColor));
    margin: 0 0 16px;
    letter-spacing: var(--paint-heading-letter-spacing-h2, -1px);
    text-transform: var(--paint-heading-case-h2, none);
    line-height: 1.15;
}

.c3t-desc {
    font-size: var(--paint-body-size, 16px);
    color: var(--shell-t, var(--preset-text-body, #4a5568));
    line-height: var(--paint-body-line-height, 1.7);
    margin: 0 auto 56px;
    max-width: 640px;
}
.c3t-desc p {
    margin: 0;
}

.c3t-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}

.c3t-card {
    background: #fff;
    border: 1px solid var(--shell-line, var(--preset-hairline, rgba(0, 0, 0, 0.08)));
    border-top: 3px solid var(--cc, var(--shell-accent, var(--preset-accent, currentColor)));
    padding: 36px 30px;
    transition: all var(--paint-motion-timing, 0.35s);
}
.c3t-card:hover {
    transform: translateY(var(--paint-hover-lift, -3px));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.c3t-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--cc, var(--shell-accent, currentColor));
    margin: 0 0 12px;
}

.c3t-card h3 {
    font-size: var(--paint-h3-size, 22px);
    font-weight: var(--paint-heading-weight, 800);
    color: var(--shell-h, var(--preset-primary, currentColor));
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.c3t-sub {
    font-size: 14px;
    color: var(--shell-m, var(--preset-text-muted, #8896a4));
    margin: 0 0 16px;
    font-weight: 600;
}

.c3t-body {
    font-size: 14px;
    color: var(--shell-t, var(--preset-text-body, #4a5568));
    line-height: 1.7;
}
.c3t-body p {
    margin: 0 0 0.6em;
}
.c3t-body p:last-child {
    margin-bottom: 0;
}
.c3t-body ul {
    margin: 0;
    padding-left: 18px;
}
.c3t-body li {
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .c3t-grid {
        grid-template-columns: 1fr;
        max-width: 380px;
        margin: 0 auto;
    }
    .c3t-inner {
        padding: 64px 24px;
    }
}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark .c3t-heading{color: #ffffff}
.ssla-tone-dark .c3t-desc{color: rgba(255, 255, 255, 0.78)}
.ssla-tone-dark .c3t-card{background: rgba(255, 255, 255, 0.04)}
.ssla-tone-dark .c3t-card h3{color: #ffffff}
.ssla-tone-dark .c3t-sub{color: rgba(255, 255, 255, 0.7)}
.ssla-tone-dark .c3t-body{color: rgba(255, 255, 255, 0.78)}
.ssla-tone-light .c3t-heading{color: var(--shell-h, #1a1d21)}
.ssla-tone-light .c3t-desc{color: var(--shell-t, #4a5568)}
.ssla-tone-light .c3t-card{background: #ffffff}
.ssla-tone-light .c3t-card h3{color: var(--shell-h, #1a1d21)}