/* v6: deterministic badge lettering, consistent arrows and roomier steps. */

/* A square, font-independent arrow inherits each control's text colour. */
.icon-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  min-width: 1em;
  flex: 0 0 1em;
  aspect-ratio: 1;
  vertical-align: -.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The existing mobile rule continues to hide the badge below 561 px. */
@media (min-width: 561px) {
  .hero__seal > img {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
    object-fit: contain;
  }
}

/* The same legible type sizes on phones and desktop, without lighter text. */
.journey-steps h3 { font-size: 1.125rem; font-weight: 700; }
.journey-steps p { font-size: 1.0625rem; line-height: 1.6; font-weight: 500; }

/* Desktop: one clearly separated, full-width row per step. */
@media (min-width: 821px) {
  .journey-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .journey-steps::before { display: none; }
  .journey-steps li {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 24px 28px;
    border: 1px solid rgba(18, 62, 64, .15);
    border-radius: 20px;
    background: rgba(255, 255, 255, .6);
  }
  .journey-steps li > span {
    width: 48px;
    height: 48px;
    margin: 0;
    border: 0;
    outline: none;
  }
  .journey-steps li > div {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr);
    gap: 28px;
    align-items: start;
  }
  .journey-steps h3 { margin: 0; }
}

@media (min-width: 821px) and (max-width: 1040px) {
  .journey-steps li > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

@media print {
  .journey-steps li { break-inside: avoid; }
}