@charset "utf-8";

/*
    Email integrations - /email-integrations.
    ? Sections only; the hero, buttons, tier badge and closing band are the shared ones.
*/

.ei-section {
    padding: 56px 0;
}

.ei-section-wash {
    background-color: var(--mp-wash);
}

.ei-badge {
    margin: 0 0 20px;
}

.ei-lede {
    font-size: 17px;
    color: var(--mp-muted);
    max-width: 68ch;
    margin: 0 0 28px;
}

.ei-card-grid {
    display: grid;
    gap: 16px;
    margin-top: 28px;
}

.ei-lede + .ei-card-grid {
    margin-top: 0;
}

.ei-card-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.ei-card-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ei-card {
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 24px;
}

.ei-card-icon {
    font-size: 22px;
    color: var(--mp-red);
    display: block;
    margin-bottom: 14px;
}

.ei-card-title {
    font-size: 18px;
    margin: 0 0 10px;
}

.ei-card-text {
    font-size: 15.5px;
    color: var(--mp-muted);
    margin: 0;
}

/*  The caveat under each direction: quieter than the text, set apart by a rule */
.ei-card-note {
    font-size: 14.5px;
    color: var(--mp-ink);
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--mp-border);
}

/*  Provider facts: a label over its answer, so three cards compare line for line */
.ei-facts {
    margin: 0;
}

.ei-facts dt {
    margin: 16px 0 4px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mp-muted);
}

.ei-facts dt:first-child {
    margin-top: 0;
}

.ei-facts dd {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--mp-ink);
}

/*  Numbered steps - the number is a counter, so the markup stays an ordered list */
.ei-steps {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    counter-reset: ei-step;
}

.ei-steps li {
    counter-increment: ei-step;
    background-color: var(--mp-surface);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-radius-lg);
    padding: 24px;
}

.ei-steps li::before {
    content: counter(ei-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--mp-red);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
}

.ei-step-title {
    font-size: 18px;
    margin: 0 0 10px;
}

.ei-limits {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    border-bottom: 1px solid var(--mp-border);
}

.ei-limits li {
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid var(--mp-border);
}

.ei-limit-name {
    font-size: 18px;
    margin: 0 0 8px;
}

.ei-limits .ei-card-text {
    max-width: 68ch;
}

.ei-more {
    margin: 28px 0 0;
    font-weight: 700;
}

.ei-more a i {
    margin-left: 4px;
    font-size: 13px;
    transition: transform 0.18s ease;
}

.ei-more a:hover i,
.ei-more a:focus i {
    transform: translateX(4px);
}

@media (max-width: 767px) {

    .ei-section {
        padding: 40px 0;
    }
}