.mg-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.mg-hero-actions a { white-space: normal; }
.mg-demo { padding-block: clamp(2rem, 6vw, 4rem); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.mg-demo h2, .mg-contact h2 { margin: 0 0 .75rem; }
.mg-intro { max-width: 70ch; }
.mg-intro p, .mg-panel p, .mg-contact p { margin: .65rem 0; }
.mg-notice { background: #112843; border-inline-start: 3px solid #e38d60; padding: .75rem 1rem; }
.mg-flow { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1.4rem; }
.mg-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.mg-demo button { font: inherit; cursor: pointer; }
.mg-step, .mg-viewer button, .mg-controls button { background: var(--deep); color: var(--paper); border: 1px solid #62778e; border-radius: .25rem; }
.mg-step { display: flex; gap: .55rem; align-items: baseline; padding: .65rem; width: 100%; height: 100%; text-align: start; min-height: 44px; overflow-wrap: anywhere; }
.mg-step span { color: #e38d60; font-size: .8rem; }
.mg-step[aria-pressed="true"], #mg-zoom[aria-pressed="true"] { border-color: #e38d60; background: #233951; }
.mg-panel { padding: clamp(.75rem, 2.3vw, 1.5rem); background: #112843; min-width: 0; }
.mg-panel h3 { margin: 0; font-size: clamp(1.45rem, 3vw, 2rem); }
.mg-count { color: #e38d60; font-size: .85rem; }
.mg-panel figure { margin: .85rem 0; }
.mg-panel figure img { width: 100%; height: auto; display: block; }
.mg-panel figcaption { color: var(--muted); margin-top: .65rem; font-size: .86rem; }
.mg-expand { display: block; }
.mg-expand span { display: inline-block; margin-top: .55rem; text-decoration: underline; }
.mg-controls { display: flex; justify-content: space-between; gap: .65rem; margin-top: .9rem; }
.mg-viewer button, .mg-controls button { padding: .55rem .7rem; min-height: 44px; }
.mg-controls button:disabled { opacity: .5; cursor: default; }
.mg-demo :focus-visible { outline: 3px solid #e38d60; outline-offset: 2px; }
.mg-viewer { width: min(95vw, 1250px); box-sizing: border-box; }
.mg-image-viewport { max-height: 68dvh; overflow: auto; overscroll-behavior: contain; }
.mg-image-viewport img { width: 100%; height: auto; max-height: none; }
.mg-image-viewport.mg-actual-size img { width: 1440px; max-width: none; margin: 0; }
.mg-contact { padding: clamp(1rem, 4vw, 2rem); margin-bottom: 3rem; background: #112843; }
.mg-contact a { overflow-wrap: anywhere; white-space: normal; }
.mg-contact .button { margin-top: .5rem; }
@media (max-width: 740px) {
  .mg-flow { grid-template-columns: minmax(0, 1fr); }
  .mg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-step { font-size: .88rem; padding: .55rem; }
}