/* AutoSchools V2.0.12 — exact Hero boundary rendering in Telegram WebViews. */
.role-hero {
  --hero-boundary-radius:28px;
  overflow:hidden !important;
  contain:paint;
  clip-path:inset(0 round var(--hero-boundary-radius));
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Keep every animated artwork plane inside the same rounded card boundary.
   The explicit WebKit mask prevents transformed children from escaping the
   radius in Telegram's iOS WebView compositor. */
.role-hero-art-layer,
.role-hero-visual,
.approved-role-art {
  inset:0 !important;
  border-radius:inherit;
  overflow:hidden !important;
}

.role-hero-art-layer,
.role-hero-visual {
  transform:none !important;
  transition:none !important;
}

.role-hero-art-layer,
.approved-role-art {
  contain:paint;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
}

.approved-role-art .approved-role-image {
  top:0 !important;
  right:0 !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
  object-position:right top;
  transform:none !important;
  transform-origin:100% 50% !important;
  animation:none !important;
}

.role-hero--guest,
.role-hero--account,
.role-hero--student,
.role-hero--instructor,
.role-hero--director,
.role-hero--franchise,
.role-hero--platform { --hero-art-right:0%; }

@media (max-width:430px) {
  .role-hero { --hero-boundary-radius:24px; }
}

@media (max-width:390px) {
  .role-hero { --hero-boundary-radius:23px; }
}