.sepa-box {
    box-sizing: border-box;
    width: 100%;
    padding: var(--sepa-padding, 28px);
    color: var(--sepa-text, #182230);
    background-color: var(--sepa-box-bg, #fff);
    background-image: var(--sepa-bg-image, none);
    background-size: cover;
    background-position: center;
    border-radius: var(--sepa-radius, 18px);
    font: inherit;
}

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

.sepa-box-title {
    margin: 0 0 24px;
    color: var(--sepa-title-color, inherit);
    line-height: 1.2;
}

.sepa-box h1.sepa-box-title { font-size: clamp(1.75rem, 3vw, 2.35rem); }
.sepa-box h2.sepa-box-title { font-size: clamp(1.55rem, 2.7vw, 2.05rem); }
.sepa-box h3.sepa-box-title { font-size: clamp(1.35rem, 2.3vw, 1.75rem); }
.sepa-box h4.sepa-box-title { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.sepa-box h5.sepa-box-title { font-size: clamp(1.05rem, 1.7vw, 1.3rem); }
.sepa-box h6.sepa-box-title { font-size: 1rem; }

.sepa-box-description {
    margin: -12px 0 24px;
    color: inherit;
    line-height: 1.6;
}

.sepa-box-description p {
    margin: 0 0 .75em;
}

.sepa-box-description p:last-child {
    margin-bottom: 0;
}

.sepa-list {
    display: grid;
    gap: 20px;
}

.sepa-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.sepa-label {
    min-width: 0;
    font-weight: 600;
    line-height: 1.35;
}

.sepa-value {
    flex: 0 0 auto;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sepa-track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: var(--sepa-bar-height, 12px);
    background: var(--sepa-track, #e9edf2);
    border-radius: 999px;
}

.sepa-fill {
    display: block;
    width: var(--sepa-value, 0%);
    height: 100%;
    background: var(--sepa-bar, #2f855a);
    border-radius: inherit;
}

.sepa-animate .sepa-fill {
    animation: sepa-grow 900ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes sepa-grow {
    from { width: 0; }
    to { width: var(--sepa-value, 0%); }
}

@media (prefers-reduced-motion: reduce) {
    .sepa-animate .sepa-fill { animation: none; }
}
