.online-process {
  margin-top: 2.5rem;
}
.online-process > h3 {
  font-size: 1.35rem;
  color: var(--brand-dark);
  margin: 0 0 1.25rem;
}
.online-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2.5rem;
  padding-left: 1.5rem;
  margin: 0;
}
.online-steps li::marker {
  color: var(--brand);
  font-weight: 800;
}
.online-steps strong {
  color: var(--brand-dark);
}
.online-steps p {
  margin: 0.5rem 0 0;
  color: var(--muted-ink);
  line-height: 1.6;
}
.mobile-appointment {
  display: none;
}
@media (max-width: 900px) {
  .online-steps {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  html {
    scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
  body.with-mobile-appointment {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-appointment {
    display: block;
    position: fixed;
    z-index: 9;
    inset: auto 0 0;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    border-top: 1px solid var(--line);
  }
  .mobile-appointment a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding: 0.7rem 1rem;
    background: var(--brand-dark);
    color: #fff;
    border-radius: var(--radius);
    text-align: center;
    text-decoration: none;
    font-weight: 750;
    line-height: 1.3;
  }
  body:has(dialog[open]) .mobile-appointment,
  body:has(.site-header.is-open) .mobile-appointment {
    visibility: hidden;
  }
}
@media print {
  body.with-mobile-appointment {
    padding-bottom: 0;
  }
  .mobile-appointment {
    display: none;
  }
}