/* Mobile-only replacement for the desktop orbital process graphic. */
@media (max-width: 780px) {
  .direct-visual {
    width: 100%;
    height: auto;
    min-height: 360px;
    margin: 0;
    padding: 34px 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 126px auto;
    gap: 18px 12px;
    place-items: center;
    transform: none;
    isolation: isolate;
  }

  .direct-visual::before,
  .direct-visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }

  .direct-visual::before {
    width: min(270px, 78vw);
    height: min(270px, 78vw);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 34px;
  }

  .direct-visual::after {
    width: 176px;
    height: 176px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(200, 111, 69, .18);
    border-radius: 50%;
  }

  .direct-visual svg {
    display: none;
  }

  .direct-center {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 104px;
    height: 104px;
    position: relative;
    z-index: 2;
  }

  .direct-node {
    position: static;
    width: min(145px, 42vw);
    min-height: 42px;
    padding: 10px 12px;
    display: grid;
    place-items: center;
    text-align: center;
    transform: none;
    z-index: 2;
  }

  .node-one {
    grid-column: 1;
    grid-row: 1;
  }

  .node-two {
    grid-column: 2;
    grid-row: 1;
  }

  .node-three {
    grid-column: 2;
    grid-row: 3;
  }

  .node-four {
    grid-column: 1;
    grid-row: 3;
  }
}

@media (max-width: 390px) {
  .direct-visual {
    min-height: 330px;
    grid-template-rows: auto 110px auto;
    gap: 14px 8px;
    padding-inline: 0;
  }

  .direct-node {
    width: min(132px, 41vw);
    padding-inline: 8px;
    font-size: 8px;
  }

  .direct-center {
    width: 92px;
    height: 92px;
    font-size: 28px;
  }
}