.mc {
    background: #f3f5f6;
    padding: 56px 20px 72px;
    color: #142638
}

.mc-wrap {
    max-width: 1120px;
    margin: auto
}

.mc-kicker {
    color: #8b671f;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase
}

.mc h1 {
    font-size: clamp(32px,5vw,52px);
    margin: 12px 0
}

.mc-intro {
    max-width: 660px;
    color: #536170;
    line-height: 1.65
}

.mc-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 28px;
    margin-top: 32px;
    align-items: start
}

.mc-card {
    background: white;
    border: 1px solid #dce1e5;
    border-radius: 12px;
    padding: 28px
}

.mc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.mc label {
    display: block;
    font-size: 14px;
    font-weight: 700
}

.mc input, .mc select {
    display: block;
    width: 100%;
    height: 48px;
    border: 1px solid #aeb9c2;
    border-radius: 6px;
    background: white;
    color: #142638;
    padding: 10px 12px;
    margin-top: 8px;
    font: inherit;
    box-sizing: border-box
}

    .mc input:focus, .mc select:focus {
        outline: 3px solid #d9b861;
        outline-offset: 2px
    }

.mc small {
    display: block;
    font-size: 12px;
    color: #627180;
    line-height: 1.5;
    margin-top: 7px
}

.mc-wide {
    grid-column: 1/-1
}

.mc h2 {
    font-size: 23px;
    margin: 28px 0 18px
}

.mc-result {
    background: #071b2e;
    color: white
}

    .mc-result h2 {
        color: white;
        margin: 0;
        font: 700 14px Lato,sans-serif;
        letter-spacing: 1px;
        text-transform: uppercase
    }

.mc-total {
    font-size: clamp(38px,5vw,54px);
    font-weight: 900;
    line-height: 1.2;
    margin: 18px 0 4px;
    color: #e4c16e
}

.mc-result small {
    color: #bdc9d4
}

.mc-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #ffffff25;
    font-size: 14px
}

    .mc-row strong {
        white-space: nowrap
    }

.mc-result dl {
    margin: 24px 0
}

.mc-result dd {
    margin: 0
}

.mc-result a {
    display: block;
    text-align: center;
    margin-top: 24px;
    background: #dfbb65;
    color: #071b2e;
    padding: 15px;
    border-radius: 5px;
    font-weight: 900;
    text-decoration: none
}

.mc-note {
    font-size: 12px;
    color: #627180;
    line-height: 1.7;
    margin-top: 22px
}

.mc-error {
    color: #a52323;
    font-size: 14px;
    min-height: 22px;
    margin-top: 16px
}

.mc button {
    background: white;
    border: 1px solid #aeb9c2;
    padding: 10px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700
}

.mc-segment {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 8px
}

    .mc-segment select {
        font-size: 14px
    }

.mc-bar {
    height: 10px;
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    margin: 24px 0 8px
}

    .mc-bar span {
        transition: width .15s
    }

.mc-result .mc-meta {
    color: #c4cfda;
    font-size: 13px;
    margin-top: 18px
}

@media(max-width:760px) {
    .mc-grid {
        grid-template-columns: 1fr
    }

    .mc-card {
        padding: 22px
    }

    .mc {
        padding-top: 32px
    }

    .mc-fields {
        gap: 16px
    }
}

@media(max-width:400px) {
    .mc-fields {
        grid-template-columns: 1fr
    }

    .mc-wide {
        grid-column: auto
    }
}