/* Homepage hero: Margin Governance Field (js/marginField.js).
   Colour encodes relationship stage and evidence state; red only for confirmed leakage. */
.mg {
  --mg-ink: var(--text-primary);
  --mg-muted: #6b7470;
  --mg-line: rgba(22, 28, 22, 0.14);
  --mg-line-soft: rgba(22, 28, 22, 0.08);
  /* relationship stages */
  --mg-agreed: #6f5aa8;
  --mg-delivered: #287f8f;
  --mg-cost: #bd7028;
  --mg-billed: #356ea3;
  --mg-paid: #65745f;
  /* resolution states */
  --mg-verified: #2f7d65;
  --mg-secured: #12a150;
  --mg-variance: #c1781f;
  --mg-leak: #FF0000;
  --mg-act: var(--mg-ink);
  --mg-act-end: var(--mg-ink);
  --mg-ease-in: cubic-bezier(.22, .8, .2, 1);
  --mg-ease: cubic-bezier(.4, 0, .2, 1);
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 2.5rem auto 0;
  aspect-ratio: 1200 / 520;
  min-height: 480px;
  container-type: inline-size;
  border: 1px solid var(--mg-line-soft);
  border-radius: 0.125rem;
  background: var(--bg-main);
  color: var(--mg-ink);
  font-family: Inter, system-ui, sans-serif;
  text-align: left;
  overflow: hidden;
}
[data-theme="dark"] .mg {
  --mg-muted: #9ba39a;
  --mg-line: rgba(238, 241, 235, 0.16);
  --mg-line-soft: rgba(238, 241, 235, 0.08);
  --mg-agreed: #a999dd;
  --mg-delivered: #62b8c4;
  --mg-cost: #e3a15d;
  --mg-billed: #72a7d4;
  --mg-paid: #9aaa94;
  --mg-verified: #72ba9f;
  --mg-secured: #4fdc8a;
  --mg-variance: #e0a047;
  --mg-leak: #FF0000;
}
.mg * { box-sizing: border-box; }
.mg { --u: calc(100cqw / 1200); }

