/* Cute Motion news final polish v2 */

/* "No news" mark: simple magenta exclamation, no background shape. */
.page-news .bell-icon{
  width:76px;
  height:76px;
  margin:0;
  border-radius:0;
  background:transparent;
  color:var(--hibiscus);
  font-size:64px;
  font-weight:900;
  line-height:1;
}

/* Benefits: identical magenta circles with white check marks. */
.page-news .news-features .round-icon{
  display:flex;
  width:55px;
  height:55px;
  margin:0 auto 10px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--hibiscus);
  color:#fff;
  font-size:0;
  line-height:1;
}
.page-news .news-features .round-icon::before{
  content:"✓";
  display:block;
  color:#fff;
  font-size:30px;
  font-weight:800;
  line-height:1;
  transform:translateY(-1px);
}

/* Phone image stage: cover the clipped badge baked into the source image and
   replace it with a complete HTML/CSS badge safely inside the card. */
.page-news .news-phone-stage{
  position:relative;
  width:100%;
  max-width:500px;
  margin:0 auto;
  line-height:0;
}
.page-news .news-phone-stage::before{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:-8%;
  width:32%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
}
.page-news .news-phone-stage > img{
  width:100%;
  max-width:none;
  margin:0;
}
.page-news .formation-badge{
  position:absolute;
  z-index:2;
  top:3.5%;
  right:0;
  width:29%;
  aspect-ratio:1;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px;
  background:var(--hibiscus);
  color:#fff;
  text-align:center;
  font-size:clamp(9px,1.05vw,14px);
  font-weight:700;
  line-height:1.42;
  letter-spacing:.01em;
}

@media(max-width:900px){
  .page-news .bell-icon{
    margin:auto;
    font-size:60px;
  }
  .page-news .formation-badge{
    font-size:clamp(7px,2.1vw,9px);
  }
}