.msc {
  --msc-indigo: #4b3fd6;
  --msc-navy: #17123f;
  --msc-lavender: #f4f2ff;
  --msc-teal: #0f8f87;
  --msc-border: #dcd8f3;
  --msc-muted: #625d78;
  color: var(--msc-navy);
  font-family: inherit;
  margin: 3rem auto;
  max-width: 1180px;
  padding: 0 1rem;
}

.msc *, .msc *::before, .msc *::after { box-sizing: border-box; }
.msc h2, .msc h3, .msc p { margin-top: 0; }
.msc h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin-bottom: .75rem; }
.msc h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.msc__intro { max-width: 720px; margin-bottom: 1.5rem; }
.msc__intro > p:last-child { color: var(--msc-muted); line-height: 1.6; }
.msc__eyebrow { color: var(--msc-teal); font-size: .75rem; font-weight: 800; letter-spacing: .12em; margin-bottom: .5rem; text-transform: uppercase; }
.msc__shell { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.1fr) minmax(330px, .9fr); align-items: start; }
.msc__form, .msc__results, .msc__unsupported, .msc__requirements { border: 1px solid var(--msc-border); border-radius: 20px; }
.msc__form { background: #fff; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.25rem; }
.msc__field { min-width: 0; }
.msc__field--wide { grid-column: 1 / -1; }
.msc label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .4rem; }
.msc label span { color: var(--msc-muted); font-weight: 500; }
.msc input, .msc select { appearance: none; background: #fff; border: 1px solid #bdb8d7; border-radius: 10px; color: var(--msc-navy); font: inherit; min-height: 46px; padding: .65rem .75rem; width: 100%; }
.msc select { background-image: linear-gradient(45deg, transparent 50%, var(--msc-indigo) 50%), linear-gradient(135deg, var(--msc-indigo) 50%, transparent 50%); background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; padding-right: 2rem; }
.msc input:focus, .msc select:focus, .msc button:focus-visible, .msc a:focus-visible, .msc summary:focus-visible { outline: 3px solid rgba(75,63,214,.24); outline-offset: 2px; border-color: var(--msc-indigo); }
.msc [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 1px #b42318; }
.msc input:disabled { background: #f1eff8; color: var(--msc-muted); }
.msc__money-input, .msc__percent-input { align-items: center; display: flex; position: relative; }
.msc__money-input > span { left: .75rem; position: absolute; }
.msc__money-input input { padding-left: 1.65rem; }
.msc__percent-input > span { position: absolute; right: .75rem; }
.msc__percent-input input { padding-right: 1.7rem; }
.msc__hint { color: var(--msc-muted); font-size: .75rem; line-height: 1.4; margin: .35rem 0 0; }
.msc__advanced { border: 0; border-top: 1px solid var(--msc-border); margin-top: .25rem; padding-top: 1rem; }
.msc__advanced summary { color: var(--msc-indigo); cursor: pointer; font-weight: 800; margin-bottom: 1rem; }
.msc__advanced-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.msc__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.msc__button { align-items: center; border: 1px solid var(--msc-indigo); border-radius: 999px; cursor: pointer; display: inline-flex; font: inherit; font-weight: 800; justify-content: center; min-height: 44px; padding: .68rem 1.1rem; text-decoration: none; }
.msc__button--primary { background: var(--msc-indigo); color: #fff; }
.msc__button--primary:hover { background: #392dac; }
.msc__button--secondary { background: #fff; color: var(--msc-indigo); }
.msc__errors { background: #fff2f0; border: 1px solid #f3b4ad; border-radius: 10px; color: #8a1c13; padding: .8rem 1rem; }
.msc__errors p { font-weight: 800; margin-bottom: .3rem; }
.msc__errors ul { margin: 0; padding-left: 1.2rem; }
.msc__results-wrap { position: sticky; top: 1rem; }
.msc__results { background: linear-gradient(145deg, var(--msc-navy), #29205e); color: #fff; overflow: hidden; padding: 1.35rem; }
.msc__results-head { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.msc__results .msc__eyebrow { color: #72d7cf; }
.msc__badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: .72rem; padding: .35rem .55rem; text-align: center; }
.msc__metrics { display: grid; gap: 0; margin: 1rem 0; }
.msc__metrics > div { border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr) auto; padding: .72rem 0; }
.msc__metrics dt { color: #d8d4ef; font-size: .85rem; }
.msc__metrics dd { font-size: 1rem; font-weight: 800; margin: 0; text-align: right; }
.msc__metrics small { color: #bbb5db; font-size: .7rem; grid-column: 1 / -1; }
.msc__metrics .msc__metric--featured dd { color: #72d7cf; font-size: 1.45rem; }
.msc__rate-line { background: rgba(255,255,255,.08); border-radius: 10px; font-size: .8rem; margin-bottom: .7rem; padding: .7rem; }
.msc__source, .msc__caption { color: #c9c5dd; font-size: .72rem; line-height: 1.5; }
.msc__source a { color: #fff; }
.msc__cta { color: #fff; display: inline-block; font-size: .86rem; font-weight: 800; margin-top: .5rem; text-underline-offset: 3px; }
.msc__unsupported { background: var(--msc-lavender); padding: 1.5rem; }
.msc__unsupported p { color: var(--msc-muted); line-height: 1.55; }
.msc__requirements { background: var(--msc-lavender); display: grid; gap: 2rem; grid-template-columns: .7fr 1.3fr; margin-top: 1.25rem; padding: 1.35rem; }
.msc__requirements ul { line-height: 1.55; margin: .5rem 0; padding-left: 1.2rem; }
.msc__requirements li + li { margin-top: .35rem; }
.msc__scope-note { color: var(--msc-muted); font-size: .8rem; margin-bottom: 0; }
.msc__config-error { background: #fff2f0; border-radius: 10px; color: #8a1c13; padding: 1rem; }
.msc__sr-only { clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.msc [hidden] { display: none !important; }

@media (max-width: 760px) {
  .msc { margin: 2rem auto; }
  .msc__shell, .msc__requirements { grid-template-columns: 1fr; }
  .msc__form, .msc__advanced-grid { grid-template-columns: 1fr; }
  .msc__field { grid-column: 1 / -1; }
  .msc__results-wrap { position: static; }
  .msc__results-head { display: block; }
  .msc__badge { display: inline-block; margin-bottom: .5rem; }
}

@media print {
  .msc { margin: 0; max-width: none; padding: 0; }
  .msc__intro, .msc__form, .msc__actions, .msc__cta, .msc__unsupported { display: none !important; }
  .msc__shell { display: block; }
  .msc__results-wrap { position: static; }
  .msc__results { background: #fff; border-color: #777; color: #000; }
  .msc__results .msc__eyebrow, .msc__metrics dt, .msc__metrics small, .msc__source, .msc__caption { color: #333; }
  .msc__metrics .msc__metric--featured dd, .msc__source a { color: #000; }
  .msc__badge, .msc__rate-line { background: #eee; border-color: #aaa; }
  .msc__requirements { background: #fff; break-inside: avoid; }
}