/* Layer 1: commercial field */
.mg-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-contour { fill: none; stroke: var(--mg-line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; transition: opacity .65s var(--mg-ease); }
.mg-contours { animation: mg-drift 26s ease-in-out infinite alternate; }
@keyframes mg-drift { to { transform: translate(1.5px, -1.5px); } }
.mg.has-focus .mg-contour { opacity: .6; }
.mg-reg { stroke: var(--mg-line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .65s var(--mg-ease); }
.mg-reg.is-lit { stroke: var(--mg-act); }
.mg-void { fill: var(--bg-main); opacity: .85; }
.mg-arc { fill: none; stroke: var(--mg-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mg-arc-secured { stroke: color-mix(in srgb, var(--mg-secured) 30%, transparent); }
.mg-arc-leakage { stroke: color-mix(in srgb, var(--mg-ink) 18%, transparent); }
.mg-trace { fill: none; stroke: var(--mg-act); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; stroke-linecap: round; }
.mg.is-observe .mg-trace-in, .mg.is-connect .mg-trace-in, .mg.is-test .mg-trace-in, .mg.is-resolve .mg-trace-in {
  opacity: .75; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--mg-ease-in), opacity .3s;
}
.mg.is-resolve .mg-trace-out { opacity: .95; stroke-dashoffset: 0; stroke-width: 2; transition: stroke-dashoffset 1s var(--mg-ease-in), opacity .2s; }
.mg[data-outcome="leakage"] .mg-trace-out { stroke: var(--mg-leak); }
.mg[data-outcome="secured"] .mg-trace-out { stroke: var(--mg-secured); }
.mg.is-release .mg-trace { opacity: 0; transition: opacity .7s var(--mg-ease); }

/* Real-time control label */
.mg-live { position: absolute; display: flex; align-items: flex-start; gap: 10px; transform: translateX(-50%); }
.mg-live-mark { position: relative; flex: none; width: 18px; height: 18px; margin-top: -1px; }
.mg-live-mark i, .mg-live-mark b { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.mg-live-mark i { width: 8px; height: 8px; background: var(--mg-act); transition: background .6s var(--mg-ease); }
.mg-live-mark b { width: 8px; height: 8px; border: 1.5px solid var(--mg-act); animation: mg-pulse 2.4s ease-out infinite; }
@keyframes mg-pulse { 0% { width: 8px; height: 8px; opacity: .9; } 100% { width: 18px; height: 18px; opacity: 0; } }
.mg-live-txt { display: flex; flex-direction: column; gap: 2px; }
.mg-live-k { font-size: max(10.5px, calc(var(--u) * 11)); font-weight: 700; letter-spacing: .14em; }
.mg-live-v { font-size: max(11px, calc(var(--u) * 12)); color: var(--mg-muted); }

/* Layer 2: use-case territories */
.mg-anchors { position: absolute; inset: 0; pointer-events: none; }
.mg-anchor {
  position: absolute; transform: translate(-9px, -50%);
  display: flex; align-items: flex-start; gap: calc(var(--u) * 8);
  max-width: calc(var(--u) * 230); min-height: 44px; padding: 6px 8px 6px 0;
  background: none; border: 0; color: var(--mg-ink); text-align: left; cursor: pointer;
  font: inherit; pointer-events: auto; opacity: .55;
  transition: opacity .65s var(--mg-ease);
}
.mg-anchor.mg-edge { opacity: .5; }
.mg.has-focus .mg-anchor:not(.is-active) { opacity: .5; }
.mg-anchor.is-next { opacity: .72 !important; }
.mg-anchor:hover, .mg-anchor.is-active { opacity: 1 !important; }
.mg-anchor.was-secured, .mg-anchor.was-leakage { opacity: .7; }
.mg-anchor:focus-visible { outline: 2px solid var(--mg-ink); outline-offset: 2px; border-radius: 0.125rem; opacity: 1; }
.mg-mark { flex: none; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: color-mix(in srgb, var(--c) 55%, var(--mg-muted)); stroke-width: 1.4; stroke-linecap: round; transition: transform .65s var(--mg-ease), stroke .5s; }
.mg-anchor.is-active .mg-mark, .mg-anchor.is-next .mg-mark, .mg-anchor:hover .mg-mark { stroke: var(--c); }
.mg-anchor.was-secured .mg-mark { stroke: var(--mg-secured); }
.mg-anchor.was-leakage .mg-mark { stroke: var(--mg-leak); }
.mg-anchor.is-active .mg-mark { transform: rotate(90deg) scale(1.1); }
.mg-anchor-txt { background: var(--bg-main); padding: 0 4px 2px 2px; border-radius: 0.125rem; display: flex; flex-direction: column; gap: 3px; }
.mg-anchor-label { font-size: max(12px, calc(var(--u) * 13)); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.mg-anchor.is-active .mg-anchor-label { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c) 45%, transparent); }
.mg-anchor-ctx { font-size: max(11px, calc(var(--u) * 11.5)); line-height: 1.35; color: var(--mg-muted); max-height: 0; opacity: 0; overflow: hidden; transition: opacity .5s var(--mg-ease), max-height .5s var(--mg-ease); }
.mg-anchor.is-active .mg-anchor-ctx { max-height: 4.5em; opacity: 1; }

/* Layer 3: governance core */
.mg-core { position: absolute; width: calc(280 / 1200 * 100%); aspect-ratio: 1; }
.mg-core svg { width: 100%; height: 100%; overflow: visible; font-family: Inter, system-ui, sans-serif; }
.mg-aperture-outer { fill: none; stroke: var(--mg-line-soft); stroke-width: 1; }
.mg-aperture { fill: var(--bg-main); stroke: var(--mg-line); stroke-width: 1; transform-origin: 0 0; transition: transform 1.2s var(--mg-ease); }
.mg.is-test .mg-aperture { transform: scale(.965); }
.mg-seg { fill: none; stroke-width: 2.4; opacity: .16; stroke-linecap: round; }
.mg-stage-dot { fill: var(--bg-main); stroke: var(--c); stroke-opacity: .6; stroke-width: 1.4; transition: fill .5s var(--mg-ease) var(--sdelay, 0ms); }
.mg-stage text { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; fill: var(--c); opacity: .8; transition: opacity .5s var(--mg-ease) var(--sdelay, 0ms); }
.mg.has-focus .mg-stage:not(.is-rel) text { opacity: .45; }
.mg.is-connect .mg-stage.is-rel .mg-stage-dot { stroke-dasharray: 2 2; stroke-opacity: 1; }
.mg.is-test .mg-stage.is-rel .mg-stage-dot, .mg.is-resolve .mg-stage.is-rel .mg-stage-dot { fill: var(--c); stroke-opacity: 1; }
.mg.is-connect .mg-stage.is-rel text, .mg.is-test .mg-stage.is-rel text, .mg.is-resolve .mg-stage.is-rel text { opacity: 1; }
.mg-chord { fill: none; stroke: var(--mg-act); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; stroke-linecap: round; transition: stroke .6s var(--mg-ease); }
.mg.is-connect .mg-chord { opacity: .55; stroke-dashoffset: .45; transition: stroke-dashoffset 1.3s var(--mg-ease-in), opacity .3s; }
.mg.is-test .mg-chord, .mg.is-resolve .mg-chord { opacity: .95; stroke-dashoffset: 0; stroke: var(--mg-act-end); transition: stroke-dashoffset 1s var(--mg-ease-in), opacity .3s, stroke .8s; }
.mg.is-resolve[data-outcome="secured"] .mg-chord { stroke: var(--mg-secured); animation: mg-settle 1.2s 1.2s forwards; }
@keyframes mg-settle { to { stroke: var(--mg-act-end); opacity: .75; } }
.mg.is-release .mg-chord { opacity: 0; transition: opacity .7s; }
.mg-break path { fill: none; stroke: var(--mg-leak); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .5s var(--mg-ease); }
.mg-break-gap { stroke-dasharray: 2 3; }
.mg.is-test[data-outcome="leakage"] .mg-break-ticks { opacity: .55; stroke: var(--mg-variance); }
.mg.is-resolve[data-outcome="leakage"] .mg-break path { opacity: 1; }
.mg-core-label { font-size: 7.5px; font-weight: 700; letter-spacing: .14em; fill: var(--mg-ink); }
.mg-owl { position: absolute; left: 50%; top: 48.6%; height: 30%; width: auto; transform: translate(-43%, -50%); }
.mg-status {
  position: absolute; transform: translateX(-50%); margin: 0; width: calc(var(--u) * 330); text-align: center;
  display: flex; flex-direction: column; gap: 3px; line-height: 1.35; min-height: 2.8em;
  opacity: 0; transition: opacity .4s var(--mg-ease);
}
.mg-status-k { font-size: max(10.5px, calc(var(--u) * 11)); font-weight: 700; letter-spacing: .14em; color: var(--mg-act); }
.mg-status-v { font-size: max(11px, calc(var(--u) * 12.5)); color: var(--mg-ink); }
.mg.is-resolve[data-outcome="secured"] .mg-status-k { color: var(--mg-secured); }
.mg.is-resolve[data-outcome="leakage"] .mg-status-k { color: var(--mg-leak); }
.mg.has-focus .mg-status { opacity: 1; }
.mg.is-release .mg-status { opacity: 0; }

/* Layer 4: evidence (label / value / status) */
.mg-evidence { position: absolute; inset: 0; pointer-events: none; }
.mg-evidence::before {
  content: ""; position: absolute; left: calc(var(--u) * 360); top: calc(var(--u) * 100); width: calc(var(--u) * 240); height: calc(var(--u) * 320);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mg-act) 11%, transparent), transparent);
  opacity: 0; transition: opacity .8s var(--mg-ease);
}
.mg.has-focus:not(.is-release) .mg-evidence::before { opacity: 1; }
.mg-frag {
  --c: var(--mg-ink); --sc: var(--c);
  position: absolute; width: calc(var(--u) * 172); min-width: 140px;
  display: grid; grid-template-columns: 14px 1fr; column-gap: 8px; row-gap: 2px;
  padding: 4px 0 4px 10px; border-left: 2px solid var(--sc);
  transform: translate(0, -50%) translate(calc(var(--dx, 0) * var(--u) * 12), calc(var(--dy, 0) * var(--u) * 12));
  opacity: 0; transition: border-color .45s var(--mg-ease);
}
.mg-frag[data-state="verified"] { --sc: var(--mg-verified); }
.mg-frag[data-state="variance"] { --sc: var(--mg-variance); }
.mg-frag[data-state="missing"] { --sc: var(--mg-leak); border-left-style: dashed; }
.mg-frag[data-state="secured"] { --sc: var(--mg-secured); }
.mg-frag[data-state="arriving"] { --sc: color-mix(in srgb, var(--c) 40%, transparent); }
.mg-frag-mark { grid-row: 1 / span 3; width: 14px; height: 14px; margin-top: 1px; overflow: visible; }
.mg-frag-mark .sm { display: none; fill: none; stroke: var(--sc); stroke-width: 1.5; stroke-linecap: round; }
.mg-frag[data-state="arriving"] .sm-open, .mg-frag[data-state="observed"] .sm-open { display: block; }
.mg-frag[data-state="verified"] .sm-closed { display: block; fill: var(--sc); }
.mg-frag[data-state="variance"] .sm-split { display: block; }
.mg-frag[data-state="missing"] .sm-broken { display: block; }
.mg-frag[data-state="secured"] .sm-loop { display: block; }
.mg-frag-k { font-size: max(10px, calc(var(--u) * 10.5)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.mg-frag-v { font-size: max(12.5px, calc(var(--u) * 13.5)); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--mg-ink); line-height: 1.25; }
.mg-frag-s { font-size: max(11px, calc(var(--u) * 11.5)); color: var(--sc); line-height: 1.3; transition: color .45s var(--mg-ease); }
.mg-frag[data-state="arriving"] .mg-frag-s, .mg-frag[data-state="observed"] .mg-frag-s { color: var(--mg-muted); }
.mg-frag-k, .mg-frag-v, .mg-frag-s { grid-column: 2; background: var(--bg-main); justify-self: start; padding-right: 3px; }
/* entrance forms by stage */
.mg-frag.is-in { opacity: 1; transform: translate(0, -50%); transition: transform 1s var(--mg-ease-in), opacity .5s var(--mg-ease), border-color .45s var(--mg-ease); }
.mg-frag[data-entry="unfold"] { clip-path: inset(0 0 100% 0); }
.mg-frag[data-entry="unfold"].is-in { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--mg-ease-in), opacity .4s, transform 1s var(--mg-ease-in), border-color .45s; }
.mg-frag[data-entry="fade"] { transform: translate(0, -50%); }
.mg-frag[data-entry="fade"].is-in { transition: opacity .9s var(--mg-ease) .15s, border-color .45s; }
.mg.is-release .mg-frag { opacity: 0; transform: translate(0, -50%); transition: opacity .5s var(--mg-ease) var(--rdelay, 0ms); }
.mg.is-rest .mg-frag { opacity: 0; transition: none; }

