.hope-donate-wrap * {
    box-sizing: border-box
}

.hope-donate-wrap {
    --teal: #168888;
    --teal-dark: #0f6b6b;
    --teal-light: #e8f3f3;
    --ink: #333;
    --ink-soft: #5a5a5a;
    --ink-faint: #888;
    --rule: #e6e6e6;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
    -webkit-font-smoothing: antialiased
}

.hope-donate-wrap .intro {
    text-align: center;
    margin-bottom: 32px
}

.hope-donate-wrap .intro .eyebrow {
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px
}

.hope-donate-wrap .intro h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--ink)
}

.hope-donate-wrap .intro p {
    color: var(--ink-soft);
    font-size: 16px;
    margin: 0 auto;
    max-width: 480px
}

.hope-donate-wrap .donate-card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(22, 136, 136, .06);
    padding: 36px 32px
}

.hope-donate-wrap .field-group {
    margin-bottom: 24px
}

.hope-donate-wrap label.group-label {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink);
    margin-bottom: 12px
}

.hope-donate-wrap .amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px
}

.hope-donate-wrap .amount-btn {
    background: #fff;
    border: 2px solid var(--rule);
    color: var(--ink);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 17px;
    padding: 14px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    text-align: center
}

.hope-donate-wrap .amount-btn:hover {
    border-color: var(--teal);
    color: var(--teal)
}

.hope-donate-wrap .amount-btn.active {
    border-color: var(--teal);
    background: var(--teal);
    color: #fff
}

.hope-donate-wrap .summary {
    background: var(--teal-light);
    border-radius: 4px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.hope-donate-wrap .summary-label {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink)
}

.hope-donate-wrap .summary-amount {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 26px;
    color: var(--teal)
}

.hope-donate-wrap .submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--teal);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: none;
    border-radius: 3px;
    padding: 18px 28px;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .1s ease;
    box-shadow: 0 2px 0 var(--teal-dark);
    text-decoration: none
}

.hope-donate-wrap .submit-btn:hover:not(:disabled) {
    background: var(--teal-dark);
    box-shadow: 0 4px 12px rgba(22, 136, 136, .3);
    color: #fff
}

.hope-donate-wrap .submit-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--teal-dark)
}

.hope-donate-wrap .submit-btn:disabled {
    background: #b8d6d6;
    box-shadow: 0 2px 0 #9bc5c5;
    cursor: not-allowed
}

.hope-donate-wrap .submit-btn svg {
    transition: transform .2s ease
}

.hope-donate-wrap .submit-btn:hover:not(:disabled) svg {
    transform: translateX(4px)
}

.hope-donate-wrap .secure {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.hope-donate-wrap .secure svg {
    width: 12px;
    height: 12px
}

.hope-donate-wrap .error-msg {
    color: #c0392b;
    font-size: 13px;
    margin-top: 10px;
    text-align: center;
    display: none
}

.hope-donate-wrap .error-msg.show {
    display: block
}

@media (max-width:600px) {
    .hope-donate-wrap .intro h2 {
        font-size: 26px
    }

    .hope-donate-wrap .donate-card {
        padding: 24px 20px
    }

    .hope-donate-wrap .amounts {
        gap: 8px
    }

    .hope-donate-wrap .amount-btn {
        font-size: 15px;
        padding: 12px 4px
    }
}