.ekpp {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid rgba(23, 37, 31, .16);
    background: #fffdfa;
    color: #17251f;
}

.ekpp-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem 1rem;
    align-items: start;
}

.ekpp-eyebrow,
.ekpp-label {
    margin: 0 0 .3rem;
    color: #6f5137;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .12em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ekpp h3 {
    margin: 0;
    color: #17251f;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}

.ekpp-intro > p {
    grid-column: 1 / -1;
    margin: 0;
    color: #667068;
    font-size: .82rem;
    line-height: 1.45;
}

.ekpp-badges {
    display: grid;
    justify-items: end;
    gap: .3rem;
}

.ekpp-kind,
.ekpp-favorite {
    padding: .35rem .55rem;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ekpp-kind { border: 1px solid #42534a; background: #eef3ef; color: #263a2f; }
.ekpp-favorite { border: 1px solid #d59618; background: #fff8e4; color: #725217; }

.ekpp-app,
.ekpp-site-app { margin-top: .8rem; }

.ekpp-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.ekpp-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    min-height: 50px;
    padding: .55rem .7rem;
    border: 1px solid rgba(23, 37, 31, .2);
    background: #fff;
    color: #35443c;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ekpp-choice span {
    color: #d59618;
    font-size: 1rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

.ekpp-choice b { font-size: .82rem; font-weight: 650; line-height: 1.3; }
.ekpp-choice:hover,
.ekpp-choice:focus-visible { border-color: #1f7152; background: #f4f8f4; outline: 2px solid #1f715226; }
.ekpp-choice.is-active { border-color: #1f7152; background: #eaf4ed; color: #173c2c; }
.ekpp-choice:disabled { cursor: wait; opacity: .62; }

.ekpp-static-summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(23, 37, 31, .12);
}

.ekpp-static-summary strong { font-size: 1.3rem; font-weight: 600; }
.ekpp-static-summary span { color: #d59618; letter-spacing: .06em; }
.ekpp-static-summary small { color: #667068; font-size: .76rem; }
.ekpp-status { margin: .55rem 0 0; color: #667068; font-size: .76rem; line-height: 1.4; }
.ekpp-website { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.ekpp-results {
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px solid rgba(23, 37, 31, .12);
}

.ekpp-result {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    margin-top: .5rem;
    padding-bottom: .4rem;
    color: #4f5b54;
    font-size: .76rem;
}

.ekpp-result i {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #1f7152 var(--ekpp-width), #dde2dd var(--ekpp-width));
}

.ekpp-result b { color: #17251f; }

@media (max-width: 720px) {
    .ekpp { padding: .85rem; }
    .ekpp-intro { grid-template-columns: minmax(0, 1fr); }
    .ekpp-badges { justify-items: start; }
    .ekpp-choices { grid-template-columns: minmax(0, 1fr); }
    .ekpp-choice { min-height: 52px; }
}