.mg-under { margin-top: 0.9em; }
.mg-stats .k-stat > b { font-size: 1.6em; }
@media (max-width: 39.99em) { .mg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mg-neg { font-weight: 600; color: var(--red-text); }
.page-margin .k-table td.mg-neg { color: var(--red-text); }
.mg-sev { display: inline-flex; align-items: center; padding: 0.15em 0.7em; border-radius: var(--radius-pill); border: 1px solid currentColor; font-size: 0.86em; font-weight: 600; line-height: 1.35; color: var(--app-text-3); background: var(--card); }
.mg-sev--critical { color: var(--card); background: var(--red-text); border-color: var(--red-text); }
.mg-sev--high { color: var(--red-text); }
.mg-sev--medium { color: var(--amber-text); }
.mg-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; margin: 0.9em 0; }
.page-margin .mg-lines td { white-space: normal; }
.page-margin .mg-lines td.k-r, .page-margin .mg-lines th { white-space: nowrap; }
.mg-looked { font-size: 0.86em; font-weight: 600; color: var(--green-text); white-space: nowrap; }
.mg-first > * { transition: background-color 0.4s; }
.js [data-step="4"] .mg-first > *, [data-steps]:not([data-step]) .mg-first > * { background: var(--green-bg); }
.js [data-step="3"] .mg-first .k-btn { animation: kPress 0.5s var(--ease-out) 1.4s both; }
.mg-peers { padding: 0.9em 1em 0.7em; border-radius: 0.7em; background: var(--card); border: 1px solid var(--app-border); }
.mg-peers > p:first-child { margin-bottom: 0.4em; font-size: 0.76em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--app-text-3); }
.mg-dots { position: relative; height: 5.4em; border-bottom: 1px solid var(--app-border); }
.mg-dots i { position: absolute; left: var(--x); bottom: calc(0.35em + var(--y, 0) * 1.05em); width: 0.85em; height: 0.85em; margin-left: -0.42em; border-radius: 50%; background: var(--ink-faint); }
.mg-dots i.mg-odd { width: 1.1em; height: 1.1em; margin-left: -0.55em; background: var(--red); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--red); }
.mg-odd-label { position: absolute; left: var(--x); bottom: 2.1em; transform: translateX(-30%); padding: 0.2em 0.6em; border-radius: 0.5em; font-size: 0.86em; white-space: nowrap; color: var(--red-text); background: var(--red-bg); }
.js .is-live .mg-odd-label.a-up { animation-name: fadeIn; }
.mg-axis { display: flex; justify-content: space-between; margin-top: 0.3em; font-size: 0.8em; color: var(--app-text-3); font-variant-numeric: tabular-nums; }
.mg-cost { width: 100%; border-collapse: collapse; }
.mg-cost td { padding: 0.42em 0.2em; border-bottom: 1px solid var(--app-border); color: var(--app-text-2); }
.mg-cost td:last-child { text-align: right; font-weight: 600; color: var(--app-text); font-variant-numeric: tabular-nums; }
.mg-cost tfoot td { font-weight: 700; color: var(--app-text); border-bottom: 0; border-top: 1.5px solid var(--app-text); }
.mg-result { padding: 0.7em 0.9em; border-radius: 0.6em; color: var(--green-text); background: var(--green-bg); min-height: 3em; }
.mg-result b { margin-right: 0.3em; font-family: var(--font-display); font-size: 1.6em; font-weight: 700; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.mg-result.is-low { color: var(--red-text); background: var(--red-bg); }
.js [data-step="1"] .mg-result.is-low { background: var(--app-bg-alt); }
.mg-new { padding: 0.05em 0.4em; border-radius: 0.4em; color: var(--orange-text); background: var(--orange-wash); }
.mg-target p { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 0.5em; color: var(--app-text-2); }
.mg-target p b { color: var(--app-text); }
.mg-target-bar { position: relative; display: block; height: 0.8em; border-radius: 1em; background: var(--app-bg-alt); }
.mg-target-bar i { display: block; width: 100%; height: 100%; border-radius: 1em; background: var(--green); transform-origin: 0 50%; transform: scaleX(0.725); transition: transform 0.9s var(--ease-out), background-color 0.4s; }
.mg-target-bar u { position: absolute; top: -0.3em; bottom: -0.3em; left: 66.7%; width: 2px; border-radius: 2px; background: var(--app-text); }
.js [data-step="1"] .mg-target-bar i, .js [data-step="2"] .mg-target-bar i { transform: scaleX(0.617); background: var(--red); }
.mg-save { display: flex; justify-content: flex-end; }
.mg-rules { display: grid; gap: 0.5em; }
.mg-rules > li { padding: 0.75em 0.9em; border-radius: 0.6em; background: var(--card); border: 1px solid var(--app-border); }
.mg-rule-top { display: flex; align-items: center; gap: 0.9em; }
.mg-rule-top > div { flex: 1; min-width: 0; display: grid; }
.mg-rule-top > div b { font-weight: 600; color: var(--app-text); }
.mg-rule-top > div span { font-size: 0.84em; color: var(--app-text-3); }
.mg-rule-top strong { font-family: var(--font-display); font-size: 1.35em; font-weight: 600; letter-spacing: var(--track-display); color: var(--app-text); font-variant-numeric: tabular-nums; }
.mg-rule-open { border-color: var(--orange-line); box-shadow: inset 3px 0 0 var(--orange); }
.mg-rule-open > p { margin-top: 0.6em; color: var(--app-text-2); }
.mg-used { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; margin-bottom: 0.7em; }
.mg-used em { margin-right: 0.3em; font-style: normal; font-size: 0.78em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--app-text-3); }
.mg-used span { padding: 0.15em 0.6em; border-radius: var(--radius-sm); border: 1px solid var(--app-border); font-size: 0.86em; font-weight: 500; color: var(--app-text-2); background: var(--app-bg-alt); }
.page-margin .bars.mg-fc { grid-template-columns: repeat(8, 1fr); gap: 0.5em; height: 9.5em; }
.page-margin .bars.mg-fc span i { background: var(--orange); }
.page-margin .bars.mg-fc span.is-pred i { background: var(--ink-faint); }
.page-margin .bars.mg-fc b { white-space: nowrap; font-size: 0.74em; }
.page-margin .app-card h4 small { font-weight: 500; }
.page-margin .k-chart-row.mg-charts { grid-template-columns: 1fr; }
@media (max-width: 39.99em) { .page-margin .k-hbars li { grid-template-columns: minmax(5em, 46%) 1fr 3em; gap: 0.6em; } }
.mg-hero .mg-stats .k-stat > b { font-size: 1.8em; }
.mg-hero .mg-lines .mg-sev { white-space: nowrap; }
@media (min-width: 64em) {
  .page-margin .fhero--j .fhero-grid { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); }
  .mg-hero .mg-mid { display: none; }
  .page-margin .mg-hero .k-table.mg-lines th, .page-margin .mg-hero .k-table.mg-lines td { padding: 0.5em 0.5em; }
  .page-margin .mg-hero .k-table.mg-lines th:first-child { padding-left: 0.9em; }
}
@media (min-width: 64em) and (max-width: 79.99em) { .mg-hero .mg-wide { display: none; } }
@media (max-width: 39.99em), (min-width: 64em) and (max-width: 79.99em) { .page-margin .fhero--j .fhero-facts li:last-child { flex-basis: 100%; max-width: none; } }
@media (min-width: 60em) {
  .mg-jx.jx--side { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-8); }
  .mg-jx .jp--row { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  .page-margin .mg-jx .k-table th, .page-margin .mg-jx .k-table td { padding-inline: 0.5em; }
  .page-margin .mg-jx .k-table th:first-child { padding-left: 0.9em; }
  .page-margin .mg-jx .k-table thead th { white-space: normal; line-height: 1.2; }
  .page-margin .mg-jx .jp--row .jp-screen .screen { font-size: 13px; }
}
.mg-pf { display: grid; gap: 0.5rem; }
.mg-jx .mg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-margin .mg-jx .k-table th:last-child, .page-margin .mg-jx .k-table td:last-child { padding-right: 0.9em; }
.mg-jx .jx-tab small { text-wrap: balance; }
@media (max-width: 39.99em) { .page-margin .mg-jx .k-pagehead h3 small { display: block; margin: 0.15em 0 0; } }
@media (min-width: 60em) {
  html:not(.js) .mg-jx.jx--side { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  html:not(.js) .mg-jx.jx--side > .jx-side, html:not(.js) .mg-jx.jx--side > .jx-stage { grid-column: 1; grid-row: auto; }
  html:not(.js) .mg-jx .jx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: var(--space-2) var(--space-4); }
  html:not(.js) .mg-jx .jx-group { margin: 0; }
  html:not(.js) .mg-jx .jx-tab { height: 100%; border-color: var(--line); background: var(--card); }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .page-margin .mg-hero .mg-stats .k-stat { padding-inline: 0.7em; }
  .page-margin .mg-hero .mg-stats .k-stat > span { font-size: 0.72em; letter-spacing: 0; }
  .page-margin .mg-jx .k-pagehead h3 small { display: block; margin: 0.15em 0 0; }
}
.js .mg-hero [data-step] .mg-sev[data-at] { transform: none; }
.mg-rules > li { padding-block: 0.62em; }
.mg-rules { gap: 0.4em; }
.mg-rules .k-swap--block { min-height: 4.25em; }
.mg-rules .k-swap--block > .k-note { align-self: stretch; align-content: center; margin: 0; }