.certificate-transaction-summary {
    background: #fffefa;
    border: 1px solid #ded8d8;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(27, 20, 24, .08);
    color: #353236;
    margin: 2rem auto 4rem;
    max-width: 760px;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    text-align: left;
}

.certificate-transaction-summary h2,
.certificate-transaction-summary h3 {
    color: #5b4d52;
}

.certificate-transaction-summary__payment {
    color: #607163;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.certificate-transaction-summary__payment::before {
    content: "\2713";
    margin-right: .45rem;
}

.certificate-transaction-summary--simulation {
    border-color: #c6b27d;
}

.certificate-transaction-summary--simulation .certificate-transaction-summary__payment {
    color: #806f47;
}

.certificate-transaction-summary--simulation .certificate-transaction-summary__payment::before {
    background: #806f47;
    border-radius: 999px;
    color: #fff;
    content: "TEST";
    display: inline-block;
    font-size: .68rem;
    letter-spacing: .04em;
    padding: .16rem .45rem;
    vertical-align: .12rem;
}

.certificate-transaction-summary__details {
    border-bottom: 1px solid #ded8d8;
    border-top: 1px solid #ded8d8;
    margin: 1.5rem 0;
}

.certificate-transaction-summary__details > div {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(9rem, .8fr) minmax(0, 1.4fr);
    padding: .7rem 0;
}

.certificate-transaction-summary__details > div + div {
    border-top: 1px solid #eee9e6;
}

.certificate-transaction-summary__details dt {
    font-weight: 700;
}

.certificate-transaction-summary__details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.certificate-email-status {
    background: #f4f0e8;
    border-left: 5px solid #8a7b72;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
}

.certificate-receipt-wait-notice {
    background: #f4f0e8;
    border: 1px solid #c6b27d;
    border-left: 5px solid #8a7042;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(27, 20, 24, .07);
    color: #40393c;
    max-width: 700px;
    text-align: left;
}

.certificate-receipt-wait-notice strong {
    color: #5b4d52;
    display: block;
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.certificate-receipt-wait-notice[hidden] {
    display: none !important;
}

.certificate-email-status--accepted {
    background: #eef2ed;
    border-left-color: #607163;
}

.certificate-email-status--queued,
.certificate-email-status--processing,
.certificate-email-status--would_send {
    background: #f4f0e8;
    border-left-color: #aa9056;
}

.certificate-queue-demo-checkout {
    background: #fffefa;
    border: 1px solid #c6b27d;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(27, 20, 24, .08);
    color: #353236;
    margin: 2rem auto 4rem;
    max-width: 700px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    text-align: left;
}

.certificate-queue-demo-checkout h3 {
    color: #5b4d52;
}

.certificate-queue-demo-checkout ul {
    margin: 1.25rem 0 1.5rem;
    padding-left: 1.35rem;
}

.certificate-queue-demo-checkout__eyebrow,
.certificate-queue-demo__eyebrow {
    color: #806f47;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: .3rem;
    text-transform: uppercase;
}

.certificate-queue-demo {
    background: #fffefa;
    border: 1px solid #ded8d8;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(27, 20, 24, .08);
    color: #353236;
    margin: -2rem auto 4rem;
    max-width: 760px;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    text-align: left;
}

.certificate-queue-demo__heading {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.certificate-queue-demo__heading h3 {
    color: #5b4d52;
    margin: 0;
}

.certificate-queue-demo__step {
    background: #eee9e6;
    border-radius: 999px;
    color: #5b4d52;
    font-size: .82rem;
    font-weight: 700;
    padding: .35rem .65rem;
    white-space: nowrap;
}

.certificate-queue-demo__track {
    background: #e8e2df;
    border-radius: 999px;
    height: 8px;
    margin: 1.5rem 0;
    overflow: hidden;
}

.certificate-queue-demo__bar {
    background: #9b8552;
    display: block;
    height: 100%;
    transition: width .45s ease;
}

.certificate-queue-demo__bar--step-1 { width: 42%; }
.certificate-queue-demo__bar--step-2 { width: 72%; }
.certificate-queue-demo__bar--step-3 { width: 100%; }

.certificate-queue-demo__timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.certificate-queue-demo__item {
    display: grid;
    gap: .8rem;
    grid-template-columns: 1rem minmax(0, 1fr);
    padding: .55rem 0;
}

.certificate-queue-demo__item div {
    display: grid;
    gap: .12rem;
}

.certificate-queue-demo__item span {
    color: #6b6568;
}

.certificate-queue-demo__dot {
    background: #d8d1cf;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #bcb2b0;
    height: .9rem;
    margin-top: .18rem;
    width: .9rem;
}

.certificate-queue-demo__item--complete .certificate-queue-demo__dot {
    background: #607163;
    box-shadow: 0 0 0 1px #607163;
}

.certificate-queue-demo__item--active .certificate-queue-demo__dot {
    animation: certificate-queue-pulse 1.2s ease-in-out infinite;
    background: #aa9056;
    box-shadow: 0 0 0 1px #aa9056;
}

.certificate-queue-demo__boundary {
    background: #f4f0e8;
    border-left: 4px solid #8a7b72;
    margin: 1.25rem 0;
    padding: .8rem 1rem;
}

.certificate-queue-demo__send-point {
    color: #607163;
    font-size: 1.08rem;
    font-weight: 700;
}

.certificate-queue-demo__download {
    background: #66595e;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    min-height: 44px;
    padding: .75rem 1.2rem;
}

.certificate-queue-demo__download:hover,
.certificate-queue-demo__download:focus {
    background: #786a70;
    color: #fff;
}

.certificate-queue-demo__download:disabled {
    cursor: wait;
    opacity: .65;
}

.certificate-transaction-summary__download-wrap {
    margin-top: 1.25rem;
}

.certificate-transaction-summary__download {
    background: #66595e;
    border: 0;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    min-height: 44px;
    padding: .75rem 1.2rem;
}

.certificate-transaction-summary__download:hover,
.certificate-transaction-summary__download:focus {
    background: #786a70;
    color: #fff;
}

.certificate-transaction-summary__download:disabled {
    cursor: wait;
    opacity: .65;
}

.certificate-transaction-summary__pdf-status {
    margin: .7rem 0 0;
    min-height: 1.4rem;
}

.certificate-queue-demo__pdf-status {
    margin: .7rem 0 0;
    min-height: 1.4rem;
}

@keyframes certificate-queue-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.certificate-email-status--review,
.certificate-email-status--unavailable {
    background: #f6eeee;
    border-left-color: #8a5656;
}

.certificate-email-status h3 {
    font-size: 1.1rem;
    margin-bottom: .4rem;
}

.certificate-email-status__headline {
    font-weight: 700;
    margin-bottom: .35rem;
}

.certificate-transaction-summary__help {
    margin: 1.5rem 0 0;
}

@media (max-width: 620px) {
    .certificate-transaction-summary {
        margin-left: .75rem;
        margin-right: .75rem;
    }

    .certificate-queue-demo,
    .certificate-queue-demo-checkout {
        margin-left: .75rem;
        margin-right: .75rem;
    }

    .certificate-queue-demo__heading {
        display: grid;
    }

    .certificate-queue-demo__step {
        justify-self: start;
    }

    .certificate-transaction-summary__details > div {
        gap: .2rem;
        grid-template-columns: 1fr;
    }
}