/* === Průvodce krok za krokem === */


.pk-steps{
  --brand:#efdf05;
  --t:#111111;
  --b:rgba(17,17,17,.10);

  /* výrazně světlejší žluté pozadí odvozené z brandu */
  --bg:color-mix(in srgb, var(--brand) 6%, #ffffff);

  margin:22px 0;
  color:var(--t);
}

/* H2 – necháváme webové styly, jen spacing */
.pk-steps__title{
  margin:0 0 14px;
}

.pk-steps__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
}

.pk-step{
  position:relative;

  /* méně "spodní ochranné zóny" */
  padding:12px 16px 2px; /* top | sides | bottom */

  border:1.5px dashed var(--b);
  border-radius:16px;
  background:var(--bg);
}

/* větší číslo v kolečku */
.pk-step__badge{
  position:absolute;
  left:22px;
  top:-10px;
  width:46px;
  height:46px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background:#111;
  color:var(--brand);
  font-weight:900;
  font-size:16px;

  border:5px solid #fff;
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

/* H3 – webové styly, jen odsazení kvůli badge + odstranění extra marginů */
.pk-step__head{
  padding-left:66px;
  margin:0 0 4px;     /* pevně malé odsazení */
}

/* běžný text – jako body text webu, ale bez extra marginů */
.pk-step__text{
  padding-left:66px;
  margin:0;           /* klíč: žádný margin-bottom */
  color:inherit;
  font:inherit;
}

/* spojnice mezi kroky (zarovnaná na střed badge) */
.pk-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:45px;
  top:38px;
  bottom:-14px;
  width:2px;

  background:color-mix(in srgb, var(--brand) 70%, #ffffff);
  border-radius:2px;
}

/* fallback pro prohlížeče bez color-mix */
@supports not (color: color-mix(in srgb, #000 50%, #fff)){
  .pk-steps{ --bg: rgba(239,223,5,.06); }
  .pk-step:not(:last-child)::after{ background: rgba(239,223,5,.70); }
}