.mg-calc { position: relative; overflow: hidden; padding-bottom: 18px; }
.mg-calc-peaks { position: absolute; top: 56px; right: 0; width: 420px; height: 260px; z-index: 0; opacity: .9; }
.mg-calc-in { position: relative; z-index: 1; }

.mg-calc-crumbs { padding: 26px 0 0; gap: 14px; font-size: 18px; color: #1f2430; }
.mg-calc-crumbs a { color: #1f2430; }
.mg-calc-crumbs .sep { width: 9px; height: 9px; margin: 0 4px 0 0; opacity: .8; }
.mg-calc-crumbs .now { color: #1f2430; }

.mg-calc .mg-calc-title { margin: 34px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 65px; line-height: 1.05; font-weight: 700; letter-spacing: -.012em; color: #0f1d48; }
.mg-calc-rule { display: block; width: 100px; height: 3px; margin: 22px 0 0; background: var(--c-red); }
.mg-calc .mg-calc-lead { margin: 30px 0 0; font-size: 23px; line-height: 1.55; color: #2a2f3b; }

.mg-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; align-items: start; }

.mg-calc-form {
    padding: 34px 30px 40px; background: #fff; border: 1px solid #e6e9ef; border-radius: 10px;
    box-shadow: 0 6px 24px rgba(11, 26, 60, .07);
}
.mg-calc .mg-calc-form-title { margin: 0 0 30px; font-size: 22px; line-height: 1; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #0b2a6f; }
.mg-calc-form-title span { display: inline-block; padding: 0 2px 15px 0; border-bottom: 3px solid var(--c-red); }

.mg-calc-row { display: grid; grid-template-columns: 78px 1fr 254px; align-items: center; gap: 0 22px; margin: 0 0 32px; cursor: text; }
.mg-calc-ico { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; }
.mg-calc-ico.blue { background: #e7eefa; color: #0b3d9e; }
.mg-calc-ico.red { background: #fbe7ea; color: #c8102e; }
.mg-calc-ico svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mg-calc-ico svg.pct { width: 40px; height: 40px; stroke-width: 2.4; }
.mg-calc-ico svg .dots { stroke-width: 2.4; }
.mg-calc-lab { font-size: 22px; color: #1f2430; }

.mg-calc-field { position: relative; display: block; }
.mg-calc .mg-calc-in-box {
    width: 100%; height: 76px; padding: 0 22px; border: 1.5px solid #d6dbe4; border-radius: 9px;
    font: inherit; font-size: 29px; color: #141a2a; background: #fff; box-shadow: none;
}
.mg-calc .mg-calc-in-box:focus { outline: 2px solid rgba(11, 61, 158, .2); border-color: var(--c-blue); }
.mg-calc-suffix { position: absolute; top: 50%; right: 24px; transform: translateY(-50%); font-size: 22px; color: #1f2430; pointer-events: none; }
.mg-calc-term select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 110px; }
.mg-calc-term .mg-calc-suffix { right: 56px; font-size: 21px; }
.mg-calc-chev { position: absolute; top: 50%; right: 20px; width: 24px; height: 24px; transform: translateY(-50%); fill: none; stroke: #1f2430; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

.mg-calc-deals {
    display: flex; align-items: center; justify-content: center; gap: 18px; height: 68px; margin-top: 40px;
    background: #0b3d9e; color: #fff; border-radius: 6px; font-size: 25px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.mg-calc-deals:hover { background: #082f7a; color: #fff; }
.mg-calc-deals svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.mg-calc .mg-calc-note { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 17px; color: #1f2430; }
.mg-calc-note svg { width: 28px; height: 28px; flex: none; fill: none; stroke: #1f2430; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.mg-calc-res { background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; overflow: hidden; box-shadow: 0 6px 24px rgba(11, 26, 60, .07); padding-bottom: 32px; }
.mg-calc-res-head { display: flex; align-items: center; justify-content: space-between; height: 74px; padding: 0 32px; background: #0b3d9e; }
.mg-calc .mg-calc-res-head h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.mg-calc-res-head svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 1.5; }
.mg-calc-res-head svg .fill, .mg-calc-res-head svg .fill rect { fill: #fff; stroke: none; }

.mg-calc-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 26px 0 32px; height: 100px; border-bottom: 1.5px solid #e3e6ec; font-size: 23px; color: #1f2430; }
.mg-calc-line:first-of-type { height: 108px; }
.mg-calc-monthly { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.mg-calc-monthly b { font-size: 50px; font-weight: 700; color: var(--c-red); letter-spacing: -.01em; }
.mg-calc-monthly small { font-size: 20px; color: #1f2430; }
.mg-calc-big { font-size: 48px; font-weight: 700; color: #0b1d4f; letter-spacing: -.01em; white-space: nowrap; }

.mg-calc .mg-calc-sub { margin: 36px 32px 0; font-size: 21px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #0b2a6f; }
.mg-calc-break { display: flex; align-items: center; gap: 36px; margin: 16px 32px 0; }
.mg-calc-donut { position: relative; width: 214px; height: 214px; flex: none; }
.mg-calc-donut svg { width: 100%; height: 100%; display: block; }
.mg-calc-donut circle { transition: stroke-dasharray .35s, stroke-dashoffset .35s; }
.mg-calc-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.25; }
.mg-calc-donut-c b { font-size: 24px; font-weight: 700; color: #141a2a; }
.mg-calc-donut-c span { font-size: 20px; color: #1f2430; }
.mg-calc-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.mg-calc-legend li { display: flex; align-items: flex-start; gap: 18px; }
.mg-calc-legend i { width: 17px; height: 17px; border-radius: 50%; margin-top: 7px; flex: none; }
.mg-calc-legend i.red { background: var(--c-red); }
.mg-calc-legend i.blue { background: #0b3d9e; }
.mg-calc-legend div { display: flex; flex-direction: column; gap: 6px; font-size: 21px; color: #1f2430; line-height: 1.3; }

@media (max-width: 1100px) {
    .mg-calc-row { grid-template-columns: 64px 1fr 200px; gap: 0 14px; }
    .mg-calc-ico { width: 64px; height: 64px; }
    .mg-calc-line { font-size: 19px; }
    .mg-calc-monthly b, .mg-calc-big { font-size: 38px; }
}
@media (max-width: 900px) {
    .mg-calc-peaks { opacity: .4; width: 260px; }
    .mg-calc .mg-calc-title { font-size: 44px; }
    .mg-calc .mg-calc-lead { font-size: 18px; }
    .mg-calc-grid { grid-template-columns: 1fr; }
    .mg-calc-form { padding: 24px 18px 28px; }
    .mg-calc .mg-calc-form-title { font-size: 18px; }
    .mg-calc-row { grid-template-columns: 52px 1fr; gap: 10px 14px; margin-bottom: 22px; }
    .mg-calc-ico { width: 52px; height: 52px; }
    .mg-calc-ico svg { width: 28px; height: 28px; }
    .mg-calc-lab { font-size: 18px; }
    .mg-calc-row > input, .mg-calc-row > .mg-calc-field { grid-column: 1 / -1; }
    .mg-calc .mg-calc-in-box { height: 58px; font-size: 22px; }
    .mg-calc-deals { font-size: 20px; height: 58px; }
    .mg-calc-res-head { padding: 0 18px; height: 60px; }
    .mg-calc .mg-calc-res-head h2 { font-size: 18px; }
    .mg-calc-line { margin: 0 18px; height: 82px; font-size: 17px; }
    .mg-calc-line:first-of-type { height: 88px; }
    .mg-calc-monthly b, .mg-calc-big { font-size: 30px; }
    .mg-calc-monthly small { font-size: 15px; }
    .mg-calc .mg-calc-sub { margin: 26px 18px 0; font-size: 17px; }
    .mg-calc-break { flex-direction: column; margin: 16px 18px 0; gap: 22px; }
    .mg-calc-legend { gap: 18px; }
}