/* Layer 5: outcome instruments */
.mg-outcomes { position: absolute; inset: 0; pointer-events: none; }
.mg-out { position: absolute; transform: translateY(-50%); display: flex; gap: calc(var(--u) * 12); width: calc(var(--u) * 236); padding: 10px 10px 10px 8px; border-radius: 0.125rem; transition: opacity .6s var(--mg-ease), background .6s var(--mg-ease); }
.mg-out-sym { flex: none; width: 28px; height: 28px; margin-top: 1px; overflow: visible; }
.mg-ring path { fill: none; stroke: color-mix(in srgb, var(--mg-secured) 35%, transparent); stroke-width: 2; stroke-linecap: round; transition: stroke .6s var(--mg-ease); }
.mg-ring path.on { stroke: var(--mg-secured); }
.mg-out-leakage .mg-out-sym path { fill: none; stroke: color-mix(in srgb, var(--mg-ink) 45%, transparent); stroke-width: 1.6; stroke-linecap: round; }
.mg-out-leakage .mg-line-gap { stroke: transparent !important; }
.mg-out-leakage .mg-line-tick { stroke-width: 1.2; transition: stroke .5s var(--mg-ease); }
.mg[data-latest="leakage"].has-latest .mg-out-leakage .mg-line-tick { stroke: var(--mg-leak); }
.mg-out-label { font-size: max(11px, calc(var(--u) * 11.5)); font-weight: 700; letter-spacing: .12em; opacity: .72; }
.mg-out-secured .mg-out-label { color: var(--mg-secured); }
.mg-out-sub { margin-top: 3px; font-size: max(11px, calc(var(--u) * 12)); color: var(--mg-muted); line-height: 1.35; }
.mg-out-total { margin-top: calc(var(--u) * 8); font-size: max(17px, calc(var(--u) * 22)); font-weight: 600; white-space: nowrap; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mg-out-finding { margin-top: 4px; min-height: 1.4em; font-size: max(11px, calc(var(--u) * 12)); font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .5s var(--mg-ease); }
.mg-out-secured .mg-out-finding { color: var(--mg-secured); }
.mg-out-leakage .mg-out-finding { color: var(--mg-leak); }
.mg.has-latest .mg-out-finding:not(:empty) { opacity: 1; }
.mg.out-lit[data-outcome="secured"] .mg-out-secured { background: color-mix(in srgb, var(--mg-secured) 14%, transparent); }
.mg.out-lit[data-outcome="leakage"] .mg-out-leakage { background: color-mix(in srgb, var(--mg-leak) 10%, transparent); }
.mg.is-resolve .mg-out-label { opacity: 1; }
.mg.is-resolve[data-outcome="secured"] .mg-out-leakage, .mg.is-resolve[data-outcome="leakage"] .mg-out-secured { opacity: .6; }

.mg-caption { position: absolute; left: 24px; bottom: 14px; margin: 0; font-size: 11px; color: var(--mg-muted); }
.mg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Reduced motion: resolved static frame, colour retained, 120ms crossfades only */
@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before { animation: none !important; transition: opacity .12s linear !important; }
  .mg .mg-frag { clip-path: none !important; }
  .mg .mg-live-mark b { display: none; }
}

