:is(.systems-page, .websites-page--service) .websites-principles__grid article {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 1.25rem;
  align-content: start;
}
:is(.systems-page, .websites-page--service) .websites-principles__grid article > span,
:is(.systems-page, .websites-page--service) .websites-principles__grid article > h3,
:is(.systems-page, .websites-page--service) .websites-principles__grid article > p { grid-column: 2; }
:is(.systems-page, .websites-page--service) .websites-principles__grid article > h3 { margin: 1.1rem 0 .7rem; }
:is(.systems-page, .websites-page--service) .websites-principles__grid article > p { margin: 0; }
:is(.systems-page, .websites-page--service) .system-benefit-art {
  grid-column: 1;
  grid-row: 1 / 4;
  width: 96px;
  height: 77px;
  margin: 1.25rem 0 0;
}
.system-benefit-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.system-benefit-art__shape {
  stroke: #747b78;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.system-benefit-art__shape rect,
.system-benefit-art--access .system-benefit-art__shape > path:first-child { fill: #f5f6f5; }
.system-benefit-art__energy {
  stroke: #2ae63d;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  filter: drop-shadow(0 0 2px #2ae63db3) drop-shadow(0 0 5px #2ae63d66);
}
.system-benefit-art__flow { stroke-dasharray: 12 88; animation: benefit-data-travel 2.4s linear infinite; }
.system-benefit-art__flow--second { animation-delay: -1.2s; }
.system-benefit-art__pulse { animation: benefit-line-pulse 4s ease-in-out infinite; }
.system-benefit-art__arrow { animation-duration: 2.4s; }
.system-benefit-art__streak { opacity: 0; animation: benefit-upload-speed 1.1s linear infinite; }
.system-benefit-art__streak--two { animation-delay: -.28s; }
.system-benefit-art__streak--three { animation-delay: -.55s; }
.system-benefit-art__streak--four { animation-delay: -.82s; }
@keyframes benefit-data-travel {
  0% { stroke-dashoffset: 12; opacity: 0; }
  12%, 75% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes benefit-line-pulse { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
@keyframes benefit-upload-speed {
  0% { opacity: 0; transform: translateY(-10px); }
  22%, 58% { opacity: 1; }
  100% { opacity: 0; transform: translateY(38px); }
}
@media (max-width: 1400px) {
  :is(.systems-page, .websites-page--service) .websites-principles__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :is(.systems-page, .websites-page--service) .websites-principles__grid article { grid-template-columns: 80px minmax(0, 1fr); column-gap: 1rem; }
  :is(.systems-page, .websites-page--service) .system-benefit-art { width: 80px; height: 64px; }
}
@media (max-width: 380px) {
  :is(.systems-page, .websites-page--service) .websites-principles__grid article { grid-template-columns: 60px minmax(0, 1fr); column-gap: .75rem; }
  :is(.systems-page, .websites-page--service) .system-benefit-art { width: 60px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .system-benefit-art__energy > path { animation: none; }
  .system-benefit-art__flow { opacity: .7; stroke-dasharray: none; }
  .system-benefit-art__pulse { opacity: .65; }
  .system-benefit-art__streak { display: none; }
}

.website-benefit-art__device-pulse { animation-delay: -2s; }