/* Hero with the network artwork. Built from the Cloud Migrations page, 2 October 2026.
   Off-palette values from the source are mapped to palette colours and theme tokens. */
/* .sec.mh, not .mh: the shared .sec padding loads later and was replacing this,
   which left the eyebrow pressed against the header. */
.sec.mh{padding:calc(var(--header-offset,84px) + clamp(36px,4.6vw,72px)) 0 clamp(70px,8vw,110px)}
.mh-grid{align-items:center;display:grid;gap:clamp(32px,4vw,64px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);position:relative;z-index:1}
.mh h1{color:#fff;margin:22px 0 0}
/* Solid Neon Aqua, 5.1 to 5.9:1 across the hero's gradient. The source used an
   off-palette light lilac gradient; Lilac to Neon Aqua, the approved pairing, measures
   2.8:1 at its lilac end on this surface, under the 3:1 floor for large text. */
.mh h1 em{color:var(--neon);display:block;font-style:normal}
.mh .lede{color:var(--dk-txt);margin-top:22px;max-width:46ch}
.mh-act{align-items:center;display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:34px}
/* Scoped to the hero, because theme.css loads after this file and its .tlink
   colour (Mid Blue, 1.5:1 here) otherwise wins at equal specificity. */
.mh .tlink-dk{color:#fff}
.mh .tlink-dk:hover{color:var(--corn-lt)}
.mh-art{aspect-ratio:6/5;position:relative;width:100%}
.mh-net{height:100%;inset:0;position:absolute;width:100%;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%)}
@media (max-width:960px){.mh-grid{grid-template-columns:1fr}.mh-art{max-width:560px;margin-inline:auto}}
.mh h1 .h1-tag{ display:block; margin-top:.35em; font-size:.44em; line-height:1.2; letter-spacing:-.01em;
  font-weight:700; color:rgba(255,255,255,.9); text-wrap:balance; }
@media (max-width:420px){.mh-act .btn{ padding-left:18px; padding-right:18px; font-size:13.5px !important; white-space:nowrap; }}

.mh .tlink{display:inline-flex;align-items:center;min-height:44px}

/* The headline's size, held against the shared AWS stylesheet. That sheet sets
   h1{font-size:80px} and, below 1234px, h1{font-size:47.06px !important}, which
   no selector of ours can outrank without !important (see the collision list in
   epiusecloud-portal.md). Scoped to this hero's own h1 and nothing else. Sizes
   follow the page's design: 52px, 42px at tablet, 34px on phones. */
.mh h1{font-size:52px !important;line-height:calc(1em + 13px) !important}
@media (max-width:1024px){.mh h1{font-size:42px !important}}
@media (max-width:600px){.mh h1{font-size:34px !important}}

/* Tiles artwork: the mask is wider than the network's, and the flow lines take Neon Aqua. */
.mh-net.mh-tiles{-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 60%,transparent 100%)}
.mh-net.mh-tiles path{stroke:var(--neon)}

/* Pilot artwork (Proof of Concept): a faint landscape of systems; three lift into a dashed pilot
   frame, a scan passes over them, and a check closes it. One 10 second loop. Reduced motion shows
   the end state: the three systems in the frame, checked. */
