@media(max-width:760px){
  /* Training top bar now uses the same visual language as the Home welcome banner. */
  body.training-placeholder-active .portal-top{
    position:relative!important;
    width:calc(100% - 20px)!important;
    height:86px!important;
    min-height:86px!important;
    margin:10px 10px 6px!important;
    padding:0 15px!important;
    gap:12px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(130deg,#07503b 0%,#096246 62%,#16905b 100%)!important;
    box-shadow:0 10px 24px rgba(4,62,43,.14)!important;
  }
  body.training-placeholder-active .portal-top::after{
    content:''!important;
    position:absolute!important;
    right:-34px!important;
    top:-58px!important;
    width:190px!important;
    height:190px!important;
    border-radius:50%!important;
    background:radial-gradient(circle,rgba(198,255,118,.24),rgba(198,255,118,0) 68%)!important;
    pointer-events:none!important;
  }
  body.training-placeholder-active .portal-top .portal-menu{
    position:relative!important;
    z-index:2!important;
    width:44px!important;
    height:44px!important;
    flex:0 0 44px!important;
    border:1px solid rgba(255,255,255,.09)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.11)!important;
    color:#fff!important;
    font-size:22px!important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
  }
  body.training-placeholder-active .portal-top>div:nth-child(2){
    position:relative!important;
    z-index:2!important;
    min-width:0!important;
  }
  body.training-placeholder-active .portal-top .portal-eyebrow{display:none!important}
  body.training-placeholder-active .portal-top h1{
    margin:0!important;
    color:#fff!important;
    font-size:0!important;
    line-height:1.05!important;
    font-weight:850!important;
    letter-spacing:-.025em!important;
    white-space:nowrap!important;
  }
  body.training-placeholder-active .portal-top h1::before{
    content:'Тренування та тестування'!important;
    display:block!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1.05!important;
    font-weight:850!important;
    letter-spacing:-.025em!important;
  }
  body.training-placeholder-active .portal-top h1::after{
    content:'Крок за кроком до впевнених знань.'!important;
    display:block!important;
    margin-top:6px!important;
    color:#b9d7ca!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:550!important;
    letter-spacing:0!important;
  }
  body.training-placeholder-active .portal-user{display:none!important}

  /* The subtitle is now inside the green top banner, so remove its duplicate above the stepper. */
  .training-journey-intro{
    margin:0 auto 14px!important;
    padding-top:0!important;
  }
  .training-journey-intro h2,
  .training-journey-intro p{
    display:none!important;
  }

  /* Stage 01: remove the explanatory paragraph and collapse the freed space. */
  .training-entry-card-start{
    grid-template-areas:'icon step status' 'icon title status' '. footer footer'!important;
    min-height:132px!important;
    padding-top:16px!important;
    padding-bottom:15px!important;
  }
  .training-entry-card-start p{
    display:none!important;
  }
  .training-entry-card-start .training-entry-footer{
    margin-top:4px!important;
    padding-top:8px!important;
  }

  /* Stage 02: move the text block upward as marked in the mock-up. */
  .training-entry-card-primary .training-entry-step,
  .training-entry-card-primary h2,
  .training-entry-card-primary p{
    transform:translateY(-16px)!important;
  }
  .training-entry-card-primary .training-entry-step{
    margin-bottom:10px!important;
  }
  .training-entry-card-primary p{
    margin-top:10px!important;
  }
}

@media(max-width:380px){
  body.training-placeholder-active .portal-top h1::before{font-size:18px!important}
  body.training-placeholder-active .portal-top h1::after{font-size:10px!important}
  .training-entry-card-primary .training-entry-step,
  .training-entry-card-primary h2,
  .training-entry-card-primary p{
    transform:translateY(-13px)!important;
  }
}