/* Destination guide: how to get connected, travel data guide, FAQ. Phone first, 1024px desktop. */
.rz-guide { padding-top: 48px; }
.rz-guide .h2 { font-size: min(var(--rz-fs-h2), 32px); }
.rz-guide__link { font: 600 15px var(--rz-font-display); color: var(--rz-link); text-decoration: none; }
.rz-guide__link:hover { text-decoration: underline; }

/* Steps: .grid.grid--4 stacks on phones, 2 across at 768px, 4 at 1024px. .card gives the white tile. */
.rz-guide__steps { list-style: none; margin: 0; padding: 0; }
.rz-step { display: flex; flex-direction: column; gap: 10px; }
.rz-step__num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--rz-step-tint); color: var(--rz-deep); display: inline-flex; align-items: center; justify-content: center; font: 600 16px var(--rz-font-display); }
.rz-step p { color: var(--rz-n-700); font: 400 var(--rz-fs-small)/var(--rz-lh-body) var(--rz-font-body); }

/* Guide text and FAQ: one column on phones, two at 1024px. */
.rz-guide__cols { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.rz-guide__text { display: flex; flex-direction: column; gap: 12px; }
.rz-guide__text p { color: var(--rz-n-700); font: 400 var(--rz-fs-body)/var(--rz-lh-body) var(--rz-font-body); }
.rz-guide__faq { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 1024px) {
  .rz-step { gap: 14px; }
  .rz-step__num { width: 48px; height: 48px; font-size: 18px; }
  .rz-step p { font-size: var(--rz-fs-body); }
  .rz-guide__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}