.mh-pilot{-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,transparent 100%)}
.mh-pilot .pl-b{fill:rgba(255,255,255,.08);stroke:rgba(146,211,230,.55);stroke-width:1}
.mh-pilot .pl-k{stroke:rgba(146,211,230,.25);stroke-dasharray:4 4}
.mh-pilot .pl-frame{fill:rgba(97,212,195,.06);stroke:var(--neon);stroke-width:2;stroke-dasharray:8 7}
.mh-pilot .pl-arc{fill:none;stroke:var(--corn);stroke-width:1.4;stroke-dasharray:5 6;opacity:.0}
.mh-pilot .pl-mv{fill:var(--corn);stroke:#fff;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:plMove 10s var(--ease) infinite}
.mh-pilot .m2{animation-delay:.25s}.mh-pilot .m3{animation-delay:.5s}
.mh-pilot .pl-arc{animation:plArc 10s linear infinite}
.mh-pilot .pl-scan{opacity:0;animation:plScan 10s linear infinite}
.mh-pilot .pl-row{fill:rgba(255,255,255,.75);opacity:0;animation:plRow 10s linear infinite}
.mh-pilot .r2{animation-delay:.2s}.mh-pilot .r3{animation-delay:.4s}
.mh-pilot .pl-ok circle{fill:var(--neon)}
.mh-pilot .pl-ok path{fill:none;stroke:var(--deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mh-pilot .pl-ok{transform-box:fill-box;transform-origin:center;opacity:0;animation:plOk 10s var(--ease) infinite}
@keyframes plMove{0%,10%{transform:none;opacity:0;fill:var(--corn)}12%{opacity:1}36%,60%{transform:translate(var(--dx),var(--dy)) scale(1.15);opacity:1;fill:var(--corn)}66%,88%{transform:translate(var(--dx),var(--dy)) scale(1.15);opacity:1;fill:var(--neon)}96%,100%{transform:translate(var(--dx),var(--dy)) scale(1.15);opacity:0}}
@keyframes plArc{0%,12%{opacity:0;stroke-dashoffset:0}18%{opacity:.8}36%{opacity:.8;stroke-dashoffset:-44}44%,100%{opacity:0}}
@keyframes plScan{0%,38%{opacity:0;transform:translateY(0)}40%{opacity:1}60%{opacity:1;transform:translateY(158px)}62%,100%{opacity:0;transform:translateY(158px)}}
@keyframes plRow{0%,62%{opacity:0}68%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes plOk{0%,62%{opacity:0;transform:scale(.4)}68%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mh-pilot .pl-mv{animation:none;transform:translate(var(--dx),var(--dy)) scale(1.15);fill:var(--neon)}
  .mh-pilot .pl-arc,.mh-pilot .pl-scan{animation:none;opacity:0}
  .mh-pilot .pl-row,.mh-pilot .pl-ok{animation:none;opacity:1;transform:none}
}

/* Sonar artwork (W.H.A.L.E. Assessment, from Marketing's page): the beam sways slowly and the found
   points pulse as it passes. Reduced motion holds it still. */
.mh-sonar{-webkit-mask-image:radial-gradient(ellipse 75% 75% at 35% 65%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 75% 75% at 35% 65%,#000 55%,transparent 100%)}
.mh-sonar .sn-beam{transform-box:view-box;transform-origin:70px 450px;animation:snBeam 7s ease-in-out infinite alternate}
.mh-sonar .sn-hit{transform-box:fill-box;transform-origin:center;animation:snHit 3.5s ease-in-out infinite}
@keyframes snBeam{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
@keyframes snHit{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
/* Optional fact cards over the artwork (from the same page). */
.mh-facts{position:absolute;right:2%;top:8%;z-index:1;width:min(230px,46%);display:grid;gap:10px;list-style:none;margin:0;padding:0}
.mh-facts li{padding:14px 16px;border-radius:14px;background:rgba(36,58,126,.62);border:1px solid rgba(166,236,226,.45);backdrop-filter:blur(6px)}
.mh-facts b{display:block;color:#fff;font:900 26px/1.1 var(--head)}
.mh-facts span{color:#fff;font-size:15px}
@media (max-width:960px){.mh-facts{position:static;width:auto;grid-template-columns:repeat(3,1fr);margin-top:24px}}
@media (max-width:600px){.mh-facts{grid-template-columns:1fr;gap:8px}.mh-facts li{display:flex;align-items:baseline;gap:12px;padding:10px 14px}.mh-facts b{font-size:22px}}
@media (prefers-reduced-motion:reduce){.mh-sonar .sn-beam,.mh-sonar .sn-hit{animation:none}}

/* Shortlist artwork (Enterprise AI Assessment): a drifting cloud of ideas; four are drawn along
   dashed lines into a shortlist tray, its slots light, and a check closes it. One 10 second loop.
   Reduced motion shows the end state. Colours come from the page's tokens. */
.mh-shortlist{-webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 74% 74% at 50% 50%,#000 62%,transparent 100%)}
.mh-shortlist .sl-p{fill:#cfc6ea}
.mh-shortlist .sl-tray{fill:rgba(97,212,195,.06);stroke:var(--neon);stroke-width:2;stroke-dasharray:8 7}
.mh-shortlist .sl-slot{fill:rgba(255,255,255,.06);stroke:rgba(207,198,234,.45);stroke-width:1;transition:fill .4s}
.mh-shortlist .sl-line{fill:none;stroke:#cfc6ea;stroke-width:1.3;stroke-dasharray:4 6;opacity:0;animation:slLine 10s linear infinite}
.mh-shortlist .sl-hit{fill:#fff;opacity:.9}
.mh-shortlist .sl-mv{fill:var(--neon);transform-box:fill-box;transform-origin:center;animation:slMove 10s cubic-bezier(.22,.61,.36,1) infinite}
.mh-shortlist .m1{animation-delay:.2s}.mh-shortlist .m2{animation-delay:.4s}.mh-shortlist .m3{animation-delay:.6s}
.mh-shortlist .sl-slot{animation:slSlot 10s linear infinite}
.mh-shortlist .s1{animation-delay:.2s}.mh-shortlist .s2{animation-delay:.4s}.mh-shortlist .s3{animation-delay:.6s}
.mh-shortlist .sl-ok circle{fill:var(--neon)}
.mh-shortlist .sl-ok path{fill:none;stroke:var(--deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mh-shortlist .sl-ok{transform-box:fill-box;transform-origin:center;opacity:0;animation:slOk 10s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes slLine{0%,8%{opacity:0}14%,40%{opacity:.75}48%,100%{opacity:0}}
@keyframes slMove{0%,12%{transform:none;opacity:0}14%{opacity:1}42%,90%{transform:translate(var(--dx),var(--dy));opacity:1}97%,100%{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes slSlot{0%,40%{fill:rgba(255,255,255,.06)}46%,90%{fill:rgba(97,212,195,.28)}97%,100%{fill:rgba(255,255,255,.06)}}
@keyframes slOk{0%,58%{opacity:0;transform:scale(.4)}66%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mh-shortlist .sl-mv{animation:none;transform:translate(var(--dx),var(--dy))}
  .mh-shortlist .sl-line{animation:none;opacity:0}
  .mh-shortlist .sl-slot{animation:none;fill:rgba(97,212,195,.28)}
  .mh-shortlist .sl-ok{animation:none;opacity:1;transform:none}
}

/* Agent artwork (AWS AI Solutions): generative to agentic. A prompt card writes its lines; a pulse
   runs to the agent, which turns; pulses run on to three business systems (ERP grid, finance bars,
   operations gear) and each is checked. One 10 second loop. Reduced motion shows the end state. */
.mh-agent{-webkit-mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 64%,transparent 100%)}
.mh-agent .hag-p{fill:#cfc6ea}
.mh-agent .hag-card{fill:rgba(255,255,255,.07);stroke:rgba(207,198,234,.5);stroke-width:1.5}
.mh-agent .hag-dot{fill:var(--neon)}
.mh-agent .hag-ln{fill:#cfc6ea;transform-box:fill-box;transform-origin:left center;animation:hagLn 10s cubic-bezier(.22,.61,.36,1) infinite}
.mh-agent .l1{animation-delay:.25s}.mh-agent .l2{animation-delay:.5s}.mh-agent .l3{animation-delay:.75s}
.mh-agent .hag-wire{fill:none;stroke:rgba(207,198,234,.4);stroke-width:1.5;stroke-dasharray:4 6}
.mh-agent .hag-run{fill:none;stroke:var(--neon);stroke-width:3;stroke-linecap:round;stroke-dasharray:16 100;stroke-dashoffset:16;opacity:0;animation:hagRun 10s linear infinite}
.mh-agent .r0{animation-delay:1.6s}.mh-agent .r1{animation-delay:3.4s}.mh-agent .r2{animation-delay:3.9s}.mh-agent .r3{animation-delay:4.4s}
.mh-agent .hag-hub{fill:rgba(97,212,195,.16);stroke:var(--neon);stroke-width:2}
.mh-agent .hag-ring{fill:none;stroke:rgba(207,198,234,.5);stroke-width:1.5;stroke-dasharray:6 8;transform-box:fill-box;transform-origin:center;animation:hagSpin 10s linear infinite}
.mh-agent .hag-spark{fill:var(--neon);transform-box:fill-box;transform-origin:center;animation:hagSpark 10s cubic-bezier(.22,.61,.36,1) infinite}
.mh-agent .hag-tile{fill:rgba(255,255,255,.06);stroke:rgba(207,198,234,.45);stroke-width:1.5;animation:hagTile 10s linear infinite}
.mh-agent .t0{animation-delay:4.2s}.mh-agent .t1{animation-delay:4.7s}.mh-agent .t2{animation-delay:5.2s}
.mh-agent .hag-g{fill:none;stroke:#cfc6ea;stroke-width:2;stroke-linecap:round}
.mh-agent rect.hag-g{fill:rgba(207,198,234,.55);stroke:none}
.mh-agent .hag-tl{fill:rgba(207,198,234,.4)}
.mh-agent .hag-ok circle{fill:var(--neon)}
.mh-agent .hag-ok path{fill:none;stroke:var(--deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mh-agent .hag-ok{transform-box:fill-box;transform-origin:center;opacity:0;animation:hagOk 10s cubic-bezier(.22,.61,.36,1) infinite}
.mh-agent .k0{animation-delay:4.4s}.mh-agent .k1{animation-delay:4.9s}.mh-agent .k2{animation-delay:5.4s}
@keyframes hagLn{0%{transform:scaleX(0);opacity:0}2%{opacity:1}12%,90%{transform:none;opacity:1}97%,100%{transform:none;opacity:0}}
@keyframes hagRun{0%{stroke-dashoffset:16;opacity:0}1%{opacity:1}11%{stroke-dashoffset:-100;opacity:1}12%,100%{stroke-dashoffset:-100;opacity:0}}
@keyframes hagSpin{0%,26%{transform:none}40%,100%{transform:rotate(180deg)}}
@keyframes hagSpark{0%,26%{transform:scale(.7)}31%{transform:scale(1.25)}36%,100%{transform:none}}
@keyframes hagTile{0%{fill:rgba(255,255,255,.06);stroke:rgba(207,198,234,.45)}3%,44%{fill:rgba(97,212,195,.16);stroke:#61d4c3}50%,100%{fill:rgba(255,255,255,.06);stroke:rgba(207,198,234,.45)}}
@keyframes hagOk{0%{opacity:0;transform:scale(.4)}6%,40%{opacity:1;transform:none}46%,100%{opacity:0;transform:none}}
@media (prefers-reduced-motion:reduce){
  .mh-agent .hag-ln,.mh-agent .hag-ring,.mh-agent .hag-spark{animation:none;transform:none;opacity:1}
  .mh-agent .hag-run{animation:none;opacity:0}
  .mh-agent .hag-tile{animation:none;fill:rgba(97,212,195,.16);stroke:#61d4c3}
  .mh-agent .hag-ok{animation:none;opacity:1;transform:none}
}

/* Roots artwork (About Us): deep roots in SAP and ERP growing into the cloud. Roots draw down from
   the ground line, their tips light; a pulse rises up the stem and the cloud's service tiles light
   one by one. One 10 second loop. Reduced motion shows the end state. */
.mh-roots{-webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 64%,transparent 100%)}
.mh-roots .hrt-p{fill:#cfc6ea}
.mh-roots .hrt-ground{fill:none;stroke:rgba(207,198,234,.55);stroke-width:1.5;stroke-dasharray:5 7}
.mh-roots .hrt-root{fill:none;stroke:#cfc6ea;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:hrtRoot 10s cubic-bezier(.22,.61,.36,1) infinite}
.mh-roots .r1,.mh-roots .r2{animation-delay:.3s}.mh-roots .r3,.mh-roots .r4{animation-delay:.6s}.mh-roots .r5,.mh-roots .r6{animation-delay:.9s}
.mh-roots .hrt-tip{fill:var(--neon);opacity:0;animation:hrtTip 10s linear infinite}
.mh-roots .t1,.mh-roots .t2{animation-delay:.3s}.mh-roots .t3,.mh-roots .t4{animation-delay:.6s}.mh-roots .t5,.mh-roots .t6{animation-delay:.9s}
.mh-roots .hrt-stem{fill:none;stroke:rgba(207,198,234,.55);stroke-width:3;stroke-linecap:round}
.mh-roots .hrt-rise{fill:none;stroke:var(--neon);stroke-width:4;stroke-linecap:round;stroke-dasharray:22 100;stroke-dashoffset:22;opacity:0;animation:hrtRise 10s linear infinite}
.mh-roots .hrt-cloud{fill:rgba(255,255,255,.06);stroke:rgba(207,198,234,.5);stroke-width:1.5}
.mh-roots .hrt-tile{fill:rgba(255,255,255,.08);stroke:rgba(207,198,234,.45);stroke-width:1.2;animation:hrtTile 10s linear infinite}
.mh-roots .k0{animation-delay:3.4s}.mh-roots .k1{animation-delay:3.58s}.mh-roots .k2{animation-delay:3.76s}.mh-roots .k3{animation-delay:3.94s}.mh-roots .k4{animation-delay:4.12s}.mh-roots .k5{animation-delay:4.3s}.mh-roots .k6{animation-delay:4.48s}.mh-roots .k7{animation-delay:4.66s}.mh-roots .k8{animation-delay:4.84s}.mh-roots .k9{animation-delay:5.02s}.mh-roots .k10{animation-delay:5.2s}.mh-roots .k11{animation-delay:5.38s}
@keyframes hrtRoot{0%{stroke-dashoffset:100}18%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes hrtTip{0%,16%{opacity:0}20%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes hrtRise{0%,24%{stroke-dashoffset:22;opacity:0}25%{opacity:1}33%{stroke-dashoffset:-100;opacity:1}34%,100%{opacity:0}}
@keyframes hrtTile{0%{fill:rgba(255,255,255,.08);stroke:rgba(207,198,234,.45)}3%,42%{fill:rgba(97,212,195,.3);stroke:#61d4c3}48%,100%{fill:rgba(255,255,255,.08);stroke:rgba(207,198,234,.45)}}
@media (prefers-reduced-motion:reduce){
  .mh-roots .hrt-root{animation:none;stroke-dashoffset:0}
  .mh-roots .hrt-tip{animation:none;opacity:1}
  .mh-roots .hrt-rise{animation:none;opacity:0}
  .mh-roots .hrt-tile{animation:none;fill:rgba(97,212,195,.3);stroke:#61d4c3}
}

/* Scan artwork (Cloud Ready SAP): a beam passes down the on-premises landscape and each layer is
   checked; a pulse carries it to AWS, where a copy appears and a gauge fills. 10 second loop. */
.mh-scan{-webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 64%,transparent 100%)}
.mh-scan .hsc-p{fill:#cfd8f0}
.mh-scan .hsc-slab{fill:rgba(255,255,255,.08);stroke:rgba(200,214,240,.5);stroke-width:1.5}
.mh-scan .hsc-led{fill:#58bcd8}.mh-scan .hsc-ln{fill:rgba(200,214,240,.45)}
.mh-scan .hsc-beam{fill:#8fe0f0;filter:drop-shadow(0 0 8px rgba(88,188,216,.9));animation:hscBeam 10s cubic-bezier(.45,0,.55,1) infinite}
.mh-scan .hsc-ok circle{fill:#58bcd8}.mh-scan .hsc-ok path{fill:none;stroke:#13235a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mh-scan .hsc-ok{opacity:0;animation:hscOk 10s linear infinite}
.mh-scan .k0{animation-delay:0.4s}.mh-scan .k1{animation-delay:0.9s}.mh-scan .k2{animation-delay:1.4s}.mh-scan .k3{animation-delay:1.9s}.mh-scan .k4{animation-delay:2.4s}
.mh-scan .hsc-arc{fill:none;stroke:rgba(200,214,240,.45);stroke-width:1.5;stroke-dasharray:4 6}
.mh-scan .hsc-run{fill:none;stroke:#8fe0f0;stroke-width:3;stroke-linecap:round;stroke-dasharray:16 100;stroke-dashoffset:16;opacity:0;animation:hscRun 10s linear infinite 3.2s}
.mh-scan .hsc-cloud{fill:rgba(255,255,255,.06);stroke:rgba(200,214,240,.55);stroke-width:1.5}
.mh-scan .hsc-copy{fill:rgba(88,188,216,.16);stroke:#58bcd8;stroke-width:1.5;opacity:0;animation:hscCopy 10s linear infinite}
.mh-scan .hsc-cl{fill:rgba(200,240,250,.6);opacity:0;animation:hscCopy 10s linear infinite}
.mh-scan .c0{animation-delay:4.1s}.mh-scan .c1{animation-delay:4.4s}.mh-scan .c2{animation-delay:4.7s}
.mh-scan .hsc-gt{fill:none;stroke:rgba(200,214,240,.35);stroke-width:6;stroke-linecap:round}
.mh-scan .hsc-gv{fill:none;stroke:#58bcd8;stroke-width:6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:hscGauge 10s cubic-bezier(.22,.61,.36,1) infinite}
.mh-scan .hsc-gc{fill:#8fe0f0}
@keyframes hscBeam{0%{transform:translateY(0);opacity:0}3%{opacity:1}30%{transform:translateY(246px);opacity:1}33%,100%{transform:translateY(246px);opacity:0}}
@keyframes hscOk{0%{opacity:0}4%,88%{opacity:1}95%,100%{opacity:0}}
@keyframes hscRun{0%{stroke-dashoffset:16;opacity:0}1%{opacity:1}10%{stroke-dashoffset:-100;opacity:1}11%,100%{opacity:0}}
@keyframes hscCopy{0%{opacity:0}5%,40%{opacity:1}52%,100%{opacity:0}}
@keyframes hscGauge{0%,52%{stroke-dashoffset:100}66%,90%{stroke-dashoffset:22}97%,100%{stroke-dashoffset:100}}
/* People artwork (Cloud Adoption Assessment): a wave assesses people one by one, three are flagged in
   Orange, and a readiness ring fills. 10 second loop. */
.mh-people{-webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 64%,transparent 100%);mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 64%,transparent 100%)}
.mh-people .hpp-d{fill:#cfc6ea}
.mh-people .hpp-p{fill:rgba(207,198,234,.4);animation:hppP 10s linear infinite}
.mh-people .hpp-p.fl{animation-name:hppF}
.mh-people .hpp-rt{fill:none;stroke:rgba(207,198,234,.3);stroke-width:7}
.mh-people .hpp-rv{fill:none;stroke:#61d4c3;stroke-width:7;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:510px 92px;animation:hppRing 10s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes hppP{0%{fill:rgba(207,198,234,.4)}4%,86%{fill:#61d4c3}94%,100%{fill:rgba(207,198,234,.4)}}
@keyframes hppF{0%{fill:rgba(207,198,234,.4)}4%,30%{fill:#61d4c3}36%,86%{fill:#f89921}94%,100%{fill:rgba(207,198,234,.4)}}
@keyframes hppRing{0%,30%{stroke-dashoffset:100}55%,88%{stroke-dashoffset:30}96%,100%{stroke-dashoffset:100}}
@media (prefers-reduced-motion:reduce){
  .mh-scan .hsc-beam,.mh-scan .hsc-run{animation:none;opacity:0}
  .mh-scan .hsc-ok,.mh-scan .hsc-copy,.mh-scan .hsc-cl{animation:none;opacity:1}
  .mh-scan .hsc-gv{animation:none;stroke-dashoffset:22}
  .mh-people .hpp-p{animation:none;fill:#61d4c3}.mh-people .hpp-p.fl{fill:#f89921}
  .mh-people .hpp-rv{animation:none;stroke-dashoffset:30}
}

/* Secondary as an outlined button (secondary_style "button", 17 October 2026, the W.H.A.L.E. page): white outline
   on the dark hero, rectangular like every CTA. The text link stays the default. */
.btn.hn-ol{padding-left:20px;padding-right:20px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:2px;box-shadow:none}
/* the two buttons sit as one pair: a tighter gap than the text link needs */
.mh-act:has(.hn-ol){column-gap:12px}
.btn.hn-ol:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff;transform:translateY(-2px)}
.btn.hn-ol svg{width:15px;height:15px}

/* Layers (art "layers", 17 October 2026, the SAP on AWS Managed Services page): SAP workloads, SAP Basis and
   HANA, and the AWS foundation as one stack, a ring of one managed service around it, and signals rising
   through every layer. Opt-in; every other art is unchanged. */
/* no edge fade: the layer names and the service chip sit near the edges and must stay readable */
.mh-net.mh-layers{-webkit-mask-image:none;mask-image:none}
.mh-layers .lay-top{stroke-width:1.5;stroke-linejoin:round}
.mh-layers .lay-side{stroke-width:1.2;stroke-linejoin:round}
.mh-layers .lay-grid{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
.mh-layers .l1 .lay-top{fill:rgba(149,135,190,.30);stroke:rgba(207,198,234,.85)}.mh-layers .l1 .lay-side{fill:rgba(149,135,190,.18);stroke:rgba(207,198,234,.5)}
.mh-layers .l2 .lay-top{fill:rgba(90,45,145,.55);stroke:rgba(201,184,234,.8)}.mh-layers .l2 .lay-side{fill:rgba(60,30,110,.6);stroke:rgba(201,184,234,.45)}
.mh-layers .l3 .lay-top{fill:rgba(88,188,216,.26);stroke:rgba(143,214,232,.85)}.mh-layers .l3 .lay-side{fill:rgba(60,95,172,.4);stroke:rgba(143,214,232,.5)}
.mh-layers .lay-led{fill:var(--neon);animation:layLed 3.6s ease-in-out infinite}
.mh-layers .l2 .lay-led{animation-delay:.5s}.mh-layers .l1 .lay-led{animation-delay:1s}
.mh-layers .lay-ring{fill:none;stroke:var(--neon);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;animation:layRing 6s linear infinite}
.mh-layers .lay-back{stroke-opacity:.45}
.mh-layers .lay-pulse{fill:var(--neon);opacity:0;animation:layRise 3.6s cubic-bezier(.45,.05,.55,.95) infinite}
.mh-layers .p2{animation-delay:1.2s}.mh-layers .p3{animation-delay:2.4s}
.mh-layers .lay-tick{stroke:rgba(207,198,234,.45);stroke-width:1.2;stroke-dasharray:3 4}
.mh-layers .lay-name{font:800 17px var(--head);fill:#fff}
.mh-layers .lay-sub{font:600 12.5px var(--body);fill:rgba(232,238,251,.72)}
.mh-layers .lay-chip rect{fill:rgba(97,212,195,.12);stroke:rgba(97,212,195,.55)}
.mh-layers .lay-chip circle{fill:var(--neon)}
.mh-layers .lay-chip path{fill:none;stroke:#243a7e;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mh-layers .lay-chip text{font:800 15px var(--head);fill:#fff}
@keyframes layRise{0%{opacity:0;transform:translateY(0)}12%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateY(-226px)}}
@keyframes layLed{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes layRing{to{stroke-dashoffset:-120}}
/* phones: the sublabels are too small to read once the art is scaled down, so only the layer names stay */
@media (max-width:600px){.mh-layers .lay-sub{display:none}.mh-layers .lay-name{font-size:19px}}
@media (prefers-reduced-motion:reduce){.mh-layers .lay-led,.mh-layers .lay-ring{animation:none}.mh-layers .lay-led{opacity:1}.mh-layers .lay-pulse{animation:none;opacity:0}}

/* Compass (art "compass", 17 October 2026, the SHIP for SAP ECC Transition page): a bearing from SAP ECC that swings
   between three destinations. Opt-in. */
.mh-net.mh-compass{-webkit-mask-image:none;mask-image:none}
.mh-compass .cp-ring{fill:rgba(255,255,255,.04);stroke:rgba(207,198,234,.55);stroke-width:2}
.mh-compass .cp-in{fill:none;stroke:rgba(207,198,234,.25);stroke-width:1.2;stroke-dasharray:3 6}
.mh-compass .cp-t{stroke:rgba(207,198,234,.4);stroke-width:1.4}.mh-compass .cp-tl{stroke:rgba(207,198,234,.75);stroke-width:2}
.mh-compass .cp-arc{fill:none;stroke:var(--neon);stroke-width:3;stroke-linecap:round;stroke-dasharray:4 10;animation:cpArc 2s linear infinite;opacity:.8}
.mh-compass .cp-d circle:not(.cp-halo){fill:#fff}
.mh-compass .cp-halo{fill:none;stroke-width:2;opacity:.6}
.mh-compass .d1 .cp-halo{stroke:var(--corn)}.mh-compass .d2 .cp-halo{stroke:#c9b8ea}.mh-compass .d3 .cp-halo{stroke:var(--neon)}
.mh-compass .cp-d text{font:800 19px var(--head);fill:#fff}
.mh-compass .cp-needle{transform-origin:300px 262px;transform:rotate(-50deg);animation:cpSwing 9s cubic-bezier(.45,.05,.55,.95) infinite}
.mh-compass .cp-n1{fill:var(--orange)}.mh-compass .cp-n2{fill:rgba(207,198,234,.6)}
.mh-compass .cp-hub{fill:#fff;stroke:var(--deep);stroke-width:4}
.mh-compass .cp-o{font:700 14px var(--mono);letter-spacing:.14em;fill:rgba(232,238,251,.75)}
@keyframes cpSwing{0%,22%{transform:rotate(-50deg)}33%,55%{transform:rotate(0deg)}66%,88%{transform:rotate(50deg)}100%{transform:rotate(-50deg)}}
@keyframes cpArc{to{stroke-dashoffset:-28}}
@media (max-width:600px){.mh-compass .cp-d text{font-size:22px}}
@media (prefers-reduced-motion:reduce){.mh-compass .cp-needle,.mh-compass .cp-arc{animation:none}.mh-compass .cp-needle{transform:rotate(0deg)}}

/* Voyage (art "voyage", 17 October 2026, the SHIP for SAP ECC Transition page): a chart, a course from SAP ECC past
   six waypoints, the six SHIP stages, to a lighthouse; a ship sails it and lights each stage as it passes. Opt-in. */
.mh-net.mh-voyage{-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 78%,transparent 100%)}
.mh-voyage .vy-g{stroke:rgba(207,198,234,.08);stroke-width:1}
.mh-voyage .vy-c{fill:none;stroke:rgba(88,188,216,.22);stroke-width:1.4}
.mh-voyage .vy-route{fill:none;stroke:rgba(207,198,234,.35);stroke-width:2.4;stroke-dasharray:2 8;stroke-linecap:round}
.mh-voyage .vy-run{fill:none;stroke:var(--neon);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:vyRun 12s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes vyRun{0%{stroke-dashoffset:1;opacity:1}55%,92%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.mh-voyage .vy-w circle{fill:#fff;stroke:rgba(207,198,234,.8);stroke-width:2}
.mh-voyage .vy-wr{fill:none !important;stroke:var(--neon) !important;opacity:0;transform-box:fill-box;transform-origin:center}
.mh-voyage .vy-n{font:800 15px var(--head);fill:rgba(232,238,251,.85)}
.mh-voyage .w0 .vy-wr{animation:vyPing 12s ease-out infinite;animation-delay:0.90s}.mh-voyage .w0 circle:first-child{animation:vyLit 12s ease-out infinite;animation-delay:0.90s}.mh-voyage .w0 .vy-n{animation:vyTxt 12s ease-out infinite;animation-delay:0.90s}.mh-voyage .w1 .vy-wr{animation:vyPing 12s ease-out infinite;animation-delay:1.85s}.mh-voyage .w1 circle:first-child{animation:vyLit 12s ease-out infinite;animation-delay:1.85s}.mh-voyage .w1 .vy-n{animation:vyTxt 12s ease-out infinite;animation-delay:1.85s}.mh-voyage .w2 .vy-wr{animation:vyPing 12s ease-out infinite;animation-delay:2.80s}.mh-voyage .w2 circle:first-child{animation:vyLit 12s ease-out infinite;animation-delay:2.80s}.mh-voyage .w2 .vy-n{animation:vyTxt 12s ease-out infinite;animation-delay:2.80s}.mh-voyage .w3 .vy-wr{animation:vyPing 12s ease-out infinite;animation-delay:3.75s}.mh-voyage .w3 circle:first-child{animation:vyLit 12s ease-out infinite;animation-delay:3.75s}.mh-voyage .w3 .vy-n{animation:vyTxt 12s ease-out infinite;animation-delay:3.75s}.mh-voyage .w4 .vy-wr{animation:vyPing 12s ease-out infinite;animation-delay:4.70s}.mh-voyage .w4 circle:first-child{animation:vyLit 12s ease-out infinite;animation-delay:4.70s}.mh-voyage .w4 .vy-n{animation:vyTxt 12s ease-out infinite;animation-delay:4.70s}.mh-voyage .w5 .vy-wr{animation:vyPing 12s ease-out infinite;animation-delay:5.65s}.mh-voyage .w5 circle:first-child{animation:vyLit 12s ease-out infinite;animation-delay:5.65s}.mh-voyage .w5 .vy-n{animation:vyTxt 12s ease-out infinite;animation-delay:5.65s}
@keyframes vyPing{0%{opacity:.9;transform:scale(1)}8%{opacity:0;transform:scale(2.6)}100%{opacity:0}}
@keyframes vyLit{0%{fill:#fff}2%,70%{fill:var(--neon)}80%,100%{fill:#fff}}
@keyframes vyTxt{0%{fill:rgba(232,238,251,.8)}2%,70%{fill:#fff}80%,100%{fill:rgba(232,238,251,.8)}}
.mh-voyage .vy-dock rect{fill:rgba(255,255,255,.12);stroke:rgba(207,198,234,.7);stroke-width:1.6}.mh-voyage .vy-dock path{stroke:rgba(207,198,234,.7);stroke-width:3}
.mh-voyage .vy-tower{fill:#fff}.mh-voyage .vy-band{stroke:var(--purple);stroke-width:4}.mh-voyage .vy-top{fill:var(--orange)}.mh-voyage .vy-roof{fill:var(--deep);stroke:#fff;stroke-width:1.5}
.mh-voyage .vy-beam{fill:rgba(248,153,33,.2);animation:vyBeam 3s ease-in-out infinite}
@keyframes vyBeam{0%,100%{opacity:.35}50%{opacity:1}}
.mh-voyage .vy-lbl{font:900 20px var(--head);fill:#fff}
.mh-voyage .vy-ship path{fill:#fff}.mh-voyage .vy-ship .vy-sail{fill:var(--orange)}.mh-voyage .vy-ship .vy-sail2{fill:rgba(255,255,255,.85)}
.mh-voyage .vy-ship{transform:translate(538px,252px)}
@supports (offset-path:path("M92 262C101.7 255.3 129.5 217.0 150 222C170.5 227.0 192.5 292.0 215 292C237.5 292.0 261.7 222.0 285 222C308.3 222.0 331.7 292.0 355 292C378.3 292.0 402.5 223.7 425 222C447.5 220.3 471.2 277.0 490 282C508.8 287.0 530.0 257.0 538 252")){.mh-voyage .vy-ship{transform:none;offset-path:path("M92 262C101.7 255.3 129.5 217.0 150 222C170.5 227.0 192.5 292.0 215 292C237.5 292.0 261.7 222.0 285 222C308.3 222.0 331.7 292.0 355 292C378.3 292.0 402.5 223.7 425 222C447.5 220.3 471.2 277.0 490 282C508.8 287.0 530.0 257.0 538 252");offset-rotate:0deg;animation:vySail 12s cubic-bezier(.45,.05,.55,.95) infinite}}
@keyframes vySail{0%{offset-distance:0%;opacity:0}4%{opacity:1}55%,92%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@media (max-width:600px){.mh-voyage .vy-lbl{font-size:21px}.mh-voyage .vy-n{font-size:16px}}
@media (prefers-reduced-motion:reduce){.mh-voyage *{animation:none !important}.mh-voyage .vy-run{stroke-dashoffset:0}.mh-voyage .vy-ship{offset-distance:100%}}
/* the voyage is wide, so its box takes the picture's proportions instead of 6:5 (17 October 2026) */
.mh-art:has(.mh-voyage){aspect-ratio:600/320}

/* Light hero (17 October 2026, Cyril, the SAP on AWS Managed Services page). Only where the surface is light or
   stone; every published hero is dark and unchanged. A soft lilac and aqua wash instead of flat white, a purple
   accent line (Neon Aqua is too faint on white), a navy outline button, and the layers art redrawn for light. */
.sfc-light.mh{background:radial-gradient(55% 65% at 80% 42%,rgba(149,135,190,.2),transparent 70%),radial-gradient(45% 55% at 0% 100%,rgba(97,212,195,.14),transparent 70%),linear-gradient(180deg,#fff,var(--stone))}
.sfc-light.mh h1 em{color:var(--purple)}
.sfc-light .btn.hn-ol{color:var(--deep);border-color:rgba(36,58,126,.45)}
.sfc-light .btn.hn-ol:hover{background:rgba(36,58,126,.06);border-color:var(--deep);color:var(--deep)}
.sfc-light .mh-layers .lay-name{fill:var(--deep)}
.sfc-light .mh-layers .lay-sub{fill:var(--lt-mut)}
.sfc-light .mh-layers .lay-tick{stroke:rgba(90,45,145,.35)}
.sfc-light .mh-layers .lay-grid{stroke:rgba(36,58,126,.14)}
.sfc-light .mh-layers .l1 .lay-top{fill:rgba(149,135,190,.22);stroke:rgba(90,45,145,.45)}.sfc-light .mh-layers .l1 .lay-side{fill:rgba(149,135,190,.3);stroke:rgba(90,45,145,.3)}
.sfc-light .mh-layers .l2 .lay-top{fill:rgba(90,45,145,.62);stroke:rgba(90,45,145,.85)}.sfc-light .mh-layers .l2 .lay-side{fill:rgba(60,30,110,.75);stroke:rgba(90,45,145,.6)}
.sfc-light .mh-layers .l3 .lay-top{fill:rgba(88,188,216,.28);stroke:rgba(60,95,172,.55)}.sfc-light .mh-layers .l3 .lay-side{fill:rgba(60,95,172,.35);stroke:rgba(60,95,172,.45)}
.sfc-light .mh-layers .lay-ring{stroke:#50b1a3}

/* Layers art: the top layer shows SAP AMS as the added layer (17 October 2026, Cyril). */
.mh-layers .lay-plus{font-weight:900;fill:var(--neon)}
.sfc-light .mh-layers .lay-plus{fill:var(--purple)}

/* Calendar art and note (19 October 2026, the Thank you page). Opt-in: art "calendar" and the note field. The art keeps
   the Thank you build's soft edge fade; the note's email link has a 24px+ target. */
.mh-cal{-webkit-mask-image:radial-gradient(ellipse 74% 74% at 52% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 74% 74% at 52% 50%,#000 60%,transparent 100%)}
.mh-note{margin:18px 0 0;color:rgba(255,255,255,.86)}
.mh-note a{display:inline-block;margin:-10px 0;padding:10px 0;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.sfc-light .mh-note{color:var(--lt-mut)}.sfc-light .mh-note a{color:var(--deep)}
.mh-note a:before,.mh-note a:after{content:none !important}
/* Calendar art on tablets (19 October 2026, Cyril): stacked under the text it ran full size and made the hero tall;
   it now sits at about the size it has on phones. Calendar art only. */
@media (min-width:601px) and (max-width:960px){ .mh-art:has(.mh-cal){ max-width:340px; } }

/* SaaS growth chart (art "saas", 23 October 2026, the Cloud for SaaS page): from Cyril's cloud-for-saas-v2.html. */
.mh-saas{-webkit-mask-image:radial-gradient(ellipse 72% 72% at 55% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 55% 50%,#000 60%,transparent 100%)}
.mh-saas .sa-dash{animation:mhSaDash 3.2s linear infinite}
.mh-saas .sa-grow{animation:mhSaGrow 2.4s cubic-bezier(.22,.61,.36,1) both;stroke-dasharray:900;stroke-dashoffset:900}
.mh-saas .sa-pulse{animation:mhSaPulse 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes mhSaDash{to{stroke-dashoffset:-36}}@keyframes mhSaGrow{to{stroke-dashoffset:0}}@keyframes mhSaPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.mh-saas .sa-dash,.mh-saas .sa-pulse{animation:none}.mh-saas .sa-grow{animation:none;stroke-dashoffset:0}}

/* Transition (23 October 2026, Cyril: the voyage art did not look professional). A system diagram in the language of
   the growth chart: SAP ECC and S/4HANA on AWS as two cards joined by a line that carries light across, and the six SHIP stages as one row
   that fills in order; as the last stage lights, the same modules check in on the destination, marked safe harbor.
   A faint sea chart is the only nautical cue. One 12-second cycle drives every element so they stay in step. No edge
   fade on this art: the cards sit at the edges. Sized to fill the hero column (Cyril: slightly bigger): the drawing
   has no side margin and a taller 560:320 box, close to the height of the text beside it. */
.mh-art:has(.mh-trans){aspect-ratio:560/320}
.mh-net.mh-trans{-webkit-mask-image:none;mask-image:none}
.mh-trans .tr-g{stroke:rgba(207,198,234,.07);stroke-width:1}
.mh-trans .tr-c{fill:none;stroke:rgba(88,188,216,.16);stroke-width:1.3}
.mh-trans .tr-halo{opacity:0;animation:trHalo 12s ease-in-out infinite}
.mh-trans .tr-base{fill:none;stroke:rgba(207,198,234,.3);stroke-width:2;stroke-dasharray:2 7;stroke-linecap:round}
.mh-trans .tr-run,.mh-trans .tr-link{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:url(#mhtrGl);animation:trRun 12s cubic-bezier(.45,.05,.55,.95) infinite}
/* the cards are joined only by the filling line and light points travelling from SAP ECC to S/4HANA (Cyril: no SHIP
   label, then no arrow hub) */
.mh-trans .tr-pk circle{fill:#bfe6f2;opacity:0;animation:trPk 2.4s linear infinite}
.mh-trans .tr-pk .p1{animation-delay:.8s}.mh-trans .tr-pk .p2{animation-delay:1.6s}
@keyframes trPk{0%{transform:translateX(0);opacity:0}15%,85%{opacity:.9}100%{transform:translateX(186px);opacity:0}}
.mh-trans .tr-dot{fill:#2a2f78;stroke:rgba(207,198,234,.55);stroke-width:2}
.mh-trans .tr-num{font:800 12.5px var(--head);fill:rgba(232,238,251,.8)}
.mh-trans .tr-nm{font:800 15.5px var(--head);fill:rgba(232,238,251,.72)}
.mh-trans .tr-box{fill:rgba(255,255,255,.07);stroke:rgba(207,198,234,.32);stroke-width:1.2}
.mh-trans .tr-to .tr-box{fill:rgba(97,212,195,.08);stroke:rgba(97,212,195,.45);animation:trDest 12s ease-in-out infinite}
.mh-trans .tr-k{font:700 10.5px var(--head);letter-spacing:.16em;fill:#bfe6f2}
.mh-trans .tr-t{font:900 28px var(--head);fill:#fff}
.mh-trans .tr-sub{font:600 13px var(--body);fill:rgba(232,238,251,.7)}
.mh-trans .tr-m rect{fill:rgba(255,255,255,.09)}
.mh-trans .tr-mt{font:700 11px var(--head);letter-spacing:.04em;fill:rgba(232,238,251,.78)}
.mh-trans .tr-to .tr-m rect{fill:rgba(97,212,195,.18)}
.mh-trans .tr-to .tr-mt{fill:#fff}
.mh-trans .tr-ck circle{fill:#61d4c3}.mh-trans .tr-ck path{fill:none;stroke:#1f2a66;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mh-trans .tr-to .tr-m{opacity:.35}
@keyframes trRun{0%,6%{stroke-dashoffset:1;opacity:1}62%,90%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes trHalo{0%,60%{opacity:0}70%,90%{opacity:1}100%{opacity:0}}
@keyframes trDest{0%,60%{stroke:rgba(97,212,195,.45)}68%,90%{stroke:rgba(97,212,195,.95)}100%{stroke:rgba(97,212,195,.45)}}

@keyframes trS0{0%,5.5%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}7.5%,90%{fill:#61d4c3;stroke:#61d4c3}97%,100%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}}
@keyframes trN0{0%,5.5%{fill:rgba(232,238,251,.8)}7.5%,90%{fill:#1f2a66}97%,100%{fill:rgba(232,238,251,.8)}}
@keyframes trL0{0%,5.5%{fill:rgba(232,238,251,.72)}7.5%,90%{fill:#fff}97%,100%{fill:rgba(232,238,251,.72)}}
.mh-trans .s0 .tr-dot{animation:trS0 12s linear infinite}.mh-trans .s0 .tr-num{animation:trN0 12s linear infinite}.mh-trans .s0 .tr-nm{animation:trL0 12s linear infinite}
@keyframes trS1{0%,16.7%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}18.7%,90%{fill:#61d4c3;stroke:#61d4c3}97%,100%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}}
@keyframes trN1{0%,16.7%{fill:rgba(232,238,251,.8)}18.7%,90%{fill:#1f2a66}97%,100%{fill:rgba(232,238,251,.8)}}
@keyframes trL1{0%,16.7%{fill:rgba(232,238,251,.72)}18.7%,90%{fill:#fff}97%,100%{fill:rgba(232,238,251,.72)}}
.mh-trans .s1 .tr-dot{animation:trS1 12s linear infinite}.mh-trans .s1 .tr-num{animation:trN1 12s linear infinite}.mh-trans .s1 .tr-nm{animation:trL1 12s linear infinite}
@keyframes trS2{0%,27.9%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}29.9%,90%{fill:#61d4c3;stroke:#61d4c3}97%,100%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}}
@keyframes trN2{0%,27.9%{fill:rgba(232,238,251,.8)}29.9%,90%{fill:#1f2a66}97%,100%{fill:rgba(232,238,251,.8)}}
@keyframes trL2{0%,27.9%{fill:rgba(232,238,251,.72)}29.9%,90%{fill:#fff}97%,100%{fill:rgba(232,238,251,.72)}}
.mh-trans .s2 .tr-dot{animation:trS2 12s linear infinite}.mh-trans .s2 .tr-num{animation:trN2 12s linear infinite}.mh-trans .s2 .tr-nm{animation:trL2 12s linear infinite}
@keyframes trS3{0%,39.1%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}41.1%,90%{fill:#61d4c3;stroke:#61d4c3}97%,100%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}}
@keyframes trN3{0%,39.1%{fill:rgba(232,238,251,.8)}41.1%,90%{fill:#1f2a66}97%,100%{fill:rgba(232,238,251,.8)}}
@keyframes trL3{0%,39.1%{fill:rgba(232,238,251,.72)}41.1%,90%{fill:#fff}97%,100%{fill:rgba(232,238,251,.72)}}
.mh-trans .s3 .tr-dot{animation:trS3 12s linear infinite}.mh-trans .s3 .tr-num{animation:trN3 12s linear infinite}.mh-trans .s3 .tr-nm{animation:trL3 12s linear infinite}
@keyframes trS4{0%,50.3%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}52.3%,90%{fill:#61d4c3;stroke:#61d4c3}97%,100%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}}
@keyframes trN4{0%,50.3%{fill:rgba(232,238,251,.8)}52.3%,90%{fill:#1f2a66}97%,100%{fill:rgba(232,238,251,.8)}}
@keyframes trL4{0%,50.3%{fill:rgba(232,238,251,.72)}52.3%,90%{fill:#fff}97%,100%{fill:rgba(232,238,251,.72)}}
.mh-trans .s4 .tr-dot{animation:trS4 12s linear infinite}.mh-trans .s4 .tr-num{animation:trN4 12s linear infinite}.mh-trans .s4 .tr-nm{animation:trL4 12s linear infinite}
@keyframes trS5{0%,61.5%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}63.5%,90%{fill:#61d4c3;stroke:#61d4c3}97%,100%{fill:#2a2f78;stroke:rgba(207,198,234,.55)}}
@keyframes trN5{0%,61.5%{fill:rgba(232,238,251,.8)}63.5%,90%{fill:#1f2a66}97%,100%{fill:rgba(232,238,251,.8)}}
@keyframes trL5{0%,61.5%{fill:rgba(232,238,251,.72)}63.5%,90%{fill:#fff}97%,100%{fill:rgba(232,238,251,.72)}}
.mh-trans .s5 .tr-dot{animation:trS5 12s linear infinite}.mh-trans .s5 .tr-num{animation:trN5 12s linear infinite}.mh-trans .s5 .tr-nm{animation:trL5 12s linear infinite}
@keyframes trM0{0%,64.0%{opacity:.35}67.0%,90%{opacity:1}97%,100%{opacity:.35}}.mh-trans .tr-to .m0{animation:trM0 12s ease-out infinite}
@keyframes trM1{0%,68.0%{opacity:.35}71.0%,90%{opacity:1}97%,100%{opacity:.35}}.mh-trans .tr-to .m1{animation:trM1 12s ease-out infinite}
@keyframes trM2{0%,72.0%{opacity:.35}75.0%,90%{opacity:1}97%,100%{opacity:.35}}.mh-trans .tr-to .m2{animation:trM2 12s ease-out infinite}
/* phones: the art is about 350px wide, so the small text is set larger in SVG units to stay readable */
@media (max-width:600px){.mh-trans .tr-nm{font-size:17px}.mh-trans .tr-t{font-size:30px}.mh-trans .tr-sub{font-size:15px}.mh-trans .tr-k{font-size:12px}.mh-trans .tr-mt{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.mh-trans *{animation:none !important}.mh-trans .tr-run,.mh-trans .tr-link{stroke-dashoffset:0}.mh-trans .tr-dot{fill:#61d4c3;stroke:#61d4c3}.mh-trans .tr-num{fill:#1f2a66}.mh-trans .tr-nm{fill:#fff}.mh-trans .tr-to .tr-m{opacity:1}.mh-trans .tr-halo{opacity:1}}

/* Factory (26 October 2026, Manufacturing; from Cyril's manufacturing-v2.html, redrawn in the line style of the other
   arts). A plant in outline (sawtooth roof, gear, roller door, two silos, a robot arm loading a conveyor) whose three
   systems, SAP ERP, Windows and plant apps, send light up to AWS. No edge fade: the conveyor runs to the edges. */
.mh-art:has(.mh-factory){aspect-ratio:3/2}
.mh-net.mh-factory{-webkit-mask-image:none;mask-image:none}
.mh-factory .fa-g{stroke:rgba(255,255,255,.07);stroke-width:1}
.mh-factory .fa-cloud path{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:2.2;filter:url(#mhfaGl)}
.mh-factory .fa-cloud text{font:900 21px var(--head);fill:#fff;letter-spacing:.02em}
.mh-factory .fa-ln{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.8;stroke-dasharray:2 6;stroke-linecap:round}
.mh-factory .fa-pk{fill:#fff;filter:url(#mhfaGl);offset-distance:0%;opacity:0;animation:faPk 3.6s cubic-bezier(.45,.05,.55,.95) infinite}
.mh-factory .k1{animation-delay:1.2s}.mh-factory .k2{animation-delay:2.4s}
@keyframes faPk{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
.mh-factory .fa-tag rect{fill:rgba(31,42,102,.38);stroke:rgba(255,255,255,.55);stroke-width:1.2}
.mh-factory .fa-tag circle{fill:#61d4c3}
.mh-factory .t1 circle{animation:faBlink 3.6s ease-in-out infinite;animation-delay:1.2s}.mh-factory .t0 circle{animation:faBlink 3.6s ease-in-out infinite}.mh-factory .t2 circle{animation:faBlink 3.6s ease-in-out infinite;animation-delay:2.4s}
@keyframes faBlink{0%,100%{opacity:1}50%{opacity:.35}}
.mh-factory .fa-tag text{font:800 12.5px var(--head);fill:#fff}
.mh-factory .fa-drop{stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-dasharray:2 4}
.mh-factory .fa-body,.mh-factory .fa-silo path:first-child{fill:rgba(255,255,255,.08);stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.mh-factory .fa-st{fill:none;stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.mh-factory .fa-win{fill:rgba(191,230,242,.85)}
.mh-factory .w1{animation:faWin 5s ease-in-out infinite}.mh-factory .w2{animation:faWin 5s ease-in-out infinite 2.5s}
@keyframes faWin{0%,100%{fill:rgba(191,230,242,.85)}50%{fill:rgba(97,212,195,.95)}}
.mh-factory .fa-door rect{fill:none;stroke:#fff;stroke-width:2.2}.mh-factory .fa-door path{stroke:rgba(255,255,255,.45);stroke-width:1.5}
.mh-factory .fa-gr{transform-box:view-box;transform-origin:220px 312px;animation:faSpin 14s linear infinite}
.mh-factory .fa-gear rect,.mh-factory .fa-gear circle{fill:none;stroke:#61d4c3;stroke-width:2.2}.mh-factory .fa-gh{fill:#61d4c3 !important}
@keyframes faSpin{to{transform:rotate(360deg)}}
.mh-factory .fa-lvl{fill:rgba(97,212,195,.28);transform-box:fill-box;transform-origin:50% 100%;animation:faLvl 6s ease-in-out infinite}
.mh-factory .fa-silo:nth-of-type(2) .fa-lvl{animation-delay:3s}
@keyframes faLvl{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.mh-factory .fa-rib{stroke:rgba(255,255,255,.45);stroke-width:1.5}
.mh-factory .fa-belt{fill:rgba(255,255,255,.9)}.mh-factory .fa-rl{fill:#3c5fac}.mh-factory .fa-leg{stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.mh-factory .fa-box rect{fill:rgba(248,153,33,.92)}.mh-factory .fa-box path{stroke:rgba(31,42,102,.3);stroke-width:1.6}
.mh-factory .fa-boxes{animation:faBelt 3.4s linear infinite}
@keyframes faBelt{to{transform:translateX(130px)}}
.mh-factory .fa-base{fill:#fff}.mh-factory .fa-seg{stroke:#fff;stroke-width:9;stroke-linecap:round}
.mh-factory .fa-j{fill:#61d4c3;stroke:#fff;stroke-width:2}.mh-factory .fa-claw{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round}
.mh-factory .fa-a1{transform-box:view-box;transform-origin:80px 352px;animation:faA1 4s ease-in-out infinite}
.mh-factory .fa-a2{transform-box:view-box;transform-origin:80px 292px;animation:faA2 4s ease-in-out infinite}
@keyframes faA1{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
@keyframes faA2{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-6deg)}}
.mh-factory .fa-ground{stroke:rgba(255,255,255,.3);stroke-width:1.4}
@media (max-width:600px){.mh-factory .fa-tag text{font-size:14px}.mh-factory .fa-cloud text{font-size:23px}}
@media (prefers-reduced-motion:reduce){.mh-factory *{animation:none !important}.mh-factory .fa-pk{opacity:0}}
/* factory on phones: the system tags drop their dot so the larger text fits the tag */
@media (max-width:600px){.mh-factory .fa-tag circle{display:none}.mh-factory .fa-tag text{font-size:15.5px;transform:translateX(-6px)}}

/* Plant (26 October 2026, Manufacturing; Cyril: the factory hero simpler and more professional). A system diagram in
   the language of the SHIP transition art: the plant floor as a card with a factory outline, its three systems (SAP ERP,
   Windows, plant apps) as chips, and AWS as the destination card. Light runs from the plant through each system to
   AWS. No edge fade: the cards sit at the edges. */
.mh-art:has(.mh-plant){aspect-ratio:560/320}
.mh-net.mh-plant{-webkit-mask-image:none;mask-image:none}
.mh-plant .pl-g{stroke:rgba(255,255,255,.07);stroke-width:1}
.mh-plant .pl-halo{opacity:.4;animation:plHalo 4s ease-in-out infinite}
@keyframes plHalo{0%,100%{opacity:.35}50%{opacity:1}}
.mh-plant .pl-ln{fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.8;stroke-dasharray:2 6;stroke-linecap:round}
.mh-plant .pl-pk{fill:#fff;filter:url(#mhplGl);offset-distance:0%;opacity:0;animation:plPk 3.6s cubic-bezier(.45,.05,.55,.95) infinite}
.mh-plant .k1{animation-delay:1.2s}.mh-plant .k2{animation-delay:2.4s}
@keyframes plPk{0%{offset-distance:0%;opacity:0}10%,90%{opacity:1}100%{offset-distance:100%;opacity:0}}
.mh-plant .pl-box{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.42);stroke-width:1.2}
.mh-plant .pl-to .pl-box{fill:rgba(97,212,195,.12);stroke:rgba(97,212,195,.9);stroke-width:1.5;filter:url(#mhplGl)}
.mh-plant .pl-ic{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.mh-plant .pl-k{font:700 10.5px var(--head);letter-spacing:.16em;fill:#e0f4f8}
.mh-plant .pl-t{font:900 26px var(--head);fill:#fff}
.mh-plant .pl-aws{font-size:34px}
.mh-plant .pl-sub{font:600 12.5px var(--body);fill:rgba(255,255,255,.78)}
.mh-plant .pl-live circle{fill:#61d4c3;animation:plBlink 2.4s ease-in-out infinite}.mh-plant .pl-live text{font:700 11.5px var(--head);fill:#e0f4f8}
@keyframes plBlink{0%,100%{opacity:1}50%{opacity:.35}}
.mh-plant .pl-chip rect{fill:rgba(31,42,102,.42);stroke:rgba(255,255,255,.6);stroke-width:1.2}
.mh-plant .pl-chip circle{fill:#61d4c3}
.mh-plant .pl-chip text{font:800 14px var(--head);fill:#fff}
.mh-plant .pl-ok circle{fill:#61d4c3}.mh-plant .pl-ok path{fill:none;stroke:#1f2a66;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mh-plant .pl-okt{font:800 12.5px var(--head);fill:#fff}
@media (max-width:600px){.mh-plant .pl-t{font-size:28px}.mh-plant .pl-aws{font-size:36px}.mh-plant .pl-sub{font-size:14px}.mh-plant .pl-k{font-size:12px}.mh-plant .pl-chip text{font-size:16px}.mh-plant .pl-live text,.mh-plant .pl-okt{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.mh-plant *{animation:none !important}.mh-plant .pl-pk{opacity:0}}

/* Console (26 October 2026, Manufacturing; Cyril did not like the factory or the diagram). A product-style operations
   panel: plant lines, systems checking in, an uptime sparkline marked as a sample view, and an AI agent's drafted fix
   awaiting a specialist's approval. HTML rather than SVG so the text stays crisp; no figures are claimed. */
.mh-art:has(.mh-console){aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.mh-console{position:relative;width:100%;max-width:470px;margin:10px auto 34px;border-radius:16px;background:#fff;color:#1f2a66;box-shadow:0 40px 80px -36px rgba(10,20,60,.6),0 0 0 1px rgba(255,255,255,.4);font-family:var(--body);text-align:left}
.mc-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #e7ebf4}
.mc-bar i{width:9px;height:9px;border-radius:50%;background:#dfe4ef}
.mc-bar span{margin-left:8px;font:800 13px var(--head);color:#1f2a66}
.mc-env{margin-left:auto;padding:3px 9px;border-radius:999px;background:rgba(97,212,195,.18);font:800 11px var(--head);color:#1f2a66}
.mc-body{padding:16px 18px 18px}
.mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.mc-k{display:block;margin-bottom:6px;font:700 10.5px var(--head);letter-spacing:.14em;text-transform:uppercase;color:#6b7393}
.mc-ok{display:flex;align-items:center;gap:8px;font:900 17px var(--head);color:#1f2a66}
.mc-ok em,.mc-lines em{display:inline-block;width:8px;height:8px;border-radius:50%;background:#50b1a3;box-shadow:0 0 0 0 rgba(80,177,163,.6);animation:mcPulse 2.4s ease-out infinite}
.mc-sample{padding:3px 8px;border:1px solid #e1e6f0;border-radius:6px;font:700 10.5px var(--head);color:#6b7393;white-space:nowrap}
.mc-grp{padding:12px 0;border-top:1px solid #eef1f7}
.mc-lines,.mc-sys{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.mc-lines li,.mc-sys li{display:grid;grid-template-columns:78px auto 1fr;align-items:center;gap:12px;margin:0;font-size:13.5px}
.mc-lines li:before,.mc-sys li:before{content:none}
.mc-lines li>span:first-child,.mc-sys li>span{font-weight:600;color:#3a4266}
.mc-lines b{display:inline-flex;align-items:center;gap:7px;font:800 12.5px var(--head);white-space:nowrap}
.mc-lines b.run{color:#2e8f80}
.mc-lines b.plan{color:#b8670d}.mc-lines b.plan em{background:#f89921;animation:none}
.mc-bar2{height:6px;border-radius:6px;background:#eef1f7;overflow:hidden}
.mc-bar2 i{display:block;height:100%;width:var(--w);border-radius:6px;background:linear-gradient(90deg,#3c5fac,#61d4c3);transform-origin:left;animation:mcGrow 1.4s cubic-bezier(.22,.61,.36,1) both}
.mc-sys li{grid-template-columns:1fr auto}
.mc-sys b{display:inline-flex;align-items:center;gap:6px;font:800 12.5px var(--head);color:#1f2a66}
.mc-sys svg{width:18px;height:18px;padding:3px;border-radius:50%;background:#61d4c3;fill:none;stroke:#1f2a66;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mc-sys li{animation:mcIn 9s ease infinite}.mc-sys .s1{animation-delay:.5s}.mc-sys .s2{animation-delay:1s}
.mc-spark{padding-top:12px;border-top:1px solid #eef1f7}
.mc-spark svg{display:block;width:100%;height:44px}
.mc-line{fill:none;stroke:#3c5fac;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:mcDraw 2.2s .4s cubic-bezier(.45,.05,.55,.95) forwards}
.mc-toast{position:absolute;right:-26px;bottom:-26px;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:#1f2a66;color:#fff;box-shadow:0 20px 40px -18px rgba(10,20,60,.7);animation:mcToast 9s ease infinite}
.mc-ai{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#3c5fac,#61d4c3);font:900 11px var(--head)}
.mc-toast b{display:block;font:800 12.5px var(--head)}.mc-toast small{display:block;margin-top:2px;font-size:11.5px;color:#bfe6f2}
@keyframes mcPulse{0%{box-shadow:0 0 0 0 rgba(80,177,163,.55)}70%,100%{box-shadow:0 0 0 7px rgba(80,177,163,0)}}
@keyframes mcGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mcDraw{to{stroke-dashoffset:0}}
@keyframes mcIn{0%,4%{opacity:.25}10%,92%{opacity:1}100%{opacity:.25}}
@keyframes mcToast{0%,30%{opacity:0;transform:translateY(10px)}38%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(10px)}}
@media (max-width:1100px){.mc-toast{right:-10px}}
@media (max-width:600px){.mh-console{margin-bottom:40px}.mc-lines li{grid-template-columns:58px auto 1fr;gap:9px}.mc-toast{right:8px;bottom:-30px}}
@media (prefers-reduced-motion:reduce){.mh-console *{animation:none !important}.mc-line{stroke-dashoffset:0}.mc-toast{opacity:1}}

/* Status (26 October 2026, Manufacturing; Cyril: the console was too complex). One card: AWS, "All systems normal",
   and the plant's three systems each checking in as running. Nothing else. */
.mh-art:has(.mh-status){aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.mh-status{width:100%;max-width:420px;margin:0 auto;padding:10px;border-radius:20px;background:rgba(255,255,255,.14);box-shadow:0 40px 80px -40px rgba(10,20,60,.6);backdrop-filter:blur(6px)}
.ms-h{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:14px;background:#fff;color:#1f2a66}
.ms-aws{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#3c5fac,#61d4c3);font:900 15px var(--head);color:#fff;letter-spacing:.02em}
.ms-h b{display:block;font:900 19px/1.2 var(--head)}.ms-h small{display:block;margin-top:3px;font-size:13.5px;color:#6b7393}
.ms-dot{width:10px;height:10px;margin-left:auto;border-radius:50%;background:#50b1a3;animation:msPulse 2.4s ease-out infinite}
.ms-list{display:grid;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.ms-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:15px 20px;border-radius:14px;background:rgba(255,255,255,.92);color:#1f2a66;animation:msIn 8s ease infinite}
.ms-list li:before{content:none}
.ms-list .s1{animation-delay:.6s}.ms-list .s2{animation-delay:1.2s}
.ms-n b{display:block;font:800 15.5px var(--head)}.ms-n small{display:block;margin-top:2px;font-size:12.5px;color:#6b7393}
.ms-ok{display:inline-flex;align-items:center;gap:7px;font:800 13px var(--head);color:#2e8f80}
.ms-ok svg{width:20px;height:20px;padding:3px;border-radius:50%;background:#61d4c3;fill:none;stroke:#1f2a66;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes msPulse{0%{box-shadow:0 0 0 0 rgba(80,177,163,.55)}70%,100%{box-shadow:0 0 0 8px rgba(80,177,163,0)}}
@keyframes msIn{0%,3%{opacity:.4;transform:translateX(6px)}9%,94%{opacity:1;transform:none}100%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.mh-status *{animation:none !important}}

/* Status, manufacturing cues (Cyril: something to show manufacturing): a factory in the header tile, an icon per
   system, and a faint factory roofline behind the card. */
.mh-status{position:relative;padding:0;background:none;box-shadow:none;backdrop-filter:none;max-width:440px}
.ms-sky{position:absolute;left:-12%;right:-12%;bottom:-18px;width:124%;height:auto;fill:rgba(255,255,255,.1);pointer-events:none}
.ms-card{position:relative;padding:10px;border-radius:20px;background:rgba(255,255,255,.14);box-shadow:0 40px 80px -40px rgba(10,20,60,.6);backdrop-filter:blur(6px)}
.ms-aws svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ms-list li{justify-content:flex-start}
.ms-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:rgba(60,95,172,.1)}
.ms-ic svg{width:19px;height:19px;fill:none;stroke:#3c5fac;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-ok{margin-left:auto}
/* the roofline stands clear of the card: wider than it, taller, and lighter enough to read as a plant */
.mh-status{margin-bottom:28px}
.ms-sky{left:-22%;right:auto;width:144%;bottom:-28px;fill:rgba(255,255,255,.17)}
@media (max-width:600px){.ms-sky{left:-6%;width:112%;bottom:-24px}}
/* on phones the roofline only shows as a slab under the card, so it is left out there */
@media (max-width:600px){.ms-sky{display:none}.mh-status{margin-bottom:0}}

/* Robot (26 October 2026, Manufacturing; from Cyril's isometric concept). One robot cell on a platform: a light slab
   with a dark bed and a dashed path, an arm working a part under a scan ring, and two callouts, "Line operating" and
   "Precision check". Gentle motion only: the arm sways, the path flows, the scan ring pulses, the callouts drift. */
.mh-art:has(.mh-robot){aspect-ratio:6/5}
.mh-net.mh-robot{-webkit-mask-image:none;mask-image:none;overflow:visible}
.mh-robot .rb-dot{fill:rgba(191,230,242,.55);animation:rbDot 5s ease-in-out infinite}
.mh-robot .rb-ring{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.4}
.mh-robot .rb-ring2{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.4;stroke-dasharray:3 7}
.mh-robot .rb-top{fill:url(#mhrbT);stroke:rgba(255,255,255,.9);stroke-width:1.5}
.mh-robot .rb-sideL{fill:#5d9fc8}.mh-robot .rb-sideR{fill:#3a76b3}
.mh-robot .rb-bed{fill:url(#mhrbB);stroke:rgba(255,255,255,.85);stroke-width:1.5}
.mh-robot .rb-grid{stroke:rgba(191,230,242,.22);stroke-width:1}
.mh-robot .rb-path{fill:none;stroke:#61d4c3;stroke-width:2.4;stroke-dasharray:12 9;animation:rbFlow 3s linear infinite}
.mh-robot .rb-bT{fill:#cfe9f2;stroke:#fff;stroke-width:1.4}.mh-robot .rb-bL{fill:#8fbfd8}.mh-robot .rb-bR{fill:#3f73b0}
.mh-robot .rb-cyl{fill:#b9dcea;stroke:#fff;stroke-width:1.4}.mh-robot .rb-cylT{fill:#e6f5fa;stroke:#fff;stroke-width:1.4}
.mh-robot .rb-seg{fill:none;stroke:#e3f3f8;stroke-linecap:round}
.mh-robot .rb-stripe{fill:none;stroke:rgba(60,95,172,.3);stroke-linecap:round}
.mh-robot .rb-rod{fill:none;stroke:#e3f3f8;stroke-width:9;stroke-linecap:round}
.mh-robot .rb-grip{fill:none;stroke:#e3f3f8;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mh-robot .rb-jo{fill:#e9f7fb;stroke:rgba(60,95,172,.35);stroke-width:6}.mh-robot .rb-jo.s{stroke-width:3}
.mh-robot .rb-ji{fill:#4f9fc2}
.mh-robot .rb-pT{fill:#eef9fc;stroke:#fff;stroke-width:1.2}.mh-robot .rb-pL{fill:#c3e3ee}.mh-robot .rb-pR{fill:#7fb6d2}
.mh-robot .rb-pS{stroke:#61d4c3;stroke-width:3;stroke-linecap:round;animation:rbStripe 3.2s ease-in-out infinite}
.mh-robot .rb-scan{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:rbScan 3.2s ease-out infinite}
.mh-robot .rb-scan2{fill:none;stroke:rgba(97,212,195,.8);stroke-width:1.6;stroke-dasharray:4 5}
.mh-robot .rb-arm{animation:rbArm 7s ease-in-out infinite}
.mh-robot .rb-fore{animation:rbFore 7s ease-in-out infinite}
.mh-robot .rb-lead{fill:none;stroke:rgba(255,255,255,.7);stroke-width:1.6;stroke-dasharray:2 5;stroke-linecap:round}
.mh-robot .rb-call rect{fill:#fff;filter:url(#mhrbSh)}
.mh-robot .rb-call circle{fill:#50b1a3;animation:rbBlink 2.4s ease-in-out infinite}
.mh-robot .rb-ct{font:900 16px var(--head);fill:#1f2a66}
.mh-robot .rb-cs{font:600 11.5px var(--body);fill:#6b7393}
.mh-robot .c1{animation:rbBob 6s ease-in-out infinite}.mh-robot .c2{animation:rbBob 6s ease-in-out infinite 3s}
@keyframes rbFlow{to{stroke-dashoffset:-42}}
@keyframes rbArm{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(2deg)}}
@keyframes rbFore{0%,100%{transform:rotate(1.5deg)}50%{transform:rotate(-2deg)}}
@keyframes rbScan{0%{transform:scale(.7);opacity:0}30%{opacity:1}100%{transform:scale(1.15);opacity:0}}
@keyframes rbStripe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes rbBlink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes rbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes rbDot{0%,100%{opacity:.35}50%{opacity:.9}}
@media (max-width:600px){.mh-robot .rb-ct{font-size:18px}.mh-robot .rb-cs{font-size:13px}}
@media (prefers-reduced-motion:reduce){.mh-robot *{animation:none !important}}
/* Transition: HCM joins FI / CO, SD and MM on both cards; a "Semantik Map" marker spans Pre-flight and Assess (26 October 2026) */
.mh-trans .tr-sem path{fill:none;stroke:rgba(97,212,195,.75);stroke-width:1.4;stroke-linecap:round}
.mh-trans .tr-sem rect{fill:#242a72;stroke:rgba(97,212,195,.85);stroke-width:1.2}
.mh-trans .tr-sem text{font:800 10.5px var(--head);letter-spacing:.04em;fill:#fff}
.mh-trans .tr-to .m3{animation:trM3 12s ease-out infinite}
@keyframes trM3{0%,76%{opacity:.35}79%,90%{opacity:1}97%,100%{opacity:.35}}
@media (max-width:600px){.mh-trans .tr-sem text{font-size:12px}}
@media (prefers-reduced-motion:reduce){.mh-trans .tr-to .m3{opacity:1}}