/* Tablet */
@media (max-width: 1023px) {
  
}

/* Mobile: vertical editorial instrument */
@media (max-width: 767px) {
  .mg { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 14px 0 16px; --u: 1px; }
  .mg-field { display: none; }
  .mg-live { position: static; transform: none; align-self: flex-start; padding: 0 18px 12px; order: -1; }
  .mg-anchors { position: static; display: flex; gap: 6px; overflow-x: auto; width: 100%; padding: 0 14px 6px; scroll-snap-type: x mandatory; pointer-events: auto; }
  .mg-anchor, .mg-anchor.mg-edge { display: flex; position: static; transform: none; flex: none; max-width: none; padding: 10px 12px; border: 1px solid var(--mg-line); border-radius: 0.125rem; opacity: .75; scroll-snap-align: start; align-items: center; }
  .mg-anchor.is-active { border-color: var(--c); }
  .mg-anchor-ctx { display: none; }
  .mg-anchor-label { font-size: 12.5px; white-space: nowrap; }
  .mg-mark { width: 14px; height: 14px; }
  .mg-core { position: relative; left: auto !important; top: auto !important; width: 230px; margin: 30px auto 6px; order: 2; }
  .mg-evidence { position: static; display: grid; gap: 10px; width: 100%; padding: 12px 22px 0; order: 1; }
  .mg-evidence::before { display: none; }
  .mg-frag, .mg-frag.is-in { position: static; transform: none !important; width: auto; clip-path: none !important; }
  .mg-status { position: static; transform: none; width: auto; padding: 4px 20px 0; order: 3; }
  .mg-outcomes { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; padding: 16px 14px 22px; order: 4; }
  .mg-out { position: static; transform: none; width: auto; flex-direction: column; gap: 8px; }
  .mg-out-total { font-size: 18px; white-space: normal; }
  .mg:not([data-latest="secured"]) .mg-out-secured .mg-out-finding,
  .mg:not([data-latest="leakage"]) .mg-out-leakage .mg-out-finding { display: none; }
  .mg-caption { position: static; padding: 0 18px; align-self: flex-start; order: 5; }
}
.mg .mg-owl { background-color: #FF0000; }

/* Decluttered layout: list | evidence | core | outcomes */
@media (min-width: 768px) {
  .mg-anchor { max-width: calc(var(--u) * 240); min-height: 0; padding: 4px 8px 4px 0; opacity: .6 !important; transform: translate(0, -50%); }
  .mg-anchor.is-active, .mg-anchor:hover { opacity: 1 !important; }
  .mg-anchor-txt { background: none; }
  .mg-anchor-label { font-size: max(11.5px, calc(var(--u) * 12.5)); }
  .mg-anchors::before { content: none; position: absolute; left: calc(var(--u) * 34); top: calc(var(--u) * 34); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: var(--mg-muted); }
  .mg-anchors::after { content: none; position: absolute; left: calc(var(--u) * 290); top: calc(var(--u) * 40); bottom: calc(var(--u) * 40); border-left: 1px solid var(--mg-line-soft); }
  .mg-evidence::before { left: calc(var(--u) * 290); top: calc(var(--u) * 90); width: calc(var(--u) * 230); height: calc(var(--u) * 340); }
  .mg-frag { width: calc(var(--u) * 200); }
  .mg-frag-k, .mg-frag-v, .mg-frag-s { background: none; }
  .mg-status { top: calc(var(--u) * 372) !important; }
}

/* Connectors: soft flowing lines that carry the story between columns */
.mg-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mg-link { --lc: var(--mg-muted); opacity: 0; transition: opacity .6s var(--mg-ease); }
.mg-link path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mg-link-base { stroke: color-mix(in srgb, var(--lc) 45%, transparent); stroke-width: 1.2; stroke-dasharray: 1 5; animation: mg-flow 1.6s linear infinite; }
.mg-link-pulse { stroke: var(--lc); stroke-width: 2.4; stroke-dasharray: .08 1.2; stroke-dashoffset: 1.08; animation: mg-comet 2.2s cubic-bezier(.45,0,.3,1) var(--ld, 0s) infinite; }
@keyframes mg-flow { to { stroke-dashoffset: -12; } }
@keyframes mg-comet { to { stroke-dashoffset: -.2; } }
.mg.is-observe .mg-link-a, .mg.is-connect .mg-link-a, .mg.is-test .mg-link-a, .mg.is-resolve .mg-link-a { opacity: 1; }
.mg.is-connect .mg-link-b, .mg.is-test .mg-link-b, .mg.is-resolve .mg-link-b { opacity: 1; }
.mg.is-resolve .mg-link-c { opacity: 1; }
.mg.is-resolve .mg-link-a, .mg.is-resolve .mg-link-b { opacity: .45; }
.mg[data-outcome="secured"] .mg-link-c { --lc: var(--mg-secured); }
.mg[data-outcome="leakage"] .mg-link-c { --lc: var(--mg-leak); }
.mg.is-release .mg-link { opacity: 0; }
/* softer, more editorial feel */
.mg-frag { width: calc(var(--u) * 200) !important; border-left-width: 1.5px; border-radius: 0.125rem; }
.mg-frag-k, .mg-status-k, .mg-live-k, .mg-out-label { letter-spacing: .06em; }
.mg-anchor.is-active .mg-anchor-label { box-shadow: none; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 767px) { .mg-links { display: none; } }
@media (prefers-reduced-motion: reduce) { .mg-link-pulse { display: none; } }

/* Sequenced connections: line draws, then the item it reaches takes its colour */
.mg-link-base { stroke: color-mix(in srgb, var(--lc) 70%, transparent); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: none; transition: stroke-dashoffset .52s cubic-bezier(.5,0,.3,1); }
.mg-link.is-on .mg-link-base { stroke-dashoffset: 0; }
.mg-link-pulse { visibility: hidden; }
.mg-link.is-on .mg-link-pulse { visibility: visible; }
.mg-link-a, .mg-link-b, .mg-link-c { opacity: 1 !important; }
.mg.is-release .mg-link, .mg.is-rest .mg-link { opacity: 0 !important; }
.mg.is-resolve .mg-link-a, .mg.is-resolve .mg-link-b { opacity: .55 !important; }
.mg-frag { transition: background-color .6s var(--mg-ease), border-color .45s var(--mg-ease); }
.mg-frag.is-lit { background-color: color-mix(in srgb, var(--sc) 13%, transparent); }
.mg-frag.is-in { transition: transform 1s var(--mg-ease-in), opacity .5s var(--mg-ease), border-color .45s var(--mg-ease), background-color .6s var(--mg-ease); }
.mg-aperture { transition: transform 1.2s var(--mg-ease), fill .6s var(--mg-ease); }
.mg.core-lit .mg-aperture { fill: color-mix(in srgb, var(--mg-act-end) 8%, transparent); }
.mg.out-lit[data-outcome="secured"] .mg-aperture { fill: color-mix(in srgb, var(--mg-secured) 10%, transparent); }
.mg.out-lit[data-outcome="leakage"] .mg-aperture { fill: color-mix(in srgb, var(--mg-leak) 7%, transparent); }
/* Sit on the page itself, part of the opening section */
.mg { background: transparent; border-color: transparent; }
.mg-void, .mg .mg-aperture:not([style]) { }
.mg-aperture { fill: transparent; }
.mg-anchor-txt, .mg-frag-k, .mg-frag-v, .mg-frag-s { background: none !important; }

/* The stage where the relationship holds or breaks takes the result colour */
.mg-stage text, .mg-stage-dot { transition: fill .5s var(--mg-ease), stroke .5s var(--mg-ease), opacity .5s; }
.mg.out-lit[data-outcome="leakage"] .mg-stage.is-issue text { fill: var(--mg-leak); opacity: 1; }
.mg.out-lit[data-outcome="leakage"] .mg-stage.is-issue .mg-stage-dot { fill: var(--mg-leak); stroke: var(--mg-leak); }
.mg.out-lit[data-outcome="secured"] .mg-stage.is-issue text { fill: var(--mg-secured); opacity: 1; }
.mg.out-lit[data-outcome="secured"] .mg-stage.is-issue .mg-stage-dot { fill: var(--mg-secured); stroke: var(--mg-secured); }

/* Circle at rest is neutral; colour appears only when a stage is in play */
.mg .mg-seg { stroke: var(--mg-muted) !important; opacity: .18; }
.mg .mg-stage text { fill: var(--mg-muted); opacity: .75; }
.mg .mg-stage-dot { stroke: var(--mg-muted); stroke-opacity: .7; fill: var(--bg-main); }
.mg.is-connect .mg-stage.is-rel text, .mg.is-test .mg-stage.is-rel text, .mg.is-resolve .mg-stage.is-rel text { fill: var(--c); opacity: 1; }
.mg.is-connect .mg-stage.is-rel .mg-stage-dot { stroke: var(--c); stroke-opacity: 1; }
.mg.is-test .mg-stage.is-rel .mg-stage-dot, .mg.is-resolve .mg-stage.is-rel .mg-stage-dot { fill: var(--c); stroke: var(--c); stroke-opacity: 1; }
.mg.out-lit[data-outcome="leakage"] .mg-stage.is-issue text { fill: var(--mg-leak); }
.mg.out-lit[data-outcome="leakage"] .mg-stage.is-issue .mg-stage-dot { fill: var(--mg-leak); stroke: var(--mg-leak); }
.mg.out-lit[data-outcome="secured"] .mg-stage.is-issue text { fill: var(--mg-secured); }
.mg.out-lit[data-outcome="secured"] .mg-stage.is-issue .mg-stage-dot { fill: var(--mg-secured); stroke: var(--mg-secured); }
.mg .mg-aperture { stroke: var(--mg-muted); stroke-opacity: .5; }

/* Owl: centred on the visible shape */
.mg .mg-owl { left: 50%; top: 50%; transform: translate(-30.9%, -42.6%); transition: background-color .8s var(--mg-ease); }

/* Flow colour consistency: each box fills with the same stage colour as the line touching it */
.mg-frag.is-lit { background-color: color-mix(in srgb, var(--c) 13%, transparent); }

/* Owl: rests near-black, turns green (secured) or red (leakage) once processed, before the result line fires */
.mg .mg-owl { background-color: var(--mg-ink); }
.mg.owl-lit[data-outcome="secured"] .mg-owl { background-color: var(--mg-secured); }
.mg.owl-lit[data-outcome="leakage"] .mg-owl { background-color: var(--mg-leak); }

/* Tighter first screen: headline, graphic and awards ribbon fit together above the fold */
@media (min-width: 768px) {
  .hero-section { padding-top: 1rem; }
  .hero-section .hero-header-wrap { margin-bottom: 0; }
  .mg { margin: -1.75rem auto -2rem; }
}

/* Use-case ladder: active item centred and slightly larger; neighbours fold back above/below */
.mg-link.no-anim .mg-link-base { transition: none !important; }
@media (min-width: 768px) {
  .mg-anchors { perspective: 700px; perspective-origin: 15% 50%; }
  .mg .mg-anchor {
    transform-origin: 0 50%;
    transform: translate(0, -50%) rotateX(calc(var(--d, 0) * -16deg)) scale(calc(1 - var(--ad, 0) * 0.07));
    opacity: calc(1 - var(--ad, 0) * 0.2) !important;
    transition: top .7s var(--mg-ease), transform .7s var(--mg-ease), opacity .7s var(--mg-ease);
  }
  .mg .mg-anchor[style*="--ad: 4"] { opacity: 0 !important; }
  .mg .mg-anchor.is-wrap { transition: opacity .35s var(--mg-ease); }
  .mg .mg-anchor.is-active { transform: translate(0, -50%) scale(1.14); opacity: 1 !important; }
  .mg .mg-anchor:hover { opacity: 1 !important; }
}
.mg .mg-anchor.is-active .mg-anchor-label { text-decoration: none; box-shadow: none; }

/* Liquid glass: frosted, refractive surfaces with bright rim highlights */
.mg { --glass-bg: rgba(255,255,255,.42); --glass-rim: rgba(255,255,255,.85); --glass-edge: rgba(22,28,22,.08); --glass-shadow: none; }
[data-theme="dark"] .mg, .dark .mg { --glass-bg: rgba(255,255,255,.06); --glass-rim: rgba(255,255,255,.22); --glass-edge: rgba(255,255,255,.08); --glass-shadow: none; }
.mg-frag, .mg-out, .mg .mg-anchor.is-active .mg-anchor-txt {
  background-image: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 45%, rgba(255,255,255,.18));
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-radius: 0.125rem;
  box-shadow: inset 0 1px 0 var(--glass-rim), inset 0 -1px 0 var(--glass-edge), inset 1px 0 0 rgba(255,255,255,.35);
}
.mg-frag { padding: 8px 12px 8px 14px; border-left-width: 3px; border-radius: 0.125rem; }
.mg-frag.is-lit { background-color: color-mix(in srgb, var(--c) 16%, var(--glass-bg)); }
.mg .mg-anchor.is-active .mg-anchor-txt { position: static; padding: 6px 12px; border-radius: 0.125rem; background-color: var(--glass-bg) !important; }
.mg-out { padding: 12px 14px; }
.mg.out-lit[data-outcome="secured"] .mg-out-secured { background-color: color-mix(in srgb, var(--mg-secured) 16%, var(--glass-bg)); }
.mg.out-lit[data-outcome="leakage"] .mg-out-leakage { background-color: color-mix(in srgb, var(--mg-leak) 12%, var(--glass-bg)); }
/* Circle as a glass lens */
.mg-core::before { content: ""; position: absolute; inset: 21%; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75), rgba(255,255,255,.12) 42%, rgba(255,255,255,.04) 70%);
  -webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.9), inset 0 -6px 14px rgba(22,28,22,.06); pointer-events: none; }
