/* ===================== Get Started ===================== */
.get-start { padding: 81px 0 20px; }
.get-start h1 { padding-bottom: 10px; font-size: 55px; font-weight: 700; line-height: 71.5px; color: #1f1f1f; text-align: center; }

.get-start-row { display: grid; grid-template-columns: 423px 1fr; column-gap: 63px; margin-top: 87px; }
.qr { padding-top: 5px; }
.qr img { width: 100%; }

/* numbered steps joined by a dashed orange line */
.steps { list-style: none; margin-right: -12px; }
.steps li { display: grid; grid-template-columns: 46px 1fr; min-height: 102px; }
.step-num {
  position: relative;
  align-self: start;
  width: 40px;
  height: 40px;
  margin-top: 31px;
  padding-top: 8px;
  border-radius: 50px;
  background: var(--orange);
  color: var(--white);
  font-size: 17px;
  font-weight: 500;
  line-height: 25.5px;
  text-align: center;
}
.step-num::before,
.step-num::after {
  content: "";
  position: absolute;
  left: 19px;
  width: 0;
  height: 29px;
  border-left: 1px dashed rgb(255, 165, 0);
  border-right: 1px dashed rgb(255, 165, 0);
}
.step-num::before { bottom: 100%; margin-bottom: 2px; }
.step-num::after { top: 100%; }
.steps p { padding: 25px 12px 0 25px; font-size: 22px; font-weight: 500; line-height: 29px; color: var(--ink-2); }

@media (min-width: 981px) and (max-width: 1279px) {
  .steps li:last-child p br { display: none; }
}

@media (max-width: 991px) {
  .get-start { padding: 80px 0 70px; }
  .get-start h1 { font-size: 43px; line-height: 42px; }
  .get-start-row { grid-template-columns: 1fr; margin-top: 68px; }
  .qr { padding-top: 0; }
  .steps { margin-top: 50px; }
  .steps li { grid-template-columns: calc(16.667% + 4px) 1fr; }
}

@media (max-width: 767px) {
  .get-start { padding: 80px 0 70px; }
  .get-start h1 { font-size: 26px; line-height: 42px; }
  .get-start h1 br { display: none; }
  .get-start-row { margin-top: 0; }
  .qr { display: none; }
  .steps { margin-top: 99px; }
  .steps p { padding: 25px 12px 0 20px; font-size: 17px; line-height: 24px; }
}