/* Original explanatory graphic, shared by the desktop and mobile hero. */
.hero-technology{width:100%;max-width:480px;margin:0;padding:15px 18px 20px;border:1px solid #d7eb8273;border-radius:18px;background:#063823ed}
.hero-technology svg{display:block;width:100%;height:auto;overflow:visible}
.hero-technology figcaption{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;color:#f4f8ea;font-size:13px;font-weight:500;line-height:1.4;text-align:center}
.hero-technology .tech-packet,.hero-technology .tech-signal{animation-play-state:paused}
.hero-technology.has-entered .tech-signal{animation:r6-signal 1.7s 2 ease-in-out;transform-box:fill-box;transform-origin:center}
.hero-technology.has-entered .tech-packet{animation:r6-data-flow 3.4s ease-out both}
.hero-technology.has-entered .tech-packet-late{animation-delay:.35s}
.hero-technology.is-on-screen .tech-packet,.hero-technology.is-on-screen .tech-signal{animation-play-state:running}
.hero-technology:not(.is-on-screen) .tech-packet,.hero-technology:not(.is-on-screen) .tech-signal{animation-play-state:paused}
.page-is-hidden .hero-technology.is-on-screen *{animation-play-state:paused!important}
@keyframes r6-signal{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes r6-data-flow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:600px){.hero-technology{padding:10px 10px 16px;border-radius:15px}.hero-technology figcaption{font-size:13px;line-height:1.4;gap:6px}}
@media(prefers-reduced-motion:reduce){.hero-technology *{animation:none!important}.hero-technology .tech-packet{stroke-dashoffset:0!important}}