.mg-core svg, .mg-core .mg-owl { position: absolute; z-index: 1; }
.mg-core svg { inset: 0; }
.mg-aperture { fill-opacity: .35; }

/* Results boxes size to their text; leakage label red */
.mg-out { width: max-content; min-width: calc(var(--u) * 236); max-width: calc(var(--u) * 300); box-sizing: border-box; padding-right: 14px; }
.mg-out-leakage .mg-out-label { color: var(--mg-leak); opacity: 1; }
.mg-out-secured .mg-out-label { opacity: 1; }

/* Fixed-size result boxes (text wraps instead of resizing) + ticker icons */
.mg-out { width: calc(var(--u) * 262) !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; }
.mg-out-body { min-width: 0; flex: 1; }
.mg-out-sub, .mg-out-finding { white-space: normal; overflow-wrap: anywhere; }
.mg-out-sub { min-height: 2.7em; }
.mg-out-finding { min-height: 1.35em; }
.mg-out-total { font-size: max(16px, calc(var(--u) * 20)); }
.mg-out-sym .mg-tk-line, .mg-out-sym .mg-tk-head { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mg-out-secured .mg-out-sym path { stroke: var(--mg-secured) !important; }
.mg-out-leakage .mg-out-sym path { stroke: var(--mg-leak) !important; }
.mg-status { width: max-content !important; max-width: calc(var(--u) * 420) !important; } .mg-status-k { letter-spacing: .1em; }
/* Status under circle: stacked, kept within the circle column */
.mg-status { width: calc(var(--u) * 240) !important; max-width: calc(var(--u) * 240) !important; }
.mg-status-k { white-space: pre-line; line-height: 1.4; }
.mg-status-v { text-wrap: balance; }
@media (max-width: 767px) { .mg-status { width: auto !important; max-width: none !important; } }

/* Governance signal field: decorative background behind the hero animation */
.mg { position: relative; isolation: isolate; }
.mg-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; }
.mg-field::before, .mg-field::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mg-field::before { /* soft halo behind the engine, bright clean centre */
  background:
    radial-gradient(circle at 57.5% 50%, rgba(255,255,255,.95) 0 9%, transparent 22%),
    radial-gradient(ellipse 34% 62% at 57.5% 50%, rgba(100,116,139,.09), rgba(100,116,139,.04) 55%, transparent 75%);
  animation: mg-field-pulse 14s ease-in-out infinite;
}
.mg-field::after { /* restrained outcome glows */
  background:
    radial-gradient(ellipse 20% 30% at 88% 30%, rgba(16,185,129,.09), transparent 70%),
    radial-gradient(ellipse 20% 30% at 88% 76%, rgba(255,46,68,.08), rgba(255, 0, 0,.03) 45%, transparent 72%);
}
.mg-field svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-f-grid { opacity: .06; }
.mg-f-rings { opacity: .09; }
.mg-f-lines { opacity: .08; }
.mg-f-dots { opacity: .1; }
[data-theme="dark"] .mg-field::before, .dark .mg-field::before {
  background: radial-gradient(ellipse 34% 62% at 57.5% 50%, rgba(148,163,184,.08), transparent 75%);
}
[data-theme="dark"] .mg-f-grid path { stroke: #8F948C; }
@keyframes mg-field-pulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@media (max-width: 767px) {
  .mg-f-grid, .mg-f-lines, .mg-f-dots { display: none; }
  .mg-field::after { display: none; }
  .mg-field::before { background: radial-gradient(circle at 50% 38%, rgba(100,116,139,.07), transparent 60%); }
}
@media (prefers-reduced-motion: reduce) { .mg-field::before { animation: none; } }

/* ---- Paper record tiles (inspired by the commercial-record forms pack) ---- */
.mg { --mg-paper: #F5F5ED; --mg-paper-2: #ECE9E0; --mg-paper-edge: #D3CFC2; --mg-binding: #373D3A; }
[data-theme="dark"] .mg { --mg-paper: #1E2629; --mg-paper-2: #182024; --mg-paper-edge: #3A464C; --mg-binding: #8C978F; }
.mg .mg-frag {
  border: 1px solid var(--mg-paper-edge) !important; border-radius: 0.125rem !important;
  background: var(--mg-paper) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 12px 16px 14px 18px !important; overflow: visible;
}
.mg .mg-frag.is-lit { background: var(--mg-paper) !important; border-color: color-mix(in srgb, var(--sc) 55%, var(--mg-paper-edge)) !important; }
.mg .mg-frag-k { color: #69745F; font-weight: 500; letter-spacing: .09em; }
[data-theme="dark"] .mg .mg-frag-k { color: #A9B3A2; }
.mg .mg-frag-v { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: max(15px, calc(var(--u) * 17)); letter-spacing: -.01em; margin: 3px 0 2px; }
.mg .mg-frag-s { font-size: max(11px, calc(var(--u) * 11.5)); }
.mg .mg-frag-mark { display: none; }
.mg .mg-frag-k, .mg .mg-frag-v, .mg .mg-frag-s { grid-column: 1 / -1; }
/* Record 1: bound folio (graphite binding down the left edge) */
.mg .mg-frag[data-i="0"] { box-shadow: inset 6px 0 0 var(--mg-binding) !important; padding-left: 22px !important; }
.mg .mg-frag[data-i="0"]::after { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; border-left: 1px dotted var(--mg-paper-edge); }
/* Record 2: invoice (folded corner, perforated foot) */
.mg .mg-frag[data-i="1"] { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) !important; padding-bottom: 18px !important; }
.mg .mg-frag[data-i="1"]::before { content: ""; position: absolute; right: -1px; top: -1px; width: 16px; height: 16px; background: linear-gradient(225deg, transparent 50%, var(--mg-paper-2) 50%); }
.mg .mg-frag[data-i="1"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; border-top: 1px dotted var(--mg-paper-edge); }
/* Record 3: calendar leaf (binding rings along the top) */
.mg .mg-frag[data-i="2"] { background: linear-gradient(var(--mg-paper-2) 0 7px, var(--mg-paper) 7px) !important; padding-top: 16px !important; }
.mg .mg-frag[data-i="2"]::before { content: ""; position: absolute; top: -5px; left: 22%; right: 22%; height: 12px;
  background: radial-gradient(circle, var(--mg-binding) 0 2.6px, transparent 3px) left/12px 12px no-repeat, radial-gradient(circle, var(--mg-binding) 0 2.6px, transparent 3px) right/12px 12px no-repeat; }
/* Missing record: dashed paper outline, no fill */
.mg .mg-frag[data-state="missing"] { border-style: dashed !important; background: transparent !important; box-shadow: none !important; }
/* Engine: no stage words around the ring */
.mg .mg-stage text { display: none; }

/* ---- Engine ring: grey until resolved, then drawn from the left both ways in green or red ---- */
.mg .mg-segs, .mg .mg-chord, .mg .mg-break, .mg .mg-stage { display: none !important; }
.mg .mg-aperture { stroke: #8F948C !important; stroke-opacity: .7 !important; }
.mg-ring-arc { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; stroke: transparent; transition: stroke-dashoffset 1.4s cubic-bezier(.5,0,.3,1); }
.mg.owl-lit .mg-ring-arc { stroke-dashoffset: 0; }
.mg[data-outcome="secured"] .mg-ring-arc { stroke: var(--mg-secured); }
.mg[data-outcome="leakage"] .mg-ring-arc { stroke: var(--mg-leak); }
.mg.is-release .mg-ring-arc, .mg.is-rest .mg-ring-arc { transition: none; stroke-dashoffset: 1; }
.mg-port { fill: #F5F5ED; stroke: #8F948C; stroke-width: 1.4; transition: fill .5s, stroke .5s; }
[data-theme="dark"] .mg-port { fill: var(--bg-main); }
.mg.out-lit[data-outcome="secured"] .mg-port-out { fill: var(--mg-secured); stroke: var(--mg-secured); }
.mg.out-lit[data-outcome="leakage"] .mg-port-out { fill: var(--mg-leak); stroke: var(--mg-leak); }
/* Links: use case -> records in ink; records -> engine green, issues turn orange/red when resolved */
.mg-link-b .mg-link-base, .mg-link-b .mg-link-pulse { transition: stroke .6s var(--mg-ease), stroke-dashoffset .52s cubic-bezier(.5,0,.3,1); }
.mg.is-resolve .mg-link-b { opacity: .9 !important; }
/* Use cases: no moving icons; active bubble pushed right */
.mg .mg-mark { display: none !important; }
@media (min-width: 768px) { .mg .mg-anchor.is-active { transform: translate(28px, -50%) scale(1.14); } }
/* Tiles: site palette (white / slate) instead of warm paper */
.mg { --mg-paper: #F5F5ED; --mg-paper-2: #F1F5F9; --mg-paper-edge: #CBD5E1; --mg-binding: #161C16; }
[data-theme="dark"] .mg { --mg-paper: #161C16; --mg-paper-2: #161C16; --mg-paper-edge: #232B22; --mg-binding: #8F948C; }
.mg .mg-frag-k { color: #8F948C; }
[data-theme="dark"] .mg .mg-frag-k { color: #8F948C; }

/* Tiles stay neutral (ink) until the engine resolves, then take their state colour */
.mg:not(.owl-lit) .mg-frag-s, .mg:not(.owl-lit) .mg-frag-k { color: var(--mg-ink) !important; }
.mg:not(.owl-lit) .mg .mg-frag, .mg:not(.owl-lit) .mg-frag, .mg:not(.owl-lit) .mg-frag.is-lit { border-color: var(--mg-ink) !important; }
.mg-frag, .mg-frag-s, .mg-frag-k { transition: color .6s var(--mg-ease), border-color .6s var(--mg-ease), opacity .5s, transform 1s var(--mg-ease-in) !important; }
/* Record -> engine lines: new colour draws over the green, fully replacing it */
.mg-link-over { fill: none; stroke: var(--oc, transparent); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mg.owl-lit .mg-link-over { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.5,0,.3,1); }
.mg.owl-lit .mg-link-b .mg-link-pulse { visibility: hidden !important; }
.mg-link.no-anim .mg-link-over, .mg.is-release .mg-link-over, .mg.is-rest .mg-link-over { transition: none !important; stroke-dashoffset: 1; }
/* Active use case stays in place (no rightward push over the lines) */
@media (min-width: 768px) { .mg .mg-anchor.is-active { transform: translate(0, -50%) scale(1.14); } }
/* Fixed tile text boxes so changing wording never resizes tiles or shifts the page */
.mg .mg-frag-k, .mg .mg-frag-v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg .mg-frag-s { height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mg .mg-out-sub { height: 2.7em; overflow: hidden; }
.mg .mg-out-finding { height: 1.35em; overflow: hidden; }
.mg .mg-status-k, .mg .mg-status-v { overflow: hidden; }
/* Active use case: no scale, width capped so it always ends before the connector lines */
@media (min-width: 768px) {
  .mg .mg-anchor.is-active { transform: translate(0, -50%) !important; }
  .mg .mg-anchor.is-active .mg-anchor-txt { display: inline-block; max-width: calc(var(--u) * 250); white-space: normal; }
  .mg .mg-anchor { max-width: calc(var(--u) * 262) !important; }
  /* Evidence tiles: identical fixed size so spacing is even and nothing resizes */
  .mg .mg-frag { height: calc(var(--u) * 92); box-sizing: border-box; overflow: hidden; }
}
.mg .mg-frag-v { line-height: 1.4 !important; padding-bottom: 2px; }
@media (min-width: 768px) { .mg .mg-frag { display: flex !important; flex-direction: column; justify-content: flex-start; } .mg .mg-frag-mark { display: none; } .mg .mg-frag > * { flex: none; } }
.mg .mg-frag-k { letter-spacing: .05em !important; }
.mg .mg-frag[data-i="1"]::before { background: linear-gradient(225deg, transparent 50%, var(--mg-ink) 50%) !important; }
@media (min-width: 768px) { .mg .mg-frag { height: calc(var(--u) * 104) !important; } }

/* One typeface throughout the graphic (site sans) */
#mg-hero, #mg-hero *, #mg-hero svg text { font-family: var(--font-sans) !important; }
#mg-hero .mg-frag-v { font-size: max(14px, calc(var(--u) * 15)) !important; letter-spacing: -.015em; }