/* 5 by Peaceful World — quiet step number inside the practice card */
.step-meta{display:flex;align-items:center;justify-content:center}
.step-meta span{display:none}
.step-meta small{font-size:.64rem;letter-spacing:.14em;color:var(--muted);padding-left:.14em}

/* Keep the step number in its own fixed row so guide length never moves it. */
.practice-card{
  position:relative;
  display:grid;
  grid-template-rows:104px 1fr;
  justify-content:stretch;
  align-items:stretch;
  padding-top:18px;
}

.step-number{
  margin:0;
  display:grid;
  place-items:center;
  color:rgba(103,118,103,.24);
  font-size:clamp(5.8rem,19vw,8.2rem);
  font-weight:680;
  line-height:.78;
  letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
  user-select:none;
  transform:none!important;
  transition:opacity .38s cubic-bezier(.22,.7,.25,1)!important;
}

.step-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-bottom:10px;
}

/* The step number never participates in the card's translateY animation. */
.practice-card.changing>.step-number{
  opacity:0;
  transform:none!important;
}
.practice-card.entering>.step-number{
  animation:stepNumberFadeIn .44s cubic-bezier(.22,.7,.25,1) both!important;
  transform:none!important;
}
@keyframes stepNumberFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* The number replaces the old "СЕЙЧАС" kicker as the visual anchor. */
.practice-card .kicker{display:none}

@media(max-height:720px){
  .practice-card{grid-template-rows:76px 1fr;padding-top:14px}
  .step-number{font-size:clamp(4.6rem,15vw,6.4rem)}
  .step-copy{padding-bottom:4px}
}

@media(max-height:620px){
  .practice-card{grid-template-rows:56px 1fr;padding-top:10px}
  .step-number{font-size:4.2rem}
  .step-copy{padding-bottom:0}
}

@media(orientation:landscape) and (max-height:520px){
  .practice-card{grid-template-rows:38px 1fr;padding-top:6px}
  .step-number{font-size:2.8rem;line-height:.75}
}

@media(prefers-reduced-motion:reduce){
  .step-number{transition-duration:.001ms!important}
  .practice-card.entering>.step-number{animation-duration:.001ms!important}
}

@media(prefers-contrast:more){
  .step-number{color:rgba(67,83,71,.38)}
}