/* 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)}