/* Story heroes share a mobile flow: illustration, then the full introduction. */
@media (max-width:760px) {
 body.myko-case .case-hero,
 body.migration-case .case-hero {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  min-height:0;
  padding:3rem clamp(1.25rem,8vw,3rem);
  gap:2rem;
  overflow:hidden;
 }
 body.myko-case .case-hero > div:first-child,
 body.migration-case .case-hero > div:first-child {
  width:100%;
  max-width:none;
  min-width:0;
 }
 body .case-hero > :is(.myko-hero-visual,.migration-hero-art,.plugin-translation-hero,.ll-hero-art,.yubl-hero-art,.ah-hero-art) {
  position:relative;
  inset:auto;
  order:-1;
  align-self:center;
  width:100%;
  max-width:24rem;
  height:auto;
  min-width:0;
  margin:0;
  padding:0;
  transform:none;
 }
 body .case-hero .migration-hero-art { display:flex;align-items:center;justify-content:center; }
 body .case-hero .migration-hero-art > :is(img,svg) { width:100%;max-width:100%;height:auto;margin:0;transform:none; }
 body .case-hero > .ll-hero-art { height:18rem; }
 body .case-hero > .yubl-hero-art { width:min(80%,18rem);margin:1rem auto; }
 body .case-hero > .ah-hero-art { width:min(90%,22rem);margin:1rem auto; }
 body .case-hero > .plugin-translation-hero { margin-top:1rem; }
 body .case-hero .plugin-translation-stage { min-height:16rem;padding:1rem; }
 body .case-hero .plugin-translation-layer { font-size:clamp(1.65rem,7.5vw,2.5rem);overflow-wrap:anywhere; }
 body .case-hero .plugin-translation-layer.is-leaving { inset:1rem; }
 body .case-hero .plugin-translation-locales { flex-wrap:wrap;gap:.65rem;margin-top:1rem; }
 body .case-hero .plugin-translation-stage::before { font-size:clamp(.5rem,2.3vw,.75rem); }
 body .case-hero h1 { max-width:100%;overflow-wrap:break-word; }
}